/** Shopify CDN: Minification failed

Line 1730:0 Unexpected "}"
Line 1815:0 Unexpected "}"

**/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #f5f0e8;
  --bone: #ede5d5;
  --warm-white: #faf7f2;
  --charcoal: #1a1814;
  --stone: #6b6358;
  --gold: #b89c6e;
  --gold-light: #d4b98a;
  --marble-vein: #c8bfb0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--warm-white);
  color: var(--charcoal);
  overflow-x: hidden;
}

/* ─────────────────────────────
   NAV
───────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(28px * var(--vg-scale, 1)) calc(56px * var(--vg-scale, 1));
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--marble-vein);
  padding: calc(16px * var(--vg-scale, 1)) calc(56px * var(--vg-scale, 1));
}

.logo {
  font-family: 'Times New Roman', Times, serif;
  font-size: calc(20px * var(--vg-scale, 1));
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--charcoal);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  z-index: 10;
}

.footer-logo { color: var(--cream) !important; }

/* NAV LINKS */
.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  align-items: center;
}

.nav-item { position: relative; }

.nav-item > a {
  display: block;
  font-size: calc(11px * var(--vg-scale, 1));
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  padding: calc(8px * var(--vg-scale, 1)) calc(18px * var(--vg-scale, 1));
  position: relative;
  transition: color 0.3s;
}

.nav-item > a::after {
  content: '';
  position: absolute;
  bottom: calc(2px * var(--vg-scale, 1)); left: calc(18px * var(--vg-scale, 1)); right: calc(18px * var(--vg-scale, 1));
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.nav-item:hover > a::after { transform: scaleX(1); }
/* Same gold token + transition Oferta's underline already uses, shared
   equally by every .nav-item since Oferta/Producenci/O nas/Custom Made
   all use identical <li class="nav-item has-dropdown"> markup — there
   is no separate Oferta-only rule to copy. #nav-scoped (the real id on
   <nav>, not an invented hook) so it outranks the per-template
   `color: var(--charcoal) !important` overrides further down this file,
   which have no :hover exception and were otherwise winning. */
#nav .nav-item:hover > a { color: var(--gold) !important; }

.nav-item.has-dropdown > a .arrow {
  display: inline-block;
  width: calc(5px * var(--vg-scale, 1)); height: calc(5px * var(--vg-scale, 1));
  border-right: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  transform: rotate(45deg) translateY(-2px);
  margin-left: calc(6px * var(--vg-scale, 1));
  transition: transform 0.3s;
  vertical-align: middle;
}
.nav-item.has-dropdown:hover > a .arrow {
  transform: rotate(-135deg) translateY(-2px);
}
/* NAV transparent — białe linki nad hero */
nav:not(.scrolled) .logo { color: var(--warm-white); }
nav:not(.scrolled) .nav-item > a { color: var(--warm-white); }
nav:not(.scrolled) .nav-item > a::after { background: var(--warm-white); }
nav:not(.scrolled) .nav-right a,
nav:not(.scrolled) .nav-right button { color: var(--warm-white); }
nav:not(.scrolled) .hamburger span { background: var(--warm-white); }

/* DROPDOWN */
.dropdown {
  position: absolute;
  top: calc(100% + 4px * var(--vg-scale, 1));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  border: 1px solid var(--marble-vein);
  border-top: 2px solid var(--gold);
  min-width: calc(200px * var(--vg-scale, 1));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 calc(24px * var(--vg-scale, 1)) calc(64px * var(--vg-scale, 1)) rgba(26,24,20,0.1);
  pointer-events: none;
}
.nav-item::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(20px * var(--vg-scale, 1));
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.dropdown-wide {
  min-width: calc(480px * var(--vg-scale, 1));
  display: grid;
  grid-template-columns: 1fr 1fr;
  left: 0;
  transform: translateX(0) translateY(-8px);
}
.nav-item:hover .dropdown-wide {
  transform: translateX(0) translateY(0);
}

.dropdown-col { padding: calc(28px * var(--vg-scale, 1)); }
.dropdown-col:first-child { border-right: 1px solid var(--bone); }

.dropdown-col-title {
  font-size: calc(9px * var(--vg-scale, 1)); font-weight: 400;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: calc(16px * var(--vg-scale, 1));
  padding-bottom: calc(12px * var(--vg-scale, 1));
  border-bottom: 1px solid var(--bone);
}

.dropdown ul { list-style: none; display: flex; flex-direction: column; gap: calc(2px * var(--vg-scale, 1)); }

.dropdown ul li a {
  display: block;
  font-size: calc(12px * var(--vg-scale, 1)); font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--stone); text-decoration: none;
  padding: calc(7px * var(--vg-scale, 1)) 0;
  transition: color 0.2s, padding-left 0.2s;
}
.dropdown ul li a:hover { color: var(--gold); padding-left: calc(6px * var(--vg-scale, 1)); }

/* Brought to the same premium/integrated treatment as .dropdown-producers:
   warm background instead of stark white, the heavy gold top-border
   swapped for the same subtle all-round marble-vein edge, left-anchored
   under the trigger word instead of floating centered, and the same
   slower/eased opening transition — so O Nas / Custom Made read as part
   of the same system rather than a separate generic dropdown. */
.dropdown-simple {
  left: 0;
  transform: translateX(0) translateY(-8px);
  min-width: calc(240px * var(--vg-scale, 1));
  padding: calc(12px * var(--vg-scale, 1)) 0;
  background: var(--warm-white);
  border-color: var(--marble-vein);
  border-radius: 2px;
  box-shadow: 0 calc(26px * var(--vg-scale, 1)) calc(64px * var(--vg-scale, 1)) rgba(26, 24, 20, 0.12);
  overflow: hidden;
  transition: opacity 0.35s cubic-bezier(.19,1,.22,1),
              transform 0.35s cubic-bezier(.19,1,.22,1),
              visibility 0.35s;
}
.nav-item:hover .dropdown-simple {
  transform: translateX(0) translateY(0);
}
.dropdown-simple ul li a {
  padding: calc(12px * var(--vg-scale, 1)) calc(28px * var(--vg-scale, 1));
  font-size: calc(15px * var(--vg-scale, 1));
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  transition: padding-left 0.3s ease, background 0.3s ease, color 0.2s ease;
}
.dropdown-simple ul li a:hover {
  padding-left: calc(34px * var(--vg-scale, 1));
  background: rgba(184, 156, 110, 0.07);
  color: var(--gold);
}

.dropdown-teaser {
  padding: calc(28px * var(--vg-scale, 1));
  background: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  min-height: calc(200px * var(--vg-scale, 1));
}

.dropdown-teaser-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #cdc5b8 0%, #b8b0a4 60%, #a8a098 100%);
}
.dropdown-teaser-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-30deg, transparent 0, transparent 40px, rgba(255,255,255,0.06) 40px, rgba(255,255,255,0.06) 41px);
}
.dropdown-teaser-text { position: relative; z-index: 1; }
.dropdown-teaser-label {
  font-size: calc(9px * var(--vg-scale, 1)); font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: calc(6px * var(--vg-scale, 1));
}
.dropdown-teaser-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: calc(18px * var(--vg-scale, 1)); font-weight: 300; color: white; line-height: 1.3;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: calc(20px * var(--vg-scale, 1));
  font-size: calc(11px * var(--vg-scale, 1)); font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  position: relative; z-index: 10;
}
.nav-right a { color: var(--charcoal); text-decoration: none; transition: color 0.2s; }
.nav-right a:hover { color: var(--gold); }

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px; z-index: 200;
}
.hamburger span {
  display: block; width: 24px; height: 1px;
  background: var(--charcoal);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.search-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--warm-white);
  border-bottom: 1px solid var(--marble-vein);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  z-index: 99;
}
.search-bar.open {
  max-height: 100px;
  padding: 24px 56px;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}
