/* Hopia's V0.1 - Global UI foundation ("Soft Modern Resale")
   Mobile-first. Shared design system only. Page-specific styling is a later batch. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";

  --color-bg: #f5f4f1;
  --color-bg-alt: #eceae5;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f6f3;

  --color-border: #e5e2db;
  --color-border-strong: #d5d0c7;

  --color-text: #2a2a2a;
  --color-text-soft: #55534f;
  --color-text-muted: #7b786f;

  --color-primary: #9c5a43;
  --color-primary-dark: #814633;
  --color-primary-soft: #f1e6e0;
  --color-on-primary: #ffffff;

  --color-success: #3f7d54;
  --color-success-soft: #e7f1ea;
  --color-warning: #8f6721;
  --color-warning-soft: #f6eddb;
  --color-danger: #a83a34;
  --color-danger-dark: #8c2d28;
  --color-danger-soft: #fbebea;
  --color-info: #3c6b86;
  --color-info-soft: #e7f0f4;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 28, 24, 0.05);
  --shadow: 0 8px 24px rgba(31, 28, 24, 0.07);

  --ring: 0 0 0 3px rgba(156, 90, 67, 0.18);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --max-width: 1120px;
  --transition: 150ms ease;

  /* Motion system — restrained editorial microinteractions.
     --transition (150ms ease) stays the base color/UI token; the siblings
     below reuse the easing curve already used across the file so dropdowns,
     buttons, cards, and page transitions share one consistent language. */
  --ease-standard: cubic-bezier(0.25, 0.6, 0.3, 1);
  --transition-fast: 120ms var(--ease-standard);
  --transition-base: 180ms var(--ease-standard);
  --transition-slow: 240ms var(--ease-standard);
  --page-transition-duration: 220ms;

  /* Card geometry system — "Refined Modern + Modern Editorial Mix".
     Geometry and spacing only: these tokens deliberately carry no color
     values so the existing palette stays authoritative. Image-led cards
     (catalog, gallery, feedback) share one frame treatment; the portrait
     media ratio is a 4:5 refined proportion rather than a default square,
     which reads naturally for clothing photography. */
  --card-radius: 2px;
  --card-radius-media: 2px;
  --card-media-ratio: 4 / 5;
  --card-media-lift: 320ms;
  --card-accent-width: 28px;
  --card-accent-height: 2px;
  --card-padding: var(--sp-4);
  --card-gap: var(--sp-4);

  /* Soft scattered dots (Style B). Five tiny taupe dots placed at
     intentionally irregular positions inside a 60x60 tile — gentle
     organic spacing, not a grid. Low alpha keeps the texture visible
     only on close inspection. Tiles seamlessly because every dot lands
     inside the 60x60 cell. */
  --bg-dot-pattern:
    radial-gradient(circle at 6px 9px, rgba(120, 100, 84, 0.18) 0.9px, transparent 1.2px),
    radial-gradient(circle at 41px 18px, rgba(120, 100, 84, 0.14) 0.8px, transparent 1.1px),
    radial-gradient(circle at 24px 38px, rgba(120, 100, 84, 0.16) 0.7px, transparent 1px),
    radial-gradient(circle at 53px 47px, rgba(120, 100, 84, 0.15) 0.9px, transparent 1.2px),
    radial-gradient(circle at 13px 54px, rgba(120, 100, 84, 0.13) 0.7px, transparent 1px);
  --bg-dot-size: 60px 60px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Soft scattered dots (Style B) for the customer-facing site only.
   Tiny taupe dots at gently irregular positions sit on top of the
   existing cream background; existing surface elements (header,
   footer, cards, forms, product image tiles, modal panels) all sit
   above the body and remain unpatterned. The admin login portal opts in
   separately in the admin login shell section below. */
body.ui-store {
  background-image: var(--bg-dot-pattern);
  background-repeat: repeat;
  background-size: var(--bg-dot-size);
  background-attachment: scroll;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-radius: var(--radius-sm);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-primary-dark);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 650;
}

h4 {
  font-size: 1rem;
  font-weight: 650;
}

p {
  line-height: 1.65;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-5) 0;
}

ul,
ol {
  padding-left: 1.25rem;
}

small {
  font-size: 0.875rem;
}

code,
kbd,
pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.875em;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.site-main {
  flex: 1 0 auto;
  padding-block: var(--sp-5);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-primary);
}

.brand__logo {
  display: block;
  width: clamp(56px, 7.5vw, 50px);
  height: auto;
  flex: 0 0 auto;
}

@media (max-width: 719px) {
  .brand__logo {
    width: 50px;
  }
}

.brand__text {
  display: inline-block;
  white-space: nowrap;
}

.site-nav {
  order: 3;
  width: 100%;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.nav a:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.nav a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
}

.nav__cart:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.nav__cart[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--color-bg-alt);
}

.ui-store .brand {
  margin-right: auto;
}

.ui-store .site-nav {
  display: none;
}

.ui-store .site-header__actions {
  order: 4;
  display: none;
}

.site-header.nav-open .site-nav {
  display: block;
  border-top: 1px solid var(--color-border);
}

.site-header.nav-open .site-nav .nav {
  flex-direction: column;
  align-items: stretch;
  padding-block: var(--sp-2);
}

.site-header.nav-open .nav a {
  padding: 0.875rem var(--sp-2);
}

.site-header.nav-open .site-header__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  width: 100%;
  padding-block: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--color-border);
}

.site-header.nav-open .site-header__actions .btn {
  width: 100%;
}

.nav__actions {
  margin-left: auto;
}

.site-header__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__user {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.site-footer {
  flex-shrink: 0;
  margin-top: var(--sp-6);
  background: var(--editorial-ink, #171717);
  color: #cfcabf;
  font-size: 0.875rem;
}

.site-footer__inner {
  padding-block: var(--sp-6) var(--sp-5);
}

/* Brand block — the strongest visual anchor of the footer. */
.site-footer__brand {
  color: var(--editorial-paper, #f5f2ec);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer__tagline {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  color: #cfcabf;
}

.site-footer__location {
  margin-top: var(--sp-1);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a197;
}

.site-footer__contact {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(245, 242, 236, 0.18);
  list-style: none;
}

.site-footer__contact a,
.footer-contact__text {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: 0.375rem;
  color: #cfcabf;
  text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: #ffffff;
}

.site-footer__contact svg {
  flex: 0 0 auto;
  opacity: 0.75;
}

/* Editorial nav groups. Mobile-first: collapsible accordions. */
.site-footer__nav {
  margin-top: var(--sp-5);
}

.footer-accordion__heading {
  margin: 0;
  font-size: inherit;
}

.footer-accordion__toggle {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border: 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.18);
  background: transparent;
  color: #A89F93;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.footer-accordion__icon::after {
  content: "\25BE";
  color: var(--editorial-accent, #a45c3b);
}

.footer-accordion.is-open .footer-accordion__icon::after {
  content: "\25B4";
}

.footer-accordion__panel {
  display: none;
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid rgba(245, 242, 236, 0.18);
  list-style: none;
}

.footer-accordion.is-open .footer-accordion__panel {
  display: block;
}

/* Links read slightly larger than the section labels above them. */
.footer-accordion__panel a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: 0.375rem;
  color: #cfcabf;
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer-accordion__panel a:hover,
.footer-accordion__panel a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--editorial-accent, #a45c3b);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.footer-accordion__panel svg {
  flex: 0 0 auto;
  opacity: 0.75;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(245, 242, 236, 0.18);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a197;
}

.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.1;
  min-height: 44px;
  padding: 0.625rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

button:not([class]),
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.1;
  min-height: 44px;
  padding: 0.625rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.btn-primary,
button:not([class]),
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background: var(--editorial-ink, #171717);
  border: 1px solid var(--editorial-ink, #171717);
  border-radius: 2px;
  color: var(--editorial-paper, #f5f2ec);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  button:not([class]):hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    background: var(--editorial-paper, #f5f2ec);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
  }
}

.btn-primary:focus-visible,
button:not([class]):focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  background: var(--editorial-paper, #f5f2ec);
  border-color: var(--editorial-ink, #171717);
  color: var(--editorial-ink, #171717);
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 3px;
}

.btn-primary:active,
button:not([class]):active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  background: var(--editorial-ink, #171717);
  border-color: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/*
 * btn-outline — thin-border secondary action, visually subordinate to btn-secondary.
 * Used in the shipment card where the aside panel already carries the primary track action.
 */
.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: 2px;
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.btn-outline:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn-outline:focus-visible {
    outline: 2px solid var(--editorial-ink, #171717);
    outline-offset: 3px;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-soft);
}

.btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover {
  background: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: #ffffff;
}

.btn-sm {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8125rem;
  border-radius: 2px;
}

.btn-block {
  width: 100%;
}

/* Shared button icon microinteraction. Pairs with the color + 1px press
   transitions already defined above so every button speaks one motion
   language: icons drift a hair on hover and settle back on press. Only
   buttons that actually contain an icon are affected; icon-only chrome
   controls (hamburger, account, accordion toggles) keep a class and are
   intentionally excluded so they never shift. */
.btn svg,
button:not([class]) svg,
.btn-auth-submit__arrow {
  transition: transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover svg,
  button:not([class]):hover svg,
  .btn-auth-submit:hover .btn-auth-submit__arrow {
    transform: translateX(1px);
  }
}

.btn:active svg,
button:not([class]):active svg,
.btn-auth-submit:active .btn-auth-submit__arrow {
  transform: translateX(0);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

input[type="file"] {
  padding: 0.4rem 0.6rem;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2355534f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
}

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

legend {
  padding-inline: var(--sp-2);
  font-weight: 650;
}

input[list],
.datalist-input {
  width: 100%;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.field {
  margin-bottom: var(--sp-4);
}

.field .hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.field .field-error {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-danger);
}

.field-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.field-inline label {
  margin-bottom: 0;
  font-weight: 500;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

table[border] {
  border: 0;
}

th,
td {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: var(--color-surface-muted);
}

/* Base card surface. Thin border, no lift shadow, restrained radius — a
   framing device rather than a floating panel. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.card-body {
  padding: var(--sp-5);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 650;
  margin-bottom: var(--sp-2);
}

.card-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-available {
  background: var(--color-success-soft);
  border-color: #cfe3d6;
  color: var(--color-success);
}

.badge-sold {
  background: var(--color-bg-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}

.badge-success {
  background: var(--color-success-soft);
  border-color: #cfe3d6;
  color: var(--color-success);
}

.badge-info,
.badge-pending {
  background: var(--color-info-soft);
  border-color: #cfe0e8;
  color: var(--color-info);
}

.badge-warning {
  background: var(--color-warning-soft);
  border-color: #ece0c2;
  color: var(--color-warning);
}

.badge-danger,
.badge-cancelled {
  background: var(--color-danger-soft);
  border-color: #f0cfcd;
  color: var(--color-danger);
}

.alert {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  margin-bottom: var(--sp-4);
}

.alert a {
  color: inherit;
  text-decoration: underline;
}

.alert-error {
  background: var(--color-danger-soft);
  border-color: #f0cfcd;
  color: var(--color-danger-dark);
}

.alert-success {
  background: var(--color-success-soft);
  border-color: #cfe3d6;
  color: #2f6142;
}

.alert-warning {
  background: var(--color-warning-soft);
  border-color: #ece0c2;
  color: #7a5718;
}

.alert-info {
  background: var(--color-info-soft);
  border-color: #cfe0e8;
  color: #345c72;
}

.empty-state {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

.grid-products {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.muted {
  color: var(--color-text-muted);
}

.text-soft {
  color: var(--color-text-soft);
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: 0.875rem;
}

.price {
  font-weight: 700;
  color: var(--color-text);
}

.link-subtle {
  color: var(--color-text-soft);
  text-decoration: none;
}

.link-subtle:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Customer registration */
.register-page .site-main {
  padding-block: var(--sp-5);
}

.register-page__content {
  display: flex;
  justify-content: center;
}

.register-card {
  width: 100%;
  max-width: 560px;
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.register-card__header {
  margin-bottom: var(--sp-5);
  text-align: center;
}

.register-card__eyebrow {
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.register-card h1 {
  margin-top: var(--sp-2);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.register-card__intro {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.register-card .alert {
  margin-bottom: var(--sp-5);
}

.register-form__fields {
  display: grid;
  gap: 0 var(--sp-4);
}

.register-form .field:last-child {
  margin-bottom: 0;
}

.register-form__optional {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.register-form__submit {
  margin-top: var(--sp-5);
  min-height: 48px;
}

.register-card__login {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  text-align: center;
}

@media (min-width: 560px) {
  .register-page .site-main {
    padding-block: var(--sp-6);
  }

  .register-card {
    padding: var(--sp-6);
  }

  .register-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-form__fields .field:nth-child(3),
  .register-form__fields .field:nth-child(4),
  .register-form__fields .field:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 720px) {
  .register-card h1 {
    font-size: 1.75rem;
  }
}

/* Customer auth (Login + Register) — shared Editorial + Boutique system */
.auth-page .site-main,
.login-page .site-main,
.register-page .site-main {
  padding-block: var(--sp-6);
}

.auth-page__content,
.login-page__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-block: var(--sp-4);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.04);
}

/* Brand lockup: official logo beside the HOPIA FITS wordmark */
.auth-card__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-5);
}

.auth-card__logo {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
}

.auth-card__brand {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
  line-height: 1;
}

/* Editorial header: eyebrow / heading / supporting text */
.auth-card__header {
  text-align: center;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}

.auth-card__eyebrow {
  margin-bottom: var(--sp-2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--editorial-accent, #a45c3b);
}

.auth-card__header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
  line-height: 1.15;
}

.auth-card__subtitle {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.auth-card .alert,
.auth-card .register-alert {
  margin-bottom: var(--sp-4);
}

.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid #747775;
  border-radius: 2px;
  background: #fff;
  color: #1f1f1f;
  font-family: Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.google-auth-button__icon {
  flex: 0 0 20px;
}

.google-auth-button:hover {
  background: #f8f9fa;
  border-color: #5f6368;
}

.google-auth-button:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--sp-4) 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--color-border);
}

.google-link-confirm {
  align-items: flex-start;
  margin-bottom: var(--sp-5);
  line-height: 1.45;
}

/* Inline error banner (Register) */
.register-alert {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.register-alert--error {
  background: var(--color-danger-soft);
  border-color: #f0cfcd;
  color: var(--color-danger-dark);
}

/* Form fields */
.auth-form .field {
  margin-bottom: var(--sp-4);
}

/* First Name / Last Name row — stacks on mobile, two columns when space allows */
.auth-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 480px) {
  .auth-form__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
}

/* Field label with premium bold-outline icon */
.auth-form .field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  color: var(--editorial-ink, #171717);
}

.field-label__icon {
  flex: none;
  color: var(--editorial-ink, #171717);
}

/* Inline field errors (Register) */
.auth-form__error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-danger);
}

.auth-form .input.is-error {
  border-color: var(--color-danger);
}

.auth-form .input.is-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(168, 58, 52, 0.12);
}

.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}

/* Password field with toggle */
.input-password {
  position: relative;
  display: flex;
  align-items: center;
}

.input-password .input {
  padding-right: 2.75rem;
}

/* Suppress the browser's native password reveal control so only the
   custom show/hide toggle is visible (Edge/IE eye + Chrome caps-lock). */
.input-password .input::-ms-reveal,
.input-password .input::-ms-clear {
  display: none;
}

.input-password .input::-webkit-credentials-auto-fill-button,
.input-password .input::-webkit-strong-password-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
}

.input-password__toggle {
  position: absolute;
  right: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.input-password__toggle:hover,
.input-password__toggle:focus-visible {
  color: var(--color-text);
  outline: none;
}

.input-password__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Extras row: Remember me + Forgot password */
.auth-form__extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  margin-top: var(--sp-2);
}

/* Checkbox */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-soft);
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: none;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 3px;
  background: var(--color-surface);
  transition: border-color var(--transition), background-color var(--transition);
}

.checkbox-input:checked + .checkbox-custom {
  border-color: var(--color-text);
  background-color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23f5f2ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6 5 8.5 9.5 3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.checkbox-input:focus-visible + .checkbox-custom {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Forgot password link */
.link-forgot {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

.link-forgot:hover {
  color: var(--editorial-accent, #a45c3b);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Submit button */
.btn-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 1.15rem;
  border: 1px solid var(--editorial-ink, #171717);
  border-radius: 2px;
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn-auth-submit__arrow {
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-auth-submit:hover {
    background: var(--editorial-paper, #f5f2ec);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
  }
}

.btn-auth-submit:focus-visible {
  background: var(--editorial-paper, #f5f2ec);
  border-color: var(--editorial-ink, #171717);
  color: var(--editorial-ink, #171717);
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 3px;
}

.btn-auth-submit:active {
  background: var(--editorial-ink, #171717);
  border-color: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  transform: translateY(1px);
}

/* Bottom switch link */
.auth-card__switch {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.auth-card__switch a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}

.auth-card__switch a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (min-width: 560px) {
  .auth-page .site-main,
  .login-page .site-main,
  .register-page .site-main {
    padding-block: var(--sp-7);
  }

  .auth-card {
    padding: var(--sp-7) var(--sp-6);
  }

  .auth-card__header h1 {
    font-size: 1.75rem;
  }
}

@media (max-width: 400px) {
  .auth-card__logo {
    width: 30px;
    height: 30px;
  }

  .auth-card__brand {
    font-size: 1.0625rem;
  }
}

@media (min-width: 720px) {
  .auth-page .site-main,
  .login-page .site-main,
  .register-page .site-main {
    padding-block: var(--sp-7);
  }
}

/* Admin login — standalone portal shell.
   The admin login is intentionally chrome-free: it is the only admin page
   rendered before a session exists, so it carries no site header or
   navigation. It reuses the shared auth-card / auth-form components above
   (same palette, thin border, minimal radius, no gradient) and only adds
   the centering shell plus a few portal-specific refinements. */
/* Reuse the Soft Scattered Dots texture (Style B) on the admin portal so the
   login reads as part of the same brand surface. The card sits on top of the
   pattern and stays plain white. */
body.admin-login-page {
  background-image: var(--bg-dot-pattern);
  background-repeat: repeat;
  background-size: var(--bg-dot-size);
  background-attachment: scroll;
}

.admin-login {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Side padding lives on the wrapper (not the card) so the card can never
     overflow the viewport and cause horizontal scrolling on mobile. */
  padding: var(--sp-5) var(--sp-4);
  width: 100%;
}

.admin-login__card {
  width: 100%;
  max-width: 440px;
  /* Comfortable, balanced whitespace on desktop. */
  padding: var(--sp-6) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 2px;
  /* Minimal depth only — no heavy drop shadow. */
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.04);
}

/* Logo lockup: official mark, centered above the form. */
.admin-login__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.admin-login__logo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  border-radius: 0;
}

.admin-login__card .auth-card__header {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}

.admin-login__card .auth-card__eyebrow {
  margin-bottom: var(--sp-2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--editorial-accent, #a45c3b);
}

.admin-login__card .auth-card__header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
  line-height: 1.15;
}

.admin-login__card .auth-card__subtitle {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.admin-login__alert {
  margin-bottom: var(--sp-4);
}

.admin-login__card .auth-form .field {
  margin-bottom: var(--sp-4);
}

.admin-login__card .auth-form .field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  color: var(--editorial-ink, #171717);
}

.admin-login__card .field-label__icon {
  flex: none;
  color: var(--editorial-ink, #171717);
}

/* Comfortable tap target, full card width. */
.admin-login__submit {
  margin-top: var(--sp-2);
}

/* Supporting note — muted secondary typography. */
.admin-login__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  letter-spacing: 0.02em;
}

@media (min-width: 560px) {
  .admin-login {
    padding: var(--sp-7) var(--sp-4);
  }

  .admin-login__card {
    padding: var(--sp-7) var(--sp-6);
  }

  .admin-login__card .auth-card__header h1 {
    font-size: 1.75rem;
  }
}

/* Very small phones: keep the logo readable but never oversized, and let the
   card height adapt naturally instead of forcing a fixed viewport height. */
@media (max-width: 400px) {
  .admin-login {
    padding: var(--sp-4) var(--sp-3);
    align-items: flex-start;
  }

  .admin-login__card {
    padding: var(--sp-5) var(--sp-4);
  }

  .admin-login__logo {
    width: 38px;
    height: 38px;
  }
}

/* Customer homepage */
.home-page .site-main {
  padding-top: 0;
}.home-intro {
  max-width: 680px;
  padding-block: var(--sp-7);
}

.home-intro__eyebrow,
.home-section__eyebrow,
.home-product-card__category {
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-intro h1 {
  margin-top: var(--sp-2);
  font-size: clamp(2.25rem, 10vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.home-intro__copy {
  max-width: 580px;
  margin-top: var(--sp-4);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
}

.home-intro .btn {
  margin-top: var(--sp-5);
}

.home-section {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.home-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.home-section__heading h2 {
  margin-top: var(--sp-1);
}

.home-section__link {
  display: none;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}

.home-section__link:hover {
  color: var(--color-primary);
}

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-3);
}

.home-product-card {
  min-width: 0;
}

.home-product-card__image {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

.home-product-card__image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.home-product-card__image:hover img {
  transform: scale(1.02);
}

.home-product-card__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.home-product-card__body {
  padding-top: var(--sp-3);
}

.home-product-card__category {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
}

.home-product-card h3 {
  margin-top: var(--sp-1);
  font-size: 1rem;
}

.home-product-card h3 a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.home-product-card h3 a:hover {
  color: var(--color-primary);
}

.home-product-card__meta {
  margin-top: var(--sp-1);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-product-card .price {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
}

.home-category-grid {
  display: grid;
  gap: var(--sp-3);
}

.home-category {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
    box-shadow var(--transition), transform var(--transition);
}

.home-category:hover {
  border-color: var(--color-border-strong);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.home-categories__action {
  margin-top: var(--sp-5);
}

.home-categories__action .btn {
  width: 100%;
}

@media (min-width: 720px) {
  h1 {
    font-size: 2rem;
  }

  .container {
    padding-inline: var(--sp-5);
  }

  .site-main {
    padding-block: var(--sp-6);
  }

  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: var(--sp-4);
  }

  .site-nav {
    order: 0;
    width: auto;
  }

  .nav-toggle {
    display: none;
  }

  .ui-store .site-nav {
    display: block;
  }

  .ui-store .site-header__actions {
    display: flex;
  }

  .nav__cart {
    margin-left: calc(var(--sp-1) - var(--sp-4));
  }

  /* Editorial footer: brand block left, nav columns right. */
  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr);
    gap: var(--sp-7) var(--sp-6);
    align-items: start;
    padding-block: var(--sp-5);
    border-top: 1px solid rgba(245, 242, 236, 0.18);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    margin-top: 0;
  }

  .footer-accordion__toggle {
    padding: 0;
    border-bottom: 0;
    letter-spacing: 0.16em;
    cursor: default;
    pointer-events: none;
  }

  .footer-accordion__icon {
    display: none;
  }

  .footer-accordion__panel {
    display: block;
    padding: var(--sp-3) 0 0;
    border-bottom: 0;
  }

  .home-intro {
    padding-block: 4.5rem;
  }

  .home-intro__copy {
    font-size: 1.125rem;
  }

  .home-section {
    padding-block: var(--sp-7);
  }

  .home-section__link {
    display: inline-block;
  }

  .home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-4);
  }

  .home-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-category {
    min-height: 132px;
  }

  .home-categories__action {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-6);
  }

  .home-categories__action .btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--sp-6);
  }

  .grid {
    gap: var(--sp-6);
  }

  .home-intro {
    padding-block: 5.5rem;
  }

  .home-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
}

/* Catalog (product discovery) page */
.catalog-page .site-main {
  padding-top: 0;
  padding-bottom: var(--sp-7);
}

.catalog-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--editorial-paper, #f5f2ec);
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.catalog-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: var(--sp-2);
}

.catalog-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text);
  transition: color var(--transition);
}

.catalog-head__icon:hover,
.catalog-head__icon:focus-visible {
  background: #e8e3da;
  color: var(--editorial-accent, #a45c3b);
}

.catalog-head__exit {
  justify-self: start;
}

.catalog-head__cart {
  justify-self: end;
}

.catalog-head__brand {
  color: var(--editorial-ink, #171717);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.catalog-heading {
  margin: 0;
  padding-top: var(--sp-6);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
}

.catalog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-3);
  max-width: 60rem;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-6);
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--editorial-ink, #171717);
}

.catalog-search__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}

.catalog-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: var(--sp-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  color: var(--color-text);
}

.catalog-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition);
}

.catalog-search__clear[hidden] {
  display: none;
}

.catalog-search__clear:hover,
.catalog-search__clear:focus-visible {
  color: var(--editorial-ink, #171717);
}

.catalog-search__clear:focus-visible {
  outline: 2px solid var(--editorial-accent, #a45c3b);
  outline-offset: 1px;
}

.empty-state--search {
  border: 0;
}

.empty-state--search .empty-state__title {
  margin-bottom: var(--sp-2);
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.catalog-search input::placeholder {
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.catalog-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.catalog-search input:focus,
.catalog-search input:focus-visible,
.catalog-search input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.catalog-search:focus-within {
  border-bottom-color: var(--editorial-accent, #a45c3b);
  box-shadow: 0 1px 0 var(--editorial-accent, #a45c3b);
}

.catalog-filter-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #111111;
  font-family: "DM Sans", var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.catalog-filter-trigger:hover,
.catalog-filter-trigger:focus-visible {
  outline: 0;
}

.catalog-filter-trigger:focus-visible {
  box-shadow: inset 0 -2px 0 #111111;
}

.catalog-filter-trigger__label {
  color: #111111;
  background: linear-gradient(90deg, #111111 0%, #70685e 34%, #76583f 66%, #111111 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: catalog-filter-label-shift 7s linear infinite;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32rem;
  transition: text-decoration-color var(--transition), opacity var(--transition);
}

.catalog-filter-trigger:hover .catalog-filter-trigger__label,
.catalog-filter-trigger:focus-visible .catalog-filter-trigger__label {
  text-decoration-color: #76583f;
}

.catalog-filter-trigger:focus-visible .catalog-filter-trigger__label {
  text-decoration-thickness: 2px;
}

.catalog-filter-trigger__icon {
  flex: none;
  transition: opacity var(--transition), transform var(--transition);
}

.catalog-filter-trigger:hover .catalog-filter-trigger__icon,
.catalog-filter-trigger:focus-visible .catalog-filter-trigger__icon {
  opacity: 0.78;
  transform: translateX(1px);
}

.catalog-filter-gradient__stop {
  animation: catalog-filter-icon-shift 8.4s linear infinite;
}

.catalog-filter-gradient__stop--two {
  animation-delay: -2.1s;
}

.catalog-filter-gradient__stop--three {
  animation-delay: -4.2s;
}

.catalog-filter-gradient__stop--four {
  animation-delay: -6.3s;
}

@keyframes catalog-filter-label-shift {
  to {
    background-position: -240% 0;
  }
}

@keyframes catalog-filter-icon-shift {
  0%, 100% {
    stop-color: #111111;
  }
  34% {
    stop-color: #70685e;
  }
  67% {
    stop-color: #76583f;
  }
}

.catalog-filter-trigger__count {
  margin-left: -0.15rem;
  color: #746d63;
  font-size: 0.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.catalog-filter-trigger__count::before {
  content: "(";
}

.catalog-filter-trigger__count::after {
  content: ")";
}

.catalog-filter-trigger__count[hidden] {
  display: none;
}

@media (forced-colors: active) {
  .catalog-filter-trigger__label {
    background: none;
    color: ButtonText;
    -webkit-text-fill-color: ButtonText;
  }

  .catalog-filter-trigger__icon path {
    stroke: ButtonText;
  }

  .catalog-filter-trigger:focus-visible {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
    box-shadow: none;
  }
}

.catalog-suggestions {
  max-width: 52rem;
  margin-inline: auto;
  max-height: min(40vh, 264px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
  background: var(--editorial-paper, #f5f2ec);
  scrollbar-width: thin;
}

.catalog-suggestions[hidden] {
  display: none;
}

.catalog-suggestions__item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  transition: background-color var(--transition), color var(--transition);
}

.catalog-suggestions__item:first-child {
  border-top: 0;
}

.catalog-suggestions__item:hover,
.catalog-suggestions__item:focus-visible,
.catalog-suggestions__item.is-active {
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  outline: none;
}

.catalog-filter-modal {
  --filter-paper: #f7f4ee;
  --filter-paper-deep: #eee9e1;
  --filter-ink: #0d0d0d;
  --filter-muted: #746d63;
  --filter-line: #d7d0c5;
  --filter-bronze: #76583f;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-3);
}

.catalog-filter-modal[hidden] {
  display: none;
}

.catalog-filter-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.48);
  backdrop-filter: blur(1.5px);
}

.catalog-filter-modal__panel {
  position: relative;
  display: flex;
  width: min(100%, 760px);
  max-height: min(88dvh, 700px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--filter-line);
  border-radius: 0;
  background: var(--filter-paper);
  box-shadow: 0 24px 64px rgba(13, 13, 13, 0.2);
  color: var(--filter-ink);
  font-family: "DM Sans", var(--font-sans);
}

.catalog-filter-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 1.5rem 2rem 1.35rem;
  border-bottom: 1px solid var(--filter-line);
}

.catalog-filter-modal__eyebrow {
  color: var(--filter-bronze);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.catalog-filter-modal__title {
  margin-top: 0.15rem;
  color: var(--filter-ink);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.08;
}

.catalog-filter-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--filter-ink);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition), opacity var(--transition);
}

.catalog-filter-modal__close:hover {
  color: var(--filter-bronze);
  opacity: 0.8;
}

.catalog-filter-modal__close:focus-visible {
  outline: 2px solid var(--filter-ink);
  outline-offset: 2px;
  background: var(--filter-paper-deep);
  color: var(--filter-ink);
  opacity: 1;
}

.catalog-filter-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.catalog-filter-form__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 2rem;
}

.catalog-filter-group {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.2rem;
  border: 0;
  border-right: 1px solid var(--filter-line);
  border-radius: 0;
}

.catalog-filter-group:first-child {
  padding-left: 0;
}

.catalog-filter-group:last-child {
  padding-right: 0;
  border-right: 0;
}

.catalog-filter-group legend {
  width: 100%;
  padding: 0;
  color: var(--filter-ink);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.catalog-filter-group__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.catalog-filter-group__icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--filter-bronze);
}

.catalog-filter-group__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  margin-top: 0.75rem;
}

.catalog-filter-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  color: var(--filter-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: color var(--transition);
}

.catalog-filter-option[hidden] {
  display: none;
}

.catalog-filter-option input {
  appearance: none;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  border: 1px solid var(--filter-ink);
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.catalog-filter-option input:checked {
  border-color: var(--filter-ink);
  background-color: var(--filter-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.2 2.7 2.7 6.3-6.1' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.catalog-filter-option:hover,
.catalog-filter-option:has(input:focus-visible),
.catalog-filter-option:has(input:checked) {
  color: var(--filter-ink);
}

.catalog-filter-option input:focus-visible {
  outline: 2px solid var(--filter-bronze);
  outline-offset: 2px;
}

.catalog-filter-option span {
  overflow-wrap: anywhere;
}

.catalog-filter-option input:checked + span {
  font-weight: 600;
}

.catalog-filter-group__empty {
  grid-column: 1 / -1;
  color: var(--filter-muted);
  font-size: 0.8125rem;
}

.catalog-filter-group__toggle {
  min-height: 32px;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--filter-bronze);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}

.catalog-filter-group__toggle:hover,
.catalog-filter-group__toggle:focus-visible {
  color: var(--filter-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.catalog-filter-form__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.75rem;
  flex: none;
  padding: 1rem 2rem 1.1rem;
  border-top: 1px solid var(--filter-line);
  background: var(--filter-paper);
}

.catalog-filter-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--filter-ink);
  border-radius: 0;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.catalog-filter-action--reset {
  background: var(--filter-paper-deep);
  color: var(--filter-ink);
}

.catalog-filter-action--search {
  background: var(--filter-ink);
  color: #ffffff;
}

.catalog-filter-action--reset:hover,
.catalog-filter-action--reset:focus-visible {
  background: #e2dcd2;
}

.catalog-filter-action--search:hover,
.catalog-filter-action--search:focus-visible {
  background: #2b2926;
  border-color: #2b2926;
  color: #ffffff;
}

.catalog-filter-action:focus-visible {
  outline: 2px solid var(--filter-bronze);
  outline-offset: 2px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-3);
}

.catalog-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.catalog-card[hidden] {
  display: none;
}

.catalog-card__image {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: var(--card-radius-media);
  background: var(--color-bg-alt);
}

.catalog-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--card-media-lift) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .catalog-card__image-link:hover img {
    transform: scale(1.035);
  }

  /* Editorial accent mark opens a touch on hover, echoing the existing
     category-tile underline rhythm. Transform-free so the frame never
     shifts and the grid never reflows. */
  .catalog-card:hover .catalog-card__body::before {
    width: calc(var(--card-accent-width) + 0.75rem);
  }
}

.catalog-card__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.catalog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  /* Text reads as a separate editorial tier beneath the photograph rather
     than a continuation of the image box. */
  padding-top: var(--sp-4);
  flex: 1;
}

