/* ==========================================================================
   SHARED SECTIONS — used on every page (see ARCHITECTURE.md "Shared sections")
   announcement · site-header · site-nav · cta-band · site-footer
   ========================================================================== */

/* ---------- Announcement bar ---------- */
.announcement {
  position: relative;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
}
.announcement__inner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height-sm); padding-block: var(--space-1);
  padding-inline-end: var(--control-height-md);
  text-align: center;
}
.announcement__inner .icon { color: var(--color-accent); }
.announcement__close {
  position: absolute; top: 50%; right: var(--container-gutter); transform: translateY(-50%);
  display: grid; place-items: center; width: var(--control-height-sm); height: var(--control-height-sm);
  color: var(--color-text-inverse-muted); cursor: pointer; border-radius: var(--radius-full);
}
.announcement__close:hover { color: var(--color-text-inverse); }
.announcement__toggle:focus-visible + .announcement .announcement__close { box-shadow: var(--shadow-focus); }
body:has(.announcement__toggle:checked) .announcement { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-surface) var(--header-bg-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur));
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-height); }

.logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-heading); }
.logo:hover { color: var(--color-heading); }
.logo__img { height: var(--logo-height); width: auto; }
.site-footer .logo__img { height: var(--logo-height-footer); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin-left: auto; }
.site-header__actions .btn--icon { position: relative; }
.site-header__toggle { order: -1; }

/* Account links in the header (md+): signed-out "Log in · Sign up" or signed-in name + "Log out". Both are static; js/auth-ui.js toggles `hidden`. */
.site-header__auth { display: none; align-items: center; gap: var(--space-3); min-width: 0; margin-right: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 768px) { .site-header__auth { display: flex; } }
.site-header__auth-link, .site-header__user { color: var(--color-heading); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.site-header__auth-link:hover, .site-header__user:hover { color: var(--color-primary); }
.site-header__user { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: calc(var(--space-16) * 2); }
.site-header__user span { overflow: hidden; text-overflow: ellipsis; }
.site-header__user .icon { flex: none; }
/* Signed in: 2 rows, name (80% of the header text size) over a small "Log out", so the name gets more width (user, 2026-10-01) */
.site-header__auth--user { flex-direction: column; align-items: flex-end; gap: 0; line-height: var(--leading-tight); }
.site-header__auth--user .site-header__user { font-size: calc(var(--text-sm) * 0.8); max-width: calc(var(--space-20) * 2); }
.site-header__auth--user .btn { min-height: 0; padding: 0; font-size: calc(var(--text-sm) * 0.8); }
.site-header__auth--user .btn:hover { background: none; }
/* Same two states in the mobile drawer */
.site-nav__account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.site-nav__account .site-header__user { max-width: 100%; }

/* Mobile nav: popover */
.site-nav {
  margin: 0; inset: 0 auto 0 0; width: var(--drawer-width); height: 100%; max-height: none;
  padding: var(--space-6); border: 0; background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.site-nav::backdrop { background: color-mix(in srgb, var(--color-heading) 40%, transparent); }
.site-nav__close { margin-left: auto; margin-bottom: var(--space-4); display: flex; }
.site-nav__list { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; padding: 0; }
.site-nav__link {
  display: flex; align-items: center; min-height: var(--control-height-md); padding-inline: var(--space-2);
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-heading); text-decoration: none;
  border-radius: var(--radius-md);
}
.site-nav__link:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.site-nav__link[aria-current="page"] { color: var(--color-primary); }
/* Nav dropdown groups (Products, Contact Us): trigger button + popover menu (COMPONENTS.md dropdown, no JS) */
.site-nav__trigger { width: 100%; gap: var(--space-2); border: 0; background: none; cursor: pointer; text-align: left; }
.site-nav__chevron { flex: none; rotate: 90deg; transition: rotate var(--duration-base) var(--ease-standard); }
.site-nav__menu { margin: 0; padding: 0; border: 0; background: none; color: inherit; list-style: none; }
.site-nav__menu-link {
  display: flex; align-items: center; min-height: var(--control-height-md); padding-inline: var(--space-3);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-md);
}
.site-nav__menu-link:hover, .site-nav__menu-link[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }
.site-nav__group:has([aria-current="page"]) > .site-nav__trigger { color: var(--color-primary); }
/* Current page on the header icons (Account / Cart); "true" = inside that section, e.g. account sub-pages */
.site-header__actions .btn--icon[aria-current] { background: var(--color-primary-soft); color: var(--color-primary); }

