/** Shopify CDN: Minification failed

Line 4866:0 Unexpected "<"
Line 5036:1 Expected "}" to go with "{"

**/
/* ============================================
   RARELANE — Design System
   ============================================ */

:root {
  --bg: #FFFFFF;
  --ink: #111110;
  --ink-soft: #2A2926;
  --line: #ECECEC;
  --line-soft: #F4F4F2;
  --gold: #AD8A52;
  --gold-soft: #F5EFE4;
  --gray: #6E6A62;
  --gray-light: #9A958C;
  --panel: #FAFAF8;
  --white: #FFFFFF;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 68px;
  --radius: 3px;
  --max-w: 1280px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.1;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 48px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
}

.section { padding: 96px 0; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { font-size: clamp(30px, 3.4vw, 44px); margin-top: 12px; }
.section-cta { text-align: center; margin-top: 56px; }

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}

.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--gold); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ============================================
   Announcement Bar
   ============================================ */

.announcement-bar {
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
}

.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.marquee span {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 500;
  padding-right: 60px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   Navigation
   ============================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.nav-links { display: flex; gap: 34px; }

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}

.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display: flex; align-items: center; gap: 6px; }

.nav-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  position: relative;
  transition: background 0.2s var(--ease);
}

.nav-icon:hover { background: var(--panel); }

.cart-count {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--gold);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform 0.25s var(--ease-out);
}

.cart-count.visible { transform: scale(1); }

.nav-toggle { display: none; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 99;
  padding: calc(var(--nav-h) + 40px) 32px 32px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

/* ============================================
   Hero
   ============================================ */

.hero { padding: 72px 0 88px; overflow: hidden; }

.hero-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-content { animation: fadeUp 0.9s var(--ease-out) both; }

.hero-title {
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 0.98;
  margin: 20px 0 24px;
  max-width: 9ch;
}

.hero-text {
  font-size: 16px;
  color: var(--gray);
  max-width: 430px;
  margin-bottom: 36px;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(155deg, #FAFAF8, #EDEAE3);
  animation: fadeIn 1.1s var(--ease-out) 0.15s both;
}

.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.hero-visual:hover .hero-img { transform: scale(1.04); }

.hero-badge {
  position: absolute;
  bottom: 28px; left: 28px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  padding: 14px 20px;
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.badge-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 3px;
}

.badge-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   Trust Bar
   ============================================ */

.trust-bar {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 32px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.trust-item { text-align: center; }

.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.trust-item span {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================
   Categories
   ============================================ */

.categories { padding: 96px 0 0; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols, 3), 1fr);
  gap: 20px;
}

.category-card {
  position: relative;
  min-height: 380px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  isolation: isolate;
}

.category-card-large { min-height: 440px; }

.category-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.8s var(--ease-out);
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.48) 0%,
    rgba(0,0,0,0.08) 55%,
    transparent 100%
  );
  z-index: -1;
}

.category-card:hover img { transform: scale(1.06); }

.category-content { color: var(--white); }
.category-content .eyebrow { color: rgba(255,255,255,0.72); }
.category-content h3 { font-size: 26px; margin: 6px 0 10px; }

.category-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}

.category-card:hover .category-link { border-color: var(--white); }

/* ============================================
   Product Grid
   ============================================ */

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

.product-card { display: block; }

.product-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 16px;
}

.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), opacity 0.4s var(--ease);
}

.product-card:hover .product-img img { transform: scale(1.07); }

.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  border-radius: 2px;
  z-index: 2;
}

.product-sizes {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  display: flex;
  gap: 5px;
  padding: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out);
  z-index: 2;
}

.product-card:hover .product-sizes { opacity: 1; transform: translateY(0); }

.product-sizes span {
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 4px 7px;
  border-radius: 2px;
  background: var(--white);
}

.product-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.product-price { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.price-now { font-weight: 600; color: var(--ink); }
.price-was { text-decoration: line-through; color: var(--gray-light); font-size: 12.5px; }

/* ============================================
   Story Section
   ============================================ */

.section-story { text-align: center; }
.story-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.24; margin: 16px 0 20px; }
.story-text { color: var(--gray); font-size: 15.5px; line-height: 1.75; max-width: 640px; margin: 0 auto; }

