/* ============================================================
   PAGE STYLES
   ============================================================ */

/* ---------- Shared page head / breadcrumbs ---------- */
.pagehead { padding-block: var(--sp-10) 0; }
.pagehead h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 10px 0 8px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs span { color: var(--ink-700); font-weight: 500; }
.inline-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Category tone backgrounds */
.tone-forest { --tone: var(--forest-500); --tone-tint: var(--forest-100); }
.tone-lime { --tone: #5B8C3A; --tone-tint: #EAF3DD; }
.tone-amber { --tone: #C98A32; --tone-tint: #FDF4E4; }
.tone-clay { --tone: #C56A45; --tone-tint: #F7E7DF; }
.tone-moss { --tone: #586E3A; --tone-tint: #E9EEDD; }
.tone-plum { --tone: #7A5476; --tone-tint: #EEE4EC; }
.tone-rose { --tone: #C57389; --tone-tint: #F6E6EA; }
.tone-honey { --tone: #D9A441; --tone-tint: #FBF1DD; }
.tone-teal { --tone: #2E7D74; --tone-tint: #DDEEEB; }
.tone-sky { --tone: #4E82A8; --tone-tint: #E1ECF3; }

/* ---------- Category grid (home) ---------- */
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.catcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.catcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.catcard__art { position: relative; overflow: hidden; }
.catcard__art .pimg { aspect-ratio: 16 / 10; background: var(--tone-tint); }
.catcard__art .pimg svg { transition: transform var(--t-slow) var(--ease); }
.catcard:hover .catcard__art .pimg svg { transform: scale(1.05); }
.catcard__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.catcard__body h3 { font-size: var(--text-xl); }
.catcard__body p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 4px 0 12px; }
.catcard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tone); font-size: var(--text-sm); transition: gap var(--t) var(--ease); }
.catcard:hover .catcard__go { gap: 11px; }
@media (max-width: 900px) { .catgrid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }
@media (max-width: 520px) { .catgrid { grid-template-columns: 1fr 1fr; } .catcard__body { padding: var(--sp-4); } .catcard__body h3 { font-size: var(--text-md); } }

/* ---------- Promo split ---------- */
.promo { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-12); align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden; padding: var(--sp-8); }
.promo--reverse { grid-template-columns: 1.05fr 1fr; }
.promo--reverse .promo__media { order: 2; }
.promo__media { border-radius: var(--r-lg); overflow: hidden; background: var(--cream); }
.promo__media .pimg { aspect-ratio: 4 / 3.4; }
.promo__copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 10px 0 14px; }
.promo__copy > p { color: var(--ink-700); max-width: 48ch; margin-bottom: var(--sp-5); }
.promo__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-6); }
.promo__list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.promo__list svg { color: var(--color-success); flex-shrink: 0; }
.promo__mini { display: flex; gap: 12px; margin-bottom: var(--sp-6); }
.promo__minicard { flex: 1; max-width: 160px; }
.promo__minicard .pimg { border-radius: var(--r-md); aspect-ratio: 1; margin-bottom: 6px; box-shadow: var(--shadow-xs); }
.promo__minicard span { font-size: var(--text-xs); font-weight: 600; color: var(--ink-700); }
@media (max-width: 860px) {
  .promo, .promo--reverse { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-5); }
  .promo--reverse .promo__media { order: 0; }
}

/* ---------- CTA banner ---------- */
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); background: linear-gradient(120deg, var(--forest-700), var(--forest-800)); color: #fff; border-radius: var(--r-xl); padding: var(--sp-12); position: relative; overflow: hidden; }
.cta-banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(232,176,75,0.28), transparent 70%); }
.cta-banner__text { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 8px; max-width: 24ch; }
.cta-banner p { color: rgba(251,248,241,0.82); }
.cta-banner .btn { position: relative; z-index: 1; flex-shrink: 0; }
@media (max-width: 760px) { .cta-banner { flex-direction: column; align-items: flex-start; padding: var(--sp-8); } }

/* ---------- Reviews (home) ---------- */
.reviews { background: var(--cream); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.review { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--ink-900); }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review__avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--forest-600); color: var(--forest-50); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex-shrink: 0; }
.review figcaption strong { display: block; font-size: var(--text-sm); }
.review figcaption em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- Newsletter ---------- */
.nl__card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--forest-700), var(--forest-900)); border-radius: var(--r-xl); padding: var(--sp-16); }
.nl__deco { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 340px; opacity: 0.9; pointer-events: none; }
.nl__body { position: relative; z-index: 1; max-width: 560px; }
.nl__form { display: flex; gap: 12px; margin-top: var(--sp-6); }
.nl__input { flex: 1; }
.nl__input .input { background: rgba(251,248,241,0.95); border: none; }
.nl__done { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--sp-6); color: #fff; font-weight: 500; background: rgba(251,248,241,0.1); padding: 14px 18px; border-radius: var(--r-md); }
@media (max-width: 640px) { .nl__card { padding: var(--sp-8); } .nl__form { flex-direction: column; } .nl__deco { opacity: 0.4; } }

/* ============================================================
   PRODUCT BROWSER (Shop / Category)
   ============================================================ */
.browser { display: grid; grid-template-columns: 264px 1fr; gap: var(--sp-8); align-items: start; }
.browser__aside { position: sticky; top: calc(76px + var(--sp-4)); }
.filters { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.filters__clear { font-size: var(--text-sm); color: var(--color-sale); font-weight: 600; }
.filters__group { padding-block: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.filters__group:last-child { border-bottom: none; }
.filters__title { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: 12px; }
.filters__opts { display: flex; flex-direction: column; gap: 10px; }
.filters__range-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--text-sm); color: var(--color-text-muted); }
.filters__range-lbl strong { color: var(--color-text); }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 20px; height: 20px; border: 1.6px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: transparent; transition: all var(--t) var(--ease); flex-shrink: 0; }
.check input:checked + .check__box { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.check input:focus-visible + .check__box { box-shadow: var(--shadow-focus); }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--line); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 999px; background: var(--color-primary); cursor: pointer; border: 3px solid var(--paper); box-shadow: var(--shadow-sm); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--color-primary); cursor: pointer; border: 3px solid var(--paper); }