/* Mobile drawer (below lg): slides in from the left, backdrop fades + blurs, links stagger in. CSS only (popover + @starting-style). */
@media (max-width: 1023.98px) {
  .site-nav {
    flex-direction: column; padding: var(--space-5) var(--space-5) var(--space-8);
    background: var(--drawer-accent); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; overflow-y: auto;
    translate: -100% 0; opacity: 0;
    transition: translate var(--duration-drawer) var(--ease-out), opacity var(--duration-drawer) var(--ease-out),
                overlay var(--duration-drawer) allow-discrete, display var(--duration-drawer) allow-discrete;
  }
  .site-nav:popover-open { display: flex; translate: 0 0; opacity: 1; }
  @starting-style { .site-nav:popover-open { translate: -100% 0; opacity: 0; } }

  .site-nav::backdrop {
    background: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    transition: background var(--duration-drawer) var(--ease-out), backdrop-filter var(--duration-drawer) var(--ease-out),
                overlay var(--duration-drawer) allow-discrete, display var(--duration-drawer) allow-discrete;
  }
  .site-nav:popover-open::backdrop { background: var(--drawer-backdrop); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); }
  @starting-style { .site-nav:popover-open::backdrop { background: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }

  .site-nav__close {
    align-self: flex-end; margin: 0 0 var(--space-6); border-radius: var(--radius-full);
    background: var(--color-surface); box-shadow: var(--shadow-md);
    transition: rotate var(--duration-base) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }
  .site-nav__close:hover { rotate: 90deg; background: var(--color-primary-soft); }

  .site-nav__list { gap: 0; }
  .site-nav__list > li { border-bottom: var(--border-width) solid var(--color-border); }
  .site-nav__link {
    gap: var(--space-3); min-height: var(--control-height-lg); padding-inline: var(--space-4);
    font-size: var(--text-lg); border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), padding var(--duration-base) var(--ease-standard);
  }
  .site-nav__link::after { content: "›"; margin-left: auto; font-size: var(--text-xl); color: var(--color-text-muted); transition: translate var(--duration-base) var(--ease-standard); }
  .site-nav__link:hover { padding-left: var(--space-5); }
  .site-nav__link:hover::after { translate: var(--space-1) 0; color: var(--color-primary); }
  .site-nav__link[aria-current="page"] { background: var(--color-primary-soft); box-shadow: inset var(--space-1) 0 0 var(--color-primary); }

  /* dropdown groups: label + links always listed under it (the trigger isn't clickable here) */
  .site-nav__trigger { pointer-events: none; }
  .site-nav__trigger::after, .site-nav__chevron { display: none; }
  .site-nav__menu { display: block; position: static; inset: auto; width: auto; height: auto; overflow: visible; padding: 0 0 var(--space-2) var(--space-4); }
  .site-nav__menu-link { min-height: var(--control-height-md); padding-inline: var(--space-4); font-size: var(--text-base); }
  .site-nav__menu-link[aria-current="page"] { box-shadow: inset var(--space-1) 0 0 var(--color-primary); }

  /* staggered link entrance */
  .site-nav__list > li { opacity: 0; translate: calc(var(--space-6) * -1) 0; transition: opacity var(--duration-drawer) var(--ease-out), translate var(--duration-drawer) var(--ease-out); transition-delay: calc(var(--drawer-stagger) * var(--i, 0) + var(--drawer-stagger) * 2); }
  .site-nav:popover-open .site-nav__list > li { opacity: 1; translate: 0 0; }
  @starting-style { .site-nav:popover-open .site-nav__list > li { opacity: 0; translate: calc(var(--space-6) * -1) 0; } }
  .site-nav__list > li:nth-child(2) { --i: 1; } .site-nav__list > li:nth-child(3) { --i: 2; } .site-nav__list > li:nth-child(4) { --i: 3; }
  .site-nav__list > li:nth-child(5) { --i: 4; } .site-nav__list > li:nth-child(6) { --i: 5; } .site-nav__list > li:nth-child(7) { --i: 6; }
}