.story-stats {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat span { font-size: 12px; color: var(--gray); letter-spacing: 0.04em; }

/* ============================================
   Testimonials
   ============================================ */

.section-testimonials { background: var(--panel); }

.testimonial-grid {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  padding: 10px 4px 24px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonial-grid::-webkit-scrollbar {
  display: none;
}

.testimonial-grid .phone-frame {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
}

.phone-frame {
  max-width: 300px;
  width: 100%;
  background: #0B0B0B;
  border-radius: 32px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
  transition: transform 0.4s var(--ease-out);
}

.phone-frame:hover { transform: translateY(-6px); }

.phone-screen { background: #E5DDD5; border-radius: 24px; overflow: hidden; }

.wa-header {
  background: #075E54;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.wa-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

.wa-body {
  padding: 16px 12px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-bubble {
  background: #fff;
  padding: 8px 11px;
  border-radius: 8px 8px 8px 2px;
  font-size: 12.5px;
  max-width: 82%;
  align-self: flex-start;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  line-height: 1.45;
}

.wa-bubble-me {
  background: #DCF8C6;
  align-self: flex-end;
  border-radius: 8px 8px 2px 8px;
}

.wa-time { font-size: 9px; color: #8A9199; text-align: right; margin-top: 3px; }

/* ============================================
   Footer
   ============================================ */

.footer {
  background: var(--ink);
  color: var(--white);
  padding: 72px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-logo-text {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.footer-logo-line {
  display: block;
  font-size: 34px;
  color: var(--white);
}

.footer-logo-line--accent {
  color: #E5433A;
}

@media (max-width: 820px) {
  .footer-logo-line { font-size: 27px; }
}

.footer-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: 20px;
}

.footer-socials { display: flex; gap: 14px; }

.footer-socials a {
  color: rgba(255,255,255,0.65);
  transition: color 0.2s var(--ease);
}

.footer-socials a:hover { color: var(--white); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 18px;
  font-weight: 600;
}

.footer-col > a {
  display: block;
  font-size: 13.5px;
  color: rgba(255,255,255,0.82);
  margin-bottom: 11px;
  transition: color 0.2s var(--ease);
}

.footer-col > a:hover { color: var(--gold); }

.newsletter-form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: var(--white);
  border-radius: 2px;
  font-size: 13px;
  margin-bottom: 10px;
  transition: border-color 0.2s var(--ease);
}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { outline: none; border-color: var(--gold); }

.newsletter-form button {
  width: 100%;
  padding: 13px;
  background: var(--white);
  color: var(--ink);
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.newsletter-form button:hover { background: var(--gold); color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 14px;
}

.payment-methods { display: flex; gap: 14px; }

.payment-methods span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.42);
}

/* ============================================
   Cart Drawer
   ============================================ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--white);
  z-index: 301;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
}

.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.cart-header h3 { font-size: 17px; }

.cart-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s var(--ease);
}

.cart-close:hover { background: var(--panel); }

.cart-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.cart-empty {
  text-align: center;
  padding: 60px 0;
  display: none;
}

.cart-empty.visible { display: block; }
.cart-empty p { color: var(--gray); margin-bottom: 20px; font-size: 14px; }

.cart-item {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  animation: fadeUp 0.35s var(--ease-out) both;
}

.cart-item-img {
  width: 76px; height: 76px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  flex-shrink: 0;
}

.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.cart-item-meta { font-size: 12px; color: var(--gray); margin-bottom: 10px; }

.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.qty-control button {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--gray);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.qty-control button:hover { color: var(--ink); background: var(--panel); }
.qty-control span { min-width: 24px; text-align: center; font-size: 12.5px; font-weight: 500; }

.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-item-price { font-size: 13.5px; font-weight: 600; }

.cart-item-remove {
  font-size: 11px;
  color: var(--gray-light);
  text-decoration: underline;
  transition: color 0.2s var(--ease);
}

.cart-item-remove:hover { color: var(--ink); }

.cart-footer { padding: 20px 24px; border-top: 1px solid var(--line); }

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}

.btn-checkout { width: 100%; }
.cart-note { font-size: 11.5px; color: var(--gray); text-align: center; margin-top: 12px; }

/* ============================================
   Toast
   ============================================ */

.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--white);
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  z-index: 400;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.visible { transform: translateX(-50%) translateY(0); }

/* ============================================
   Scroll Reveal
   ============================================ */

/* Only hide reveal elements once JS confirms it can un-hide them. Without
   this guard a script failure would leave whole sections permanently
   invisible — on paid ad traffic that is a dead page, not a missing
   animation. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js-reveal .reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .container, .container-narrow, .nav-container, .hero-container { padding-left: 32px; padding-right: 32px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .category-card-large { grid-column: span 2; min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 820px) {
  .container, .container-narrow, .nav-container, .hero-container { padding-left: 20px; padding-right: 20px; }

  .section { padding: 64px 0; }
  .section-header { margin-bottom: 40px; }
  .categories { padding-top: 64px; }

  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  /* The account link lives in the mobile menu instead, to keep the bar short */
  .nav-account { display: none; }

  .hero { padding: 40px 0 56px; }
  .hero-container { grid-template-columns: 1fr; gap: 36px; }
  .hero-title { font-size: 38px; max-width: none; }
  .hero-text { font-size: 15px; margin-bottom: 28px; }
  .hero-visual { aspect-ratio: 1 / 1; }
  .hero-ctas .btn { flex: 1; }

  .trust-bar { gap: 28px; padding: 24px 20px; }
  .trust-item strong { font-size: 20px; }
  .trust-item span { font-size: 10px; }

  .category-grid { grid-template-columns: 1fr; }
  .category-card, .category-card-large { min-height: 260px; grid-column: span 1; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .product-sizes { display: none; }

  .story-stats { gap: 32px; margin-top: 36px; }
  .stat strong { font-size: 24px; }

  .testimonial-grid {
  gap: 24px;
  }

  .footer { padding: 52px 0 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .cart-drawer { width: 100vw; max-width: 100vw; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 33px; }
  .product-grid { gap: 20px 12px; }
}

/* ============================================
   Hero Slider (replaces the old .hero block)
   ============================================ */

.hero-slider {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-track { position: relative; }

.hero-slide {
  display: none;
  padding: 24px 0 56px;
}

.hero-slide.active {
  display: block;
  animation: fadeIn 0.6s var(--ease-out) both;
}

.hero-slide-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
  min-height: 460px;
}

.hero-copy { position: relative; z-index: 2; animation: fadeUp 0.8s var(--ease-out) 0.1s both; }

.hero-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius);
  margin-bottom: 22px;
}

.hero-headline {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.hero-note {
  font-size: 14.5px;
  color: var(--gray);
  max-width: 400px;
  margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Oversized ghost word behind the shoe */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(90px, 15vw, 210px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--line);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.hero-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.22));
  animation: heroFloat 1s var(--ease-out) both;
}

@keyframes heroFloat {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Arrows + dots */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
  z-index: 3;
}

.hero-slider:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { border-color: var(--ink); }
.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }

.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.hero-dot.active { background: var(--ink); transform: scale(1.15); }
.hero-dot:hover { background: var(--gray-light); }

/* ============================================
   Brand Strip — circular brand logos
   ============================================ */

.brand-strip {
  /* --brand-pad-* and --brand-circle come from the section's inline style,
     so both are editable per section in the theme editor. */
  padding: var(--brand-pad-top, 56px) 0 var(--brand-pad-bottom, 60px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.brand-strip-eyebrow { margin-bottom: 10px; }

.brand-strip-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.brand-strip-sub {
  font-size: 13.5px;
  color: var(--gray);
  margin-bottom: 8px;
}

.brand-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 30px;
  margin-top: 34px;
}

.brand-circle {
  flex: 0 0 auto;
  width: var(--brand-circle, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.brand-logo {
  width: var(--brand-circle, 96px);
  height: var(--brand-circle, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.brand-logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.brand-logo-fallback {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Long names wrap instead of widening the tile. */
  line-height: 1.3;
}

.brand-circle:hover .brand-logo {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure img { animation: none; }
  .brand-circle:hover .brand-logo { transform: none; }
}

@media (max-width: 820px) {
  .hero-slide { padding: 12px 0 44px; }
  .hero-slide-inner {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    text-align: center;
  }
  .hero-copy { order: 2; }
  .hero-figure { order: 1; min-height: 260px; }
  .hero-figure img { max-height: 260px; }
  .hero-note { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-arrow { display: none; }
  .brand-circles { gap: 20px 18px; }
}
/* ============================================
   RARELANE — Product Page & Shop Page
   ============================================ */

/* ============================================
   Shop Page Header
   ============================================ */

.shop-header {
  padding: 56px 0 28px;
  text-align: center;
}

.shop-header h1 {
  font-size: clamp(32px, 4.2vw, 50px);
  margin: 12px 0 10px;
}

.shop-header p {
  color: var(--gray);
  font-size: 14.5px;
}

.shop-toolbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--nav-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 40;
}

.toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gray);
  transition: all 0.22s var(--ease);
}

.filter-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-chip.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.sort-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gray);
  flex-shrink: 0;
}

.sort-select {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 7px 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.sort-select:hover { border-color: var(--ink); }
.sort-select:focus { outline: none; border-color: var(--gold); }

.shop-products { padding: 40px 0 96px; }

/* ============================================
   Product Detail Page
   ============================================ */

.pdp { padding: 48px 0 80px; }

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Grid columns default to a min size of auto, so a wide child (the
   thumbnail row) would stretch the column past the viewport and push
   the whole page sideways. min-width: 0 lets the column shrink. */
.pdp-gallery,
.pdp-info { min-width: 0; }

/* Gallery */

.pdp-gallery {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-main-img {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.pdp-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 3px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--panel);
  padding: 0;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-thumb:hover { border-color: var(--gray-light); }
.pdp-thumb.active { border-color: var(--ink); }

/* ============================================
   Product Gallery — Previous / Next Arrows
   ============================================ */

.pdp-main-img {
  position: relative;
}

.pdp-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(17, 17, 16, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);

  cursor: pointer;
  padding: 0;

  opacity: 0;
  transition:
    opacity 0.2s var(--ease),
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.pdp-main-img:hover .pdp-gallery-arrow {
  opacity: 1;
}

.pdp-gallery-arrow:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.pdp-gallery-prev {
  left: 18px;
}

.pdp-gallery-next {
  right: 18px;
}

@media (hover: none) {
  .pdp-gallery-arrow {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .pdp-gallery-arrow {
    width: 36px;
    height: 36px;
  }

  .pdp-gallery-prev {
    left: 10px;
  }

  .pdp-gallery-next {
    right: 10px;
  }
}

/* Info */

.pdp-info { padding-top: 6px; }

.pdp-title {
  font-size: clamp(28px, 3.2vw, 38px);
  margin: 10px 0 16px;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pdp-price .price-now {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pdp-price .price-was { font-size: 15.5px; }

.price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 5px 10px;
  border-radius: 2px;
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.rating-text { font-size: 12.5px; color: var(--gray); }

.pdp-desc {
  font-size: 14.5px;
  color: var(--gray);
  line-height: 1.7;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

/* Size Selector */

.size-selector-wrapper { padding: 26px 0; }

.size-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.size-label > span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}

.size-guide-link {
  font-size: 12px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease);
}

.size-guide-link:hover { color: var(--gold); }

.size-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.size-selector button {
  min-width: 52px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}

.size-selector button:hover {
  border-color: var(--ink);
}

.size-selector button.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* CTAs */

.pdp-ctas {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.btn-add-to-cart { flex: 1; }

.pdp-ctas .btn-ghost {
  flex-shrink: 0;
  padding: 16px 22px;
}

/* Buy it now sits above Add to Cart. Shopify prints nothing here when
   dynamic checkout is off, so the empty wrapper collapses. */
.pdp-buy-now { margin-bottom: 10px; }
.pdp-buy-now:empty { display: none; }

.shopify-payment-button__button--unbranded {
  width: 100%;
  padding: 16px 32px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background: var(--ink);
  color: var(--white);
}

.shopify-payment-button__more-options {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: none;
  border: 0;
  color: var(--gray);
  font-size: 12px;
  text-decoration: underline;
}

/* Trust Bullets */

.trust-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.trust-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.5;
}

.trust-bullet svg {
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 3px;
}

.trust-bullet strong { color: var(--ink); font-weight: 600; }

/* Accordion */

.pdp-accordion { margin-top: 8px; }

.pdp-accordion-item { border-bottom: 1px solid var(--line); }

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  transition: color 0.2s var(--ease);
}

.accordion-header:hover { color: var(--gold); }

.accordion-icon {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
  color: var(--gray);
}

.pdp-accordion-item.open .accordion-icon { transform: rotate(45deg); }

.accordion-content {
  display: none;
  padding-bottom: 22px;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.7;
}

.pdp-accordion-item.open .accordion-content {
  display: block;
  animation: accordionIn 0.35s var(--ease-out);
}

@keyframes accordionIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.accordion-content ul { padding-left: 18px; }
.accordion-content li { margin-bottom: 7px; }

/* Reviews */

.review {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.review:last-child { border-bottom: none; padding-bottom: 0; }

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stars-small { color: var(--gold); font-size: 11px; letter-spacing: 1.5px; }
.review-author { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.review p { font-size: 13.5px; line-height: 1.65; }

/* Related */

.section-related {
  border-top: 1px solid var(--line);
  padding-top: 80px;
}

.section-related .section-header { margin-bottom: 44px; }
.section-related h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* ============================================
   Floating Video Widget
   ============================================ */

.video-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
}

/* Collapsed trigger */

.video-toggle {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: visible;
  display: block;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease);
}

.video-toggle:hover { transform: scale(1.06); }

.video-widget.expanded .video-toggle {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.pulse-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
  animation: pulseRing 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes pulseRing {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

.video-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, #2E2E2C, #0C0C0B);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  border: 2px solid var(--white);
  box-sizing: border-box;
}

.video-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(6px);
  background: var(--ink);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out);
  pointer-events: none;
}

.video-toggle:hover .video-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Expanded panel */

.video-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 260px;
  height: 462px;
  background: #0B0B0B;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85) translateY(20px);
  transform-origin: bottom right;
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.35s;
}

.video-widget.expanded .video-panel {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-caption {
  position: absolute;
  bottom: 52px;
  left: 12px;
  right: 12px;
  color: var(--white);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.video-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s var(--ease);
}

.video-close:hover { background: rgba(255, 255, 255, 0.3); }

.video-mute {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s var(--ease);
}

.video-mute:hover { background: rgba(255, 255, 255, 0.3); }

/* Mute icon swap — muted by default, .unmuted added by JS */
.video-mute .icon-unmuted { display: none; }
.video-mute.unmuted .icon-muted { display: none; }
.video-mute.unmuted .icon-unmuted { display: block; }

/* Circular preview inside the collapsed trigger */
.video-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  border-radius: 50%;
  display: block;
}

.video-play {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-play svg { margin-left: 2px; }

/* ============================================
   Breadcrumb
   ============================================ */

.breadcrumb {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: 12.5px;
  color: var(--gray);
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--gray);
  transition: color 0.2s var(--ease);
}

.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--line-soft, #D8D8D8); }
.breadcrumb-current { color: var(--ink); font-weight: 500; }

/* ============================================
   Size errors & sold-out sizes
   ============================================ */

.size-error {
  display: none;
  margin-top: 10px;
  font-size: 12.5px;
  color: #C0392B;
}

.size-error.visible { display: block; }

.size-selector button.sold-out {
  color: var(--gray-light, #B5B0A6);
  border-color: var(--line);
  background: var(--panel);
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.size-selector button.sold-out::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  background: var(--gray-light, #B5B0A6);
  transform: rotate(-24deg);
}

.size-selector button.sold-out:hover { border-color: var(--line); }

/* ============================================
   Result count / empty state / not found
   ============================================ */

.result-count {
  font-size: 12.5px;
  color: var(--gray);
  margin-right: 4px;
  white-space: nowrap;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 0;
}

.empty-state p {
  color: var(--gray);
  font-size: 14.5px;
  margin-bottom: 18px;
}

.pdp-notfound {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 0 48px;
}

.pdp-notfound h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 12px; }

.pdp-notfound p {
  color: var(--gray);
  font-size: 14.5px;
  margin-bottom: 24px;
}

/* Save-for-later heart */

.btn-save.saved {
  color: var(--gold);
  border-color: var(--gold);
}

.btn-save.saved svg path { fill: var(--gold); }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .pdp-grid { gap: 40px; }
  .pdp-gallery { position: static; }
}

@media (max-width: 820px) {
  .shop-header { padding: 36px 0 20px; }
  .shop-toolbar { position: static; }

  .toolbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .filter-chips { padding-bottom: 2px; }
  .sort-wrapper { justify-content: space-between; }

  .shop-products { padding: 28px 0 60px; }

  .pdp { padding: 28px 0 56px; }
  .pdp-grid { grid-template-columns: 1fr; gap: 32px; }

  .pdp-thumb { width: 68px; height: 68px; }

  .pdp-price .price-now { font-size: 24px; }

  .pdp-ctas { flex-direction: column; }
  .pdp-ctas .btn-ghost { width: 100%; }

  .section-related { padding-top: 56px; }

  .video-widget { bottom: 16px; right: 16px; }
  .video-toggle { width: 62px; height: 62px; }
  .video-label { display: none; }

  .video-panel {
    width: min(78vw, 260px);
    height: min(64vh, 462px);
  }
}

/* ============================================
   Compare Table
   ============================================ */

.section-compare {
  padding: 64px 0;
  background: var(--panel);
}

.section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.section-sub {
  text-align: center;
  color: var(--gray);
  margin: 0 0 40px;
}

.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.compare-table thead th {
  background: var(--ink);
  color: white;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  padding: 16px 20px;
  text-align: center;
  font-size: 15px;
  border-bottom: 2px solid var(--line);
}

.compare-table thead th:first-child {
  border-radius: var(--radius) 0 0 0;
  text-align: left;
}

.compare-table thead th:last-child {
  border-radius: 0 var(--radius) 0 0;
}

.compare-table thead th.compare-win {
  background: var(--gold);
  color: var(--ink);
  position: relative;
}

.compare-table tbody td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--gray);
}

.compare-table tbody td.compare-rowlabel {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}

.compare-table tbody td.compare-win {
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 600;
  position: relative;
}

.compare-tick {
  display: inline-block;
  color: var(--gold);
  font-size: 16px;
  margin-right: 4px;
}

/* ============================================
   Shipping Timeline
   ============================================ */

.section-shipping {
  padding: 64px 0;
}

.shipping-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: start;
}

