/* Public website: layout on top of the application design system (tokens.css, base.css, components.css).
   Buttons, fields, cards, status pills and toasts are the app's own components; this file adds only the
   site frame (header, footer, sections) and shop/account layouts. Blue is the only brand color. */

.site {
  --site-width: 1440px;
  --site-gutter: var(--space-24);
  background: var(--bg-page);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site h1, .site h2, .site h3 { font-weight: var(--weight-semibold); }
/* scrollbar-gutter keeps the scrollbar's space on short pages too, so the layout never shifts between pages. */
.site-main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-gutter: stable; }
.site-container { width: 100%; max-width: var(--site-width); min-width: 0; margin: 0 auto; padding: 0 var(--site-gutter); }
.site-skip { position: absolute; left: -9999px; top: 0; }
.site-skip:focus { left: var(--space-16); top: var(--space-16); z-index: 100; background: var(--bg-surface); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); }
.site-preview { display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); background: var(--warning-soft); color: var(--warning); font-size: var(--text-s); font-weight: var(--weight-semibold); text-align: center; }

/* ---------- Header: the application's .app-header (layout.css) with the website navigation ---------- */
.site-header { position: relative; }
/* Header and footer content line up with the page column (.site-container) on wide screens instead of
   sitting at the window edges while the content sits inset. */
.site-header, .site .app-footer {
  --site-inset: max(var(--site-gutter), calc((100% - var(--site-scrollbar, 0px) - var(--site-width)) / 2 + var(--site-gutter)));
  padding-inline: var(--site-inset) calc(var(--site-inset) + var(--site-scrollbar, 0px));
}
.site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.site-nav__links { display: flex; gap: var(--space-4); }
.site-nav__links a { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); color: var(--text-secondary); font-weight: var(--weight-semibold); }
.site-nav__links a:hover { background: var(--bg-hover); color: var(--text-primary); }
.site-nav__links a[aria-current="page"] { color: var(--brand-primary); background: var(--brand-primary-light); }
.site-nav-toggle { display: none; }
.site-mobile-nav { display: none; }

@media (max-width: 767.98px) {
  .site { --site-gutter: var(--space-16); }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); display: none; }
  .site-nav.is-open { display: block; }
  .site-nav__links { flex-direction: column; padding: var(--space-8) var(--space-16) var(--space-16); }
  .site-nav-toggle { display: inline-flex; }
}

@media (max-width: 767.98px) {
  .site-main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .site-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    display: flex;
    gap: 0;
    padding: 0 var(--space-4) env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border-light);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -5px 20px rgb(25 44 79 / 7%);
    backdrop-filter: blur(14px);
  }

  .site-mobile-nav__item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .site-mobile-nav__icon { display: grid; width: 56px; height: var(--space-28); place-items: center; border-radius: var(--radius-16); color: inherit; }
  .site-mobile-nav__item .material-symbols-rounded { font-size: var(--icon-size-l); }
  .site-mobile-nav__item.is-active { color: var(--brand-primary); }
  .site-mobile-nav__item.is-active .site-mobile-nav__icon { background: var(--brand-primary-light); }
  .site .app-footer { display: none; }

  .site-header {
    min-height: 56px;
    height: 56px;
    padding-inline: var(--space-12);
    box-shadow: 0 1px 8px rgb(25 44 79 / 4%);
  }

  .site-header .app-header__end { gap: var(--space-4); }
  .site-header .app-header__end > .icon-btn { width: 34px; height: 34px; }
}

/* ---------- Sections ---------- */
.site-section { padding: var(--space-32) 0; }
.site-section + .site-section { padding-top: 0; }
.site-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-20); flex-wrap: wrap; }
.site-section__title { font-size: var(--text-xl); line-height: var(--leading-tight); }
.site-section__desc { color: var(--text-secondary); margin-top: var(--identity-text-gap); }

/* Page hero: a contained, rounded panel in the page column (same edges as the home slider, header and footer).
   The panel is drawn by ::before inside the container's gutters, so every page keeps its plain markup. */
.site-page-head { padding-top: var(--space-24); }
.site-page-head > .site-container { position: relative; isolation: isolate; padding: var(--card-padding) calc(var(--site-gutter) + var(--card-padding)); }
.site-page-head > .site-container::before { content: ''; position: absolute; inset: 0 var(--site-gutter); z-index: -1; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
@media (max-width: 767.98px) { .site-page-head { padding-top: var(--space-16); } }
.site-page-head p { color: var(--text-secondary); margin-top: var(--space-8); max-width: 70ch; }
.site-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-8); font-size: var(--text-s); color: var(--text-tertiary); margin-bottom: var(--space-12); }
.site-breadcrumb a { color: var(--text-tertiary); }
.site-breadcrumb a:hover { color: var(--brand-primary); }

/* ---------- Home slider ----------
   Full-width designed images only (1920 x 640, 3:1): Welcome Slide Photos then running promotions' photos. All
   slides share one grid cell at a fixed 3:1 ratio, so nothing below jumps and a 3:1 design is never cropped. The
   active dot's fill runs for data-interval ms; when it ends site.js moves on - pausing the fill (hover, focus,
   the pause button, a hidden tab) pauses the slider with it. */
/* Contained slider: sits in the page column with rounded corners, so the header, slider, content and footer
   share one left and right edge on every screen width. */