/* Mobile drawer extras (below lg): promo card, help links, mini trust items, social. Hidden on desktop. */
.site-nav__extras { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); }
.nav-promo {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--color-surface-tint); border-radius: var(--card-radius);
}
.nav-promo__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-heading); }
.nav-promo__text { font-size: var(--text-sm); color: var(--color-text); }
.nav-promo__code { padding: 0 var(--space-1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-heading); background: var(--color-surface); border-radius: var(--radius-sm); }
.nav-promo .btn { margin-top: var(--space-2); }
.site-nav__help-title { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.site-nav__help ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.site-nav__help a { display: flex; align-items: center; min-height: var(--control-height-sm); font-size: var(--text-sm); color: var(--color-heading); text-decoration: none; }
.site-nav__help a:hover { color: var(--color-primary); text-decoration: underline; }
.site-nav__help a[aria-current="page"] { color: var(--color-primary); font-weight: var(--weight-semibold); }
.site-nav__trust { display: flex; flex-direction: column; gap: var(--space-3); }
.site-nav__trust .icon-circle { flex-shrink: 0; width: var(--control-height-sm); height: var(--control-height-sm); }
.site-nav__extras .social { margin-left: calc(var(--space-2) * -1); }
@media (max-width: 1023.98px) {
  .site-nav__extras { opacity: 0; translate: 0 var(--space-4); transition: opacity var(--duration-drawer) var(--ease-out), translate var(--duration-drawer) var(--ease-out); transition-delay: calc(var(--drawer-stagger) * 7); }
  .site-nav:popover-open .site-nav__extras { opacity: 1; translate: 0 0; }
  @starting-style { .site-nav:popover-open .site-nav__extras { opacity: 0; translate: 0 var(--space-4); } }
}
@media (min-width: 1024px) { .site-nav__extras { display: none; } }

@media (min-width: 1024px) {
  .site-header__toggle, .site-nav__close { display: none !important; }
  .site-nav {
    display: block; position: static; inset: auto; width: auto; height: auto;
    padding: 0; background: none; box-shadow: none; margin-inline: auto; flex: none;
  }
  .site-nav__list { flex-direction: row; gap: var(--space-2); }
  .site-nav__link { font-size: var(--text-sm); padding-inline: var(--space-3); white-space: nowrap; }
  .site-nav__link[aria-current="page"] { background: var(--color-primary-soft); }
  .site-header__actions { margin-left: 0; }

  /* dropdowns: trigger looks like the other nav items; menu = white card under it */
  .site-nav__trigger { width: auto; }
  .site-nav__group:has(:popover-open) > .site-nav__trigger,
  .site-nav__group:has([aria-current="page"]) > .site-nav__trigger { color: var(--color-primary); background: var(--color-primary-soft); }
  .site-nav__group:has(:popover-open) .site-nav__chevron { rotate: -90deg; }
  .site-nav__menu {
    min-width: calc(var(--space-24) * 2); padding: var(--space-2);
    background: var(--color-surface); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  .site-nav__menu:popover-open { display: flex; flex-direction: column; gap: var(--space-1); }
  @supports (anchor-name: --a) {
    .site-nav__trigger[popovertarget="nav-products"] { anchor-name: --nav-products; }
    .site-nav__trigger[popovertarget="nav-contact"] { anchor-name: --nav-contact; }
    #nav-products { position-anchor: --nav-products; }
    #nav-contact { position-anchor: --nav-contact; }
    .site-nav__menu { inset: auto; top: anchor(bottom); left: anchor(left); margin-top: var(--space-2); position-try-fallbacks: flip-inline; }
  }
  @supports not (anchor-name: --a) {
    .site-nav__menu { inset: auto; top: var(--header-height); left: 50%; translate: -50% 0; }
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--overlay-inverse), var(--color-surface-inverse); color: var(--color-text-inverse);
}
.cta-band__img { width: var(--cta-img-width); max-width: 100%; background: none; align-self: end; }
.cta-band__inner {
  display: grid; gap: var(--space-6); align-items: center;
  padding-block: var(--space-10);
}
.cta-band h2 { color: var(--color-text-inverse); font-size: var(--text-2xl); }
.cta-band p { color: var(--color-text-inverse-muted); margin-top: var(--space-2); }
.cta-band .trust-list { gap: var(--space-4) var(--space-6); }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-6); }
  .cta-band__img { display: none; }
  .cta-band .trust-list { flex-wrap: nowrap; gap: var(--space-4); }
}
@media (min-width: 1280px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) var(--cta-img-width) auto;
    grid-template-areas: "text img cta" "text img trust";
    column-gap: var(--space-8); row-gap: var(--space-4); padding-block: 0;
  }
  .cta-band__inner > div { grid-area: text; align-self: center; padding-block: var(--space-10); }
  .cta-band__img { grid-area: img; display: block; align-self: end; }
  .cta-band__inner > .btn { grid-area: cta; align-self: end; justify-self: start; }
  .cta-band .trust-list { grid-area: trust; align-self: start; padding-bottom: var(--space-8); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.site-footer__grid {
  display: grid; gap: var(--space-8) var(--space-4);
  grid-template-columns: repeat(3, 1fr);
  padding-block: var(--space-10) var(--space-8);
}
.site-footer__brand, .site-footer__community { grid-column: 1 / -1; }
.site-footer__col h2, .site-footer__community h2 {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-3);
}
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: var(--color-text); text-decoration: none; }
.site-footer__col a:hover { color: var(--color-primary); text-decoration: underline; }
.site-footer__community p { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.site-footer__community-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.site-footer__community-head h2 { margin-bottom: 0; }
.site-footer__community .form-note { margin: var(--space-3) 0 0; }
.site-footer__contact { margin-top: var(--space-4); font-style: normal; color: var(--color-text-muted); }
.social { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
.social a { display: grid; place-items: center; width: var(--control-height-sm); height: var(--control-height-sm); color: var(--color-heading); border-radius: var(--radius-full); }
.social a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-6); border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.site-footer__account a { color: var(--color-text); }
.site-footer__account a:hover { color: var(--color-primary); }
.site-footer__logout { padding: 0; border: 0; background: none; color: var(--color-text); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__logout:hover { color: var(--color-primary); }
@media (min-width: 768px) {
  .site-footer__grid { column-gap: var(--space-8); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr 2fr; }
  .site-footer__brand, .site-footer__community { grid-column: auto; }
  .site-footer__community { padding-left: var(--space-8); border-left: var(--border-width) solid var(--color-border); }
}

/* ---------- Page hero (inner pages: text left, image right bleeding to the screen edge; same pattern as the home hero) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background: var(--color-hero-bg); }
.page-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: calc(var(--section-padding-y) / 2); }
.page-hero__inner > * { max-width: var(--measure); }
.page-hero h1 { font-size: var(--text-4xl); margin-top: var(--space-2); }
.page-hero .lead { color: var(--color-heading); }
.page-hero__media { aspect-ratio: 3 / 2; border-radius: 0; }

@media (min-width: 1024px) {
  .page-hero { display: block; }
  .page-hero__media {
    position: absolute; top: 0; right: 0; z-index: -2;
    width: calc(var(--hero-media-width) + max(0px, (100% - var(--container-max)) / 2)); height: 100%; aspect-ratio: auto; object-position: 50% 50%;
    -webkit-mask-image: var(--mask-fade-left); mask-image: var(--mask-fade-left);
  }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-hero); }
  .page-hero__inner { position: relative; justify-content: center; min-height: var(--banner-min-height); }
  .page-hero__inner > * { max-width: var(--measure-sm); }
}

/* Cover variant: the image fills the whole hero behind the text (About Us) */
.page-hero--cover { color: var(--color-text-inverse); background: var(--color-surface-inverse); }
.page-hero--cover .page-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.page-hero--cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-hero-cover-sm); }
.page-hero--cover .page-hero__inner { justify-content: center; min-height: var(--hero-min-height); padding-block: var(--section-padding-y); }
.page-hero--cover h1, .page-hero--cover .lead { color: var(--color-text-inverse); }
.page-hero--cover .eyebrow { color: var(--color-accent); }
.page-hero--cover .breadcrumbs ol, .page-hero--cover .breadcrumbs a, .page-hero--cover .breadcrumbs [aria-current="page"] { color: var(--color-text-inverse); }
@media (min-width: 1024px) {
  .page-hero--cover .page-hero__media { width: 100%; }
  .page-hero--cover::before { background: var(--overlay-hero-cover); }
  .page-hero--cover .page-hero__inner > * { max-width: var(--measure-hero); }
}

