/* ==============================================================
   File:    /css/cart-styles.css
   Purpose: Storefront — cart page styles
   Version: 1.4.0
   Updated: 2026-08-21 (v1.4.0 - FIX: the two bare anchor rules (a / a:hover) are now scoped to .wrap and
            .cart-footer. Being element selectors, they applied to the shared header too, so the site title
            and every nav link underlined on hover on this page and nowhere else: site.css line 150 sets
            a:hover{text-decoration:none}, this sheet loads after it from the page <link>, specificity is
            identical, and the later sheet won. A page stylesheet must not restyle a shared component.
            No change inside the cart itself - .wrap holds the page content and .cart-footer is the cart's
            own footer, a sibling of .wrap. v1.3.7 - typography: body 1rem -> 1.125rem (18px) so the cart matches the sitewide
            18px body base after the site.css root reconciliation. v1.3.4 - BTN1: retired local .btn-primary; the cart Proceed button now uses the
            sitewide .button.button--primary.button--block. v1.3.3 - C2 final pass: #2a2f36/#23282f borders -> var(--color-border);
            thumb bg #171b21 -> var(--color-surface); creme text #e9e7e1 -> var(--color-text);
            qty arrow #cfcac0 -> var(--color-muted). v1.3.2 below.)
   Notes:   v1.3.2 - brand-unity C2 Wave B: dark wells -> tokens. summary-lock/
            rv-arrow-hover (#12161c), qty control (#0e0f12), rv-card (#0f1113),
            notice (#101315) -> var(--color-field); rv-arrow + cart-footer
            (#0c0d0f) and qty-select base (#0b0d10, exact match) -> var(--color-bg).
            Single-sourced from site.css; no layout change.
            v1.3.1 - brand-unity C1: off-brand cool tones -> brand tokens.
            Blue link #9fb4ff -> var(--gold); cool slate borders
            #2f3642/#3a4250/#4a5568 (qty select, RV rail card/arrow) ->
            var(--panel-br), with the qty-select hover border now var(--gold)
            to match the site's gold-accent hover language. No layout change.
            v1.1.0 - Converted from /inc/inc-cart-styles.asp (was a
            pure-CSS file mislabeled .asp). <style> wrapper + HTML
            comment header removed; CSS body unchanged. Now linked
            via <link rel="stylesheet"> instead of SSI #include.
            v1.2.0 - cart-grid capped to 1102px centered band + 22px gap
            to match checkout page width/balance.
   ============================================================== */

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:1.125rem/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

/* Fill at least the first screen: wrap grows, footer anchors to the bottom,
   subtle gold radial so any extra space reads as intentional (matches review page). */
html, body{ min-height:100vh; }
body.site{
  display:flex; flex-direction:column; min-height:100vh;
  background:
    radial-gradient(1200px 480px at 50% -8%, rgba(203,161,53,.06), rgba(0,0,0,0) 60%),
    var(--bg);
}
body.site > .wrap{ flex:1 0 auto; }
body.site > .cart-footer{ flex:0 0 auto; }
/* Scoped to the cart's own regions on purpose. These were bare element
   selectors (a / a:hover), which is why the shared header on this page alone
   picked up an underline on hover: site.css sets a:hover{text-decoration:none}
   at line 150, cart-styles.css loads after it via the page <link>, the two
   selectors have identical specificity, and the later sheet won. The nav is a
   shared component included outside .wrap, so a page stylesheet must not
   restyle it. .cart-footer is listed too because it is the cart's own footer,
   a sibling of .wrap rather than a child. */
.wrap a, .cart-footer a{ color:var(--gold); text-decoration:none; }
.wrap a:hover, .cart-footer a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:24px 16px; }
h1{ font:700 1.4rem/1.2 "EB Garamond",Georgia,serif; color:var(--gold); margin:0 0 14px; }

/* =========================
   Layout
========================= */
.cart-grid{ display:grid; grid-template-columns:1fr 320px; gap:22px; max-width:1102px; margin:0 auto; }
@media (max-width:980px){ .cart-grid{ grid-template-columns:1fr; gap:18px; } }
.list-card,.summary{
  background:var(--panel); border:1px solid var(--panel-br); border-radius:14px;
}
.list-card{ padding:14px; }
.summary{ padding:16px; height:fit-content; }

/* Tiny lock banner in summary */
.summary-lock{
  margin:4px 0 10px;
  padding:8px 10px;
  background:var(--color-field);
  border:1px solid var(--color-border);
  border-radius:10px;
  font-size:.9rem;
  color:var(--creme);
}
.summary-lock a{ color:var(--gold); text-decoration:none; }
.summary-lock a:hover{ text-decoration:underline; }

/* =========================
   Cart Item (Amazon-style)
========================= */
:root{ --cart-thumb-w:88px; --cart-thumb-bg:var(--color-surface); }