.browser__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.browser__count { font-size: var(--text-base); color: var(--color-text-muted); }
.browser__count strong { color: var(--color-text); }
.browser__tools { display: flex; align-items: center; gap: 10px; }
.sortsel { display: inline-flex; align-items: center; gap: 8px; position: relative; font-size: var(--text-sm); color: var(--color-text-muted); }
.sortsel .select { appearance: none; padding: 10px 34px 10px 14px; border-radius: var(--r-pill); background: var(--paper); font-weight: 600; color: var(--color-text); cursor: pointer; }
.sortsel svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-500); }

/* Mobile filter drawer */
.fdrawer { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.fdrawer__panel { position: absolute; bottom: 0; left: 0; right: 0; max-height: 88vh; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; }
.fdrawer.open { pointer-events: auto; }
.fdrawer.open .drawer__scrim { opacity: 1; }
.fdrawer.open .fdrawer__panel { transform: none; }
.fdrawer__scroll { overflow-y: auto; padding: 0 var(--sp-4); }
.fdrawer__scroll .filters { border: none; padding: 0; }
.fdrawer__foot { display: flex; gap: 12px; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
.fdrawer__foot .btn:last-child { flex: 1; }

@media (max-width: 900px) { .browser { grid-template-columns: 1fr; } }

/* ---------- Category hero ---------- */
.cathero { background: linear-gradient(160deg, var(--tone-tint), var(--ivory)); border-bottom: 1px solid var(--line-soft); }
.cathero__in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); padding-block: var(--sp-10) var(--sp-12); }
.cathero__title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 8px 0 12px; }
.cathero__blurb { color: var(--ink-700); max-width: 52ch; font-size: var(--text-lg); }
.cathero__count { display: inline-block; margin-top: 14px; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.cathero__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 380px; justify-content: flex-end; }
@media (max-width: 860px) { .cathero__in { flex-direction: column; align-items: flex-start; gap: var(--sp-5); } .cathero__chips { justify-content: flex-start; } }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-12); padding-block: var(--sp-6) var(--sp-10); align-items: start; }
.pdp__gallery { position: sticky; top: calc(76px + var(--sp-4)); display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.pdp__gallery--single { grid-template-columns: minmax(0, 1fr); }
.pdp__gallery--single .pdp__main { order: 1; }
.pdp__main { position: relative; order: 2; border-radius: var(--r-xl); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-sm); }
.pdp__main .pimg { aspect-ratio: 1; }
.pdp__frame-fade { animation: pdpFrameIn 550ms var(--ease-luxury); }
@keyframes pdpFrameIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.pdp__wish { top: 16px; right: 16px; width: 46px; height: 46px; }
.pdp__thumbs { order: 1; display: flex; flex-direction: column; gap: 10px; }
.pdp__thumb { border: 2px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t) var(--ease); }
.pdp__thumb .pimg { aspect-ratio: 1; }
.pdp__thumb.active { border-color: var(--color-primary); }
/* Mobile swipe: keep vertical scrolling, capture horizontal drags for the gallery. */
.pdp__main { touch-action: pan-y; }
/* Swipe dot indicators — shown on mobile only (desktop uses the thumb rail). */
.pdp__dots { display: none; }
@media (max-width: 900px) {
  .pdp__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
  .pdp__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(20, 38, 28, 0.28); border: none; padding: 0; cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
  .pdp__dot.active { background: var(--color-primary); transform: scale(1.25); }
}

.pdp__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 8px 0 12px; }
.pdp__rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pdp__reviewlink { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pdp__lead { font-size: var(--text-lg); color: var(--ink-700); line-height: 1.6; margin-bottom: var(--sp-5); }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.pdp__block { margin-bottom: var(--sp-5); }
.pdp__stock { margin-bottom: var(--sp-4); }
.pdp__buy { display: flex; gap: 12px; margin-bottom: 10px; }
.pdp__addbtn { transition: transform var(--t) var(--ease-luxury), background var(--t-slow) var(--ease-soft), box-shadow var(--t) var(--ease-luxury); }
.pdp__addbtn.is-added { background: var(--color-success); }
.pdp__buynow { margin-bottom: var(--sp-6); }
.pdp__assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: var(--sp-4); background: var(--forest-50); border-radius: var(--r-md); margin-bottom: var(--sp-5); }
.pdp__assure-item { display: flex; align-items: center; gap: 10px; }
.pdp__assure-item svg { color: var(--forest-600); flex-shrink: 0; }
.pdp__assure-item strong { display: block; font-size: var(--text-sm); }
.pdp__assure-item em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.pdp__deliver { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--ink-700); margin-bottom: var(--sp-6); }
.pdp__deliver svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 2px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; text-align: left; }
.accordion__head svg { color: var(--color-primary); flex-shrink: 0; }
.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.accordion__item.open .accordion__body { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; padding-bottom: 4px; }
.accordion__item.open .accordion__inner { padding-bottom: 20px; }
.ticklist { display: flex; flex-direction: column; gap: 10px; }
.ticklist li { display: flex; align-items: flex-start; gap: 10px; }
.ticklist svg { color: var(--color-success); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp__gallery { position: static; grid-template-columns: 1fr; }
  .pdp__main { order: 0; }
  .pdp__thumbs { order: 1; flex-direction: row; overflow-x: auto; }
  .pdp__thumb { width: 74px; flex-shrink: 0; }
  .pdp__assure { grid-template-columns: 1fr; gap: 12px; }
}