/* ---------- Policy content (Shipping & Returns, Privacy Policy, Terms of Service): contents list + sections ---------- */
.policy-content__layout { display: grid; gap: var(--space-8); }
.policy-toc { align-self: start; padding: var(--space-5); background: var(--color-bg-alt); border-radius: var(--card-radius); }
.policy-toc__title { margin-bottom: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-heading); }
.policy-toc ol { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.policy-toc a { color: var(--color-text); text-decoration: none; }
.policy-toc a:hover { color: var(--color-link-hover); text-decoration: underline; }
.policy-content__body { display: flex; flex-direction: column; gap: var(--space-10); max-width: var(--container-narrow); }
.policy-section { scroll-margin-top: var(--space-6); }
.policy-section h2 { font-size: var(--text-2xl); margin-bottom: calc(var(--space-3) * var(--title-gap-scale)); }
.policy-section p + p, .policy-section p + ul, .policy-section ul + p { margin-top: var(--space-3); }
.policy-section ul:not([class]) { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); }
@media (min-width: 1024px) {
  .policy-content__layout { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-12); }
  .policy-toc { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
}

/* ---------- Policy header (legal pages: plain title block, no hero) ---------- */
.policy-header__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-8); border-bottom: var(--border-width) solid var(--color-border); }
.policy-header h1 { font-size: var(--text-3xl); margin-top: var(--space-2); }
.policy-header__updated { font-size: var(--text-sm); color: var(--color-text-muted); }
.policy-header + .policy-content { padding-top: 0; }