.catalog-card__body::before {
  content: "";
  width: var(--card-accent-width);
  height: var(--card-accent-height);
  margin-bottom: var(--sp-2);
  background: var(--editorial-accent, #a45c3b);
  transition: width var(--transition-base) var(--ease-standard);
}

.catalog-card__category {
  order: -1;
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.catalog-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.catalog-card__name a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.catalog-card__name a:hover,
.catalog-card__name a:focus-visible {
  color: var(--editorial-accent, #a45c3b);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.catalog-card__detail {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: auto;
}

.catalog-card__actions {
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  margin-top: var(--sp-2);
}

.catalog-card__action {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.catalog-card__action.catalog-quickadd,
.catalog-card__action.catalog-login {
  flex-grow: 1.1;
}

.catalog-card__action.product-buy-now {
  flex-grow: 0.9;
}

.catalog-card__actions .catalog-card__action-btn {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 44px;
  gap: 0.375rem;
  padding: 0.55rem 0.4rem;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.catalog-card__action-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}

.catalog-card__action-btn--cart {
  border-color: #000000;
  background: #ffffff;
  color: #000000;
}

.catalog-card__action-btn--buy {
  border-color: #000000;
  background: #000000;
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .catalog-card__action-btn--cart:hover {
    border-color: #000000;
    background: #f1f1f1;
    color: #000000;
  }

  .catalog-card__action-btn--buy:hover {
    border-color: #242424;
    background: #242424;
    color: #ffffff;
  }
}

.catalog-card__action-btn:focus-visible {
  outline: 2px solid var(--editorial-accent, #a45c3b);
  outline-offset: 2px;
}

.catalog-card__action-btn--cart:active {
  background: #e7e7e7;
  color: #000000;
}

.catalog-card__action-btn--buy:active {
  border-color: #000000;
  background: #000000;
  color: #ffffff;
}

.catalog-card__action-btn:disabled,
.catalog-card__action-btn.is-busy {
  cursor: wait;
}

.catalog-card__price {
  color: var(--editorial-ink, #171717);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.catalog-card__sold {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-card.is-sold .catalog-card__image img {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.catalog-card.is-sold .catalog-card__name {
  color: var(--color-text-muted);
}

@media (min-width: 720px) {
  .catalog-tools {
    padding-top: var(--sp-7);
  }

  .catalog-filter-modal {
    align-items: center;
    padding: var(--sp-5);
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-4);
  }

  .catalog-card__name {
    font-size: 1rem;
  }
}

@media (max-width: 719px) {
  .catalog-page .container {
    padding-inline: var(--sp-3);
  }

  .catalog-search {
    padding-bottom: var(--sp-2);
  }

  .catalog-tools {
    gap: var(--sp-2);
    padding-top: var(--sp-5);
  }

  .catalog-filter-trigger {
    min-width: 0;
    padding-inline: 0;
  }

  .catalog-filter-modal {
    padding: 0;
  }

  .catalog-filter-modal__panel {
    width: 100%;
    max-height: 94dvh;
    border-radius: 0;
  }

  .catalog-filter-modal__head {
    padding: 1rem;
  }

  .catalog-filter-modal__title {
    font-size: 1.55rem;
  }

  .catalog-filter-modal__close {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .catalog-filter-form__groups {
    display: block;
    padding-inline: 1rem;
  }

  .catalog-filter-group,
  .catalog-filter-group:first-child,
  .catalog-filter-group:last-child {
    padding: 0.95rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--filter-line);
  }

  .catalog-filter-group:last-child {
    border-bottom: 0;
  }

  .catalog-filter-group__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
    margin-top: 0.55rem;
  }

  .catalog-filter-option {
    min-height: 32px;
  }

  .catalog-filter-form__actions {
    gap: 0.5rem;
    padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  }

  .catalog-filter-action {
    min-height: 44px;
    padding-inline: 0.65rem;
  }

  .catalog-grid {
    column-gap: var(--sp-4);
  }

  /* Mobile: tighten the text tier beneath the portrait photograph so the
     card stays compact and readable without cramping. */
  .catalog-card__body {
    padding-top: var(--sp-3);
  }

  .catalog-card__body::before {
    margin-bottom: var(--sp-1);
  }

  .catalog-card__actions {
    gap: 0.25rem;
  }

  .catalog-card__actions .catalog-card__action-btn {
    gap: 0.25rem;
    padding-inline: 0.25rem;
    font-size: 0.625rem;
  }

  .catalog-card__action-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-basis: 0.875rem;
  }

  .catalog-page .toast {
    width: calc(100% - 2rem);
    max-width: 26rem;
    gap: var(--sp-2);
  }

  .catalog-page .toast__content {
    min-width: 0;
    flex: 1 1 auto;
  }

  .catalog-page .toast__content span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .catalog-card__actions {
    flex-direction: column;
    gap: 0.375rem;
  }

  .catalog-card__actions .catalog-card__action-btn {
    font-size: 0.6875rem;
  }
}

@media (min-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-5);
  }
}

/* Large desktop: a wider editorial tier. Five columns give the portrait
   photography more breathing room and let the grid read as a considered
   spread rather than a dense dashboard. */
@media (min-width: 1280px) {
  .catalog-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .catalog-filter-trigger__label,
  .catalog-filter-gradient__stop {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * Global page transition — a subtle editorial fade with a slight
 * upward movement on entry, and a gentle fade/lift on exit.
 *
 * Enter runs automatically on load: it is flash-free and deliberately
 * uses no animation fill-mode so the finished state never overrides the
 * exit transition below. Exit is triggered by the footer navigation
 * script adding `.is-leaving` to <body> just before navigating.
 *
 * The whole system lives inside prefers-reduced-motion: no-preference,
 * so motion-sensitive users get an instant, fully-visible page with no
 * fade and no interception (the footer script also bails out for them).
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: hopia-page-enter var(--page-transition-duration) var(--ease-standard);
  }

  body.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--page-transition-duration) var(--ease-standard),
      transform var(--page-transition-duration) var(--ease-standard);
  }
}