.site-hero { padding-top: var(--space-24); }
.site-slider { --slide-interval: 6000ms; position: relative; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; }
.site-slider__track { display: grid; aspect-ratio: 3 / 1; overflow: hidden; touch-action: pan-y; }
.site-slide { grid-area: 1 / 1; display: block; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.site-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.site-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--icon-size-2xl); height: var(--icon-size-2xl); padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; opacity: 0; transition: opacity var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.site-slider__arrow--prev { left: var(--space-16); }
.site-slider__arrow--next { right: var(--space-16); }
.site-slider:hover .site-slider__arrow, .site-slider__arrow:focus-visible { opacity: 1; }
.site-slider__arrow:hover { background: var(--bg-hover); }
.site-slider__bar { position: absolute; left: 50%; bottom: var(--space-12); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface); }
.site-slider__dots { display: flex; align-items: center; gap: var(--space-8); }
.site-slider__dot { position: relative; width: var(--space-16); height: var(--space-4); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--border-default); cursor: pointer; transition: width var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.site-slider__dot::after { content: ''; position: absolute; inset: calc(var(--space-8) * -1) calc(var(--space-4) * -1); } /* taller tap target than the 4px bar */
.site-slider__dot:hover { background: var(--brand-primary-soft); }
.site-slider__dot.is-active { width: var(--space-32); background: var(--brand-primary-soft); }
.site-slider__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--brand-primary); transform: scaleX(0); transform-origin: left center; }
.site-slider__dot.is-active .site-slider__fill { animation: site-slider-fill var(--slide-interval) linear forwards; }
.site-slider.is-paused .site-slider__dot.is-active .site-slider__fill { animation-play-state: paused; }
@keyframes site-slider-fill { to { transform: scaleX(1); } }
.site-slider__toggle { display: grid; place-items: center; width: var(--space-24); height: var(--space-24); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; }
.site-slider__toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.site-slider__toggle .material-symbols-rounded { font-size: var(--icon-size-s); }
@media (max-width: 767.98px) { .site-hero { padding-top: var(--space-16); } .site-slider__arrow { display: none; } .site-slider__bar { bottom: var(--space-8); } }
@media (prefers-reduced-motion: reduce) { .site-slide, .site-slide.is-active { transition: none; } }
.site-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); min-width: 0; }
.site-feature { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--card-padding); }
.site-feature .material-symbols-rounded { color: var(--brand-primary); font-size: var(--icon-size-xl); }
.site-feature h3 { font-size: var(--text-l); margin-top: var(--space-12); }
.site-feature p { color: var(--text-secondary); font-size: var(--text-m); margin-top: var(--space-4); }
@media (max-width: 767.98px) {
  .site-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) { .site-features { grid-template-columns: 1fr; } }

/* ---------- Cards (products, projects, posts) ---------- */
.site-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); }
@media (max-width: 767.98px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-24); }
.site-card { position: relative; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; color: var(--text-primary); transition: border-color var(--duration-fast) var(--ease-standard); }
.site-card:hover { border-color: var(--border-strong); }
.site-card__media { aspect-ratio: 4 / 3; background: var(--bg-subtle); display: grid; place-items: center; color: var(--text-muted); overflow: hidden; }
.site-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Blog cards use the usual 16:9 cover shape, so cover images with text in them are not cut off. */
.site-card__media--wide { aspect-ratio: 16 / 9; }
/* Shop cards are square like shop photos (1:1 is the usual product photo shape), so nothing is cut off. */
.site-card__media--square { aspect-ratio: 1 / 1; }
.site-card__media .material-symbols-rounded { font-size: var(--icon-size-2xl); }
.site-card__body { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.site-card__meta { font-size: var(--text-s); color: var(--text-tertiary); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.site-card__title { font-size: var(--text-l); font-weight: var(--weight-semibold); }
.site-card__title a { color: inherit; }
.site-card__title a::after { content: ''; position: absolute; inset: 0; }
.site-card__text { color: var(--text-secondary); font-size: var(--text-m); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: auto; padding-top: var(--space-12); }
.site-price { font-weight: var(--weight-semibold); color: var(--text-primary); }
.site-card__save { position: absolute; top: var(--space-12); right: var(--space-12); z-index: 2; background: var(--bg-surface); }
.site-card__save.is-saved .material-symbols-rounded, .site-save.is-saved .material-symbols-rounded { color: var(--danger); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }

/* ---------- Filters ---------- */

/* ---------- Item page ---------- */
/* Item page: gallery (4:3, whole photo, never cropped) beside a buy card; the card stays in view while the gallery
   scrolls. Details and related items follow in their own sections. */
.site-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.site-item__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--bg-subtle); border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--text-muted); overflow: hidden; }
/* Detail photo: the whole photo, never cropped - it sits inside the frame on a soft backdrop. */
/* Absolutely placed so the frame, not the photo, sets the height ("height: 100%" does not resolve in the grid box). */
.site-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.site-item__media .material-symbols-rounded { font-size: var(--icon-size-2xl); }
.site-buy { position: sticky; top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-buy__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.site-buy__price { display: flex; flex-direction: column; gap: var(--space-4); }
.site-buy__price > span { color: var(--text-tertiary); font-size: var(--text-s); }
.site-item__price { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--text-primary); }
.site-stock { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; padding: var(--space-4) var(--space-12); border: 1px solid var(--border-default); border-radius: var(--radius-pill); font-size: var(--text-s); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.site-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.site-stock[data-state="in"] { color: var(--success); }
.site-stock[data-state="in"]::before { background: var(--success); }
.site-stock[data-state="out"] { color: var(--danger); }
.site-stock[data-state="out"]::before { background: var(--danger); }
.site-stock[data-state="order"]::before { background: var(--brand-primary); }
.site-item__buy { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-8); padding-top: var(--space-20); border-top: 1px solid var(--border-default); }
.site-item__row { display: flex; gap: var(--space-12); align-items: flex-end; flex-wrap: wrap; }
.site-buy__add { flex: 1; justify-content: center; min-width: 160px; }
.site-item__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-12); }
.site-item__options .field { min-width: 0; }
.site-buy__promises { list-style: none; margin: var(--space-8) 0 0; padding: var(--space-16) 0 0; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-12); }
.site-buy__promises li { display: flex; gap: var(--space-12); align-items: flex-start; }
.site-buy__promises li > .material-symbols-rounded { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-8); background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--icon-size-s); }
.site-buy__promises li > div { display: flex; flex-direction: column; min-width: 0; }
.site-buy__promises b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.site-buy__promises span:not(.material-symbols-rounded) { color: var(--text-secondary); font-size: var(--text-s); }
.site-buy__ask { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; margin-top: var(--space-4); color: var(--brand-primary); font-size: var(--text-s); font-weight: var(--weight-semibold); }
.site-buy__ask:hover { text-decoration: underline; }
.site-buy__ask .material-symbols-rounded { font-size: var(--icon-size-s); }
.site-details-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
@media (max-width: 767.98px) {
  .site-item { grid-template-columns: 1fr; }
  .site-item__media { aspect-ratio: 1 / 1; }
  .site-buy { position: static; }
}