/* ---------- Auth (login, signup): split card, form + image ---------- */
.auth { padding-block: var(--section-padding-y); background: var(--color-hero-bg); }
.auth__card { display: grid; overflow: hidden; background: var(--color-surface); border: var(--card-border); border-radius: var(--banner-radius); box-shadow: var(--shadow-lg); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-6); }
.auth__form h1 { font-size: var(--text-4xl); }
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.auth__link, .auth__switch a { color: var(--color-link); }
.auth__switch { font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); }
.auth__media { display: none; height: 100%; border-radius: 0; }
@media (min-width: 1024px) {
  .auth__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth__form { padding: var(--space-12); }
  .auth__media { display: block; }
}

/* ---------- Account (my account + settings): sidebar nav + panels ---------- */
.account-head { background: var(--color-hero-bg); }
.account-head__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.account-head h1 { font-size: var(--text-4xl); margin-block: var(--space-3) var(--space-2); }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.account-nav { min-width: 0; }
.account-nav ul { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); }
.account-nav a {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-md); padding: 0 var(--space-4);
  border-radius: var(--radius-md); color: var(--color-heading); text-decoration: none; white-space: nowrap; background: var(--color-surface); border: var(--card-border);
}
.account-nav a:hover { background: var(--color-primary-soft); }
.account-nav a[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.account-panels { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.account-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); scroll-margin-top: calc(var(--header-height) + var(--space-6)); background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.account-panel .form-note { display: flex; align-items: center; gap: var(--space-2); }
.account-panel h2 { font-size: var(--text-2xl); }
.account-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.account-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.account-panel .table-wrap { box-shadow: none; }
.account-table td, .account-table th { white-space: nowrap; }
.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.account-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-bg-alt); border-radius: var(--radius-md); }
.account-stat strong { font-size: var(--text-2xl); color: var(--color-heading); line-height: var(--leading-tight); }
.account-stat span { font-size: var(--text-sm); color: var(--color-text-muted); }
.saved-cards { display: grid; gap: var(--space-3); }
.saved-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4); border: var(--card-border); border-radius: var(--radius-md); }
.saved-card__info { flex: 1 1 12rem; min-width: 0; }
.saved-card__title { font-weight: var(--weight-semibold); color: var(--color-heading); }
.saved-card__title .badge { margin-left: var(--space-2); vertical-align: middle; }
.saved-card__meta { font-size: var(--text-sm); font-style: normal; color: var(--color-text-muted); }
.saved-card__actions { display: flex; gap: var(--space-1); }
.saved-card__line { display: block; }
.saved-card__line:empty { display: none; }
.saved-card__title .badge + .badge { margin-left: var(--space-1); }
/* Inline "Remove this …?" row across the bottom of a saved card */
.saved-card__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex-basis: 100%; padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.saved-card__confirm p { margin-right: auto; color: var(--color-heading); }
/* Detail list (account): label/value pairs, 2 columns from md */
.detail-list { display: grid; gap: var(--space-4); }
.detail-list > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.detail-list dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.detail-list dd { margin: 0; color: var(--color-heading); overflow-wrap: anywhere; }
@media (min-width: 768px) { .detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.settings-jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.settings-jump a { color: var(--color-link); }
@media (max-width: 639.98px) { .account-stats { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .account-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-10); }
  .account-nav { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
  .account-nav ul { flex-direction: column; overflow: visible; padding: 0; }
  .account-nav a { border-color: transparent; background: transparent; }
}

/* ---------- Notice bar: flat, screen-wide account warning at the very top (unconfirmed email) ---------- */
.notice-bar { font-size: var(--text-sm); }
.notice-bar--warning { background: var(--color-warning-bg); color: var(--color-on-warning); border-bottom: var(--border-width) solid var(--color-warning); }
.notice-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); text-align: center; }
.notice-bar__text { display: inline-flex; align-items: center; gap: var(--space-2); }
.notice-bar__text strong { font-weight: var(--weight-semibold); }
.notice-bar__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.notice-bar .btn { color: var(--color-on-warning); border-color: currentColor; background: transparent; }
.notice-bar .btn:hover { background: color-mix(in srgb, var(--color-on-warning) 10%, transparent); }
.notice-bar a:not(.btn) { color: var(--color-on-warning); text-decoration: underline; }

