/* =============================================================
   UGAVISIONZ® — PORTFOLIO STYLES
   -------------------------------------------------------------
   TABLE OF CONTENTS
     1.  THEME VARIABLES   ........  colors / fonts / spacing
     2.  GLOBAL RESET      ........  base element styles
     3.  TYPOGRAPHY HELPERS ........  .mono, .display, etc.
     4.  TOP BAR / NAV     ........  sticky header
     5.  INDEX MENU        ........  full-screen overlay menu
     6.  HERO SECTION      ........  headline + eye logo
     7.  MARQUEE           ........  scrolling strip
     8.  HERO TILES        ........  4-up tile row under hero
     9.  ABOUT SECTION     ........  4-block grid + prose
     10. PROJECTS GRID     ........  selected works cards
     11. CONTACT           ........  VISION SO CLEAR + info rows
     12. FOOTER            ........  bottom bar
     13. SCROLL ANIMATIONS ........  fade-in on scroll
     14. RESPONSIVE        ........  tablet + mobile breakpoints
     15. COLLECTION BROWSER ........  gallery.html sidebar + carousel
     16. SHOP PAGE         ........  shop.html editorial cards + cart
   ============================================================= */


/* =============================================================
   1. THEME VARIABLES
   ============================================================= */
:root {
  --bg:       #ececec;
  --bg-alt:   #ffffff;
  --ink:      #0a0a0a;
  --ink-soft: #555555;
  --line:     #0a0a0a;
  --accent:   #f92fa1;
  --accent-2: #ffffff;
  --muted:    #8a8a8a;
  --gray:     #b4b4b4;

  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --border: 1px solid var(--line);
  --pad:    clamp(16px, 2vw, 28px);
}


/* =============================================================
   2. GLOBAL RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

a      { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }


/* =============================================================
   3. TYPOGRAPHY HELPERS
   ============================================================= */
.mono   { font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; }
.small  { font-size: 11px; }
.muted  { color: var(--muted); }

.display     { font-weight: 900; font-size: clamp(56px, 13vw, 220px); line-height: 0.88; letter-spacing: -0.04em; margin: 0; }
.display-mid { font-weight: 900; font-size: clamp(40px, 7vw, 96px);   line-height: 0.92; letter-spacing: -0.03em; margin: 0; }
.block-title { font-weight: 900; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.02; margin: 0; text-transform: uppercase; }


/* =============================================================
   4. TOP BAR / NAV
   ============================================================= */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.6fr 1fr;
  background: var(--bg);
  border-bottom: var(--border);
}

.top-bar .cell {
  padding: 14px var(--pad);
  border-right: var(--border);
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  font-size: 12px;
}
.top-bar .cell:last-child { border-right: 0; }

.cell-brand .brand { font-weight: 800; font-size: 16px; }
.cell-coords       { font-family: var(--font-mono); gap: 24px; }
.cell-tags         { font-family: var(--font-mono); flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; }
.cell-menu         { justify-content: flex-end; }

.menu-toggle:hover { color: var(--accent); }


/* =============================================================
   5. INDEX MENU
   -------------------------------------------------------------
   Fullscreen overlay. The inner <ul> uses min-height: 100% so
   menu items center vertically when they fit, but the overlay
   scrolls naturally when there are too many items for the
   viewport (e.g. on short laptops or mobile in landscape).
   ============================================================= */
.index-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--bg);
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(.7,.1,.2,1);
  overflow-y: auto;                       /* scroll when items overflow */
  -webkit-overflow-scrolling: touch;
}
.index-menu.open { transform: translateY(0); }

.index-menu ul {
  list-style: none;
  margin: 0;
  padding: 60px 20px;                     /* breathing room at top/bottom */
  text-align: center;
  min-height: 100%;                       /* fill viewport for centering */
  display: flex;
  flex-direction: column;
  justify-content: center;                /* center when content fits */
  gap: 4px;
  box-sizing: border-box;
}
.index-menu li { margin: 0; }
.index-menu a  {
  font-weight: 900;
  font-size: clamp(28px, 5.5vw, 72px);    /* smaller so more items fit */
  line-height: 1.05;
  letter-spacing: -0.03em;
  display: inline-block;
  transition: color 0.2s ease;
}
.index-menu a:hover { color: var(--accent); }

