:root {
  --ink: #171614;
  --ink-soft: #292621;
  --ivory: #f2efe8;
  --paper: #e8e3d9;
  --champagne: #d0ae76;
  --champagne-light: #ead4a5;
  --line: rgba(234, 212, 165, .27);
  --line-dark: rgba(23, 22, 20, .17);
  --muted: #a8a098;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Trebuchet MS", sans-serif;
  --mono: "DM Mono", monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 2px;
  --radius-lg: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ivory);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 14px; background: var(--champagne); color: var(--ink);
  transform: translateY(-150%); transition: transform .25s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--champagne-light); outline-offset: 4px; }

.announcement {
  min-height: 31px; display: flex; justify-content: center; align-items: center;
  padding: 6px 18px; background: var(--champagne); color: var(--ink);
  font: 500 10px/1 var(--mono); letter-spacing: .17em; text-transform: uppercase;
}
.site-header {
  position: absolute; inset: 31px 0 auto; z-index: 10;
  transition: background .3s ease, border .3s ease;
}
.site-header.scrolled {
  position: fixed; top: 0; background: rgba(23, 22, 20, .93);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.nav-shell {
  width: min(1320px, calc(100% - 56px)); margin: auto; height: 88px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled .nav-shell { border-color: transparent; }
.nav-links { display: flex; gap: 27px; align-items: center; }
.nav-links a, .nav-action {
  color: var(--ivory); font: 500 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; opacity: .86; transition: color .2s ease, opacity .2s ease;
}
.nav-links a:hover, .nav-action:hover { color: var(--champagne-light); opacity: 1; }
.wordmark { text-align: center; }
.wordmark-main { display: block; font: 25px/1 var(--serif); letter-spacing: .04em; }
.wordmark-sub { display: block; margin-top: 5px; font: 8px/1 var(--mono); letter-spacing: .29em; color: var(--champagne-light); }
.nav-actions { display: flex; justify-content: flex-end; gap: 19px; align-items: center; }
.nav-action { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 8px 0; }
.count {
  display: inline-flex; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 20px;
  justify-content: center; align-items: center; background: var(--champagne); color: var(--ink);
  font: 9px/1 var(--mono);
}
.menu-button { display: none; border: 0; background: none; color: var(--ivory); }

.hero { min-height: min(840px, 92vh); position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 9, 8, .84) 0%, rgba(10, 9, 8, .35) 47%, rgba(10, 9, 8, .18) 100%),
              linear-gradient(0deg, rgba(10, 9, 8, .7), transparent 46%);
}
.hero-content { width: min(1320px, calc(100% - 56px)); margin: 0 auto 95px; position: relative; z-index: 1; }
.eyebrow { color: var(--champagne-light); font: 500 10px/1.4 var(--mono); letter-spacing: .28em; text-transform: uppercase; }
.hero h1 { max-width: 620px; margin: 22px 0 17px; font: 86px/.92 var(--serif); letter-spacing: -.035em; font-weight: 400; }
.hero h1 em { color: var(--champagne-light); }
.hero-copy { max-width: 390px; margin: 0 0 29px; color: #d5cec1; font-size: 14px; }
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 24px; border: 1px solid var(--champagne);
  background: var(--champagne); color: var(--ink); font: 500 10px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease;
}
.button:hover { background: var(--champagne-light); transform: translateY(-2px); }
.button.ghost { background: transparent; color: var(--champagne-light); }
.button.ghost:hover { background: var(--champagne); color: var(--ink); }
.hero-rail { position: absolute; right: 28px; bottom: 34px; z-index: 1; color: var(--champagne-light); writing-mode: vertical-rl; font: 9px var(--mono); letter-spacing: .22em; text-transform: uppercase; }