/* Frequently bought together */
.fbt { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-8); align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: var(--sp-8); }
.fbt__items { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.fbt__item { width: 130px; text-align: center; }
.fbt__item .pimg { border-radius: var(--r-md); aspect-ratio: 1; margin-bottom: 8px; box-shadow: var(--shadow-xs); }
.fbt__name { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.fbt__price { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.fbt__plus { color: var(--ink-400); }
.fbt__buy { text-align: center; padding: var(--sp-5); background: var(--forest-50); border-radius: var(--r-lg); }
.fbt__buy .muted { font-size: var(--text-sm); }
.fbt__total { display: block; font-size: var(--text-2xl); margin: 4px 0 14px; }
@media (max-width: 760px) { .fbt { grid-template-columns: 1fr; } .fbt__items { justify-content: center; } }

/* Reviews block (PDP) */
.reviews-block { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-10); }
.reviews-block__summary { position: sticky; top: 100px; align-self: start; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; }
.reviews-block__score { font-size: 3.4rem; line-height: 1; color: var(--color-primary); }
.reviews-block__bars { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 8px; }
.rbar { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--color-text-muted); }
.rbar span { width: 22px; text-align: right; }
.rbar__track { flex: 1; height: 7px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.rbar__fill { height: 100%; background: var(--color-star); border-radius: 999px; }
.rbar em { width: 32px; text-align: right; font-style: normal; }
.reviews-block__list { display: flex; flex-direction: column; gap: var(--sp-5); }
.rev { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--paper); }
.rev__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rev__top strong { font-size: var(--text-sm); }
.rev__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-success); margin-left: 8px; }
.rev__date { margin-left: auto; font-size: var(--text-xs); }
.rev__title { font-size: var(--text-md); margin: 8px 0 6px; }
@media (max-width: 760px) { .reviews-block { grid-template-columns: 1fr; } .reviews-block__summary { position: static; } }

/* Sticky mobile buy bar */
.buybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 96; display: none; align-items: center; gap: 10px; padding: 12px var(--sp-4) calc(12px + env(safe-area-inset-bottom)); background: rgba(251,248,241,0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .buybar { display: flex; } .page-main { padding-bottom: 0; } .buybar ~ * {} }
.buybar__price { flex: 1; }
.buybar .btn { flex-shrink: 0; }
@media (max-width: 900px) { body:has(.buybar) .tabbar { display: none; } }

/* ---------- QuickView ---------- */
.qv__grid { display: grid; grid-template-columns: 1fr 1fr; }
.qv__media { background: var(--cream); }
.qv__media .pimg { aspect-ratio: 1; height: 100%; }
.qv__info { padding: var(--sp-8); overflow-y: auto; max-height: 90vh; }
.qv__actions { display: flex; gap: 10px; margin: var(--sp-5) 0; }
.qv__benefits { display: flex; flex-direction: column; gap: 8px; margin: var(--sp-4) 0; }
.qv__benefits li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.qv__benefits svg { color: var(--color-success); }
@media (max-width: 720px) { .qv__grid { grid-template-columns: 1fr; } .qv__media .pimg { aspect-ratio: 16/10; } .qv__info { padding: var(--sp-5); } }

/* ============================================================
   CART
   ============================================================ */
.cartlayout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-8); align-items: start; }
.cartlist { display: flex; flex-direction: column; gap: var(--sp-4); }
.cartrow { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-4); }
.cartrow__media { border-radius: var(--r-md); overflow: hidden; background: var(--cream); }
.cartrow__media .pimg { aspect-ratio: 1; }
.cartrow__top { display: flex; justify-content: space-between; gap: 12px; }
.cartrow__name { display: block; font-size: var(--text-md); font-weight: 600; }
.cartrow__name:hover { color: var(--color-primary); }
.cartrow__variant { display: inline-block; margin-top: 4px; font-size: var(--text-xs); background: var(--forest-50); color: var(--forest-700); padding: 3px 9px; border-radius: 999px; }
.cartrow__form { display: block; font-size: var(--text-xs); margin-top: 4px; }
.cartrow__price { text-align: right; font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.cartrow__price s { display: block; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-400); font-weight: 400; }
.cartrow__actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap; }
.qty--sm button { width: 34px; height: 36px; }
.qty--sm span { min-width: 32px; }
/* Touch devices: keep the compact stepper visually small but give it a
   comfortable ~44px tap target. */
@media (hover: none), (max-width: 640px) {
  .qty--sm button { width: 44px; height: 44px; }
  .qty--sm span { min-width: 36px; }
}
.linkbtn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: color var(--t) var(--ease); }
.linkbtn:hover { color: var(--color-primary); }
.linkbtn--danger:hover { color: var(--color-sale); }

.summary { position: sticky; top: 100px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-6); }
.summary h3 { font-size: var(--text-xl); margin-bottom: var(--sp-5); }
.summary__coupon { display: flex; gap: 8px; margin-bottom: 10px; }
.summary__applied { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-success); font-weight: 600; margin-bottom: 10px; }
.summary__lines { display: flex; flex-direction: column; gap: 12px; padding-block: var(--sp-5); border-top: 1px solid var(--line-soft); margin-top: var(--sp-4); }
.summary__lines > div { display: flex; justify-content: space-between; font-size: var(--text-base); }
.summary__lines dt { color: var(--color-text-muted); }
.summary__lines dd { font-weight: 600; }
.summary__lines .is-save dd { color: var(--color-success); }
.free { color: var(--color-success); font-weight: 700; }
.summary__ship-hint { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--honey-700); background: var(--honey-100); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--sp-4); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--sp-4); border-top: 2px solid var(--forest-700); margin-bottom: var(--sp-5); }
.summary__total span:first-child { font-weight: 600; font-size: var(--text-lg); }
.summary__total span:last-child { font-size: var(--text-2xl); color: var(--color-primary); }
.summary__continue { display: block; text-align: center; margin-top: 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
.summary__continue:hover { color: var(--color-primary); }
.summary__badges { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.summary__badges span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--color-text-muted); }