.search-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--charcoal);
  background: transparent;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  padding: 12px 0;
  outline: none;
}
.search-submit svg, .search-close svg {
  pointer-events: none;
}
.search-submit, .search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--charcoal);
}

.search-close {
  font-size: 24px;
  line-height: 1;
}
nav.search-active .search-icon {
  color: var(--charcoal) !important;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: #fff; z-index: 150;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 300;
  letter-spacing: 0.1em; color: var(--charcoal); text-decoration: none;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mobile-cart {
  font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone);
  margin-top: 12px;
}

/* ─────────────────────────────
   HERO
───────────────────────────── */
.mb-hero {
  height: 100vh; /* fallback for browsers without svh support */
  /* 100svh locks to the SMALLEST possible iOS Safari viewport and never
     recalculates as the toolbar collapses/expands while scrolling — this
     is what stopped the hero from visibly stretching/shrinking mid-scroll.
     Desktop is unaffected: the min-width:1101px zoom-compensation block in
     velangi-home-patch.css sets `min-height: 133.334vh !important` on this
     same selector, which is always larger than either vh or svh here and
     so fully determines the rendered height there regardless of this
     `height` value — no separate desktop-scoped override is needed. */
  height: 100svh;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--charcoal); /* fallback while the video loads */
}

.mb-hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}

.mb-hero-bg-video {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.85;
}

/* Top/bottom darkening gradient — lighter through the middle where the
   centered text sits, matching the DLA Stone benchmark's overlay. */
.mb-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(20,18,15,0.38) 0%,
    rgba(20,18,15,0.16) 40%,
    rgba(20,18,15,0.55) 100%
  );
}

/* Radial vignette — darkens the edges, keeps the centered content clear. */
.mb-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.42) 100%);
}

.mb-hero-content {
  position: relative; z-index: 3;
  padding: 0 calc(32px * var(--vg-scale, 1)); max-width: calc(620px * var(--vg-scale, 1));
  padding-bottom: 14vh; /* lower-third placement — bottom breathing room, ~14% of hero height */
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.mb-hero-eyebrow {
  font-size: calc(18px * var(--vg-scale, 1)); font-weight: 400;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: calc(24px * var(--vg-scale, 1));
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.8s 0.3s forwards;
}

.mb-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(
    calc(36px * var(--vg-scale, 1)),
    4vw,
    calc(60px * var(--vg-scale, 1))
  );
  font-weight: 500; line-height: 1.05;
  color: var(--warm-white);   /* ← było: var(--charcoal) */
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
  margin-bottom: calc(32px * var(--vg-scale, 1));
  opacity: 0; transform: translateY(30px);
  animation: fadeUp 1s 0.5s forwards;
}
.mb-hero-title em { font-style: italic; color: var(--gold-light); }  /* ← było: var(--stone) */


.mb-hero-sub {
  font-size: calc(20px * var(--vg-scale, 1)); font-weight: 400;
  letter-spacing: 0.08em; color: rgba(250,247,242,0.80);
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  line-height: 1.8; margin-bottom: calc(48px * var(--vg-scale, 1)); max-width: calc(380px * var(--vg-scale, 1));
  opacity: 0; animation: fadeUp 1s 0.7s forwards;
}

.mb-hero-cta {
  display: inline-flex; align-items: center; gap: calc(16px * var(--vg-scale, 1));
  font-size: calc(11px * var(--vg-scale, 1)); font-weight: 300;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--warm-white); text-decoration: none;
  padding-bottom: calc(8px * var(--vg-scale, 1)); border-bottom: 1px solid var(--gold);
  opacity: 0; animation: fadeUp 1s 0.9s forwards;
  transition: gap 0.3s ease, color 0.3s ease;
}
.mb-hero-cta:hover { gap: calc(24px * var(--vg-scale, 1)); color: var(--gold-light); }

.mb-hero-arrow { width: calc(32px * var(--vg-scale, 1)); height: calc(1px * var(--vg-scale, 1)); background: currentColor; position: relative; }
.mb-hero-arrow::after {
  content: ''; position: absolute; right: 0; top: calc(-3px * var(--vg-scale, 1));
  width: calc(7px * var(--vg-scale, 1)); height: calc(7px * var(--vg-scale, 1));
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.mb-hero-scroll {
  position: absolute; bottom: calc(40px * var(--vg-scale, 1)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(12px * var(--vg-scale, 1));
  font-size: calc(9px * var(--vg-scale, 1)); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--stone); opacity: 0; animation: fadeUp 1s 1.2s forwards;
}
.scroll-line { width: calc(40px * var(--vg-scale, 1)); height: calc(1px * var(--vg-scale, 1)); background: var(--marble-vein); position: relative; overflow: hidden; }
.scroll-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--gold);
  animation: scrollPulse 2s 1.5s infinite;
}

/* ─────────────────────────────
   MARQUEE
───────────────────────────── */
.mb-marquee { display: none;
  background: var(--charcoal); padding: calc(18px * var(--vg-scale, 1)) 0;
  overflow: hidden; white-space: nowrap;
}
.mb-marquee-track { display: inline-flex; animation: marquee 25s linear infinite; }
.mb-marquee-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: calc(14px * var(--vg-scale, 1)); font-weight: 300; font-style: italic;
  letter-spacing: 0.15em; color: var(--gold-light); padding: 0 calc(48px * var(--vg-scale, 1));
}

/* ─────────────────────────────
   SECTION COMMONS
───────────────────────────── */
.mb-section { padding: calc(60px * var(--vg-scale, 1)) calc(56px * var(--vg-scale, 1)); }

.mb-section-label {
  font-size: calc(9px * var(--vg-scale, 1)); font-weight: 400;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: calc(20px * var(--vg-scale, 1));
}

.mb-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: calc(clamp(38px, 4vw, 60px) * var(--vg-scale, 1));
  font-weight: 300; line-height: 1.1; color: var(--charcoal);
}

/* ─────────────────────────────
   COLLECTIONS
───────────────────────────── */
.mb-collections { background: var(--warm-white); padding-left: 0; padding-right: 0; }

/* No header on the homepage — tiles start immediately under the hero. */
.mb-collections--no-header { padding-top: 0; }

.mb-collections-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; margin-bottom: 56px;
  padding-left: 56px; padding-right: 56px;
}

.mb-see-all {
  font-size: calc(11px * var(--vg-scale, 1)); font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); text-decoration: none; transition: color 0.3s;
}
.mb-see-all:hover { color: var(--gold); }

/* Full-bleed row of uniform tiles — same width, same fixed height, same
   hairline gap for every card, mirroring the DLA Stone benchmark's own
   card treatment exactly (DLA: equal flex-basis width, height:65vh with a
   500px floor, cover-cropped image, no aspect-ratio trick). 5 equal columns
   here stands in for DLA's 4-visible-of-8 row since our catalog is a fixed
   5, not a scrollable set — same form, adapted column count. */
.mb-collections-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.mb-col-card {
  position: relative; overflow: hidden; cursor: pointer; background: var(--bone);
  height: 65vh;
  min-height: 500px;
  -webkit-touch-callout: none; /* press/hold shouldn't raise iOS's image callout menu */
}

.mb-col-img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  /* Category/collection tiles show the source image in its original colour
     and brightness at all times (no grayscale desaturation, no dark scrim).
     The only remaining image motion is the hover zoom (transform) below. */
  transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.mb-col-card:hover .mb-col-img { transform: scale(1.045); }

/* Dark bottom-weighted scrim removed per request — the caption sits directly
   on the unmodified image. Element kept in markup but painted transparent so
   layout, hover behaviour and the text on top are all unchanged. */
.mb-col-overlay {
  position: absolute; inset: 0;
}

.mb-col-info { position: absolute; bottom: 40px; left: 40px; right: 40px; color: white; text-align: left; }

.mb-col-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 300; letter-spacing: 0.02em; margin-bottom: 16px;
}

.mb-col-cta {
  font-size: 10px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-light); opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s 0.1s, transform 0.3s 0.1s;
}
.mb-col-card:hover .mb-col-cta { opacity: 1; transform: translateY(0); }