.trust-strip { border-bottom: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); }
.trust-inner { width: min(1320px, calc(100% - 56px)); margin: auto; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.trust-item { display: flex; align-items: center; gap: 11px; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.trust-item svg { width: 19px; height: 19px; color: #8f6d3c; }

.section { padding: 88px 0; }
.section-light { background: var(--ivory); color: var(--ink); }
.section-light .eyebrow { color: #9a7b3f; }
.section-light .button.ghost { color: var(--ink); border-color: var(--line-dark); }
.section-light .button.ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.section-dark { background: var(--ink); }
.container { width: min(1320px, calc(100% - 56px)); margin: auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.section-title { margin: 9px 0 0; font: 54px/.95 var(--serif); letter-spacing: -.025em; font-weight: 400; }
.section-intro { max-width: 330px; margin: 0; color: #81796f; font-size: 13px; }
.section-dark .section-intro { color: var(--muted); }
.line { height: 1px; background: var(--line-dark); }
.section-dark .line { background: var(--line); }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.product-card { position: relative; min-width: 0; }
.product-media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #dcd6cb; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-wish {
  position: absolute; right: 13px; top: 13px; z-index: 1; width: 35px; height: 35px;
  border: 1px solid rgba(23, 22, 20, .18); border-radius: 50%; background: rgba(242,239,232,.7);
  color: var(--ink); display: grid; place-items: center; transition: background .2s ease;
}
.product-wish:hover, .product-wish.is-active { background: var(--champagne); }
.product-wish svg { width: 15px; }
.product-meta { padding: 17px 2px 0; }
.product-category { color: #9a7a4a; font: 9px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.product-name { margin: 7px 0 4px; font: 22px/1.05 var(--serif); font-weight: 400; }
.product-desc { height: 22px; overflow: hidden; color: #81796f; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.product-price { display: block; font: 11px var(--mono); }
.product-price-row del { color: #9a9287; font: 10px var(--mono); }
.product-badge { position: absolute; left: 13px; top: 13px; z-index: 1; padding: 6px 8px; background: rgba(242,239,232,.82); color: var(--ink); font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.product-card .add-button { width: 100%; margin-top: 14px; min-height: 39px; padding: 0 10px; background: transparent; color: var(--ink); border-color: var(--line-dark); }
.product-card .add-button:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.section-cta { position: relative; z-index: 1; display: flex; justify-content: center; clear: both; width: 100%; margin-top: 56px; padding-top: 12px; background: inherit; }
.best-sellers-carousel-wrap { margin-bottom: 40px; }
.spotlight { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; background: #17130f; }
.spotlight-image { display: grid; place-items: center; overflow: hidden; background: #29231b; }
.spotlight-image img { width: 100%; height: 100%; max-height: 480px; object-fit: contain; mix-blend-mode: screen; }
.spotlight-copy { display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(36px, 8vw, 130px) 56px 70px; }
.spotlight-copy h2 { margin: 14px 0; color: var(--ivory); font: 54px/1 var(--serif); font-weight: 400; }
.spotlight-copy p { max-width: 420px; margin: 0 0 24px; color: var(--muted); }
.spotlight-meta { display: grid; gap: 8px; max-width: 390px; margin-bottom: 34px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--champagne-light); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.story { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 620px; background: #11100f; }
.story-image { min-height: 540px; background: #181513 center/cover no-repeat; }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(36px, 8vw, 130px) 80px 70px; }
.story-copy .section-title { color: var(--ivory); max-width: 450px; }
.story-copy p { max-width: 410px; color: var(--muted); margin: 27px 0 32px; }
.story-mark { width: 50px; height: 1px; margin: 32px 0 0; background: var(--champagne); }

.collection-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.collection-tile { position: relative; overflow: hidden; aspect-ratio: 1.4 / 1; border: 1px solid var(--line); }
.collection-tile:first-child { aspect-ratio: 1.18 / 1; grid-row: span 2; }
.collection-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.collection-tile:hover img { transform: scale(1.04); }
.collection-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 63%); }
.collection-label { position: absolute; left: 27px; bottom: 24px; z-index: 1; }
.collection-label small { display: block; color: var(--champagne-light); font: 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.collection-label strong { display: block; margin-top: 3px; font: 36px/.9 var(--serif); font-weight: 400; }

.ritual { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.ritual article { padding: 39px 31px 44px; border-right: 1px solid var(--line-dark); }
.ritual article:last-child { border: 0; }
.ritual-index { color: #a08050; font: 10px var(--mono); letter-spacing: .1em; }
.ritual h3 { margin: 45px 0 12px; font: 30px/1 var(--serif); font-weight: 400; }
.ritual p { max-width: 290px; margin: 0; color: #81796f; font-size: 12px; }

.review-band { display: grid; grid-template-columns: .84fr 1.16fr; gap: 80px; align-items: start; }
.review-feature { font: 36px/1.12 var(--serif); }
.stars { color: var(--champagne); letter-spacing: .18em; font-size: 12px; }
.review-quote { margin: 21px 0 16px; }
.review-author { color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.review-stack { display: grid; gap: 0; }
.review-item { display: grid; grid-template-columns: 94px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.review-item:last-child { border-bottom: 1px solid var(--line); }
.review-item p { margin: 8px 0 0; color: var(--muted); font: 15px/1.4 var(--serif); }

.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; }
.newsletter h2 { margin: 9px 0 0; font: 53px/.95 var(--serif); font-weight: 400; }
.newsletter-copy { color: #81796f; max-width: 315px; margin: 0 0 19px; }
.newsletter-form { display: flex; border-bottom: 1px solid var(--ink); }
.newsletter-form input { width: 100%; min-height: 47px; border: 0; background: transparent; outline: 0; color: var(--ink); font-size: 13px; }
.newsletter-form button { border: 0; background: none; padding: 0 0 0 17px; color: var(--ink); font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.newsletter-note { margin-top: 11px; color: #988f83; font-size: 10px; }

footer { background: #0e0d0c; border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 35px; padding: 68px 0 54px; }
.footer-brand p { max-width: 245px; margin: 23px 0 0; color: var(--muted); font-size: 12px; }
.footer-heading { color: var(--champagne-light); font: 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.footer-links { display: grid; align-content: start; gap: 12px; margin-top: 17px; }
.footer-links a { color: var(--muted); font-size: 12px; transition: color .2s ease; }
.footer-links a:hover { color: var(--ivory); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 24px; border-top: 1px solid var(--line); color: #756e66; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.mobile-menu-overlay { display: none; }
.mobile-menu-drawer { display: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.65); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.drawer { position: fixed; z-index: 31; top: 0; right: 0; width: min(440px, 100%); height: 100dvh; padding: 28px; overflow: auto; background: var(--ivory); color: var(--ink); transform: translateX(100%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.drawer.is-open { transform: translateX(0); }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark); }
.drawer-head h2 { margin: 0; font: 35px var(--serif); font-weight: 400; }
.close-button { border: 0; background: none; color: var(--ink); font-size: 20px; }
.cart-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.cart-item-image { aspect-ratio: 1; background: #ded8ce; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item h3 { margin: 0 0 5px; font: 20px var(--serif); font-weight: 400; }
.cart-item small { color: #81796f; font: 10px var(--mono); }
.quantity { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.quantity button { width: 22px; height: 22px; border: 1px solid var(--line-dark); background: transparent; }
.remove-item { align-self: start; border: 0; background: none; color: #81796f; font-size: 16px; }
.cart-total { display: flex; justify-content: space-between; margin: 23px 0; padding-top: 20px; border-top: 1px solid var(--ink); font: 12px var(--mono); text-transform: uppercase; }
.cart-empty { padding: 58px 0; color: #81796f; text-align: center; }
.cart-empty strong { display: block; margin-bottom: 10px; color: var(--ink); font: 31px var(--serif); font-weight: 400; }
.cart-note, .checkout-note { color: #81796f; font: 10px var(--mono); text-align: center; }
.checkout-note.is-error { color: #b5453a; }
.button.is-loading { opacity: .85; cursor: progress; pointer-events: none; }
.btn-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(23,22,20,.28); border-top-color: currentColor; animation: btn-spin .7s linear infinite; flex: none; }
.button.ghost .btn-spinner { border-color: rgba(234,212,165,.28); border-top-color: currentColor; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.order-success { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 22px; padding: 20px 0 40px; }
.order-success-mark { display: flex; justify-content: center; color: var(--champagne); animation: order-mark-in .5s var(--ease) both; }
.order-check-circle { stroke-width: 2.5; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: order-circle-draw .6s var(--ease) forwards; }
.order-check-mark { stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: order-check-draw .35s var(--ease) .55s forwards; }
@keyframes order-mark-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes order-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes order-check-draw { to { stroke-dashoffset: 0; } }
.order-success h1 { font: 400 34px/1.15 var(--serif); animation: authFadeUp .5s var(--ease) .2s both; }
.order-success-copy { color: var(--muted); max-width: 46ch; margin: -8px auto 0; animation: authFadeUp .5s var(--ease) .3s both; }
.order-success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; animation: authFadeUp .5s var(--ease) .35s both; }
.order-success .content-card { text-align: left; animation: authFadeUp .5s var(--ease) .4s both; }
.order-success-address { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.order-success-total { border-top: 1px solid var(--line-dark); margin-top: 8px; padding-top: 12px; }
.order-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: authFadeUp .5s var(--ease) .45s both; }
@media (max-width: 640px) { .order-success-grid { grid-template-columns: 1fr; } }

.order-detail-page { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.order-detail-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.order-detail-top > div { display: flex; align-items: center; gap: 10px; }
.order-detail-date { color: #81796f; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.order-detail-page .order-success-grid { animation: none; }
.cancel-status { border-left: 3px solid var(--champagne); }
.cancel-status-pending { border-left-color: #b98a2f; }
.cancel-status-approved { border-left-color: #a3392c; }
.cancel-status-rejected { border-left-color: #2c6b34; }
.admin-cancel-request { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-dark); font-size: 12.5px; line-height: 1.7; }
.admin-cancel-request-pending { color: #8a6a1f; }
.admin-cancel-actions { display: flex; gap: 10px; margin-top: 10px; }
.order-help-card { text-align: center; }
.order-help-card .row-sub { margin-bottom: 12px; }
.text-button { border: 0; border-bottom: 1.5px solid currentColor; background: none; color: #6b4a18; padding: 0 0 3px; font: 600 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; transition: color .18s var(--ease), opacity .18s var(--ease); }
.text-button:hover, .text-button:focus-visible { color: var(--ink); opacity: 1; }
.text-button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.auth-card .text-button, .section-dark .text-button { color: var(--champagne-light); }
.auth-card .text-button:hover, .auth-card .text-button:focus-visible,
.section-dark .text-button:hover, .section-dark .text-button:focus-visible { color: var(--ivory); }
.shop-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 22px; padding: 16px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.shop-filters label { display: grid; gap: 7px; color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.shop-filters select { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 11px var(--sans); }
.price-filter { grid-template-columns: 1fr auto; align-items: center; }
.price-filter input { grid-column: 1 / -1; accent-color: #9a7a4a; }
.shop-section { min-height: 62vh; padding-bottom: 140px; }
.shop-result-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; color: #81796f; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.empty-state { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); color: #81796f; text-align: center; }
.empty-state strong { color: var(--ink); font: 31px var(--serif); font-weight: 400; }
.empty-state p { margin: 8px 0 0; }
.search-panel { position: fixed; inset: 0; z-index: 40; background: rgba(23,22,20,.98); padding: 36px 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.search-panel.is-open { opacity: 1; pointer-events: auto; }
.search-inner { width: min(850px, calc(100% - 56px)); margin: auto; }
.search-close { float: right; border: 0; color: var(--ivory); background: none; font-size: 24px; }
.search-panel label { display: block; margin-top: 100px; color: var(--champagne-light); font: 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.search-input { width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: var(--ivory); font: 51px var(--serif); }
.search-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 32px; }
.search-result { color: var(--ivory); }
.search-result img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #25221f; }
.search-result span { display: block; margin-top: 9px; font: 15px var(--serif); }
.search-result small { display: block; margin-top: 4px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.detail-modal {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center;
  padding: 24px; background: rgba(0,0,0,.72); opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.detail-modal.is-open { opacity: 1; pointer-events: auto; }
.detail-sheet {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(920px, 100%);
  max-height: min(720px, 92dvh); overflow: auto; background: var(--ivory); color: var(--ink);
  transform: translateY(16px); transition: transform .3s ease;
}
.detail-modal.is-open .detail-sheet { transform: translateY(0); }
.detail-close { position: absolute; z-index: 2; right: 18px; top: 18px; }
.detail-image { background: #ded8ce; aspect-ratio: 3 / 4; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy { padding: 73px 54px 43px; }
.detail-copy h2 { max-width: 360px; margin: 14px 0 10px; font: 53px/.92 var(--serif); font-weight: 400; }
.detail-copy p { max-width: 360px; color: #81796f; font-size: 12px; }
.detail-notes { color: #9a7a4a !important; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.detail-price { margin: 28px 0 18px; font: 15px var(--mono); }
.detail-rating { display: flex; align-items: center; gap: 8px; color: #81796f; font: 10px var(--mono); }
.size-picker { margin: 22px 0; }
.size-picker > span { display: block; margin-bottom: 9px; color: #81796f; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.size-picker > div { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill { padding: 10px 11px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 10px var(--mono); }
.size-pill:hover, .size-pill.is-active { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.detail-actions { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: stretch; }
.detail-actions .button { width: 100%; }
.detail-quantity { height: 46px; margin: 0; padding: 0 8px; border: 1px solid var(--line-dark); }
.detail-quantity button { width: 26px; height: 26px; border-color: transparent; }
.detail-buy { display: block; width: 100%; min-height: 46px; margin-top: 12px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.detail-buy:hover { background: var(--ink); color: var(--ivory); }
.detail-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0; margin-top: 12px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.detail-save:hover { background: var(--ivory); border-color: var(--ink); }
.detail-save.is-active { border-color: var(--champagne); color: #9a7b3f; }
.detail-save svg { width: 14px; }
.pyramid { margin-top: 29px; border-top: 1px solid var(--line-dark); }
.pyramid h3 { margin: 18px 0 0; font: 22px var(--serif); font-weight: 400; }
.pyramid div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.pyramid span { color: #81796f; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pyramid strong { font: 12px var(--sans); font-weight: 500; }
.detail-info { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.detail-info h3, .related h3 { margin: 0 0 10px; font: 22px var(--serif); font-weight: 400; }
.detail-info h3 span { color: #81796f; font: 10px var(--mono); }
.detail-info p { margin: 0; }
.detail-review { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.detail-review p { flex-basis: 100%; margin: 8px 0 5px; color: var(--ink); font: 15px/1.3 var(--serif); }
.detail-review small { color: #81796f; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.detail-review .rating-value { color: #81796f; font: 10px var(--mono); letter-spacing: .06em; }
.detail-review.empty .stars { color: var(--line-dark); }
.detail-review.empty p { color: #81796f; font: 13px/1.4 var(--sans); }
.review-loading { margin: 14px 0 0; color: #81796f; font: 12px var(--sans); }
.review-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
.review-list li { padding-top: 16px; border-top: 1px solid var(--line-dark); }
.review-list li:first-child { padding-top: 0; border-top: 0; }
.review-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-list-head .stars { font-size: 11px; }
.review-list-author { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.review-list-date { color: #a8a098; font: 10px var(--mono); }
.review-list p { margin: 6px 0 0; color: #4a4640; font: 13px/1.5 var(--sans); }
.review-signin { margin: 16px 0 0; color: #81796f; font: 12px/1.5 var(--sans); }
.review-signin a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.review-form { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; }
.review-form-label { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #81796f; }
.review-star-picker { display: flex; gap: 6px; }
.review-star { border: 0; background: none; padding: 2px; font-size: 22px; line-height: 1; color: var(--line-dark); cursor: pointer; }
.review-star.is-active { color: var(--champagne); }
.review-form textarea { min-height: 78px; padding: 10px 12px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 13px/1.5 var(--sans); resize: vertical; }
.review-form .button.ghost { color: var(--ink); border-color: var(--line-dark); align-self: start; }
.review-form .button.ghost:hover { background: var(--ink); color: var(--ivory); }
.related { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-card { padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.related-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #ded8ce; }
.related-card span { display: block; margin-top: 7px; font: 13px var(--serif); }
.related-card small { display: block; margin-top: 3px; color: #81796f; font: 9px var(--mono); }
.detail-facts { display: grid; gap: 0; margin: 30px 0 0; border-top: 1px solid var(--line-dark); }
.detail-facts div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line-dark); }
.detail-facts dt, .detail-facts dd { margin: 0; font-size: 10px; }
.detail-facts dt { color: #81796f; }
.detail-facts dd { font-family: var(--mono); }
.checkout-modal { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.72); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.checkout-modal.is-open { opacity: 1; pointer-events: auto; }
.checkout-sheet { position: relative; width: min(540px, 100%); padding: 64px 48px 42px; background: var(--ivory); color: var(--ink); transform: translateY(16px); transition: transform .3s ease; }
.checkout-modal.is-open .checkout-sheet { transform: translateY(0); }
.checkout-sheet h2 { margin: 14px 0 10px; font: 53px/.92 var(--serif); font-weight: 400; }
.checkout-sheet > p { color: #81796f; font-size: 12px; }
.checkout-sheet form { display: grid; gap: 14px; margin-top: 24px; }
.checkout-sheet label { display: grid; gap: 7px; color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.checkout-sheet input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); }
.checkout-sheet form .button { width: 100%; margin-top: 8px; }
.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; }
/* ---------------------------------------------------------------------
   Animated alert stack — replaces the old single-line plain-text toast.
   #alert-stack is created once (see ensureAlertStack() in main.js) and
   lives outside #root, so it survives route navigation. Cards stack,
   slide in from the right, colour- and icon-code by type, and drain via
   a shrinking progress bar instead of vanishing abruptly.
--------------------------------------------------------------------- */
#alert-stack { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.alert-card {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 34px 13px 14px; border: 1px solid var(--line-dark); background: var(--ink); color: var(--ivory);
  font: 12px var(--sans); line-height: 1.5; box-shadow: 0 10px 26px rgba(0,0,0,.28);
  opacity: 0; transform: translateX(26px) scale(.98); pointer-events: auto;
  transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1);
}
.alert-card.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.alert-card.is-leaving { opacity: 0; transform: translateX(14px) scale(.97); }
.alert-icon { flex: 0 0 auto; margin-top: 1px; }
.alert-message { flex: 1 1 auto; word-break: break-word; }
.alert-close { position: absolute; top: 8px; right: 8px; border: 0; background: none; color: var(--ivory); opacity: .55; cursor: pointer; padding: 4px; line-height: 0; }
.alert-close:hover { opacity: 1; }
.alert-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .55; width: 100%; animation: alert-drain 3.6s linear forwards; }
.alert-error .alert-progress { animation-duration: 5.2s; }
@keyframes alert-drain { from { width: 100%; } to { width: 0%; } }
.alert-success { color: #7fe3a8; } .alert-success .alert-message { color: var(--ivory); }
.alert-error { color: #ff9b8a; } .alert-error .alert-message { color: var(--ivory); }
.alert-warning { color: #f0c674; } .alert-warning .alert-message { color: var(--ivory); }
.alert-info { color: var(--champagne-light); } .alert-info .alert-message { color: var(--ivory); }
.alert-icon-draw { stroke-dasharray: 20; stroke-dashoffset: 20; animation: alert-draw .45s ease .1s forwards; }
@keyframes alert-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .alert-card, .alert-progress, .alert-icon-draw { animation: none; transition: none; } }
@media (max-width: 640px) { #alert-stack { right: 12px; left: 12px; bottom: 78px; max-width: none; } }
.skeleton { background: linear-gradient(100deg, rgba(255,255,255,.08) 20%, rgba(255,255,255,.16) 35%, rgba(255,255,255,.08) 50%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.page-main { background: var(--ivory); color: var(--ink); }
.page-hero { padding: 175px 0 80px; background: var(--ink); color: var(--ivory); }
.page-hero h1 { max-width: 760px; margin: 15px 0 0; font: 76px/.92 var(--serif); font-weight: 400; letter-spacing: -.03em; }
.page-hero p { max-width: 480px; margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.page-hero + .section { padding-top: 76px; }
.loading-card { pointer-events: none; }
.loading-line { height: 13px; margin-top: 11px; }
.loading-line.short { width: 55%; }
.detail-loading { height: 600px; }
.detail-page { padding-top: 82px; }
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.detail-layout > .detail-image { aspect-ratio: 3 / 4; background: #ded8ce; }
.detail-layout > .detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-layout > .detail-copy { padding: 30px 0 60px; }
.detail-layout > .detail-copy h2 { margin-top: 0; }
.cart-page, .checkout-page { min-height: 520px; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 70px; align-items: start; }
.cart-layout > .cart-list, .checkout-layout > .checkout-form { border-top: 1px solid var(--line-dark); }
.cart-summary { position: sticky; top: 112px; padding: 24px; background: var(--paper); }
.cart-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: #81796f; font-size: 12px; }
.cart-summary > div strong { color: var(--ink); font: 12px var(--mono); }
.cart-summary .summary-total { margin: 14px 0 21px; border-top: 1px solid var(--ink); border-bottom: 0; color: var(--ink); text-transform: uppercase; }
.cart-summary .summary-total strong { font-size: 14px; }
.cart-summary .button { width: 100%; }
.cart-summary p { margin: 16px 0 0; color: #81796f; font: 10px var(--mono); text-align: center; }
.checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); }
.checkout-form { display: grid; gap: 25px; padding-top: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label, .auth-form label { display: grid; gap: 7px; color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.form-grid label:nth-child(4) { grid-column: 1 / -1; }
.form-grid textarea { min-height: 95px; padding: 12px; resize: vertical; }
.form-grid input, .form-grid textarea, .auth-form input { min-height: 46px; padding: 0 12px; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); }
.form-grid textarea { padding-top: 12px; }
.account-card { max-width: 560px; margin: auto; padding: 45px; background: var(--paper); }
.auth-form { display: grid; gap: 17px; }
.auth-form > div { display: flex; align-items: center; gap: 18px; }
.account-status { margin: 0 0 25px; font: 22px var(--serif); }
.collection-page-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.collection-large-card { position: relative; min-height: 380px; overflow: hidden; background: #17130f; }
.collection-large-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 65%); }
.collection-large-card img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; transition: transform .6s ease; }
.collection-large-card:hover img { transform: scale(1.04); }
.collection-large-card > span { position: absolute; left: 28px; right: 28px; bottom: 25px; z-index: 1; display: grid; gap: 6px; }
.collection-large-card small { color: var(--champagne-light); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.collection-large-card strong { font: 38px/.95 var(--serif); font-weight: 400; }
.collection-large-card svg { position: absolute; right: 0; bottom: 5px; color: var(--champagne-light); }

@media (max-width: 1080px) {
  .menu-button { display: inline-flex; width: 26px; padding: 0; }
  .menu-button span, .menu-button span::before, .menu-button span::after { display: block; width: 20px; height: 1px; background: var(--ivory); position: relative; }
  .menu-button span::before, .menu-button span::after { content: ""; position: absolute; left: 0; }
  .menu-button span::before { top: -6px; } .menu-button span::after { top: 6px; }
  .nav-links { display: none; }
  .nav-shell { grid-template-columns: auto 1fr auto; }
  .mobile-menu-overlay { display: block; position: fixed; inset: 0; z-index: 18; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .mobile-menu-drawer { display: flex; position: fixed; z-index: 19; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); padding: 28px 22px; flex-direction: column; background: var(--ink); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
  body.menu-open .mobile-menu-overlay { opacity: 1; pointer-events: auto; }
  body.menu-open .mobile-menu-drawer { transform: translateX(0); }
  .mobile-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
  .mobile-menu-drawer .close-button { color: var(--ivory); }
  .mobile-menu-drawer > a { display: flex; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--ivory); font: 27px var(--serif); }
  .mobile-menu-drawer > a span { color: var(--champagne-light); }
  .mobile-menu-drawer p { margin-top: auto; color: var(--muted); font-size: 11px; }
}
@media (max-width: 900px) {
  .section { padding: 68px 0; }
  .page-hero { padding: 128px 0 52px; }
  .page-hero + .section { padding-top: 52px; }
  .ritual { grid-template-columns: 1fr; }
  .ritual article { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .ritual article:last-child { border-bottom: 0; }
  .review-band { grid-template-columns: 1fr; gap: 40px; }
  .newsletter { grid-template-columns: 1fr; gap: 30px; }
  .nav-shell { width: min(100% - 36px, 1320px); }
  .nav-links { gap: 14px; }
  .hero-content, .container, .trust-inner { width: min(100% - 36px, 1320px); }
  .hero h1 { font-size: 72px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); row-gap: 42px; }
  .story { grid-template-columns: 1fr; }
  .story-image { min-height: 420px; }
  .story-copy { padding: 64px 36px 75px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-tile:first-child { grid-row: auto; aspect-ratio: 1.5 / 1; }
  .collection-tile { aspect-ratio: 1.5 / 1; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight-image { min-height: 430px; }
  .spotlight-copy { padding: 62px 36px 72px; }
  .shop-filters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .announcement { font-size: 8px; letter-spacing: .1em; }
  .site-header { inset-top: 31px; }
  .nav-shell { height: 70px; grid-template-columns: auto 1fr auto; }
  .menu-button { display: inline-flex; width: 26px; padding: 0; }
  .menu-button span, .menu-button span::before, .menu-button span::after { display: block; width: 20px; height: 1px; background: var(--ivory); position: relative; }
  .menu-button span::before, .menu-button span::after { content: ""; position: absolute; left: 0; }
  .menu-button span::before { top: -6px; } .menu-button span::after { top: 6px; }
  .nav-links { display: none; }
  .mobile-menu-overlay { display: block; position: fixed; inset: 0; z-index: 18; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .mobile-menu-drawer { display: flex; position: fixed; z-index: 19; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); padding: 28px 22px; flex-direction: column; background: var(--ink); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
  body.menu-open .mobile-menu-overlay { opacity: 1; pointer-events: auto; }
  body.menu-open .mobile-menu-drawer { transform: translateX(0); }
  .mobile-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
  .mobile-menu-drawer .close-button { color: var(--ivory); }
  .mobile-menu-drawer > a { display: flex; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--ivory); font: 27px var(--serif); }
  .mobile-menu-drawer > a span { color: var(--champagne-light); }
  .mobile-menu-drawer p { margin-top: auto; color: var(--muted); font-size: 11px; }
  .nav-actions { gap: 12px; }
  .nav-action { font-size: 0; }
  .nav-action svg { width: 18px; height: 18px; }
  .wordmark-main { font-size: 21px; }
  .wordmark-sub { font-size: 6px; letter-spacing: .21em; }
  .hero { min-height: 720px; }
  .hero-content { margin-bottom: 72px; }
  .hero h1 { font-size: 60px; max-width: 340px; }
  .hero-copy { font-size: 12px; max-width: 310px; }
  .hero-rail { display: none; }
  .trust-inner { min-height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 0; }
  .trust-item { font-size: 8px; letter-spacing: .02em; }
  .section { padding: 72px 0; }
  .section-heading { display: block; margin-bottom: 29px; }
  .section-title, .newsletter h2 { font-size: 46px; }
  .section-intro { margin-top: 19px; }
  .product-grid { gap: 33px 12px; }
  .product-name { font-size: 19px; }
  .product-desc { font-size: 10px; }
  .product-card .add-button { font-size: 9px; }
  .story-image { min-height: 290px; }
  .story-copy { padding: 53px 18px 62px; }
  .ritual { grid-template-columns: 1fr; }
  .ritual article { padding: 30px 0 34px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .ritual h3 { margin-top: 26px; }
  .review-band, .newsletter { grid-template-columns: 1fr; gap: 38px; }
  .review-feature { font-size: 31px; }
  .review-item { grid-template-columns: 73px 1fr; gap: 18px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding: 51px 0 42px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; line-height: 2; }
  .search-input { font-size: 38px; }
  .search-results { grid-template-columns: repeat(2, 1fr); }
  .detail-modal { padding: 0; align-items: end; }
  .detail-sheet { grid-template-columns: 1fr; max-height: 94dvh; }
  .detail-copy { padding: 40px 20px 30px; }
  .detail-copy h2 { font-size: 42px; }
  .spotlight-image { min-height: 340px; }
  .spotlight-copy { padding: 53px 18px 62px; }
  .spotlight-copy h2 { font-size: 57px; }
  .shop-filters { grid-template-columns: 1fr 1fr; }
  .shop-filters label:last-child { grid-column: 1 / -1; }
  .checkout-sheet { padding: 55px 20px 33px; }
  .checkout-sheet h2 { font-size: 43px; }
  .page-hero { padding: 132px 0 58px; }
  .page-hero h1 { font-size: 57px; }
  .page-hero p { font-size: 12px; }
  .detail-page { padding-top: 45px; }
  .detail-layout, .cart-layout, .checkout-layout { grid-template-columns: 1fr; gap: 35px; }
  .detail-layout > .detail-copy { padding: 0 0 25px; }
  .cart-summary { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label:nth-child(4) { grid-column: auto; }
  .account-card { padding: 28px 20px; }
  .collection-page-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ---------------------------------------------------------------------
   Admin dashboard
--------------------------------------------------------------------- */
.admin-page { padding-top: 60px; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--line-dark); flex-wrap: wrap; }
.admin-tab { padding: 12px 4px; margin-right: 22px; border: 0; border-bottom: 2px solid transparent; background: none; color: #81796f; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.admin-tab.is-active { color: var(--ink); border-bottom-color: var(--champagne); }
.admin-toolbar { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.admin-empty { padding: 40px 0; color: #81796f; text-align: center; }
.admin-list { display: grid; gap: 12px; }
.admin-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 12px; background: var(--paper); }
.admin-row img { width: 56px; height: 56px; object-fit: contain; background: #ded8ce; mix-blend-mode: multiply; }
.admin-row-info { display: grid; gap: 3px; min-width: 0; }
.admin-row-info strong { font: 16px var(--serif); font-weight: 400; }
.admin-row-info span { color: #81796f; font-size: 11px; }
.admin-row-actions { display: flex; gap: 14px; white-space: nowrap; }
.admin-form { display: grid; gap: 22px; margin-bottom: 28px; padding: 22px; background: var(--paper); }
.admin-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-form-grid label { display: grid; gap: 6px; color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.admin-form-grid label.admin-full { grid-column: 1 / -1; }
.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); font: 13px var(--sans); }
.admin-form-grid textarea { min-height: 90px; padding: 10px 12px; resize: vertical; }
.admin-form-actions { display: flex; gap: 14px; }
.admin-form-actions-sticky { position: sticky; bottom: 0; padding: 16px 0; background: var(--ivory); border-top: 1px solid var(--line-dark); }
.admin-fieldset { border: 0; padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--line-dark); }
.admin-fieldset legend { padding: 0 0 14px; font: 20px var(--serif); font-weight: 400; }
.admin-orders { gap: 16px; }
.admin-order { padding: 16px; background: var(--paper); }
.admin-order-head { display: flex; justify-content: space-between; font: 15px var(--serif); }
.admin-order-meta { display: flex; gap: 14px; margin: 6px 0; color: #81796f; font: 10px var(--mono); text-transform: uppercase; }
.admin-order-items { color: #81796f; font-size: 12px; }

/* ---------------------------------------------------------------------
   Extra small-phone tightening (below the existing 640px breakpoint)
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .admin-page { padding-top: 20px; }
  .admin-tabs { gap: 0; }
  .admin-tab { margin-right: 16px; font-size: 10px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 44px 1fr; }
  .admin-row-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
  .admin-order-head, .admin-order-meta { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 50px; }
  .section-title, .newsletter h2 { font-size: 38px; }
  .spotlight-copy h2 { font-size: 46px; }
  .collection-large-card strong { font-size: 30px; }
  .review-feature { font-size: 26px; }
  .product-name { font-size: 17px; }
  .nav-actions { gap: 8px; }
  .container, .hero-content, .trust-inner { width: min(100% - 24px, 1320px); }
  .shop-filters { grid-template-columns: 1fr; }
  .detail-copy h2 { font-size: 34px; }
}

/* Larger, easier-to-tap controls on touch devices */
@media (pointer: coarse) {
  .button, .nav-action, .size-pill { min-height: 44px; }
  .quantity button, .detail-quantity button { width: 30px; height: 30px; }
}

.auth-switch { margin: 4px 0 0; color: #81796f; font-size: 12px; text-align: center; }
.auth-switch a { color: #9a7a4a; border-bottom: 1px solid currentColor; }
.auth-form .text-button { justify-self: center; }

/* ===================== GENDER TRANSFORM SLIDER (ported from A) ===================== */
.gender-slider {
  position: relative; min-height: 480px; overflow: hidden; border-radius: var(--radius-lg);
  cursor: ew-resize; user-select: none; touch-action: pan-y;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
@media (max-width: 760px) { .gender-slider { min-height: 560px; } }
@media (pointer: coarse) { .gender-slider { cursor: default; } }
.gender-slide { position: absolute; inset: 0; overflow: hidden; }
.gender-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gender-slider:hover .gender-slide img { transform: scale(1.045); }
.gender-slide-men {
  clip-path: inset(0 calc(50% + 1px) 0 0); transition: clip-path .5s var(--ease);
  background: linear-gradient(120deg, #1a1a1a, #3a3226 70%);
}
.gender-slide-women {
  clip-path: inset(0 0 0 calc(50% + 1px)); transition: clip-path .5s var(--ease);
  background: linear-gradient(120deg, var(--champagne), #5c4326 70%);
}
.gender-slider.dragging .gender-slide-men, .gender-slider.dragging .gender-slide-women { transition: none; }
.gender-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,5,.75), rgba(10,8,5,.05) 55%); z-index: 1; }
.gender-slide-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.gender-slide-women .gender-slide-body { align-items: flex-end; text-align: right; right: 0; left: auto; }
.gender-slider.revealed .gender-slide-body { opacity: 1; transform: translateY(0); }
.gender-slide-body h3 { font: 400 clamp(26px,3vw,38px)/1.05 var(--serif); color: var(--ivory); margin: 0; }
.gender-slide-body .button { min-width: 148px; text-align: center; justify-content: center; }
.gender-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 3;
  background: linear-gradient(0deg, transparent, var(--champagne-light) 15%, var(--champagne-light) 85%, transparent);
  transform: translateX(-50%); pointer-events: none;
}
.gender-slider-handle::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(10,8,5,.75); border: 1px solid var(--champagne-light);
  transform: translate(-50%,-50%); backdrop-filter: blur(6px);
}
.gender-slider-handle .handle-arrow { position: absolute; top: 50%; font-size: 18px; color: var(--champagne-light); transform: translateY(-50%); }
.gender-slider-handle .handle-arrow.left { left: calc(50% - 20px); }
.gender-slider-handle .handle-arrow.right { left: calc(50% + 8px); }

/* ===================== AUTH — CINEMATIC SPLIT SCREEN (ported from A, restyled for B) ===================== */
.auth-page { position: relative; min-height: 100svh; isolation: isolate; }
.auth-visual { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100svh; overflow: hidden; z-index: 0; display: block; }
.auth-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  animation: authKenBurns 22s ease-in-out infinite alternate; filter: saturate(1.05) contrast(1.05);
}
@keyframes authKenBurns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.12) translate(-1.5%,-1%); } }
.auth-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(60% 55% at 50% 55%, rgba(10,8,5,.5) 0%, rgba(10,8,5,.72) 60%, rgba(10,8,5,.92) 100%),
    linear-gradient(180deg, rgba(10,8,5,.5) 0%, rgba(10,8,5,.2) 30%, rgba(10,8,5,.45) 72%, rgba(10,8,5,.9) 100%);
}
.auth-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(60% 45% at 30% 20%, rgba(208,174,118,.18), transparent 70%);
  animation: authGlowPulse 8s ease-in-out infinite;
}
@keyframes authGlowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .65; } }
.auth-visual-copy { position: absolute; left: 48px; bottom: 48px; z-index: 3; max-width: 380px; opacity: 0; animation: authFadeUp 1.1s var(--ease) .4s forwards; display: none; }
.auth-visual-copy .tag {
  display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase;
  color: var(--champagne-light); border: 1px solid var(--line); padding: 6px 14px; border-radius: 99px;
  background: rgba(10,8,5,.4); backdrop-filter: blur(6px); margin-bottom: 18px;
}
.auth-visual-copy h2 { font: 400 clamp(28px,3vw,40px)/1.15 var(--serif); color: var(--ivory); max-width: 460px; margin: 0; }
.auth-visual-copy h2 em { font-style: italic; color: var(--champagne-light); }
.auth-visual-copy p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 400px; }
.auth-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.auth-embers span { position: absolute; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, var(--champagne-light), transparent 70%); opacity: 0; animation: authEmberRise linear infinite; }
@keyframes authEmberRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .5; } 100% { transform: translateY(-105vh) translateX(var(--drift, 20px)); opacity: 0; } }
.auth-panel { width: 100%; display: flex; align-items: center; justify-content: center; padding: 150px 24px 60px; position: relative; z-index: 1; min-height: 100svh; }
.auth-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background: radial-gradient(50% 40% at 50% 0%, rgba(208,174,118,.06), transparent 70%); pointer-events: none; }
.auth-card {
  width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 44px 38px; background: rgba(242,239,232,.05); position: relative; z-index: 1;
  opacity: 0; transform: translateY(24px); animation: authCardIn .8s var(--ease) .15s forwards; backdrop-filter: blur(10px);
}
@keyframes authCardIn { to { opacity: 1; transform: translateY(0); } }
.auth-card .logo-row { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 28px; opacity: 0; animation: authFadeUp .7s var(--ease) .3s forwards; }
.auth-card .logo-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 0 24px rgba(208,174,118,.25); }
.auth-card .logo-row span { font: 400 19px var(--serif); color: var(--ivory); }
.auth-card h1 { font: 400 26px var(--serif); text-align: center; color: var(--champagne-light); margin: 0; opacity: 0; animation: authFadeUp .7s var(--ease) .38s forwards; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0 30px; opacity: 0; animation: authFadeUp .7s var(--ease) .44s forwards; }
@keyframes authFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.auth-card .auth-form { display: grid; gap: 17px; }
.auth-card .auth-form label { display: block; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.auth-card .auth-form input {
  width: 100%; min-height: 46px; background: rgba(255,248,236,.02); border: 1px solid rgba(246,239,224,.3);
  border-radius: var(--radius); padding: 0 16px; color: var(--ivory); font-size: 14px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.auth-card .auth-form input:hover { border-color: rgba(246,239,224,.5); }
.auth-card .auth-form input:focus { outline: none; border-color: var(--champagne-light); box-shadow: 0 0 0 3px rgba(208,174,118,.14); background: rgba(255,248,236,.04); }
.auth-card .auth-form .button { width: 100%; margin-top: 6px; position: relative; overflow: hidden; }
.auth-card .auth-form .button::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
.auth-card .auth-form .button:hover::after { animation: authShine 1.1s var(--ease); }
@keyframes authShine { from { left: -60%; } to { left: 130%; } }
.auth-links { display: flex; justify-content: flex-end; margin-top: -4px; font-size: 12px; }
.auth-card .checkout-note { color: var(--muted); margin: 2px 0 0; }
.auth-card .auth-switch { text-align: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.auth-card .auth-switch a { color: var(--champagne-light); border-bottom: 1px solid currentColor; }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 16px; border-radius: var(--radius); border: 1px solid rgba(246,239,224,.3);
  background: #fff; color: #1f1f1f; font: 600 14px var(--sans); transition: box-shadow .2s, transform .2s;
}
.btn-google:hover { box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translateY(-1px); }
.btn-google:active { transform: scale(.98); }
.btn-google:disabled { opacity: .6; pointer-events: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 900px) { .auth-panel { padding-top: 0; } .auth-visual-copy { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .auth-visual img { animation: none; }
  .auth-embers { display: none; }
  .auth-card, .auth-card * { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* ===================== FAQ ACCORDION — fix native marker showing twice ===================== */
.faq-list details { border-top: 1px solid var(--line-dark); padding: 18px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line-dark); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; font: 400 19px var(--serif); color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ''; }
.faq-list summary span { flex-shrink: 0; font: 300 22px/1 var(--sans); color: #9a7a4a; transition: transform .25s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 12px 0 0; color: #81796f; font-size: 13px; max-width: 620px; }

/* ===================== ACCOUNT PAGE — nicer signed-out state ===================== */
.account-card { text-align: center; }
.account-card .account-perks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; color: #81796f; font-size: 13px; }
.account-card .account-perks li { display: flex; align-items: center; justify-content: center; gap: 9px; }
.account-card .account-perks svg { color: #9a7a4a; flex-shrink: 0; }
.account-status { text-align: center; }

/* ===================== GENDER SECTION — heading spacing ===================== */
.gender-section .section-heading { margin-bottom: 34px; }

/* ===================== ADMIN: tables, modals, badges, kpis (Phase: full admin parity) ===================== */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th { padding: 10px 12px; text-align: left; color: #81796f; font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line-dark); white-space: nowrap; }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line-dark); vertical-align: top; color: var(--ink); }
.admin-table select, .admin-table input { min-height: 34px; padding: 0 8px; border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); font: 11px var(--sans); }
.row-btn { border: 0; border-bottom: 1px solid currentColor; background: none; color: #6b4a18; padding: 0 0 2px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.row-btn:hover, .row-btn:focus-visible { color: var(--ink); }

/* On phones, every admin table becomes a stack of labeled cards instead of
   a table that gets clipped off the right edge of the screen — no more
   swiping sideways to find the Customer/Status columns. Cells that opt in
   with a data-label="…" attribute (see adminOrdersTab, etc. in main.js)
   show that label to their left, like "Customer: Harsh rolan". Cells that
   are just an icon/button (class="td-plain") stay a plain left-aligned
   block instead. This only kicks in below 760px — desktop admins still see
   a normal table. */
@media (max-width: 760px) {
  .admin-table-wrap { overflow-x: visible; }
  .admin-table, .admin-table tbody, .admin-table tr { display: block; width: 100%; }
  .admin-table thead { display: none; }
  .admin-table tr { margin-bottom: 14px; border: 1px solid var(--line-dark); background: var(--paper); }
  .admin-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; }
  .admin-table tr:last-child td:last-child { border-bottom: 0; }
  .admin-table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; text-align: left; color: #81796f; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
  .admin-table td.td-plain { display: block; text-align: left; border-bottom: 0; }
  .admin-table td.td-plain:empty { display: none; }
  .admin-table select { width: 100%; max-width: 170px; }
  .admin-detail-row { background: var(--ivory); }
  .admin-detail-row td.td-plain { padding: 4px 12px 16px; }
}
.row-btn.danger { color: #b23c2e; }
.row-sub { color: #81796f; font-size: 10.5px; }
.thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 2px; background: #ded8ce; }
.status-badge { display: inline-block; padding: 3px 8px; border: 1px solid var(--line-dark); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.status-badge.active, .status-badge.delivered, .status-badge.confirmed { border-color: #4a7a4a; color: #4a7a4a; }
.status-badge.blocked, .status-badge.cancelled { border-color: #b23c2e; color: #b23c2e; }
.status-badge.pending, .status-badge.shipped { border-color: var(--champagne); color: #9a7a4a; }
.admin-search { margin-bottom: 16px; }
.admin-search input, .admin-search-input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); font: 13px var(--sans); }
.admin-empty { padding: 40px 0; color: #81796f; text-align: center; }
.admin-detail-row td { background: var(--paper); }
.admin-order-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 14px; font-size: 12.5px; line-height: 1.7; }
.content-note { padding: 14px 16px; margin-bottom: 18px; background: var(--paper); color: #4d473f; font-size: 12.5px; line-height: 1.7; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.content-card { padding: 18px; background: var(--paper); }
.content-card h3 { margin: 0 0 14px; font: 20px var(--serif); font-weight: 400; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label:first-child, .field > label { color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.field input, .field select, .field textarea { min-height: 42px; padding: 0 12px; border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); font: 13px var(--sans); }
.field textarea { min-height: 80px; padding: 10px 12px; resize: vertical; }
.field-hint { color: #81796f; font-size: 11px; line-height: 1.6; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font: 13px var(--sans); color: var(--ink); }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.6); }
.modal { position: relative; width: min(520px, 100%); max-height: 88dvh; overflow: auto; padding: 32px 24px 24px; background: var(--ivory); color: var(--ink); }
.modal h3 { margin: 0 0 18px; font: 26px var(--serif); font-weight: 400; }
.modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: #81796f; }
.modal-actions { display: flex; gap: 12px; margin-top: 6px; }
.modal-actions .button.danger { border-color: #b23c2e; color: #b23c2e; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi-card { padding: 18px; background: var(--paper); }
.kpi-card .label { color: #81796f; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.kpi-card .val { font: 30px var(--serif); font-weight: 400; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-col .bar { width: 100%; background: var(--champagne); min-height: 3px; }
.bar-col .bar-label { margin-top: 6px; color: #81796f; font-size: 8px; writing-mode: vertical-rl; transform: rotate(180deg); }
.hb-list { display: grid; gap: 10px; }
.hb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px; background: var(--paper); }
.hb-row.is-hidden { opacity: .55; }
.hb-move { display: flex; flex-direction: column; gap: 2px; }
.hb-move button { border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); width: 26px; height: 22px; font-size: 11px; }
.hb-move button:disabled { opacity: .3; }
.hb-label { font: 15px var(--serif); }
.hb-hint { color: #81796f; font-size: 11px; }
.hb-toggle { display: flex; align-items: center; gap: 8px; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #81796f; cursor: pointer; }
.cust-detail-grid { display: grid; gap: 10px; margin-bottom: 18px; }
.cust-detail-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-dark); font-size: 12.5px; }
.cust-orders-heading { margin: 18px 0 10px; font: 16px var(--serif); font-weight: 400; }
.cust-orders-list { display: grid; gap: 8px; }
.cust-order-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-dark); font-size: 12px; }
.account-order-list { display: grid; gap: 10px; }
.account-order-row { padding: 12px; background: var(--ivory); border: 1px solid var(--line-dark); font-size: 12.5px; }
.account-order-row-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.account-order-row-items { color: #81796f; margin-bottom: 6px; }
.account-order-row-foot { display: flex; justify-content: space-between; color: #81796f; }
@media (max-width: 640px) {
  .content-grid, .kpi-grid { grid-template-columns: 1fr; }
  .admin-order-detail { grid-template-columns: 1fr; }
  .hb-row { grid-template-columns: auto 1fr; }
  .hb-toggle { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
  .best-sellers-carousel-wrap { margin-bottom: 32px; }
  .section-cta { margin-top: 40px; }
}

/* ===================== HOMEPAGE: infinite auto-sliding carousel ===================== */
.best-sellers-carousel-wrap.is-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.carousel-track { display: flex; gap: 17px; width: max-content; padding: 0 28px; animation-name: carousel-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.carousel.is-paused .carousel-track { animation-play-state: paused; }
.carousel-track .product-card { flex: 0 0 auto; width: min(72vw, 270px); }
@keyframes carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .carousel-track { animation: none; } }

/* ---------------------------------------------------------------------
   WhatsApp floating contact button — shown on every page (footer() adds
   it once per route) whenever content.contactPhone is set. Sits bottom-
   left so it never collides with the .toast notification, which lives
   bottom-right.
--------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed; left: 18px; bottom: 18px; z-index: 35;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  transform: scale(1.08); box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .whatsapp-float { width: 48px; height: 48px; left: 14px; bottom: 14px; }
}

/* ---------------------------------------------------------------------
   Checkout: manual payment method chooser (Pay on Delivery / Pay by UPI).
   Pure-CSS toggle — no JS needed. Markup order in checkoutPage() is:
   input#pm-cod, label[for=pm-cod], input#pm-upi, label[for=pm-upi],
   div.upi-panel — all direct children of .payment-method, so the
   :checked ~ sibling selectors below can reach across them.
--------------------------------------------------------------------- */
.payment-method { grid-column: 1 / -1; margin: 4px 0 20px; padding: 16px 18px; border: 1px solid var(--line-dark); background: var(--paper); }
.payment-method-label { display: block; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #81796f; margin-bottom: 12px; }
.payment-method input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.payment-method label[for] { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 4px 0; cursor: pointer; font: 13px var(--sans); }
.payment-method label[for]::before { content: ''; width: 16px; height: 16px; flex: 0 0 auto; border: 1.5px solid var(--line-dark); border-radius: 50%; }
#pm-cod:checked ~ label[for="pm-cod"]::before, #pm-upi:checked ~ label[for="pm-upi"]::before { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 8px var(--ink); }
.payment-method input:focus-visible ~ label[for]::before { outline: 2px solid var(--champagne); outline-offset: 2px; }
.upi-panel { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-dark); }
#pm-upi:checked ~ .upi-panel { display: block; }
.upi-panel p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

/* Plain-language help box in the admin product form, explaining how to
   get an image link since there's no built-in image upload/storage. */
.admin-help-box { padding: 14px 16px; border: 1px dashed var(--line-dark); background: var(--paper); font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.admin-help-box strong { display: block; margin-bottom: 6px; }
.admin-help-box ol { margin: 0 0 8px; padding-left: 20px; }
.admin-help-box li { margin-bottom: 3px; }
.admin-help-box p { margin: 0; color: #6b6355; }
.admin-help-box a { color: #6b4a18; }

/* ---------------------------------------------------------------------
   Print invoice — the "Print invoice" button on order-confirmed and
   order-detail pages calls window.print(). This hides everything on the
   page except the #invoice-print-area wrapper (site header, footer,
   WhatsApp button, and anything marked .no-print), so the printed page
   — or "Save as PDF" from the browser's print dialog — looks like a
   clean receipt instead of a screenshot of the whole website.
--------------------------------------------------------------------- */
@media print {
  body * { visibility: hidden; }
  #invoice-print-area, #invoice-print-area * { visibility: visible; }
  #invoice-print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 10px 0; }
  .no-print, .whatsapp-float { display: none !important; }
  #invoice-print-area::before {
    content: "Ahmad Al Musafir — Order Invoice";
    display: block; font: 700 22px var(--serif); margin-bottom: 18px; border-bottom: 2px solid #000; padding-bottom: 10px;
  }
}

/* ---------------------------------------------------------------------
   Owner notification bell — lives in the site header nav (next to the
   "Owner" link) whenever isAdmin is true. Counts are pushed live from
   two Firestore onSnapshot listeners (new pending orders, pending
   cancellation requests) plus the product catalogue's own live listener
   (low stock) — see watchAdminAlerts()/computeLowStock() in main.js.
   No separate push service, no extra Firebase product to enable.
--------------------------------------------------------------------- */
.nav-bell-slot { display: inline-flex; align-items: center; }
.admin-bell-wrap { position: relative; display: inline-flex; }
.admin-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; color: inherit; cursor: pointer; }
.admin-bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #c0392b; color: #fff; font: 700 9px var(--mono);
  display: flex; align-items: center; justify-content: center;
  animation: bell-pulse 1.8s ease-in-out infinite;
}
@keyframes bell-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.admin-bell-panel {
  position: absolute; top: 44px; right: 0; width: 290px; max-width: 82vw; z-index: 55;
  background: var(--ivory); color: var(--ink); border: 1px solid var(--line-dark);
  box-shadow: 0 14px 30px rgba(0,0,0,.25); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: bell-panel-in .18s cubic-bezier(.2,.7,.2,1);
}
@keyframes bell-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.admin-bell-row { text-align: left; padding: 10px 12px; border: 0; border-left: 3px solid transparent; background: none; color: var(--ink); font: 12px var(--sans); line-height: 1.4; cursor: pointer; }
.admin-bell-row:hover, .admin-bell-row:focus-visible { background: var(--paper); }
.admin-bell-info { border-left-color: #4a90d9; }
.admin-bell-warning { border-left-color: #e0a72b; }
.admin-bell-error { border-left-color: #c0392b; }
.admin-bell-panel .admin-empty { padding: 10px 12px; margin: 0; }

/* ---------------------------------------------------------------------
   Order progress tracker — Amazon-style horizontal stepper shown on the
   order-confirmed and order-detail pages. Pure read of order.status;
   no new data. See orderTrackerHtml() in main.js.
--------------------------------------------------------------------- */
.order-tracker { display: flex; align-items: flex-start; margin: 22px 0 30px; padding: 4px 4px 0; }
.tracker-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 72px; }
.tracker-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-dark); background: var(--ivory); color: var(--muted); display: flex; align-items: center; justify-content: center; font: 600 11px var(--mono); flex-shrink: 0; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.tracker-step.is-done .tracker-dot { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.tracker-step.is-current .tracker-dot { border-color: var(--ink); background: var(--ivory); color: var(--ink); box-shadow: 0 0 0 4px rgba(23,22,20,.1); animation: tracker-pulse 1.8s ease-in-out infinite; }
.tracker-label { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.tracker-step.is-done .tracker-label, .tracker-step.is-current .tracker-label { color: var(--ink); font-weight: 600; }
.tracker-line { flex: 1 1 auto; height: 2px; background: var(--line-dark); margin-top: 13px; min-width: 12px; transition: background .3s ease; }
.tracker-line.is-done { background: var(--ink); }
@keyframes tracker-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(23,22,20,.1); } 50% { box-shadow: 0 0 0 7px rgba(23,22,20,.03); } }
.order-tracker-cancelled { display: flex; align-items: center; gap: 8px; padding: 14px 16px; margin: 22px 0 30px; border: 1px solid #c0392b; color: #c0392b; background: rgba(192,57,43,.06); font-size: 13px; }
@media (max-width: 400px) {
  .tracker-step { width: 58px; gap: 6px; }
  .tracker-dot { width: 22px; height: 22px; font-size: 10px; }
  .tracker-label { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) { .tracker-dot.is-current { animation: none; } }

/* ---------------------------------------------------------------------
   Coupon box in the checkout order summary. Applying a code does a real
   Firestore lookup (coupons collection, public read) — no fake/local
   validation. See the coupon-apply/coupon-remove handlers in main.js.
--------------------------------------------------------------------- */
.coupon-box { margin: 2px 0 4px; }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-dark); background: var(--ivory); color: var(--ink); font: 12px var(--sans); text-transform: uppercase; letter-spacing: .03em; }
.coupon-input-row .button.ghost { flex: 0 0 auto; padding: 0 16px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; }
.coupon-applied svg { vertical-align: -2px; color: #2f8f4e; }