/* A13 Phase 1: live alignment token reskin (Studio spec DEW_THEORY_A13_LIVE_ALIGNMENT_PHASE1_2026-10-17.md).
   One additive stylesheet, loaded after the live CSS. No markup, copy, prices, routes or photos change.
   Revert: stop loading this file (deploy 544a720d, or rebuild with A13_POLISH=0). */

/* 1. Token remap. :root:root outranks the live :root blocks whatever the load order. */
:root:root{
  --dt-green-50:#F4F2EC;--dt-green-50-rgb:244 242 236;
  --dt-green-100:#F4F2EC;--dt-green-100-rgb:244 242 236;
  --dt-green-200:#EBE8E1;--dt-green-200-rgb:235 232 225;
  --dt-green-300:#C9CFC4;--dt-green-300-rgb:201 207 196;
  --dt-green-400:#95A589;--dt-green-400-rgb:149 165 137;
  --dt-green-700:#344638;--dt-green-700-rgb:52 70 56;
  --dt-green-900:#1A1D19;--dt-green-900-rgb:26 29 25;
  --hairline:#C9CFC4;--hairline-solid:#C9CFC4;--color-border:#C9CFC4;
  --color-border-strong:#5E675C;
  --text-primary:#1A1D19;--text-secondary:#5E675C;--text-tertiary:#344638;--text-eyebrow:#344638;
  --bg-elevated:#EBE8E1;
  /* 2. Shape */
  --dt-radius-pill:0;--dt-radius-sm:2px;--dt-radius-md:12px;--dt-radius-lg:12px;
  --dt-shadow-card:none;--dt-shadow-hover:none;
  /* Decorative circles (ambient orbs, glows, hero shadow/bloom, chip dots) borrowed the pill token through
     --dt-legacy-28. Pin it so they stay round; only buttons/chips go square. */
  --dt-legacy-28:9999px;
  /* Focus ring stays Deep Forest on light grounds (8.9:1 on Paper). */
  --dt-focus:2px solid #344638;
}