.cart-item--amz{
  display:grid; grid-template-columns:var(--cart-thumb-w) 1fr; gap:12px;
  padding:12px; background:#111; border:1px solid #222; border-radius:14px;
  margin-bottom:10px;
}

/* Thumb: same width, 2:3 aspect */
.cart-item--amz .cart-thumb{
  width:var(--cart-thumb-w);
  aspect-ratio:var(--thumb-ratio);
  background:var(--cart-thumb-bg);
  border-radius:10px; overflow:hidden; display:block;
  flex:0 0 var(--cart-thumb-w);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.cart-item--amz .cart-thumb img{
  width:100%; height:100%; object-fit:var(--thumb-fit); display:block; background:transparent !important;
}
/* Older Safari fallback */
@supports not (aspect-ratio: 1 / 1){
  .cart-item--amz .cart-thumb{ position:relative; padding-top:150%; }
  .cart-item--amz .cart-thumb img{ position:absolute; inset:0; }
}

.cart-item--amz .cart-main{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.cart-item--amz .cart-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

.cart-item--amz .amz-top .cart-title{
  margin:0; font-family:"EB Garamond",Georgia,serif; font-size:1.06rem; line-height:1.2;
}
.cart-item--amz .amz-top .cart-title a{ color:var(--gold); text-decoration:none; }
.cart-item--amz .amz-top .cart-title a:hover{ text-decoration:underline; }

/* Price block */
.cart-item--amz .amz-price .unit{
  font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:600;
}
.cart-item--amz .amz-price .price-was{ margin-top:2px; color:var(--muted); text-decoration:line-through; font-weight:500; }
.cart-item--amz .amz-price .price-save{ margin-top:2px; font-weight:600; color:#ff5f5f; }
.money{ font-variant-numeric:tabular-nums; -webkit-font-feature-settings:"tnum" 1,"lnum" 1; font-feature-settings:"tnum" 1,"lnum" 1; }

/* Desc + plan */
.cart-item--amz .amz-desc-text{ color:var(--muted); font-size:.92rem; line-height:1.35; }
.cart-item--amz .amz-desc .plan{ display:inline-block; margin-left:8px; color:var(--creme); font-weight:600; }

/* ===== Qty control (readable select on dark) ===== */
.cart-item--amz .amz-actions{ align-items:center; }

.cart-item--amz .cart-qty{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--color-field); border:1px solid var(--panel-br); border-radius:10px; padding:6px 10px;
}

/* Hide native arrow so we can draw our own */
.cart-item--amz .cart-qty select{
  width:56px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:var(--color-bg);
  border:1px solid var(--panel-br);
  border-radius:8px;
  color:var(--color-text);
  font:600 .95rem/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  padding:6px 28px 6px 10px;
  line-height:1.25;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cart-item--amz .cart-qty select:hover{
  background:#111318;
  border-color:var(--gold);
}

.cart-item--amz .cart-qty select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(203,161,53,.25) inset;
}

/* Disabled state when cart is locked */
.cart-item--amz .cart-qty select:disabled{
  opacity:.55; cursor:not-allowed;
}

/* Custom arrow */
.cart-item--amz .cart-qty::after{
  content:"▾";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:.9rem; color:var(--color-muted); pointer-events:none;
}

/* Dark dropdown list in browsers that honor option styling */
.cart-item--amz .cart-qty select option{
  background:var(--color-bg); color:var(--color-text);
}

/* Remove IE/old Edge expand icon (harmless elsewhere) */
.cart-item--amz .cart-qty select::-ms-expand{ display:none; }

.cart-item--amz .cart-actions{ display:flex; align-items:center; gap:12px; }
.cart-item--amz .cart-actions .sep{ color:var(--creme); }

/* Locked cart state UI */
.cart-item--amz.locked .amz-actions{ opacity:.55; pointer-events:none; }

@media (max-width:360px){
  .cart-item--amz{ grid-template-columns:72px 1fr; }
  .cart-item--amz .amz-top{ flex-direction:column; align-items:flex-start; }
}

/* =========================
   Summary / Notices / Buttons
========================= */
.subtotal{ margin:6px 0 14px; font-size:1.2rem; text-align:right; }
/* .btn-primary retired -> sitewide .button.button--primary.button--block (BTN1) */
.small{ font-size:.92rem; color:var(--muted); margin-top:8px; }
.small a{ color:var(--muted); text-decoration:none; }
.small a:hover{ text-decoration:underline; color:var(--creme); }
.notice{
  margin:0 0 12px; padding:10px 12px;
  border:1px solid var(--panel-br); border-radius:10px; background:var(--color-field); color:var(--text);
}
.linklike{ background:transparent; border:0; padding:0; cursor:pointer; font:inherit; color:var(--creme); text-decoration:none; }
.linklike:hover{ text-decoration:underline; }

/* Mobile: hide short description */
@media (max-width:640px){ .cart-item--amz .oneline{ display:none !important; } }

/* =========================
   Recently Viewed — match "You May Also Like"
========================= */
.rv-wrap{
  --rv-card-w:150px;         /* desktop */
  --rv-gap:12px;
  margin:28px 0 12px;
  background:var(--panel);
  border:1px solid var(--panel-br);
  border-radius:14px;
  padding:14px;
}
@media (max-width:820px){ .rv-wrap{ --rv-card-w:136px; } }  /* tablet */
@media (max-width:520px){ .rv-wrap{ --rv-card-w:128px; } }  /* mobile */

.rv-wrap .rv-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.rv-wrap .rv-head h2{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-weight:600; font-size:1.2rem; line-height:1.2; color:var(--gold);
}
.rv-wrap .rv-cta a{ } /* .rv-cta a -> sitewide .link-cta (LINK1) */

.rv-wrap .rv-carousel{ position:relative; }
.rv-wrap .rv-rail{
  display:flex; gap:var(--rv-gap); padding:2px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain; user-select:none;
}

/* Card */
.rv-wrap .rv-card{
  flex:0 0 var(--rv-card-w); width:var(--rv-card-w);
  background:var(--color-field); border:1px solid var(--color-border); border-radius:12px;
  padding:8px; overflow:hidden; text-decoration:none; color:var(--color-text);
  scroll-snap-align:center;
  transition:transform .15s ease, border-color .15s ease;
}
.rv-wrap .rv-card:hover{ transform:translateY(-2px); border-color:var(--panel-br); }

/* Thumbnail well — same as grid/product_details */
:root{ --thumb-bg:var(--color-surface); }
.rv-wrap .rv-thumb{
  width:100%;
  aspect-ratio:var(--thumb-ratio);
  display:block;
  background:var(--thumb-bg);
  border-radius:10px;
  object-fit:var(--thumb-fit);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Body */
.rv-wrap .rv-body{ margin-top:8px; padding:0 2px 10px; }
.rv-wrap .rv-name{ margin:0 0 4px; font-weight:700; font-size:.92rem; color:var(--color-text); }
.rv-wrap .rv-price{ margin:0; font-size:.9rem; color:var(--creme); }

/* Arrows */
.rv-wrap .rv-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--panel-br); background:var(--color-bg); color:var(--color-text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
}
.rv-wrap .rv-arrow:hover{ background:var(--color-field); }
.rv-wrap .rv-arrow[disabled]{ opacity:.35; cursor:default; }
.rv-wrap .rv-prev{ left:-6px; }
.rv-wrap .rv-next{ right:-6px; }
@media (max-width:640px){ .rv-wrap .rv-arrow{ display:none; } }

/* =========================
   Footer
========================= */
.cart-footer{
  border-top:1px solid var(--panel-br); margin-top:32px; padding:20px 0;
  background:var(--color-bg); color:var(--muted); font-size:.88rem;
}
.cart-footer-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; text-align:center; }
.cart-footer-links{ margin-bottom:6px; }
.cart-footer-links a{ color:var(--muted); text-decoration:none; }
.cart-footer-links a:hover{ text-decoration:underline; color:var(--creme); }
.cart-footer-links .sep{ margin:0 6px; color:var(--panel-br); }
.cart-footer-note{ margin-bottom:6px; font-size:.84rem; color:var(--muted); }
.cart-footer-copy{ font-size:.82rem; color:var(--muted); }
@media (max-width:480px){
  .cart-footer{ padding:16px 0; }
  .cart-footer-links{ line-height:1.6; }
}

/* =========================
   Continue Shopping (ghost button)
========================= */
.summary-continue{
  text-align:center; margin-top:14px; padding-top:10px;
  border-top:1px solid var(--panel-br); color:var(--muted);
}
.summary-continue a{
  display:inline-block; min-width:220px; padding:10px 12px;
  border:1px solid var(--panel-br); border-radius:10px;
  text-decoration:none; color:var(--creme);
  transition:border-color .15s ease, background-color .15s ease;
}
.summary-continue a:hover{ background:#111; border-color:var(--gold); }
.summary-continue a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
@media (max-width:480px){ .summary-continue a{ min-width:unset; width:100%; } }

/* =========================
   Actions wrap on narrow screens
========================= */
@media (max-width:500px){
  .cart-item--amz .amz-actions{ flex-wrap:wrap; gap:8px; }
  .cart-item--amz .cart-qty{ flex:0 1 auto; }
  .cart-item--amz .cart-actions{ flex:1 0 100%; justify-content:flex-end; }
  .cart-item--amz .cart-actions .sep{ display:none; }
  .cart-item--amz .cart-actions a,
  .cart-item--amz .cart-actions .linklike{ white-space:nowrap; font-size:.95rem; }
}

/* =========================
   Reduced motion
========================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}