.shipping-card {
  background: var(--ink);
  color: white;
  padding: 32px 28px;
  border-radius: var(--radius);
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}

.shipping-card-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.shipping-card-sub {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
}

.shipping-card-note {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,.85);
}

.shipping-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ship-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
}

.ship-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ship-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--gold-soft);
  flex-shrink: 0;
}

.ship-line {
  width: 2px;
  flex: 1;
  background: var(--line);
  margin-top: 8px;
  min-height: 32px;
}

.ship-text h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
}

.ship-text p {
  margin: 0;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}

/* ============================================
   Reviews
   ============================================ */

.section-reviews {
  padding: 64px 0;
  background: var(--panel);
}

.reviews-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 40px;
  background: white;
  padding: 28px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.summary-score {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 32px;
}

.summary-number {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.summary-score .stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 2px;
  margin: 6px 0 4px;
}

.summary-count {
  font-size: 12px;
  color: var(--gray);
}

.summary-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-bar-row {
  display: grid;
  grid-template-columns: 34px 1fr 38px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gray);
}

.bar-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width .5s var(--ease);
}

.bar-pct {
  text-align: right;
}

/* Photo strip */
.reviews-photostrip {
  max-width: 760px;
  margin: 0 auto 32px;
}

.photostrip-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 12px;
  color: var(--gray);
}

