* {
  box-sizing: border-box;
}
:root {
  --demo-h: 0px;
}
html {
  scroll-behavior: smooth;
  background: var(--bg, #fff);
}
body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #222);
}
a {
  color: inherit;
}
button {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
}
.catalogue-page {
  max-width: 1100px;
  margin: auto;
  padding-bottom: 12px;
}
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ph, #e9e8e3);
  color: var(--mute, #888);
  min-height: 120px;
  font:
    400 42px Georgia,
    serif;
}
.tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  top: 0;
  gap: 12px;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.inspect {
  position: relative;
  min-width: 0;
}
.product-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: inherit;
}
.product-hit:focus-visible {
  outline: 3px solid var(--accent, var(--brand, #776194));
  outline-offset: 4px;
}
.location-label {
  text-align: center;
  color: var(--mute, #888);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 12px 16px 0;
}
.catalogue-note {
  display: block;
  opacity: 0.65;
  margin-top: 20px;
  font-size: 9px;
}
.product-unit {
  font-size: 10px;
  opacity: 0.6;
}
.category-label {
  font: 500 9px system-ui;
  margin-left: 9px;
  border: 1px solid currentColor;
  padding: 2px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.variant-unavailable {
  font-size: 10px;
  opacity: 0.55;
}
.theme-clean-slate .hero {
  aspect-ratio: 16/10;
  max-height: 350px;
}
.theme-clean-slate .hero-t h1 {
  font-size: 36px;
}
.theme-clean-slate .intro h2 {
  font-size: 19px;
  letter-spacing: 0.06em;
}
.theme-clean-slate .grid {
  padding: 0 16px;
  gap: 26px 12px;
}
.theme-clean-slate .sec-h {
  padding-top: 24px;
}
.theme-kitchen-table .id {
  padding-top: 26px;
}
.theme-kitchen-table > .socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 10px;
  margin-top: 12px;
}
.theme-kitchen-table > .socials .soc span {
  display: inline;
}
.theme-kitchen-table .grid {
  row-gap: 24px;
}
.theme-doodle-diary .hero {
  max-height: 300px;
}
.theme-doodle-diary .hero-t h1 {
  font-size: 32px;
}
.theme-doodle-diary .card .badge {
  font-size: 9px;
  max-width: 100px;
}
.theme-doodle-diary .doodle-star {
  font-size: 24px;
  color: var(--plum);
}
.theme-quiet-hours .intro h1 {
  font-size: 29px;
}
.theme-quiet-hours .location-label {
  text-align: left;
  padding-left: 20px;
}
.theme-quiet-hours .sec-h {
  font-size: 19px;
}
.theme-paper-and-ink .sec-h .script {
  font-size: 38px;
}
.theme-paper-and-ink .sizes {
  font-size: 12px;
}
.theme-paper-and-ink .item .pic {
  position: relative;
}
.theme-slow-morning .hero {
  min-height: 260px;
  max-height: 340px;
}
.theme-slow-morning .row {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
}
.theme-slow-morning .row .pic {
  position: relative;
}
.theme-slow-morning .row img,
.theme-slow-morning .row .ph {
  width: 88px;
  height: 88px;
  min-height: 88px;
}
.theme-slow-morning .row .ds {
  font-size: 11px;
}
.theme-slow-morning .row .nm {
  font-size: 15px;
}
.theme-shout .top {
  grid-template-columns: 1fr 75px;
  padding-top: 28px;
}
.theme-shout .top h1 {
  font-size: 42px;
  overflow-wrap: anywhere;
}
.theme-shout .mascot {
  width: 70px;
  height: 70px;
  font-size: 42px;
}
.theme-shout .tag {
  font-size: 12px;
  max-width: 100%;
  line-height: 1.4;
}
.theme-slow-morning .location-label {
  text-align: left;
  padding-left: 18px;
}
.theme-shout .location-label {
  text-align: left;
  padding-left: 16px;
}
.theme-shout .board li button {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.theme-shout .board li button span {
  position: static;
  white-space: nowrap;
  font-size: 12px;
}
.theme-shout .tile {
  position: relative;
}
.theme-shout .tile .pic {
  position: relative;
}
.theme-shout .tile .left {
  font-size: 9px;
}
.theme-candlelight .cover .pic img,
.theme-candlelight .cover .pic .ph {
  aspect-ratio: 16/10;
  max-height: 320px;
  object-fit: cover;
}
.theme-candlelight .cover h1 {
  font-size: 25px;
  overflow-wrap: anywhere;
}
.theme-candlelight .cover .sig {
  font-size: 16px;
}
.theme-candlelight .sp .hero {
  max-height: 400px;
}
.theme-candlelight .sp h3 {
  font-size: 23px;
}
.theme-candlelight .candle-summary {
  font: italic 17px var(--font-title);
  color: var(--mute);
  align-self: center;
}
.theme-candlelight .tbl {
  font-size: 10px;
}
.theme-candlelight .inset {
  gap: 16px;
}
.theme-candlelight .location-label {
  color: var(--mute);
}
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.soc {
  text-decoration: none;
}
.foot .made {
  font-size: 10px;
}
.foot .made b {
  font-weight: 500;
}
.product-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: 90vh;
  width: calc(100% - 24px);
  max-width: 650px;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: #fff;
  color: #302b37;
  font:
    13px/1.6 system-ui,
    sans-serif;
  box-shadow: 0 16px 80px #0003;
  overflow: hidden;
}
.product-dialog-scroll {
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
  overscroll-behavior: contain;
}
/* A modal owns the scroll: the page (or the dashboard's preview frame) behind it stays put,
   so scrolling never chains into hidden space and "eats" the first swipes back up. */
html:has(dialog[open]) {
  overflow: hidden;
}
.product-dialog::backdrop {
  background: #15111c80;
  backdrop-filter: blur(3px);
}
.product-preview-detail {
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.product-preview-detail .product-dialog-scroll {
  max-height: none;
  overflow: visible;
}
.catalogue-page:has(.product-preview-detail) {
  padding: 0;
  min-height: 0;
}
.detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  width: 34px;
  height: 34px;
  border: 1px solid #e8e5ed;
  border-radius: 50%;
  background: #ffffffed;
  color: #61566e;
  z-index: 5;
  font-size: 24px;
  cursor: pointer;
}
.detail-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  min-height: 230px;
  background: #f4f2f5;
}
.detail-gallery .detail-photo {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.detail-gallery img,
.detail-gallery .ph {
  width: 100%;
  height: 300px;
  object-fit: cover;
  scroll-snap-align: start;
}
.detail-body {
  padding: 26px;
}
.detail-eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #a39aa9;
}
.detail-body h1 {
  font:
    500 23px/1.3 system-ui,
    sans-serif;
  margin: 9px 0 12px;
}
.detail-summary {
  color: #908594;
  font-size: 12px;
  white-space: pre-line;
}
.detail-body h2 {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  margin: 24px 0 10px;
}
.detail-body h2 small {
  font-weight: 400;
  color: #a89cae;
  font-size: 10px;
}
.detail-list {
  border-top: 1px solid #eee8f1;
}
.detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eee8f1;
  font-size: 12px;
}
.detail-list b {
  font-weight: 500;
  white-space: nowrap;
  font-size: 11px;
  color: #887492;
}
.detail-list small {
  display: block;
  font-size: 10px;
  color: #a394ab;
}
.detail-attributes {
  font-size: 11px;
}
.detail-attributes > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #eee8f1;
}
.detail-attributes dt {
  color: #a394ab;
}
.detail-attributes dd {
  margin: 0;
}
.detail-note {
  font-size: 10px;
  color: #b2a6b8;
  margin: 24px 0 0;
}
.detail-alert {
  padding: 10px;
  border-radius: 6px;
  color: #a47362;
  background: #fff5ef;
  font-size: 11px;
  margin: 16px 0;
}
@media (min-width: 650px) {
  .catalogue-page {
    padding-bottom: 30px;
  }
  .theme-clean-slate .grid,
  .theme-kitchen-table .grid,
  .theme-quiet-hours .grid,
  .theme-paper-and-ink .grid,
  .theme-shout .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 18px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .theme-clean-slate .hero {
    aspect-ratio: 21/9;
    max-height: 400px;
  }
  .theme-clean-slate .sec-h {
    padding: 30px 28px 18px;
  }
  .theme-clean-slate .card .nm {
    font-size: 14px;
  }
  .theme-kitchen-table .id {
    padding-top: 40px;
  }
  .theme-doodle-diary .hero {
    max-height: 380px;
  }
  .theme-doodle-diary .hero-t h1 {
    font-size: 44px;
  }
  .theme-doodle-diary .card {
    margin: 0 30px 16px;
    padding: 20px;
    grid-template-columns: 1fr 160px;
  }
  .theme-doodle-diary .card img {
    width: 160px;
    height: 160px;
  }
  .theme-quiet-hours .intro {
    padding: 48px 30px 12px;
  }
  .theme-quiet-hours .intro h1 {
    font-size: 40px;
  }
  .theme-quiet-hours .sec-h {
    padding-left: 28px;
  }
  .theme-paper-and-ink .page {
    padding: 40px 30px;
  }
  .theme-slow-morning .hero {
    max-height: 400px;
    min-height: 340px;
  }
  .theme-slow-morning .row {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 125px minmax(0, 1fr);
    padding: 20px;
  }
  .theme-slow-morning .row img,
  .theme-slow-morning .row .ph {
    width: 125px;
    height: 125px;
  }
  .theme-slow-morning .row .nm {
    font-size: 20px;
  }
  .theme-slow-morning .row .ds {
    font-size: 14px;
  }
  .theme-shout .top {
    padding: 40px 30px 15px;
    grid-template-columns: 1fr 124px;
  }
  .theme-shout .top h1 {
    font-size: 70px;
  }
  .theme-shout .mascot {
    width: 110px;
    height: 110px;
    font-size: 65px;
  }
  .theme-shout .board {
    margin: 25px 30px;
  }
  .theme-candlelight .cover .pic {
    max-width: 650px;
    margin: auto;
  }
  .theme-candlelight .cover .pic img {
    max-height: 420px;
    aspect-ratio: 16/9;
  }
  .theme-candlelight .cover h1 {
    font-size: 35px;
    margin: 10px 0 20px;
  }
  .theme-candlelight .sp {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  .theme-candlelight .sp .hero {
    max-height: 460px;
  }
  .theme-candlelight .sp h3 {
    font-size: 30px;
  }
  .theme-candlelight .tbl {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ticker-track {
    animation: none !important;
    padding-left: 16px !important;
  }
}
@media (min-width: 650px) {
  .theme-slow-morning .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 18px;
    padding-inline: 28px;
  }
  .theme-slow-morning .top {
    padding: 40px 30px 24px;
  }
  .theme-slow-morning .location-label {
    padding-left: 30px;
  }
}
/* One short label per card, never wrapped (the corner badge shows the first label only). */
.badge {
  white-space: nowrap;
}
.catalogue-original-price {
  display: block;
  font-size: max(12px, 0.8em);
  font-weight: 400;
  opacity: 0.65;
}
.detail-gallery-wrap {
  position: relative;
}
.detail-gallery {
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.detail-gallery::-webkit-scrollbar {
  display: none;
}
.detail-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffffe6;
  color: #302b37;
  line-height: 1;
  box-shadow: 0 2px 10px #0000002e;
  cursor: pointer;
}
.detail-gallery-arrow svg,
.photo-viewer-nav svg {
  display: block;
  width: 22px;
  height: 22px;
}
.detail-gallery-arrow[hidden] {
  display: none;
}
.detail-gallery-arrow.prev {
  left: 10px;
}
.detail-gallery-arrow.next {
  right: 10px;
}
@media (hover: none) {
  /* Touch screens swipe; arrows stay for keyboard and mouse users only. */
  .detail-gallery-arrow {
    display: none;
  }
}
.detail-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.detail-gallery-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff99;
  box-shadow: 0 0 3px #0006;
  transition:
    width 0.2s,
    background 0.2s;
}
.detail-gallery-dots i.active {
  width: 18px;
  border-radius: 4px;
  background: #fff;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.foot .made a {
  position: relative;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 44px tap area around the small credit link without changing the footer layout. */
.foot .made a::after {
  content: '';
  position: absolute;
  inset: -15px -10px;
}
.catalogue-page.is-editing .editable-text {
  outline: 1.5px dashed color-mix(in srgb, currentColor 55%, transparent);
  outline-offset: 0;
  /* Editing only: 2px of air on each side keeps stacked outlines 4px apart; ::after keeps a
     44px-ish tap area without growing the box. The live catalogue is untouched. */
  padding: 2px 6px;
  margin: 2px -6px;
  position: relative;
  border-radius: 3px;
  cursor: text;
  min-width: 2ch;
  display: inline-block;
}
.catalogue-page.is-editing .editable-text::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}
.catalogue-page.is-editing .editable-text:hover,
.catalogue-page.is-editing .editable-text:focus {
  outline-style: solid;
  outline-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.detail-gallery:focus-visible {
  outline: 2px solid #61566e;
  outline-offset: -2px;
}
.store-announcement,
.store-notice {
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
  background: var(--bg, #f4f2f5);
}
.store-announcement {
  font-weight: 700;
}
.detail-option-group h3 {
  margin: 0;
  padding: 12px 12px 0;
}
.detail-option-group {
  margin-top: 14px;
  padding-bottom: 4px;
  border: 1px solid #eee8f1;
  border-radius: 10px;
}
.detail-option-group .detail-list {
  margin: 0 12px;
}
.detail-combinations {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #ddd4e2;
  border-radius: 12px;
  background: #f8f6f9;
}
.detail-combinations > h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.detail-combinations > p {
  margin: 0 0 10px;
  color: #66596f;
  font-size: 12px;
}
.detail-combinations .detail-list {
  border-top-color: #ddd4e2;
}
.detail-combinations .detail-list > div:last-child {
  border-bottom: 0;
}
.detail-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}
.detail-choice-limit {
  color: #61566e;
  font-size: 12px;
}
.category-tab-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75em;
  opacity: 0.8;
}
.modifier-price-summary {
  margin: 12px 0;
}
.modifier-price-summary small {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
}

