/* ============================================================
   GRISTLE BOX — Design System
   ============================================================ */
:root {
  /* Type */
  --text-xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --text-sm:   clamp(.875rem, .8rem  + .35vw, 1rem);
  --text-base: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --text-lg:   clamp(1.125rem,1rem   + .75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,  1.2rem + 1.25vw,2.25rem);
  --text-2xl:  clamp(2rem,    1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem,  1rem   + 4vw,   5rem);
  --text-hero: clamp(3rem,    .5rem  + 7vw,   8rem);

  /* Spacing */
  --sp1:.25rem; --sp2:.5rem; --sp3:.75rem; --sp4:1rem; --sp5:1.25rem;
  --sp6:1.5rem; --sp8:2rem;  --sp10:2.5rem;--sp12:3rem;--sp16:4rem;
  --sp20:5rem;  --sp24:6rem; --sp32:8rem;

  /* Radius */
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-full:9999px;

  /* Easing */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  --t:180ms cubic-bezier(.16,1,.3,1);

  /* Widths */
  --w-narrow:640px; --w-default:960px; --w-wide:1280px;

  /* Fonts */
  --font-display:'Bebas Neue','Impact',sans-serif;
  --font-body:'Archivo','Helvetica Neue',sans-serif;

  /* DARK Palette (default) */
  --color-bg:          #080808;
  --color-surface:     #101010;
  --color-surface-2:   #161616;
  --color-surface-3:   #1e1e1e;
  --color-divider:     #242424;
  --color-border:      #2e2e2e;
  --color-border-hi:   #3a3a3a;

  --color-text:        #eae6e0;
  --color-text-muted:  #8c8880;
  --color-text-faint:  #504d49;

  --color-blood:       #8b1a1a;
  --color-blood-hi:    #cc2222;
  --color-blood-dark:  #4f0d0d;
  --color-blood-glow:  rgba(139,26,26,.35);

  --color-gold:        #c8941a;
  --color-gold-dim:    rgba(200,148,26,.15);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.6);
  --shadow-md:  0 4px 20px rgba(0,0,0,.7);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.85);
  --shadow-blood: 0 0 40px var(--color-blood-glow), 0 4px 20px rgba(0,0,0,.8);
}


/* ============================================================
   UTILITY
   ============================================================ */
.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp3);
  font-size: var(--text-xs); letter-spacing: .25em; text-transform: uppercase;
  color: var(--color-blood-hi); font-weight: 700;
}
.eyebrow::before { content:''; width:24px; height:1px; background:var(--color-blood-hi); }
.eyebrow-line { display:inline-block; width:24px; height:1px; background:var(--color-blood-hi); flex-shrink:0; }

.container { max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--sp8); }
.container-md { max-width:var(--w-default); margin-inline:auto; padding-inline:var(--sp8); }
.section { padding-block: clamp(var(--sp16),8vw,var(--sp32)); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp2);
  padding: var(--sp3) var(--sp6);
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.btn-primary { background:var(--color-blood); color:var(--color-text); border:1px solid transparent; }
.btn-primary:hover { background:var(--color-blood-hi); transform:translateY(-1px); box-shadow:var(--shadow-blood); }
.btn-primary:active { transform:translateY(0); }

.btn-outline { background:transparent; color:var(--color-text-muted); border:1px solid var(--color-border); }
.btn-outline:hover { color:var(--color-text); border-color:var(--color-border-hi); transform:translateY(-1px); }

.btn-ghost { background:transparent; color:var(--color-blood-hi); border:1px solid var(--color-blood); }
.btn-ghost:hover { background:rgba(139,26,26,.12); transform:translateY(-1px); }

.btn-lg { padding:var(--sp4) var(--sp10); font-size:var(--text-base); }

/* ============================================================
   SITE NAV
   ============================================================ */
.site-nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp4) var(--sp8);
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, transparent 100%);
  transition: background var(--t), padding var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
  /*background: rgba(6,6,6,.97);*/
  background:#000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--sp3) var(--sp8);
  border-bottom-color: var(--color-divider);
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:64px; width:auto; }