/* marble placeholders */
.mb-m1 { background: linear-gradient(135deg,#d4cec5,#c2bbb0,#b8b0a5,#cac3b8); }
.mb-m2 { background: linear-gradient(160deg,#e8e0d4,#d0c8bc,#bfb8ad); }
.mb-m3 { background: linear-gradient(110deg,#c8c0b4,#d8d0c4,#c0b8ac); }
.mb-m4 { background: linear-gradient(140deg,#ddd5c8,#c8c0b4,#b8b0a4); }
.mb-m5 { background: linear-gradient(120deg,#ccc4b8,#d4ccc0,#bab2a6); }

.mb-marble-ph {
  width: 100%; height: 100%; min-height: inherit;
  position: relative; overflow: hidden;
}
.mb-marble-ph::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-30deg, transparent 0, transparent 60px, rgba(255,255,255,0.07) 60px, rgba(255,255,255,0.07) 62px),
    repeating-linear-gradient(60deg, transparent 0, transparent 90px, rgba(0,0,0,0.04) 90px, rgba(0,0,0,0.04) 91px);
}

/* ─────────────────────────────
   CRAFTSMANSHIP
───────────────────────────── */
.mb-craft {
  background: var(--charcoal);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.mb-craft-img-wrap { position: relative; height: 560px; }

.mb-craft-img {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #3a3530, #2a2520, #1e1a16);
  position: relative; overflow: hidden;
}
.mb-craft-img::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 100px, rgba(184,156,110,0.04) 100px, rgba(184,156,110,0.04) 101px);
}

.mb-craft-accent {
  position: absolute; bottom: -20px; right: -20px;
  width: 160px; height: 160px;
  border: 1px solid var(--gold); opacity: 0.3;
}

.mb-craft-content { color: var(--cream); }
.mb-craft-content .mb-section-label { color: var(--gold); }
.mb-craft-content .mb-section-title { color: var(--cream); margin-bottom: 32px; }
.mb-craft-content .mb-section-title em { font-style: italic; color: var(--gold-light); }

.mb-craft-text {
  font-size: 19px; font-weight: 300;
  line-height: 1.9; color: rgba(245,240,232,0.65); margin-bottom: 48px;
}

.mb-craft-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
  border-top: 1px solid rgba(184,156,110,0.2); padding-top: 40px;
}

.mb-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px; font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 8px;
}
.mb-stat-label {
  font-size: 14px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,232,0.45);
}

/* ─────────────────────────────
   FEATURED PRODUCTS
───────────────────────────── */
.mb-featured { background: var(--cream); padding: 120px 0; }
.mb-featured-inner { padding: 0 56px; }
.mb-featured-header { text-align: center; margin-bottom: 80px; }

.mb-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }

.mb-product-card { background: var(--bone); cursor: pointer; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.mb-product-img { height: 600px; overflow: hidden; }
.mb-product-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.mb-product-card:hover .mb-product-ph { transform: scale(1.05); }
.mb-product-info { padding: 20px 24px 28px; }
.mb-product-collection { font-size: 9px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.mb-product-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--charcoal); margin-bottom: 6px; }
.mb-product-material { font-size: 11px; font-weight: 300; color: var(--stone); }
.mb-product-price { font-size: 13px; font-weight: 300; color: var(--charcoal); margin-top: 16px; }

/* ─────────────────────────────
   CUSTOM MADE
───────────────────────────── */
.mb-custom {
  background: var(--bone); padding: 100px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}

.mb-custom-desc { font-size: 14px; font-weight: 300; line-height: 1.9; color: var(--stone); margin-bottom: 48px; max-width: 420px; }

.mb-btn-outline {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--charcoal); text-decoration: none;
  border: 1px solid var(--charcoal); padding: 16px 32px;
  transition: background 0.3s, color 0.3s;
}
.mb-btn-outline:hover { background: var(--charcoal); color: var(--cream); }

.mb-custom-right { height: 480px; }
.mb-custom-img {
  width: 100%; height: 100%;
  background: linear-gradient(150deg, #cdc5b8, #b8b0a4, #a8a098);
  position: relative; overflow: hidden;
}
.mb-custom-img::after {
  content: '"Every piece\A is a conversation\A between stone and craft."';
  white-space: pre;
  position: absolute; bottom: 32px; left: 32px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 18px; font-weight: 300; color: rgba(26,24,20,0.5); line-height: 1.5;
}

/* ─────────────────────────────
   MATERIALS
───────────────────────────── */
.mb-materials { background: var(--warm-white); text-align: center; }
.mb-materials-header { margin-bottom: 64px; }

.mb-materials-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; margin-top: 48px; }

.mb-swatch { height: 180px; position: relative; cursor: pointer; overflow: hidden; }
.mb-swatch-inner { width: 100%; height: 100%; transition: transform 0.5s ease; }
.mb-swatch:hover .mb-swatch-inner { transform: scale(1.08); }

.mb-swatch-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;
  background: linear-gradient(to top, rgba(26,24,20,0.7), transparent);
  font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-align: left;
}

.mb-sw-carrara { background: linear-gradient(135deg,#f0ece6,#e0dbd3,#d4cec6); }
.mb-sw-nero    { background: linear-gradient(135deg,#1a1814,#2a2620,#1e1a16); }
.mb-sw-trav    { background: linear-gradient(135deg,#d8c8a8,#c8b898,#bca888); }
.mb-sw-onyx    { background: linear-gradient(135deg,#3a4830,#2c3824,#202c1a); }
.mb-sw-honey   { background: linear-gradient(135deg,#c89850,#b88840,#a87830); }

/* ─────────────────────────────
   FOOTER
───────────────────────────── */
/* Deliberately darker than --charcoal (the materials/"Dziesięć kamieni"
   section directly above shares that exact variable, which is why the
   footer previously blended straight into it) plus a muted gold hairline
   at the very top — same warm palette, just a clear, quiet transition
   rather than a hard ecommerce divider. */
.site-footer {
  background: #120f0c;
  border-top: 1px solid rgba(184, 156, 110, 0.25);
  /* Rebalance pass (2026-09-15): tighter top / more breathing room at
     the bottom. Top pad 82→44 (was already trimmed once before, 104→82
     — this continues that direction, content now starts noticeably
     closer to the section above). Bottom pad 32→48, footer-inner's own
     margin-bottom 42→56 and footer-bottom's padding-top 24→32 (below)
     together extend and open up the lower half — more room between the
     nav columns, the divider, and the copyright line. Side padding
     (56px) is unchanged — it's the same horizontal value `nav` itself
     uses (see `nav { padding: ... 56px }` above), which is what keeps
     the footer aligned to the site's main content grid; not a value
     this pass has any reason to touch. */
  padding: 44px 56px 48px;
  color: var(--cream);
}

.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px; margin-bottom: 56px;
}

.footer-brand .logo { display: block; margin-bottom: 20px; }

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  /* Size/position pass (2026-09-15): 18px felt oversized and sat too low
     under the logo — dropped ~11% to 16px, and pulled up with a negative
     margin-top so it collapses against the logo's own margin-bottom
     (20px) for a clean 20px shift with no added gap. .footer-newsletter's
     margin-top is bumped by the same 20px below so "DOŁĄCZ DO VELANGI"
     stays at its original position. */
  font-size: 16px; font-style: italic; font-weight: 300;
  color: rgba(245,240,232,0.5); line-height: 1.7;
  margin-top: -20px;
}

/* Footer section headings + the newsletter heading share this rule
   (2026-09-15 typography pass): font-weight 300 and letter-spacing
   0.2em are not new values invented for the footer — they're copied
   directly from the desktop nav's own winning link rule, `.nav-item >
   a` (this file, line ~68: font-weight:300; letter-spacing:0.2em;
   text-transform:uppercase). Font-family is untouched because it was
   already the same: neither this rule nor `.nav-item > a` sets its own
   font-family, so both already inherit the same `body { font-family:
   'Jost', sans-serif }` (aliased to the site's self-hosted Satoshi in
   theme.liquid) — there was nothing to change there. Size (18px, vs.
   nav's 11px) and the gold color are kept as-is: hierarchy between a
   footer section heading and a nav link is carried by size/color, not
   by a second typographic system. */
.footer-col-title,
.footer-newsletter-heading {
  /* Size-only follow-up (2026-09-15): the previous pass changed
     font-weight/letter-spacing/uppercase to match nav but left this at
     its old 18px — uppercase + 0.2em tracking reads noticeably larger
     at the same point size than the old lowercase/tighter-tracked
     version did, which is what made the footer feel oversized. Weight,
     letter-spacing, uppercase and color are unchanged from the previous
     pass; only the size comes down, to the eyebrow/label scale already
     used elsewhere in this system (e.g. .producers-menu__eyebrow,
     13px) rather than an invented number. */
  font-size: 14px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  /* Same size-only follow-up as .footer-col-title above: font-weight
     300/letter-spacing 0.2em/uppercase (matching `.nav-item > a`) are
     unchanged from the previous pass; only the size comes down from the
     old 16px, which read too large once uppercase + wide tracking were
     applied to it. */
  font-size: 13px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,232,0.5); text-decoration: none; transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(184,156,110,0.15); padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 300; letter-spacing: 0.1em;
  color: rgba(245,240,232,0.3);
}

/* NEWSLETTER — sits under the tagline in the brand/left column, so it
   naturally balances the three nav columns to its right instead of
   competing with them. Deliberately restrained per spec: transparent
   background, a single hairline instead of a boxed/rounded input, no
   filled button — just an arrow, matching the same quiet luxury
   language as the rest of the footer. */
.footer-newsletter {
  /* Approved micro-adjust (2026-09-15): shifts the whole block (heading
     + input + arrow) down ~16px as a unit — internal spacing between
     them (heading's own margin-bottom, field's own padding) is
     untouched, only this outer offset changed.
     +20px again same day, paired 1:1 with .footer-tagline's new -20px
     margin-top above — keeps "DOŁĄCZ DO VELANGI" at its original
     position while the tagline block moves up on its own. */
  margin-top: 64px;
  max-width: 340px;
}

.footer-newsletter-heading {
  margin-bottom: 8px; /* tightened from 14px now that a description line sits directly under it */
}

/* Same register as .footer-tagline (not the nav-matched uppercase
   heading/link treatment) — this is a short sentence, not a label, so
   it reads as body copy: normal case, no letter-spacing. */
.footer-newsletter-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.5);
  margin: 0 0 16px;
}

.footer-newsletter-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.3);
  padding-bottom: 10px;
  transition: border-color 0.25s ease;
}
.footer-newsletter-field:focus-within {
  border-color: var(--gold);
}

.footer-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--cream);
  padding: 0;
}
.footer-newsletter-input::placeholder {
  color: rgba(245, 240, 232, 0.4);
}

.footer-newsletter-submit {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--cream);
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-newsletter-submit:hover {
  color: var(--gold);
  transform: translateX(3px);
}

.footer-newsletter-msg {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.6);
}
.footer-newsletter-msg--ok { color: var(--gold-light); }
.footer-newsletter-msg--err { color: #c98a6b; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* EMAIL MARKETING DOUBLE-OPT-IN CONFIRMATION (/account/subscribe) —
   .shopify-email-marketing-confirmation__container is Shopify's own
   system-generated wrapper for that route, not ours. Fail-safe rebuild
   (2026-09-15): CSS does NOT touch that class at all any more — it is
   the fallback, not dead weight. velangi.js only hides it (via an
   inline style, not this stylesheet) after it has successfully built
   and inserted the branded .vg-confirm-section below; if that script
   never runs or throws first, the native container stays exactly as
   Shopify rendered it — unstyled, but visible and functional. See the
   route-scoped IIFE in velangi.js for the full fail-safe sequence. */
.vg-confirm-section {
  background: var(--warm-white);
  padding: 140px 24px;
}
.vg-confirm {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.vg-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--charcoal);
  margin: 0 0 20px;
}
.vg-confirm-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--stone);
  margin: 0 0 6px;
}
.vg-confirm-text--last { margin-bottom: 36px; }
.vg-confirm-unsub {
  display: block;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(107, 99, 88, 0.55);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.vg-confirm-unsub:hover { color: var(--stone); }
@media (max-width: 768px) {
  .vg-confirm-section { padding: 88px 24px; }
}

/* ─────────────────────────────
 /* ─────────────────────────────
   PRODUCT PAGE — VELANGI
───────────────────────────── */
.vp-page {
  display: grid;
  grid-template-columns: 55% 45%;
  padding-top: 80px; /* wysokość nava */
}

/* GALLERY */
.vp-gallery {
  background: #f0eeeb;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vp-gallery::-webkit-scrollbar { display: none; }

.vp-gallery-item {
  display: none;
}
.vp-placeholder {
  width: 100%;
  min-height: 300px;
}

/* INFO PANEL */
.vp-info {
  padding: 60px 56px 80px 56px;
  background: var(--warm-white);
  overflow-y: auto;
}

.vp-vendor {
  font-size: 9px; font-weight: 300;
  letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}

.vp-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 300; line-height: 1.15;
  color: var(--charcoal); margin-bottom: 20px;
}

.vp-price {
  font-size: 17px; font-weight: 300;
  color: var(--charcoal); letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.vp-sep {
  border: none;
  border-top: 1px solid var(--marble-vein);
  margin: 28px 0;
}

/* VARIANTS */
.vp-variants {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 28px;
}
.vp-variant-opt input { display: none; }
.vp-variant-opt span {
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--marble-vein);
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--stone); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.vp-variant-opt input:checked + span {
  border-color: var(--charcoal); color: var(--charcoal);
}
.vp-variant-opt input:disabled + span {
  opacity: 0.35; cursor: not-allowed;
}

/* ADD TO CART */
.vp-btn-cart {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--charcoal); color: var(--warm-white);
  border: none; border-radius: 100px;
  padding: 18px 40px;
  font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.25em; text-transform: uppercase;
  cursor: pointer; transition: background 0.3s;
  margin-bottom: 0;
}
.vp-btn-cart:hover { background: #2e2c28; }
.vp-btn-cart:disabled {
  background: var(--marble-vein); cursor: not-allowed;
}

/* ACCORDION */
.vp-accordion { border: none; }
.vp-accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 4px 0;
  font-size: 12px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--charcoal);
  user-select: none;
}
.vp-accordion-head::-webkit-details-marker { display: none; }