.savedlist__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.savedcard { display: grid; grid-template-columns: 88px 1fr; gap: 14px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; }
.savedcard__media { border-radius: var(--r-sm); overflow: hidden; }
.savedcard__media .pimg { aspect-ratio: 1; }
.savedcard__name { font-weight: 600; font-size: var(--text-sm); }
.savedcard__body { display: flex; flex-direction: column; gap: 6px; }
.savedcard__actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }

@media (max-width: 900px) {
  .cartlayout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .savedlist__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cartrow { grid-template-columns: 92px 1fr; }
  .cartrow__actions { gap: 12px; }
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout { background: var(--ivory); min-height: 100vh; }
.checkout__bar { border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.checkout__bar-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.checkout__secure { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-success); font-weight: 600; }
.checkout__grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--sp-10); padding-block: var(--sp-10); align-items: start; }
.checkout__main { max-width: 640px; }

.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-8); }
.stepper__item { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: var(--text-sm); font-weight: 600; }
.stepper__item:not(:last-child)::after { content: ''; width: 24px; height: 1.5px; background: var(--line); margin-left: 4px; }
.stepper__num { width: 26px; height: 26px; border-radius: 999px; background: var(--sand); display: grid; place-items: center; font-size: var(--text-xs); }
.stepper__item.active { color: var(--color-primary); }
.stepper__item.active .stepper__num { background: var(--color-primary); color: #fff; }
.stepper__item.done .stepper__num { background: var(--color-success); color: #fff; }
.stepper__lbl { display: none; }
@media (min-width: 560px) { .stepper__lbl { display: inline; } }

.cform { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.cform h2 { font-size: var(--text-2xl); }
.cform > .muted { margin-top: -8px; }
.cform .btn { align-self: flex-start; margin-top: 8px; }
.cform__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cform__nav .btn { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } .cform { padding: var(--sp-5); } }

.optlist { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.opt:hover { border-color: var(--forest-300); }
.opt.active { border-color: var(--color-primary); background: var(--forest-50); }
.opt input { position: absolute; opacity: 0; }
.opt__radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--line); flex-shrink: 0; position: relative; transition: border-color var(--t) var(--ease); }
.opt.active .opt__radio { border-color: var(--color-primary); }
.opt.active .opt__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--color-primary); }
.opt__body { flex: 1; }
.opt__body strong { display: block; font-size: var(--text-base); }
.opt__body em { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }
.opt__price { font-weight: 600; }
.opt svg { color: var(--forest-600); }
.paycard { margin-top: 6px; padding: var(--sp-5); background: var(--forest-50); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Payment failure / cancellation states — calm and premium, never alarming */
.paystate { margin-top: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); }
.paystate strong { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: 6px; }
.paystate p { font-size: var(--text-sm); margin-bottom: 4px; }
.paystate--error { border-color: var(--clay-500); background: var(--clay-100); }
.paystate--error strong { color: var(--clay-600); }
.paystate--notice { border-color: var(--honey-300); background: var(--honey-100); }
.paystate--notice strong { color: var(--honey-700); }
.paystate__actions { display: flex; gap: 10px; margin-top: var(--sp-4); flex-wrap: wrap; }
/* Inline spinner inside the Pay button */
.btn .spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,0.35); border-top-color: currentColor; }

.checkout__aside .summary { top: var(--sp-6); }
.checkout__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--sp-4); max-height: 320px; overflow-y: auto; }
.checkout__item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.checkout__thumb { position: relative; width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden; }
.checkout__thumb .pimg { aspect-ratio: 1; }
.checkout__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; background: var(--forest-700); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-style: normal; border: 2px solid var(--paper); }
.checkout__meta strong { display: block; font-size: var(--text-sm); line-height: 1.3; }
.checkout__meta em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.checkout__lp { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: 1fr; } .checkout__aside { order: -1; } .checkout__aside .summary { position: static; } }

/* Order confirmation */
.confirm { max-width: 560px; margin: 0 auto; text-align: center; padding-block: var(--sp-10); }

/* ---- Order-confirmed celebration ----------------------------------
   Timeline (all CSS, transform/opacity only):
     0ms   container settles in
     100ms success icon scales up
     ~250ms checkmark finishes drawing
     300ms glow + particle burst
     400ms "Order confirmed"
     550ms headline / supporting copy
     700ms action buttons
     ~1.9s celebration finishes and particle DOM unmounts
   The container's own entrance is defined on .confirm__enter below. */
/* SAFETY: the confirmation content — including the CTAs — is fully
   visible and interactive by DEFAULT. The entrance animations only apply
   while the parent carries .confirm--celebrate, which is added on mount
   and removed once the sequence finishes. So if animations are disabled,
   stalled or unsupported for any reason, the user still sees a complete,
   clickable confirmation instead of a blank screen. Order confirmation is
   too important to gate behind an animation completing. */