.nav-links { display:flex; align-items:center; gap:var(--sp8); list-style:none; }
.nav-links a {
  text-decoration: none; color: var(--color-text-muted);
  font-size: var(--text-sm); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; transition: color var(--t); position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left:0; bottom:-4px; right:0; height:1px;
  background: var(--color-blood-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.nav-links a:hover { color:var(--color-text); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a.active { color:var(--color-text); }

.nav-right { display:flex; align-items:center; gap:var(--sp4); }



.cart-btn {
  display:flex; align-items:center; gap:var(--sp2);
  color:var(--color-text); font-size:var(--text-sm); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:var(--sp2) var(--sp4);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  text-decoration:none; transition:all var(--t);
}
.cart-btn:hover { border-color:var(--color-blood); color:var(--color-blood-hi); }

.hamburger {
  display:none; flex-direction:column; gap:5px; width:26px;
  color:var(--color-text);
}
.hamburger span { display:block; height:2px; background:currentColor; transition:transform 300ms var(--ease-inout), opacity 200ms; }

/* Mobile overlay */
.mobile-nav {
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp8); opacity:0; pointer-events:none;
  transition:opacity 300ms var(--ease-out);
}
.mobile-nav.open { opacity:1; pointer-events:all; }
.mobile-nav a {
  font-family:var(--font-display); font-size:var(--text-2xl);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--color-text-muted); transition:color var(--t);
}
.mobile-nav a:hover { color:var(--color-blood-hi); }


/* Mobile Nav Hidden State */
#mobile-nav {
  position: fixed;
  inset: 0;
  top: 80px; /* Adjust if your header is taller/shorter */
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 999 !important;
  display: flex;
  flex-direction: column;	
}

/* Mobile Nav Open State */
#mobile-nav.open {
  transform: translateX(0);
}

#burger span {
  pointer-events: none;
}

#burger {
  cursor: pointer; /* Forces iOS to treat this as a clickable target */
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:#050505;
  border-top:1px solid var(--color-divider);
  padding-block:var(--sp16) var(--sp10);
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp12); margin-bottom:var(--sp12);
}
.footer-brand { display:flex; flex-direction:column; gap:var(--sp4); }

.footer-tagline { font-size:var(--text-sm); color:var(--color-text-muted); font-style:italic; max-width:36ch; }
.footer-social { display:flex; gap:var(--sp3); margin-top:var(--sp2); }
.social-icon {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  color:var(--color-text-muted); text-decoration:none; transition:all var(--t);
}
.social-icon:hover { border-color:var(--color-blood); color:var(--color-blood-hi); }

.footer-col { display:flex; flex-direction:column; gap:var(--sp3); }
.footer-col-title { font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--color-text); margin-bottom:var(--sp2); }
.footer-col a { font-size:var(--text-sm); color:var(--color-text-muted); text-decoration:none; transition:color var(--t); }
.footer-col a:hover { color:var(--color-text); }

.footer-bottom {
  border-top:1px solid var(--color-divider); padding-top:var(--sp8);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp4); flex-wrap:wrap;
}
.footer-copy { font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.06em; }
.footer-legal { display:flex; gap:var(--sp6); }
.footer-legal a { font-size:var(--text-xs); color:var(--color-text-faint); text-decoration:none; transition:color var(--t); }
.footer-legal a:hover { color:var(--color-text-muted); }

/* ============================================================
   TAPE STRIP
   ============================================================ */
.tape-strip {
  background:var(--color-blood); overflow:hidden; padding:var(--sp3) 0;
  border-top:1px solid var(--color-blood-dark); border-bottom:1px solid var(--color-blood-dark);
}
.tape-track { display:flex; gap:var(--sp8); width:max-content; animation:marquee 30s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tape-track span { font-family:var(--font-display); font-size:var(--text-sm); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.9); white-space:nowrap; }
.tape-dot { display:inline-block; width:4px; height:4px; background:rgba(255,255,255,.5); border-radius:50%; vertical-align:middle; margin:0 var(--sp3); }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
  position:relative; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-blood); border-color:var(--color-blood); }
.product-card:active { transform:translateY(-1px); }

.product-img-wrap {
  position:relative; overflow:hidden; background:var(--color-surface-2);
}
.product-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 400ms var(--ease-out), filter 400ms var(--ease-out);
}
.product-card:hover .product-img-wrap img { transform:scale(1.04); filter:brightness(1.08); }

.product-badge {
  position:absolute; top:var(--sp3); left:var(--sp3);
  padding:var(--sp1) var(--sp3); font-size:var(--text-xs); letter-spacing:.16em;
  font-weight:700; text-transform:uppercase; border-radius:var(--radius-sm); font-family:var(--font-body);
}
.badge-available { background:rgba(8,8,8,.85); color:var(--color-text-muted); border:1px solid var(--color-border); }
.badge-rts { background:var(--color-gold-dim); color:var(--color-gold); border:1px solid rgba(200,148,26,.4); }
.badge-new { background:var(--color-blood); color:var(--color-text); }

.sold-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.sold-stamp {
  font-family:var(--font-display); font-size:var(--text-3xl); color:#ff4444;
  letter-spacing:.06em; text-shadow:0 0 20px rgba(255,50,50,.6);
  transform:rotate(-12deg); border:3px solid #ff4444; padding:var(--sp2) var(--sp6); opacity:.9;
}