.vp-plus-v {
  transition: opacity 0.25s;
}
details[open] .vp-plus-v { opacity: 0; }

.vp-accordion-icon svg {
  display: block; color: var(--stone);
}

.vp-accordion-body {
  padding: 20px 0 8px;
  font-size: 13px; font-weight: 300;
  line-height: 1.95; color: var(--stone);
  text-align: justify;
}
.vp-accordion-body p { margin-bottom: 16px; }
.vp-accordion-body p:last-child { margin-bottom: 0; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .vp-page { grid-template-columns: 1fr; padding-top: 80px; }
  .vp-gallery { position: static; max-height: none; }
  .vp-gallery-item { min-height: 60vw; }
  .vp-gallery-item img { max-height: 70vw; }
  .vp-info { padding: 48px 32px 60px; }
}

@media (max-width: 768px) {
  .vp-gallery-item { min-height: 80vw; }
  .vp-gallery-item img { max-height: none; object-fit: cover; }
  .vp-info { padding: 36px 24px 60px; }
  .vp-title { font-size: clamp(26px, 6vw, 36px); }
}
/* ─────────────────────────────
   FULLSCREEN PAIRS
───────────────────────────── */
.mb-pairs { background: var(--charcoal); }

.mb-pairs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.mb-pair-card {
  position: relative;
  height: 75vh;
  overflow: hidden;
  display: block;
  cursor: pointer;
}