.confirm--celebrate.confirm__enter { animation: confirmIn 760ms var(--ease-luxury) both; }
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Staggered reveal for the confirmation content; each element sets --d */
.confirm--celebrate .confirm__reveal { animation: confirmReveal 700ms var(--ease-luxury) both; animation-delay: var(--d, 0ms); }
@keyframes confirmReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.confirm--celebrate .confirm__reveal--btn { animation-name: confirmRevealBtn; }
@keyframes confirmRevealBtn {
  from { opacity: 0; transform: translateY(15px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.confirm__celebrate { position: relative; width: 84px; height: 84px; margin: 0 auto var(--sp-5); }

.confirm__tick {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 999px;
  background: var(--color-success); color: #fff;
  display: grid; place-items: center;
}
.confirm--celebrate .confirm__tick { animation: tickIn 620ms var(--ease-luxury) 100ms both; }
/* 0.5 -> 1.08 -> 1: a soft settle, never an excessive bounce */
@keyframes tickIn {
  0%   { opacity: 0; transform: scale(0.5); }
  55%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Checkmark draws itself (default state: already drawn) */
.confirm__check-path { stroke-dasharray: 44; stroke-dashoffset: 0; }
.confirm--celebrate .confirm__check-path { animation: checkDraw 420ms var(--ease-luxury) 180ms both; }
@keyframes checkDraw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

/* Ring expands and settles around the icon (default: settled) */
.confirm__ring {
  position: absolute; inset: -6px; z-index: 1; border-radius: 999px;
  border: 2px solid var(--forest-300); opacity: 0.45;
}
.confirm--celebrate .confirm__ring { animation: ringIn 760ms var(--ease-luxury) 140ms both; }
@keyframes ringIn {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0.45; transform: scale(1); }
}

/* Warm radial glow — subtle, expands then fades away entirely */
.confirm__glow {
  position: absolute; inset: -46px; z-index: 0; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(232,176,75,0.42) 0%, rgba(232,176,75,0.16) 42%, rgba(232,176,75,0) 70%);
  opacity: 0; /* purely decorative: ends invisible, so default is invisible */
}
.confirm--celebrate .confirm__glow { animation: glowPulse 1500ms var(--ease-luxury) 300ms both; }
@keyframes glowPulse {
  0%   { opacity: 0; transform: scale(0.7); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ---- Particles ---- */
.confirm__particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.confirm__p {
  position: absolute; top: 50%; left: 50%; width: var(--sz); height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  opacity: 0; will-change: transform, opacity;
  animation: particleBurst 1200ms var(--ease-luxury) both;
}
.confirm__p--dot { border-radius: 999px; }
.confirm__p--leaf { border-radius: 60% 0 60% 0; }
.confirm__p--spark { border-radius: 1px; transform: rotate(45deg); }
.confirm__p.tone-gold { background: var(--honey-500); }
.confirm__p.tone-gold-soft { background: var(--honey-300); }
.confirm__p.tone-green { background: var(--forest-400); }
.confirm__p.tone-green-soft { background: var(--forest-300); }
.confirm__p.tone-cream { background: var(--cream); }

@keyframes particleBurst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  22%  { opacity: 1; transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.6); }
}

/* Ambient upward drift, finishes and stops (no infinite loop) */
.confirm__p--drift { animation: particleDrift 1500ms var(--ease-luxury) both; }
@keyframes particleDrift {
  0%   { opacity: 0; transform: translate(var(--tx), 10px) scale(0.6); }
  30%  { opacity: 0.9; transform: translate(var(--tx), -18px) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), -64px) scale(0.7); }
}

@media (max-width: 640px) {
  .confirm__glow { inset: -30px; }
}
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.confirm h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0; }
.confirm__card { text-align: left; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); margin: var(--sp-6) 0; }
.confirm__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.confirm__row:last-child { border-bottom: none; }
.confirm__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   ACCOUNT + AUTH
   ============================================================ */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 116px); }
.auth__art { background: linear-gradient(150deg, var(--forest-700), var(--forest-900)); display: grid; place-items: center; padding: var(--sp-16); position: relative; overflow: hidden; }
.auth__art::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(232,176,75,0.22), transparent 70%); }
.auth__art-in { max-width: 400px; position: relative; z-index: 1; }
.auth__perks { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 12px; }
.auth__perks li { display: flex; align-items: center; gap: 10px; color: rgba(251,248,241,0.9); }
.auth__perks svg { color: var(--honey-400); }
.auth__form { display: grid; place-items: center; padding: var(--sp-12) var(--sp-6); }
.auth__card { width: 100%; max-width: 420px; }
.auth__tabs { display: flex; gap: 4px; padding: 5px; background: var(--cream); border-radius: var(--r-pill); margin-bottom: var(--sp-6); }
.auth__tabs button { flex: 1; padding: 11px; border-radius: var(--r-pill); font-weight: 600; color: var(--color-text-muted); transition: all var(--t) var(--ease); }
.auth__tabs button.active { background: var(--paper); color: var(--color-primary); box-shadow: var(--shadow-xs); }
.auth__card form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__forgot { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; align-self: flex-end; margin-top: -8px; }
.auth__or { display: flex; align-items: center; gap: 14px; margin: var(--sp-5) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth__social { display: flex; flex-direction: column; gap: 10px; }

/* Social sign-in button. Neutral white surface with a real border, so the
   provider mark carries the recognition rather than a coloured fill — what
   Google's brand guidance asks for, and it keeps the card calm next to the
   primary CTA. */
.btn-social {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 18px;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-weight: 600; font-size: var(--text-sm); line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-social:hover:not(:disabled) {
  border-color: var(--forest-300);
  box-shadow: 0 2px 10px rgba(30, 58, 47, .09);
  transform: translateY(-1px);
}
.btn-social:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-social:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-social:disabled { opacity: .55; cursor: not-allowed; }
.btn-social__mark { flex: 0 0 auto; display: block; }

.auth__guest { text-align: center; margin-top: var(--sp-5); }
.auth__guest a { font-weight: 600; color: var(--color-text-muted); }
.auth__guest a:hover { color: var(--color-primary); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } }

.acct { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; }
.acct__nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-3); }
.acct__navitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); font-weight: 500; color: var(--ink-700); text-align: left; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.acct__navitem:hover { background: var(--forest-50); }
.acct__navitem.active { background: var(--forest-700); color: var(--forest-50); }
.acct__badge { margin-left: auto; min-width: 20px; height: 20px; background: var(--honey-500); color: var(--forest-900); border-radius: 999px; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.acct__navitem.active .acct__badge { background: var(--honey-400); }
.acct__logout { margin-top: 6px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--color-sale); }
.acct__logout:hover { background: var(--clay-100); }
.acct__h { font-size: var(--text-2xl); margin-bottom: var(--sp-5); }
.acct__panelhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
@media (max-width: 860px) {
  .acct { grid-template-columns: 1fr; }
  .acct__nav { position: static; flex-direction: row; overflow-x: auto; }
  .acct__navitem { white-space: nowrap; }
  .acct__logout { border-top: none; }
}