.no-hero-photo .cover {
  min-height: 0;
  padding-top: 32px;
  padding-bottom: 24px;
}
.no-hero-photo .intro {
  padding-top: 24px;
  padding-bottom: 24px;
}
.compact-tagline {
  padding: 16px 24px;
  margin: 0;
}
.detail-close {
  min-width: 44px;
  min-height: 44px;
}
.detail-contact {
  display: block;
  padding: 14px 18px;
  margin-top: 24px;
  border: 1px solid currentColor;
  border-radius: 12px;
  font: inherit;
  text-decoration: none;
}
.category-tab {
  min-height: 44px;
}
.catalogue-page .store-notice,
.catalogue-page .store-announcement,
.detail-choice-limit,
.detail-note {
  font-size: 13px;
  line-height: 1.6;
}
.catalogue-page .pr {
  color: var(--ink);
}
.catalogue-page .ds,
.catalogue-page .notes {
  font-size: 13px;
  line-height: 1.6;
}
.catalogue-page .notes,
.theme-candlelight .candle-summary {
  white-space: pre-line;
}
.detail-summary,
.detail-eyebrow,
.detail-list small,
.detail-body h2 small {
  color: #66596f;
  font-size: 13px;
}
.detail-list > div,
.detail-list b,
.detail-attributes {
  font-size: 13px;
}
.detail-list b {
  color: #44324f;
}
.tabs a,
.soc {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.detail-body h1 {
  padding-right: 32px;
}
.catalogue-page .logo {
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.catalogue-page header h1,
.dash-product-info strong {
  overflow-wrap: anywhere;
}
.theme-clean-slate .hero-t h2 {
  font: 400 44px/1 var(--font-title);
  margin: 0;
}
.theme-doodle-diary .hero-t h2 {
  font: 600 38px/1.02 var(--font-title);
  color: var(--plum);
  margin: 0;
}

.tap-mouse {
  display: none;
}
@media (pointer: fine) {
  .tap-touch {
    display: none;
  }
  .tap-mouse {
    display: inline;
  }
}
.detail-zoom-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 20px;
  padding: 6px 12px;
  background: #17131ddd;
  color: white;
  font:
    12px/1.5 system-ui,
    sans-serif;
}
.product-dialog-scroll:not(:has(.detail-gallery)) .detail-body {
  padding-top: 58px;
}
.photo-viewer {
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(100% - 16px);
  height: 94vh;
  height: 94dvh;
  max-width: 1100px;
  max-height: none;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: #17131d;
  color: #fff;
  overflow: hidden;
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.photo-viewer::backdrop {
  background: #080610cc;
}
.photo-viewer-header {
  height: 64px;
  padding: 18px 64px 12px 16px;
  box-sizing: border-box;
}
.photo-viewer-header span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-viewer-body {
  height: calc(100% - 154px);
  overflow: auto;
  overscroll-behavior: contain;
}
.photo-zoom-image {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.photo-zoom-image img,
.photo-zoom-image .ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-viewer-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.photo-viewer-controls button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #786d85;
  border-radius: 8px;
  background: #302b37;
  color: white;
  font: inherit;
  cursor: pointer;
}
.photo-viewer-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}
.photo-viewer-help {
  text-align: center;
  margin: 0;
  font-size: 12px;
  padding: 0 8px;
}
.store-info {
  background: var(--bg, #fff);
  color: var(--ink, #302b37);
  max-width: 620px;
  margin: 20px max(16px, calc((100% - 620px) / 2)) 12px;
  text-align: left;
  padding: 24px;
  border: 1px solid var(--line, currentColor);
  border-radius: 12px;
  font:
    14px/1.6 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
.store-info h2 {
  font:
    600 20px/1.4 system-ui,
    sans-serif;
  margin: 0 0 12px;
}
.store-info h3 {
  font:
    600 14px/1.5 system-ui,
    sans-serif;
  margin: 16px 0 4px;
}
.store-info .store-info-field p {
  white-space: pre-line;
  margin: 0;
  font: inherit;
}
.store-info a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  padding: 4px 10px;
  margin: 8px 8px 0 0;
}
.store-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
}
.store-status.open {
  background: #e4f3e4;
  color: #215629;
}
.store-status.closed {
  background: #f3e6e6;
  color: #853232;
}
.store-info .store-chat {
  border: 1px solid currentColor;
  border-radius: 8px;
  font-weight: 600;
}

.store-info-jump {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-left: 12px;
  color: var(--ink, #302b37);
  font:
    14px/1.5 system-ui,
    sans-serif;
  text-decoration: underline;
}

.store-info .store-maps {
  display: inline-flex;
  min-height: 44px;
  padding: 0;
  margin: 0;
  font-weight: 600;
}
.store-info-notice {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink, #302b37) 7%, transparent);
  white-space: pre-line;
}

.detail-price {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 700;
}
.detail-price del {
  margin-right: 8px;
  font-size: 15px;
  font-weight: 400;
}

/* Dashboard preview: briefly mark the product being edited. */
.catalogue-page .preview-focus {
  outline: 3px solid #437742;
  outline-offset: 4px;
  border-radius: 6px;
  transition: outline-color 0.6s;
}

/* Compact Info toko: one line of essentials, details on demand. */
.catalogue-page .store-info {
  padding: 10px 14px;
  margin-top: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
}
.store-info-bar {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.store-info .store-status {
  padding: 2px 10px;
  font-size: 13px;
}
.store-info-peek {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.store-info .store-info-bar .store-chat {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.store-info-more > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.store-info-more > summary::-webkit-details-marker {
  display: none;
}
.store-info-more > summary::after {
  content: '▾';
  margin-left: 6px;
}
.store-info-more[open] > summary::after {
  content: '▴';
}
.store-info-more .store-info-field h3 {
  margin-top: 8px;
}

/* The whole strip is the toggle: one row, details open below it. */
.store-info-bar {
  flex-wrap: nowrap;
  min-height: 44px;
}
summary.store-info-bar {
  list-style: none;
  cursor: pointer;
}
summary.store-info-bar::-webkit-details-marker {
  display: none;
}
.store-info-peek {
  flex: 1 1 0;
  -webkit-line-clamp: 1;
}
.store-info-toggle {
  display: inline-block;
  font-style: normal;
  transition: transform 0.15s;
}
details.store-info[open] .store-info-toggle {
  transform: rotate(180deg);
}
details.store-info[open] > .store-info-notice:first-of-type {
  margin-top: 10px;
}

/* ---------- Product details follow the active template ---------- */
.product-dialog {
  background: var(--surface, var(--bg, #fff));
  color: var(--ink, #302b37);
  font:
    14px/1.6 var(--font-body, system-ui),
    sans-serif;
}
.product-dialog .detail-body h1,
.product-dialog .detail-body h2,
.product-dialog .detail-combinations > h3,
.product-dialog .detail-price {
  font-family: var(--font-title, inherit);
  color: var(--ink, #302b37);
}
.product-dialog .detail-eyebrow {
  color: var(--theme-accent, #61566e);
  font-weight: 700;
}
.product-dialog .detail-summary,
.product-dialog .detail-list small,
.product-dialog .detail-body h2 small,
.product-dialog .detail-choice-limit,
.product-dialog .detail-attributes dt,
.product-dialog .detail-note {
  color: var(--mute, #66596f);
}
.product-dialog .detail-list,
.product-dialog .detail-list > div,
.product-dialog .detail-attributes > div {
  border-color: var(--line, color-mix(in srgb, currentColor 15%, transparent));
}
.product-dialog .detail-list b {
  color: var(--ink, #302b37);
  font-weight: 700;
}
.product-dialog .detail-combinations,
.product-dialog .detail-option-group {
  background: color-mix(in srgb, var(--ink, #302b37) 4%, var(--surface, #fff));
  border-color: var(--line, color-mix(in srgb, currentColor 15%, transparent));
}
.product-dialog .detail-gallery {
  background: color-mix(in srgb, var(--ink, #302b37) 6%, var(--surface, #fff));
}
.product-dialog .detail-contact {
  color: var(--theme-accent, currentColor);
  border-color: var(--theme-accent, currentColor);
  font-weight: 700;
  text-align: center;
}
.detail-variant-group + .detail-variant-group {
  margin-top: 12px;
}
.detail-variant-group h4 {
  margin: 10px 0 4px;
  font: 700 13px/1.4 var(--font-body, system-ui);
  color: var(--theme-accent, inherit);
}
.detail-list > div.is-out {
  opacity: 0.55;
}
/* Close button: smaller and clear of the scrollbar. */
.product-dialog .detail-close,
.photo-viewer .detail-close {
  top: 12px;
  right: 18px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: var(--surface, #fff);
  color: var(--ink, #302b37);
  border: 1px solid var(--line, #0002);
  box-shadow: 0 2px 8px #0002;
}
.photo-viewer .detail-close {
  position: static;
  background: #fff;
  color: #17131d;
}
/* Photo viewer: previous / next, centred on the photo area (the stage), not the dialog. */
.photo-viewer-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.photo-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffffe6;
  color: #17131d;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.photo-viewer-nav[hidden] {
  display: none;
}
.photo-viewer-nav.prev {
  left: 12px;
}
.photo-viewer-nav.next {
  right: 12px;
}

/* ---------- Variation prices on cards ---------- */
.variant-prices {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  font-size: 0.92em;
}
.variant-prices .vp {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.variant-prices .vp > span {
  opacity: 0.75;
  text-align: left;
}
.variant-prices .vp b {
  font-weight: inherit;
  white-space: nowrap;
}
.variant-prices .vp.is-out {
  opacity: 0.5;
  text-decoration: line-through;
}
.theme-doodle-diary .variant-prices,
.theme-shout .variant-prices,
.theme-kitchen-table .variant-prices {
  margin-inline: 0;
}

/* ---------- Kitchen Table: the store logo sits in the circle ---------- */
.theme-kitchen-table .id .logo {
  overflow: hidden;
  background: #fff;
}
.theme-kitchen-table .id .logo img,
.theme-kitchen-table .id .logo .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Labels on photos: solid chips that stay readable on any photo. */
.theme-kitchen-table .badge {
  background: #fff;
  color: #2b2e1c;
  box-shadow: 0 1px 6px #0003;
}
.theme-kitchen-table .badge.out {
  background: #2b2e1c;
  color: #fff;
}
.theme-candlelight .badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #111314;
  font-weight: 700;
}
.theme-candlelight .badge.out {
  background: #f1e8ec;
  border-color: #f1e8ec;
  color: #111314;
}

/* ---------- Shout: store logo in the round badge ---------- */
.theme-shout .mascot {
  overflow: hidden;
}
.theme-shout .mascot img,
.theme-shout .mascot .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Candlelight: price right under the photo ---------- */
.theme-candlelight .sp .hero {
  overflow: hidden;
}
.theme-candlelight .sp .inset {
  margin-top: 16px;
  align-items: center;
}
.theme-candlelight .sp .inset .tbl {
  margin-top: 0;
}
.theme-candlelight .sp .inset:not(:has(img, .ph)) {
  display: block;
}
.theme-candlelight .sp .inset:not(:has(img, .ph)) .candle-summary {
  margin-bottom: 10px;
}
.theme-candlelight .candle-from {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Photo viewer: counter and close share one row; the photo takes the rest. */
.photo-viewer[open] {
  display: flex;
  flex-direction: column;
}
.photo-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: auto;
  padding: 12px 16px;
}
.photo-viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  color-scheme: dark;
}
.photo-viewer-help {
  padding: 0 16px 12px;
}

/* The note is shown once, in the strip; two lines before it truncates. */
.store-info-bar .store-info-peek {
  -webkit-line-clamp: 2;
}

/* ---------- Audit fixes: legibility and consistency across templates ---------- */
/* Detail sheet: only the product name uses the display face; section headings stay readable. */
.product-dialog .detail-body h2,
.product-dialog .detail-combinations > h3 {
  font-family: var(--font-body, system-ui), sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.detail-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.detail-labels span {
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--theme-accent, #302b37);
  color: var(--surface, #fff);
  font-size: 12px;
  font-weight: 700;
}
/* Close: 44px target on phones, theme-coloured focus ring only for keyboard users. */
.product-dialog .detail-close {
  right: 22px;
}
.product-dialog .detail-close:focus:not(:focus-visible) {
  outline: none;
}
.product-dialog .detail-close:focus-visible {
  outline: 2px solid var(--theme-accent, currentColor);
  outline-offset: 2px;
}
@media (max-width: 650px) {
  .product-dialog .detail-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Variation price list: same size and baseline for name and price, in every theme. */
.variant-prices .vp {
  align-items: baseline;
}
.variant-prices .vp > span,
.variant-prices .vp b {
  font-size: inherit;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  color: inherit;
}
.catalogue-page .pr,
.catalogue-page .tile > span,
.catalogue-page .t > span {
  white-space: nowrap;
}
.catalogue-page .pr:has(.variant-prices),
.catalogue-page .tile > span:has(.variant-prices),
.catalogue-page .t > span:has(.variant-prices) {
  white-space: normal;
  display: block;
  margin-top: 6px;
}

/* Category chips look tappable in the two themes that drew plain text. */
.theme-clean-slate .tabs .tab,
.theme-kitchen-table .tabs .tab {
  padding: 6px 14px;
  border: 1px solid var(--line, currentColor);
  border-radius: 99px;
  min-height: 36px;
}

/* Footer credit readable everywhere; centred like the links. */
.catalogue-page .foot .made {
  font-size: 12px;
  /* Darker than --mute so the credit stays above 4.5:1 on every theme background. */
  color: color-mix(in srgb, var(--mute) 70%, var(--ink));
}
.theme-quiet-hours .foot {
  text-align: center;
}

/* Kitchen Table: logo circle centred with the title. */
.theme-kitchen-table .id .logo {
  margin: 0 auto 12px;
}

/* Doodle Diary: readable labels, store name leads, description supports. */
.theme-doodle-diary .badge {
  font-size: 12px;
}
.theme-doodle-diary .badge.out {
  background: var(--plum);
  color: #fff;
}
.theme-doodle-diary .bar .logo {
  font-size: 28px;
}
.theme-doodle-diary .hero-t h2 {
  font-size: 22px;
  line-height: 1.25;
}
.theme-doodle-diary .card h3 {
  margin-bottom: 6px;
}

/* Candlelight: variation rows and category links readable on black. */
.theme-candlelight .tbl {
  font-size: 12px;
  letter-spacing: 0.08em;
}
.theme-candlelight .tabs .tab {
  color: var(--ink);
  opacity: 0.85;
}

/* Paper & Ink: prices at reading size. */
.theme-paper-and-ink .sizes {
  font-size: 17px;
  font-style: normal;
}

/* Slow Morning: seller text keeps its own capitals; only the greeting is lowercase. */
.theme-slow-morning,
.theme-slow-morning * {
  text-transform: none;
}
.theme-slow-morning .top .hi {
  text-transform: lowercase;
}

/* Shout: title breathes above the price list. */
.theme-shout .tile .t h3 {
  margin-bottom: 6px;
}

/* ---------- Audit round 2 ---------- */
.theme-doodle-diary .card .badge,
.theme-doodle-diary .badge {
  font-size: 12px;
  max-width: none;
}
.theme-clean-slate .badge,
.theme-candlelight .badge {
  font-size: 11.5px;
}
.theme-clean-slate .tabs .tab,
.theme-kitchen-table .tabs .tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.theme-candlelight .tabs .tab {
  font-size: 13px;
}
.catalogue-page .location-label {
  font-size: 12px;
}
@media (max-width: 650px) {
  .photo-viewer .detail-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.theme-quiet-hours .badge,
.theme-slow-morning .badge {
  font-size: 11.5px;
}

/* ---------- Doodle Diary: store name centred; the first card's label clears what is above ---------- */
.theme-doodle-diary .bar {
  justify-content: center;
}
.theme-doodle-diary .bar .logo {
  white-space: normal;
  text-align: center;
}
.theme-doodle-diary section:not(:has(.sec-h)) {
  padding-top: 18px;
}
.theme-doodle-diary .sec-h {
  margin-bottom: 20px;
}

/* ---------- Paper & Ink: the store name is the masthead, like the other templates ---------- */
.theme-paper-and-ink .masthead h1 {
  font-size: clamp(44px, 14vw, 76px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.theme-paper-and-ink .masthead p {
  margin-top: 12px;
  font-size: 18px;
}
/* Cormorant Garamond runs small, so the detail sheet is set a size up (about 18px body). */
.product-dialog[data-theme='paper-and-ink'] {
  font-size: 18px;
  line-height: 1.5;
}
.product-dialog[data-theme='paper-and-ink'] .detail-body h1 {
  font-size: 38px;
  line-height: 1.1;
}
.product-dialog[data-theme='paper-and-ink'] .detail-eyebrow,
.product-dialog[data-theme='paper-and-ink'] .detail-labels span {
  font-size: 13px;
  letter-spacing: 0.14em;
}
.product-dialog[data-theme='paper-and-ink'] .detail-summary,
.product-dialog[data-theme='paper-and-ink'] .detail-alert,
.product-dialog[data-theme='paper-and-ink'] .detail-list > div,
.product-dialog[data-theme='paper-and-ink'] .detail-list b,
.product-dialog[data-theme='paper-and-ink'] .detail-attributes,
.product-dialog[data-theme='paper-and-ink'] .detail-contact {
  font-size: 18px;
}
.product-dialog[data-theme='paper-and-ink'] .detail-body h2,
.product-dialog[data-theme='paper-and-ink'] .detail-combinations > h3,
.product-dialog[data-theme='paper-and-ink'] .detail-variant-group h4 {
  font-size: 17px;
}
.product-dialog[data-theme='paper-and-ink'] .detail-list small,
.product-dialog[data-theme='paper-and-ink'] .detail-body h2 small,
.product-dialog[data-theme='paper-and-ink'] .detail-choice-limit,
.product-dialog[data-theme='paper-and-ink'] .detail-combinations > p,
.product-dialog[data-theme='paper-and-ink'] .detail-note {
  font-size: 15px;
}
.product-dialog[data-theme='paper-and-ink'] .detail-price {
  font-size: 26px;
}
@media (max-width: 650px) {
  .product-dialog[data-theme='paper-and-ink'] .detail-body {
    padding: 22px 18px;
  }
  .product-dialog[data-theme='paper-and-ink'] .detail-body h1 {
    font-size: 34px;
  }
}
/* Logo beside the store name; sized from the heading so every theme scales it. */
.catalogue-page .brand-mark {
  display: inline-block;
  height: max(1.15em, 36px);
  max-height: 64px;
  width: auto;
  max-width: 3.5em;
  margin-right: 0.35em;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 6px;
}
.catalogue-page .product-desc {
  margin: 4px 0 6px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalogue-page.is-editing .editable-text:empty::before {
  content: attr(data-placeholder);
  opacity: 0.55;
  font-style: italic;
}
.theme-paper-and-ink .masthead .brand-mark {
  display: block;
  margin: 0 auto 10px;
}
/* The display rules above would otherwise override [hidden] on a broken logo. */
.catalogue-page .brand-mark[hidden] {
  display: none !important;
}