/* ---------- Checkout layout: content column + sticky summary. Its pages were removed 2026-10-02; only .checkout-card__optional is still used (account forms) ---------- */
.checkout-head { background: var(--color-hero-bg); }
.checkout-head__inner { display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-head h1 { font-size: var(--text-4xl); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.checkout-layout__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.checkout-card {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); scroll-margin-top: calc(var(--header-height) + var(--space-4));
  background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.checkout-card__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); }
.checkout-card__num {
  display: grid; place-items: center; width: var(--space-8); height: var(--space-8); flex: none;
  font-size: var(--text-sm); color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-full);
}
.checkout-card__optional { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.checkout-card__error { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-danger); background: var(--color-warning-bg); border-radius: var(--radius-md); }
.checkout-card__error[hidden] { display: none; }
.checkout-card[data-invalid] { border-color: var(--color-danger); }
.checkout-noscript p { padding: var(--space-4); background: var(--color-warning-bg); border-radius: var(--radius-md); }
@media (min-width: 768px) { .checkout-card { padding: var(--space-6); } }
@media (min-width: 1024px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-10); }
  .checkout-layout__aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
}

/* ---------- Account orders (account/orders/ + account/orders/{number}/) ---------- */
.order-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); }
.order-timeline { gap: var(--space-3) var(--space-4); }
.order-step { display: flex; flex-direction: column; line-height: var(--leading-snug); }
.order-step small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.order-step small:empty { display: none; }
.order-grid { display: grid; gap: var(--space-4); }
.order-grid .order-summary__items { padding-bottom: var(--space-3); }
.order-help { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--color-surface-tint); box-shadow: none; }
.order-help h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.account-table a[data-crm-field="order"] { font-weight: var(--weight-semibold); }
@media (min-width: 768px) { .order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.order-tracking { display: block; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide); }
/* Live order rows (account/, account/orders/: js/orders.js): promo line under the total, invoice link + badge, loading/empty row */
.order-row__total { display: block; }
.order-row__promo { display: block; font-size: var(--text-xs); color: var(--color-success); }
.order-row__invoice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.account-table__state td { padding-block: var(--space-6); text-align: center; white-space: normal; color: var(--color-text-muted); }
/* order.html: items card spans the grid; each item = image · text · price, photos underneath; totals rows */
.order-content { display: flex; flex-direction: column; gap: var(--space-4); }
.order-items { grid-column: 1 / -1; }
/* Order line (order.html): the picture takes the left side, the text sits beside it, the price on the right.
   A line without a product picture (the customer's own photos) puts its photos in the picture column. */