.orderlist { display: flex; flex-direction: column; gap: var(--sp-4); }
.ordercard { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.ordercard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.ordercard__body { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.ordercard__thumbs { display: flex; }
.ordercard__thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--paper); margin-left: -12px; box-shadow: var(--shadow-xs); }
.ordercard__thumb:first-child { margin-left: 0; }
.ordercard__thumb .pimg { aspect-ratio: 1; }
.ordercard__meta { display: flex; flex-direction: column; }
.ordercard__meta strong { font-family: var(--font-display); font-size: var(--text-lg); }
.ordercard__actions { margin-left: auto; display: flex; gap: 8px; }
.track { display: flex; justify-content: space-between; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); position: relative; }
.track::before { content: ''; position: absolute; top: calc(var(--sp-5) + 11px); left: 11px; right: 11px; height: 2px; background: var(--line); }
.track__step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; flex: 1; }
.track__dot { width: 24px; height: 24px; border-radius: 999px; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.track__step.done .track__dot { background: var(--color-success); border-color: var(--color-success); }
.track__lbl { font-size: var(--text-xs); text-align: center; color: var(--color-text-muted); }
.track__step.done .track__lbl { color: var(--color-text); font-weight: 600; }
@media (max-width: 560px) { .ordercard__actions { margin-left: 0; width: 100%; } .track__lbl { font-size: 10px; } }

.acct__wishgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.acct__wishcard { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; transition: box-shadow var(--t) var(--ease); }
.acct__wishcard:hover { box-shadow: var(--shadow-md); }
.acct__wishcard .pimg { border-radius: var(--r-sm); aspect-ratio: 1; margin-bottom: 10px; }
.acct__wishname { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: 4px; }
@media (max-width: 640px) { .acct__wishgrid { grid-template-columns: 1fr 1fr; } }

.addrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.addrcard { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.addrcard.default { border-color: var(--forest-300); }
.addrcard .badge { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.addrcard strong { display: block; margin-bottom: 8px; }
.addrcard p { font-size: var(--text-sm); line-height: 1.7; margin-bottom: 14px; }
.addrcard__actions { display: flex; gap: var(--sp-4); }
@media (max-width: 640px) { .addrgrid { grid-template-columns: 1fr; } }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.toggle-row strong { display: block; font-size: var(--text-base); }
.toggle-row em { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }
.switch { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background var(--t) var(--ease); flex-shrink: 0; cursor: pointer; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--ease); }
.switch.on { background: var(--color-success); }
.switch.on i { transform: translateX(20px); }

.wishhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* Auth helper links were 18-21px tall on phones — comfortable tap bands,
   same type and alignment. */
@media (max-width: 900px) {
  .auth__forgot { min-height: 44px; display: inline-flex; align-items: center; margin-top: -14px; }
  .auth__guest a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
}

/* The price slider's hit area was the height of its 5px track, which is
   effectively undraggable on a touch screen. Padding (with the background
   clipped to the content box) keeps the thin track look while giving the
   control a full-height touch band. */
.range {
  box-sizing: content-box;
  padding-block: 19px;
  background-clip: content-box;
}
@media (max-width: 900px) {
  .ftr__legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
}

/* Remaining critical-flow polish (cart / checkout).
   - Struck-through MRP in the cart line was ink-400 (3.68:1); ink-500 clears AA.
   - "Save for later" / "Remove" / "Continue shopping" were 21-23px tall on
     phones — comfortable tap bands without changing the type or alignment. */
.cartrow__price s { color: var(--ink-500); }
@media (max-width: 900px) {
  .linkbtn { min-height: 44px; }
  .summary__continue { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ============================================================
   VARIANT (PACK SIZE) SELECTOR
   A size is a purchase decision, not a tag: each option shows what that
   pack actually costs so the customer compares price per size directly.
   ============================================================ */
.variantlist { display: flex; flex-wrap: wrap; gap: 10px; }
.variantchip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 104px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer; text-align: left;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t-fast) var(--ease-soft), box-shadow var(--t) var(--ease);
}
.variantchip:hover:not(:disabled) { border-color: var(--forest-300); transform: translateY(-1px); }
.variantchip:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.variantchip.active {
  border-color: var(--color-primary);
  background: var(--forest-50);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}
.variantchip__label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.variantchip__price {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--text-sm); font-weight: 700; color: var(--price-now-strong);
}
.variantchip__price s { font-weight: 500; font-size: 0.85em; color: var(--price-mrp); opacity: 0.85; }
.variantchip.is-out { opacity: 0.5; cursor: not-allowed; }
.variantchip__out { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--price-mrp); text-transform: uppercase; }
@media (max-width: 900px) {
  .variantchip { min-height: 56px; flex: 1 1 calc(50% - 5px); }
}

/* ============================================================
   DETAILED PRICE SUMMARY
   Financial transparency without visual noise: quiet label/value rows,
   savings in the price-green, one strong total. Tabular figures so the
   rupee columns align down the right edge.
   ============================================================ */
.psum { display: flex; flex-direction: column; gap: 9px; }
.psum--compact { gap: 7px; }
.psum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--text-sm); }
.psum__label { color: var(--color-text-muted); }
.psum__note { color: var(--ink-400); font-weight: 500; }
.psum__value { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 500; white-space: nowrap; }
.psum__row--save .psum__label,
.psum__row--save .psum__value { color: var(--price-save); font-weight: 600; }
.psum__row.is-strong { font-size: var(--text-md); padding-top: 2px; }
.psum__row.is-strong .psum__label { color: var(--color-text); font-family: var(--font-display); font-weight: 600; }
.psum__row.is-strong .psum__value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-text); }
.psum__rule { height: 1px; background: var(--line); margin: 4px 0 2px; }
.psum__hint { font-size: var(--text-xs); color: var(--ink-500); margin-top: 2px; }
.psum__save {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(95, 138, 99, 0.10); color: var(--price-save);
  font-size: var(--text-sm); font-weight: 600;
}
@media (max-width: 900px) {
  .psum__row { font-size: var(--text-base); }
  .psum__row.is-strong .psum__value { font-size: 1.35rem; }
}
.cartrow__unit { display: block; font-size: var(--text-xs); margin-top: 2px; }
.cartrow__unit s { color: var(--price-mrp); margin-left: 6px; opacity: 0.8; }
.cartrow__price s { color: var(--price-mrp); }
.checkout__unit { display: block; font-size: var(--text-xs); color: var(--ink-500); font-style: normal; margin-top: 1px; }