.product-info { padding:var(--sp4) var(--sp5) var(--sp5); display:flex; flex-direction:column; gap:var(--sp2); flex:1; }
.product-series { font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--color-blood-hi); font-weight:700; }
.product-name { font-family:var(--font-display); font-size:var(--text-xl); letter-spacing:.04em; text-transform:uppercase; color:var(--color-text); line-height:1.1; }
.product-detail { font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.08em; }
.product-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:var(--sp3); border-top:1px solid var(--color-divider); }
.product-price { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-text); letter-spacing:.04em; }
.product-cta { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--color-blood-hi); transition:color var(--t); }
.product-card:hover .product-cta { color:#ff6666; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position:relative; padding-top:10rem; padding-bottom:var(--sp16);
  overflow:hidden;
  background-size:cover; background-position:center;
}
.page-hero-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:brightness(.25) saturate(.7);
}
.page-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.85) 100%);
}
.page-hero-content { position:relative; z-index:2; }
.page-hero-inner { position:relative; z-index:2; }
.page-hero-title {
  font-family:var(--font-display); font-size:var(--text-3xl);
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-text);
  line-height:1; margin-bottom:var(--sp4);
}
.page-hero-sub { font-size:var(--text-lg); color:var(--color-text-muted); font-style:italic; /*max-width:55ch;*/ }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display:flex; align-items:center; gap:var(--sp2);
  font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-faint); margin-bottom:var(--sp6);
}
.breadcrumb a { color:var(--color-text-faint); text-decoration:none; transition:color var(--t); }
.breadcrumb a:hover { color:var(--color-text-muted); }
.breadcrumb span { color:var(--color-text-faint); }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar { display:flex; gap:var(--sp3); flex-wrap:wrap; margin-bottom:var(--sp10); }
.filter-btn {
  padding:var(--sp2) var(--sp5); font-size:var(--text-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; font-family:var(--font-body);
  border:1px solid var(--color-border); border-radius:var(--radius-full);
  color:var(--color-text-muted); background:transparent; cursor:pointer;
  transition:all var(--t);
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--color-blood); color:var(--color-blood-hi);
  background:rgba(139,26,26,.1);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:1; }
@supports (animation-timeline: scroll()) {
  .reveal {
    opacity:0;
    animation:reveal-fade linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
  @keyframes reveal-fade { to { opacity:1; } }
}

/* ============================================================
   RTS PULSE DOT
   ============================================================ */
.live-dot {
  width:8px; height:8px; background:var(--color-gold); border-radius:50%;
  animation:pulse-live 1.8s ease-in-out infinite;
}
@keyframes pulse-live { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ============================================================
   GALLERY MASONRY
   ============================================================ */
.masonry-grid {
  columns: 4; column-gap: var(--sp4);
}
.masonry-item {
  break-inside: avoid; margin-bottom: var(--sp4);
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); cursor: pointer;
  position: relative;
  transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.masonry-item:hover { transform: scale(1.02); border-color: var(--color-blood); }
.masonry-item img { width:100%; height:auto; display:block; }
.masonry-item .overlay {
  position: absolute; inset:0; background: rgba(0,0,0,0);
  display:flex; align-items:center; justify-content:center;
  transition: background 250ms var(--ease-out);
}
.masonry-item:hover .overlay { background:rgba(139,26,26,.2); }
.masonry-item .overlay-icon { color:#fff; opacity:0; transition:opacity 250ms; }
.masonry-item:hover .overlay-icon { opacity:1; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 300ms var(--ease-out);
}
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:var(--radius-md); }
.lightbox-close {
  position:absolute; top:var(--sp6); right:var(--sp6);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:50%;
  color:var(--color-text); font-size:1.1rem; cursor:pointer; transition:all var(--t);
}
.lightbox-close:hover { border-color:var(--color-blood); color:var(--color-blood-hi); }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(16,16,16,.8); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); color:var(--color-text); cursor:pointer;
  transition:all var(--t);
}
.lightbox-nav:hover { border-color:var(--color-blood); color:var(--color-blood-hi); }
.lightbox-prev { left:var(--sp6); }
.lightbox-next { right:var(--sp6); }
.lightbox-counter {
  position:absolute; bottom:var(--sp6); left:50%; transform:translateX(-50%);
  font-size:var(--text-xs); letter-spacing:.15em; color:var(--color-text-muted);
  background:rgba(0,0,0,.6); padding:var(--sp2) var(--sp4); border-radius:var(--radius-full);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp16); align-items:center; }
.about-img { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); }
.about-img img { width:100%; height:100%; object-fit:cover; }