.photostrip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.review-photo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: white;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}

.review-photo:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}

.review-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Review cards */
.reviews-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.review-card.review-hidden {
  display: none;
}

.review-card-head {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-meta .review-author {
  font-weight: 600;
  font-size: 14px;
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #2E7D32;
}

.review-card .stars-small {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 1px;
}

/* Collapsed by default — expands downward on click */
.review-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card.expanded .review-text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.review-photos {
  display: none;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.review-card.expanded .review-photos {
  display: flex;
}

.review-card-toggle {
  background: none;
  border: none;
  padding: 10px 0 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}

.review-card-toggle svg {
  transition: transform .25s var(--ease);
}

.review-card.expanded .review-card-toggle svg {
  transform: rotate(180deg);
}

.review-card-toggle .toggle-less { display: none; }
.review-card.expanded .toggle-more { display: none; }
.review-card.expanded .toggle-less { display: inline; }

.btn-more-reviews {
  display: inline-flex;
  margin: 28px auto 0;
}

.section-reviews .container { text-align: center; }
.reviews-summary,
.reviews-photostrip,
.reviews-list { text-align: left; }

/* Buy-box teaser */
.accordion-review-teaser {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray);
  font-style: italic;
  margin: 0 0 10px;
}

.accordion-review-link {
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--ink);
}

/* ============================================
   FAQs — two column: intro left, accordion right
   ============================================ */

.section-faqs {
  padding: 64px 0;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.faq-intro { position: sticky; top: 96px; }
.faq-intro .eyebrow { margin-bottom: 14px; }

.faq-heading {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  margin: 0 0 16px;
}

.faq-intro-sub {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray);
  margin: 0;
  max-width: 42ch;
}

.faq-intro-btn { margin-top: 26px; }

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  text-align: left;
  color: var(--ink);
  transition: color .2s var(--ease);
}

.faq-q:hover { color: var(--gold); }

.faq-icon {
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}

/* + becomes × when the row is open */
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}

.faq-item.open .faq-a {
  max-height: 400px;
}

.faq-a p {
  padding: 0 0 22px;
  margin: 0;
  font-size: 14.5px;
  max-width: 640px;
  line-height: 1.7;
  color: var(--gray);
}

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-intro { position: static; }
  .faq-intro-sub { max-width: none; }
}

/* ============================================
   Lightbox
   ============================================ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background .2s var(--ease);
}

.lightbox-close:hover {
  background: rgba(255,255,255,.25);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 820px) {
  .section-title { font-size: 26px; }
  
  .compare-table thead th,
  .compare-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .shipping-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .shipping-card {
    position: relative;
    top: 0;
  }
  
  .reviews-summary {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .summary-score {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 20px;
  }
  
  .review-card-head {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }
  
  .review-card-head .stars-small {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .section-compare,
  .section-shipping,
  .section-reviews,
  .section-faqs {
    padding: 48px 0;
  }
  
  .section-title { font-size: 22px; }
  .section-sub { font-size: 14px; margin-bottom: 28px; }
  
  .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--ink);
    z-index: 1;
  }
  
  .compare-table tbody td.compare-rowlabel {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
  }
  
  .shipping-card {
    padding: 24px 20px;
  }
  
  .shipping-card-headline { font-size: 22px; }
  
  .reviews-summary {
    padding: 20px;
  }
  
  .summary-number { font-size: 38px; }
  
  .photostrip-row {
    gap: 8px;
  }
  
  .review-photo {
    width: 72px;
    height: 72px;
  }
  
  .review-card {
    padding: 16px 18px;
  }
  
  .faq-q {
    padding: 22px 0px;
    font-size: 15.5px;
  }
  
  .faq-a p {
    padding: 0 0 16px;
  }
}
/* ============================================
   RARELANE — Content Pages
   About, Size Guide, Policies, Search, 404,
   Track Order. Loaded after style.css.
   ============================================ */

/* ---- Shared page hero ---- */

.page-hero {
  padding: 72px 0 40px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  margin-top: 14px;
  line-height: 1.08;
}

.page-hero-text {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--gray);
  font-size: 16px;
}

.page-hero-compact { padding: 56px 0 32px; }
.page-hero-compact h1 { font-size: clamp(28px, 3.4vw, 40px); }

.section-tight { padding: 0 0 96px; }

/* ---- Long-form prose ---- */

.prose h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 48px 0 16px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 17px;
  margin: 32px 0 10px;
}

.prose p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  line-height: 1.75;
}

.prose ul, .prose ol {
  margin: 0 0 18px 20px;
  color: var(--ink-soft);
}

.prose li { margin-bottom: 9px; line-height: 1.7; }

.prose a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  transition: border-color 0.2s var(--ease);
}

.prose a:hover { border-color: var(--gold); }

.prose-updated {
  font-size: 12.5px;
  color: var(--gray-light);
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

/* Standalone section heading outside a .prose block */

.page-h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 52px 0 16px;
}

.page-lead {
  color: var(--gray);
  margin-bottom: 8px;
  line-height: 1.7;
}

/* ---- About: full-bleed visual ---- */

.about-visual img {
  width: 100%;
  height: clamp(280px, 42vw, 480px);
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---- About: numbered process ---- */

.process-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.process-step {
  display: flex;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.process-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
  padding-top: 3px;
  flex-shrink: 0;
}

.process-step h3 { font-size: 17px; margin-bottom: 7px; }
.process-step p { color: var(--gray); font-size: 14.5px; line-height: 1.7; }

/* ---- About: story band ---- */

.section-story {
  background: var(--panel);
  text-align: center;
}

.story-title { font-size: clamp(26px, 3.2vw, 40px); margin: 14px 0 20px; }

.story-text {
  color: var(--gray);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
}

.story-stats {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 7vw, 88px);
  margin-top: 52px;
  flex-wrap: wrap;
}

.stat { display: flex; flex-direction: column; gap: 5px; }
.stat strong { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.stat span { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }

/* ---- CTA band ---- */

.cta-band {
  padding: 88px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}

.cta-band h2 { font-size: clamp(24px, 2.8vw, 34px); }
.cta-band p { color: var(--gray); margin: 14px 0 32px; }

.cta-band-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Size guide table ---- */

.size-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}

.size-table th,
.size-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.size-table th {
  background: var(--panel);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

.size-table tbody tr:last-child td { border-bottom: none; }
.size-table tbody tr:hover { background: var(--line-soft); }
.size-table td:first-child { font-weight: 600; }

.table-note { font-size: 12.5px; color: var(--gray-light); margin-bottom: 40px; }

/* ---- Measure steps ---- */

.measure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin: 32px 0 8px;
}

.measure-card {
  background: var(--panel);
  padding: 26px 24px;
  border-radius: var(--radius);
}