/* ---------- Quantity stepper ---------- */

/* ---------- Cart & checkout ---------- */
/* Same two-column grid as the reading pages (.site-read): main two thirds, side column one third. */
.site-cart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.site-cart__lines { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-cart__line { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: var(--space-16); align-items: center; padding: var(--card-padding); }
.site-cart__line + .site-cart__line { border-top: 1px solid var(--border-light); }
.site-cart__thumb { width: 64px; height: 64px; border-radius: var(--radius-8); background: var(--bg-subtle); display: grid; place-items: center; color: var(--text-muted); overflow: hidden; }
.site-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.site-cart__name { font-weight: var(--weight-semibold); color: var(--text-primary); }
.site-cart__variant { font-size: var(--text-s); color: var(--text-tertiary); }
.site-cart__total { min-width: 110px; text-align: right; font-weight: var(--weight-semibold); }
.site-checkout__line { grid-template-columns: 64px minmax(0, 1fr) auto auto; padding: var(--space-12) 0; }
.site-checkout__line + .site-checkout__line { border-top: 1px solid var(--border-light); }
.site-checkout__quantity { color: var(--text-secondary); font-size: var(--text-s); white-space: nowrap; }
.site-checkout__line .site-cart__total { min-width: 90px; }
.site-summary { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-12); position: sticky; top: var(--space-24); }
.site-checkout-sections { display: flex; flex-direction: column; gap: var(--space-12); position: sticky; top: var(--space-24); }
.site-checkout-sections .site-summary { position: static; }
.site-summary h2 { font-size: var(--text-l); }
.site-summary__title, .site-read__title { display: flex; align-items: center; gap: var(--space-8); }
.site-summary__title .material-symbols-rounded, .site-read__title .material-symbols-rounded { color: var(--brand-primary); font-size: var(--icon-size-m); }
.site-summary__row { display: flex; justify-content: space-between; gap: var(--space-12); color: var(--text-secondary); }
.site-summary__row--total { color: var(--text-primary); font-weight: var(--weight-semibold); font-size: var(--text-l); padding-top: var(--space-12); border-top: 1px solid var(--border-default); }
.site-loyalty-summary { display: grid; gap: var(--space-8); padding: var(--space-12) 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.site-loyalty-summary__header { align-items: center; color: var(--text-primary); }
.site-loyalty-summary__header strong { display: inline-flex; align-items: center; gap: var(--space-4); }
.site-loyalty-summary__header .material-symbols-rounded { font-size: var(--icon-size-s); color: var(--accent); }
.site-summary__note { font-size: var(--text-s); color: var(--text-tertiary); }
.site-summary .btn { justify-content: center; width: 100%; }
@media (max-width: 767.98px) {
  .site-cart { grid-template-columns: 1fr; }
  .site-summary, .site-checkout-sections { position: static; }
  .site-account--checkout, .site-account--cart, .site-account--track { grid-template-columns: 1fr; }
  .site-account--checkout > .site-account__content,
  .site-account--cart > .site-account__content,
  .site-account--track > .site-account__content { display: flex; }
  .site-account--checkout .site-checkout-layout,
  .site-account--cart .site-cart,
  .site-account--track .site-read { display: grid; }
  .site-account--checkout .site-checkout-layout > form,
  .site-account--checkout .site-checkout-layout > aside,
  .site-account--cart .site-cart > :first-child,
  .site-account--cart .site-cart > aside,
  .site-account--track .site-read > .site-read__stack,
  .site-account--track .site-read > .site-read__aside { grid-column: auto; }
}
@media (max-width: 767.98px) {
  .site-cart__line { grid-template-columns: 56px 1fr auto; grid-template-areas: 'thumb info remove' 'thumb qty total'; row-gap: var(--space-8); }
  .site-cart__thumb { grid-area: thumb; width: 56px; height: 56px; }
  .site-cart__info { grid-area: info; }
  .site-cart__line .site-qty { grid-area: qty; justify-self: start; }
  .site-cart__total { grid-area: total; min-width: 0; }
  .site-cart__remove { grid-area: remove; }
  .site-checkout__line { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'thumb info total' 'thumb info quantity'; }
  .site-checkout__line .site-cart__thumb { grid-area: thumb; }
  .site-checkout__line .site-cart__info { grid-area: info; }
  .site-checkout__line .site-checkout__quantity { grid-area: quantity; justify-self: end; }
  .site-checkout__line .site-cart__total { grid-area: total; min-width: 0; }
}

/* ---------- Forms & auth ---------- */
.site-form { display: flex; flex-direction: column; gap: var(--space-16); }
.site-form .btn { justify-content: center; }
.site-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.site-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-form textarea.field__control { min-height: 96px; resize: vertical; font-weight: var(--weight-regular); }
/* Website text boxes lack .field__control--textarea: give them its top/bottom padding so the placeholder lines up
   with the lead icon (top: 12px) instead of touching the top edge. */
.site textarea.field__control { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* Checkout: the payment hint belongs to the choice right above it. */
.site-form [data-payment-help] { margin-top: calc(var(--space-8) * -1); }
.site-auth { max-width: 440px; margin: 0 auto; }
.site-auth .form-card { padding: var(--dialog-padding); border-radius: var(--radius-dialog); }
.site-auth__desc { color: var(--text-secondary); margin-top: var(--space-4); }
.site-auth__foot { text-align: center; color: var(--text-secondary); font-size: var(--text-m); }
@media (max-width: 767.98px) { .site-form__row { grid-template-columns: 1fr; } }

/* ---------- Account ---------- */
.site-account { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); align-items: start; }
.site-account > .site-account__nav { grid-column: span 1; }
.site-account > .site-account__content { grid-column: span 3; }
.site-account--checkout,
.site-account--cart,
.site-account--track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-account--checkout > .site-account__content,
.site-account--cart > .site-account__content,
.site-account--track > .site-account__content { display: contents; }
.site-account--checkout .site-checkout-layout,
.site-account--cart .site-cart,
.site-account--track .site-read { display: contents; }
.site-account--checkout .site-checkout-layout > form,
.site-account--cart .site-cart > :first-child,
.site-account--track .site-read > .site-read__stack { grid-column: span 2; }
.site-account--checkout .site-checkout-layout > aside,
.site-account--cart .site-cart > aside,
.site-account--track .site-read > .site-read__aside { grid-column: span 1; }
.site-account__nav { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.site-account__nav a, .site-account__nav button { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); color: var(--text-secondary); font-weight: var(--weight-semibold); border: 0; background: transparent; text-align: left; width: 100%; font-size: var(--text-m); }
.site-account__nav a:hover, .site-account__nav button:hover { background: var(--bg-hover); color: var(--text-primary); }
.site-account__nav a[aria-current="page"] { background: var(--brand-primary-light); color: var(--brand-primary); }
.site-account__count { margin-left: auto; min-width: 20px; padding: 0 var(--space-4); border-radius: var(--radius-8); background: var(--brand-primary); color: var(--text-inverse); font-size: var(--text-xs); line-height: 20px; text-align: center; }
.site-account__content { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; }
.site-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
@media (max-width: 767.98px) {
  .site-account, .site-account--checkout, .site-account--cart, .site-account--track { grid-template-columns: 1fr; }
  .site-account > .site-account__nav,
  .site-account > .site-account__content { grid-column: auto; }
  /* Every link stays in view: the row wraps instead of scrolling sideways. */
  .site-account__nav { flex-direction: row; flex-wrap: wrap; }
  .site-account__nav a, .site-account__nav button { white-space: nowrap; width: auto; }
}

@media (max-width: 767.98px) {
  /* Account sections behave like a horizontally scrollable app tab bar. */
  .site-account__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: var(--space-4);
  }
  .site-account__nav::-webkit-scrollbar { display: none; }
  .site-account__nav a,
  .site-account__nav button {
    flex: 0 0 auto;
    min-height: 48px;
    padding-inline: var(--space-12);
  }
}
@media (max-width: 767.98px) { .site-stats { grid-template-columns: 1fr; } }