/* Border utility: live maps .border-border to green-400 (now Sage, 2.3:1, decorative only). Hairline per spec. */
.border-border{border-color:#C9CFC4}

/* Buttons: square, Deep Forest. Pill buttons that use the literal rounded-full utility are squared too;
   icon circles (no btn-* class) keep 50%. */
.btn-primary,.btn-dew,.btn-promo,a.btn-primary{background:#344638;border-color:#344638;color:#F4F2EC;border-radius:0}
.btn-primary:hover,.btn-dew:hover,.btn-promo:hover{background:#1A1D19;border-color:#1A1D19;color:#F4F2EC;box-shadow:none}
.btn-secondary,.btn-ghost,.btn-dew-outline{border:1px solid #344638;color:#344638;background:transparent;border-radius:0}
.btn-secondary:hover,.btn-ghost:hover,.btn-dew-outline:hover{background:#EBE8E1;color:#1A1D19}
.btn-primary.rounded-full,.btn-secondary.rounded-full,.btn-ghost.rounded-full,.btn-dew.rounded-full{border-radius:0}

/* Chips rectangular: concern/family chips used the 12px card radius, which reads as a pill at chip height. */
.concern-pill,.family-chip,.filter-chip{border-radius:var(--dt-radius-sm)}

/* Cards: Paper Raised, 1px Hairline, 12px, no shadow (A11). */
.product-card,.card-edge{background:#EBE8E1;border:1px solid #C9CFC4;border-radius:12px;box-shadow:none}
.product-card:hover{box-shadow:none;border-color:#C9CFC4}
.product-card .card-add,.product-card .card-micro{background:#EBE8E1}
.product-card.shadow-card,.shadow-card{--tw-shadow:none;--tw-shadow-colored:none}

/* 3.1 Footer: Deep Forest ground, Paper links/headings (9.0:1), Hairline small print (6.4:1). */
.site-footer{background:#344638;color:#F4F2EC;border-top:0}
.site-footer .text-ink,.site-footer a,.site-footer a.text-muted{color:#F4F2EC}
.site-footer a:hover,.site-footer a.hover\:text-ink:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.site-footer p.text-muted,.site-footer .text-muted:not(a){color:#C9CFC4}
.site-footer .border-border{border-color:rgb(201 207 196/.35)}
/* Live focus ring is outline:var(--dt-focus)!important; re-scope the token so footer focus is Paper (9.0:1 on Deep Forest). */
.site-footer{--dt-focus:2px solid #F4F2EC}
.site-footer :focus-visible{box-shadow:none}

/* 3.2 PDP photo frame: 3:4 like the 1536x2048 photos, so no band above or below. The live frame sets an inline
   aspect-ratio (52/77), so !important is required to win over the style attribute. */
.product-gallery>div[style*="aspect-ratio"]{aspect-ratio:3/4!important;border-radius:12px;padding:0}
.product-gallery>div[style*="aspect-ratio"]>img{object-fit:cover;object-position:center}

/* 3.3 PDP action row: quantity, Add to bag and Save on one row, all 48px tall, square, sharing top and bottom edges.
   The visible "Quantity" label sits above the stepper on wide screens so the three controls fit one row down to the
   1024px two-column layout; if a column is ever too narrow, Save wraps below rather than overflowing. */
div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"]) [role=group][aria-labelledby^="qty-label-"]{height:48px;border-color:#5E675C;border-radius:0}
div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"]) [role=group][aria-labelledby^="qty-label-"]>button{height:46px;width:46px}
div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"]) .btn-primary{height:48px;min-height:48px;padding:0 1.5rem;border-radius:0;white-space:nowrap}
article span.inline-flex.flex-col.items-start>button[aria-pressed]{height:48px;min-height:48px;border:1px solid #344638;color:#344638;background:transparent;border-radius:0;justify-content:center;padding:0 1rem;white-space:nowrap}
article span.inline-flex.flex-col.items-start>button[aria-pressed]:hover{background:#EBE8E1;color:#1A1D19;border-color:#1A1D19}
article span.inline-flex.flex-col.items-start>button[aria-pressed][aria-pressed="true"]{background:#344638;color:#F4F2EC}
@media (min-width:640px){
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"]){flex-wrap:wrap;align-items:flex-end;row-gap:.75rem}
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"])>div>.flex-col{flex-direction:row;align-items:flex-end;gap:.75rem}
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"])>div>.flex-col>div:has(> [role=group]){flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:.375rem}
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"])>span{align-self:flex-end}
}
@media (max-width:639.98px){
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"]){flex-direction:column;align-items:stretch}
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"])>span{align-items:stretch}
  div.flex-wrap.items-center.gap-3:has(> div > .flex-col > div > [role=group][aria-labelledby^="qty-label-"])>span>button[aria-pressed]{width:100%}
}

/* 3.4 Card description: exactly two lines tall, clipped, so no third line peeks; empty stays the same height.
   Two live card variants: grid cards (p.line-clamp-2.flex-1, which stretched and showed a partial third line) and
   type-shelf cards (p.mt-2.flex-1). The price row is pushed to the bottom with margin-top:auto so rows still align.
   Specificity (1,4,2) beats live "#main p.font-body:not(...)" (1,4,1), which forces 17px/1.65. */
article.product-card .card-micro>p.flex-1.font-body,#main article.product-card .card-micro>p.flex-1.font-body{
  flex:0 0 auto;line-height:1.5;height:3em;min-height:3em;max-height:3em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;margin-bottom:1rem}
article.product-card .card-micro>p.flex-1.font-body+div{margin-top:auto}
article.product-card .card-micro>p.flex-1.font-body+div.mt-4{padding-top:.875rem}

/* 3.5 Out-of-stock price stays plain Secondary Text, no strikethrough (set in markup by A12; reasserted here). */
article.product-card p[style*="#5E675C"],article.product-card p[style*="rgb(94, 103, 92)"]{color:#5E675C;text-decoration:none}

/* Inputs: form-control borders meet WCAG 1.4.11 (3:1). Live select/textarea borders were 1.6:1; Border Strong #5E675C = 5.3:1. */
select[class*="border"],textarea[class*="border"]{border-color:#5E675C}

/* Free-shipping progress bar (cart drawer and bag): Hairline track, Deep Forest fill. The live fill used
   surface-light (Paper Raised after remap), so it vanished on the Paper Raised panel and the Sage track read as progress.
   Fill width stays live's inline width:N% (= aria-valuenow), anchored at the left of the track.
   Fill vs track 6.35:1, fill vs panel 8.25:1 (WCAG 1.4.11 needs 3:1). */
[role=progressbar][aria-valuenow]{background:#C9CFC4;display:flex;justify-content:flex-start}
[role=progressbar][aria-valuenow]>div{background:#344638;flex:none;margin-left:0}