.measure-card .process-num { display: block; margin-bottom: 10px; }
.measure-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.measure-card p { font-size: 14px; color: var(--gray); line-height: 1.65; }

/* ---- Fit callout ---- */

.callout {
  display: flex;
  gap: 16px;
  background: var(--gold-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 32px 0;
}

.callout svg { flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.callout h3 { font-size: 15px; margin-bottom: 6px; }
.callout p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin: 0; }

/* ---- Policy page: two-column with sticky index ---- */

.policy-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

.policy-index {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-right: 20px;
  border-right: 1px solid var(--line);
}

.policy-index a {
  font-size: 13.5px;
  color: var(--gray);
  transition: color 0.2s var(--ease);
}

.policy-index a:hover { color: var(--ink); }

/* ---- Search ---- */

.search-form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 28px auto 0;
}

.search-form input {
  flex: 1;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  transition: border-color 0.2s var(--ease);
}

.search-form input:focus { outline: none; border-color: var(--ink); }

.search-suggestions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.search-suggestions span { font-size: 12.5px; color: var(--gray-light); }

.search-suggestions button {
  font-size: 12.5px;
  color: var(--gray);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 14px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.search-suggestions button:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Track order ---- */

.track-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
  margin: 0 auto;
}

.track-form label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
}

.track-form input {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  width: 100%;
  transition: border-color 0.2s var(--ease);
}

.track-form input:focus { outline: none; border-color: var(--ink); }
.track-form .btn { width: 100%; margin-top: 6px; }

.track-result {
  display: none;
  max-width: 560px;
  margin: 44px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}

.track-result.visible { display: block; }

.track-result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.track-result-head h3 { font-size: 17px; }
.track-status { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

.track-steps { display: flex; flex-direction: column; }

.track-step {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  position: relative;
}

.track-step:last-child { padding-bottom: 0; }

.track-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
  margin-top: 5px;
  z-index: 1;
}

.track-step.done .track-dot { background: var(--gold); border-color: var(--gold); }

/* Connector line between dots */
.track-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.track-step.done:not(:last-child)::before { background: var(--gold); }

.track-step h4 { font-size: 14.5px; margin-bottom: 3px; }
.track-step p { font-size: 13px; color: var(--gray); }
.track-step:not(.done) h4 { color: var(--gray-light); }

/* ---- Contact cards ---- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.contact-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.contact-card svg { color: var(--gold); margin-bottom: 16px; }
.contact-card h3 { font-size: 16px; margin-bottom: 7px; }
.contact-card p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-bottom: 14px; }

.contact-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.contact-link:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Contact form ---- */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-field label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
}

.label-optional { text-transform: none; letter-spacing: 0; color: var(--gray-light); font-weight: 400; }

.contact-form textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
}

.contact-form textarea:focus { outline: none; border-color: var(--ink); }
.contact-form .btn { width: auto; align-self: flex-start; }

.form-note { font-size: 12.5px; color: var(--gray-light); }

/* ---- 404 ---- */

.notfound {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}

.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 160px);
  font-weight: 800;
  line-height: 1;
  color: var(--line);
  letter-spacing: -0.04em;
}

.notfound h1 { font-size: clamp(24px, 3vw, 34px); margin: 12px 0 14px; }
.notfound p { color: var(--gray); max-width: 420px; margin-bottom: 30px; }

/* ---- Active nav state ---- */

.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

/* ---- Footer legal row ---- */

.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12.5px; color: var(--gray); transition: color 0.2s var(--ease); }
.footer-legal a:hover { color: var(--ink); }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .policy-layout { grid-template-columns: 1fr; gap: 36px; }
  .policy-index {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 20px;
  }
}

@media (max-width: 820px) {
  .container-narrow { padding: 0 24px; }
  .page-hero { padding: 52px 0 32px; }
  .section-tight { padding: 0 0 64px; }
  .prose h2 { margin: 36px 0 14px; }
  .process-step { gap: 18px; padding: 24px 0; }
  .story-stats { gap: 32px; margin-top: 40px; }
  .stat strong { font-size: 25px; }
  .cta-band { padding: 64px 0; }
  .track-result { padding: 26px 22px; }
}

@media (max-width: 420px) {
  .search-form { flex-direction: column; }
  .search-form .btn { width: 100%; }
  .story-stats { gap: 24px 32px; }
  .footer-legal { gap: 14px; }
}

/* ============================================
   Modal — reusable overlay component
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-panel {
  position: relative;
  background: var(--white);
  border-radius: 4px;
  padding: 36px 40px;
  max-width: 640px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s var(--ease);
}

.modal-overlay.open .modal-panel {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.modal-close:hover { border-color: var(--ink); background: var(--panel); }

.modal-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}

.modal-intro {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 90%;
}

.modal-table-wrap { overflow-x: auto; }

.modal-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.modal-size-table th {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 12px 10px;
  text-align: center;
  white-space: nowrap;
}

.modal-size-table td {
  padding: 11px 10px;
  text-align: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.modal-size-table tbody tr:nth-child(even) { background: var(--panel); }

.modal-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--gray);
  padding: 14px 16px;
  background: var(--gold-soft);
  border-radius: var(--radius);
}

.modal-note strong { color: var(--ink); }

@media (max-width: 620px) {
  .modal-panel { padding: 28px 22px; }
  .modal-title { font-size: 20px; }
  .modal-intro { max-width: none; font-size: 13.5px; }
  .modal-size-table { font-size: 13px; }
  .modal-size-table th, .modal-size-table td { padding: 9px 6px; }
}

/* ============================================
   Shopify additions — page shell
   ============================================ */

.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;
}

.page-header { padding: 72px 0 28px; }
.page-header h1 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 12px; }
.page-header-sub { color: var(--gray); font-size: 14.5px; margin-top: 12px; }

.page-body { padding: 8px 0 96px; }

.rte { color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; }
.rte h2 { font-size: 24px; margin: 40px 0 14px; }
.rte h3 { font-size: 18px; margin: 30px 0 10px; }
.rte p { margin-bottom: 18px; }
.rte ul, .rte ol { margin: 0 0 18px 20px; }
.rte li { margin-bottom: 8px; }
.rte a { color: var(--gold); text-decoration: underline; }
.rte img { border-radius: var(--radius); margin: 24px 0; }
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.rte th, .rte td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

.section-featured { padding: 96px 0; }

.section-link {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.section-link:hover { color: var(--gold); border-color: var(--gold); }

.placeholder { width: 100%; height: 100%; background: var(--panel); }
.placeholder .placeholder-svg { width: 100%; height: 100%; fill: var(--line); }

/* ============================================
   Shopify additions — product card extras
   ============================================ */

.product-info { padding-top: 2px; }

.product-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.product-card:hover .product-img-hover { opacity: 1; }

.product-badge-out {
  left: auto; right: 12px;
  background: var(--gray);
}

/* ============================================
   Shopify additions — forms
   ============================================ */

.form-error,
.form-success {
  font-size: 13.5px;
  line-height: 1.65;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.form-error { background: #FDF0EE; color: #8C2F1E; }
.form-success { background: var(--gold-soft); color: var(--ink); }
.form-error ul { margin-left: 18px; }

/* ============================================
   Shopify additions — pagination
   ============================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
  flex-wrap: wrap;
}

.pagination-item,
.pagination-link {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--gray);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.pagination-item:hover,
.pagination-link:hover { color: var(--ink); border-color: var(--ink); }

.pagination-item.is-current,
.pagination-item.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* ============================================
   Shopify additions — account pages
   ============================================ */

.account-form-wrap { max-width: 460px; }

.account-form { display: flex; flex-direction: column; }
.account-form h2 { font-size: 22px; margin-bottom: 14px; }

.account-form label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 7px;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="tel"],
.account-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--white);
  margin-bottom: 18px;
  transition: border-color 0.2s var(--ease);
}