/* ---------- Order tracking ---------- */
.site-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); }
.site-track__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; position: relative; font-size: var(--text-s); color: var(--text-tertiary); font-weight: var(--weight-semibold); }
.site-track__step::before { content: ''; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: var(--border-default); z-index: 0; }
.site-track__step:first-child::before { display: none; }
.site-track__dot { position: relative; z-index: 1; width: var(--control-height-m); height: var(--control-height-m); border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); border: 2px solid var(--border-default); color: var(--text-muted); }
.site-track__step.is-done { color: var(--text-primary); }
.site-track__step.is-done::before, .site-track__step.is-current::before { background: var(--brand-primary); }
.site-track__step.is-done .site-track__dot { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-inverse); }
.site-track__step.is-current { color: var(--brand-primary); }
.site-track__step.is-current .site-track__dot { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); }
.site-notice { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); background: var(--success-soft); color: var(--success); font-size: var(--text-s); font-weight: var(--weight-semibold); line-height: var(--leading-relaxed); }
.site-notice > .material-symbols-rounded { font-size: var(--icon-size-s); margin-top: 2px; }
.site-notice--danger { background: var(--danger-soft); color: var(--danger); }
.site-notice--info { background: var(--info-soft); color: var(--info); }
.site-notice p { color: var(--text-secondary); font-weight: var(--weight-regular); margin-top: var(--space-4); }
@media (max-width: 767.98px) { .site-track__label { display: none; } }

/* ---------- Blog & portfolio article ---------- */
.site-article__media { aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--bg-surface); border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--text-muted); margin-bottom: var(--space-28); overflow: hidden; }
/* A post/project cover shows in full at its own shape (cards use the cropped Card Photo instead). */
.site-article__media:has(img) { aspect-ratio: auto; display: block; background: var(--bg-subtle); }
.site-article__media img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; }
.site-article__media .material-symbols-rounded { font-size: var(--icon-size-2xl); }