@keyframes hopia-page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Product Detail Page */
.product-page .site-main {
  padding-top: 0;
  background: var(--editorial-paper, #f5f2ec);
}

.breadcrumb {
  margin-bottom: var(--sp-5);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.breadcrumb__item a {
  color: var(--color-text-soft);
  text-decoration: none;
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__item svg {
  color: var(--color-border-strong);
}

.breadcrumb__item:last-child {
  color: var(--color-text);
}

.product-layout {
  display: grid;
  gap: var(--sp-6);
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.gallery-main {
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  border-radius: var(--card-radius-media);
  background: var(--color-bg-alt);
  border: 1px solid var(--editorial-line, #c9c2b8);
}

.gallery-main__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-thumb {
  width: 72px;
  height: 90px;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--card-radius-media);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover {
  border-color: var(--color-border-strong);
}

.gallery-thumb.is-active {
  border-color: var(--color-primary);
}

.gallery-placeholder {
  aspect-ratio: var(--card-media-ratio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  border-radius: var(--card-radius-media);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.gallery-placeholder span {
  font-size: 0.875rem;
}

.product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-eyebrow {
  color: var(--editorial-ink, #171717);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

.product-category {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
}

.product-name {
  margin-top: var(--sp-2);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--editorial-ink, #171717);
  overflow-wrap: break-word;
}

.product-price {
  margin-top: var(--sp-3);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--editorial-ink, #171717);
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--editorial-line, #c9c2b8);
}

.product-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-meta__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-meta__icon {
  color: var(--editorial-ink, #171717);
  flex-shrink: 0;
}

.product-meta__value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--editorial-ink, #171717);
  overflow-wrap: break-word;
}

.product-section {
  margin-top: var(--sp-5);
}

.product-section__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
  margin-bottom: var(--sp-2);
}

.product-section__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.product-section__icon {
  color: var(--editorial-ink, #171717);
  flex-shrink: 0;
}

.product-section__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-top: var(--sp-2);
  background: var(--editorial-line, #c9c2b8);
}

.product-description,
.product-defects {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.product-form {
  margin-top: var(--sp-5);
}

.product-form .btn {
  min-height: 52px;
  font-size: 1rem;
}

.product-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding-inline: 1.5rem;
}

.product-form__icon {
  color: inherit;
  flex-shrink: 0;
  transition: color 200ms ease;
}

.product-page .product-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.product-page .product-actions .product-form {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.product-page .product-actions .btn {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  font-size: 0.875rem;
}

@media (max-width: 380px) {
  .product-page .product-actions {
    gap: 0.375rem;
  }

  .product-page .product-actions .btn {
    gap: 0.375rem;
    padding-inline: 0.5rem;
    font-size: 0.75rem;
  }

  .product-page .product-actions .product-form__icon {
    width: 20px;
    height: 20px;
  }
}

.product-availability {
  margin-top: var(--sp-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.product-availability--available {
  color: var(--editorial-ink, #171717);
}

.product-availability--sold {
  color: var(--color-text-muted);
}

.product-page .product-action-btn {
  border-radius: 2px;
  border: 1px solid #000000;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease,
    color 200ms ease, transform 120ms ease;
}

.product-page .product-action-btn--cart {
  background: #ffffff;
  color: #000000;
}

.product-page .product-action-btn--buy {
  background: #000000;
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .product-page .product-action-btn--cart:hover {
    border-color: #000000;
    background: #f1f1f1;
    color: #000000;
  }

  .product-page .product-action-btn--buy:hover {
    border-color: #242424;
    background: #242424;
    color: #ffffff;
  }
}

.product-page .product-action-btn:focus-visible {
  outline: 2px solid var(--editorial-accent, #a45c3b);
  outline-offset: 2px;
}

.product-page .product-action-btn--cart:active {
  background: #e7e7e7;
  color: #000000;
  transform: translateY(1px);
}

.product-page .product-action-btn--buy:active {
  border-color: #000000;
  background: #000000;
  color: #ffffff;
  transform: translateY(1px);
}

.product-auth-notice {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-text-soft);
}

.product-sold-notice {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}

.product-sold-notice__text {
  color: var(--color-text-soft);
  margin-bottom: var(--sp-4);
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--sp-5)));
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}

.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast--error .toast__icon {
  color: var(--color-danger);
}

.toast__content {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.toast__icon {
  color: var(--color-success);
}

.toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.toast__close:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* ============================================
   CART PAGE - HOPIA FITS Editorial Resale Design
   ============================================ */

.cart-page {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-7);
    background: var(--editorial-paper, #f5f2ec);
}

.cart-header {
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
    margin-bottom: var(--sp-4);
}

.cart-header h1 {
    font-size: clamp(1.375rem, 4vw, 2.125rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
}

.cart-header__count {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cart-header__accent {
    width: 44px;
    height: 2px;
    margin-top: var(--sp-3);
    background: var(--editorial-accent, #a45c3b);
}

/* Empty Cart State */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.cart-empty__icon {
    margin-bottom: var(--sp-5);
    color: var(--color-text-muted);
    opacity: 0.4;
}

.cart-empty__icon svg {
    stroke-width: 1;
}

.cart-empty h2 {
    margin-bottom: var(--sp-2);
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
}

.cart-empty p {
    margin-bottom: var(--sp-6);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 320px;
}

.cart-empty .btn-primary {
    min-height: 48px;
    padding: 0.75rem 2.5rem;
    background: var(--editorial-ink, #171717);
    border: 1px solid var(--editorial-ink, #171717);
    border-radius: 2px;
    color: var(--editorial-paper, #f5f2ec);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease,
        color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .cart-empty .btn-primary:hover {
        background: var(--editorial-paper, #f5f2ec);
        border-color: var(--editorial-ink, #171717);
        color: var(--editorial-ink, #171717);
    }
}

.cart-empty .btn-primary:focus-visible {
    background: var(--editorial-paper, #f5f2ec);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
    outline: 2px solid var(--editorial-ink, #171717);
    outline-offset: 3px;
}

/* Cart Layout */
.cart-layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.cart-items-wrap {
    min-width: 0;
}

.cart-select-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.cart-select-controls .btn {
    min-height: 44px;
}

.cart-select-count {
    margin-left: auto;
    color: var(--color-text-soft);
    font-size: 0.8125rem;
}

.cart-select-message,
.cart-item__unavailable {
    color: var(--color-danger);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.cart-select-message {
    margin-block: var(--sp-3);
}

/* Cart Item */
.cart-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

.cart-item__check {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.cart-item__checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--editorial-ink, #171717);
    cursor: pointer;
}

.cart-item__image,
.cart-item__details {
    grid-column: 2;
}

.cart-item--unavailable .cart-item__image {
    opacity: 0.7;
}

.cart-item__image {
    width: 100%;
    max-width: 320px;
    padding: var(--sp-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong, #d5d0c7);
    border-radius: var(--card-radius);
}

.cart-item__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--card-radius-media);
}

.cart-item__placeholder {
    display: flex;
    width: 100%;
    aspect-ratio: var(--card-media-ratio);
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.cart-item__details {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}

.cart-item__eyebrow {
    color: var(--editorial-accent, #a45c3b);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cart-item__category {
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cart-item__name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--editorial-ink, #171717);
}

.cart-item__price {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--editorial-ink, #171717);
}

.cart-item__meta {
    color: var(--color-text-soft);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.cart-item__actions {
    margin-top: var(--sp-1);
}

.cart-item__remove {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition);
    min-height: 32px;
}

.cart-item__remove:hover,
.cart-item__remove:focus-visible {
    color: var(--editorial-ink, #171717);
    background: transparent;
}

/* Order Summary */
.cart-summary {
    align-self: stretch;
}

.cart-summary__inner {
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.cart-summary__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
    margin-bottom: var(--sp-1);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    font-size: 0.9375rem;
}

.cart-summary__row + .cart-summary__row {
    padding-top: 0;
}

.cart-summary__row-label {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cart-summary__row-value {
    font-weight: 700;
    color: var(--editorial-ink, #171717);
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.cart-summary__row--total {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.cart-summary__row--total .cart-summary__row-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.cart-summary__row--total .cart-summary__row-value {
    font-size: 1.5rem;
    font-weight: 800;
}

.cart-summary__row--muted .cart-summary__row-label,
.cart-summary__row--muted .cart-summary__row-value {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.6875rem;
}

.cart-summary__divider {
    border: 0;
    border-top: 1px solid var(--editorial-line, #c9c2b8);
    margin: var(--sp-2) 0;
}

.cart-summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
}

/* Primary Checkout Button */
.cart-summary .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 52px;
    padding: 0.875rem 1.5rem;
    background: var(--editorial-ink, #171717);
    border: 1px solid var(--editorial-ink, #171717);
    border-radius: 2px;
    color: var(--editorial-paper, #f5f2ec);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background-color 200ms ease, border-color 200ms ease,
        color 200ms ease, transform 120ms ease;
}

.cart-summary__btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2;
}

.cart-summary__checkout .cart-summary__btn-icon {
    transition: transform 200ms ease;
}

.cart-summary__checkout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cart-summary__btn-label {
    display: inline-block;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
    .cart-summary .btn-primary:hover {
        background: var(--editorial-paper, #f5f2ec);
        border-color: var(--editorial-ink, #171717);
        color: var(--editorial-ink, #171717);
    }

    .cart-summary__checkout:hover .cart-summary__btn-icon {
        transform: translateX(3px);
    }
}

.cart-summary .btn-primary:focus-visible {
    background: var(--editorial-paper, #f5f2ec);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
    outline: 2px solid var(--editorial-ink, #171717);
    outline-offset: 3px;
}

.cart-summary .btn-primary:active {
    background: var(--editorial-ink, #171717);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
    transform: translateY(1px);
}

/* Continue Shopping — secondary action: cream surface, thin charcoal border */
.cart-summary__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-ink, #171717);
    border-bottom: 1px solid var(--editorial-ink, #171717);
    border-radius: 2px;
    color: var(--editorial-ink, #171717);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background-color 200ms ease, color 200ms ease,
        transform 120ms ease;
}

.cart-summary__continue .cart-summary__btn-icon {
    color: var(--editorial-ink, #171717);
}

@media (hover: hover) and (pointer: fine) {
    .cart-summary__continue:hover {
        background: var(--editorial-ink, #171717);
        border-color: var(--editorial-ink, #171717);
        color: var(--editorial-paper, #f5f2ec);
    }

    .cart-summary__continue:hover .cart-summary__btn-icon {
        color: var(--editorial-paper, #f5f2ec);
    }
}

.cart-summary__continue:focus-visible {
    background: var(--editorial-ink, #171717);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
    outline: 2px solid var(--editorial-ink, #171717);
    outline-offset: 3px;
}

.cart-summary__continue:focus-visible .cart-summary__btn-icon {
    color: var(--editorial-paper, #f5f2ec);
}

.cart-summary__continue:active {
    transform: translateY(1px);
}

/* Mobile summary spans full width via base styles */

/* Responsive - Tablet */
@media (min-width: 720px) {
    .cart-page {
        padding-top: var(--sp-6);
    }

    .cart-header h1 {
        font-size: 1.875rem;
    }

    .cart-header {
        padding-bottom: var(--sp-5);
        margin-bottom: var(--sp-6);
    }

    .cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--sp-7);
        align-items: start;
    }

    .cart-items {
        gap: var(--sp-5);
        padding-bottom: 0;
        border-bottom: 0;
    }

    .cart-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: var(--sp-4);
    }

    .cart-item__image {
        max-width: none;
    }

    .cart-item__name {
        font-size: 1.125rem;
    }

    .cart-item__price {
        font-size: 1.25rem;
    }

    .cart-summary {
        position: sticky;
        top: calc(var(--sp-5) + 74px);
        align-self: start;
    }

    .cart-summary__inner {
        padding: var(--sp-5);
    }

    .cart-summary__title {
        font-size: 0.75rem;
        padding-bottom: var(--sp-4);
    }

    .cart-summary__row {
        gap: var(--sp-3);
        padding: var(--sp-3) 0;
    }

    .cart-summary__row-label {
        font-size: 0.75rem;
    }

    .cart-summary__row-value {
        font-size: 1.0625rem;
    }

    .cart-summary__row--total .cart-summary__row-label {
        font-size: 0.8125rem;
    }

    .cart-summary__row--total .cart-summary__row-value {
        font-size: 1.625rem;
    }

    .cart-summary__row--muted .cart-summary__row-label,
    .cart-summary__row--muted .cart-summary__row-value {
        font-size: 0.75rem;
    }

    .cart-summary__divider {
        margin: var(--sp-3) 0;
    }

    .cart-summary__actions {
        gap: var(--sp-3);
        padding-top: var(--sp-4);
    }

    .cart-summary .btn-primary {
        font-size: 0.8125rem;
    }

    .cart-summary__continue {
        font-size: 0.75rem;
    }
}

/* Responsive - Desktop */
@media (min-width: 1024px) {
    .cart-header h1 {
        font-size: 2.125rem;
    }

    .cart-header {
        padding-bottom: var(--sp-6);
        margin-bottom: var(--sp-6);
    }

    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .cart-item {
        grid-template-columns: 44px minmax(140px, 200px) minmax(0, 1fr);
    }

    .cart-item__check {
        grid-row: 1;
    }

    .cart-item__details {
        grid-column: 3;
    }

    .cart-summary {
        top: calc(var(--sp-6) + 74px);
    }
}

@media (min-width: 720px) {
    .product-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--sp-7);
        align-items: start;
    }

    .product-name {
        font-size: 1.75rem;
    }

    .product-price {
        font-size: 1.75rem;
    }

    .product-meta {
        gap: var(--sp-5);
        margin-top: var(--sp-6);
        padding-top: var(--sp-6);
    }

    .product-section {
        margin-top: var(--sp-6);
    }

    .product-form {
        margin-top: var(--sp-6);
    }

    .product-auth-notice {
        margin-top: var(--sp-6);
    }

    .gallery-thumb {
        width: 88px;
        height: 110px;
    }
}

@media (min-width: 1024px) {
    .product-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--sp-7);
        align-items: start;
    }

    .product-name {
        font-size: 2rem;
    }

    .product-price {
        font-size: 2rem;
    }

    .gallery-thumb {
        width: 80px;
        height: 100px;
    }

    .toast {
        bottom: var(--sp-6);
        left: var(--sp-6);
        transform: translateX(0) translateY(calc(100% + var(--sp-6)));
    }

    .toast.is-visible {
        transform: translateX(0) translateY(0);
    }
}

/* Checkout Page - Editorial Styling */
.checkout-page {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-7);
    background: var(--editorial-paper, #f5f2ec);
}

.checkout-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.checkout-header h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    line-height: 1;
}

.checkout-header__count {
    margin-top: var(--sp-3);
    color: var(--color-text-soft);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.checkout-header__back {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.alert__list {
    margin: var(--sp-2) 0 0;
    padding-left: 1.25rem;
}

.checkout-layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* Checkout Form Cards - Editorial Style */
.checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

.checkout-card {
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.checkout-card__head {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.checkout-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Premium bold-outline icons for the checkout section headings and payment
   options. Charcoal, uniformly sized and weighted, and visually secondary to
   the heading text. The stroke weight lives on the inline SVG attribute. */
.checkout-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-soft, #55534f);
}

.payment-option.is-disabled .checkout-icon {
    color: var(--color-text-muted);
}

/* Premium bold-outline icons for the Order Confirmation page. Same shape
   language and shared stroke weight (inline SVG attribute) as the checkout
   set: restrained charcoal section icons, slightly larger action icons that
   inherit the button colour. Kept secondary to headings and button text. */
.confirmation-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-soft, #55534f);
}

.confirmation-card__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.confirmation-aside__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.btn .confirmation-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.checkout-card__hint {
    margin-top: var(--sp-2);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

.checkout-card .field {
    margin-bottom: var(--sp-4);
}

.checkout-card .field:last-child {
    margin-bottom: 0;
}

/* Checkout Grid - Editorial Style */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4) var(--sp-4);
}

/* Form Labels - Editorial Style */
.field > label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    line-height: 1.4;
}

.field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    line-height: 1.4;
}

/* Checkout Form Inputs - Editorial Style */
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="search"] {
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
    color: var(--editorial-ink, #171717);
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 0.75rem;
    min-height: 48px;
    line-height: 1.4;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.checkout-form input[type="text"]:focus,
.checkout-form input[type="email"]:focus,
.checkout-form input[type="tel"]:focus,
.checkout-form input[type="search"]:focus {
    outline: none;
    border-color: var(--editorial-ink, #171717);
    box-shadow: none;
}

.checkout-form input[type="text"]::placeholder,
.checkout-form input[type="email"]::placeholder,
.checkout-form input[type="tel"]::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Hint and Error Text */
.field .hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.field .field-error {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-danger);
}

/* Location Trigger - Editorial Style */
.location-trigger {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.75rem;
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
    color: var(--editorial-ink, #171717);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition);
}

.location-trigger:hover {
    background: var(--color-surface);
    border-color: var(--editorial-ink, #171717);
}

.location-trigger:focus-visible {
    outline: none;
    border-color: var(--editorial-ink, #171717);
    box-shadow: none;
}

.location-trigger__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--editorial-ink, #171717);
}

.location-trigger__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.location-trigger__text.is-placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

.location-trigger__chevron {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Payment Options - Editorial Style */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4);
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.payment-option:hover {
    border-color: var(--editorial-ink, #171717);
}

.payment-option input {
    width: auto;
    min-height: 0;
    margin-top: 0.1rem;
    accent-color: var(--editorial-ink, #171717);
    flex-shrink: 0;
}

.payment-option:has(input:checked) {
    background: var(--color-surface);
    border-color: var(--editorial-ink, #171717);
}

.payment-option__body {
    display: block;
    min-width: 0;
}

.payment-option__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    line-height: 1.4;
}

.payment-option__desc {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

.payment-option.is-disabled {
    background: var(--color-surface-muted);
    border-color: var(--editorial-line, #c9c2b8);
    cursor: not-allowed;
    opacity: 0.7;
}

.payment-option.is-disabled:hover {
    border-color: var(--editorial-line, #c9c2b8);
}

.payment-option.is-disabled .payment-option__name {
    color: var(--color-text-muted);
    font-weight: 600;
}

.payment-option.is-disabled .payment-option__desc {
    color: var(--color-text-muted);
}

/* Delivery Options - Editorial Style
   Shares the exact payment-option construction (same paper surface, rule,
   radius, spacing, and :has(input:checked) selected state) so the delivery
   option reads as a native part of the checkout. Inherits every breakpoint
   from the shared component rules below. */
.delivery-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.delivery-option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4);
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.delivery-option:hover {
    border-color: var(--editorial-ink, #171717);
}

.delivery-option input {
    width: auto;
    min-height: 0;
    margin-top: 0.1rem;
    accent-color: var(--editorial-ink, #171717);
    flex-shrink: 0;
}

.delivery-option:has(input:checked) {
    background: var(--color-surface);
    border-color: var(--editorial-ink, #171717);
}

.delivery-option__body {
    display: block;
    min-width: 0;
}

.delivery-option__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    line-height: 1.4;
}

.delivery-option__desc {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Store Pickup panel - shown inside the Delivery Option card when
   Store Pickup is selected. Same paper surface as the option rows. */
.pickup-panel {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    background: var(--editorial-paper, #f5f2ec);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.pickup-panel__heading {
    margin: 0 0 var(--sp-3);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
}

.pickup-panel__details {
    margin: 0 0 var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pickup-panel__row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pickup-panel__row dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pickup-panel__row dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--editorial-ink, #171717);
    line-height: 1.5;
}

.pickup-panel__row dd a {
    color: var(--editorial-ink, #171717);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pickup-panel__maps {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--editorial-ink, #171717);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pickup-panel__maps:hover,
.pickup-panel__maps:focus-visible {
    opacity: 0.7;
}

/* Order Summary - Editorial Style */
.checkout-summary {
    min-width: 0;
}

.checkout-summary__inner {
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.checkout-summary__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
    margin-bottom: 0;
}

.checkout-summary__items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-summary__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.checkout-summary__item:first-child {
    padding-top: var(--sp-4);
}

.checkout-summary__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.checkout-summary__image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 2px;
    background: var(--color-bg-alt);
}

.checkout-summary__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-summary__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.checkout-summary__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.checkout-summary__name {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--editorial-ink, #171717);
    text-transform: uppercase;
    word-break: break-word;
}

.checkout-summary__meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

.checkout-summary__price {
    margin-top: auto;
    padding-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--editorial-ink, #171717);
}

.checkout-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-top: 1px solid var(--editorial-line, #c9c2b8);
    border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.checkout-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: 0.8125rem;
    color: var(--editorial-ink, #171717);
    line-height: 1.4;
}

.checkout-summary__row .price {
    font-weight: 700;
    flex-shrink: 0;
}

.checkout-summary__row--muted {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.checkout-summary__row--grand {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--editorial-line, #c9c2b8);
    font-weight: 700;
}

.checkout-summary__row--grand .price {
    font-size: 0.9375rem;
}

.checkout-summary__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* Place Order Button - Editorial Style */
.checkout-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    background: var(--editorial-ink, #171717);
    border: 1px solid var(--editorial-ink, #171717);
    border-radius: 2px;
    color: var(--editorial-paper, #f5f2ec);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.checkout-submit:hover,
.checkout-submit:focus-visible {
    background: var(--editorial-paper, #f5f2ec);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
}

.checkout-submit:focus-visible {
    outline: 2px solid var(--editorial-ink, #171717);
    outline-offset: 2px;
}

.checkout-submit:active {
    transform: translateY(1px);
}

.checkout-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkout-submit__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(245, 242, 236, 0.4);
    border-top-color: var(--editorial-paper, #f5f2ec);
    border-radius: 50%;
    animation: hopia-spin 0.7s linear infinite;
}

.checkout-submit.is-loading .checkout-submit__spinner {
    display: inline-block;
}

.checkout-submit.is-loading .checkout-submit__label {
    margin-left: 0.5rem;
}

.checkout-submit__icon {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.checkout-submit.is-loading .checkout-submit__icon {
    display: none;
}

@keyframes hopia-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Back to Cart - Editorial Style */
.checkout-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    background: transparent;
    border: 0;
    color: var(--editorial-ink, #171717);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition);
}

.checkout-back:hover,
.checkout-back:focus-visible {
    opacity: 0.6;
    text-decoration: none;
    color: var(--editorial-ink, #171717);
}

.checkout-back svg {
    flex-shrink: 0;
}

.checkout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--editorial-line, #c9c2b8);
    border-radius: 2px;
}

.checkout-empty h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
}

.checkout-empty p {
    margin-top: var(--sp-2);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.checkout-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

/* Location selector dialog */
body.is-modal-open {
    overflow: hidden;
}

.location-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.location-modal[hidden] {
    display: none;
}

.location-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 28, 24, 0.5);
}

.location-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: min(88dvh, 720px);
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.location-modal__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--color-border);
}

.location-modal__title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
}

.location-modal__back,
.location-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.location-modal__back:hover,
.location-modal__close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.location-modal__back[hidden] {
    display: none;
}

.location-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: 0;
    padding: var(--sp-3) var(--sp-4) 0;
    list-style: none;
}

.location-step {
    min-width: 0;
}

.location-step__button {
    padding: 0.3rem 0.6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.location-step__button:hover:not(:disabled) {
    background: var(--color-bg-alt);
}

.location-step__button:disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.location-step.is-current .location-step__button {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.location-modal__search {
    padding: var(--sp-3) var(--sp-4) 0;
}

.location-modal__search[hidden] {
    display: none;
}

.location-modal__search input {
    min-height: 40px;
}

.location-modal__status {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.location-modal__status[hidden] {
    display: none;
}

.location-list {
    flex: 1;
    margin: 0;
    padding: var(--sp-2) 0 var(--sp-4);
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.location-list__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.75rem var(--sp-4);
    background: transparent;
    border: 0;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition);
}

.location-list__button:hover {
    background: var(--color-surface-muted);
}

.location-list__button.has-children::after {
    content: '\203A';
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1;
}

.location-list__button.is-selected {
    color: var(--color-primary-dark);
    font-weight: 650;
}

.location-list__empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

@media (min-width: 720px) {
    .checkout-header h1 {
        font-size: clamp(2rem, 5vw, 2.75rem);
    }

    .checkout-header__count {
        margin-top: var(--sp-4);
    }

    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--sp-6);
        align-items: start;
    }

    .checkout-summary {
        position: sticky;
        top: calc(var(--sp-5) + 60px);
        align-self: start;
    }

    .checkout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .location-modal {
        align-items: center;
        padding: var(--sp-4);
    }

    .location-modal__panel {
        max-height: min(80dvh, 720px);
        border-radius: 2px;
    }
}

@media (min-width: 1024px) {
    .checkout-page {
        padding-top: var(--sp-5);
    }

    .checkout-header h1 {
        font-size: clamp(2.25rem, 5vw, 3rem);
    }

    .checkout-header {
        margin-bottom: var(--sp-6);
    }

    .checkout-layout {
        gap: var(--sp-6);
    }

    .checkout-card {
        padding: var(--sp-5);
    }

    .checkout-summary {
        position: sticky;
        top: calc(var(--sp-6) + 60px);
    }
}

/* Order Confirmation Page */
.confirmation-page {
    padding-top: var(--sp-4);
}

.confirmation-hero {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--sp-5) 0 var(--sp-6);
    text-align: center;
}

.confirmation-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.confirmation-hero__eyebrow,
.confirmation-card__eyebrow,
.confirmation-aside__label {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.confirmation-hero__eyebrow {
    margin-top: var(--sp-4);
}

.confirmation-hero h1 {
    margin-top: var(--sp-2);
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    letter-spacing: -0.035em;
}

.confirmation-hero__number {
    margin-top: var(--sp-3);
    color: var(--color-text-soft);
}

.confirmation-hero__number strong {
    color: var(--color-text);
}

.confirmation-page > .alert {
    max-width: 760px;
    margin-inline: auto;
}

.confirmation-layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.confirmation-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

.confirmation-card,
.confirmation-aside__inner {
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.confirmation-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.confirmation-card__head h2 {
    margin-top: var(--sp-1);
    font-size: 1.125rem;
}

.confirmation-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.confirmation-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.confirmation-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.confirmation-item__image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.confirmation-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.confirmation-item__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.confirmation-item__details {
    min-width: 0;
}

.confirmation-item__details h3 {
    overflow-wrap: anywhere;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.confirmation-item__details p {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.confirmation-item__price {
    align-self: start;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.confirmation-totals {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.confirmation-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: 0.9375rem;
}

.confirmation-total-row--muted {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.confirmation-total-row--grand {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
    font-size: 1.0625rem;
    font-weight: 700;
}

.confirmation-meta,
.confirmation-details {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.confirmation-meta > div,
.confirmation-details > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

.confirmation-meta dt,
.confirmation-details dt {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.confirmation-meta dd,
.confirmation-details dd {
    max-width: 68%;
    margin: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.confirmation-cancellation p {
    color: var(--color-text-soft);
}

.confirmation-cancellation form {
    margin-top: var(--sp-4);
}

.confirmation-aside {
    min-width: 0;
}

.confirmation-aside__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.confirmation-aside__number {
    margin-bottom: var(--sp-3);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.confirmation-empty {
    max-width: 600px;
    margin: var(--sp-6) auto;
}

.confirmation-empty h1 {
    font-size: 1.5rem;
}

.confirmation-empty p {
    margin-top: var(--sp-2);
}

.confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.confirmation-empty .confirmation-actions {
    justify-content: center;
}

@media (min-width: 720px) {
    .confirmation-page {
        padding-top: var(--sp-5);
    }

    .confirmation-hero {
        padding-block: var(--sp-6) var(--sp-7);
    }

    .confirmation-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
        gap: var(--sp-6);
    }

    .confirmation-aside {
        position: sticky;
        top: calc(var(--sp-5) + 60px);
    }

    .confirmation-card,
    .confirmation-aside__inner {
        padding: var(--sp-5);
    }
}

@media (min-width: 1024px) {
    .confirmation-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .confirmation-aside {
        top: calc(var(--sp-6) + 60px);
    }
}

/* My Orders Page */
.orders-page {
    padding-top: var(--sp-3);
}

.orders-header {
    margin-bottom: var(--sp-5);
}

.orders-header__eyebrow {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.orders-header__eyebrow span {
    color: var(--color-primary);
    margin-inline: 0.35em;
}

.orders-header h1 {
    margin-top: var(--sp-2);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--editorial-ink, #171717);
}

.orders-header__rule {
    width: 2.5rem;
    height: 2px;
    background: var(--color-primary);
    margin: var(--sp-3) 0 var(--sp-3);
}

.orders-intro {
    max-width: 52ch;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Filters — editorial text labels with bold-outline icons, kept on the
   same underlined tab style as the previous design. */
.orders-filters {
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}

.orders-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.orders-filter-tabs::-webkit-scrollbar {
    display: none;
}

.orders-filter {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}

.orders-filter:hover {
    color: var(--color-text);
}

.orders-filter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    opacity: 0.9;
}

.orders-filter__icon svg {
    width: 15px;
    height: 15px;
}

.orders-filter.is-active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
}

/* Admin order-management filter tabs reuse the customer tab component,
   wrapping instead of horizontally scrolling so every state stays visible. */
.admin-list-filters .orders-filter-tabs {
    flex-wrap: wrap;
}

/* Empty state */
.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}

.orders-empty p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* Orders list */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * Hybrid editorial + structured purchase card.
 *   - Mobile-first vertical hierarchy so information stacks naturally.
 *   - Desktop grid groups the order identity with its status, then
 *     pairs the product image with the product information, and keeps
 *     actions as their own column. Related information stays close
 *     together instead of being stretched across a wide horizontal row.
 */
.order-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "head"
        "media"
        "identity"
        "action";
    row-gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.order-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.order-card:focus-within {
    border-color: var(--editorial-ink, #171717);
    box-shadow: var(--shadow-sm);
}

/* Head: order number label on the left, status badge close on the right.
   Thin editorial divider beneath keeps the row grouped. */
.order-card__head {
    grid-area: head;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.order-card__number {
    margin: 0;
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.order-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
    min-width: 0;
    text-align: right;
}

.order-card__cancel-note {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-danger);
}

/* Product image — large enough to be useful on small screens,
   compact in the desktop column. */
.order-card__media {
    grid-area: media;
    justify-self: start;
    width: min(62%, 240px);
    aspect-ratio: var(--card-media-ratio);
    overflow: hidden;
    border-radius: var(--card-radius-media);
    background: var(--color-bg-alt);
}

.order-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.order-card__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted);
}

/* Product identity: name + date + meta + price. Price is grouped with the
   product info on mobile per the redesign hierarchy. */
.order-card__identity {
    grid-area: identity;
    min-width: 0;
}

.order-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.order-card__date {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.order-card__meta {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.order-card__price {
    margin-top: var(--sp-3);
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text);
}

/* Action row — primary VIEW ORDER button with subtle arrow icon.
   Secondary EDIT FEEDBACK button for delivered orders. */
.order-card__action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
}

.order-card__feedback {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 44px;
}

.order-card__view {
    width: 100%;
    min-height: 44px;
}

.order-card__view-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}

.order-card__view-arrow svg {
    width: 14px;
    height: 14px;
}

.order-card__view:hover .order-card__view-arrow {
    transform: translateX(2px);
}

/* Whole card is clickable via the VIEW ORDER link overlay */
.order-card__view::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Status badge icon — sits before the label inside the badge. */
.badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.badge__icon svg {
    width: 12px;
    height: 12px;
}

/* Tablet and desktop: three columns (media | info | action) under a
   shared head row, so related information stays grouped. */
@media (min-width: 720px) {
    .orders-page {
        padding-top: var(--sp-4);
    }

    .order-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "head   head   head"
            "media  identity action";
        align-items: start;
        column-gap: var(--sp-5);
        row-gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-5);
    }

    .order-card__media {
        width: 104px;
    }

    .order-card__action {
        align-self: center;
        align-items: flex-end;
    }

    .order-card__view {
        width: auto;
        min-height: 36px;
    }

    .order-card__feedback {
        width: auto;
        min-height: 36px;
    }
}

@media (min-width: 1024px) {
    .order-card {
        column-gap: var(--sp-6);
        padding: var(--sp-5) var(--sp-6);
    }

    .order-card__media {
        width: 116px;
    }
}

/* Order Detail Page — Hybrid Editorial Order Record */
.order-detail-page {
    padding-top: var(--sp-4);
}

.order-detail-page > .alert {
    max-width: 760px;
}

/* Masthead breadcrumb: context label + order identifier */
.order-detail-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-detail-breadcrumb__list a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.order-detail-breadcrumb__list a:hover {
    color: var(--color-primary);
}

.order-detail-breadcrumb__list li[aria-current="page"] {
    color: var(--color-text-soft);
}

.order-detail-breadcrumb__sep {
    display: flex;
    color: var(--color-border-strong);
}

/* Editorial masthead: eyebrow, dominant heading, meta + status row */
.order-detail-hero {
    margin-top: var(--sp-4);
}

.order-detail-hero__eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.order-detail-hero h1 {
    margin-top: var(--sp-2);
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.order-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-2);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* Section cards */
.order-detail-card {
    min-width: 0;
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.order-detail-card--progress {
    margin-top: var(--sp-4);
}

.order-detail-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.order-detail-card__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.order-detail-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-text);
}

.order-detail-card__sub {
    margin-top: 3px;
    padding-left: 28px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.order-detail-card__count {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Premium bold-outline icons for section headings, timeline
   nodes, and action controls. Charcoal by default; currentColor
   inside buttons. */
.order-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-text-soft);
}

.btn .order-icon {
    width: 16px;
    height: 16px;
    color: currentColor;
}

/* Order progress timeline: compact vertical stack on mobile,
   horizontal editorial timeline on desktop */
.od-progress {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.od-progress__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
}

.od-progress__step:last-child {
    padding-bottom: 0;
}

.od-progress__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 42px;
    bottom: 2px;
    left: 19px;
    width: 2px;
    background: var(--color-border-strong);
}

.od-progress__step.is-complete:not(:last-child)::after {
    background: var(--color-text);
}

.od-progress__node {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.od-progress__node svg {
    width: 18px;
    height: 18px;
}

.od-progress__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.od-progress__step.is-complete .od-progress__node {
    border-color: var(--color-text);
    color: var(--color-text);
}

.od-progress__step.is-complete .od-progress__label {
    color: var(--color-text-soft);
}

.od-progress__step.is-current .od-progress__node {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.od-progress__step.is-current .od-progress__label {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.od-progress--courier .od-progress__step.is-unreached .od-progress__node {
    border-style: dashed;
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: .65;
}

.od-progress--courier .od-progress__step.is-unreached .od-progress__label {
    color: var(--color-text-muted);
    font-weight: 400;
}

.od-timeline-status {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.od-timeline-status__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    color: var(--color-text);
}

.od-progress--courier .od-progress__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 0;
    min-height: 40px;
    overflow-wrap: anywhere;
}

.od-progress__details-link {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Persisted courier history stays vertical, including on desktop. */
.od-courier {
    min-width: 0;
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.od-courier__parent {
    margin-bottom: var(--sp-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-primary-dark);
    text-transform: uppercase;
}

.od-courier .badge,
.od-timeline-status .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.od-courier__note,
.od-courier__time {
    margin-top: var(--sp-2);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.od-courier__cycle {
    margin-top: var(--sp-4);
}

.od-courier__cycle.is-current-cycle {
    padding-top: var(--sp-3);
    border-top: 2px solid var(--color-primary);
}

.od-courier__cycle-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: 0.875rem;
}

.od-courier__history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.od-courier__event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
}

.od-courier__event:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 42px;
    bottom: 2px;
    left: 19px;
    width: 2px;
    background: var(--color-border-strong);
}

.od-courier__event-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.od-courier__event-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.od-courier__time {
    display: block;
}

.od-courier__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.od-courier__meta .od-courier__time {
    margin-top: 0;
}

.od-courier__reason {
    margin-top: var(--sp-2);
    font-size: 0.875rem;
    white-space: pre-wrap;
}

.od-courier__event.is-current .od-progress__node {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.od-courier__event.is-current .od-courier__event-title {
    color: var(--color-primary-dark);
}

/* Cancelled order state, shown in the Order Status section
   only when the order is actually cancelled */
.od-cancelled {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--color-danger-soft);
    border: 1px solid #f0cfcd;
    border-radius: var(--radius-sm);
}

.od-cancelled__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-danger);
}

.od-cancelled__icon svg {
    width: 20px;
    height: 20px;
}

.od-cancelled p {
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--color-danger);
}

.od-cancelled .od-cancelled__title {
    margin-top: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Purchase items */
.order-detail-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-detail-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: start;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
}

.order-detail-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.order-item-thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item-thumb__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
}

.order-detail-item__info {
    min-width: 0;
}

.order-detail-item__name {
    overflow-wrap: anywhere;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.order-detail-item__meta {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.order-detail-item__qty {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.order-detail-item__subtotal {
    align-self: start;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Stacked label/value rows: scannable, and long values
   such as addresses wrap naturally */
.order-detail-details {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0;
}

.order-detail-details > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.order-detail-details dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.order-detail-details dd {
    margin: 0;
    color: var(--color-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Single-column flow on mobile. DOM order inside the two column
   wrappers = mobile order (purchase, delivery, payment, shipment,
   actions, footer); the wrappers collapse with display: contents and
   explicit order values restore the original interleaved stack. */
.order-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    align-items: start;
}

.order-detail-main,
.order-detail-rail {
    display: contents;
}

.order-detail-card--purchase {
    order: 1;
}

.order-detail-card--delivery {
    order: 2;
}

.order-detail-card--payment {
    order: 3;
}

.order-detail-card--shipment {
    order: 4;
}

.order-detail-card--actions {
    order: 5;
}

.order-detail-card--footer {
    order: 6;
}

/* Purchase totals */
.order-detail-totals {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.order-detail-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.order-detail-total-row span:last-child {
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.order-detail-total-row--muted,
.order-detail-total-row--muted span:last-child {
    color: var(--color-text-muted);
}

.order-detail-total-row--muted span:last-child {
    font-weight: 500;
}

.order-detail-total-row--grand {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

.order-detail-total-row--grand span:last-child {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.od-tracking-number {
    letter-spacing: 0.04em;
}

.order-detail-tracking {
    margin-top: var(--sp-4);
}

.order-detail-tracking .btn {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Order Actions — exception section with muted-danger framing */
.order-detail-cancellation {
    border-color: #f0cfcd;
}

.order-detail-cancellation p:not(.od-status-note) {
    color: var(--color-text-soft);
    font-size: 0.9375rem;
}

.od-status-note {
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: 0.875rem;
}

.order-detail-cancellation form {
    margin-top: var(--sp-4);
}

/* Footer actions: VIEW ALL ORDERS (primary) / CONTINUE SHOPPING */
.order-detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.order-detail-actions .btn {
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.order-detail-action__icon {
    flex-shrink: 0;
}

.order-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: var(--sp-6) auto;
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}

.order-detail-empty__icon {
    margin-bottom: var(--sp-4);
    color: var(--color-text-muted);
}

.order-detail-empty h1 {
    font-size: 1.5rem;
}

.order-detail-empty p {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-5);
    color: var(--color-text-soft);
}

@media (min-width: 720px) {
    /* Clean 2fr/1fr grid with a single column gap. The two wrappers
       become the grid cells; inside each wrapper, cards stack with a
       consistent vertical gap and keep their natural height. */
    .order-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        column-gap: var(--sp-5);  /* 24px — within 24-32px target */
        row-gap: var(--sp-5);     /* 24px — consistent card vertical gap */
        margin-top: var(--sp-5);
    }

    .order-detail-main,
    .order-detail-rail {
        display: flex;
        flex-direction: column;
        gap: var(--sp-5);  /* 24px consistent vertical gap between rail cards */
    }

    .order-detail-item {
        grid-template-columns: 96px minmax(0, 1fr) auto;
    }

    .order-detail-item__name {
        font-size: 1.0625rem;
    }

    /* Horizontal editorial progress timeline */
    .od-progress {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .od-progress--courier {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .od-progress--courier .od-progress__copy {
        align-items: center;
        min-height: 0;
    }

    .od-progress__step {
        flex-direction: column;
        align-items: center;
        gap: var(--sp-2);
        padding-bottom: 0;
        text-align: center;
    }

    .od-progress__step:not(:last-child)::after {
        display: none;
    }

    .od-progress__step:not(:first-child)::before {
        content: '';
        position: absolute;
        top: 19px;
        left: calc(-50% + 28px);
        width: calc(100% - 56px);
        height: 2px;
        background: var(--color-border-strong);
    }

    .od-progress__step.is-complete:not(:first-child)::before {
        background: var(--color-text);
    }

    .od-progress__step.is-current:not(:first-child)::before {
        background: var(--color-primary);
    }

    .od-progress__label {
        font-size: 0.6875rem;
    }
}

/* ------------------------------------------------------------------ *
 * Customer Account Center
 *
 * The page masthead (ACCOUNT / MY ACCOUNT / greeting) was removed
 * deliberately, so the profile identity area is the page's primary
 * visual identity. Hierarchy comes from the identity area, the
 * module grid beneath it, and the quiet logout row below them.
 *
 * Layout: .account-grid is a single-column stack on small screens
 * (DOM order = identity, personal information, security, quick
 * actions, log out) and becomes a two-column grid on wide screens,
 * where personal information leads, quick actions supports it, and
 * security spans the full width underneath. Panel heights are never
 * forced to match.
 * ------------------------------------------------------------------ */
.account-center {
    /* Account-scoped radius system. Kept local to the Account Center so the
       site-wide card geometry tokens are untouched. Primary panels read as
       soft, contemporary surfaces; inner elements stay slightly tighter. */
    --account-radius: 20px;
    --account-radius-inner: 14px;

    /* Account-scoped warm surface system. The page sits on warm cream, so
       pure white panels read as stark and clinical. These tokens shift the
       Account Center to a warmer ivory while staying inside the existing
       Hopia Fits palette: warm ivory surfaces, charcoal type, muted-rust
       accents, thin warm borders, and no heavy shadows. */
    --account-surface: #fbf8f1;
    --account-surface-soft: #f6f0e4;
    --account-input-bg: #fffdf8;
    --account-border: #e8e1d2;
    --account-border-strong: #d9d0bd;

    padding-block: var(--sp-2) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Premium bold-outline icon for the Account Center, shared stroke
   weight with the checkout / confirmation / orders / order icon
   families so every icon set on the customer site reads as one. */
.account-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--editorial-ink, #171717);
}

.account-btn .account-icon,
.account-link .account-icon,
.account-quick__action .account-icon,
.account-exit__logout .account-icon {
    color: currentColor;
}

/* -------------------------------------------------------------- *
 * Profile identity area — the page's visual anchor
 * -------------------------------------------------------------- */
.account-identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--account-surface);
    border: 1px solid var(--account-border);
    border-top: 2px solid var(--editorial-ink, #171717);
    border-radius: var(--account-radius);
}

.account-identity__main {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
}

/* Editorial identity mark: a solid charcoal disc with reversed initials.
   Not a gradient, shadow, or social-media avatar — a single flat fill
   that gives the identity area its visual weight. */
.account-identity__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
}

.account-identity__initials {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}

.account-identity__text {
    min-width: 0;
}

.account-identity__name {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--editorial-ink, #171717);
    overflow-wrap: anywhere;
}

.account-identity__email {
    margin-top: 0.2rem;
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-identity__role {
    margin-top: var(--sp-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-primary);
}

.account-identity__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Quiet uppercase text action. The pencil is dropped in favour of the
   trailing arrow the editorial action links use elsewhere. */
.account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 1rem;
    background: var(--account-surface);
    border: 1px solid var(--editorial-ink, #171717);
    border-radius: var(--radius-sm);
    color: var(--editorial-ink, #171717);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);
}

.account-link:hover,
.account-link:focus-visible {
    background: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
    text-decoration: none;
}

.account-link--sm {
    width: auto;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--editorial-ink, #171717);
}

.account-link--sm:hover,
.account-link--sm:focus-visible {
    background: var(--editorial-ink, #171717);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
}

.account-link__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--transition-base);
}

.account-link__arrow svg {
    width: 15px;
    height: 15px;
}

.account-link:hover .account-link__arrow,
.account-link:focus-visible .account-link__arrow,
.account-link--sm:hover .account-link__arrow,
.account-link--sm:focus-visible .account-link__arrow {
    transform: translateX(3px);
}

/* -------------------------------------------------------------- *
 * Module grid
 * -------------------------------------------------------------- */
.account-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.account-panel {
    background: var(--account-surface);
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    padding: var(--sp-5);
    min-width: 0;
}

.account-panel__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--account-border);
}

.account-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--editorial-ink, #171717);
}

.account-panel__title {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    color: var(--color-text);
}

/* Shown only for failures that belong to no single field, so a rejected
   field never repeats its message below the form. */
.account-panel__error {
    margin-top: var(--sp-3);
    padding-left: var(--sp-4);
    border-left: 2px solid var(--color-danger);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-danger);
}

.account-panel__error:empty {
    display: none;
}

.account-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--account-border);
}

/* State ownership
   ----------------
   Read/edit visibility is driven by the root state classes rather than
   by per-element `hidden` bookkeeping, so leaving a state can never
   strand its controls. The state class is more specific than the
   user-agent [hidden] rule, so it wins where a stale attribute remains. */
.account-link[hidden],
.account-panel__actions[hidden],
.account-success[hidden] {
    display: none;
}

.account-panel__actions[data-account-read-actions],
.account-panel__actions[data-account-profile-actions] {
    display: none;
}

.account-center.is-editing .account-panel__actions[data-account-profile-actions] {
    display: flex;
}

.account-center.is-editing .account-panel__actions[data-account-read-actions] {
    display: none;
}

.account-center:not(.is-editing) .account-panel__actions[data-account-read-actions] {
    display: flex;
}

/* -------------------------------------------------------------- *
 * Module success state
 *
 * One banner per module, so a profile save is never repeated in the
 * Security panel and vice versa.
 * -------------------------------------------------------------- */
.account-success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: var(--sp-4);
    padding: 0.75rem 1rem;
    background: var(--color-success-soft);
    border: 1px solid #cfe3d6;
    border-radius: var(--radius-sm);
    color: #2f6142;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.account-success.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.account-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-success);
}

.account-success__icon svg {
    width: 17px;
    height: 17px;
}

.account-success__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.account-success__title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
}

.account-success__detail {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

/* -------------------------------------------------------------- *
 * Editorial field rows
 * -------------------------------------------------------------- */
.account-fields,
.account-password {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--account-border);
}

.account-fields .account-field:first-of-type,
.account-password .account-field:first-of-type {
    padding-top: 0;
}

.account-fields .account-field:last-of-type,
.account-password .account-field:last-of-type {
    border-bottom: 0;
}

.account-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.account-field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-text-soft);
}

.account-field__icon svg {
    width: 17px;
    height: 17px;
}

.account-field__control {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.account-field__value {
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-field__value--text {
    font-weight: 500;
}

.account-field__value--missing {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
}

.account-field__value--mask {
    letter-spacing: 0.22em;
    color: var(--color-text-soft);
}

/* One inline message per field, marked with a restrained warning glyph. */
.account-field__error {
    position: relative;
    padding-left: var(--sp-4);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-danger);
}

.account-field__error:empty {
    display: none;
}

.account-field__error:not(:empty)::before {
    content: "\26A0";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.75rem;
    line-height: 1.7;
}

/* The inputs live in the same row position as the read-only values, so
   entering edit mode does not reflow the section. Both are always in the
   DOM: the value span carries no hidden attribute, and the input is
   revealed by the is-editing state. Scoped to the personal-information
   form so the security row's mask and CHANGE PASSWORD control are never
   affected. */
.account-fields .account-field__input {
    display: none;
    max-width: 100%;
}

.account-center.is-editing .account-fields .account-field__value {
    display: none;
}

.account-center.is-editing .account-fields .account-field__input {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* Warm the native inputs so they sit inside the ivory panel rather than
   reading as stark white registration fields. */
.account-center .input {
    background: var(--account-input-bg);
    border-color: var(--account-border-strong);
}

.account-center .input.is-error {
    border-color: var(--color-danger);
}

.account-center .input.is-error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(168, 58, 52, 0.12);
}

/* The revealed eye sits a touch darker while the value is unmasked. */
.input-password__toggle.is-revealed {
    color: var(--color-text);
}

/* Email confirmation field, revealed only when the email actually changes. */
.account-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--account-border);
}

.account-confirm[hidden] {
    display: none;
}

.account-confirm .input-password {
    max-width: 420px;
}

/* Security module: masked read row plus the expanding password form. */
.account-field--security {
    padding-top: 0;
    border-bottom: 0;
}

.account-field__control--security {
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* Editorial inline reveal: the compact password read row folds away as
   the inline editor unfolds in the same spot, so the Security section
   transforms in place rather than swapping to a separate block. */
.account-security-row {
    overflow: hidden;
    max-height: 220px;
    opacity: 1;
    visibility: visible;
    transition: max-height var(--transition-slow), opacity var(--transition-base),
        padding var(--transition-slow), visibility var(--transition-base);
}

.account-password {
    margin: 0;
}

/* Collapsed by default. The 0fr track collapses the wrapper to zero
   height, and `visibility: hidden` takes the closed form out of the tab
   order and the accessibility tree while the track animates. */
.account-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--transition-slow), opacity var(--transition-base),
        visibility var(--transition-base);
}

.account-reveal__inner {
    overflow: hidden;
    min-height: 0;
}

.account-reveal__inner > .account-password {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--account-border);
}

.account-center.is-password-editing .account-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

.account-center.is-password-editing .account-security-row {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* -------------------------------------------------------------- *
 * Actions
 * -------------------------------------------------------------- */
.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base),
        border-color var(--transition-base), opacity var(--transition-base);
}

.account-btn--primary {
    background: var(--editorial-ink, #171717);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
}

.account-btn--ghost {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--editorial-ink, #171717);
}

.account-btn--ghost:hover,
.account-btn--ghost:focus-visible {
    background: var(--color-surface-muted);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-ink, #171717);
}

.account-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.account-btn.is-loading {
    opacity: 0.7;
}

/* Trailing arrow on the primary submit action, matching the editorial
   action language used by the section links. */
.account-btn__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--transition-base);
}

.account-btn__arrow svg {
    width: 15px;
    height: 15px;
}

.account-btn--primary:hover .account-btn__arrow,
.account-btn--primary:focus-visible .account-btn__arrow {
    transform: translateX(3px);
}

/* -------------------------------------------------------------- *
 * Quick actions — primary dark card + secondary light card
 * (preserved destinations, icons, arrows and hover behavior)
 * -------------------------------------------------------------- */
.account-quick__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.account-quick__action {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 64px;
    padding: var(--sp-4);
    border: 1px solid var(--account-border-strong);
    border-radius: var(--account-radius-inner);
    background: var(--account-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base),
        color var(--transition-base);
}

.account-quick__action:hover,
.account-quick__action:focus-visible {
    text-decoration: none;
}

.account-quick__action--primary {
    background: var(--editorial-ink, #171717);
    border-color: var(--editorial-ink, #171717);
    color: var(--editorial-paper, #f5f2ec);
}

.account-quick__action--secondary {
    background: var(--account-surface-soft);
    border-color: var(--account-border-strong);
    color: var(--color-text);
}

.account-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: currentColor;
}

.account-quick__icon svg {
    width: 19px;
    height: 19px;
}

.account-quick__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.account-quick__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
}

.account-quick__sub {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.account-quick__action--primary .account-quick__sub {
    color: rgba(245, 242, 236, 0.72);
}

.account-quick__arrow {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: currentColor;
    transition: transform var(--transition-base), color var(--transition-base);
}

.account-quick__arrow svg {
    width: 16px;
    height: 16px;
}

.account-quick__action:hover .account-quick__arrow,
.account-quick__action:focus-visible .account-quick__arrow {
    transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
    .account-quick__action--primary:hover,
    .account-quick__action--primary:focus-visible {
        background: var(--editorial-paper, #f5f2ec);
        border-color: var(--editorial-ink, #171717);
        color: var(--editorial-ink, #171717);
    }

    .account-quick__action--primary:hover .account-quick__sub,
    .account-quick__action--primary:focus-visible .account-quick__sub {
        color: var(--color-text-muted);
    }

    .account-quick__action--secondary:hover,
    .account-quick__action--secondary:focus-visible {
        background: var(--color-surface-muted);
        border-color: var(--editorial-ink, #171717);
        color: var(--editorial-ink, #171717);
    }
}

/* -------------------------------------------------------------- *
 * Log out — clearly separated from the modules above
 * -------------------------------------------------------------- */
.account-exit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
}

.account-exit__rule {
    width: 100%;
    max-width: 220px;
    height: 1px;
    background: var(--account-border);
}

.account-exit__logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    color: var(--color-danger);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition-base);
}

.account-exit__logout:hover,
.account-exit__logout:focus-visible {
    color: var(--color-danger-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------- *
 * Tablet — the identity area turns horizontal and the field rows
 * become label/value pairs before the grid gains its second column
 * -------------------------------------------------------------- */
@media (min-width: 720px) {
    .account-center {
        padding-block: var(--sp-4) var(--sp-6);
        gap: var(--sp-5);
    }

    .account-identity {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-5);
        padding: var(--sp-5) var(--sp-6);
    }

    .account-identity__actions {
        flex: 0 0 auto;
    }

    /* The disc steps up once the identity area turns horizontal. */
    .account-identity__avatar {
        width: 72px;
        height: 72px;
    }

    .account-identity__initials {
        font-size: 1.375rem;
    }

    .account-link {
        width: auto;
    }

    .account-grid {
        gap: var(--sp-5);
    }

    .account-field {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        padding: var(--sp-4) 0;
    }

    /* Desktop row layout: the value/input takes the right side, with the
       label and its icon held at a consistent width on the left. */
    .account-field__label {
        flex: 0 0 200px;
    }

    .account-field__control {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .account-field__value {
        text-align: right;
    }

    .account-field--security .account-field__value {
        text-align: left;
    }

    .account-confirm {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--sp-4);
    }

    .account-confirm .account-field__label {
        flex: 0 0 200px;
    }

    .account-confirm .input-password {
        width: 100%;
        max-width: none;
    }

    .account-confirm .account-field__error {
        flex: 1 1 100%;
    }

    .account-panel__actions {
        gap: var(--sp-3);
    }
}

/* Desktop & wide — personal information leads, quick actions supports
   it, security spans the full width underneath. */
@media (min-width: 960px) {
    .account-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }

    .account-panel--personal {
        grid-column: 1;
        grid-row: 1;
    }

    .account-panel--quick {
        grid-column: 2;
        grid-row: 1;
    }

    .account-panel--security {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (min-width: 1024px) {
    .account-identity {
        padding: var(--sp-6);
    }

    .account-identity__name {
        font-size: 1.75rem;
    }

    .account-identity__avatar {
        width: 84px;
        height: 84px;
    }

    .account-identity__initials {
        font-size: 1.625rem;
    }

    .account-panel {
        padding: var(--sp-6);
    }
}

/* Restrained microinteractions only, and never for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .account-link,
    .account-link__arrow,
    .account-btn,
    .account-btn__arrow,
    .account-quick__action,
    .account-quick__arrow,
    .account-exit__logout,
    .account-success,
    .account-security-row,
    .account-reveal {
        transition: none;
    }

    .account-link:hover .account-link__arrow,
    .account-link:focus-visible .account-link__arrow,
    .account-link--sm:hover .account-link__arrow,
    .account-link--sm:focus-visible .account-link__arrow,
    .account-btn--primary:hover .account-btn__arrow,
    .account-btn--primary:focus-visible .account-btn__arrow,
    .account-quick__action:hover .account-quick__arrow,
    .account-quick__action:focus-visible .account-quick__arrow {
        transform: none;
    }

    .account-success {
        opacity: 1;
        transform: none;
    }

    .account-reveal {
        opacity: 1;
    }
}
/* Admin Dashboard */
.admin-dashboard {
    padding-block: var(--sp-2) var(--sp-4);
}

.admin-dashboard__header {
    max-width: 680px;
    margin-bottom: var(--sp-6);
}

.admin-dashboard__eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-dashboard__header h1 {
    margin-top: var(--sp-2);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
}

.admin-dashboard__welcome {
    margin-top: var(--sp-2);
    color: var(--color-text-soft);
}

.admin-dashboard__section + .admin-dashboard__section {
    margin-top: var(--sp-6);
}

.admin-dashboard__section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.admin-dashboard__section-heading h2 {
    margin-top: var(--sp-1);
    font-size: 1.25rem;
}

.admin-stat-grid,
.admin-actions-grid {
    display: grid;
    gap: var(--sp-3);
}

.admin-stat-card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.admin-stat-card__label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-stat-card__value {
    margin-top: var(--sp-4);
    color: var(--color-text);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.admin-dashboard .card-body {
    padding: var(--sp-4);
}

.admin-dashboard .table-wrap {
    margin-top: var(--sp-4);
}

.admin-action-card {
    display: flex;
    min-height: 156px;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition),
        transform var(--transition);
}

.admin-action-card:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.admin-action-card__title {
    font-size: 1.125rem;
    font-weight: 650;
}

.admin-action-card__description {
    margin-top: var(--sp-2);
    color: var(--color-text-soft);
    font-size: 0.9375rem;
}

.admin-action-card__link {
    margin-top: auto;
    padding-top: var(--sp-4);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 650;
}

@media (min-width: 560px) {
    .admin-stat-grid,
    .admin-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    .admin-dashboard {
        padding-block: var(--sp-3) var(--sp-5);
    }

    .admin-dashboard__header h1 {
        font-size: 2rem;
    }

    .admin-dashboard__section + .admin-dashboard__section {
        margin-top: var(--sp-7);
    }

    .admin-dashboard .card-body {
        padding: var(--sp-5);
    }
}

@media (min-width: 1024px) {
    .admin-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sp-4);
    }

    .admin-actions-grid {
        gap: var(--sp-4);
    }

    .admin-dashboard__section-heading h2 {
        font-size: 1.375rem;
    }
}

/* Admin Products */
.admin-products,
.admin-product-form-page {
    padding-block: var(--sp-2) var(--sp-4);
}

.admin-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.admin-page-header__eyebrow,
.admin-section-heading__eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-page-header h1 {
    margin-top: var(--sp-2);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
}

.admin-page-header__copy {
    max-width: 640px;
    margin-top: var(--sp-2);
    color: var(--color-text-soft);
}

.admin-page-header__back {
    display: inline-flex;
    margin-bottom: var(--sp-3);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    text-decoration: none;
}

.admin-page-header__back:hover {
    color: var(--color-primary);
}

.admin-products__filters {
    margin-bottom: var(--sp-5);
}

.admin-section-heading {
    margin-bottom: var(--sp-4);
}

.admin-section-heading h2 {
    margin-top: var(--sp-1);
    font-size: 1.25rem;
}

.admin-filter-form {
    display: grid;
    gap: var(--sp-3);
}

.admin-filter-form .field {
    margin-bottom: 0;
}

.admin-filter-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-1);
}

.admin-products__summary {
    margin-bottom: var(--sp-3);
}

.admin-product-grid {
    display: grid;
    gap: var(--sp-4);
}

.admin-product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.admin-product-card.is-sold {
    background: var(--color-surface-muted);
}

.admin-product-card__image {
    display: flex;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.admin-product-card__image img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.admin-product-card.is-sold .admin-product-card__image img {
    opacity: 0.62;
}

.admin-product-card__placeholder {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.admin-product-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: var(--sp-4);
}

.admin-product-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.admin-product-card__category {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-product-card__name {
    margin-top: var(--sp-2);
    font-size: 1.0625rem;
    line-height: 1.35;
}

.admin-product-card__price {
    margin-top: var(--sp-2);
    font-size: 1.0625rem;
}

.admin-product-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.admin-product-card__details dt {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-product-card__details dd {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    color: var(--color-text-soft);
    font-size: 0.875rem;
}

.admin-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-5);
}

.admin-product-form-page .admin-page-header {
    margin-bottom: var(--sp-5);
}

.admin-product-form-page .admin-page-header__back {
    display: inline-flex;
    margin-bottom: var(--sp-3);
    color: var(--color-text-soft);
    font-size: 0.875rem;
    text-decoration: none;
}

.admin-product-form-page .admin-page-header__back:hover {
    color: var(--color-primary);
}

.admin-form-layout {
    display: grid;
    gap: var(--sp-5);
}

.admin-form-card {
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.admin-form-card h2 {
    margin-bottom: var(--sp-1);
    font-size: 1.125rem;
}

.admin-form-card__intro {
    margin-bottom: var(--sp-5);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.admin-form-grid {
    display: grid;
    gap: 0 var(--sp-4);
}

.admin-form-card .field:last-child {
    margin-bottom: 0;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.admin-form-actions .btn {
    flex: 1 1 auto;
}

.admin-image-upload {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

.admin-image-upload h2 {
    margin-bottom: var(--sp-2);
}

.admin-image-upload__hint {
    margin-bottom: var(--sp-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.admin-image-upload__add {
    margin-top: var(--sp-3);
}

.admin-image-row {
    position: relative;
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.admin-image-preview {
    display: block;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 4 / 3;
    margin-top: var(--sp-3);
    border: 1px solid var(--color-border);
    object-fit: cover;
}

.admin-image-row .remove-image {
    margin-top: var(--sp-2);
}

.admin-existing-images {
    margin-top: var(--sp-5);
}

.admin-existing-images h2 {
    margin-bottom: var(--sp-1);
}

.admin-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.admin-image-card {
    min-width: 0;
    padding: var(--sp-2);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.admin-image-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.admin-image-card form {
    margin-top: var(--sp-2);
}

.admin-image-card button {
    width: 100%;
}

@media (min-width: 560px) {
    .admin-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    .admin-products,
    .admin-product-form-page {
        padding-block: var(--sp-3) var(--sp-5);
    }

    .admin-page-header {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    .admin-page-header h1 {
        font-size: 2rem;
    }

    .admin-products__filters .card-body,
    .admin-form-card {
        padding: var(--sp-5);
    }

    .admin-filter-form {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto;
        align-items: end;
    }

    .admin-filter-form__actions {
        padding-top: 0;
    }

    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-form-grid .field--wide {
        grid-column: 1 / -1;
    }

    .admin-form-layout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.35fr);
        align-items: start;
    }

    .admin-image-upload,
    .admin-existing-images {
        grid-column: 2;
    }

    .admin-image-upload {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

@media (min-width: 1024px) {
    .admin-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-5);
    }

    .admin-product-card__body {
        padding: var(--sp-5);
    }
}

/* Admin Orders */
.admin-orders {
    padding-block: var(--sp-2) var(--sp-4);
}

.admin-orders__summary {
    margin-bottom: var(--sp-3);
}

.admin-order-list {
    display: grid;
    gap: var(--sp-4);
}

.admin-order-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.admin-order-card__header {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
}

.admin-order-card__eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-order-card h2 {
    margin-top: var(--sp-1);
    font-size: 1.25rem;
}

.admin-order-card__statuses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.admin-order-card__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin: 0;
}

.admin-order-card__details dt {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-order-card__details dd {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    color: var(--color-text-soft);
    font-size: 0.9375rem;
}

.admin-order-card__details .admin-order-card__total {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.admin-order-card__actions {
    display: flex;
    padding-top: var(--sp-1);
}

.admin-order-card__actions .btn {
    width: 100%;
}

.badge-cancellation-none {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.badge-cancellation-requested {
    background: var(--color-warning-soft);
    border-color: #ece0c2;
    color: var(--color-warning);
}

.badge-cancellation-approved,
.badge-cancellation-rejected {
    background: var(--color-danger-soft);
    border-color: #f0cfcd;
    color: var(--color-danger);
}

@media (min-width: 720px) {
    .admin-orders {
        padding-block: var(--sp-3) var(--sp-5);
    }

    .admin-order-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--sp-5);
        padding: var(--sp-5);
    }

    .admin-order-card__header {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .admin-order-card__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: var(--sp-5);
    }

    .admin-order-card__actions {
        align-items: end;
        padding-top: 0;
    }

    .admin-order-card__actions .btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .admin-order-list {
        gap: var(--sp-5);
    }

    .admin-order-card__details {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Admin Order Detail */
.admin-order-detail {
    padding-block: var(--sp-2) var(--sp-4);
}

.admin-order-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.admin-order-detail__header h1 {
    margin-top: var(--sp-2);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
}

.admin-order-detail__header-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.admin-order-detail__date {
    margin-top: var(--sp-2);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.admin-order-detail__layout,
.admin-order-detail__main,
.admin-order-detail__info-grid {
    display: grid;
    gap: var(--sp-4);
}

.admin-order-detail__layout {
    align-items: start;
}

.admin-order-detail__main {
    min-width: 0;
}

.admin-order-detail__card {
    min-width: 0;
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.admin-order-detail__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.admin-order-detail__card-head h2 {
    margin-top: var(--sp-1);
    font-size: 1.125rem;
}

.admin-order-detail__eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-order-detail__status-meta,
.admin-order-detail__details,
.admin-order-detail__total-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
}

.admin-order-detail__status-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.admin-order-detail__status-meta span,
.admin-order-detail__details dt,
.admin-order-detail__total-list dt,
.admin-order-item__details dt {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-order-detail__status-meta strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.9375rem;
}

.admin-order-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.admin-order-detail__action-note p:last-child {
    margin-top: var(--sp-1);
    color: var(--color-text-soft);
    font-size: 0.875rem;
}

.admin-order-detail__action-buttons,
.admin-order-detail__tracking-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.admin-order-detail__action-buttons form,
.admin-order-detail__action-buttons .btn,
.admin-order-detail__actions > form,
.admin-order-detail__actions > form .btn {
    width: 100%;
}

.admin-order-detail__cod-confirm {
    max-width: 100%;
    white-space: normal;
}

.admin-order-items {
    display: flex;
    flex-direction: column;
}

.admin-order-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.admin-order-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.admin-order-item:last-child {
    padding-bottom: 0;
}

.admin-order-item__info {
    min-width: 0;
}

.admin-order-item__info h3 {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.35;
}

.admin-order-item__meta {
    margin-top: var(--sp-1);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.admin-order-item__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
}

.admin-order-item__details dd {
    margin-top: 0.15rem;
    color: var(--color-text-soft);
    font-size: 0.875rem;
}

.admin-order-detail__details > div,
.admin-order-detail__total-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

.admin-order-detail__details dd,
.admin-order-detail__total-list dd {
    max-width: 68%;
    margin: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.admin-order-detail__details--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.admin-order-detail__tracking-form {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}

.admin-order-detail__tracking-form .field {
    margin-bottom: 0;
}

.admin-order-detail__totals {
    position: sticky;
    top: calc(var(--sp-4) + 60px);
}

.admin-order-detail__total-list {
    gap: var(--sp-2);
}

.admin-order-detail__total-list dd {
    font-weight: 600;
    white-space: nowrap;
}

.admin-order-detail__total-list-grand {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
}

.admin-order-detail__total-list-grand dt,
.admin-order-detail__total-list-grand dd {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.admin-order-detail__empty {
    max-width: 620px;
    margin: var(--sp-5) auto;
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}

.admin-order-detail__empty h1 {
    margin-top: var(--sp-2);
    font-size: 1.5rem;
}

.admin-order-detail__empty p:not(.admin-page-header__eyebrow) {
    margin: var(--sp-2) auto var(--sp-5);
    color: var(--color-text-soft);
}

@media (min-width: 560px) {
    .admin-order-detail__action-buttons {
        flex-direction: row;
    }

    .admin-order-detail__action-buttons form,
    .admin-order-detail__action-buttons .btn {
        width: auto;
    }
}

@media (min-width: 720px) {
    .admin-order-detail {
        padding-block: var(--sp-3) var(--sp-5);
    }

    .admin-order-detail__header {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        margin-bottom: var(--sp-6);
    }

    .admin-order-detail__header h1 {
        font-size: 2rem;
    }

    .admin-order-detail__header-status {
        justify-content: flex-end;
    }

    .admin-order-detail__layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: var(--sp-5);
    }

    .admin-order-detail__card {
        padding: var(--sp-5);
    }

    .admin-order-detail__info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-order-detail__details--inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--sp-5);
    }

    .admin-order-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
        align-items: center;
        gap: var(--sp-5);
    }

    .admin-order-item__details {
        justify-self: stretch;
    }
}

@media (min-width: 1024px) {
    .admin-order-detail__layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--sp-6);
    }

  .admin-order-detail__header h1 {
    font-size: 2.25rem;
  }

    .admin-order-detail__main {
        gap: var(--sp-5);
    }
}

/* Customer editorial header and homepage */
.ui-store {
  --editorial-ink: #171717;
  --editorial-paper: #f5f2ec;
  --editorial-line: #c9c2b8;
  --editorial-accent: #a45c3b;
}

.ui-store .site-header {
  background: var(--editorial-paper);
  border-bottom-color: var(--editorial-ink);
  backdrop-filter: none;
}

.ui-store .site-header__inner {
  min-height: 74px;
  gap: 1rem 1.5rem;
}

.ui-store .brand {
  flex: 0 0 auto;
  margin-right: 0;
  color: var(--editorial-ink);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.ui-store .brand:hover {
  color: var(--editorial-accent);
}

.ui-store .site-header__mobile-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.ui-store .header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--editorial-ink);
  line-height: 1;
  text-decoration: none;
}

.ui-store .header-icon:hover,
.ui-store .header-icon:focus-visible {
  background: #e8e3da;
  color: var(--editorial-accent);
}

.ui-store .header-cart {
  position: relative;
}

.ui-store .cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #8c4e36;
  color: #f5f2ec;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ui-store .header-search-toggle,
.ui-store .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--editorial-ink);
  cursor: pointer;
  text-decoration: none;
}

.ui-store .header-search-toggle:hover,
.ui-store .nav-toggle:hover {
  background: #e8e3da;
  color: var(--editorial-accent);
}

.ui-store .header-search-desktop {
  display: none;
}

.ui-store .site-nav {
  display: none;
}

.ui-store .nav {
  gap: 0.15rem;
}

.ui-store .nav a,
.ui-store .nav-dropdown__toggle {
  min-height: 40px;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--editorial-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ui-store .nav a:hover,
.ui-store .nav a[aria-current="page"],
.ui-store .nav-dropdown__toggle:hover,
.ui-store .nav-dropdown.is-open .nav-dropdown__toggle {
  background: transparent;
  color: var(--editorial-accent);
}

.ui-store .nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-store .nav-dropdown__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.ui-store .nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: inherit;
  cursor: pointer;
}

.ui-store .nav-dropdown__toggle span {
  font-size: 0.55rem;
  line-height: 1;
}

.ui-store .nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 30;
  display: flex;
  min-width: 180px;
  flex-direction: column;
  padding: 0.8rem 0.6rem 0.7rem;
  border: 1px solid var(--editorial-line, #c9c2b8);
  background: var(--editorial-paper, #f5f2ec);
  box-shadow: 0 14px 32px rgba(31, 28, 24, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top left;
  transition: opacity var(--transition-base) 90ms, transform var(--transition-base) 90ms, visibility 0s linear 270ms;
  visibility: hidden;
}

.ui-store .nav-dropdown__menu::before {
  position: absolute;
  top: -0.75rem;
  right: 0;
  left: 0;
  height: 0.75rem;
  content: "";
}

.ui-store .nav-dropdown:hover .nav-dropdown__menu,
.ui-store .nav-dropdown:focus-within .nav-dropdown__menu,
.ui-store .nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 90ms;
  visibility: visible;
}

.ui-store .nav-dropdown__label {
  margin: 0 0 0.45rem;
  padding: 0 0.5rem 0.55rem;
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
  color: var(--editorial-accent, #a45c3b);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.ui-store .nav-dropdown__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  min-height: 38px;
  padding: 0.55rem 0.5rem;
  color: var(--editorial-ink, #171717);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: background-color var(--transition), color var(--transition);
}

.ui-store .nav-dropdown__menu a::after {
  content: "\2192";
  margin-left: auto;
  color: var(--editorial-accent, #a45c3b);
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.ui-store .nav-dropdown__menu a:hover,
.ui-store .nav-dropdown__menu a:focus-visible {
  background: #ebe6dc;
  color: var(--editorial-accent, #a45c3b);
}

.ui-store .nav-dropdown__menu a:hover::after,
.ui-store .nav-dropdown__menu a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.ui-store .site-header__actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0;
}

.ui-store .header-account {
  position: relative;
}

.ui-store .header-account__toggle {
  font: inherit;
  cursor: pointer;
}

.ui-store .header-account__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 30;
  display: flex;
  min-width: 172px;
  flex-direction: column;
  padding: 0.8rem 0.6rem 0.7rem;
  border: 1px solid var(--editorial-line, #c9c2b8);
  background: var(--editorial-paper, #f5f2ec);
  box-shadow: 0 14px 32px rgba(31, 28, 24, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  transition: opacity var(--transition-base) 90ms, transform var(--transition-base) 90ms, visibility 0s linear 270ms;
  visibility: hidden;
}

.ui-store .header-account__menu::before {
  position: absolute;
  top: -0.75rem;
  right: 0;
  left: 0;
  height: 0.75rem;
  content: "";
}

.ui-store .header-account:hover .header-account__menu,
.ui-store .header-account:focus-within .header-account__menu,
.ui-store .header-account.is-open .header-account__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 90ms;
  visibility: visible;
}

.ui-store .header-account__label {
  margin: 0 0 0.45rem;
  padding: 0 0.5rem 0.55rem;
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
  color: var(--editorial-accent, #a45c3b);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.ui-store .header-account__divider {
  height: 1px;
  margin: 0.45rem 0.5rem;
  background: var(--editorial-line, #c9c2b8);
}

.ui-store .header-account__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  min-height: 38px;
  padding: 0.55rem 0.5rem;
  color: var(--editorial-ink, #171717);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.ui-store .header-account__menu a::after {
  content: "\2192";
  margin-left: auto;
  color: var(--editorial-accent, #a45c3b);
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.ui-store .header-account__menu a:hover,
.ui-store .header-account__menu a:focus-visible {
  background: #ebe6dc;
  color: var(--editorial-accent, #a45c3b);
}

.ui-store .header-account__menu a:hover::after,
.ui-store .header-account__menu a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.ui-store .header-cart--mobile,
.ui-store .mobile-nav-account,
.ui-store .mobile-nav-shop {
  display: none;
}

/* Mobile Shop link: keep icon + text on one horizontal row. */
.ui-store .mobile-nav-shop > a {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.45em;
}

/* Customer's Feedback is a direct primary link on every screen size. */
.ui-store .nav-primary > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* Editorial nav icons — subtle line-art accents secondary to nav text */
.ui-store .nav-icon {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0;
  color: var(--editorial-ink);
  opacity: 0.72;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.ui-store .nav-icon--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* Top-level nav icons (MEN, WOMEN, CUSTOMER'S FEEDBACK, EXPLORE): slightly larger,
   stronger charcoal contrast, bolder line weight. */
.ui-store .nav-dropdown__link .nav-icon,
.ui-store .nav-primary > a .nav-icon,
.ui-store .nav-dropdown--explore .nav-dropdown__toggle .nav-icon {
  width: 1.02em;
  height: 1.02em;
  color: var(--editorial-ink);
  opacity: 0.92;
}

.ui-store .nav-dropdown__link .nav-icon:not(.nav-icon--glyph),
.ui-store .nav-primary > a .nav-icon:not(.nav-icon--glyph),
.ui-store .nav-dropdown--explore .nav-dropdown__toggle .nav-icon:not(.nav-icon--glyph) {
  stroke-width: 2;
}

.ui-store .nav a:hover .nav-icon,
.ui-store .nav a:focus-visible .nav-icon,
.ui-store .nav-dropdown__toggle:hover .nav-icon,
.ui-store .nav-dropdown__toggle:focus-visible .nav-icon,
.ui-store .nav-dropdown.is-open .nav-dropdown__toggle .nav-icon {
  color: var(--editorial-accent);
  opacity: 1;
  transform: translateY(-0.5px);
}

.ui-store .nav-dropdown__menu a .nav-icon {
  margin-right: 0;
  opacity: 0.78;
}

/* Dropdown icons (MEN/WOMEN/EXPLORE/ACCOUNT): ~20% larger than the base nav icon,
   stronger charcoal contrast, slightly thicker stroke. */
.ui-store .nav-dropdown__menu a .nav-icon,
.ui-store .header-account__menu a .nav-icon {
  width: 1.02em;
  height: 1.02em;
  color: var(--editorial-ink);
  stroke-width: 1.9;
}

.ui-store .nav-dropdown__menu a:hover .nav-icon,
.ui-store .nav-dropdown__menu a:focus-visible .nav-icon {
  opacity: 1;
  transform: translateX(0.5px);
}

.ui-store .site-header.nav-open .nav a .nav-icon,
.ui-store .site-header.nav-open .nav-dropdown__toggle .nav-icon {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0;
}

/* Keep the four top-level icons ~20% larger than the nav-open base size. */
.ui-store .site-header.nav-open .nav-dropdown__link .nav-icon,
.ui-store .site-header.nav-open .nav-primary > a .nav-icon,
.ui-store .site-header.nav-open .nav-dropdown--explore .nav-dropdown__toggle .nav-icon {
  width: 1.14em;
  height: 1.14em;
}

/* Explore is a revealed dropdown (no own landing page), so it is a
   button-only toggle styled like the Men / Women nav items. */
.ui-store .nav-dropdown--explore .nav-dropdown__toggle {
  gap: 0.45em;
}

.ui-store .site-header__actions .btn {
  min-height: 36px;
  padding: 0.45rem 0.6rem;
  border-radius: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-store .site-header__actions .btn-ghost {
  color: var(--editorial-ink);
}

.ui-store .site-header__actions .btn-ghost:hover {
  background: transparent;
  color: var(--editorial-accent);
}

.ui-store .site-header__actions .btn-secondary {
  border-color: var(--editorial-ink);
  background: transparent;
  color: var(--editorial-ink);
}

.ui-store .site-header__actions .btn-secondary:hover {
  border-color: var(--editorial-ink);
  background: var(--editorial-ink);
  color: var(--editorial-paper);
}

.ui-store .site-header.nav-open .site-nav {
  border-top-color: var(--editorial-line);
}

.ui-store .site-header.nav-open .site-header__actions {
  border-top-color: var(--editorial-line);
}

.ui-store .site-header.nav-open .site-header__actions {
  display: none;
}

.ui-store .site-header.nav-open .nav a,
.ui-store .site-header.nav-open .nav-dropdown__toggle {
  min-height: 48px;
  padding-inline: 0.5rem;
  text-align: left;
}

.ui-store .site-header.nav-open .nav-dropdown {
  display: block;
}

.ui-store .site-header.nav-open .nav-dropdown__menu {
  position: static;
  min-width: 0;
  margin: 0 0 0.25rem 0.75rem;
  padding: 0;
  border: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  visibility: visible;
}

.ui-store .site-header.nav-open .nav-dropdown__menu a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45em;
  min-height: 42px;
  padding-left: 1rem;
  border-left: 1px solid var(--editorial-line);
  font-size: 0.72rem;
}

.ui-store .site-header.nav-open .nav-dropdown:not(.is-open) .nav-dropdown__menu {
  display: none;
}

.ui-store .site-header.nav-open .mobile-nav-account {
  display: block;
}

.ui-store .site-header.nav-open .mobile-nav-shop {
  display: block;
}

.ui-store .site-header.nav-open .mobile-nav-account {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--editorial-line);
}

.ui-store .site-header.nav-open .mobile-nav-account > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.75rem 0.5rem;
  color: var(--editorial-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ui-store .site-header.nav-open .mobile-nav-account > a:hover,
.ui-store .site-header.nav-open .mobile-nav-account > a:focus-visible {
  background: #e8e3da;
  color: var(--editorial-accent);
}

.home-page .site-main {
  --home-gutter: 1rem;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}

.home-page .site-main > .container {
  max-width: none;
  padding-inline: 0;
}

.home-hero {
  position: relative;
  display: flex;
  min-height: min(78vh, 800px);
  align-items: center;
  padding: clamp(4.5rem, 13vw, 9rem) max(var(--home-gutter), calc((100vw - var(--max-width)) / 2 + var(--home-gutter)));
  background: var(--editorial-ink);
  color: var(--editorial-paper);
  overflow:hidden;
}

 .home-hero__video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    filter: brightness(1.15) !important;
  }

.home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* Central readability pool (wider screens only): one broad, soft ellipse
       centred behind the hero copy. Its deepest alpha stays in a low range and
       every stop ramps smoothly to zero well inside the edges, so the middle
       gains a touch more contrast when bright footage passes behind the text
       while the left and right thirds stay close to the video's own exposure.
       The ellipse is intentionally much lighter than the mobile pool so the
       darkening reads as part of the footage's lighting, not a UI panel. */
    radial-gradient(64% 72% at 50% 48%, rgba(16, 16, 16, 0.28) 0%, rgba(16, 16, 16, 0.24) 28%, rgba(16, 16, 16, 0.17) 52%, rgba(16, 16, 16, 0.09) 72%, rgba(16, 16, 16, 0.03) 88%, rgba(16, 16, 16, 0) 100%),
    radial-gradient(118% 112% at 30% 50%, rgba(18, 18, 18, 0.58) 0%, rgba(18, 18, 18, 0.5) 30%, rgba(18, 18, 18, 0.34) 56%, rgba(18, 18, 18, 0.16) 78%, rgba(18, 18, 18, 0) 100%),
    linear-gradient(90deg, rgba(18, 18, 18, 0.32) 0%, rgba(18, 18, 18, 0.16) 38%, rgba(18, 18, 18, 0.05) 66%, rgba(18, 18, 18, 0) 100%),
    linear-gradient(180deg, rgba(18, 18, 18, 0) 55%, rgba(18, 18, 18, 0.4) 82%, rgba(18, 18, 18, 0.55) 100%);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
}

.home-hero__eyebrow,
.home-section__eyebrow {
  color: var(--editorial-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-hero__eyebrow {
  color: #a89f93;
}

.home-hero h1 {
  position: relative;
  isolation: isolate;
  max-width: 850px;
  margin-top: 1.2rem;
  color: var(--editorial-paper);
  font-size: clamp(3rem, 11vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.86;
  text-transform: uppercase;
}

/* Hero headline edge tracer
   -------------------------------------------------------------------------
   A thin, soft "reflection" that travels along the actual letter contours of
   the FIND YOUR NEXT FIT. headline. Implementation notes:
   - It is a purely decorative ::after layer. The real <h1> text node is never
     touched, so the base heading (font, size, weight, spacing, colour) is
     unchanged. The pseudo inherits the h1's exact typography, which keeps the
     tracer perfectly aligned with the real glyphs at every breakpoint.
   - The layer sits BEHIND the opaque heading text (z-index:-1 inside the h1's
     isolated stacking context), so only a hairline rim of the text-stroke
     peeks out around each glyph. That traces the letterforms themselves
     rather than drawing a rectangular border.
   - A moving alpha mask reveals one soft band at a time, sweeping the full
     word in a single ~6s linear pass before looping calmly. The stroke colour
     eases through the restrained Hopia Fits palette (muted rust / terracotta
     -> warm cream -> subtle charcoal -> muted rust), with rust dominating the
     cycle so it stays the primary, video-legible highlight.
   - Progressive enhancement: only rendered where both text-stroke and CSS
     masks are supported; otherwise the headline is simply left untouched. */
@supports ((-webkit-text-stroke: 1px #000) and ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000)))) {
  .home-hero h1::after {
    content: "Find your\A next fit.";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Honour the \A line break (mirrors the <br>) while still wrapping like
       the real heading on very narrow screens. */
    white-space: pre-line;
    pointer-events: none;
    /* No fill: only the thin stroke paints, giving a contour rather than a
       solid duplicate of the text. ~4px stroke => ~2px visible outer rim. */
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 4px #8a4a35;
    /* Two soft bands, spaced exactly one heading-width apart, so one band is
       always crossing the word and the loop is seamless. A full-opacity centre
       with soft shoulders gives a brighter, more defined highlight that reads
       clearly against the hero video while staying a thin rim. */
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0.6) 21%,
      rgba(255, 255, 255, 1) 25%,
      rgba(255, 255, 255, 0.6) 29%,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.6) 71%,
      rgba(255, 255, 255, 1) 75%,
      rgba(255, 255, 255, 0.6) 79%,
      rgba(255, 255, 255, 0) 86%,
      rgba(255, 255, 255, 0) 100%
    );
    mask-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0.6) 21%,
      rgba(255, 255, 255, 1) 25%,
      rgba(255, 255, 255, 0.6) 29%,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.6) 71%,
      rgba(255, 255, 255, 1) 75%,
      rgba(255, 255, 255, 0.6) 79%,
      rgba(255, 255, 255, 0) 86%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    will-change: -webkit-mask-position, mask-position;
    animation:
      home-hero-title-trace-move 6s linear infinite,
      home-hero-title-trace-color 6s linear infinite;
  }

  /* Sweep the band smoothly from left to right. Shifting by exactly half the
     doubled mask lands the second band where the first began, so there is no
     visible jump at the loop point. */
  @keyframes home-hero-title-trace-move {
    from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
    to {
      -webkit-mask-position: 0% 0;
      mask-position: 0% 0;
    }
  }

  /* Ease the visible band through the Hopia Fits palette. Muted rust and
     (brighter) terracotta dominate the cycle so the sweep stays legible over
     the video; warm cream is only a brief highlight and charcoal only a short,
     lightened dip, before returning to rust for a clean loop. */
  @keyframes home-hero-title-trace-color {
    0% {
      -webkit-text-stroke-color: #8a4a35;
    }
    20% {
      -webkit-text-stroke-color: #a8542f;
    }
    38% {
      -webkit-text-stroke-color: #c06640;
    }
    47% {
      -webkit-text-stroke-color: #f2e6d0;
    }
    56% {
      -webkit-text-stroke-color: #c06640;
    }
    74% {
      -webkit-text-stroke-color: #a8542f;
    }
    85% {
      -webkit-text-stroke-color: #46352c;
    }
    100% {
      -webkit-text-stroke-color: #8a4a35;
    }
  }

  /* Respect reduced-motion: stop the travel and colour cycle, leaving only a
     calm, static hairline rust contour (no sweeping light). */
  @media (prefers-reduced-motion: reduce) {
    .home-hero h1::after {
      animation: none;
      -webkit-mask-image: none;
      mask-image: none;
      -webkit-text-stroke-color: rgba(138, 74, 53, 0.5);
    }
  }
}

.home-hero__copy {
  max-width: 420px;
  margin-top: 1rem;
  margin-bottom: 1.7rem;
  color: #d2cdc4;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.5;
}

.home-hero__cta {
  display: inline;
  position: relative;
  min-height: 48px;
  margin-top: 2.25rem;
  color: var(--editorial-paper);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding-bottom: 0.3rem;
  line-height: 48px;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}

.home-hero__cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3rem;
  height: 1px;
  /* Always-visible rust/tan line carrying a travelling paper highlight. The
     gradient holds two identical halves (rust -> tan -> paper -> tan -> rust,
     twice), so one highlight is always crossing while the next arrives, and
     scrolling by exactly one half-period loops with no seam or jump. A static
     edge mask keeps the original fade at the button's left/right ends. */
  background-image: linear-gradient(
    90deg,
    #8a4a35 0%,
    #c9a37a 12.5%,
    var(--editorial-paper) 25%,
    #c9a37a 37.5%,
    #8a4a35 50%,
    #c9a37a 62.5%,
    var(--editorial-paper) 75%,
    #c9a37a 87.5%,
    #8a4a35 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: home-hero-cta-underline 5s linear infinite alternate;
}

.home-hero__cta:hover,
.home-hero__cta:focus-visible {
  border-color: #a89f93;
  color: #a89f93;
}

/* Back-and-forth scroll for the underline. The gradient holds two identical
   halves, so shifting the background by one half (-100%) advances exactly one
   period, and "alternate" reverses each leg: the highlight travels left ->
   right -> left continuously. Constant linear speed means no pause at either
   end, and because the end frame is identical to the start frame, the
   turnaround is seamless with no reset or jump. */
@keyframes home-hero-cta-underline {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: -100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__cta::before {
    animation: none;
    background-position: 0% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      #8a4a35 14%,
      var(--editorial-paper) 50%,
      #8a4a35 86%,
      transparent 100%
    );
  }
}

.home-hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  transform: translateX(-50%);
  color: #d2cdc4;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}

.home-hero__cue:hover,
.home-hero__cue:focus-visible {
  color: var(--editorial-paper);
}

.home-hero__cue-arrow {
  font-size: 0.9rem;
  line-height: 1;
  animation: home-hero-cue-drift 2.6s ease-in-out infinite;
}

@keyframes home-hero-cue-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

.home-section.home-categories {
  scroll-margin-top: 4rem;
}

.home-section.home-categories {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(4.5rem, 9vw, 8rem) var(--home-gutter);
  border-top: 1px solid var(--editorial-line);
}

.home-section__heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.home-categories .home-section__heading {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--editorial-line);
}

.home-categories .home-section__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--editorial-accent);
}

.home-categories .home-section__eyebrow {
  color: var(--editorial-accent);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.home-categories .home-section__heading h2 {
  margin-top: 0.7rem;
  color: var(--editorial-ink);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-transform: uppercase;
}

.home-categories .home-section__heading h2::after {
  content: ".";
  color: var(--editorial-accent);
}

@property --home-category-sweep-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.home-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  counter-reset: home-category-index;
}

.home-category {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0;
  background: #d8d0c5;
  color: #fff;
  text-decoration: none;
  counter-increment: home-category-index;
  /* Same floating shadow as the Why Hopia Fits cards, so the lift reads with
     the same strength against the light section background. overflow: hidden
     above still clips the image layers to the card. */
  --home-category-shadow:
    0 1px 1px rgba(31, 28, 24, 0.03),
    0 2px 4px rgba(31, 28, 24, 0.04),
    0 14px 30px -12px rgba(31, 28, 24, 0.13),
    0 30px 60px -30px rgba(31, 28, 24, 0.16);
  box-shadow: var(--home-category-shadow);
}

.home-category.is-clone {
  counter-increment: none;
}

.home-category:hover {
  color: #fff;
  /* Hold the resting float shadow on hover (no hover elevation) so the card
     keeps its lifted look; this also still overrides the legacy hover
     box-shadow/translate declared further up the file. */
  box-shadow: var(--home-category-shadow);
  transform: none;
}

.home-category:focus-visible {
  outline: 2px solid var(--editorial-accent);
  outline-offset: 3px;
}

.home-category::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 2px;
  background: conic-gradient(
    from var(--home-category-sweep-angle),
    transparent 0deg,
    rgba(23, 23, 23, 0.5) 16deg,
    rgba(164, 92, 59, 1) 32deg,
    rgba(164, 92, 59, 0.7) 48deg,
    rgba(245, 242, 236, 0.15) 60deg,
    transparent 78deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 1;
  pointer-events: none;
  animation: home-category-sweep 6s linear infinite;
}

.home-category:hover::before {
  opacity: 1;
}

@keyframes home-category-sweep {
  to {
    --home-category-sweep-angle: 360deg;
  }
}

.home-category__image,
.home-category__image img,
.home-category__fallback,
.home-category__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Crossfading image layers.
   Every layer is already absolutely positioned and inset:0 by the shared rule
   above, so they all occupy the exact same box as the card image box. Stacking
   them changes only paint order and opacity, which cannot move any content or
   alter layout, so the card, its overlay, and its content stay perfectly
   stable while the photo underneath changes.

   Only opacity and the existing hover transform are transitioned, so a
   crossfade never slides, zooms, or distorts the photo. */
.home-category__image img {
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition:
    opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* Layers beyond the first start hidden. `data-rotation-layer` is only emitted
   for the secondary images, so a single-image card is never affected. */
.home-category__image img[data-rotation-layer] {
  opacity: 0;
}

/* The active layer is the only one painted on top. `data-rotation-active` is
   maintained in JS; a card with no JS simply keeps the first layer visible.
   Pausing needs no extra rule: the opacity change is a CSS transition that
   always settles on its target, so a pause can never strand a half-faded
   stack on screen. */
.home-category__image img[data-rotation-active] {
  opacity: 1;
}

.home-category:hover .home-category__image img,
.home-category:focus-visible .home-category__image img {
  transform: scale(1.035);
}

.home-category__fallback {
  background: #bbb0a2;
}

.home-category__overlay {
  background: rgba(23, 23, 23, 0.32);
}

.home-category__content {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.home-category__content::before {
  content: "0" counter(home-category-index);
  color: rgba(245, 242, 236, 0.78);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1;
}

.home-category__content strong {
  position: relative;
  padding-bottom: 0.55rem;
  font-size: clamp(1.55rem, 4vw, 2.6rem);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.home-category__content strong::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.5rem;
  height: 2px;
  background: var(--editorial-accent);
  transition: width 200ms ease;
}

.home-category__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.home-category__label .home-category__icon {
  vertical-align: middle;
  flex: 0 0 auto;
}

.home-category:hover .home-category__content strong::after,
.home-category:focus-visible .home-category__content strong::after {
  width: 3rem;
}

.home-category__action {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(245, 242, 236, 0.55);
  color: rgba(245, 242, 236, 0.88);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}

.home-category:hover .home-category__action,
.home-category:focus-visible .home-category__action {
  border-color: #dfa887;
  color: #f0ded2;
}

.home-category__icon {
  width: clamp(1.6rem, 3.2vw, 1.95rem);
  height: clamp(1.6rem, 3.2vw, 1.95rem);
  color: rgba(245, 242, 236, 0.92);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.25, 0.6, 0.3, 1), color 200ms ease;
}

.home-category:hover .home-category__icon,
.home-category:focus-visible .home-category__icon {
  transform: scale(1.08);
  color: #f0ded2;
}

@media (prefers-reduced-motion: reduce) {
  .home-category::before {
    animation: none;
    opacity: 0;
    transition: none;
  }

  .home-category__image img,
  .home-category__content strong::after,
  .home-category__action,
  .home-category__icon {
    transition: none;
  }

  .home-category:hover .home-category__image img,
  .home-category:focus-visible .home-category__image img,
  .home-category:hover .home-category__icon,
  .home-category:focus-visible .home-category__icon {
    transform: none;
  }

  /* Reduced motion: the automatic crossfade is disabled entirely. The first
     layer is pinned fully opaque and every other layer fully transparent, so
     the card shows one stable image with no fading. `transition: none` above
     already makes that change instantaneous if it ever needs to apply, and
     the card keeps its size, link, icon, title and action exactly as normal. */
  .home-category__image img {
    opacity: 1;
  }

  .home-category__image img[data-rotation-layer] {
    opacity: 0;
  }
}

.home-category-carousel__viewport {
  min-width: 0;
}

.home-page .site-footer {
  margin-top: 0;
}

/* Homepage editorial feature — "Why Hopia Fits?" */
.home-section.home-why {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(3.75rem, 7.5vw, 6.5rem) var(--home-gutter);
  border-top: 1px solid var(--editorial-line, #c9c2b8);
}

.home-why__heading {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
}

.home-why .home-section__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--editorial-accent, #a45c3b);
}

.home-why .home-section__eyebrow {
  color: var(--editorial-accent, #a45c3b);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.home-why .home-section__heading h2 {
  margin-top: 0.7rem;
  color: var(--editorial-ink, #171717);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-transform: uppercase;
}

.home-why__accent {
  color: var(--editorial-accent, #a45c3b);
}

/* Carousel shell — desktop stays a static editorial grid; below 720px the grid
   becomes a horizontal track. The viewport is the scroll container, so the
   carousel can never widen the page. */
.home-why__carousel {
  position: relative;
}

.home-why__viewport {
  min-width: 0;
}

.home-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-why__item {
  position: relative;
  display: flex;
  min-width: 0;
}

/* Editorial feature card --------------------------------------------------- */
.home-why__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-height: clamp(220px, 46vw, 300px);
  /* The card padding is exposed as a token so the off-black accent can cancel it
     exactly and sit flush against the card's true outer top/right edges. */
  --why-card-pad: clamp(1.35rem, 4.5vw, 1.9rem);
  padding: var(--why-card-pad);
  border: 1px solid rgba(23, 23, 23, 0.07);
  border-radius: 24px;
  /* Query container: the oversized index and the off-black accent below are
     sized from the CARD's own width (cqw) instead of the viewport (vw), so the
     pair stays one responsive unit at any card width — four-up, two-up or the
     narrow mobile panel — and never breaks out of its box. `inline-size` keeps
     the containment to the width axis, which is all that is needed. */
  container-type: inline-size;
  /* Warm editorial surface: a soft ivory-to-cream wash so the card separates
     from the light section background through warmth, not a new colour. */
  background: linear-gradient(158deg, #fdfbf6 0%, #f7f2e9 100%);
  color: var(--editorial-ink, #171717);
  text-decoration: none;
  /* Floating depth: layered, large-blur, low-opacity charcoal shadow — soft
     ambient elevation, never a hard dark edge. */
  box-shadow:
    0 1px 1px rgba(31, 28, 24, 0.03),
    0 2px 4px rgba(31, 28, 24, 0.04),
    0 14px 30px -12px rgba(31, 28, 24, 0.13),
    0 30px 60px -30px rgba(31, 28, 24, 0.16);
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow),
    border-color var(--transition-slow);
}

.home-why__card:focus-visible {
  outline: 2px solid var(--editorial-accent, #a45c3b);
  outline-offset: 3px;
  border-color: rgba(23, 23, 23, 0.42);
}

/* Animated editorial reflection — a soft elongated light/sheen that drifts
   diagonally across the surface on a slow loop, with a per-card offset
   (--why-sheen-delay) so the four cards never sweep in lockstep. It sits at
   the surface layer below the number, icon, copy and CTA, so it never
   obscures content, and the card's overflow:hidden clips it to the rounded
   corners. Transform + opacity only, so it stays GPU-cheap. */
.home-why__card::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  z-index: 1;
  width: 60%;
  height: 160%;
  background: linear-gradient(
    100deg,
    rgba(255, 252, 246, 0) 0%,
    rgba(164, 92, 59, 0.05) 38%,
    rgba(255, 252, 246, 0.5) 50%,
    rgba(164, 92, 59, 0.05) 62%,
    rgba(255, 252, 246, 0) 100%
  );
  filter: blur(14px);
  opacity: 0;
  transform: translate3d(-120%, 0, 0) rotate(8deg);
  pointer-events: none;
  will-change: transform, opacity;
  animation-name: home-why-sheen;
  animation-duration: var(--why-sheen-duration, 8s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--why-sheen-delay, 0s);
}

/* Enter from off the left, cross the card, fade out, then rest for the second
   half of the loop so the sweep "breathes" instead of flashing. The position
   reset happens only while fully transparent, so there is no abrupt snap.
   --why-sheen-opacity scales the peak (lowered on mobile / lifted on hover). */
@keyframes home-why-sheen {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) rotate(8deg);
  }
  8% {
    opacity: var(--why-sheen-opacity, 0.9);
  }
  42% {
    opacity: var(--why-sheen-opacity, 0.9);
  }
  50% {
    opacity: 0;
    transform: translate3d(300%, 0, 0) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(300%, 0, 0) rotate(8deg);
  }
}

/* Upper visual zone -------------------------------------------------------
   The card is split into two vertical zones:

     - .home-why__visual — the upper zone: off-black accent + oversized index +
       icon. It stays in flow (so the card reserves its height) but is pulled to
       the card's outer top-right corner, and it `overflow: hidden`, so the accent
       and the numeral are boxed inside it and can never spill down into the lower
       text zone or out of the card.
     - the copy block + CTA flow directly below it, so the lower text area is
       structurally clean and the two can never overlap.

   The zone's height and the numeral's size are both derived from the CARD's own
   inline size (cqw), so the pair behaves as one responsive unit at any card
   width, and the numeral is always shorter than the zone it sits in. */
.home-why__visual {
  /* Stays in flow (so the card's flex column still reserves its height) but is
     pulled to the card's true top-right corner with negative margins that cancel
     the card's padding AND its 1px border. Margins — not offsets — are used
     deliberately: a positioned box would drop out of flow and collapse the card's
     vertical rhythm.

     Because the zone itself now owns the flush edge, the off-black block and the
     numeral are placed at plain `top: 0; right: 0` INSIDE it, with no inset and
     no negative offset. Nothing is pushed out of a clipping ancestor, so the block
     reaches the card's top and right edge uncut, and the numeral has no padding
     on its top or right within the block. Bottom / left spacing is unchanged.

     Deliberately NO z-index / isolation: the index inside uses
     `mix-blend-mode: difference`, which blends against the nearest ancestor
     stacking context — the card (it has `isolation: isolate`). Creating a
     stacking context here would re-home the blending group and the numeral
     would stop compositing against the ivory surface. `overflow: hidden` alone
     gives the required clipping without creating one. */
  position: relative;
  display: block;
  margin-top: calc((var(--why-card-pad) + 1px) * -1);
  margin-right: calc((var(--why-card-pad) + 1px) * -1);
  /* The card is a flex column with `align-items: flex-start`, so an auto-width
     flex item would shrink-wrap instead of spanning. The extra width on the
     right matches the negative margin, so the zone's right edge lands exactly on
     the card's outer edge. */
  width: calc(100% + var(--why-card-pad) + 1px);
  height: calc(clamp(9rem, 34cqw, 15rem) + var(--why-card-pad) + 1px);
  overflow: hidden;
}

/* Off-black internal editorial accent (A) ---------------------------------
   A small, deliberately cropped off-black slab anchored to the card's top-right
   corner, tucked under the oversized index. It is NOT a panel: it spans part of
   the card width and is clipped by the upper zone, so the ivory surface stays
   dominant. Its job is to separate the card from the white page and to give the
   numeral somewhere to invert. Softened off-black (#1c1c1c), never pure #000.
   Decorative only — aria-hidden in the markup and inert to pointer events so it
   can never affect the card link or touch drags. */
.home-why__accent-shape {
  position: absolute;
  /* Flush to the card's true outer top-right corner. The visual zone has been
     pulled to that corner, so a plain `top: 0; right: 0` places this block
     directly on the card's top and right edge — no padding, no gap, and nothing
     pushed outside a clipping ancestor, so the block stays fully intact. The
     card's own `border-radius: 24px` and `overflow: hidden` clip the slab into
     the rounded corner, so it reads as part of the card's outer composition. */
  top: 0;
  right: 0;
  z-index: 0;
  /* Sized as a share of the UPPER ZONE (not the whole card), so the slab always
     fully contains the numeral and stops at the top-zone boundary. Because the
     zone is sized from the card, this scales with the card automatically. */
  width: 46%;
  height: 100%;
  border-bottom-left-radius: clamp(24px, 7cqw, 46px);
  background: linear-gradient(150deg, #1c1c1c 0%, #171717 100%);
  opacity: 0.94;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

/* Oversized editorial number — the off-black index (B) ----------------------
   Rendered in ivory and composited with `difference`, so the same numeral reads
   as near-black where it crosses the ivory card and flips to light where it
   overlaps the off-black accent. That single element carries both the dark
   index and the layered overlap, with no second colour to keep in sync. The zone
   above deliberately creates no stacking context, so the blend still resolves
   against the card surface. The numeral sits above the accent shape and hover
   tint, but below the copy, which is layered over it. Opacity stays low: the
   numeral should shape the silhouette, not compete with the card's content. */
.home-why__num {
  position: absolute;
  /* No inset on the top or right: the figure sits flush against the block's top
     and right edges, filling the available black area rather than floating in it.
     Bottom / left spacing is unchanged. Size still scales with the card. */
  top: 0;
  right: 0;
  z-index: 3;
  /* The figure is sized from the CARD's own inline size (cqw), not the viewport,
     so the numeral always fits the card and the accent that contains it — wide
     two-up panels or the narrow mobile card both self-scale. The upper bound is
     expressed in cqw too, so the "oversized" character scales with the card
     rather than breaking at a fixed breakpoint. At 30cqw the two-digit figure is
     always shorter than the 34cqw visual zone, so it sits fully contained above
     the text. */
  color: #e8e2d8;
  mix-blend-mode: difference;
  opacity: 0.9;
  font-size: min(30cqw, 8.5rem);
  font-weight: 900;
  font-stretch: condensed;
  letter-spacing: -0.06em;
  /* Tight leading removes the half-leading gap that sat between the block's top
     edge and the top of the digits, so the figure reads flush against the black
     instead of inset within it. Adjusting the line box — rather than a negative
     `top` — lifts the ink by the same amount but keeps it inside the box, so the
     visual zone can never clip the top of the numerals. */
  line-height: 0.82;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--transition-slow);
}

/* Very light editorial light sweep, revealed gently on hover. */
.home-why__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, rgba(164, 92, 59, 0.07) 0%, rgba(164, 92, 59, 0) 44%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.home-why__icon,
.home-why__content,
.home-why__cta {
  position: relative;
  /* Above the numeral so the copy always wins if the two ever meet, per the
     intended hierarchy (accent → index → text). */
  z-index: 4;
}

/* The icon anchors to the top-left of the upper visual zone, but keeps the card's
   normal padding on the top and left — the zone is pulled to the card's outer
   corner for the off-black block, so the icon re-applies that inset to sit exactly
   where it did before. Absolutely positioned inside the (positioned,
   overflow-hidden) zone so it never contributes to the card's vertical rhythm,
   and layered above the index so the mark stays legible against the accent. */
.home-why__icon {
  position: absolute;
  top: calc(var(--why-card-pad) + 1px);
  left: 0;
  z-index: 4;
  display: inline-flex;
  color: var(--editorial-ink, #171717);
  transition: transform var(--transition-slow);
}

.home-why__svg {
  width: 2.1rem;
  height: 2.1rem;
}

.home-why__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.home-why__label {
  margin: 0;
  color: var(--editorial-ink, #171717);
  font-size: clamp(0.82rem, 1.6vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-why__rule {
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--editorial-accent, #a45c3b);
  transition: width var(--transition-slow);
}

.home-why__text {
  max-width: 26ch;
  margin: 0;
  color: #4f4a42;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: color var(--transition-base);
}

.home-why__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  color: var(--color-text-muted, #7b786f);
}

.home-why__cta-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--transition-base);
}

.home-why__arrow {
  display: inline-flex;
  color: var(--editorial-accent, #a45c3b);
  transition: transform var(--transition-base);
}

.home-why__arrow-svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Hover interaction — restrained, no layout shift beyond a tiny lift. Gated to
   real hover pointers so the state never sticks after a tap on touch devices.
   The card rises a couple of pixels, the floating shadow deepens a little, and
   the reflection is lifted to its full peak so the card simply feels "more
   present" rather than animating. The warm wash is carried by ::after because
   the ivory gradient surface would hide a background-color tint. */
@media (hover: hover) {
  .home-why__card:hover {
    transform: translateY(-3px);
    border-color: rgba(23, 23, 23, 0.14);
    box-shadow:
      0 2px 3px rgba(31, 28, 24, 0.04),
      0 4px 10px rgba(31, 28, 24, 0.05),
      0 20px 44px -14px rgba(31, 28, 24, 0.17),
      0 44px 84px -34px rgba(31, 28, 24, 0.2);
    --why-sheen-opacity: 1;
  }

  .home-why__card:hover::before {
    filter: blur(11px);
  }
}

.home-why__card:hover .home-why__num,
.home-why__card:focus-visible .home-why__num {
  opacity: 0.98;
}

.home-why__card:hover .home-why__accent-shape,
.home-why__card:focus-visible .home-why__accent-shape {
  opacity: 1;
}

.home-why__card:hover .home-why__icon,
.home-why__card:focus-visible .home-why__icon {
  transform: translateY(-3px);
}

.home-why__card:hover .home-why__rule,
.home-why__card:focus-visible .home-why__rule {
  width: 2.75rem;
}

.home-why__card:hover .home-why__text,
.home-why__card:focus-visible .home-why__text {
  color: #2a2a2a;
}

.home-why__card:hover .home-why__cta-label,
.home-why__card:focus-visible .home-why__cta-label {
  color: var(--editorial-ink, #171717);
}

.home-why__card:hover .home-why__arrow,
.home-why__card:focus-visible .home-why__arrow {
  transform: translateX(4px);
}

.home-why__card:hover::after,
.home-why__card:focus-visible::after {
  opacity: 1;
}

/* Tablet — two balanced columns. */
@media (min-width: 720px) {
  .home-why__grid {
    gap: clamp(1.5rem, 2.4vw, 2rem);
  }

  .home-why__svg {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Desktop — two-column editorial grid, two rows of wider cards. The cards gain
   width and breathing room without a redesign: the same surface, radius, shadow,
   reflection and copy. The minimum height is nudged up so the 4/5-style
   proportion still reads on the wider panel. */
@media (min-width: 1024px) {
  .home-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-why__card {
    gap: 1.1rem;
    min-height: clamp(320px, 30vw, 400px);
  }
}

/* Mobile — manual horizontal editorial carousel (no auto-scroll).
   The viewport is a real horizontal scroller: the track is wider than the
   viewport, so the browser gives finger drags 1:1 following and native
   momentum, and it does its own direction-aware axis locking.

   `touch-action` is deliberately NOT declared on the track. That declaration
   is what locks the carousel: `pan-y` (the previous value) tells the browser
   this subtree may only pan vertically, so the compositor refuses every
   horizontal pan and the row can never move. Removing it restores the default
   `auto` (both axes), the only value that lets the browser apply its own axis
   lock - a clearly horizontal drag pans the track, a clearly vertical drag is
   handed to the page scroller. Nothing calls preventDefault(), so the browser
   keeps full authority over the gesture.

   The cards never move on their own; the reader controls the row entirely (see
   the JS). The vertical padding gives the floating card shadow room before
   overflow-y clips it. */
@media (max-width: 719px) {
  .home-why__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(var(--home-gutter, 1rem) * -1);
    padding-inline: var(--home-gutter, 1rem);
    padding-block: 0.5rem 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }

  .home-why__viewport::-webkit-scrollbar {
    display: none;
  }

  .home-why__grid {
    display: flex;
    width: max-content;
    gap: 0.9rem;
    grid-template-columns: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .home-why__item {
    flex: 0 0 78vw;
    width: 78vw;
  }

  .home-why__card {
    min-height: clamp(240px, 64vw, 340px);
    /* Keep the rounded floating treatment, but a lighter, more compact shadow
       and a slower, fainter reflection for touch-device performance. */
    --why-sheen-duration: 11s;
    --why-sheen-opacity: 0.6;
    box-shadow:
      0 1px 2px rgba(31, 28, 24, 0.04),
      0 8px 18px -8px rgba(31, 28, 24, 0.11),
      0 16px 28px -18px rgba(31, 28, 24, 0.12);
  }

  /* Wide, mostly-dark cards would otherwise take more of the `difference`
     numeral than the desktop panels do, so the peak opacity is trimmed back to
     hold the same ivory-dominant balance. The size stays on the cqw scale so the
     numeral still tracks the card width; only the tone is trimmed. */
  .home-why__num {
    opacity: 0.72;
  }

  /* Hover raises the numeral to full strength; the mobile peak is trimmed back
     to match so the two stay in balance. */
  .home-why__card:hover .home-why__num,
  .home-why__card:focus-visible .home-why__num {
    opacity: 0.84;
  }
}

/* Mobile swipe cue — a small, refined editorial hint that the row scrolls by
   hand now that auto-scroll is gone. Hidden on wider screens (static grid);
   the JS adds .is-dismissed to fade it once the reader has scrolled the row,
   so it behaves like a one-time hint, not a permanent UI element. */
.home-why__swipe-cue {
  display: none;
}

@media (max-width: 719px) {
  .home-why__swipe-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.9rem;
    color: var(--color-text-muted, #7b786f);
    opacity: 1;
    transition: opacity 420ms var(--ease-standard, ease);
  }

  .home-why__swipe-cue.is-dismissed {
    opacity: 0;
    pointer-events: none;
  }

  .home-why__swipe-icon {
    display: inline-flex;
    color: var(--editorial-accent, #a45c3b);
    /* A gentle, finite left/right nudge — a hint, not a forever loop. */
    animation: home-why-swipe-nudge 2.4s var(--ease-standard, ease-in-out) 3;
  }

  .home-why__swipe-icon svg {
    width: 2.5rem;
    height: 1.35rem;
  }

  .home-why__swipe-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
}

@keyframes home-why-swipe-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Motion / accessibility — with reduced motion the reflection sweep, the hover
   lift and the swipe-cue nudge are all disabled; the cards stay visually
   stable and manual scrolling plus every link/action is preserved. */
@media (prefers-reduced-motion: reduce) {
  .home-why__card,
  .home-why__card::after,
  .home-why__accent-shape,
  .home-why__num,
  .home-why__icon,
  .home-why__rule,
  .home-why__arrow,
  .home-why__text,
  .home-why__cta-label,
  .home-why__swipe-cue {
    transition: none;
  }

  .home-why__card::before {
    animation: none;
    opacity: 0;
  }

  .home-why__swipe-icon {
    animation: none;
  }

  .home-why__card:hover {
    transform: none;
  }

  .home-why__card:hover .home-why__icon,
  .home-why__card:focus-visible .home-why__icon {
    transform: none;
  }

  .home-why__card:hover .home-why__arrow,
  .home-why__card:focus-visible .home-why__arrow {
    transform: translateX(2px);
  }
}

@media (min-width: 720px) {
  .home-page .site-main {
    --home-gutter: 1.5rem;
  }

  .ui-store .site-header__mobile-tools {
    display: none;
  }

  .ui-store .header-search-desktop {
    display: inline-flex;
    order: 2;
  }

  .ui-store .site-nav {
    display: block;
    flex: 1 1 auto;
    order: 1;
  }

  .ui-store .site-nav .nav {
    justify-content: center;
  }

  .ui-store .site-header__actions {
    display: flex;
    order: 3;
  }

  .ui-store .header-cart--mobile,
  .ui-store .mobile-nav-account,
  .ui-store .mobile-nav-shop {
    display: none;
  }

  .ui-store .header-account__menu {
    top: calc(100% + 0.75rem);
  }

  .home-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .home-category {
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 1024px) {
  .home-page .site-main {
    --home-gutter: 2rem;
  }

  .ui-store .site-header__inner {
    gap: 1.5rem 2.25rem;
  }
}

@media (max-width: 719px) {
  .ui-store .site-header__inner {
    align-items: center;
    flex-wrap: wrap;
  }

  .ui-store .nav-dropdown__label {
    display: none;
  }

  .ui-store .nav-dropdown__menu a::after,
  .ui-store .header-account__menu a::after {
    display: none;
  }

  .ui-store .site-header__mobile-tools {
    align-items: center;
  }

  .ui-store .header-cart--mobile {
    display: inline-flex;
  }

  .ui-store .header-cart--desktop,
  .ui-store .header-account {
    display: none;
  }

  .ui-store .site-header.nav-open .site-header__actions .btn {
    width: 100%;
  }

  .ui-store .site-header.nav-open .site-header__actions {
    display: none;
  }

  .home-hero {
    min-height: 72vh;
    padding-bottom: 7rem;
    /* Letterbox bars sit outside the contained portrait video. Match the hero
       background to the video's own edge tone (#1E1E1E / #1B1B1B) so the bars
       read as a continuation of the footage instead of a darker CSS panel. */
    background: radial-gradient(130% 90% at 50% 50%, #1b1b1b 0%, #1c1c1c 45%, #1e1e1e 100%);
  }
  
  @media (max-width: 768px) {
  .home-hero {
    min-height: 85vh !important;
  }
}

  .home-hero__video {
    /* Portrait (9:16) source: preserve its native aspect ratio, no stretch, no crop. */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    --hero-zoom: 1.25;
    transform: scale(var(--hero-zoom));
    transform-origin: center center;
  }

  .home-hero__scrim {
    /* Side blends use the video's own edge tone at very low alpha and a spread
       wide enough to shape the falloff gradually; because the tone matches the
       letterbox background there is no luminance step at the video edge, and
       the footage's texture and lighting stay visible through it. */
    background:
      linear-gradient(90deg, rgba(30, 30, 30, 0.2) 0%, rgba(30, 30, 30, 0.12) 9%, rgba(30, 30, 30, 0.05) 20%, rgba(30, 30, 30, 0) 36%),
      linear-gradient(270deg, rgba(30, 30, 30, 0.2) 0%, rgba(30, 30, 30, 0.12) 9%, rgba(30, 30, 30, 0.05) 20%, rgba(30, 30, 30, 0) 36%),
      /* Central readability pool: same shape, position and coverage as before,
         with a deeper core behind the typography. The tail stops stay near
         zero so the darkness falls off gradually toward every edge and the
         outer footage (clothing, spotlight, smoke) keeps its cinematic
         lighting instead of sitting under a black panel. */
      radial-gradient(74% 76% at 50% 50%, rgba(20, 20, 20, 0.68) 0%, rgba(20, 20, 20, 0.56) 38%, rgba(20, 20, 20, 0.32) 64%, rgba(20, 20, 20, 0.09) 86%, rgba(20, 20, 20, 0) 100%),
      linear-gradient(180deg, rgba(18, 18, 18, 0) 58%, rgba(18, 18, 18, 0.42) 84%, rgba(18, 18, 18, 0.55) 100%),
      /* Vertical readability wash: a soft band over the text block, deepest in
         its middle and easing to near zero toward the top and bottom of the
         portrait footage. Stays under the side blends above so edge blending
         is unchanged, and its alpha ramps smoothly so the deepened center
         melts into the natural video rather than reading as an overlay. */
      linear-gradient(180deg,
        rgba(14, 14, 14, 0) 0%,
        rgba(14, 14, 14, 0.01) 18%,
        rgba(14, 14, 14, 0.05) 32%,
        rgba(14, 14, 14, 0.105) 46%,
        rgba(14, 14, 14, 0.16) 56%,
        rgba(14, 14, 14, 0.11) 68%,
        rgba(14, 14, 14, 0.045) 82%,
        rgba(14, 14, 14, 0.008) 94%,
        rgba(14, 14, 14, 0) 100%);
  }

  .home-hero__cta {
    display: inline;
    line-height: inherit;
    padding-bottom: 0.3rem;
  }

  .home-category__content {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }

  .home-category-carousel__viewport {
    /* Native horizontal scroll. The browser provides 1:1 finger-following and
       momentum, and it does its own directional axis locking, so a vertical
       swipe scrolls the page while a horizontal swipe moves the carousel.

       `touch-action: pan-x` is deliberately NOT used here. It was the reason a
       vertical swipe that started on a card photo did not scroll the page: the
       value tells the browser the element may only pan horizontally, so the
       compositor never hands a vertical pan to the document scroller and
       `overflow-y: hidden` gives it nothing to scroll locally. Dropping the
       declaration restores the browser default (`auto` — both axes), which is
       the only way the page scroller can claim a vertical gesture that begins
       over an image. Horizontal panning still works because the element is
       genuinely horizontally scrollable and `auto` permits it.

       `overscroll-behavior-x: contain` stops the horizontal scroll chaining to
       the page or triggering back-swipe, and `touch-action: manipulation` is
       left off entirely so pinch-zoom and scrolling are untouched. */
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .home-category-carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .home-category-grid[data-carousel-track] {
    display: flex;
    width: max-content;
    gap: 1rem;
    user-select: none;
    -webkit-user-select: none;
  }

  .home-category-grid[data-carousel-track] .home-category {
    flex: 0 0 85vw;
    width: 85vw;
  }

  /* Keep the 01/02/03 badge consistent across the duplicated loop copies.
     On mobile the track is cloned for seamless looping, so the CSS counter
     would restart per copy. data-index is rendered server-side as an already
     zero-padded label and copied into every clone by cloneNode, so the badge
     is correct on first paint (before any script runs) and identical in each
     copy. */
  .home-category-grid[data-carousel-track] .home-category__content::before {
    content: attr(data-index);
  }

  .home-category-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .home-category-carousel__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c5bdb2;
    transition: background 300ms ease, transform 300ms ease;
  }

  .home-category-carousel__dot.is-active {
    background: #1a1a1a;
    transform: scale(1.25);
  }
}

/* Logout — muted earthy red text-only action for the account dropdown */
.ui-store .header-account__menu a.header-logout {
  color: var(--color-danger);
}

.ui-store .header-account__menu a.header-logout::after {
  display: none;
}

.ui-store .header-account__menu a.header-logout:hover,
.ui-store .header-account__menu a.header-logout:focus-visible {
  background: transparent;
  color: var(--color-danger-dark);
}

/* Logout confirmation — editorial panel, same logic and styles on all devices */
.logout-confirm {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.logout-confirm[hidden] {
  display: none;
}

.logout-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 28, 24, 0.5);
}

.logout-confirm__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: var(--sp-5);
  background: var(--editorial-paper, #f5f2ec);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(23, 23, 23, 0.18);
}

.logout-confirm__eyebrow {
  color: var(--color-text-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.logout-confirm__rule {
  height: 1px;
  background: var(--editorial-line, #c9c2b8);
}

.logout-confirm__rule--top {
  margin: var(--sp-3) 0 var(--sp-5);
}

.logout-confirm__rule--bottom {
  margin: var(--sp-5) 0 var(--sp-4);
}

.logout-confirm__title {
  color: var(--editorial-ink, #171717);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.logout-confirm__copy {
  margin-top: var(--sp-3);
  max-width: 32ch;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.65;
}

.logout-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

.logout-confirm__stay,
.logout-confirm__leave {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--editorial-ink, #171717);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.logout-confirm__stay:hover,
.logout-confirm__stay:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.logout-confirm__leave {
  color: var(--color-danger);
}

.logout-confirm__leave:hover,
.logout-confirm__leave:focus-visible {
  color: var(--color-danger-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.logout-confirm__leave:hover .logout-confirm__arrow {
  transform: translateX(3px);
}

.logout-confirm__arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.logout-confirm__leave:focus-visible {
  outline: 2px solid var(--color-danger-dark);
  outline-offset: 3px;
}

.logout-confirm__stay:focus-visible {
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .logout-confirm {
    padding: var(--sp-3);
  }

  .logout-confirm__panel {
    padding: var(--sp-4);
  }

  .logout-confirm__actions {
    flex-wrap: nowrap;
  }
}

/* Customer feedback overlay — front-end presentation only.
   Reuses the editorial modal language: warm paper surface, thin line border,
   minimal radius, charcoal type. No oversized or card-like treatment. */
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.feedback-overlay[hidden] {
  display: none;
}

.feedback-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 28, 24, 0.5);
}

.feedback-overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
  background: var(--editorial-paper, #f5f2ec);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(23, 23, 23, 0.18);
}

.feedback-overlay__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.feedback-overlay__close:hover,
.feedback-overlay__close:focus-visible {
  background: rgba(23, 23, 23, 0.06);
  color: var(--editorial-ink, #171717);
}

.feedback-overlay__eyebrow {
  color: var(--color-text-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feedback-overlay__title {
  margin-top: var(--sp-1);
  padding-right: 2.5rem;
  color: var(--editorial-ink, #171717);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Small product reference — deliberately compact, not a product page */
.feedback-overlay__product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 2px;
}

.feedback-overlay__thumb {
  flex: none;
  width: 42px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: 2px;
}

.feedback-overlay__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.feedback-overlay__thumb-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.feedback-overlay__thumb-placeholder[hidden],
.feedback-overlay__thumb img[hidden] {
  display: none;
}

.feedback-overlay__product-info {
  min-width: 0;
}

.feedback-overlay__product-name {
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.feedback-overlay__product-meta {
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.feedback-overlay__product-meta[hidden] {
  display: none;
}

/* Form */
.feedback-overlay__form {
  margin-top: var(--sp-5);
}

.feedback-overlay__field {
  margin-bottom: var(--sp-4);
}

.feedback-overlay__field--photo {
  margin-bottom: var(--sp-4);
}

.feedback-overlay__question {
  margin-bottom: var(--sp-2);
  color: var(--editorial-ink, #171717);
  font-size: 0.9375rem;
  font-weight: 650;
}

.feedback-overlay__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--color-text-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feedback-overlay__photo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.feedback-overlay__photo-head .feedback-overlay__label {
  margin-bottom: 0;
}

.feedback-overlay__optional {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

/* Star rating */
.feedback-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.feedback-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-border-strong);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.feedback-star svg {
  width: 26px;
  height: 26px;
  display: block;
}

.feedback-star:hover,
.feedback-star:focus-visible,
.feedback-star.is-preview,
.feedback-star.is-active {
  color: var(--editorial-accent, #a45c3b);
}

.feedback-star:active {
  transform: scale(0.94);
}

.feedback-star:focus-visible {
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 1px;
}

/* Written feedback */
.feedback-overlay__textarea {
  width: 100%;
  min-height: 108px;
  padding: var(--sp-3);
  background: #ffffff;
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.feedback-overlay__textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.feedback-overlay__textarea:focus {
  outline: none;
  border-color: var(--editorial-ink, #171717);
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08);
}

/* Optional photo upload — visually secondary */
.feedback-upload {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--editorial-line, #c9c2b8);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
    background-color var(--transition);
}

.feedback-upload:hover,
.feedback-upload:focus-within {
  border-color: var(--editorial-ink, #171717);
  background: rgba(255, 255, 255, 0.6);
  color: var(--editorial-ink, #171717);
}

.feedback-upload:focus-within {
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 2px;
}

.feedback-upload[hidden] {
  display: none;
}

/* Selected-photo preview (in-memory only, never uploaded) */
.feedback-photo-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 2px;
}

.feedback-photo-preview[hidden] {
  display: none;
}

.feedback-photo-preview__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-bg-alt);
}

.feedback-photo-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.feedback-photo-preview__meta {
  flex: 1;
  min-width: 0;
}

.feedback-photo-preview__name {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.feedback-photo-preview__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 0.25rem;
}

.feedback-photo-preview__change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.feedback-photo-preview__change:hover,
.feedback-photo-preview__change:focus-visible {
  color: var(--editorial-ink, #171717);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feedback-photo-preview__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-danger);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.feedback-photo-preview__remove:hover,
.feedback-photo-preview__remove:focus-visible {
  color: var(--color-danger-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline field validation — subtle editorial cue, not a browser alert */
.feedback-overlay__error {
  margin-top: var(--sp-2);
  padding-left: 0.6rem;
  border-left: 2px solid var(--color-danger);
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}

.feedback-overlay__error[hidden] {
  display: none;
}

/* View switching between the form and the success state */
.feedback-overlay__pane[hidden] {
  display: none;
}

/* Actions */
.feedback-overlay__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--editorial-line, #c9c2b8);
}

.feedback-overlay__cancel {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.feedback-overlay__cancel:hover,
.feedback-overlay__cancel:focus-visible {
  color: var(--editorial-ink, #171717);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feedback-overlay__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.15rem;
  border: 1px solid var(--editorial-ink, #171717);
  border-radius: 2px;
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .feedback-overlay__submit:hover {
    background: var(--editorial-paper, #f5f2ec);
    color: var(--editorial-ink, #171717);
  }
}

.feedback-overlay__submit:focus-visible {
  background: var(--editorial-paper, #f5f2ec);
  color: var(--editorial-ink, #171717);
  outline: 2px solid var(--editorial-ink, #171717);
  outline-offset: 3px;
}

.feedback-overlay__submit:active {
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
  transform: translateY(1px);
}

/* Success state — compact and centered, same editorial surface */
.feedback-overlay__success {
  text-align: center;
}

.feedback-overlay__success-rule {
  height: 1px;
  margin: var(--sp-3) 0 var(--sp-5);
  background: var(--editorial-line, #c9c2b8);
}

.feedback-overlay__success-title {
  color: var(--editorial-ink, #171717);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.feedback-overlay__success-copy {
  margin-top: var(--sp-3);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.feedback-overlay__success-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--editorial-line, #c9c2b8);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.feedback-overlay__success-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.feedback-overlay__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.15rem;
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.feedback-overlay__view:hover,
.feedback-overlay__view:focus-visible {
  border-color: var(--editorial-ink, #171717);
  background: rgba(255, 255, 255, 0.6);
  color: var(--editorial-ink, #171717);
}

.feedback-overlay__view-note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.feedback-overlay__view-note[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .feedback-overlay {
    padding: var(--sp-3);
  }

  .feedback-overlay__panel {
    padding: var(--sp-4);
  }

  .feedback-overlay__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .feedback-overlay__cancel {
    align-self: center;
    padding: 0.5rem 0;
  }

  .feedback-overlay__submit {
    width: 100%;
  }
}

/* Customer's Feedback Page - public presentation only.
   Mobile-first: 1 column, 2 columns on tablet, 4 columns on desktop. */
.feedback-page {
  padding-top: var(--sp-2);
}

.feedback-page__header {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.feedback-page__title {
  font-size: clamp(1.65rem, 5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
}

.feedback-page__intro {
  margin-top: var(--sp-2);
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Feedback grid: 1 column by default, compact editorial multi-column on wider screens. */
.feedback-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Feedback card. Fixed display order: photo, rating, feedback, customer, date. */
.feedback-card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  min-width: 0;
  padding: var(--card-padding);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  transition: border-color var(--transition);
}

.feedback-card:hover {
  border-color: var(--color-border-strong);
}

/* Customer photo: the card's visual lead. Uses the shared portrait ratio
   with no height cap so the uploaded photograph carries the composition
   instead of reading as a small inset panel. */
.feedback-card__photo {
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  border-radius: var(--card-radius-media);
  background: var(--color-bg-alt);
}

.feedback-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.feedback-card__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted);
}

/* Rating: restrained earthy accent for filled stars. */
.feedback-card__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  color: var(--color-border-strong);
}

.feedback-card__star {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.feedback-card__star svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.feedback-card__star.is-filled {
  color: var(--color-primary);
}

.feedback-card__text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.feedback-card__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

.feedback-card__customer {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.feedback-card__date {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Owner-only EDIT action: deliberately quiet text button so the public
   page stays clean. Rendered by the card only for the logged-in
   customer's own feedback. */
.feedback-card__actions {
  margin-top: var(--sp-2);
}

.feedback-card__edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition);
}

.feedback-card__edit:hover,
.feedback-card__edit:focus-visible {
  color: var(--editorial-ink, #171717);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Empty state shown while no feedback records exist. */
.feedback-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-7) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  text-align: center;
}

.feedback-empty__title {
  color: var(--editorial-ink, #171717);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feedback-empty__copy {
  margin-top: var(--sp-2);
  max-width: 44ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Load More control: placed after the currently visible batch. Hidden until
   real feedback data and batching exist. */
.feedback-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.feedback-loadmore[hidden] {
  display: none;
}

.feedback-loadmore__button {
  min-height: 44px;
  padding: 0.625rem 2.25rem;
  border: 1px solid var(--editorial-ink, #171717);
  border-radius: 2px;
  background: transparent;
  color: var(--editorial-ink, #171717);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.feedback-loadmore__button:hover,
.feedback-loadmore__button:focus-visible {
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
}

.feedback-loadmore__status {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Tablet: two columns. */
@media (min-width: 720px) {
  .feedback-page {
    padding-top: var(--sp-3);
  }

  .feedback-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: three wider columns so the customer photography reads as the
   lead of each card rather than a small inset. */
@media (min-width: 1024px) {
  .feedback-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
}

/* Small screens: tighter padding only. The portrait ratio already keeps
   the photo compact, so no height cap is needed — the customer's picture
   stays uncropped at every size. */
@media (max-width: 480px) {
  .feedback-card {
    padding: var(--sp-3);
  }
}

/* Contact Page — refined editorial contact card, split layout. */
.contact-page {
  padding-block: var(--sp-6);
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--editorial-paper, #f5f2ec);
  border: 1px solid var(--editorial-ink, #171717);
  border-radius: 2px;
}

/* LEFT — charcoal editorial intro panel. */
.contact-card__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--editorial-ink, #171717);
  color: var(--editorial-paper, #f5f2ec);
}

.contact-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.68);
}

.contact-card__index {
  margin-right: var(--sp-2);
  color: #c98b62;
}

.contact-card__title {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--editorial-paper, #f5f2ec);
}

.contact-card__rule {
  width: 100%;
  height: 1px;
  background: rgba(245, 242, 236, 0.26);
}

.contact-card__copy {
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.74);
}

.contact-card__meta {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.5);
}

/* RIGHT — structured contact information. */
.contact-card__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-5);
}

.contact-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
}

.contact-item + .contact-item {
  border-top: 1px solid var(--editorial-line, #c9c2b8);
}

.contact-item:first-child {
  padding-top: 0;
}

.contact-item:last-child {
  padding-bottom: 0;
}

.contact-item__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-item__index {
  font-variant-numeric: tabular-nums;
  color: var(--editorial-accent, #a45c3b);
}

.contact-item__label svg {
  flex: none;
  color: var(--editorial-ink, #171717);
  opacity: 0.55;
}

.contact-item__value {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--editorial-ink, #171717);
}

.contact-item__link {
  color: var(--editorial-ink, #171717);
  text-decoration: none;
  border-bottom: 1px solid var(--editorial-line, #c9c2b8);
  transition: color var(--transition), border-color var(--transition);
}

.contact-item__link:hover {
  color: var(--editorial-accent, #a45c3b);
  border-bottom-color: var(--editorial-accent, #a45c3b);
}

@media (min-width: 720px) {
  .contact-page {
    padding-block: var(--sp-7);
  }

  .contact-card__intro {
    padding: var(--sp-7) var(--sp-6);
  }

  .contact-card__details {
    padding: var(--sp-6);
  }
}

@media (min-width: 860px) {
  .contact-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .contact-card__intro {
    min-height: 460px;
  }
}

/* About Page — editorial, centered, intentionally minimal. */
.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--sp-7) var(--sp-6);
  text-align: center;
}

.about-header {
  margin-bottom: var(--sp-5);
}

.about-header__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: nowrap;
  justify-content: center;
}

.about-header__logo {
  width: 88px;
  height: auto;
  border-radius: 0;
  flex-shrink: 0;
}

.about-header__name {
  font-size: clamp(2.75rem, 9vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--editorial-ink, #171717);
  line-height: 1;
}

.about-rule {
  width: 100%;
  max-width: 520px;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--sp-5);
}

.about-body {
  max-width: 56ch;
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.8;
}

.about-body p + p {
  margin-top: var(--sp-4);
}

.about-tagline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .about-header__logo {
    width: 64px;
  }

  .about-header__mark {
    gap: var(--sp-2);
  }
}

@media (min-width: 720px) {
  .about-page {
    padding-block: var(--sp-7);
  }

  .about-header__logo {
    width: 112px;
  }

  .about-rule {
    max-width: 600px;
  }

  .about-body {
    font-size: 1.0625rem;
  }
}

/* Gallery Page - editorial, photography-first, minimal chrome.
   Category text filters (SHIRTS | PANTS | SHORTS) above the grid.
   Mobile: two strong columns. Tablet: three consistent columns.
   Desktop: four-column "editorial quilt" with quiet emphasis on a
   repeating rhythm. Only real shop photography is rendered. */
.gallery-page {
  padding-top: var(--sp-2);
}

.gallery-page__header {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.gallery-page__eyebrow {
  margin-bottom: var(--sp-2);
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gallery-page__title {
  color: var(--editorial-ink, #171717);
  font-size: clamp(2.25rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-page__intro {
  margin-top: var(--sp-3);
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gallery-page__rule {
  width: 100%;
  max-width: 520px;
  margin-block: 0 var(--sp-6);
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* Editorial category text filters: SHIRTS | PANTS | SHORTS.
   Same refined text-tab pattern as the account order filters -
   plain text on a thin rule, active tab marked by a muted-rust
   underline. No pills, no boxed controls. */
.gallery-filters {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-filters::-webkit-scrollbar {
  display: none;
}

.gallery-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.gallery-filter__icon {
  flex: 0 0 auto;
  color: var(--color-text-soft);
  transition: color var(--transition);
}

.gallery-filter:hover {
  color: var(--color-text);
}

.gallery-filter:hover .gallery-filter__icon {
  color: var(--color-text);
}

.gallery-filter.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.gallery-filter.is-active .gallery-filter__icon {
  color: var(--color-primary);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: start;
  gap: var(--sp-4) var(--sp-3);
}

.gallery-item {
  min-width: 0;
  margin: 0;
}

.gallery-item__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--card-media-ratio);
  object-fit: cover;
  border: 1px solid var(--editorial-line, #c9c2b8);
  border-radius: var(--card-radius-media);
  background: var(--color-bg-alt);
  transition: transform var(--card-media-lift) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover .gallery-item__image {
    transform: scale(1.025);
  }
}

.gallery-empty {
  padding: var(--sp-7) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface-muted);
  text-align: center;
}

.gallery-empty__title {
  color: var(--editorial-ink, #171717);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-empty__copy {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Tablet: three consistent columns on the shared portrait ratio. */
@media (min-width: 720px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }
}

/* Desktop: four columns; quiet emphasis only when the set is large
   enough to support the repeating feature rhythm. Base tiles stay on
   the shared portrait ratio; the large formats get their own wider
   proportions so the quilt reads as deliberate editorial composition
   rather than a stretched square. */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .gallery-item--feature {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* A feature reads as a 2x2 block of the same portrait shape, so the
     quilt stays flush instead of leaving a gap under the large tile. */
  .gallery-item--feature .gallery-item__image {
    aspect-ratio: var(--card-media-ratio);
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  /* The wide companion closes a single row: a wider landscape panel from
     the same family, proportioned to sit flush beside three base tiles. */
  .gallery-item--wide .gallery-item__image {
    aspect-ratio: 5 / 3;
  }
}

/* ============================================================
   ADMIN CONSOLE — Stage 1
   Dark-slate fixed sidebar + emerald accents + light content.
   Scoped under .ui-admin so the storefront palette is untouched.
   ============================================================ */

.ui-admin {
  --admin-sidebar-bg: #0f172a;          /* slate-900 */
  --admin-sidebar-border: #1e293b;      /* slate-800 */
  --admin-sidebar-text: #94a3b8;        /* slate-400 */
  --admin-sidebar-text-strong: #e2e8f0; /* slate-200 */
  --admin-sidebar-muted: #64748b;       /* slate-500 */
  --admin-accent: #16a34a;              /* green-600 */
  --admin-accent-strong: #15803d;       /* green-700 */
  --admin-accent-bright: #22c55e;       /* green-500 */
  --admin-accent-soft: #dcfce7;         /* green-100 */
  --admin-content-bg: #f1f5f9;          /* slate-100 */
  --admin-ink: #0f172a;
  --admin-sidebar-w: 264px;
}

body.ui-admin {
  background: var(--admin-content-bg);
}

/* App shell: sidebar + main in a row; the sidebar is fixed on desktop
   and the main content scrolls with the page. */
.admin-shell {
  flex: 1 0 auto;
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--admin-sidebar-w);
  width: var(--admin-sidebar-w);
  background: var(--admin-sidebar-bg);
  color: var(--admin-sidebar-text);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  z-index: 40;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

.admin-sidebar::-webkit-scrollbar { width: 7px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--admin-sidebar-border);
  text-decoration: none;
}

.admin-sidebar__logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  padding: 3px;
  object-fit: contain;
}

.admin-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.admin-sidebar__brand-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.admin-sidebar__brand-sub {
  margin-top: 2px;
  color: var(--admin-accent-bright);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-sidebar__nav {
  flex: 1 1 auto;
  padding: 0.9rem 0.75rem 1rem;
}

.admin-nav__group {
  padding: 0.55rem 0.6rem 0.3rem;
  margin-top: 0.4rem;
  color: var(--admin-sidebar-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.admin-nav__group:first-child { margin-top: 0; }

.admin-nav__list {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  color: var(--admin-sidebar-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.admin-nav__link:hover {
  background: var(--admin-sidebar-border);
  color: var(--admin-sidebar-text-strong);
}

.admin-nav__link.is-active {
  background: var(--admin-accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(22, 163, 74, 0.9);
}

.admin-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex: 0 0 auto;
}

.admin-nav__label { line-height: 1.25; }

.admin-sidebar__footer {
  border-top: 1px solid var(--admin-sidebar-border);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: var(--admin-sidebar-text);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.admin-sidebar__link:hover {
  background: var(--admin-sidebar-border);
  color: var(--admin-sidebar-text-strong);
}

.admin-sidebar__link--logout { color: #fca5a5; }
.admin-sidebar__link--logout:hover { background: rgba(220, 38, 38, 0.14); color: #fecaca; }

.admin-sidebar__identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
}

.admin-sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-bright));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
}

.admin-sidebar__identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.admin-sidebar__identity-name {
  color: var(--admin-sidebar-text-strong);
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar__identity-role {
  color: var(--admin-sidebar-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main column */
.admin-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-topbar { display: none; }

.admin-content {
  flex: 1 1 auto;
  padding: clamp(1rem, 2.4vw, 1.9rem) 0 3rem;
}

.admin-content__inner {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Mobile drawer + top bar (below the desktop breakpoint) */
@media (max-width: 1023px) {
  .admin-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: 0.55rem 0.9rem;
  }

  .admin-topbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--admin-ink);
    cursor: pointer;
  }

  .admin-topbar__toggle:hover { background: var(--color-surface-muted); }

  .admin-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--admin-ink);
    text-decoration: none;
  }

  .admin-topbar__logo { width: 30px; height: 30px; }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    height: 100dvh;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 70;
    box-shadow: 0 0 44px rgba(2, 6, 23, 0.45);
  }

  .admin-shell.is-nav-open .admin-sidebar { transform: none; }

  .admin-shell__backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
  }

  body.admin-nav-open { overflow: hidden; }
}

@media (min-width: 1024px) {
  .admin-shell__backdrop { display: none !important; }
  .admin-topbar { display: none !important; }
}

/* Admin operation feedback: non-modal, away from header/queue controls. */
.ui-admin .admin-success {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid #bbf7d0;
  border-left: 4px solid var(--admin-accent);
  border-radius: 12px;
  background: #f0fdf4;
  color: var(--admin-accent-strong);
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.25);
  animation: admin-success-enter 180ms ease-out;
}

.ui-admin .admin-success[hidden] { display: none; }

.admin-success__icon {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--admin-accent-soft);
}

.admin-success__message {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-success__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.admin-success__close:hover { background: var(--admin-accent-soft); }
.admin-success__close:focus-visible { outline: 2px solid var(--admin-accent-strong); outline-offset: 2px; }

@keyframes admin-success-enter {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-admin .admin-success { animation: none; }
}

@media print {
  .ui-admin .admin-success { display: none !important; }
}

/* ---- Dashboard ------------------------------------------------- */
.dash {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.dash__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dash__eyebrow {
  color: var(--admin-accent-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dash__title {
  margin-top: 0.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}

.dash__lead {
  margin-top: 0.3rem;
  max-width: 62ch;
  color: var(--color-text-soft);
}

.dash__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Emerald primary actions across the admin console */
.ui-admin .btn-primary {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: #ffffff;
}

.ui-admin .btn-primary:hover {
  background: var(--admin-accent-strong);
  border-color: var(--admin-accent-strong);
  color: #ffffff;
}

.ui-admin .dash__actions .btn-ghost {
  background: #ffffff;
  border: 1px solid var(--color-border-strong);
  color: var(--admin-ink);
}

.ui-admin .dash__actions .btn-ghost:hover { background: var(--color-surface-muted); }

/* KPI cards */
.dash-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dash-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 134px;
  padding: 1.2rem 1.2rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.dash-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-kpi__label {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dash-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--admin-accent-soft);
  color: var(--admin-accent-strong);
}

.dash-kpi__value {
  margin-top: 0.2rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}

.dash-kpi__value.is-loss { color: var(--color-danger); }
.dash-kpi__unit { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }

.dash-kpi__sub {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.dash-kpi__note {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-warning);
  font-weight: 600;
}

.dash-kpi__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--admin-accent);
}

.dash-kpi--sales .dash-kpi__icon { background: #dcfce7; color: #15803d; }
.dash-kpi--sales .dash-kpi__bar { background: #16a34a; }
.dash-kpi--profit .dash-kpi__icon { background: #ccfbf1; color: #0f766e; }
.dash-kpi--profit .dash-kpi__bar { background: #14b8a6; }
.dash-kpi--items .dash-kpi__icon { background: #dbeafe; color: #1d4ed8; }
.dash-kpi--items .dash-kpi__bar { background: #3b82f6; }
.dash-kpi--orders .dash-kpi__icon { background: #ede9fe; color: #6d28d9; }
.dash-kpi--orders .dash-kpi__bar { background: #8b5cf6; }

/* Sections + cards */
.dash-section__head { margin-bottom: 0.75rem; }
.dash-section__title { font-size: 1.15rem; font-weight: 700; color: var(--admin-ink); }

/* Needs Attention sub-groups (Online / Pick-up / Others) */
.dash-attention-group + .dash-attention-group { margin-top: 1.1rem; }

.dash-attention-group__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.dash-attention-group__title {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dash-attention-group__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

.dash-attention-group__empty {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.dash-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.dash-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dash-card__title { font-size: 1.05rem; font-weight: 700; color: var(--admin-ink); }
.dash-card__subtitle { margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.78rem; }

.dash-card__link {
  color: var(--admin-accent-strong);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

.dash-card__link:hover { text-decoration: underline; }

.dash-card__foot { margin-top: 0.9rem; color: var(--color-text-muted); font-size: 0.8rem; }
.dash-card__foot strong { color: var(--admin-ink); }

/* Needs attention */
.dash-attention {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .dash-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .dash-attention { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dash-attn {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

.dash-attn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.dash-attn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 10px;
}

.dash-attn__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.12rem; min-width: 0; }

.dash-attn__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  color: var(--admin-ink);
  font-size: 0.9rem;
}

.dash-attn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 0.4rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.dash-attn__desc { margin-top: auto; color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.45; }

.dash-attn--warn { border-left-color: #d97706; }
.dash-attn--warn .dash-attn__icon { background: #fef3c7; color: #b45309; }
.dash-attn--warn .dash-attn__count { background: #d97706; }
.dash-attn--danger { border-left-color: #dc2626; }
.dash-attn--danger .dash-attn__icon { background: #fee2e2; color: #b91c1c; }
.dash-attn--danger .dash-attn__count { background: #dc2626; }
.dash-attn--info { border-left-color: #2563eb; }
.dash-attn--info .dash-attn__icon { background: #dbeafe; color: #1d4ed8; }
.dash-attn--info .dash-attn__count { background: #2563eb; }
.dash-attn--neutral { border-left-color: #64748b; }
.dash-attn--neutral .dash-attn__icon { background: #e2e8f0; color: #475569; }
.dash-attn--neutral .dash-attn__count { background: #64748b; }

/* Trend + bundle overview grid */
.dash-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1000px) {
  .dash-grid--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Dependency-free CSS bar chart */
.dash-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: end;
  height: 220px;
  padding-top: 0.5rem;
}

.dash-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  height: 100%;
}

.dash-chart__amount {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-chart__bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
}

.dash-chart__bar {
  width: 100%;
  max-width: 42px;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  transition: height var(--transition-slow);
}

.dash-chart__col.is-today .dash-chart__bar { background: linear-gradient(180deg, #15803d, #166534); }

.dash-chart__label { font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); }
.dash-chart__col.is-today .dash-chart__label { color: var(--admin-accent-strong); }

@media (max-width: 760px) {
  .dash-chart__amount { display: none; }
  .dash-chart { height: 180px; }
}

/* Bundle overview stat list */
.dash-stats { display: flex; flex-direction: column; }

.dash-stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}

.dash-stats__row:last-child { border-bottom: 0; }
.dash-stats__row dt { color: var(--color-text-soft); }
.dash-stats__row dd { font-weight: 700; color: var(--admin-ink); text-align: right; }
.dash-stats__row .muted { color: var(--color-text-muted); font-weight: 500; }
.dash-stats__row--projection dt, .dash-stats__row--projection dd { color: var(--color-info); }

.dash-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--color-info-soft);
  color: var(--color-info);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Recent completed sales feed */
.dash-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-feed__row + .dash-feed__row { border-top: 1px solid var(--color-border); }

.dash-feed__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.3rem;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}

.dash-feed__link:hover { background: var(--color-surface-muted); }

.dash-feed__time {
  flex: 0 0 auto;
  width: 96px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.dash-feed__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-feed__code { font-weight: 700; color: var(--admin-ink); font-size: 0.86rem; }
.dash-feed__meta { color: var(--color-text-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-feed__right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.dash-feed__total { font-weight: 800; color: var(--admin-ink); font-size: 0.9rem; }

.dash-chip { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: 999px; }
.dash-chip--walkin { background: #dcfce7; color: #15803d; }
.dash-chip--online { background: #dbeafe; color: #1d4ed8; }

@media (max-width: 540px) {
  .dash-feed__time { width: 70px; }
}

/* Empty states */
.dash-empty { padding: 2rem 1rem; text-align: center; color: var(--color-text-muted); }
.dash-empty__hint { margin-top: 0.35rem; font-size: 0.82rem; }
.dash-empty a { color: var(--admin-accent-strong); font-weight: 600; }

/* Print: drop the sidebar / top bar so receipts and labels print clean */
@media print {
  .ui-admin .admin-sidebar,
  .ui-admin .admin-topbar,
  .ui-admin .admin-shell__backdrop { display: none !important; }
  .ui-admin .admin-shell,
  .ui-admin .admin-main { display: block !important; }
  .ui-admin .admin-content { padding: 0 !important; }
  .ui-admin .admin-content__inner { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body.ui-admin { background: #ffffff !important; }
}

/* ============================================================
   ADMIN PRODUCTS PAGE — Stage 2A
   Matches the dark-slate sidebar + emerald-accent design system.
   ============================================================ */

/* ---- Page shell ------------------------------------------------ */
.inv {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

/* ---- Page header ----------------------------------------------- */
.inv__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.inv__eyebrow {
  color: var(--admin-accent-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inv__title {
  margin-top: 0.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}

.inv__lead {
  margin-top: 0.3rem;
  max-width: 62ch;
  color: var(--color-text-soft);
}

.inv__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.2rem;
}

.inv__primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.inv__secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}

/* ---- KPI / summary cards --------------------------------------- */
.inv-kpis {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .inv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.inv-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.inv-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.inv-kpi__label {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inv-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--admin-accent-soft);
  color: var(--admin-accent-strong);
}

.inv-kpi__value {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
  line-height: 1;
}

.inv-kpi__sub {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* KPI accent bar */
.inv-kpi--total .inv-kpi__icon  { background: #ede9fe; color: #6d28d9; }
.inv-kpi--total::after         { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #8b5cf6; }
.inv-kpi--available .inv-kpi__icon { background: #dcfce7; color: #15803d; }
.inv-kpi--available::after     { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--admin-accent); }
.inv-kpi--held .inv-kpi__icon  { background: #fef3c7; color: #b45309; }
.inv-kpi--held::after          { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #d97706; }
.inv-kpi--legacy .inv-kpi__icon { background: #f1f5f9; color: #475569; }
.inv-kpi--legacy::after       { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #94a3b8; }

/* ---- Toolbar -------------------------------------------------- */
.inv-toolbar .card-body { padding: 1.1rem; }

@media (min-width: 640px) {
  .inv-toolbar .card-body { padding: 1.25rem 1.5rem; }
}

.inv-toolbar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.inv-toolbar__eyebrow {
  color: var(--admin-accent-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inv-toolbar__title {
  margin-top: 0.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--admin-ink);
}

.inv-toolbar__clear-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.inv-toolbar__clear-all:hover { background: #fecaca; color: #991b1b; }

/* Filter form */
.inv-filter { display: flex; flex-direction: column; }

.inv-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}

.inv-filter__search {
  flex: 1 1 200px;
  min-width: 160px;
}

.inv-filter__search-wrap {
  position: relative;
}

.inv-filter__search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.inv-filter__search-wrap .inv-filter__input {
  padding-left: 2rem;
}

.inv-filter__field {
  flex: 0 1 130px;
  min-width: 110px;
}

.inv-filter__label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-filter__input {
  width: 100%;
  height: 36px;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--admin-ink);
  font-size: 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.inv-filter__input:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.inv-filter__submit {
  flex: 0 0 auto;
  padding-bottom: 0;
}

.inv-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  white-space: nowrap;
}

/* ---- Result bar ----------------------------------------------- */
.inv-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.inv-results-bar__count {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.inv-results-bar__pages {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* ---- Product card grid ---------------------------------------- */
.inv-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Product card ---------------------------------------------- */
.inv-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.inv-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.inv-card.is-sold {
  background: var(--color-surface-muted);
}

.inv-card.is-held {
  border-color: #fbbf24;
  background: #fffbeb;
}

.inv-card.is-retired {
  background: #f8fafc;
  opacity: 0.82;
}

/* Image */
.inv-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  overflow: hidden;
  flex: 0 0 auto;
}

.inv-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inv-card.is-sold .inv-card__image img {
  opacity: 0.55;
}

.inv-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}

/* Status badge (image overlay) */
.inv-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}

.inv-badge--available { background: #dcfce7; color: #15803d; }
.inv-badge--held      { background: #fef3c7; color: #92400e; }
.inv-badge--sold      { background: #e2e8f0; color: #475569; }
.inv-badge--retired  { background: #f1f5f9; color: #94a3b8; }

/* Card body */
.inv-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.9rem 1rem 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.inv-card__meta-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.inv-card__category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.inv-card__gender {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}

.inv-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--admin-ink);
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inv-card__price {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--admin-ink);
  letter-spacing: -0.01em;
}

/* Attributes row */
.inv-card__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: 0.55rem;
}

.inv-card__attr {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.inv-card__attr-label {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inv-card__attr-val {
  color: var(--color-text-soft);
  font-weight: 500;
}

/* Defects */
.inv-card__defects {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: #b45309;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inv-card__defects svg { flex: 0 0 auto; margin-top: 0.1rem; }

/* Bundle info */
.inv-card__bundle-info {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inv-card__barcode {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  max-width: 100%;
  min-width: 0;
}

.inv-card__barcode code {
  font-family: monospace;
  font-size: 0.72rem;
  background: #f1f5f9;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  color: #334155;
  overflow-wrap: anywhere;
}

.inv-card__unassigned {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: #b45309;
  font-weight: 500;
}

/* Actions */
.inv-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.inv-card__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.inv-card__retired-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- Empty state ---------------------------------------------- */
.inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}

.inv-empty svg { color: #cbd5e1; }

/* ---- Pagination ----------------------------------------------- */
.inv-pagination {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.inv-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  justify-content: center;
}

.inv-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 34px;
  padding: 0 0.75rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--color-border-strong);
  color: var(--admin-ink);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.inv-pagination__btn:hover {
  background: var(--color-surface-muted);
  border-color: var(--admin-accent);
  color: var(--admin-accent-strong);
}

.inv-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.3rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--color-border-strong);
  color: var(--admin-ink);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

.inv-pagination__num:hover {
  background: var(--admin-accent-soft);
  border-color: var(--admin-accent);
  color: var(--admin-accent-strong);
}

.inv-pagination__num.is-current {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: #ffffff;
  font-weight: 700;
  pointer-events: none;
}

.inv-pagination__ellipsis {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  padding: 0 0.2rem;
}

/* ---- Mobile overrides ----------------------------------------- */
@media (max-width: 640px) {
  .inv__header { flex-direction: column; }
  .inv__header-actions { width: 100%; justify-content: flex-start; }
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-filter__row { gap: 0.5rem; }
  .inv-filter__search { flex: 1 1 100%; }
  .inv-filter__field { flex: 1 1 calc(50% - 0.3rem); }
  .inv-filter__submit { flex: 1 1 100%; }
  .inv-filter__btn { width: 100%; justify-content: center; }
}



/* ============================================================
   LEGACY INVENTORY ASSIGNMENT (admin/legacy-assign.php)
   Follows the Products page (.inv-*) / dashboard design system:
   white cards with subtle borders, rounded corners, restrained
   shadows, emerald accents, light neutral content background.
   Reuses the shared .ui-admin theme tokens and .btn components.
   ============================================================ */
.leg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Breadcrumb */
.leg__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.8125rem;
}
.leg__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #475569;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}
.leg__breadcrumb a:hover { color: var(--admin-accent-strong); }
.leg__breadcrumb > span[aria-hidden] { color: #cbd5e1; }
.leg__breadcrumb > span[aria-current] { color: #94a3b8; }

/* Page header */
.leg__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.leg__eyebrow {
  color: var(--admin-accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.leg__title {
  margin-top: 0.2rem;
  color: #0f172a;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.leg__lead {
  margin-top: 0.35rem;
  max-width: 640px;
  color: #64748b;
  font-size: 0.9375rem;
}
.leg__header-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (min-width: 720px) {
  .leg__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .leg__title { font-size: 1.9rem; }
}

/* Informational notice */
.leg__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  color: #065f46;
  font-size: 0.8125rem;
}
.leg__notice p { margin: 0; }
.leg__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--admin-accent);
  color: #ffffff;
}
.leg__notice-count {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Progress stepper */
.leg-steps {
  padding: 0.9rem 1.1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.leg-steps__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.leg-steps__item { display: flex; align-items: center; gap: 0.45rem; }
.leg-steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}
.leg-steps__label { font-size: 0.8125rem; font-weight: 600; color: #94a3b8; }
.leg-steps__divider {
  width: 22px;
  height: 1.5px;
  margin-inline: 0.3rem;
  background: #e2e8f0;
}
.leg-steps__item.is-current .leg-steps__marker {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: #ffffff;
}
.leg-steps__item.is-current .leg-steps__label {
  color: var(--admin-accent-strong);
  font-weight: 700;
}
.leg-steps__item.is-done .leg-steps__marker {
  background: var(--admin-accent-soft);
  border-color: var(--admin-accent);
  color: var(--admin-accent-strong);
}
.leg-steps__item.is-done .leg-steps__label { color: #475569; }

/* White card surface */
.leg-card {
  padding: 1.15rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.leg-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.leg-card__eyebrow {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.leg-card__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
}
.leg-card__hint {
  margin-top: 0.35rem;
  max-width: 560px;
  color: #64748b;
  font-size: 0.8125rem;
}

/* Badges */
.leg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.leg-badge--available { background: #dcfce7; color: #15803d; }
.leg-badge--sold { background: #e2e8f0; color: #475569; }
.leg-badge--retired { background: #f1f5f9; color: #94a3b8; }
.leg-badge--unassigned { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.leg-badge--category { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.leg-badge--muted { background: #f1f5f9; color: #64748b; }


/* Filter toolbar */
.leg-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
}
.leg-filter__search { flex: 2 1 18rem; min-width: min(100%, 16rem); }
.leg-filter__search-wrap { position: relative; display: flex; align-items: center; }
.leg-filter__search-icon {
  position: absolute;
  left: 0.7rem;
  color: #94a3b8;
  pointer-events: none;
}
.leg-filter__search-wrap .leg-filter__input { padding-left: 2.1rem; }
.leg-filter__field { flex: 1 1 9rem; min-width: min(100%, 9rem); }
.leg-filter__label {
  display: block;
  margin-bottom: 0.3rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.leg-filter__input {
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 0.875rem;
  color: #0f172a;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.leg-filter__input:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}
.leg-filter__search-wrap .leg-filter__input { padding-left: 2.1rem; }
.leg-filter__submit { display: flex; flex: 0 1 auto; align-items: center; gap: 0.4rem; min-width: 0; margin-left: auto; }
.leg-filter__submit .btn { min-height: 40px; }
.leg-filter__btn { min-height: 40px; }

@media (max-width: 767px) {
  .leg-filter__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .leg-filter__search,
  .leg-filter__field,
  .leg-filter__submit { width: 100%; min-width: 0; }
  .leg-filter__submit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .leg-filter__submit .btn { width: 100%; min-height: 42px; }
}

/* Results bar */
.leg__results-bar p {
  margin: 0;
  color: #64748b;
  font-size: 0.8125rem;
}

/* Product table */
.table-wrap--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.leg-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: min(65vh, 42rem);
  max-height: min(65dvh, 42rem);
  overflow: auto;
  overscroll-behavior: contain;
}
.leg-table-wrap:focus-visible {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}
.leg-table { font-size: 0.875rem; }
.leg-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 #e2e8f0;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.leg-table__col-thumb { width: 60px; }
.leg-table__cell-thumb { width: 60px; }
.leg-table__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f1f5f9;
}
.leg-table__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  color: #94a3b8;
}
.leg-table__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}
.leg-table__name {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.leg-table__sub { display: block; margin-top: 0.1rem; color: #94a3b8; font-size: 0.75rem; }
.leg-table__price { font-weight: 700; color: #0f172a; white-space: nowrap; }
.leg-table__hint {
  display: block;
  margin-top: 0.15rem;
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 600;
}

/* Two-column step layout */
.leg-layout { display: grid; gap: var(--sp-4); align-items: start; }
.leg-card--sticky { position: static; max-height: none; overflow: visible; }
@media (min-width: 1000px) {
  .leg-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 1024px) {
  .leg-card--sticky {
    position: sticky;
    top: var(--sp-4);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* Product summary panel */
.leg-product { display: flex; gap: 1rem; align-items: flex-start; }
.leg-product__image {
  width: 112px;
  height: 140px;
  flex: none;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.leg-product__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.leg-product__body { min-width: 0; flex: 1; }
.leg-product__idline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.leg-product__name {
  margin-top: 0.2rem;
  color: #0f172a;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.leg-product__price { margin-top: 0.15rem; color: #0f172a; font-weight: 700; }
.leg-product__statusline { margin-top: 0.4rem; color: #64748b; font-size: 0.8125rem; }
.leg-product__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0.75rem 0 0;
}
.leg-product__meta dt {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.leg-product__meta dd {
  margin: 0.1rem 0 0;
  color: #334155;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.leg-product__statusline {
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.8125rem;
}


/* Bundle selection cards */
.leg-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem;
}
.leg-bundle { display: block; cursor: pointer; }
.leg-bundle__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 0.85rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 11px;
  background: #ffffff;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.leg-bundle:hover:not(.is-disabled) .leg-bundle__body {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.leg-bundle input:checked + .leg-bundle__body {
  background: #f0fdf4;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}
.leg-bundle input:focus-visible + .leg-bundle__body {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}
.leg-bundle.is-disabled { cursor: not-allowed; }
.leg-bundle.is-disabled .leg-bundle__body {
  background: #f8fafc;
  border-style: dashed;
}
.leg-bundle__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.leg-bundle__code {
  font-size: 0.78rem;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.leg-bundle__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.75rem;
}
.leg-bundle__meta-label {
  display: block;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.leg-bundle__price {
  display: block;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.875rem;
}
.leg-bundle__capacity { display: flex; flex-direction: column; gap: 0.25rem; margin-top: auto; }
.leg-bundle__meter {
  display: block;
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.leg-bundle__meter span {
  display: block;
  height: 100%;
  background: var(--admin-accent);
  border-radius: 999px;
  transition: width 400ms ease;
}
.leg-bundle__reason {
  display: block;
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  padding: 0.3rem 0.5rem;
  background: #fef3c7;
  border-radius: 6px;
}

/* Status acknowledgement checkbox */
.leg-ack {
  margin-top: 0.9rem;
  padding: 0.8rem 0.9rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
}
.leg-ack__label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: #9a3412;
  cursor: pointer;
}
.leg-ack__label input[type="checkbox"] { margin-top: 0.2rem; flex: none; width: 16px; height: 16px; cursor: pointer; }

/* Warning box (SOLD/retired banner) */
.leg-warning {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  margin-top: 0.85rem;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 10px;
  color: #92400e;
  font-size: 0.8125rem;
}
.leg-warning__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: #d97706;
  color: #ffffff;
}
.leg-warning div strong { display: block; font-weight: 700; }

/* Form actions */
.leg-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #f1f5f9;
}

/* Empty state */
.leg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #94a3b8;
  background: #ffffff;
  border: 1.5px dashed #e2e8f0;
  border-radius: 14px;
}
.leg-empty p { max-width: 380px; color: #64748b; font-size: 0.875rem; }
.leg-empty--compact { padding: 1.5rem; }

/* Review / success dl grid */
.leg-review {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}
.leg-review > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #f1f5f9;
}
.leg-review > div:last-child { border-bottom: 0; padding-bottom: 0; }
.leg-review dt { color: #94a3b8; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.leg-review dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.8125rem;
  text-align: right;
  max-width: 55%;
  overflow-wrap: anywhere;
}

/* Projected values panel */
.leg-projected {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.85rem;
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
}
.leg-projected > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.leg-projected__item {
  font-weight: 700;
  color: var(--admin-accent-strong);
  font-size: 0.875rem;
}
.leg-projected__barcode {
  font-size: 0.875rem;
  color: #0f172a;
  font-weight: 700;
}
.leg-projected__note { margin: 0; color: #64748b; font-size: 0.72rem; font-style: italic; }

/* Note box */
.leg-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  color: #475569;
  font-size: 0.8rem;
}
.leg-note p { margin: 0; }

/* Success card */
.leg-success { border-color: #a7f3d0; }
.leg-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--admin-accent);
  color: #ffffff;
}

/* Barcode preview */
.leg-barcode {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 80px;
}
.leg-barcode svg {
  max-width: 100%;
  height: auto;
}

/* Alert override for this page */
.leg__alert { margin-top: 0; }


/* ---- Mobile overrides ----------------------------------------- */
@media (max-width: 640px) {
  .leg-card { padding: 0.95rem; }
  .leg-product { flex-direction: column; }
  .leg-product__image { width: 100%; height: 180px; }
  .leg-product__meta { grid-template-columns: 1fr; }
  .leg-bundle-grid { grid-template-columns: 1fr; }
  .leg-review dd { max-width: 60%; }
  .leg-steps__divider { width: 12px; }
  .leg-form__actions .btn { flex: 1 1 auto; }
  .leg-table-wrap {
    max-height: min(60vh, 32rem);
    max-height: min(60dvh, 32rem);
  }
}


/* ============================================================
   Sales Monitoring (admin/sales.php)
   Page-scoped dashboard layout using the existing admin theme tokens.
   ============================================================ */

.sales-monitor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.sales-monitor .admin-page-header {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.sales-monitor .admin-page-header > div { min-width: 0; }
.sales-monitor .admin-page-header h1 {
  margin-top: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}

.sales-monitor__section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: var(--sp-3);
}

.sales-monitor__section-heading > div { min-width: 0; }
.sales-monitor__section-heading h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--admin-ink);
}

.sales-monitor__section-heading p {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.sales-monitor__section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  padding-top: 0.2rem;
  color: var(--admin-accent-strong);
}

.sales-monitor__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-3);
}

.sales-monitor .sales-monitor__metric {
  min-width: 0;
  min-height: 0;
  padding: var(--sp-4);
  gap: 0.5rem;
  border-radius: 12px;
  box-shadow: none;
  overflow-wrap: anywhere;
}

.sales-monitor .dash-kpi__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.sales-monitor .dash-kpi__value {
  margin-top: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.sales-monitor .dash-kpi__sub { margin-top: auto; }
.sales-monitor__overview .sales-monitor__metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.sales-monitor__overview .sales-monitor__metric { padding: var(--sp-5); }
.sales-monitor__overview .dash-kpi__value { font-size: 2rem; }
.sales-monitor__overview .dash-kpi__icon { width: 32px; height: 32px; border-radius: 9px; }

/* Walk-in spans the row; courier and pickup share a row only with ample room. */
.sales-monitor__channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  gap: var(--sp-4);
}

.sales-monitor__channel {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.sales-monitor__channel:first-child { grid-column: 1 / -1; }
.sales-monitor__transaction-count { display: block; margin-bottom: 0.2rem; }
.sales-monitor__today-note { margin-top: calc(-1 * var(--sp-2)); }

.sales-monitor__transactions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.sales-monitor__transactions > .sales-monitor__section-heading,
.sales-monitor .admin-products__filters,
.sales-monitor .sales-monitor__summary,
.sales-monitor .alert,
.sales-monitor .empty-state { margin: 0; }

.sales-monitor .admin-products__filters .card-body { padding: var(--sp-4); }
.sales-monitor .admin-section-heading h3 { font-size: 0.9375rem; font-weight: 700; }

.sales-monitor .sales-monitor__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
}

.sales-monitor__filters > .field { flex: 1 1 10rem; min-width: 0; }
.sales-monitor__filters > .sales-monitor__search { flex: 2 1 20rem; }
.sales-monitor__dates {
  display: grid;
  flex: 2 1 20rem;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-3);
}

.sales-monitor__dates .field { min-width: 0; }
.sales-monitor__filters :is(input, select) { min-width: 0; max-width: 100%; min-height: 44px; }
.sales-monitor__filters .admin-filter-form__actions { min-width: 0; padding-top: 0; }
.sales-monitor .btn { max-width: 100%; white-space: normal; }
.sales-monitor__filters .btn { min-height: 44px; }
.sales-monitor__filter-hint { margin-top: var(--sp-3); }

.sales-monitor__search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.sales-monitor__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Secondary reference line under the primary customer/cashier cell */
.sales-monitor__cust {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.sales-monitor__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-4);
}

.sales-monitor__table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  box-shadow: none;
}

.sales-monitor__table-wrap:focus-visible {
  outline: 2px solid var(--admin-accent-strong);
  outline-offset: 2px;
}

.sales-monitor__table {
  min-width: 68rem;
  font-size: 0.875rem;
}

.sales-monitor__table :is(th, td) { padding: 0.85rem 0.75rem; }
.sales-monitor__table th { white-space: normal; line-height: 1.4; }
.sales-monitor__table td { overflow-wrap: anywhere; }
.sales-monitor__table td:nth-child(4) { max-width: 15rem; }
.sales-monitor__table .sales-monitor__numeric { text-align: right; font-variant-numeric: tabular-nums; }
.sales-monitor__table .price { white-space: nowrap; }
.sales-monitor__table :is(.bundle-code, .dash-chip, .badge) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Receipt view */
.sales-detail .receipt {
  max-width: 640px;
}

.receipt__note {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

@media (max-width: 560px) {
  .sales-monitor__filters > .field,
  .sales-monitor__dates,
  .sales-monitor__filters .admin-filter-form__actions { flex-basis: 100%; }

  .sales-monitor__pagination {
    justify-content: center;
  }
}

/* ============================================================
   Phase 2 - Manual GCash payment panels
   ============================================================ */

/* Checkout info panel: shown when the GCash option is selected. */
.gcash-checkout {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.gcash-checkout__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-3);
}

.gcash-checkout__title {
  font-weight: 650;
  margin: 0;
}

.gcash-checkout__details,
.gcash-panel__details {
  margin: 0 0 var(--sp-3);
  display: grid;
  gap: 0.5rem;
}

.gcash-checkout__row,
.gcash-panel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.gcash-checkout__row dt,
.gcash-panel__row dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.gcash-checkout__row dd,
.gcash-panel__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.gcash-checkout__amount,
.gcash-panel__amount {
  font-size: 1.125rem;
  font-weight: 700;
}

.gcash-checkout__number-row,
.gcash-panel__number-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gcash-checkout__qr,
.gcash-panel__qr {
  margin: 0 0 var(--sp-3);
  text-align: center;
}

.gcash-checkout__qr img,
.gcash-panel__qr img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 6px;
}

.gcash-checkout__qr figcaption,
.gcash-panel__qr figcaption {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.gcash-checkout__copied,
.gcash-panel__copied {
  font-size: 0.8125rem;
  color: var(--color-success);
  font-weight: 600;
}

/* Checkout requirement alert + submitted-payment note spacing. */
.gcash-checkout > .alert {
  margin-top: var(--sp-3);
  margin-bottom: 0;
}

.confirmation-card .alert p {
  margin: 0.35rem 0 0;
}

/* Order confirmation / detail GCash submission panel. */
.gcash-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.gcash-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.gcash-panel__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.gcash-panel__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
}

.gcash-panel__note {
  margin: 0 0 var(--sp-3);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.gcash-panel__note--ok {
  color: #2f6142;
}

.gcash-panel__note--bad {
  color: var(--color-danger-dark);
}

.gcash-panel__account {
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
  margin-bottom: var(--sp-3);
}

.gcash-panel__row--amount dd {
  color: var(--color-primary);
}

.gcash-panel__steps {
  margin: 0 0 var(--sp-3);
  padding-left: 1.25rem;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.gcash-panel__steps li {
  margin-bottom: 0.35rem;
}

.gcash-panel__submitted {
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}

.gcash-panel__submitted-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

.gcash-panel__submitted-line span {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.gcash-panel__form {
  margin-top: var(--sp-3);
}

.gcash-panel .badge,
.gcash-panel__form .btn,
.gcash-recovery-cancel .btn {
  max-width: 100%;
  white-space: normal;
}

.gcash-panel__note {
  overflow-wrap: anywhere;
}

.gcash-recovery-cancel {
  display: grid;
  gap: var(--sp-3);
}

.gcash-recovery-cancel > label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.gcash-recovery-cancel input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0.25rem;
}

/* Admin order view - GCash verification block. */
.admin-order-detail__gcash {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.admin-order-detail__gcash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--sp-3);
}

.admin-order-detail__gcash-hint {
  margin: var(--sp-3) 0;
  font-size: 0.875rem;
  color: var(--color-text-soft);
}

.admin-order-detail__gcash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
}

.admin-order-detail__gcash-reject {
  flex: 1 1 260px;
}

.admin-order-detail__gcash-reject .field {
  margin-bottom: 0.5rem;
}

/* ============================================================
   Phase 2 - GCash payment modal (Order Confirmation page)
   Centered dialog following the feedback-overlay / location-modal
   conventions: fixed, dimmed backdrop, scrollable panel bounded
   by the viewport, close control, focus returned on close.
   ============================================================ */

.gcash-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.gcash-modal[hidden] {
  display: none;
}

.gcash-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 28, 24, 0.5);
}

.gcash-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gcash-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.gcash-modal__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.gcash-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.gcash-modal__close:hover,
.gcash-modal__close:focus-visible {
  background: rgba(23, 23, 23, 0.06);
  color: var(--color-text);
}

.gcash-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
}

/* The nested panel reads as an inset block inside the modal. */
.gcash-modal__body .gcash-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Clearly visible reopen affordance once the modal is closed. */
.gcash-reopen {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.gcash-reopen__btn {
  width: 100%;
}

.gcash-reopen__hint {
  margin: var(--sp-2) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .gcash-modal {
    padding: var(--sp-2);
  }

  .gcash-modal__panel {
    max-height: calc(100dvh - 1rem);
  }
}

/* ============================================================
   Phase 3 - Store Pickup lifecycle
   ============================================================ */

/* Customer order-detail: pickup timeline reuses the courier od-progress
   node/step language (see .od-progress above); the modifier only widens
   spacing slightly for the longer pickup labels. */
.od-progress--pickup .od-progress__label {
  white-space: nowrap;
}

/* Ready-for-pickup deadline note on the customer order detail. */
.pickup-deadline-note {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid #cfe0e8;
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.pickup-deadline-note.is-overdue {
  border-color: #f0cfcd;
  background: var(--color-danger-soft);
}

.pickup-deadline-note__title {
  margin: 0 0 0.35rem;
  font-weight: 650;
  color: #345c72;
}

.pickup-deadline-note.is-overdue .pickup-deadline-note__title {
  color: var(--color-danger-dark);
}

.pickup-deadline-note p {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.pickup-deadline-note__overdue {
  font-weight: 600;
}

.pickup-deadline-note__intro {
  margin-top: var(--sp-3);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* Admin order-view pickup lifecycle steps (mirrors od-progress visually
   within the admin card language). */
.pickup-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.pickup-steps__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 110px;
  text-align: center;
}

.pickup-steps__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.pickup-steps__step.is-complete .pickup-steps__node {
  border-color: var(--color-success);
  color: var(--color-success);
}

.pickup-steps__step.is-current .pickup-steps__node {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--ring);
}

.pickup-steps__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pickup-steps__step.is-complete .pickup-steps__label,
.pickup-steps__step.is-current .pickup-steps__label {
  color: var(--color-text);
}

/* Admin Store Pickup section list. */
.admin-pickups__summary {
  margin-bottom: var(--sp-4);
}

.admin-pickup-list {
  display: grid;
  gap: var(--sp-4);
}

.admin-pickup-card {
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.admin-pickup-card.is-overdue {
  border-color: #f0cfcd;
  box-shadow: inset 0 0 0 1px #f0cfcd;
}

.admin-pickup-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.admin-pickup-card__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-pickup-card__header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.admin-pickup-card__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.admin-pickup-card__details {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 var(--sp-3);
}

.admin-pickup-card__details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: baseline;
}

.admin-pickup-card__details dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.admin-pickup-card__details dd {
  margin: 0;
  font-weight: 600;
}

.admin-pickup-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

@media (max-width: 720px) {
  .pickup-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .pickup-steps__step {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }
}