.mb-pair-bg {
  position: absolute; inset: 0;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mb-pair-card:hover .mb-pair-bg {
  transform: scale(1.04);
}

.mb-pair-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,24,20,0.55) 0%,
    rgba(26,24,20,0.1) 40%,
    transparent 70%
  );
  transition: opacity 0.4s;
}
.mb-pair-card:hover .mb-pair-overlay {
  opacity: 0.75;
}

.mb-pair-info {
  position: absolute;
  bottom: 40px;
  left: 40px;
}

.mb-pair-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 300;
  color: white;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.mb-pair-cta {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color 0.3s;
}
.mb-pair-card:hover .mb-pair-cta {
  color: var(--gold-light);
}

@media (max-width: 768px) {
  .mb-pairs-row { grid-template-columns: 1fr; }
  .mb-pair-card { height: 55vw; min-height: 260px; }
  .mb-pair-info { bottom: 28px; left: 24px; }
}
/* ─────────────────────────────
   FIX: NAV na stronach produktu/kolekcji
───────────────────────────── */
body.template-product nav,
body.template-collection nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--marble-vein) !important;
}

body.template-product nav .logo,
body.template-product nav .nav-item > a,
body.template-product nav .nav-right a,
body.template-product nav .nav-right button,
body.template-collection nav .logo,
body.template-collection nav .nav-item > a,
body.template-collection nav .nav-right a,
body.template-collection nav .nav-right button {
  color: var(--charcoal) !important;
}

body.template-product nav .hamburger span,
body.template-collection nav .hamburger span {
  background: var(--charcoal) !important;
}

/* ─────────────────────────────
   FIX: Zdjęcia w kolekcji
───────────────────────────── */
/* ─────────────────────────────
   COLLECTION PAGE — MARBERA STYLE
───────────────────────────── */
.collection-page { padding: 140px 56px 80px; }
.collection-header { margin-bottom: 64px; }
.collection-header .mb-section-label { margin-bottom: 16px; }

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.collection-grid .mb-product-card {
  background: transparent;
}

.collection-grid .mb-product-img {
  height: 320px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.collection-grid .mb-product-ph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collection-grid .mb-product-card:hover .mb-product-ph {
  transform: scale(1.04);
}

.collection-grid .mb-product-info {
  padding: 14px 0 0;
  background: transparent;
}

.collection-grid .mb-product-name {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.collection-grid .mb-product-collection { display: none; }
.collection-grid .mb-product-material { display: none; }

.collection-grid .mb-product-price {
  font-size: 13px;
  font-weight: 300;
  color: var(--stone);
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .collection-page { padding: 120px 32px 60px; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 768px) {
  .collection-page { padding: 100px 24px 60px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .collection-grid .mb-product-img { height: 200px; }
}-grid .mb-product-img {
  height: 360px;
}
/* ─────────────────────────────
   COLLECTION PAGE — MARBERA STYLE
───────────────────────────── */
.collection-page { padding: 140px 56px 80px; }
.collection-header { margin-bottom: 64px; }
.collection-header .mb-section-label { margin-bottom: 16px; }

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.collection-grid .mb-product-card {
  background: transparent;
}

.collection-grid .mb-product-img {
  height: 320px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.collection-grid .mb-product-ph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collection-grid .mb-product-card:hover .mb-product-ph {
  transform: scale(1.04);
}

.collection-grid .mb-product-info {
  padding: 14px 0 0;
  background: transparent;
}

.collection-grid .mb-product-name {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.collection-grid .mb-product-collection { display: none; }
.collection-grid .mb-product-material { display: none; }

.collection-grid .mb-product-price {
  font-size: 13px;
  font-weight: 300;
  color: var(--stone);
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .collection-page { padding: 120px 32px 60px; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 768px) {
  .collection-page { padding: 100px 24px 60px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .collection-grid .mb-product-img { height: 200px; }
}-grid .mb-product-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ─────────────────────────────
   FIX: Search icon — brak tła
───────────────────────────── */
button.search-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: inherit;
}

/* ─────────────────────────────
   FIX: Search bar nad product page
───────────────────────────── */
#searchBar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10002 !important;
  background: var(--warm-white) !important;
  border-bottom: 1px solid var(--marble-vein) !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

#searchBar.open {
  max-height: 120px !important;
  padding: 24px 56px !important;
}
/* ─────────────────────────────
   FIX: Nav na stronie search
───────────────────────────── */
body.template-search nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--marble-vein) !important;
}

body.template-search nav .logo,
body.template-search nav .nav-item > a,
body.template-search nav .nav-right a,
body.template-search nav .nav-right button {
  color: var(--charcoal) !important;
}

/* ─────────────────────────────
   SEARCH RESULTS PAGE
───────────────────────────── */
.search-page {
  padding: 140px 56px 80px;
  min-height: 60vh;
}

.search-page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.search-page-count {
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 64px;
}

.search-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.search-no-results {
  font-size: 15px; font-weight: 300;
  color: var(--stone); line-height: 1.8;
  padding: 40px 0;
}

.search-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); text-decoration: none;
  margin-bottom: 48px;
  transition: color 0.2s;
}
.search-back:hover { color: var(--charcoal); }
.search-back::before { content: '←'; }

@media (max-width: 1100px) {
  .search-page { padding: 120px 32px 60px; }
  .search-page-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .search-page { padding: 100px 24px 60px; }
  .search-page-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────
   CATEGORY MOSAIC — FIX
───────────────────────────── */
.mb-mosaic {
  background: var(--warm-white);
  padding: 100px 56px;
}

.mb-mosaic-header { margin-bottom: 72px; }
.mb-mosaic-header .mb-section-title em { font-style: italic; color: var(--gold); }

.mb-mosaic-grid {
  display: grid;
  /* Was 1.6fr 1fr 1fr — an explicit unequal-fraction column split that
     gave the first card (VELANGI, first in DOM order) 44% of the row
     width vs ~28% each for Italamp/Castro. repeat(3, minmax(0, 1fr))
     makes all three top-row columns mathematically equal; minmax(0, ...)
     (not bare 1fr) also guards against any one card's own background
     content ever reintroducing a content-driven minimum-width skew. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 340px 340px;
  /* The grid actually holds 9 cards (3 brands + 5 "soon" placeholders + a
     "Stoły jadalniane" category tile), which overflow the 2 explicit rows
     above into implicit row(s). Every card's own content (.mb-mosaic-bg/
     -overlay/-info) is position:absolute, so those cards contribute zero
     intrinsic height — without this, the implicit row's default
     grid-auto-rows:auto collapsed to ~0-2px, and the sliver that leaked
     out from under overflow:hidden was the "clipped fragment" visible
     beneath the last visible row. Matching the explicit rows' own 340px
     here gives every implicit row (and .mb-mosaic-large's 2-row span,
     which needs it to finally render at its intended full height) the
     same real height instead of collapsing. */
  grid-auto-rows: 340px;
  gap: 3px;
}

.mb-mosaic-large { grid-row: span 2; }

.mb-mosaic-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.mb-mosaic-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mb-mosaic-card:hover .mb-mosaic-bg { transform: scale(1.05); }

/* Brand-mosaic images display at their natural brightness — the dark
   bottom-weighted scrim that used to fill .mb-mosaic-overlay has been
   removed. The element is kept (transparent, inert) so markup, layout and
   the hover image-zoom (.mb-mosaic-card:hover .mb-mosaic-bg) are unchanged. */
.mb-mosaic-overlay {
  position: absolute; inset: 0;
}

.mb-mosaic-info {
  position: absolute;
  bottom: 28px; left: 28px; right: 28px;
  color: white;
}

.mb-mosaic-label {
  font-size: 9px; font-weight: 300;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 8px;
}

.mb-mosaic-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 300;
  letter-spacing: 0.04em; line-height: 1.1;
  margin-bottom: 12px;
}
.mb-mosaic-large .mb-mosaic-name { font-size: 38px; }

.mb-mosaic-cta {
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s 0.05s, transform 0.3s 0.05s;
}
.mb-mosaic-card:hover .mb-mosaic-cta { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .mb-mosaic { padding: 80px 32px; }
  .mb-mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 280px);
  }
  .mb-mosaic-large { grid-row: span 1; }
}