/* Blog post / portfolio project: the article in a card (comfortable reading width) beside a side column that stays
   in view (about the studio, more posts or projects, back link). One column in the mobile layout. */
.site-read { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.site-read__main { min-width: 0; padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-read__main .site-article__media { margin-bottom: var(--space-20); }
.site-read__main .site-prose { max-width: 72ch; }
.site-read__aside { position: sticky; top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.site-read__stack { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.site-read__card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-read__title { font-size: var(--text-l); color: var(--text-primary); }
.site-read__card > p { color: var(--text-secondary); }
.site-read__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.site-read__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-read__list li + li { border-top: 1px solid var(--border-default); }
.site-read__list a { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0; color: var(--text-primary); }
.site-read__list a:hover b { color: var(--brand-primary); }
.site-read__list a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.site-read__list b { font-weight: var(--weight-semibold); }
.site-read__list small { color: var(--text-tertiary); font-size: var(--text-s); }
.site-read__thumb { flex: none; display: grid; place-items: center; width: 64px; height: 48px; border-radius: var(--radius-control); background: var(--bg-subtle); color: var(--text-muted); overflow: hidden; }
.site-read__thumb img { width: 100%; height: 100%; object-fit: cover; }
.site-read__back { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; color: var(--text-secondary); font-weight: var(--weight-semibold); }
.site-read__back:hover { color: var(--brand-primary); }
.site-read__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-20); padding: var(--card-padding); background: var(--brand-primary-light); border: 1px solid var(--brand-primary-soft); border-radius: var(--radius-card); }
.site-read__cta > div { display: flex; flex-direction: column; flex: 1; min-width: 200px; color: var(--text-secondary); }
.site-read__cta b { color: var(--text-primary); }
@media (max-width: 767.98px) { .site-read { grid-template-columns: 1fr; } .site-read__aside { position: static; } }
.site-prose { font-size: var(--text-l); color: var(--text-secondary); }
.site-prose h2 { font-size: var(--text-xl); color: var(--text-primary); margin: var(--space-28) 0 var(--space-8); }
.site-prose p { margin-bottom: var(--space-16); }
.site-prose strong { color: var(--text-primary); }

/* ---------- About ---------- */
.site-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-32); align-items: center; }
.site-about__media { aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--bg-surface); border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--text-muted); overflow: hidden; }
.site-about__media img { width: 100%; height: 100%; object-fit: cover; }
.site-about__media .material-symbols-rounded { font-size: var(--icon-size-2xl); }
.site-about__text h2 { margin-top: 0; }
.site-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); list-style: none; padding: 0; margin: 0; }
.site-step { display: flex; gap: var(--space-12); align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--card-padding); }
.site-step__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-8); background: var(--brand-primary-light); color: var(--brand-primary); font-weight: var(--weight-semibold); }
.site-step h3 { font-size: var(--text-l); }
.site-step p { color: var(--text-secondary); font-size: var(--text-m); margin-top: var(--space-4); }
@media (max-width: 767.98px) {
  .site-about { grid-template-columns: 1fr; gap: var(--space-20); }
  .site-steps { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
/* Get in Touch: the studio's details, each shown once and clickable, styled like the form card beside it. */
/* Two separate white cards side by side, half each: Get in Touch (details) and Send Us a Message (form). */
.site-connect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); align-items: stretch; }
.site-connect__panel { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-card); }
.site-connect__panel h2, .site-connect__form h2 { font-size: var(--text-xl); line-height: var(--leading-tight); }
.site-connect__panel h2 { color: var(--text-primary); }
.site-connect__panel > p { color: var(--text-secondary); }
/* Get in Touch, actions first: three one-tap cards (call, WhatsApp, email), then a short details list (location with
   Directions, hours with the Open now badge), then a slim Follow Us row. */
.site-reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-16); }
.site-connect__panel a.site-reach__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; padding: var(--card-padding); border: 1px solid var(--border-default); border-radius: var(--radius-8); background: var(--bg-surface); font-weight: var(--weight-regular); transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.site-connect__panel a.site-reach__card:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); text-decoration: none; }
.site-reach__card .site-connect__icon { margin-bottom: var(--space-8); }
.site-reach__card b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.site-reach__card > span:last-child { max-width: 100%; color: var(--text-secondary); font-size: var(--text-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-details { list-style: none; margin: var(--space-20) 0 0; padding: 0; }
.site-details li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16) 0; border-top: 1px solid var(--border-default); }
.site-details li:last-child { border-bottom: 1px solid var(--border-default); }
.site-details li > div { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.site-details li > div > span { color: var(--text-secondary); }
.site-details b { font-weight: var(--weight-semibold); }
.site-details .site-connect__status { margin-top: 0; align-self: center; }
.site-social-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); margin-top: auto; padding-top: var(--space-20); }
.site-social-row > div { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.site-connect__panel a.site-social-row__link { display: inline-flex; align-items: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-12); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--text-s); font-weight: var(--weight-semibold); }
.site-connect__panel a.site-social-row__link:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.site-social-row__link .material-symbols-rounded { font-size: var(--icon-size-s); color: var(--brand-primary); }
.site-social-row__link em { font-style: normal; color: var(--text-tertiary); font-weight: var(--weight-regular); }
@media (max-width: 767.98px) { .site-reach { grid-template-columns: 1fr; } .site-details li { flex-wrap: wrap; } }
.site-connect__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-8); background: var(--brand-primary-light); color: var(--brand-primary); }
.site-connect__panel small { font-size: var(--text-s); color: var(--text-tertiary); }
.site-connect__panel a { color: var(--text-primary); font-weight: var(--weight-semibold); }
.site-connect__panel a:hover { text-decoration: underline; }
.site-connect__form { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-connect__form > p { color: var(--text-secondary); margin-top: calc(var(--space-12) * -1); }
.site-connect__form .btn { align-self: flex-start; }
/* "(needed for WhatsApp)" / "(optional)" beside the phone label, kept in step with Reply By by site.js. */
.site-field-hint { color: var(--text-tertiary); font-weight: var(--weight-regular); }
/* The message box grows so the form fills the same height as the details panel. */
.site-connect__form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.site-connect__form .field:has(textarea) > .field-icon-wrap { flex: 1; align-items: stretch; }
.site-connect__form textarea { flex: 1; height: auto; min-height: 140px; resize: vertical; }
@media (max-width: 767.98px) { .site-connect { grid-template-columns: 1fr; } }


/* Studio map (Google Maps: the Settings pin, else a search for the studio address). */
.site-map { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-default); background: var(--bg-subtle); aspect-ratio: 21 / 8; }
.site-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767.98px) { .site-map { aspect-ratio: 4 / 3; } }