.order-item {
  grid-template-columns: var(--order-item-media) minmax(0, 1fr) auto;
  grid-template-areas: "media info price" "media photos photos";
  align-items: start; gap: var(--space-2) var(--space-5);
}
.order-item + .order-item { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.order-item > img { grid-area: media; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
.order-item > p:first-of-type { grid-area: info; gap: var(--space-1); }
.order-item > p:first-of-type strong { font-size: var(--text-base); }
.order-item__price { grid-area: price; align-items: flex-end; text-align: right; }
.order-item__price .cart-item__discount { color: var(--color-success); }
.order-photos { grid-area: photos; margin-block: 0; }
.order-photos .cart-photo__img { width: 100%; height: 100%; }
.order-item:has(> img[hidden]) .order-photos { grid-area: media; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-item:has(> img[hidden]) .order-photos .cart-photo { width: 100%; border-radius: var(--radius-md); }
.order-item:has(> img[hidden]) .order-photos .cart-photo:nth-child(2):last-child { grid-column: 1 / -1; } /* one photo fills the column */
.order-item:has(> img[hidden]):has(> .order-photos[hidden]) > p:first-of-type { grid-area: auto; grid-row: 1; grid-column: 1 / 3; }
@media (max-width: 639.98px) {
  .order-item { grid-template-columns: var(--order-item-media-sm) minmax(0, 1fr); grid-template-areas: "media info" "media price" "photos photos"; }
  .order-item__price { align-items: flex-start; text-align: left; }
}
.order-totals [data-kind="discount"] dt, .order-totals [data-kind="discount"] dd { color: var(--color-success); }
.order-totals [data-kind="total"] { padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); }
.order-totals [data-kind="total"] dd { font-size: var(--text-xl); }
.order-totals [data-kind="due"] dt, .order-totals [data-kind="due"] dd { color: var(--color-heading); font-weight: var(--weight-medium); }
.order-invoice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.order-invoice:has(> span:empty:first-child) { display: none; }
.order-instructions { margin-top: var(--space-2); white-space: pre-line; }