@media (max-width: 768px) {
  .mb-mosaic { padding: 60px 24px; }
  /* grid-auto-rows: auto resets the desktop-only 340px value (set on the
     base, unscoped .mb-mosaic-grid rule for the desktop 3x2 layout) that
     was otherwise leaking in here: with grid-template-rows:auto below,
     every mobile row is an *implicit* row, so it inherited that 340px
     fixed track size regardless of the card's own 220px height — leaving
     a ~120px empty gap in every single-column row. Auto-sizing the track
     to the card's own explicit height removes that gap entirely, with no
     change needed to the card height rule itself. */
  .mb-mosaic-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: auto; }
  .mb-mosaic-card { height: 220px; }
}
/* ─────────────────────────────
   FIX: Hero eyebrow gold text
───────────────────────────── */
.mb-hero-eyebrow {
  color: var(--gold) !important;
}
/* ─────────────────────────────
   FIX: Hero eyebrow & animacje
───────────────────────────── */
.mb-hero-eyebrow {
  color: var(--gold) !important;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.3s forwards !important;
}

.mb-hero-title {
  color: var(--warm-white) !important;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s 0.5s forwards !important;
}

.mb-hero-sub {
  color: rgba(250,247,242,0.80) !important;
  opacity: 0;
  animation: fadeUp 1s 0.7s forwards !important;
}

.mb-hero-cta {
  color: var(--warm-white) !important;
  opacity: 0;
  animation: fadeUp 1s 0.9s forwards !important;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ─────────────────────────────
   FIX: Nav font size & separator
───────────────────────────── */
.nav-item > a {
  font-size: 18px !important;
  letter-spacing: 0.15em !important;
  padding: 8px 22px !important;
}

.logo {
  font-size: 32px !important;
  letter-spacing: 0.32em !important;
}

/* Usuń biały separator */
.nav-links::before,
.nav-links::after,
.nav-item::after {
  display: none !important;
  border: none !important;
  background: none !important;
  content: none !important;
}

/* Ukryj wszelkie pionowe paski między nav-items */
.nav-item + .nav-item {
  border-left: none !important;
}
/* ─────────────────────────────
   FIX: Nav transparentny na hero
───────────────────────────── */
body.template-index nav:not(.scrolled) {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

body.template-index nav:not(.scrolled) .logo,
body.template-index nav:not(.scrolled) .nav-item > a,
body.template-index nav:not(.scrolled) .nav-right a,
body.template-index nav:not(.scrolled) .nav-right button,
body.template-index nav:not(.scrolled) .search-icon {
  color: var(--warm-white) !important;
}

body.template-index nav:not(.scrolled) .hamburger span {
  background: var(--warm-white) !important;
}
/* ─────────────────────────────
   NAV — KOMPLETNY FIX
───────────────────────────── */

/* Wszystkie strony oprócz homepage — biały nav zawsze */
body.template-product nav,
body.template-collection nav,
body.template-search nav,
body.template-page nav,
body.template-cart nav,
body.template-404 nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--marble-vein) !important;
}

body.template-product nav .logo,
body.template-product nav .nav-item > a,
body.template-product nav .nav-right a,
body.template-product nav .nav-right button,
body.template-collection nav .logo,
body.template-collection nav .nav-item > a,
body.template-collection nav .nav-right a,
body.template-collection nav .nav-right button,
body.template-search nav .logo,
body.template-search nav .nav-item > a,
body.template-search nav .nav-right a,
body.template-search nav .nav-right button,
body.template-page nav .logo,
body.template-page nav .nav-item > a,
body.template-page nav .nav-right a,
body.template-page nav .nav-right button,
body.template-cart nav .logo,
body.template-cart nav .nav-item > a,
body.template-cart nav .nav-right a,
body.template-cart nav .nav-right button {
  color: var(--charcoal) !important;
}

body.template-product nav .hamburger span,
body.template-collection nav .hamburger span,
body.template-search nav .hamburger span,
body.template-page nav .hamburger span,
body.template-cart nav .hamburger span {
  background: var(--charcoal) !important;
}

/* Homepage — transparentny nav nad hero */
body.template-index nav:not(.scrolled) {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

body.template-index nav:not(.scrolled)
}

/* ─────────────────────────────
   FIX: Nav — wszystkie szablony
───────────────────────────── */
body:not(.template-index) nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--marble-vein) !important;
}

body:not(.template-index) nav .logo,
body:not(.template-index) nav .nav-item > a,
body:not(.template-index) nav .nav-right a,
body:not(.template-index) nav .nav-right button,
body:not(.template-index) nav .search-icon,
body:not(.template-index) nav .hamburger span {
  color: var(--charcoal) !important;
}

body:not(.template-index) nav .hamburger span {
  background: var(--charcoal) !important;
}
/* ─────────────────────────────
   FIX: Nav czcionka większa
───────────────────────────── */
.nav-item > a {
  font-size: 20px !important;
  letter-spacing: 0.18em !important;
  padding: 8px 20px !important;
}

.logo {
  font-size: 40px !important;
  letter-spacing: 0.3em !important;
}

.nav-right a,
.nav-right button {
  font-size: 15px !important;
  letter-spacing: 0.15em !important;
}
/* ─────────────────────────────
   LOGO IMAGE
───────────────────────────── */
.logo-img {
  height: 22px;
  width: auto;
  display: block;
  filter: brightness(0) invert(0); /* ciemne logo */
  transition: opacity 0.3s;
}

/* Na hero (transparentny nav) — białe logo */
body.template-index nav:not(.scrolled) .logo-img {
  filter: brightness(0) invert(1);
}

/* Na ciemnych stronach też białe */
.logo-img:hover { opacity: 0.75; }
/* ─────────────────────────────
   LOGO IMAGE — FINAL
───────────────────────────── */
a.logo {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.logo-img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
  filter: brightness(0) !important;
  transition: opacity 0.3s;
}

/* Na hero — białe logo */
body.template-index nav:not(.scrolled) .logo-img {
  filter: brightness(0) invert(1) !important;
}

.logo-img:hover { opacity: 0.65; }
}

/* ─────────────────────────────
   NAV — LOGO CENTERED
───────────────────────────── */
#nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 40px !important;
}

#nav .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#nav .nav-links-right {
  justify-content: flex-end !important;
}

#nav .logo {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
}

#nav .nav-right {
  display: none !important; /* schowane — koszyk i lupka są w nav-links-right */
}

/* Koszyk i lupka wracają do nav-right ale teraz jako osobny element po prawej siatce */
#nav .nav-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: calc(20px * var(--vg-scale, 1)) !important;
  position: absolute !important;
  right: calc(40px * var(--vg-scale, 1)) !important;
}

@media (max-width: 1100px) {
  #nav {
    grid-template-columns: 1fr auto 1fr !important;
  }
  #nav .nav-links { display: none !important; }
  #nav .nav-links-right { display: none !important; }
}/* ─────────────────────────────
   NAV — CENTERED LOGO FINAL
───────────────────────────── */
#nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 calc(32px * var(--vg-scale, 1)) !important;
  height: calc(94px * var(--vg-scale, 1)) !important;
}

#nav .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

#nav .nav-item > a {
  font-size: calc(11px * var(--vg-scale, 1)) !important;
  letter-spacing: 0.14em !important;
  padding: calc(6px * var(--vg-scale, 1)) calc(14px * var(--vg-scale, 1)) !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
}

#nav .logo {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#nav .nav-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: calc(20px * var(--vg-scale, 1)) !important;
}