/* Map and FAQ side by side, half each; the map stretches to the FAQ column's height. */
.site-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); align-items: stretch; }
.site-split__col { display: flex; flex-direction: column; min-width: 0; }
.site-split .site-section__head { margin-bottom: var(--space-16); }
.site-split .site-map { flex: 1; aspect-ratio: auto; min-height: 360px; }
@media (max-width: 767.98px) { .site-split { grid-template-columns: 1fr; gap: var(--space-32); } .site-split .site-map { flex: none; aspect-ratio: 4 / 3; min-height: 0; } }

/* "Still have a question?" row under the FAQ. */
.site-faq-help { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); padding: var(--card-padding); background: var(--brand-primary-light); border: 1px solid var(--brand-primary-soft); border-radius: var(--radius-card); }
.site-faq-help > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; color: var(--text-secondary); }
.site-faq-help b { color: var(--text-primary); }


/* Open now / Closed now badge in the Get in Touch card. */
.site-connect__status { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; margin-top: var(--space-8); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: var(--text-s); font-weight: var(--weight-semibold); }
.site-connect__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.site-connect__status.is-open::before { background: var(--success); }
.site-connect__status.is-open { color: var(--success); }

/* Floating WhatsApp button: phones only, above the footer bar, on every website page. */
.site-wa-float { display: none; }
@media (max-width: 767.98px) {
  .site-wa-float { position: fixed; right: var(--space-16); bottom: calc(var(--footer-height) + var(--space-16)); z-index: 30; display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-height-m); padding: 0 var(--space-16); border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--text-inverse); font-weight: var(--weight-semibold); }
  .site-wa-float:hover { color: var(--text-inverse); }
  /* Room at the end of the page so the floating button never covers the last content. */
  .site:has(.site-wa-float) .site-main { padding-bottom: calc(var(--control-height-m) + var(--space-32)); }
}

/* ---------- Empty & error states ---------- */

/* ---------- Tables on the account pages ---------- */
.site .data-table a { font-weight: var(--weight-semibold); }

/* ---------- Shop toolbar ---------- */
.site-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-end; margin-bottom: var(--space-16); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--card-padding); }
.site-toolbar__search { flex: 1; min-width: 220px; }
.site-toolbar__search .field__control { width: 100%; }
/* Phones: one filter per row, every control the same width, labels in one column. */
@media (max-width: 767.98px) {
  .site-toolbar > .field, .site-toolbar > .btn { flex: 1 1 100%; min-width: 0; }
  .site-toolbar > .field .field__label { flex: none; width: 72px; }
  .site-toolbar > .field .field__control { flex: 1; min-width: 0; width: auto; }
}
.site-results { color: var(--text-tertiary); font-size: var(--text-s); margin-bottom: var(--space-12); }

/* ---------- Item gallery ---------- */
.site-gallery { display: flex; flex-direction: column; gap: var(--space-12); }
.site-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--space-8); }
.site-gallery__thumb { aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: var(--radius-8); overflow: hidden; background: var(--bg-subtle); cursor: pointer; }
.site-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.site-gallery__thumb[aria-current="true"] { border-color: var(--brand-primary); }
.site-prose ul, .site-prose ol { padding-left: var(--space-24); list-style: revert; margin-bottom: var(--space-16); }
.site-prose blockquote { border-left: 3px solid var(--brand-primary); padding-left: var(--space-16); margin: 0 0 var(--space-16); color: var(--text-secondary); font-style: italic; }
.site-prose h3 { font-size: var(--text-l); color: var(--text-primary); margin: var(--space-24) 0 var(--space-8); }
.site-prose figure { margin: 0 0 var(--space-16); }
.site-prose img { border-radius: var(--radius-8); }
.site-prose a { text-decoration: underline; }
.site-prose hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-24) 0; }
.site-item__desc.site-prose { font-size: var(--text-l); white-space: normal; }

/* ---------- Article meta (date, reading time, category) ---------- */
.site-meta { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-12); color: var(--text-tertiary); font-size: var(--text-s); }
.site-meta .material-symbols-rounded { font-size: var(--icon-size-s); }
.site-gallery .site-article__media { margin-bottom: 0; }
.site-read__main .site-gallery { margin-bottom: var(--space-20); }