/* Line prices use the same money language as everywhere else: the amount
   charged in price-green, the struck MRP in the muted red. */
.cartrow__price { color: var(--price-now-strong); }
.checkout__lp { color: var(--price-now-strong); }

/* ============================================================
   CUSTOMER INVOICE / RECEIPT
   Reads as a real tax invoice: quiet paper surface, one strong total,
   money in the same green/red language as the rest of the store.
   ============================================================ */
.inv-page { background: var(--ivory); min-height: 100vh; padding-bottom: var(--sp-12); }

.inv__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); flex-wrap: wrap; }
.inv__back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text-muted); }
.inv__back:hover { color: var(--color-primary); }
.inv__toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.inv {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
  max-width: 860px;
}
.inv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.inv__logo { height: 46px; width: auto; display: block; }
.inv__brand-sub { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; }
.inv__ident { text-align: right; }
.inv__title { font-size: var(--text-2xl); margin-bottom: 8px; }
.inv__idlist { display: flex; flex-direction: column; gap: 3px; }
.inv__idlist > div { display: flex; gap: 10px; justify-content: flex-end; font-size: var(--text-sm); }
.inv__idlist dt { color: var(--color-text-muted); }
.inv__idlist dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv__idlist--wide > div { justify-content: flex-start; gap: 14px; }
.inv__idlist--wide dt { min-width: 132px; }
.inv__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; word-break: break-all; }

.inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding-block: var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.inv__party-h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-bottom: 8px; }
.inv__party p { font-size: var(--text-sm); line-height: 1.55; }
.inv__contact { color: var(--color-text-muted); }

.inv__items { padding-block: var(--sp-6); }
.inv__table { width: 100%; border-collapse: collapse; }
.inv__table th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 700; }
.inv__table th.num, .inv__table td.num { text-align: right; }
.inv__table td { padding-block: 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); vertical-align: top; font-variant-numeric: tabular-nums; }
.inv__item-name { display: block; font-weight: 600; }
.inv__item-variant { display: inline-block; margin-top: 3px; margin-right: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); background: var(--forest-50); border-radius: var(--r-xs); padding: 2px 8px; }
.inv__item-sku { display: inline-block; margin-top: 3px; margin-right: 8px; font-size: 11px; color: var(--ink-500); }
.inv__table s { color: var(--price-mrp); }
.inv__price { color: var(--price-now-strong); font-weight: 600; }
.inv__amount { font-weight: 700; }

.inv__totals { display: flex; justify-content: flex-end; padding-block: var(--sp-5); }
.inv__totals-inner { width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; }
.inv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--text-sm); }
.inv__row-label { color: var(--color-text-muted); }
.inv__row-label em { font-style: normal; color: var(--ink-400); }
.inv__row-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.inv__row--save .inv__row-label, .inv__row--save .inv__row-value { color: var(--price-save); font-weight: 600; }
.inv__row.is-strong .inv__row-label { font-family: var(--font-display); font-weight: 600; color: var(--color-text); font-size: var(--text-md); }
.inv__row.is-strong .inv__row-value { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.inv__rule { height: 1px; background: var(--line); margin: 4px 0 2px; }
.inv__note { font-size: var(--text-xs); color: var(--ink-500); }
.inv__save { margin-top: 6px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(95,138,99,0.10); color: var(--price-save); font-size: var(--text-sm); font-weight: 600; text-align: center; }

.inv__payment { padding-block: var(--sp-6); border-top: 1px solid var(--line-soft); }
.inv__paid { color: var(--price-save); font-weight: 700; }
.inv__due { color: var(--clay-600); font-weight: 700; }
.inv__foot { padding-top: var(--sp-6); border-top: 1px solid var(--line-soft); text-align: center; font-size: var(--text-sm); }
.inv__empty-h { font-size: var(--text-xl); margin-bottom: 8px; }

@media (max-width: 760px) {
  .inv { padding: var(--sp-5); border-radius: var(--r-md); }
  .inv__head { flex-direction: column; }
  .inv__ident { text-align: left; }
  .inv__idlist > div { justify-content: flex-start; }
  .inv__parties { grid-template-columns: 1fr; gap: var(--sp-5); }
  .inv__totals-inner { width: 100%; }
  /* The MRP column is the first thing to sacrifice on a narrow screen —
     the struck price still appears under the item name context. */
  .inv__table th:nth-child(2), .inv__table td:nth-child(2) { display: none; }
  .inv__toolbar-actions { width: 100%; }
  .inv__toolbar-actions .btn { flex: 1; min-height: 44px; }
}

/* Printed / saved-as-PDF invoice: drop the app chrome, keep the document. */
@media print {
  .no-print, .hdr, .annbar, .ftr, .tabbar, .drawer { display: none !important; }
  .inv-page { background: #fff; padding: 0; }
  .inv { border: none; box-shadow: none; max-width: none; padding: 0; }
  .inv__item-variant { background: none; padding: 0; color: var(--color-text); }
  a[href]::after { content: none !important; }
}
/* Order card actions wrap to two comfortable buttons on a phone. */
.ordercard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ordercard__actions { width: 100%; }
  .ordercard__actions .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; justify-content: center; }
}

/* ============================================================
   MOBILE-FIRST PAGE POLISH  (Shop / Cart / Checkout) — reconciled
   ============================================================ */
@media (max-width: 900px) {
  .cartrow__media { align-self: start; }   /* square thumbnail, no stretched blank space */
  .browser__bar { margin-bottom: var(--sp-4); gap: 8px 12px; }
  .browser__count { font-size: var(--text-sm); }
  .browser__tools { gap: 8px; }
}
@media (max-width: 640px) {
  .input, .select, .textarea { font-size: 16px; }   /* stop iOS focus auto-zoom */
  .summary__total span:last-child { font-size: var(--text-xl); }
}