@media (max-width: 1100px) {
  #nav { grid-template-columns: auto 1fr auto !important; }
  #nav .nav-links { display: none !important; }
  #nav .logo { justify-self: start !important; }
}
.logo-img {
  height: calc(46px * var(--vg-scale, 1)) !important;
}
/* ─────────────────────────────
   FIX: Search button klikalny
───────────────────────────── */
#nav .nav-right {
  position: relative !important;
  z-index: 100 !important;
  pointer-events: all !important;
}

#nav .search-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: calc(8px * var(--vg-scale, 1)) !important;
  cursor: pointer !important;
  pointer-events: all !important;
  position: relative !important;
  z-index: 100 !important;
  display: flex !important;
  }

  #nav {
  height: calc(114px * var(--vg-scale, 1)) !important;
}
#searchBar.open {
  max-height: calc(200px * var(--vg-scale, 1)) !important;
  padding: calc(15px * var(--vg-scale, 1)) calc(56px * var(--vg-scale, 1)) !important;
}
#searchBar.open {
  max-height: calc(200px * var(--vg-scale, 1)) !important;
  padding: calc(15px * var(--vg-scale, 1)) calc(56px * var(--vg-scale, 1)) !important;
}

.search-input {
  font-size: calc(32px * var(--vg-scale, 1)) !important;
  padding: calc(16px * var(--vg-scale, 1)) 0 !important;
}
.search-submit svg,
.search-icon svg {
  width: calc(28px * var(--vg-scale, 1)) !important;
  height: calc(34px * var(--vg-scale, 1)) !important;
}

.search-close {
  font-size: calc(42px * var(--vg-scale, 1)) !important;
}
.search-form {
  max-width: calc(600px * var(--vg-scale, 1)) !important;
  margin: 0 auto !important;
}
#searchBar {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(600px * var(--vg-scale, 1)) !important;
  border-radius: 0 0 calc(8px * var(--vg-scale, 1)) calc(8px * var(--vg-scale, 1)) !important;
}

.mb-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* upewniamy się, że wideo tła nie blokuje kliknięć w treści hero */
.mb-hero-bg,
.mb-hero-bg-video {
  pointer-events: none !important;
}

/* ============================= */
/* === CART PAGE === */
/* ============================= */

.cart-page { padding: 140px 56px 100px; max-width: 1400px; margin: 0 auto; }
.cart-header { margin-bottom: 48px; }
.cart-empty { padding: 60px 0 100px; text-align: center; }
.cart-empty p { font-size: 14px; font-weight: 300; color: var(--stone); margin-bottom: 40px; }

.cart-shipping-bar { margin-bottom: 56px; max-width: 640px; }
.cart-shipping-bar-text { font-size: 12px; font-weight: 300; letter-spacing: 0.04em; color: var(--charcoal); margin-bottom: 12px; }
.cart-shipping-bar-text strong { color: var(--gold); font-weight: 400; }
.cart-shipping-bar-track { width: 100%; height: 2px; background: var(--bone); position: relative; overflow: hidden; }
.cart-shipping-bar-fill { height: 100%; background: var(--gold); transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; }
.cart-items { display: flex; flex-direction: column; }

.cart-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--bone); align-items: center; }
.cart-item-image { width: 140px; height: 140px; overflow: hidden; background: var(--bone); }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 300; color: var(--charcoal); text-decoration: none; margin-bottom: 8px; transition: color 0.2s; }
.cart-item-title:hover { color: var(--gold); }
.cart-item-variant { font-size: 11px; font-weight: 300; letter-spacing: 0.08em; color: var(--stone); margin-bottom: 18px; }
.cart-item-qty-row { display: flex; align-items: center; gap: 24px; }

.cart-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--marble-vein); }
.cart-qty-stepper button { width: 34px; height: 34px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 300; color: var(--charcoal); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.cart-qty-stepper button:hover { background: var(--bone); }
.cart-qty-stepper input { width: 40px; height: 34px; border: none; border-left: 1px solid var(--marble-vein); border-right: 1px solid var(--marble-vein); text-align: center; font-family: 'Jost', sans-serif; font-size: 12px; -moz-appearance: textfield; }
.cart-qty-stepper input::-webkit-outer-spin-button, .cart-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-remove { background: none; border: none; cursor: pointer; font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); padding: 0; transition: color 0.2s; }
.cart-item-remove:hover { color: var(--charcoal); }
.cart-item-price { font-size: 14px; font-weight: 300; color: var(--charcoal); justify-self: end; white-space: nowrap; }

.cart-summary { position: sticky; top: 120px; background: var(--bone); padding: 44px; }
.cart-summary-label { font-size: 9px; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 32px; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-summary-row span:first-child { font-size: 12px; font-weight: 300; color: var(--stone); }
.cart-summary-row span:last-child { font-size: 15px; font-weight: 300; color: var(--charcoal); }
.cart-summary-note { font-size: 11px; font-weight: 300; color: var(--stone); line-height: 1.7; margin-bottom: 32px; }

.cart-discount { display: flex; gap: 0; margin-bottom: 32px; border-bottom: 1px solid var(--marble-vein); }
.cart-discount input { flex: 1; border: none; background: none; outline: none; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; padding: 12px 0; color: var(--charcoal); }
.cart-discount input::placeholder { color: var(--stone); }
.cart-discount button { background: none; border: none; cursor: pointer; font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); padding: 12px 4px; transition: color 0.2s; }
.cart-discount button:hover { color: var(--gold); }
.cart-checkout-btn { width: 100%; }

.cart-recommend { margin-top: 120px; }
.cart-recommend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.cart-recommend-grid .mb-product-card { background: transparent; }
.cart-recommend-grid .mb-product-img { height: 280px; background: var(--bone); overflow: hidden; }
.cart-recommend-grid .mb-product-ph { width: 100%; height: 100%; object-fit: cover; }
.cart-recommend-grid .mb-product-info { padding: 16px 0 0; }
.cart-recommend-grid .mb-product-name { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--charcoal); }
.cart-recommend-grid .mb-product-price { font-size: 13px; color: var(--stone); margin-top: 4px; }

@media (max-width: 1100px) {
  .cart-page { padding: 120px 32px 80px; }
  .cart-grid { grid-template-columns: 1fr; gap: 48px; }
  .cart-summary { position: static; }
  .cart-recommend-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .cart-page { padding: 100px 24px 60px; }
  .cart-item { grid-template-columns: 90px 1fr; }
  .cart-item-price { grid-column: 2; justify-self: start; margin-top: 8px; }
  .cart-item-image { width: 90px; height: 90px; }
  .cart-recommend-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* ============================= */
/* === CART PAGE — SIZE BOOST === */
/* ============================= */

.cart-page { max-width: 1600px; }

.cart-item-image { width: 180px !important; height: 180px !important; }

.cart-item-title { font-size: 26px !important; }
.cart-item-variant { font-size: 13px !important; }
.cart-item-price { font-size: 17px !important; }

.cart-qty-stepper button { width: 40px !important; height: 40px !important; font-size: 16px !important; }
.cart-qty-stepper input { width: 48px !important; height: 40px !important; font-size: 14px !important; }
.cart-item-remove { font-size: 11px !important; }

.cart-summary { padding: 52px !important; }
.cart-summary-row span:first-child { font-size: 14px !important; }
.cart-summary-row span:last-child { font-size: 19px !important; }
.cart-summary-note { font-size: 12px !important; }
.cart-discount input { font-size: 14px !important; }
.cart-discount button { font-size: 11px !important; }
.cart-checkout-btn { font-size: 13px !important; padding: 20px 40px !important; }

.cart-recommend-grid .mb-product-img { height: 340px !important; }
.cart-recommend-grid .mb-product-name { font-size: 15px !important; }
.cart-recommend-grid .mb-product-price { font-size: 14px !important; }

@media (max-width: 768px) {
  .cart-item-image { width: 110px !important; height: 110px !important; }
  .cart-item-title { font-size: 20px !important; }
}
/* ============================= */
/* === CART PAGE — LAYOUT TWEAK === */
/* ============================= */

.cart-page { padding-left: 32px !important; padding-right: 56px !important; }

.cart-grid {
  grid-template-columns: 1fr 480px !important;
  gap: 48px !important;
}

.cart-items {
  margin-left: -84px !important;
}

.cart-item-image {
  width: 320px !important;
  height: 320px !important;
}

.cart-summary {
  padding: 100px !important;
  margin-left: auto !important;
  max-width: 480px !important;
}

.cart-summary-row span:last-child { font-size: 21px !important; }
.cart-checkout-btn { padding: 22px 40px !important; }

@media (max-width: 1100px) {
  .cart-grid { grid-template-columns: 1fr !important; }
  .cart-items { margin-left: 0 !important; }
}

@media (max-width: 768px) {
  .cart-item-image { width: 130px !important; height: 130px !important; }
}
/* ============================= */
/* === CART PAGE — FIX OVERLAP === */
/* ============================= */

.cart-item {
  grid-template-columns: 220px 1fr auto !important;
}

.cart-item-info {
  padding-left: 8px !important;
}

@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 130px 1fr !important;
  }
}
/* ============================= */
/* === CART PAGE — TABLE LAYOUT === */
/* ============================= */

