/* dna-cart-access.css — DNA Couture storefront cart access + add-to-cart confirmation.
   Lane CART-ACCESS-20260724-A. Load AFTER styles.css AND after any page-level inline <style>
   block, on every page that renders .v-quick-add. Every colour/type/geometry value below is
   lifted from the live source (canon-live/styles.css + canon-live/category.html inline block):
     #111 dark · #fff · rgba(255,255,255,.85) + blur(14px) quick-add glass · #6f645b warm muted
     #a23b3b error text (styles.css .state-pill.blocked) · radius 4px (.btn/.load-more-btn)
     .78rem/600/.1em uppercase control type · 14px mobile gutter · font-family: inherit (Inter).
   Selector weight note: the live base rule is `.v-card-media .v-quick-add` (0,2,0), so every
   override here carries at least the same weight and relies on source order. No !important.
   NOTE: never put an asterisk-slash sequence inside comments. */

/* ---------- 1 · originating control: reveal, hit area, focus (defect fixes) ---------- */
/* Live reveals the control on :hover only. Keyboard users focus an opacity:0 button, and on
   touch there is no hover at all while the button still hit-tests — a silent add. */
.v-card-media:focus-within .v-quick-add{opacity:1;transform:translateY(0)}
@media (hover:none){.v-card-media .v-quick-add{opacity:1;transform:translateY(0)}}
.v-card-media .v-quick-add{min-height:44px;transition:opacity 220ms ease,transform 220ms ease,background-color 140ms ease-out,color 140ms ease-out}
.v-card-media .v-quick-add:focus-visible{outline:2px solid #111;outline-offset:-3px}
.v-card-media .v-quick-add .dcart-lbl{display:inline-block}

/* ---------- 2 · control states (no box change anywhere, so no layout shift) ---------- */
.v-card-media .v-quick-add.dcart-pending{color:#6f645b;cursor:progress}
.v-card-media .v-quick-add.dcart-added{background:#111;color:#fff}
.v-card-media .v-quick-add.dcart-added .dcart-lbl{animation:dcart-pop 180ms cubic-bezier(.2,.7,.3,1)}
.v-card-media .v-quick-add.dcart-failed{color:#a23b3b}
@keyframes dcart-pop{from{transform:scale(.96)}to{transform:scale(1)}}

/* ---------- 3 · card record line (live reserves min-height:1em — never shifts) ---------- */
.dcart-fb-pending{color:#6f645b}
.dcart-fb-ok{color:#3d3933}
.dcart-fb-err{color:#a23b3b}

/* ---------- 4 · desktop/tablet affordance: count badge inside the live header pill ---------- */
#cartPillNav{padding:6px 2px}
.dcart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:999px;background:#111;color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dcart-count.is-ticking{animation:dcart-tick 220ms cubic-bezier(.2,.7,.3,1)}
@keyframes dcart-tick{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---------- 5 · mobile affordance (<=720px, where .header-tools is display:none) ---------- */
/* Space is RESERVED on <body> while mounted, so the bar never covers a card, Load More or the
   footer. z-index 20 sits above the sticky header (5) and below .signup-modal (30). */
.dcart-bar{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:none;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px 0 16px;border-radius:4px;background:#111;color:#fff;box-shadow:0 10px 30px rgba(17,17,17,.28);font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transform:translateY(120%);opacity:0;transition:transform 220ms cubic-bezier(.2,.7,.3,1),opacity 160ms linear}
.dcart-bar.is-mounted{display:flex}
.dcart-bar.is-in{transform:none;opacity:1}
.dcart-bar:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.dcart-bar-left{display:inline-flex;align-items:center;gap:9px;min-width:0}
.dcart-bar-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.dcart-bar-count.is-ticking{animation:dcart-tick 220ms cubic-bezier(.2,.7,.3,1)}
.dcart-bar-cta{white-space:nowrap;opacity:.72;font-weight:600}
@media (max-width:720px){body.dcart-bar-mounted{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (min-width:721px){.dcart-bar.is-mounted{display:none}}
body.modal-open .dcart-bar.is-mounted{display:none}
@media print{.dcart-bar.is-mounted{display:none}}

/* ---------- 6 · screen-reader announcement regions ---------- */
.dcart-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 7 · reduced motion: state changes stay, motion goes ---------- */
@media (prefers-reduced-motion:reduce){
  .v-card-media .v-quick-add{transition:opacity 220ms ease,transform 220ms ease}
  .v-card-media .v-quick-add.dcart-added .dcart-lbl{animation:none}
  .dcart-count.is-ticking,.dcart-bar-count.is-ticking{animation:none}
  .dcart-bar{transition:none;transform:none}
}