/* ---------- Payment choice ---------- */
.site-bank { background: var(--bg-subtle); border-radius: var(--radius-8); padding: var(--space-12) var(--space-16); }
.site-bank__qr { display: block; max-width: 280px; width: 100%; height: auto; margin: var(--space-16) auto; }

/* ---------- Order timeline (history) ---------- */
.site-timeline { display: flex; flex-direction: column; gap: 0; }
.site-timeline__item { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-12); padding-bottom: var(--space-16); position: relative; }
.site-timeline__item::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--border-default); }
.site-timeline__item:last-child::before { display: none; }
.site-timeline__dot { width: var(--icon-size-m); height: var(--icon-size-m); border-radius: 50%; background: var(--brand-primary-light); border: 2px solid var(--brand-primary); margin-top: 2px; }
.site-timeline__item b { color: var(--text-primary); }
.site-timeline__item time { display: block; color: var(--text-tertiary); font-size: var(--text-s); }
.site-timeline__item p { color: var(--text-secondary); margin-top: var(--space-4); }
@media print {
  .app-header, .app-footer, .site-account__nav, [data-no-print], .toast-stack { display: none !important; }
  .app-shell, .site-main { height: auto !important; overflow: visible !important; }
}

/* ---------- Printable receipt ---------- */
.receipt { background: var(--bg-page); }
.receipt__page { max-width: 820px; margin: var(--space-24) auto; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-24); }
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); flex-wrap: wrap; }
.receipt__title { text-align: right; }
.receipt__title h1 { font-size: var(--text-xl); }
.receipt__title p { color: var(--text-secondary); }
.receipt__note { color: var(--text-secondary); font-size: var(--text-s); }
.receipt__actions { display: flex; justify-content: flex-end; }
@media print {
  .receipt { background: none; }
  .receipt__page { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* ---------- Promotion banner ---------- */
.site-promo { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; padding: var(--card-padding); border-radius: var(--radius-card); background: var(--brand-primary-light); border: 1px solid var(--brand-primary-soft); }
.site-promo__icon { display: grid; place-items: center; width: var(--icon-size-2xl); height: var(--icon-size-2xl); border-radius: var(--radius-8); background: var(--brand-primary); color: var(--text-inverse); flex-shrink: 0; }
.site-promo__text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--space-4); }
.site-promo__text b { color: var(--text-primary); font-size: var(--text-l); }
.site-promo__text span { color: var(--text-secondary); }
.site-promo--quiet { background: var(--bg-surface); border-color: var(--border-default); }
.site-promo--quiet .site-promo__icon { background: var(--success-soft); color: var(--success); }

/* ---------- Contact map and FAQ ---------- */
.site-faq { display: flex; flex-direction: column; gap: var(--space-8); }
.site-faq__item { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-faq__item summary { display: flex; align-items: center; gap: var(--space-12); padding: var(--card-padding); cursor: pointer; list-style: none; color: var(--text-primary); font-weight: var(--weight-semibold); }
.site-faq__item summary::-webkit-details-marker { display: none; }
.site-faq__caret { margin-left: auto; color: var(--text-tertiary); transition: transform var(--duration-base) var(--ease-standard); }
.site-faq__item[open] .site-faq__caret { transform: rotate(180deg); }
.site-faq__item p { padding: 0 var(--card-padding) var(--card-padding); color: var(--text-secondary); }

/* Selected chips and filled buttons keep white icons (icon-tone.js colours other icons by position). */


/* ---------- App components used on the website ---------- */
/* Filter bars are the app's segmented control (links instead of buttons). */
.site-filters { margin-bottom: var(--space-16); }
a.segmented__btn { text-decoration: none; }
/* Segmented options that hold a radio (product options, payment method). */
label.segmented__btn { cursor: pointer; position: relative; }
.segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.segmented__btn:has(.segmented__input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.segmented__btn.is-disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: line-through; }
/* Quantity: the app's small icon buttons around a field control. */
.site-qty { display: inline-flex; align-items: center; gap: var(--space-4); }
.site-qty .field__control { width: 64px; text-align: center; -moz-appearance: textfield; }
.site-qty .field__control::-webkit-outer-spin-button, .site-qty .field__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Empty lists sit in a card like the app's empty tables. */
.form-card > .table-empty { padding: var(--space-24) var(--space-12); }
.form-card > .table-empty .btn { margin-top: var(--space-8); }
/* The quantity box is too narrow for field-icons.js's in-box icon; the Quantity label keeps its icon. */
.site-qty .has-lead-icon > .field__lead-icon { display: none; }
.site-qty .has-lead-icon .field__control { padding-left: var(--space-8); }
/* Page heads that hold only a breadcrumb (item pages). */

/* ---------- Get the App (website/app.php) ---------- */
.site-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-24); align-items: center; padding: var(--card-padding); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.site-app__text { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.site-app__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-20); list-style: none; margin: 0; padding: 0; }
.site-app__list li { display: flex; gap: var(--space-8); align-items: flex-start; color: var(--text-secondary); font-size: var(--text-m); }
.site-app__list li > span:last-child { display: flex; flex-direction: column; gap: var(--space-4); }
.site-app__list b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.site-app__list .material-symbols-rounded { color: var(--brand-primary); }
.site-app__actions { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.site-app__qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; color: var(--text-secondary); font-size: var(--text-s); }
.site-app__qr img { width: 180px; height: 180px; border: 1px solid var(--border-default); border-radius: var(--radius-8); }
.site-app__offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
.site-app__offer-media { aspect-ratio: 3 / 1; }
@media (max-width: 767.98px) {
  .site-app { grid-template-columns: 1fr; }
  .site-app__list, .site-app__offers { grid-template-columns: 1fr; }
  /* On a phone the QR code is no use: the Google Play button is right there. */
  .site-app__qr { display: none; }
}