.cart-page { padding-bottom: 140px !important; }

.cart-table-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

.cart-table-wrap { width: 100%; }

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0 0 18px;
  border-bottom: 1px solid var(--marble-vein);
}
.cart-table thead th:not(.cart-th-product) { text-align: center; }

.cart-table-row td {
  padding: 28px 0;
  border-bottom: 1px solid var(--bone);
  vertical-align: middle;
}

.cart-table-product {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.cart-table-product img,
.cart-table-product .mb-marble-ph {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex: 0 0 110px;
}
.cart-table-product-info { display: flex; flex-direction: column; gap: 6px; }

.cart-table-remove {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1px solid var(--marble-vein);
  color: var(--stone);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
}
.cart-table-remove:hover { color: var(--charcoal); border-color: var(--charcoal); }

.cart-table-price,
.cart-table-subtotal { text-align: center; font-size: 14px; font-weight: 300; color: var(--charcoal); }
.cart-table-subtotal { font-weight: 400; }
.cart-table-qty { text-align: center; }
.cart-table-qty .cart-qty-stepper { margin: 0 auto; }

.cart-coupon-row {
  display: flex;
  gap: 0;
  margin-top: 32px;
  max-width: 420px;
}
.cart-coupon-row input {
  flex: 1;
  border: 1px solid var(--marble-vein);
  border-right: none;
  background: none;
  outline: none;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  padding: 14px 16px;
  color: var(--charcoal);
}
.cart-coupon-row button {
  background: var(--charcoal);
  color: var(--warm-white);
  border: none;
  cursor: pointer;
  padding: 0 24px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.cart-coupon-row button:hover { background: #2e2c28; }

.cart-basket-totals {
  background: var(--bone);
  padding: 44px;
}
.cart-basket-totals .cart-summary-label {
  font-size: 9px; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.cart-basket-totals .cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--marble-vein);
}
.cart-basket-totals .cart-summary-row span:first-child { font-size: 13px; font-weight: 400; color: var(--charcoal); }
.cart-basket-totals .cart-summary-row span:last-child { font-size: 15px; font-weight: 300; color: var(--charcoal); }
.cart-total-row { border-bottom: none !important; margin-top: 8px; }
.cart-total-row span:first-child { font-size: 14px !important; font-weight: 500 !important; }
.cart-total-row span:last-child { font-size: 22px !important; font-weight: 400 !important; }

.cart-shipping-estimator { margin-bottom: 8px; }
.cart-shipping-note { font-size: 11px; font-weight: 300; color: var(--stone); line-height: 1.6; margin-bottom: 16px; }
.cart-ship-select,
.cart-shipping-estimator input {
  display: block;
  width: 100%;
  border: 1px solid var(--marble-vein);
  background: var(--warm-white);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 12px 14px;
  margin-bottom: 10px;
  color: var(--charcoal);
}
.cart-ship-update-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  padding: 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 24px;
}
.cart-ship-update-btn:hover { background: var(--charcoal); color: var(--warm-white); }

.cart-sticky-checkout {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--charcoal);
  z-index: 150;
}
.cart-sticky-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.cart-sticky-total {
  color: var(--warm-white);
  font-size: 18px;
  .cart-sticky-total {
  color: var(--warm-white);
  font-size: 18px;
  font-weight: 300;
}
.cart-sticky-btn {
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  padding: 14px 40px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-sticky-btn:hover { background: var(--gold-light); }

@media (max-width: 1100px) {
  .cart-table-grid { grid-template-columns: 1fr; }
  .cart-table thead { display: none; }
  .cart-table-row { display: block; padding: 20px 0; border-bottom: 1px solid var(--bone); }
  .cart-table-row td { display: block; padding: 6px 0; border-bottom: none; }
  .cart-table-price::before { content: "Price: "; color: var(--stone); }
  .cart-table-subtotal::before { content: "Subtotal: "; color: var(--stone); }
  .cart-table-price, .cart-table-subtotal { text-align: left; }
}

@media (max-width: 768px) {
  .cart-sticky-inner { padding: 14px 24px; flex-direction: column; gap: 10px; align-items: stretch; }
  .cart-sticky-btn { width: 100%; }
}
.cart-main-checkout-btn {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 16px 24px;
  background: var(--charcoal);
  color: var(--warm-white);
  border: 1px solid var(--charcoal);
  text-align: center;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cart-main-checkout-btn:hover {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.cart-main-checkout-btn {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 16px 24px;
  background: var(--charcoal);
  color: var(--warm-white);
  border: 1px solid var(--charcoal);
  text-align: center;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cart-main-checkout-btn:hover {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
@media screen and (max-width: 768px) {
  /* cały mobile fix tutaj */
}
@media screen and (max-width: 768px) {

  /* === HEADER === */
  #nav {
    grid-template-columns: auto 1fr auto !important;
    padding: 0 20px !important;
    height: 64px !important;
  }

  #nav .logo {
    justify-self: start !important;
  }

  /* Ukryj search icon i cart text — zostaje tylko hamburger */
  #nav .nav-right .search-icon {
    display: none !important;
  }

  #nav .nav-right .cart-link {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  /* Hamburger — główna poprawka */
  #nav .hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 300 !important;
    order: 3 !important;
  }

  /* Upewnij się że spany hamburgera są widoczne na hero */
  body.template-index #nav:not(.scrolled) .hamburger span {
    background: var(--warm-white) !important;
  }

  /* Mobile menu — powiększ czcionkę CTA */
  .mobile-menu a {
    font-size: 26px !important;
  }

  /* Hero content padding na mobile — wyśrodkowana kompozycja */
  .mb-hero-content {
    padding: 0 24px !important;
    max-width: 100% !important;
  }

  .mb-hero-title {
    font-size: clamp(32px, 8vw, 44px) !important;
  }

  .mb-hero-sub {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* Search bar na mobile — full width */
  #searchBar {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #searchBar.open {
    padding: 16px 20px !important;
  }

  .search-input {
    font-size: 18px !important;
  }

  .search-submit svg,
  .search-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .search-close {
    font-size: 28px !important;
  }

}
.mb-white-copy {
  text-align: center;
}

.mb-white-copy-inner {
  max-width: 700px;
  margin: 0 auto;
}

.mb-white-copy-title {
  font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 3.5vw, 54px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 24px;
  line-height: 1.15;
}

.mb-white-copy-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--stone);
}
.vp-gallery-main {
  width: 100%;
  background: #f0eeeb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}
.vp-gallery-main img {
  width: auto;
  height: 100%;
  max-height: 500px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

}
.vp-gallery-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 2px;
}
.vp-gallery-thumb {
  background: #f0eeeb;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}
.vp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.vp-gallery-thumb:hover img {
  transform: scale(1.03);
}