.pillar { display:flex; gap:var(--sp4); align-items:flex-start; margin-bottom:var(--sp6); }
.pillar-icon { width:44px; height:44px; min-width:44px; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--color-blood-hi); }
.pillar-title { font-size:var(--text-sm); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text); margin-bottom:var(--sp1); }
.pillar-desc { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.7; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp16); align-items:start; }
.form-group { display:flex; flex-direction:column; gap:var(--sp2); margin-bottom:var(--sp5); }
.form-label { font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--color-text); }
.form-input, .form-select, .form-textarea {
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-sm); padding:var(--sp3) var(--sp4);
  color:var(--color-text); font-size:var(--text-base); width:100%;
  transition:border-color var(--t), box-shadow var(--t);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--color-blood); box-shadow:0 0 0 3px var(--color-blood-glow);
}
.form-textarea { resize:vertical; min-height:140px; }
.form-select { appearance:none; cursor:pointer; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--sp8); }
  .about-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .masonry-grid { columns:3; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .site-nav { padding-inline:var(--sp5); }
  .container, .container-md { padding-inline:var(--sp5); }
  .footer-grid { grid-template-columns:1fr; }
  .masonry-grid { columns:2; }
  .page-hero { padding-top:8rem; }
}
@media (max-width:480px) {
  .masonry-grid { columns:1; }
}

/* ============================================================
   SHOPPING CART DRAWER
   ============================================================ */
.cart-overlay {
  position:fixed; inset:0; z-index:190;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity 300ms var(--ease-out);
}
.cart-overlay.open { opacity:1; pointer-events:all; }

.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:195;
  width:420px; max-width:100vw;
  background:var(--color-surface); border-left:1px solid var(--color-border);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 350ms var(--ease-out);
  box-shadow:-10px 0 40px rgba(0,0,0,.5);
}
.cart-drawer.open { transform:translateX(0); }

.cart-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp5) var(--sp6);
  border-bottom:1px solid var(--color-divider);
}
.cart-drawer-title {
  font-family:var(--font-display); font-size:var(--text-lg);
  text-transform:uppercase; letter-spacing:.06em;
}
.cart-drawer-close {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted); border-radius:var(--radius-sm);
  transition:color var(--t);
}
.cart-drawer-close:hover { color:var(--color-text); }

.cart-drawer-body {
  flex:1; overflow-y:auto; padding:var(--sp4) var(--sp6);
}

.cart-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:var(--sp16) var(--sp4);
}

.cart-item {
  display:flex; gap:var(--sp4); padding:var(--sp4) 0;
  border-bottom:1px solid var(--color-divider);
  align-items:flex-start;
}
.cart-item:last-child { border-bottom:none; }

.cart-item-img {
  width:80px; height:80px; border-radius:var(--radius-sm);
  overflow:hidden; border:1px solid var(--color-border); flex-shrink:0;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }

.cart-item-info { flex:1; min-width:0; }
.cart-item-name {
  font-family:var(--font-display); font-size:var(--text-base);
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text); line-height:1.2; margin-bottom:var(--sp1);
}
.cart-item-detail { font-size:var(--text-xs); color:var(--color-text-faint); margin-bottom:var(--sp2); }
.cart-item-price { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-text); letter-spacing:.04em; }

.cart-item-remove {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-faint); border-radius:var(--radius-sm);
  transition:all var(--t); flex-shrink:0;
}
.cart-item-remove:hover { color:var(--color-blood-hi); background:rgba(139,26,26,.1); }

.cart-drawer-footer {
  padding:var(--sp5) var(--sp6);
  border-top:1px solid var(--color-divider);
}

.cart-totals { margin-bottom:var(--sp4); }
.cart-subtotal {
  display:flex; justify-content:space-between; align-items:center;
}
.cart-subtotal span:first-child {
  font-size:var(--text-sm); color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:.12em; font-weight:700;
}
.cart-subtotal-amount {
  font-family:var(--font-display); font-size:var(--text-xl);
  color:var(--color-text); letter-spacing:.04em;
}
.cart-shipping-note {
  font-size:var(--text-xs); color:var(--color-text-faint);
  margin-top:var(--sp1);
}
.cart-secure-note {
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  font-size:var(--text-xs); color:var(--color-text-faint);
  margin-top:var(--sp3); letter-spacing:.06em;
}

/* Cart badge on nav */
.cart-count {
  display:none; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--color-blood-hi); color:#fff;
  font-size:11px; font-weight:800; border-radius:var(--radius-full);
  position:absolute; top:-6px; right:-8px;
  line-height:1;
}
.cart-btn { position:relative; }

@keyframes cart-bump {
  0% { transform:scale(1); }
  50% { transform:scale(1.4); }
  100% { transform:scale(1); }
}
.cart-bump { animation:cart-bump 350ms var(--ease-out); }

@media (max-width:480px) {
  .cart-drawer { width:100vw; }
}