/* Cart: an item that cannot be paid for blocks checkout and says why. */
.summary__blocked {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-sale, #A94F4F);
  border-radius: var(--r-xs, 4px);
  background: color-mix(in srgb, var(--color-sale, #A94F4F) 7%, transparent);
  color: var(--color-sale, #A94F4F);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================================
   ACCOUNT + WISHLIST — alignment with the V2 storefront system
   ----------------------------------------------------------------------------
   These two surfaces were the last customer pages still wearing the original
   design language: pill buttons, 14-20px card radii and a serif page heading,
   sitting one click away from a Shop and a Homepage that are sharp, 2px and
   sans. Nothing below is a new design — every value is an existing --slv2-*
   token, pulled onto the pages that had not caught up.

   Deliberately scoped to .auth / .acct / the wishlist head. Cart, Checkout,
   the Creator Program and Admin share .btn / .input / .state and are NOT part
   of this pass, so their appearance is unchanged.
   ========================================================================== */

/* -- page heading: the same Inter scale as .v2-shop__title and .hd-title --- */
.pagehead .crumbs { font-size: 11px; letter-spacing: .03em; color: var(--slv2-ink-4); margin-bottom: 6px; }
.pagehead .crumbs span { color: var(--slv2-ink-2); font-weight: 600; }
.wishhead h1.serif {
  font-family: var(--slv2-sans);
  font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15;
  margin: 0; color: var(--slv2-ink);
}
.wishhead .muted { margin: 6px 0 0; font-size: 13px; color: var(--slv2-ink-3); }
@media (min-width: 768px) { .wishhead h1.serif { font-size: 34px; } }

/* -- controls: 2px geometry, one control height, one focus ring ------------ */
.auth .btn, .acct .btn, .wishhead .btn {
  border-radius: var(--slv2-r-ui);
  padding: 0 22px; height: 44px; font-size: 13px; letter-spacing: .005em;
  /* the legacy lift-and-shadow hover reads as a different interaction model
     from the flat background change every V2 control uses */
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.auth .btn:hover, .acct .btn:hover, .wishhead .btn:hover { transform: none; box-shadow: none; }
.auth .btn:active, .acct .btn:active, .wishhead .btn:active { transform: scale(.985); }
.auth .btn-sm, .acct .btn-sm { height: 36px; padding: 0 16px; font-size: 12px; }
.auth .input, .auth .select, .acct .input, .acct .select {
  border-radius: var(--slv2-r-ui); border-color: var(--slv2-line);
  min-height: 44px; padding: 11px 14px; font-size: 14px;
}
.auth .textarea, .acct .textarea { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.auth .input:focus, .auth .select:focus, .acct .input:focus, .acct .select:focus,
.acct .textarea:focus, .auth .textarea:focus {
  border-color: var(--slv2-f500); box-shadow: none;
  outline: 2px solid var(--slv2-f500); outline-offset: -1px;
}
.auth :is(button, a):focus-visible, .acct :is(button, a):focus-visible {
  outline: 2px solid var(--slv2-f500); outline-offset: 3px; border-radius: var(--slv2-r-ui);
}

/* -- sign-in / create-account switch: a segmented control, not a pill ------ */
.auth__tabs {
  padding: 0; gap: 0; background: none; border-radius: 0;
  border-bottom: 1px solid var(--slv2-line); margin-bottom: var(--sp-5);
}
.auth__tabs button {
  border-radius: 0; padding: 12px 4px; min-height: 44px;
  font-size: 13px; letter-spacing: .01em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.auth__tabs button.active {
  background: none; box-shadow: none;
  color: var(--slv2-ink); border-bottom-color: var(--slv2-accent-primary);
}

/* -- the form is top-aligned on a phone: vertical centring in a 100vh grid
      pushed the first field a long way down an otherwise empty screen ------ */
.auth__form { padding: var(--sp-8) var(--sp-5) var(--sp-10); }
@media (max-width: 860px) {
  .auth { min-height: 0; }
  .auth__form { align-content: start; padding-top: var(--sp-6); }
}

/* -- account shell: sharp panels instead of 20px cards -------------------- */
.acct__nav { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.acct__navitem { border-radius: var(--slv2-r-ui); font-size: 13.5px; }
.acct__logout { border-radius: 0; }
.acct__h {
  font-family: var(--slv2-sans); font-size: 20px; font-weight: 700;
  letter-spacing: -.018em; color: var(--slv2-ink);
}
.acct__wishcard { border-radius: var(--slv2-r-ui); border-color: var(--slv2-line); }
.acct__wishcard:hover { box-shadow: none; border-color: var(--slv2-ink-4); }
.acct__wishcard .pimg { border-radius: var(--slv2-r-ui); }

/* -- empty states on these two pages: no 76px circle, no pill CTA --------- */
.acct .state, .page-main > .container > .state {
  padding-block: var(--sp-10);
}
.acct .state .state-ic, .page-main > .container > .state .state-ic {
  width: 52px; height: 52px; border-radius: var(--slv2-r-ui);
  background: var(--slv2-f50); color: var(--slv2-f500); margin-bottom: var(--sp-4);
}
.acct .state .state-ic svg, .page-main > .container > .state .state-ic svg { width: 24px; height: 24px; }
.acct .state h3, .page-main > .container > .state h3 {
  font-family: var(--slv2-sans); font-size: 19px; font-weight: 700; letter-spacing: -.015em;
}
.page-main > .container > .state .btn {
  border-radius: var(--slv2-r-ui); height: 44px; padding: 0 22px; font-size: 13px;
}
.page-main > .container > .state .btn:hover { transform: none; box-shadow: none; }
.auth__h1 {
  font-family: var(--slv2-sans);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 var(--sp-4); color: var(--slv2-ink);
}