/* Counter poster: printed alone from the Get the App page, never shown on screen. */
.site-app-poster { display: none; }
@page poster { size: A5; margin: 12mm; }
@media print {
  .site-app-poster { page: poster; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center; color: #000; }
  .site-app-poster__brand { font-size: var(--text-l); font-weight: var(--weight-semibold); }
  .site-app-poster__title { font-size: var(--text-xl); }
  .site-app-poster__lead, .site-app-poster__scan, .site-app-poster__foot { font-size: var(--text-m); }
  .site-app-poster__qr { width: 90mm; height: 90mm; }
  .site-app-poster__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-m); }
  .site-app-poster__foot { font-weight: var(--weight-semibold); }
  .site-wa-float { display: none !important; }
}

/* Smart app banner (site.js): Android phone visitors only, until they close it. */
.site-app-banner { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--site-gutter); background: var(--brand-primary-light); border-bottom: 1px solid var(--brand-primary-soft); font-size: var(--text-s); color: var(--text-secondary); }
.site-app-banner[hidden] { display: none; }
.site-app-banner__icon { color: var(--brand-primary); }
.site-app-banner .icon-btn { color: var(--text-secondary); }
.site-app-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.site-app-banner__text b { color: var(--text-primary); }

/* Checkout promo code (site.js initPromoCode): the code box and its Apply / Remove button on one line. */
.site-promo-code { display: flex; gap: var(--space-8); }
.site-promo-code .field__control { flex: 1; min-width: 0; text-transform: uppercase; }
.site-promo-code .field__control::placeholder { text-transform: none; }
.site-promo-code .field__control[readonly] { background: var(--bg-subtle); }
.site-summary .site-promo-code .btn { width: auto; flex-shrink: 0; }

/* Website tables: headings line up with their cells (text left, numbers right) instead of the application's centred
   headings, which drift away from left/right-aligned cells in these wide customer tables. Status stays centred. */
.site .data-table th { text-align: left; }
.site .data-table th.is-numeric { text-align: right; }
.site .data-table th.is-status { text-align: center; }

@media (max-width: 767.98px) {
  .site:has(.site-wa-float) .site-main { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .site-wa-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 10px); }
}

/* Shop phone layout: real product tiles and compact, touch-friendly filters. */
@media (max-width: 767.98px) {
  .site-page--shop .site-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-8);
  }

  .site-page--shop .site-toolbar > .site-toolbar__search { grid-column: 1 / -1; min-width: 0; }
  .site-page--shop .site-toolbar > .field { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .site-page--shop .site-toolbar > .field .field__label { width: auto; }
  .site-page--shop .site-toolbar > .field .field__control { width: 100%; min-width: 0; }
  .site-page--shop .site-toolbar > .btn { width: 100%; min-width: 0; }

  .site-page--shop .site-filters {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-page--shop .site-filters::-webkit-scrollbar { display: none; }
  .site-page--shop .site-filters .segmented__btn { flex: 0 0 auto; min-height: 48px; white-space: nowrap; }
  .site-page--shop .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .site-page--shop .site-card__body { padding: var(--space-8); }
  .site-page--shop .site-card__title { font-size: var(--text-m); }
  .site-page--shop .site-card__text { font-size: var(--text-s); }
  .site-page--shop .site-card__foot { align-items: flex-start; flex-direction: column; gap: var(--space-8); padding-top: var(--space-8); }
  .site-page--shop .site-card__foot .btn { width: 100%; min-height: 48px; padding-inline: var(--space-8); font-size: var(--text-xs); }
}

@media (max-width: 767.98px) {
  .site-page--account .site-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .site-page--account .site-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .site-page--account .site-stats .kpi-card { min-height: 90px; align-items: flex-start; flex-direction: column; gap: var(--space-8); padding: var(--card-padding); }
  .site-page--account .site-stats .kpi-card__value { font-size: var(--text-l); }
}

@media (max-width: 767.98px) {
  .site .table-scroll:has(table[data-mobile-cards]) { overflow: visible; border: 0; }
  .site table[data-mobile-cards] { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
  .site table[data-mobile-cards] thead { display: none; }
  .site table[data-mobile-cards] tbody { display: grid; gap: var(--space-8); }
  .site table[data-mobile-cards] tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-12);
    overflow: hidden;
    padding: var(--space-4) var(--space-12);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
  }
  .site table[data-mobile-cards] tbody td {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .site table[data-mobile-cards] tbody td::before {
    color: var(--text-tertiary);
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .site table[data-mobile-cards] tbody td:first-child,
  .site table[data-mobile-cards] tbody td:last-child { grid-column: 1 / -1; }
  .site table[data-mobile-cards] tbody td:last-child { border-bottom: 0; }
  .site table[data-mobile-cards] .is-numeric { text-align: left; }

  .site-item__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "quantity save" "add add";
    gap: var(--space-8);
    align-items: end;
  }
  .site-item__row > .field { grid-area: quantity; min-width: 0; }
  .site-item__row > .site-buy__add { grid-area: add; width: 100%; min-width: 0; min-height: 48px; }
  .site-item__row > .site-save { grid-area: save; width: 44px; height: 44px; align-self: end; }
  .site-buy__promises { gap: var(--space-8); }
  .site-buy__ask { align-self: stretch; line-height: 1.4; }
}