.account-form input:focus,
.account-form select:focus { outline: none; border-color: var(--ink); }

.account-form .btn { margin-top: 4px; }
.account-form .btn + .btn { margin-top: 10px; }

.account-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
  font-size: 13.5px;
}

.account-links a {
  color: var(--gray);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.account-links a:hover { color: var(--gold); border-color: var(--gold); }

/* The recover form swaps in via the #recover hash so it works without JS. */
.account-recover { display: none; }
.account-recover:target { display: block; }
.account-recover:target ~ .account-login { display: none; }
.account-recover:has([data-recover-open]) { display: block; }
.account-recover:has([data-recover-open]) ~ .account-login { display: none; }

.account-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}

.account-section-title { font-size: 20px; margin-bottom: 20px; }
.account-empty { color: var(--gray); font-size: 14.5px; margin-bottom: 22px; }

/* ============================================
   Shopify additions — account tables
   ============================================ */

.account-table-scroll { overflow-x: auto; margin-bottom: 32px; }

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.account-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.account-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}

.account-table td a {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.account-table td a:hover { color: var(--gold); border-color: var(--gold); }
.account-table tfoot td { border-bottom: none; color: var(--gray); }
.account-table-total td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }

.account-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding: 22px 24px;
  background: var(--panel);
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.account-status-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 6px;
}

.account-status-value { font-size: 15px; font-weight: 600; }

.account-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ============================================
   Shopify additions — addresses
   ============================================ */

.address-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

.address-default-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 4px 9px;
  border-radius: 2px;
  margin-bottom: 12px;
}

.address-body { font-size: 14px; line-height: 1.75; color: var(--ink-soft); }

.address-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}

.address-actions form { display: inline; }
.address-actions .btn { padding: 8px 16px; font-size: 12px; }

.address-new,
.address-edit { display: none; }
.address-new:target,
.address-edit:target { display: block; }
.address-new:target ~ .address-new-trigger { display: none; }
.address-edit { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.address-new { margin-bottom: 36px; }

.address-default-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.address-default-check input { width: auto; margin: 0; }
.address-province-wrap[hidden] { display: none; }

/* ============================================
   Shopify additions — cart page
   ============================================ */

.cart-page-empty { text-align: center; padding: 60px 0; }
.cart-page-empty p { color: var(--gray); font-size: 15px; margin-bottom: 22px; }

.cart-page-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.cart-page-item .cart-item-img { width: 104px; height: 104px; }

.cart-page-item .cart-item-name {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}

.cart-page-item .cart-item-name:hover { color: var(--gold); }

.cart-page-qty {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.cart-page-qty input {
  width: 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13.5px;
  text-align: center;
}

.cart-page-qty input:focus { outline: none; border-color: var(--ink); }

.cart-page-footer { padding-top: 28px; }

.cart-page-note-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 8px;
}

.cart-page-footer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 22px;
  resize: vertical;
}

.cart-page-footer textarea:focus { outline: none; border-color: var(--ink); }

.cart-page-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cart-page-actions .btn { flex: 1; min-width: 200px; }

.cart-view-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--gray);
  text-decoration: underline;
}

.cart-view-link:hover { color: var(--ink); }

/* ============================================
   Shopify additions — 404 + reviews shell
   ============================================ */

.error-page { padding: 140px 0 120px; text-align: center; }

.error-code {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 700;
  line-height: 1;
  color: var(--line);
  letter-spacing: -0.04em;
}

.error-page h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 8px 0 16px; }
.error-page p { color: var(--gray); font-size: 15px; max-width: 460px; margin: 0 auto 32px; }

.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.reviews-head { text-align: center; margin-bottom: 40px; }

.reviews-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--panel);
  border-radius: var(--radius);
}

.reviews-empty-title { font-family: var(--font-display); font-size: 19px; margin-bottom: 10px; }
.reviews-empty-text { color: var(--gray); font-size: 14.5px; max-width: 420px; margin: 0 auto 22px; }

@media (max-width: 820px) {
  .account-address-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-header { padding: 52px 0 20px; }
}

@media (max-width: 620px) {
  .container-narrow { padding: 0 22px; }
  .cart-page-item { gap: 14px; }
  .cart-page-item .cart-item-img { width: 80px; height: 80px; }
  .cart-page-actions .btn { min-width: 100%; }
  .account-status-row { gap: 24px; }
  .error-page { padding: 90px 0 80px; }
}

/* ============================================
   Shopify additions — contact page layout
   ============================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}

.contact-form-col { min-width: 0; }

.contact-side {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.contact-side h2 { font-size: 19px; margin-bottom: 18px; }

.contact-meta {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.contact-meta:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.contact-meta strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 5px;
}

.contact-meta a { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact-meta a:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================
   Shopify additions — PDP WhatsApp + testimonials
   ============================================ */

.pdp-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pdp-whatsapp:hover { color: #128C7E; border-color: #128C7E; }

/* A real WhatsApp screenshot replaces the typed chat bubbles when one is set. */
.wa-screenshot {
  width: 100%;
  display: block;
  border-radius: 24px;
}

.modal-size-guide { max-width: 720px; }

@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   Size Guide page
   ============================================ */

.size-chart-wrap { margin-top: 8px; }
.size-chart-note { max-width: none; }
.size-chart-rte { margin-top: 32px; }
.size-chart-help { margin-top: 28px; }



/* Policy pages (Settings → Policies) — Shopify injects this markup, so we style it */
body .shopify-policy__container { max-width: 820px; margin: 0 auto; padding: 72px 48px 96px; }
body .shopify-policy__title { text-align: left; margin: 0 0 24px; }
body .shopify-policy__title::before {
  content: 'Legal'; display: block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray); font-weight: 600; margin-bottom: 12px;
}
body .shopify-policy__title h1 {
  font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
body .shopify-policy__body { color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; }
body .shopify-policy__body .rte > h2:first-child,
body .shopify-policy__body .rte > h3:first-child { margin-top: 0; }
@media (max-width: 820px) { body .shopify-policy__container { padding: 52px 22px 72px; } }

/* ---- Footer payment badges ---- */
.pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.pay-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 27px; padding: 0 9px;
  background: #fff; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.01em; color: #10192B; white-space: nowrap;
}
.pay-badge svg { display: block; flex: none; }