.index-menu a.is-current { color: var(--accent); position: relative; }
.index-menu a.is-current::after {
  content: "●";
  font-size: 0.3em;
  vertical-align: middle;
  margin-left: 0.4em;
  opacity: 0.8;
}

.menu-divider {
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.25);
  margin: 14px auto !important;
  list-style: none;
}


/* =============================================================
   6. HERO SECTION
   ============================================================= */
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-bottom: var(--border);
}

.hero-left {
  padding: var(--pad);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70vh;
}

.hero-blurb { max-width: 520px; font-size: 11px; line-height: 1.6; margin-top: 32px; }

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 70vh;
  overflow: hidden;
}

.hero-image-container,
.hero-img-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.eye-logo {
  width: 75%;
  max-width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-image {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.image-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}


/* =============================================================
   7. MARQUEE
   ============================================================= */
.marquee        { overflow: hidden; border-bottom: var(--border); padding: 12px 0; }
.marquee-track  { display: inline-flex; gap: 28px; white-space: nowrap; animation: scroll 30s linear infinite; font-size: 13px; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* =============================================================
   8. HERO TILES
   ============================================================= */
.hero-tiles { display: grid; grid-template-columns: repeat(4, 1fr); }

.tile { border-right: var(--border); min-height: 340px; display: flex; flex-direction: column; }
.tile:last-child { border-right: 0; }

.tile-head { display: flex; justify-content: space-between; padding: 14px var(--pad); font-size: 11px; border-bottom: var(--border); }
.tile-body { flex: 1; display: flex; align-items: flex-end; padding: var(--pad); }

.big-mark { font-weight: 900; font-size: clamp(60px, 7vw, 110px); letter-spacing: -0.04em; line-height: 1; }
.huge-num { font-weight: 900; font-size: clamp(80px, 10vw, 160px); line-height: 0.85; color: var(--bg); }

.tile-image  { background: #ddd; padding: 0; }
.tile-accent { background: var(--accent);   color: #fff; }
.tile-dark   { background: var(--accent-2); color: #fff; align-items: center; justify-content: center; padding: var(--pad); }

.tile-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.logo-img { width: 70%; max-width: 180px; height: auto; object-fit: contain; }


/* =============================================================
   9. ABOUT SECTION
   ============================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1fr;
  border-bottom: var(--border);
}

.about-block {
  padding: var(--pad);
  border-right: var(--border);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-block:last-child { border-right: 0; }

.about-dark { background: var(--gray); color: #fff; }

.about-struct {
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  position: relative;
  overflow: hidden;
}
.about-struct .struct-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }

.struct-image {
  flex: 1;
  width: 100%;
  min-height: 220px;
  margin-top: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.struct-id { position: absolute; bottom: 15px; left: 15px; }
.big-id    { color: #fff; font-weight: 900; font-size: clamp(36px, 4vw, 72px); line-height: 0.9; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }

.about-tags { padding: 0; }
.tag-row { display: flex; justify-content: space-between; padding: 16px var(--pad); border-bottom: var(--border); font-size: 12px; }

.r-circle {
  width: clamp(110px, 12vw, 180px);
  height: clamp(110px, 12vw, 180px);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-weight: 900;
  font-size: clamp(56px, 6vw, 56px);
}
.r-circle span { line-height: 1; font-weight: 900; letter-spacing: 0.05em; }

.about-prose { padding: 60px var(--pad) 80px; max-width: 1100px; }
.prose-text  { font-size: clamp(22px, 2.4vw, 38px); font-weight: 500; line-height: 1.25; max-width: 900px; margin: 0; }


/* =============================================================
   10. PROJECTS GRID
   ============================================================= */
.section-head {
  padding: 60px var(--pad) 40px;
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.project {
  border-right:  var(--border);
  border-bottom: var(--border);
  padding: var(--pad);
  background: var(--bg-alt);
  transition: background 0.3s ease;
  cursor: pointer;
}
.project:hover         { background: #f6f6f6; }
.project:nth-child(3n) { border-right: 0; }

.project-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 18px;
  transition: transform 0.4s ease;
}
.project:hover .project-img { transform: scale(1.02); }

.project-meta  { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.project-title { font-weight: 900; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; margin: 0 0 6px; }
.project-desc  { font-size: 14px; color: var(--ink-soft); margin: 0; max-width: 36ch; }


/* =============================================================
   11. CONTACT SECTION
   ============================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--border); }
.contact-left  { padding: 60px var(--pad); border-right: var(--border); min-height: 60vh; display: flex; flex-direction: column; justify-content: space-between; }
.contact-right { padding: 60px 0 0; display: flex; flex-direction: column; }

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: var(--border);
  font-size: 13px;
}
.contact-row:first-child   { border-top: var(--border); }
.contact-row .label        { color: var(--muted); }
.contact-row a.value:hover { color: var(--accent); }


/* =============================================================
   12. FOOTER
   ============================================================= */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 18px var(--pad);
  font-size: 11px;
  color: var(--ink-soft);
}
.footer-grid .back-top       { text-align: right; }
.footer-grid .back-top:hover { color: var(--accent); }


/* =============================================================
   13. SCROLL-REVEAL ANIMATION
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* =============================================================
   14. RESPONSIVE BREAKPOINTS
   ============================================================= */
@media (max-width: 1024px) {
  .top-bar { grid-template-columns: 1fr 1fr; }
  .top-bar .cell-coords,
  .top-bar .cell-tags             { display: none; }

  .hero-grid                      { grid-template-columns: 1fr; }
  .hero-left                      { border-right: 0; border-bottom: var(--border); min-height: auto; }

  .hero-tiles                     { grid-template-columns: repeat(2, 1fr); }
  .about-grid                     { grid-template-columns: 1fr 1fr; }
  .project-grid                   { grid-template-columns: repeat(2, 1fr); }
  .project:nth-child(3n)          { border-right: var(--border); }
  .project:nth-child(2n)          { border-right: 0; }

  .contact-grid                   { grid-template-columns: 1fr; }
  .contact-left                   { border-right: 0; border-bottom: var(--border); }
  .footer-grid                    { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero-tiles,
  .about-grid,
  .project-grid                   { grid-template-columns: 1fr; }

  .tile,
  .project,
  .about-block                    { border-right: 0; }

  .contact-row                    { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* =============================================================
   15. COLLECTION BROWSER  (gallery.html)
   ============================================================= */
body.gallery-page {
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.top-bar-gallery {
  grid-template-columns: 1.1fr 1fr 1.6fr 1fr;
  background: var(--bg);
  position: static;
  flex-shrink: 0;
}
.cell-mode {
  font-family: var(--font-mono);
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
}

.collection-browser {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.collection-sidebar {
  border-right: var(--border);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-header { font-size: 12px; font-weight: 500; margin: 0 0 24px; letter-spacing: 0.02em; }

.collection-list { list-style: none; padding: 0; margin: 0; flex: 1; }

.collection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.collection-item:hover           { background: rgba(0,0,0,0.04); }
.collection-item .count          { color: var(--muted); }
.collection-item.is-active       { background: rgba(0,0,0,0.04); border-left-color: var(--accent); }
.collection-item.is-active .name { font-weight: 700; }
.collection-item.is-active .count{ color: var(--accent); }

.list-divider { height: 1px; background: var(--ink); opacity: 0.15; margin: 24px 0; }

.list-meta { font-size: 11px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.list-meta dt { color: var(--muted); }
.list-meta dd { margin: 0; color: var(--ink); text-align: right; }

.carousel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.carousel-header { padding: 14px var(--pad); border-bottom: var(--border); font-size: 12px; display: flex; gap: 12px; align-items: center; min-height: 48px; }

.carousel-stage { flex: 1; position: relative; display: flex; align-items: center; overflow: hidden; padding: 40px 80px; }
.carousel-track { display: flex; gap: 24px; transition: transform 0.45s cubic-bezier(.7,.1,.2,1); will-change: transform; }

.carousel-card { flex: 0 0 auto; width: clamp(220px, 22vw, 320px); display: flex; flex-direction: column; gap: 12px; }
.card-image { width: 100%; aspect-ratio: 4 / 5; background-color: #ddd; background-size: cover; background-position: center; background-repeat: no-repeat; }
.card-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.card-title { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; line-height: 1; margin: 0; }

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 300; line-height: 1;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}
.arrow.left  { left: 16px; }
.arrow.right { right: 16px; }
.arrow:hover { background: var(--ink); color: var(--bg); }
.arrow.is-disabled { opacity: 0.2; pointer-events: none; }

.carousel-footer { padding: 12px var(--pad); border-top: var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 16px; }
.counter { color: var(--ink-soft); }

.dot-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mini-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mini-dot:hover     { background: rgba(0,0,0,0.3); }
.mini-dot.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }

@media (max-width: 1024px) {
  .top-bar-gallery               { grid-template-columns: 1fr 1fr; }
  .top-bar-gallery .cell-mode,
  .top-bar-gallery .cell-tags    { display: none; }

  .collection-browser { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .collection-sidebar { border-right: 0; border-bottom: var(--border); padding: 12px var(--pad); overflow-x: auto; overflow-y: hidden; }
  .sidebar-header, .list-divider, .list-meta { display: none; }

  .collection-list { display: flex; gap: 8px; flex-wrap: nowrap; }
  .collection-item { flex: 0 0 auto; border: 1px solid var(--ink); border-left-width: 1px; padding: 8px 14px; white-space: nowrap; }
  .collection-item.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .collection-item.is-active .count { color: var(--bg); opacity: 0.7; }
}

@media (max-width: 600px) {
  .carousel-stage  { padding: 24px 16px; }
  .carousel-card   { width: 80vw; }
  .arrow { width: 40px; height: 40px; font-size: 24px; top: auto; bottom: 88px; transform: none; }
  .arrow.left  { left: 16px; }
  .arrow.right { right: 16px; }
  .carousel-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .dot-row { justify-content: center; }
}


/* =============================================================
   16. SHOP PAGE  (shop.html)
   -------------------------------------------------------------
   Editorial card style — each card stacks an info block
   (ID + name + price + spec + ADD TO CART arrow) on top
   of a big product image. Cart drawer slides in from right.
   -------------------------------------------------------------
   Data lives in script.js section 7 — edit the `products`
   object there to add, remove, or reprice items.
   ============================================================= */

/* --- Cart button in the top bar --- */
.cart-toggle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color 0.15s ease, transform 0.2s ease;
}
.cart-toggle:hover                 { color: var(--accent); }
.cart-toggle.has-items #cartCount  { color: var(--accent); font-weight: 700; }

@keyframes pulseCart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); color: var(--accent); }
}
.cart-toggle.is-pulse { animation: pulseCart 0.4s ease; }


/* --- FILTER BAR (numbered editorial style) --- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--pad);
  border-bottom: var(--border);
  background: var(--bg);
  flex-wrap: wrap;
}
.filter-label {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.filter-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  flex: 1;
}

/* Each filter is a minimal text link, not a pill */
.filter-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 0.15s ease;
  position: relative;
}
.filter-pill .num   { font-size: 10px; color: var(--muted); font-weight: 500; }
.filter-pill .count { color: var(--muted); margin-left: 2px; font-size: 10px; }

.filter-pill:hover                   { color: var(--accent); }
.filter-pill.is-active               { color: var(--accent); }
.filter-pill.is-active .num          { color: var(--accent); }
.filter-pill.is-active::after {
  content: "";
  position: absolute;
  left: 14px;                       /* skip the num prefix */
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
}


/* --- PRODUCT GRID --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--border);
}

.product-card {
  border-right:  var(--border);
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  transition: background 0.2s ease;
}
.product-card:nth-child(3n) { border-right: 0; }
.product-card:hover         { background: #f6f6f6; }
.product-card:hover .product-image { transform: scale(1.02); }


/* --- INFO SECTION (top half of card) --- */
.product-info {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-bottom: var(--border);
}

.info-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.info-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.info-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.info-value {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.info-spec-value {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.info-price-value {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
  font-weight: 500;
}

/* ADD TO CART → inline arrow link */
.add-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: right;
  align-self: start;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.add-link:hover { color: var(--accent); }
.add-link.is-soldout {
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}


/* --- IMAGE SECTION (bottom half of card) --- */
.product-image {
  width: 100%;
  flex: 1;
  min-height: 280px;
  background-color: var(--bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}


/* --- CART DRAWER --- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity 0.3s ease;
}
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--bg);
  z-index: 95;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.7,.1,.2,1);
  border-left: var(--border);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: var(--border);
  flex-shrink: 0;
}
.cart-header h2 { font-size: 12px; font-weight: 500; margin: 0; }

.cart-close {
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-close:hover { color: var(--accent); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--pad);
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--border);
  align-items: center;
}
.cart-thumb {
  width: 64px;
  height: 80px;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
}
.cart-info { min-width: 0; }
.cart-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qty-stepper { display: flex; align-items: center; gap: 10px; }
.qty-stepper button {
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.qty-stepper button:hover { background: var(--ink); color: var(--bg); }
.qty-num { min-width: 18px; text-align: center; font-family: var(--font-mono); font-size: 12px; }

.cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-line-price { font-family: var(--font-mono); font-size: 13px; }
.cart-remove {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.06em;
}
.cart-remove:hover { color: var(--accent); }

.cart-empty {
  padding: 60px var(--pad);
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cart-empty .keep-browsing {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  background: transparent;
}
.cart-empty .keep-browsing:hover { background: var(--ink); color: var(--bg); }

.cart-footer {
  padding: 20px var(--pad);
  border-top: var(--border);
  flex-shrink: 0;
}
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cart-subtotal .label { font-size: 12px; color: var(--muted); }
.cart-subtotal .value { font-weight: 900; font-size: 28px; letter-spacing: -0.02em; }
.cart-shipping { font-size: 10px; color: var(--muted); margin-bottom: 16px; }

.cart-checkout {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cart-checkout:hover { opacity: 0.85; }


/* --- SHOP RESPONSIVE --- */
@media (max-width: 1024px) {
  .product-grid               { grid-template-columns: repeat(2, 1fr); }
  .product-card:nth-child(3n) { border-right: var(--border); }
  .product-card:nth-child(2n) { border-right: 0; }

  .filter-row                 { overflow-x: auto; flex-wrap: nowrap; gap: 20px; }
  .filter-pill                { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 600px) {
  .product-grid               { grid-template-columns: 1fr; }
  .product-card               { border-right: 0; }
  .cart-drawer                { width: 100vw; max-width: 100vw; }
  .filter-bar                 { gap: 12px; }
  .info-value                 { font-size: 15px; }
}


/* =============================================================
   MUSIC PLAYER — persistent across pages
   -------------------------------------------------------------
   Fixed bottom-left bar. Editorial / mono aesthetic. Collapses
   to a single play button. Track + position resume via
   localStorage so playback survives page navigation.
   ============================================================= */
.music-player {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 80;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: rgba(15, 15, 15, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-mono);
  user-select: none;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.music-player.is-collapsed {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.music-player.is-collapsed .mp-info,
.music-player.is-collapsed .mp-prev,
.music-player.is-collapsed .mp-next,
.music-player.is-collapsed .mp-collapse,
.music-player.is-collapsed .mp-play { display: none; }
.music-player.is-collapsed .mp-bar { padding: 0; }

/* Expand button — only visible when player is collapsed */
.mp-expand { display: none; }
.music-player.is-collapsed .mp-expand {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  font-size: 16px;
}
.music-player.is-collapsed .mp-expand.is-playing {
  animation: mp-pulse 1.8s ease-in-out infinite;
}
@keyframes mp-pulse {
  0%, 100% { background: transparent; }
  50%      { background: rgba(255, 255, 255, 0.14); }
}

.mp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.mp-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 1px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.mp-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}
.mp-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mp-btn.mp-play { font-size: 12px; }

.mp-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mp-track {
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

.mp-progress {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
  cursor: pointer;
  overflow: hidden;
}
.mp-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #fff;
  border-radius: 1px;
  transition: width 0.1s linear;
}

@media (max-width: 600px) {
  .music-player {
    width: 270px;
    bottom: 12px;
    left: 12px;
  }
  .mp-btn { width: 26px; height: 26px; }
}