.pay-cod-mark {
  width: 17px; height: 17px; border-radius: 4px;
  background: #0A9D58; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.pay-visa { font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: -0.01em; color: #1A1F71; }
.pay-gpay span { color: #5F6368; font-size: 12px; font-weight: 600; }
.pay-paytm { gap: 0; font-size: 12.5px; }
.pay-paytm b { color: #002970; }
.pay-paytm i { color: #00BAF2; font-style: normal; }

@media (max-width: 820px) { .pay-row { justify-content: center; gap: 7px; margin-left: 0; } }

.contact-form .form-note { margin-top: 6px; }

/* Hide product gallery arrows on mobile */
@media (max-width: 820px) {
  .pdp-gallery-arrow {
    display: none !important;
  }
}

/* ============================================
   RARELANE — TESTIMONIAL SLIDER (auto-scroll + swipe)
   Replace the old ".section-testimonials /
   .testimonial-grid / .testimonial-card" block
   at the very end of your CSS file with this.
   ============================================ */

.section-testimonials {
  overflow: hidden;
}

/* This is the "viewport" — it clips the track, it doesn't scroll itself */
.testimonial-grid {
  display: block !important;
  width: 100%;
  overflow: hidden !important;
  position: relative;
  touch-action: pan-y;   /* let vertical page scroll pass through, we own horizontal */
  cursor: grab;
}

.testimonial-grid.is-dragging {
  cursor: grabbing;
}

/* JS creates this and puts the cards (original + 1 clone set) inside it */
.testimonial-track {
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.testimonial-card {
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
  flex-shrink: 0 !important;
  user-select: none;
}

.testimonial-card img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 749px) {
  .testimonial-track {
    gap: 16px;
  }
  .testimonial-card {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 82vw !important;
  }
}

/* ============================================================
   ADD-ON BLOCK — mobile header, bottom bars, premium footer
   Everything below is appended on purpose. Nothing above this line
   is touched, so this block can be pasted onto a live theme.css
   as-is. Each rule either introduces a new class or re-declares an
   existing one at the same specificity, which wins by being later.
   ============================================================ */

/* initMobileMenu() puts .menu-open on <body> but nothing ever styled
   it, so the page behind the open menu still scrolled. */
body.menu-open { overflow: hidden; }

/* Containing block for the centred mobile logo below. */
.nav-container { position: relative; }

/* ---- Mobile header: hamburger | centred logo | search + cart ----
   The hamburger is the last child of .nav-actions in the markup.
   Instead of moving it — which would mean editing header.liquid —
   .nav-actions is flattened with display:contents so its children
   become flex items of .nav-container, and order pulls the hamburger
   to the front. margin-right:auto then keeps search + cart together
   on the right. Desktop is untouched. */

@media (max-width: 820px) {
  .nav-container { gap: 4px; }
  .nav-actions { display: contents; }

  .nav-toggle { order: -1; margin-left: -8px; margin-right: auto; }
  .cart-trigger { margin-right: -8px; }

  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
  }
  .logo img { width: auto; max-height: 26px; }
}

/* ---- Fixed bottom bars ----
   --mbar-h holds the rendered height of whichever bar is on the page.
   The add-on JS measures the bar and writes the value onto <body>,
   rather than hardcoding it, because the bar grows with the merchant's
   font choice. It stays 0px on desktop, where the bars are hidden. */

:root { --mbar-h: 0px; }

/* The measured height already includes the bar's safe-area padding */
body { padding-bottom: var(--mbar-h); }

.mobile-bar,
.pdp-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Quick nav bar (every template except product) ---- */

.mobile-bar {
  align-items: stretch;
  transition: transform 0.3s var(--ease-out);
}

.mobile-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px 2px;
  position: relative;
  color: var(--gray);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.mobile-bar-item svg { flex: none; }
.mobile-bar-item:active { color: var(--ink); }
.mobile-bar-item.active { color: var(--ink); font-weight: 600; }

/* Hairline marker so the active tab reads without relying on colour alone */
.mobile-bar-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background: var(--gold);
}

.mobile-bar-wa { color: #1FA855; }

/* The slide-in menu covers the screen, so drop the bar out of the way */
body.menu-open .mobile-bar { transform: translateY(100%); }

/* ---- Sticky buy bar (product template) ---- */

.pdp-bar {
  flex-direction: column;
  gap: 7px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform 0.32s var(--ease-out);
  box-shadow: 0 -6px 24px rgba(17, 17, 16, 0.07);
}

.pdp-bar.visible { transform: translateY(0); }
body.menu-open .pdp-bar { transform: translateY(105%); }

.pdp-bar-row { display: flex; align-items: center; gap: 10px; }

.pdp-bar-thumb {
  width: 40px; height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  background: var(--panel);
}

.pdp-bar-meta { min-width: 0; flex: 1; }

.pdp-bar-title {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-bar-price { display: flex; align-items: baseline; gap: 7px; line-height: 1.25; }
.pdp-bar-price b { font-size: 15px; font-weight: 600; }
.pdp-bar-price s { font-size: 11.5px; color: var(--gray-light); }

.pdp-bar-size {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.pdp-bar-add { width: 100%; min-height: 44px; }

/* ---- Turn the bars on, and lift whatever else is pinned to the bottom ---- */

@media (max-width: 820px) {
  .mobile-bar { display: flex; }
  .pdp-bar { display: flex; }

  .video-widget {
    bottom: calc(var(--mbar-h) + 14px);
    right: 14px;
  }
}

/* ============================================================
   Premium footer pass
   ============================================================ */

/* Thin gold rule where the page meets the footer */
.footer { border-top: 2px solid var(--gold); }

.footer-logo { font-size: 22px; }
.footer-desc { margin-bottom: 24px; }

.footer-socials { gap: 10px; }

/* 44px hit area — the old bare 19px icons were both hard to see and
   hard to tap. The circle does the sizing so the SVGs in footer.liquid
   stay untouched. */
.footer-socials a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.92);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.footer-socials a svg { width: 20px; height: 20px; }

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-col h4 {
  letter-spacing: 0.14em;
  color: var(--gold);
}

/* ============================================================
   Compact mobile footer — same content, about half the height.
   Brand block spans the full width, Shop and Support pair up, and
   Legal collapses into one inline dot-separated run.
   ============================================================ */

@media (max-width: 820px) {
  .footer { padding: 40px 0 22px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    padding-bottom: 24px;
  }

  .footer-col:first-child { grid-column: 1 / -1; }

  .footer-logo { font-size: 19px; margin-bottom: 8px; }
  .footer-desc { font-size: 12.5px; max-width: 340px; margin-bottom: 16px; }
  .footer-socials { gap: 9px; }

  .footer-col h4 { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .footer-col > a { font-size: 13px; margin-bottom: 8px; }

  /* Legal is the 4th column: four short links waste a whole row stacked */
  .footer-col:nth-child(4) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
  }
  .footer-col:nth-child(4) h4 { flex: 0 0 100%; }
  .footer-col:nth-child(4) > a {
    display: inline;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.66);
  }
  .footer-col:nth-child(4) > a:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: rgba(255,255,255,0.3);
  }

  .footer-bottom { margin-top: 18px; gap: 10px; font-size: 11.5px; }
}

/* RARELANE — Judge.me review photos fix */
.jdgm-rev__pic,
.jdgm-rev__pics,
.jdgm-rev__pic-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.jdgm-rev__pic-img {
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 220px !important;
  object-fit: cover !important;
}

/* ============================================================
   ADD-ON BLOCK 2 — fixes found on the live site
   Same rules as block 1: append only, nothing above is touched.
   ============================================================ */

/* The logo is an image on the live theme, two stacked words, so the 26px
   cap in block 1 squashed each line to ~11px. 42px leaves 13px of the
   68px nav for breathing room. Tune this one number to taste. */
@media (max-width: 820px) {
  .logo { font-size: 21px; }
  .logo img { width: auto; max-height: 100px; }
}

/* The drawer slid in from the right while its trigger now sits on the
   left, so the panel appeared to come from the wrong edge. .mobile-menu.open
   is more specific and still wins, so the open state is unaffected. */
.mobile-menu { transform: translateX(-100%); }

/* Mobile browsers resolve position:fixed against the viewport as it was
   while the URL/toolbar bar was showing. When the toolbar retracts on
   scroll the bar does not follow it down, and a strip of page shows
   underneath. Extending the bar's own background past the viewport edge
   means whatever gap opens is covered by the bar itself. A pseudo-element
   is used so it stays out of offsetHeight and --mbar-h keeps measuring
   only the real bar.
   ponytail: 140px clears every current mobile browser toolbar — raise it
   if a taller one ever ships. */
.mobile-bar::after,
.pdp-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 140px;
  background: var(--white, #fff);
  pointer-events: none;
}

/* ============================================================
   ADD-ON BLOCK 3 — inline search panel
   Markup for this is created by theme.js, so there is no Liquid to edit.
   The panel deliberately covers the header rather than sitting under it:
   no need to measure the announcement bar or the sticky nav offset.
   ============================================================ */

.search-scrim {
  position: fixed;
  inset: 0;
  z-index: 155;
  background: rgba(17, 17, 16, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.search-scrim.open { opacity: 1; pointer-events: auto; }

.search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 160;
  max-height: 78vh;
  overflow-y: auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transform: translateY(-105%);
  transition: transform 0.28s var(--ease-out);
}
.search-panel.open { transform: translateY(0); }

body.search-open { overflow: hidden; }

/* Same treatment the open menu already gets: nothing at the bottom of the
   screen while the search panel owns it. Without this the bars stay bright
   above the scrim, because their background is 94% opaque. */
body.search-open .mobile-bar { transform: translateY(100%); }
body.search-open .pdp-bar { transform: translateY(105%); }

.search-panel-form { display: flex; align-items: center; gap: 10px; }
.search-panel-form input[type='search'] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  -webkit-appearance: none;
}
.search-panel-form input[type='search']:focus-visible {
  outline: none;
  border-color: var(--ink);
}
.search-panel-close {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--gray);
  cursor: pointer;
}

.search-panel-results { margin-top: 12px; }
.search-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  color: var(--ink);
}
.search-hit img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  background: var(--panel);
}
.search-hit span { font-size: 13.5px; line-height: 1.35; }
.search-all {
  display: block;
  margin-top: 6px;
  padding: 11px 2px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.search-empty { padding: 14px 2px; font-size: 13px; color: var(--gray); }

/* ============================================================
   ROUND 3 — two-row header (inline search + brand row), mobile
   menu rewrite, infinite scroll status. Appended, so every rule
   here re-declares at the same specificity and wins by position.
   ============================================================ */

:root { --brow-h: 46px; }

/* ---- Row 1: logo | search | cart + CTA ---- */

.nav-container { gap: 28px; }

/* Row 1 stays 68px tall while the live header.liquid sizes the logo with an
   inline `width: {{ settings.logo_width | default: 100 }}px`. On a square mark
   that renders 100px tall and spills into the brand row, so cap the height and
   let the width follow the aspect ratio. `!important` is the only thing that
   outranks an inline style. Tune --logo-h, not logo_width. */
:root { --logo-h: 100px; }

.logo img {
  width: auto !important;
  height: auto;
  max-height: var(--logo-h);
}

.nav-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 5px 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-search:focus-within { border-color: var(--ink); background: var(--white); }

.nav-search input[type='search'] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.nav-search input::placeholder { color: var(--gray-light); }
.nav-search input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav-search-btn {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.nav-search-btn:hover { background: var(--gold-soft); }

.nav-cta {
  flex: none;
  margin-left: 6px;
  height: 40px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}

.nav-cta:hover { background: var(--gold); }

/* The icon only earns its place where the inline field is hidden */
.nav-icon-search { display: none; }

/* ---- Row 2: brand collections, scrolls sideways when it overflows ---- */

.brand-row {
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.7);
}

.brand-row-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
}
.brand-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.brand-scroll::-webkit-scrollbar { display: none; }

.brand-link {
  flex: none;
  display: flex;
  align-items: center;
  position: relative;
  height: var(--brow-h);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease);
}

.brand-link:hover { color: var(--ink); }
.brand-link.active { color: var(--ink); font-weight: 600; }

.brand-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
}

/* Page links sit outside the scroller, so they never scroll away */
.brand-row .nav-links {
  flex: none;
  align-items: center;
  gap: 22px;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.brand-row .nav-links a { font-size: 12.5px; }
/* ---- Mobile menu: full-screen drawer with its own header ---- */

.mobile-menu {
  z-index: 200;
  padding: 0;
  gap: 0;
}

.mobile-menu-head {
  flex: none;
  height: var(--nav-h);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

.mobile-menu-close {
  width: 40px; height: 40px;
  margin-right: -8px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.mobile-menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 22px calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

.mobile-menu-label {
  padding: 20px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
}
.mobile-menu-scroll a {
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.mobile-menu-scroll a.active { color: var(--gold); font-weight: 600; }

/* ---- Infinite scroll status line ---- */

.infinite-status {
  padding: 40px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.infinite-status::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.infinite-status[data-done]::before { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .infinite-status::before { animation-duration: 2.4s; }
}
/* ---- Responsive: the brand row is the only nav on small screens ---- */

@media (max-width: 1024px) {
  .brand-row-inner { padding: 0 32px; }
}

@media (max-width: 820px) {
  /* re-declared because the round-1 rule above is now earlier in the file */
  .nav-container { gap: 4px; }

  :root { --logo-h: 100px; }

  .nav-search { display: none; }
  .nav-icon-search { display: flex; }
  .nav-cta { display: none; }

  :root { --brow-h: 42px; }
  .brand-row-inner { padding: 0 0 0 20px; }
  .brand-scroll { gap: 20px; padding-right: 20px; }
  .brand-link { font-size: 12.5px; }
}

@media (max-width: 820px) {
  .brand-row { display: none; }
}

<script>
document.addEventListener('DOMContentLoaded', function () {

  document.querySelectorAll('.video-widget').forEach(function (widget) {

    if (widget.dataset.videoInitialized === 'true') return;
    widget.dataset.videoInitialized = 'true';

    const toggle = widget.querySelector('.video-toggle');
    const panel = widget.querySelector('.video-panel');
    const close = widget.querySelector('.video-close');
    const mute = widget.querySelector('.video-mute');
    const video = widget.querySelector('video');

    if (!toggle || !panel || !close || !mute || !video) {
      console.warn('RareLane: Floating video widget elements are missing.');
      return;
    }

    /* OPEN */
    toggle.addEventListener('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      widget.classList.add('expanded');
      toggle.setAttribute('aria-expanded', 'true');

      video.muted = true;

      mute.classList.remove('unmuted');
      mute.setAttribute('aria-pressed', 'false');
      mute.setAttribute('aria-label', 'Turn sound on');

      video.play().catch(function (error) {
        console.warn('RareLane: Video could not start automatically.', error);
      });

    });


    /* CLOSE */
    close.addEventListener('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      widget.classList.remove('expanded');
      toggle.setAttribute('aria-expanded', 'false');

      video.pause();

      try {
        video.currentTime = 0;
      } catch (e) {}

    });


    /* MUTE / UNMUTE */
    mute.addEventListener('click', function (event) {

      event.preventDefault();
      event.stopPropagation();

      video.muted = !video.muted;

      if (video.muted) {

        mute.classList.remove('unmuted');
        mute.setAttribute('aria-pressed', 'false');
        mute.setAttribute('aria-label', 'Turn sound on');

      } else {

        mute.classList.add('unmuted');
        mute.setAttribute('aria-pressed', 'true');
        mute.setAttribute('aria-label', 'Mute video');

      }

    });


    /* ESCAPE TO CLOSE */
    document.addEventListener('keydown', function (event) {

      if (
        event.key === 'Escape' &&
        widget.classList.contains('expanded')
      ) {
        close.click();
      }

    });

  });

});
</script>

/* ============================================
   Floating Video Widget — Mobile Fix
   ============================================ */

@media screen and (max-width: 749px) {

  .video-widget {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    bottom: 16px !important;
    right: 12px !important;

    width: 64px;
    height: 64px;

    z-index: 99999 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .video-toggle {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .video-preview {
    width: 100%;
    height: 100%;
  }

  .video-panel {
    width: min(260px, calc(100vw - 24px));
    height: min(462px, calc(100vh - 24px));
  }

@media screen and (max-width: 749px) {
  .video-widget {
    position: fixed;
    right: 12px;
    bottom: 12px;
    top: auto;
    left: auto;
    width: 64px;
    height: 64px;
    z-index: 200;
    margin: 0;
    padding: 0;
  }

  .video-toggle {
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
  }

  .video-preview {
    width: 100%;
    height: 100%;
  }

  .video-panel {
    width: min(260px, calc(100vw - 24px));
    height: min(462px, calc(100vh - 24px));
  }
}