/** Shopify CDN: Minification failed

Line 1995:0 Unexpected "}"
Line 2251:9 Expected identifier but found "addEventListener("

**/
/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-black: #000;
  --color-white: #fff;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
}

html, body {
  font-family: var(--font-family) !important;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 300;
  color: var(--color-black);
  background: var(--color-white);
  margin: 0;
  padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family) !important;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
}

/* Typography */
h1 { font-size: 4rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 3rem; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 1.5rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.125rem; font-weight: 400; line-height: 1.4; }

/* Labels */
label { font-size: 0.875rem; font-weight: 400; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; }

/* Buttons */
button, .button {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

/* Utility Container — full width globally */
.container {
  max-width: 1280px;   /* same as max-w-7xl */
  margin: 0 auto;      /* center horizontally */
  padding: 0 2rem;     /* gutters like px-8 */
}

/* Hover Effects */
.hover-opacity:hover { opacity: 0.6; }
.hover-scale { transition: transform 0.7s ease-out; }
.hover-scale:hover { transform: scale(1.05); }

/* Mobile Menu */
.mobile-menu { display: none; }
.mobile-menu.active { display: block; }

/* Responsive Typography */
@media (max-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.25rem; }
}

/* --- About Page Styles --- */
.about-page { background:#000; color:#fff; font-family:Inter,sans-serif; }

/* Hero container */
.about-page .hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: flex-start; /* desktop: left-aligned */
}

.about-page .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
}

.about-page .hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.4), #000);
}

/* Desktop text block */
.about-page .hero .hero-text {
  position: relative;
  max-width: 700px;
  padding: 0 10rem;
  margin-left: 10%;
  text-align: left;
  color: #fff;
}

.about-page .hero .hero-text h1 {
  font-size: 6rem;
  line-height: 0.9;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.about-page .hero .hero-text p {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Mobile overrides — correct scoped selectors */
@media (max-width: 768px) {
  .about-page .hero {
    justify-content: center;        /* center horizontally */
  }

  .about-page .hero .hero-text {
    max-width: 90%;
    padding: 0 1rem;                /* remove wide desktop padding */
    margin: 0 auto;                 /* remove left offset */
    text-align: center;             /* center text */
  }

  .about-page .hero .hero-text h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .about-page .hero .hero-text p {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 auto;
  }
}



/* Section Titles */
.about-page h2.section-title {
  font-size:0.875rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:400;
  margin-bottom:2rem;
}

/* Two-column grid */
.two-column {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.about-page .image img {
  width:100%;
  height:400px; /* smaller image height */
  object-fit:cover;
  display:block;
}
.lead { font-size:1.8rem; color:#ccc; }
.sub { font-size:1.2rem; color:#aaa; }
.box { border:1px solid #333; padding:1.5rem; margin-top:2rem; }

/* How It Works */
.about-page .how-it-works { background:#fff; color:#000; }
.three-column {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  text-align:center;
}
.about-page .how-it-works .card { text-align:center; }
.icon-box {
  width: 80px;              /* keep square, slightly larger */
  height: 80px;
  border: 2px solid #000;    /* square outline */
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* centers the SVG inside */
}

.about-page .how-it-works h3 {
  font-size: 1.25rem;     /* smaller than global h3 */
  font-weight: 300;       /* lighter */
  margin-bottom: 0.5rem;
}

.about-page .how-it-works p {
  font-size: 1rem;        /* smaller body text */
  font-weight: 300;       /* keep light */
  color: #4b5563;         /* gray-600 for softer contrast */
  line-height: 1.5;
}


.icon-box svg {
  width: 80px;   /* larger icon size */
  height: 80px;
  stroke-width: 1; /* thicker lines for visibility */
}


/* Categories grid */
.grid-2x2 { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.categories .card { position:relative; border:1px solid #333; overflow:hidden; }
.categories .card img { width:100%; height:400px; object-fit:cover; opacity:.5; transition:opacity .3s; }
.categories .card:hover img { opacity:.7; }
.categories .card .text { position:absolute; bottom:2rem; left:2rem; }
.categories .card h3 { font-size:2rem; margin-bottom:.5rem; }
.categories .card p { color:#ccc; }

/* CTA */
.cta { text-align:center; border:1px solid #333; padding:4rem 2rem; }
.cta h2 { font-size:2.5rem; margin-bottom:1rem; }
.cta p { font-size:1.2rem; color:#ccc; margin-bottom:2rem; }
.cta .button {
  display:inline-block;
  padding:1rem 3rem;
  background:#fff;
  color:#000;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:300;
  text-decoration:none !important;
  transition:background .3s;
}
.cta .button:hover { background:#eee; }

/* Section spacing */
.about-page section { padding:8rem 0; }

.about-page .box .title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.about-page .box .supporting {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-gray-400);
  line-height: 1.5;
}

/* --- Pricing Page (scoped) --- */
.pricing-page { background:#000; color:#fff; padding:8rem 0; font-family: var(--font-family); }

/* Container rhythm */
.pricing-page .container { max-width:1280px; margin:0 auto; padding:0 2rem; }

/* Pricing Page Header */
.pricing-page .pricing-header {
  text-align:left;          /* left align everything */
  margin-bottom:6rem;       /* spacing below header */
}

.pricing-page .headline {
  font-size:5rem;
  line-height:0.9;
  font-weight:300;
  color:#fff;
  margin-bottom:1.5rem;
}

.pricing-page .subtitle {
  font-size:1.25rem;
  color:#9ca3af;            /* gray-400 */
  font-weight:300;
  margin-top:2rem;
  max-width:40rem;          /* keep readable width */
}

.pricing-page .divider {
  width:6rem;
  height:1px;
  background:#fff;
  margin-top:2rem;          /* space above line */
}


/* Tiers */
.pricing-page .tiers { display:grid; grid-template-columns:1fr; gap:2rem; margin:0 auto 2rem; max-width:64rem; }
@media (min-width:768px){ .pricing-page .tiers { grid-template-columns:1fr 1fr; } }
.pricing-page .tier-card { border:1px solid #1f2937; padding:2rem; position:relative; background:transparent; }
.pricing-page .tier-card.popular { border-color:#fff; }
.pricing-page .badge { position:absolute; top:-1rem; left:2rem; background:#fff; color:#000; padding:0.25rem 0.75rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
.pricing-page .tier-inner { margin-bottom:2rem; }
.pricing-page .tier-name { font-size:1.5rem; font-weight:400; color:#fff; margin:0 0 .5rem; }
.pricing-page .fee { font-size:3rem; font-weight:300; color:#fff; margin:0 0 .5rem; }
.pricing-page .delivery { font-size:0.875rem; color:#6b7280; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }
.pricing-page .desc { font-size:1rem; color:#9ca3af; font-weight:300; }
.pricing-page .features { list-style:none; padding:0; margin:0; }
.pricing-page .features li { font-size:0.95rem; color:#d1d5db; margin-bottom:0.75rem; display:flex; justify-content:space-between; }

/* Section label */
.pricing-page .section-title { font-size:1.5rem; color:#fff; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }

/* Global spacing between sections */
.pricing-page .fee-breakdown,
.pricing-page .examples,
.pricing-page .additional-costs,
.pricing-page .multi-orders,
.pricing-page .faq { margin-bottom:8rem; }

/* Disclaimer (under tiers) */
.pricing-page .disclaimer { text-align:center; font-size:0.875rem; color:#6b7280; margin:0 auto 8rem; max-width:64rem; }

/* Fee Breakdown section */
.pricing-page .fee-breakdown { margin-bottom:4rem; }

.pricing-page .section-title {
  font-size:1.25rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#fff;
  margin-bottom:0.25rem; /* slightly larger than before for balance */
}

.pricing-page .subtitle {
  font-size:1rem;
  color:#6b7280;
  margin-top:0;          /* remove default top margin */
  margin-bottom:1rem;    /* keep spacing below subtitle */
}

.pricing-page .two-column {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:stretch;
}
@media (min-width:768px){
  .pricing-page .two-column { grid-template-columns:1fr 1fr; }
}

.pricing-page .additional-costs .box {
  min-height: auto;   /* remove forced tall height */
  padding: 1.5rem;    /* keep breathing room */
  margin: 0;
}

.pricing-page .box-title {
  font-size:1.125rem;
  font-weight:500;
  color:#fff;
  margin-bottom:1rem;
}

.pricing-page .bullet-list {
  list-style:disc;
  padding-left:1.25rem;
  margin:0;
}
.pricing-page .bullet-list li {
  font-size:0.95rem;
  color:#d1d5db;
  margin-bottom:0.75rem;
  line-height:1.6;
}

.pricing-page .note-wrap {
  border-top:1px solid #374151;
  margin-top:1rem;   /* reduced spacing */
  padding-top:0.75rem; /* tighter padding */
}

.pricing-page .note {
  font-size:0.875rem;
  color:#6b7280;
}
.pricing-page .note-label {
  color:#fff; /* "Note:" in white */
}

/* Examples table */
/* Examples section should span full width */
.pricing-page .examples {
  grid-column: 1 / -1;   /* if parent uses CSS Grid */
  flex: 0 0 100%;        /* if parent uses Flexbox */
  width: 100%;
  margin-bottom: 3rem;   /* spacing before Additional Costs */
}
.pricing-page .table-row .color-label {
  display: block;       /* forces onto new line */
  color: #9ca3af;       /* lighter gray font */
  font-weight: 400;     /* normal weight */
  font-size: 0.875rem;  /* slightly smaller */
}

.pricing-page .table { border:1px solid #1f2937; }
.pricing-page .table-header {
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;
  padding:1rem 1.5rem; border-bottom:1px solid #1f2937;
  background:#111827; color:#9ca3af; font-size:0.875rem; text-transform:uppercase; letter-spacing:0.05em;
}
.pricing-page .table-row {
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;
  padding:1rem 1.5rem; border-bottom:1px solid #1f2937;
}
.pricing-page .shipping-disclaimer { font-size:0.875rem; color:#6b7280; margin-top:1.5rem; }

/* Add breathing room before Examples header */
.pricing-page .examples .section-title {
  margin-top: 3rem;      /* push header down from Fee Breakdown */
  margin-bottom: 0; /* keep a bit of gap below */
}

/* Add extra spacing below Examples subtitle */
.pricing-page .examples .subtitle {
  margin-bottom: 1.5rem;   /* increase gap before the table */
}


/* Additional costs */
.pricing-page .three-column { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:1rem; }
@media (min-width:768px){ .pricing-page .three-column { grid-template-columns:repeat(3,1fr); } }
.pricing-page .h4 { font-size:1rem; color:#fff; margin-bottom:.5rem; }
.pricing-page .note-sm { font-size:0.875rem; color:#6b7280; }

/* Additional Costs section: full width, no vertical gap, left-aligned text */
.pricing-page .additional-costs {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 3rem;
  padding-bottom: 0 !important;
}

.pricing-page .additional-costs .box > *:last-child {
  margin-bottom: 0 !important; /* kill trailing margin */
}

/* Ensure all text is left-aligned and unbolded */
.pricing-page .additional-costs h2,
.pricing-page .additional-costs p,
.pricing-page .additional-costs h3,
.pricing-page .additional-costs h4,
.pricing-page .additional-costs .note-sm,
.pricing-page .additional-costs .desc {
  text-align: left;
  font-weight: 400;
  margin-bottom: 0; /* consistent vertical rhythm */
}

/* Add breathing room between subtitle and box */
.pricing-page .additional-costs .subtitle {
  margin-bottom: 1.5rem; /* increase gap below subtitle */
}

/* Box title: bigger but not bold */
.pricing-page .box-title {
  font-size: 1.25rem;   /* larger than default */
  font-weight: 400;     /* normal weight, not bold */
  color: #fff;
  margin-bottom: 1rem;
}

/* Extra spacing below Import Duties & Customs heading */
.pricing-page .additional-costs .box-title {
  margin-bottom: 1.5rem; /* increase gap before the description */
}


/* Country names: normal weight */
.pricing-page .h4 {
  font-size: 1rem;
  font-weight: 400;     /* remove bold */
  color: #fff;
  margin-bottom: 0.5rem;
}

/* Multiple orders (consolidation) */
.pricing-page .p-12 { padding:3rem; }
.pricing-page .max-3xl { max-width:48rem; }
.pricing-page .section-h3 { font-size:1.5rem; color:#fff; margin-bottom:1rem; }
.pricing-page .desc-lg { font-size:1.125rem; color:#d1d5db; margin-bottom:2rem; }
.pricing-page .compare { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem; }
@media (min-width:768px){ .pricing-page .compare { grid-template-columns:1fr 1fr; } }
.pricing-page .panel { background:#111827; border:1px solid #1f2937; padding:1.5rem; }
.pricing-page .panel.consolidated { border-color:#fff; }
.pricing-page .panel-title { font-size:0.875rem; color:#fff; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }
.pricing-page .kv { display:flex; justify-content:space-between; gap:1rem; font-size:0.875rem; color:#d1d5db; margin-bottom:.5rem; }
.pricing-page .kv.total { border-top:1px solid #374151; padding-top:.75rem; margin-top:.75rem; }
.pricing-page .saving { color:#10b981; font-size:0.75rem; margin-top:.5rem; }
.pricing-page .red { color:#f87171; }
.pricing-page .green { color:#10b981; }
.pricing-page .panel-subtitle { color:#9ca3af; font-size:0.875rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }
.pricing-page .tip { color:#9ca3af; font-size:0.875rem; margin-top:1rem; }

/* Make Multiple Item Orders section full width */
.pricing-page .multi-orders {
  grid-column: 1 / -1;   /* if parent uses grid */
  flex: 0 0 100%;        /* if parent uses flex */
  width: 100%;
}

.pricing-page .multi-orders .box {
  max-width: 100%;       /* remove box width cap */
  width: 100%;
}

.pricing-page .multi-orders .max-3xl {
  max-width: 100%;       /* override 48rem cap */
  width: 100%;
}

.pricing-page .green,
.pricing-page .saving {
  color:#10b981;
  font-size:0.8rem; /* slightly smaller, consistent */
}

/* Tighten spacing between consecutive green benefit lines */
.pricing-page .panel .green {
  margin: 0.25rem 0;   /* smaller vertical spacing */
  font-size: 0.8rem;   /* keep the slightly smaller size */
  line-height: 1.4;    /* balanced readability */
}


/* FAQ */
.pricing-page .faq .box { margin-bottom:1.5rem; }


/* Make FAQ section full width */
.pricing-page .faq {
  grid-column: 1 / -1;   /* if parent uses grid */
  flex: 0 0 100%;        /* if parent uses flex */
  width: 100%;
}

.pricing-page .faq .box {
  max-width: 100%;       /* remove any width cap */
  width: 100%;
}

/* Lighter FAQ headers */
.pricing-page .faq .box-title {
  font-weight: 300;   /* lighter weight */
  color: #fff;        /* keep white for contrast */
  margin-bottom: 0.75rem; /* slightly tighter spacing */
}

/* Remove trailing margin inside FAQ boxes */
.pricing-page .faq .box > *:last-child {
  margin-bottom: 0; /* no extra space after the last text */
}

/* Keep spacing between boxes consistent */
.pricing-page .faq .box {
  margin-bottom: 1.5rem; /* space between boxes only */
}


/* CTA */
.pricing-page .cta { border:1px solid #1f2937; padding:4rem; text-align:center; }
.pricing-page .cta-title { font-size:2.25rem; color:#fff; margin-bottom:1rem; }
.pricing-page .cta-sub { font-size:1.25rem; color:#9ca3af; margin:0 auto 2rem; max-width:40rem; }
.pricing-page .btn { display:inline-block; padding:1rem 3rem; background:#fff; color:#000; text-transform:uppercase; letter-spacing:0.05em; text-decoration:none; }
.pricing-page .btn:hover { background:#eee; }

/* CTA aligned to FAQ */
.pricing-page .cta {
  grid-column: 1 / -1;   /* sit on its own line */
  width: 94%;
  border: 1px solid #1f2937;
  padding: 4rem;
  text-align: center;
}

/* Remove extra gap between FAQ and CTA */
.pricing-page .faq {
  margin-bottom: 0; /* no extra bottom margin */
}

.pricing-page .cta {
  margin-top: 2rem; /* smaller top margin to tighten spacing */
}
/* Currency disclaimer */
.pricing-page .currency-wrap {
  grid-column: 1 / -1;
  width: 104%;
  margin: 3rem auto 0;   /* center horizontally */
  border-top: 1px solid #1f2937;
  padding-top: 2rem;
  text-align: center;
}

.pricing-page .currency-disclaimer {
  font-size: 0.875rem;
  color: #6b7280;
  max-width: 80rem;      /* keep text aligned with box */
  margin: 0 auto;        /* center text block */
}

/* Page */
.product-page { background:#000; color:#fff; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.product-page .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width:1024px) {
  .product-page .grid {
    grid-template-columns: 1fr 1fr;
  }
}

.aspect-3-4 {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.product-media {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 640px;
  position: relative;
}
.media-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-fill {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.product-page h1 { font-size: 3rem; font-weight: 600; color: #fff; }
.product-page p { font-size: 1rem; color: #9ca3af; }
.product-page .product-price { font-size: 1.5rem; color: #d1d5db; margin-bottom: 2rem; }

/* Aspect box */
.aspect-3-4 { aspect-ratio: 3 / 4; }

/* Swiper sizing */
.product-media .swiper { width:100%; height:100%; }
.product-media .swiper-wrapper { width:100%; height:100%; }
.product-media .swiper-slide { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

/* Ensure the media fills the box */
.media-fill { width:100%; height:100%; object-fit:cover; display:block; }

/* Arrows visible on black */
.swiper-button-prev, .swiper-button-next { color:#fff; }

/* Selectors */
.selector-label {
  padding:0.75rem;
  border:1px solid #1f2937;
  color:#fff;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.selector-label:hover { border-color:#fff; }
.selector-label.selected { border-color:#fff; background:#fff; color:#000; }

/* CTA */
button.cta {
  width:100%;
  padding:1.25rem;
  background:#fff;
  color:#000;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:1.125rem;
  font-weight:500;
  transition:background .2s ease;
}
button.cta:hover { background:#f3f4f6; }

/* Info section */
.info { border-top:1px solid #1f2937; margin-top:3rem; padding-top:2rem; }
.info-title { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:#6b7280; margin-bottom:0.5rem; }
.info ul { color:#9ca3af; font-size:0.875rem; line-height:1.6; }

/* Page wrapper and container */
.product-page {
  background: #000;
  color: #fff;
  font-family: var(--font-family);
  min-height: 100vh;
  padding-top: 8rem;
  padding-bottom: 5rem;
}
.product-page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Back link */
.product-page .back-link {
  color: #9ca3af;
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 3rem;
  text-decoration: none;
  transition: color .2s ease;
}
.product-page .back-link:hover { color: #fff; }

/* Two-column grid */
.product-page .product-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: 4rem;
}
@media (min-width: 1024px) {
  .product-page .product-grid {
    grid-template-columns: 1fr 1fr;  /* desktop: two columns */
  }
}

/* Left column: single-box gallery */
.product-page .product-media {
  aspect-ratio: 3 / 4;
  border: 1px solid #1f2937; /* gray-800 */
  position: relative;
  width: 100%;
  max-width: 640px;          /* keep a reasonable box width */
  margin: 0;                 /* no extra gap */
  overflow: hidden;
}
.product-page .product-media .swiper {
  width: 100%;
  height: 100%;
}
.product-page .product-media .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.product-page .product-media .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-page .media-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the box, no stretch */
  display: block;
  background: #000;           /* avoids blue/white flash */
}

/* Navigation arrows visible and clickable */
.product-page .swiper-button-prev,
.product-page .swiper-button-next {
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;                 /* above image */
}
.product-page .swiper-button-prev { left: 12px; }
.product-page .swiper-button-next { right: 12px; }

/* Right column: details */
.product-page .product-details { display: flex; flex-direction: column; }
.product-page .vendor {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.product-page .title {
  font-size: 3rem;   /* ≈ text-5xl */
  font-weight: 300;  /* light, not bold */
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1rem;
}
.product-page .product-price {
  font-size: 1.5rem;          /* ≈ text-3xl */
  color: #d1d5db;
  margin-bottom: 2rem;
}
.product-page .description {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: #9ca3af;
  margin-bottom: 2rem;
}

/* Release section */
.product-page .release {
  border-top: 1px solid #1f2937;
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
.product-page .release .label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.product-page .release .value { color: #fff; }

/* Selectors */
.product-page .selector-group { margin-bottom: 2rem; }
.product-page .selector-grid {
  display: grid; gap: 0.75rem;
}
.product-page .selector-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-page .selector-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.product-page .selector-label {
  padding: 0.75rem;
  border: 1px solid #1f2937;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.product-page .selector-label:hover { border-color: #fff; }
.product-page .selector-label.selected { background: #fff; color: #000; border-color: #fff; }

/* CTA */
.product-page button.cta {
  width: 100%;
  padding: 1.25rem;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  font-weight: 500;
  transition: background .2s ease;
}
.product-page button.cta:hover { background: #f3f4f6; }

/* Info section */
.product-page .info {
  border-top: 1px solid #1f2937;
  margin-top: 3rem;
  padding-top: 2rem;
}
.product-page .info-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.product-page .info-list {
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.6;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Reduce top/bottom padding */
.product-page {
  padding-top: 4rem;   /* was 8rem */
  padding-bottom: 3rem; /* was 5rem */
}

/* Grid gap smaller */
.product-page .product-grid {
  gap: 2rem; /* was 4rem */
}

/* Title smaller and lighter */
.product-page .title {
  font-size: 2rem;   /* was 3rem */
  font-weight: 300;  /* light */
  margin-bottom: 0.75rem;
}

/* Price smaller */
.product-page .product-price {
  font-size: 1.25rem; /* was 1.5rem */
  margin-bottom: 1rem;
}

/* Description tighter */
.product-page .description {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

/* Release section spacing */
.product-page .release {
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

/* Selector buttons smaller */
.product-page .selector-label {
  padding: 0.5rem;
  font-size: 0.85rem;
}

/* CTA button less tall */
.product-page button.cta {
  padding: 0.9rem;
  font-size: 1rem;
}

/* Info section spacing */
.product-page .info {
  margin-top: 2rem;
  padding-top: 1rem;
}
.product-page .info-title {
  font-size: 0.7rem;
}
.product-page .info-list {
  font-size: 0.8rem;
  line-height: 1.4;
}
/* Hide native radio dots */
.selector-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.selector-label.selected {
  background: #fff;
  color: #000;
  border-color: #fff;
}

@media (max-width: 768px) {
  /* Reset any accidental vertical text modes */
  .about-page .hero-text h1 {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* Make the hero text container full-width and centered */
  .about-page .hero-text {
    padding: 0 1rem;       /* small side padding */
    margin: 0 auto;        /* center container */
    max-width: 100%;
    text-align: center;
  }

  /* Scale the headline with viewport, without squeezing */
  .about-page .hero-text h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: 0;     /* remove tight/loose spacing for stability */
  }

  /* Body text under the hero */
  .about-page .hero-text p {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    max-width: 90%;
    margin: 0.5rem auto 0;
  }

  /* Collapse two-column sections to single column */
  .about-page .two-column {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Let images flow naturally */
  .about-page .image img {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  /* Tighter section spacing */
  .about-page section {
    padding: 2.5rem 1rem;
  }
}

@media (max-width: 768px) {
  /* Collapse three-column grid to single column */
  .about-page .three-column {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem; /* add side padding so content doesn't touch edges */
  }

  /* Make cards full width */
  .about-page .how-it-works .card {
    width: 100%;
    margin: 0 auto;
  }

  /* Scale down icon boxes */
  .about-page .icon-box {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }
  .about-page .icon-box svg {
    width: 40px;
    height: 40px;
  }

  /* Adjust text inside cards */
  .about-page .how-it-works h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .about-page .how-it-works p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 90%;
  }
}

/* Categories grid fixes */
.categories .grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* desktop: 2 columns */
  gap: 1.5rem;
}

.categories .card {
  position: relative;
  border: 1px solid #333;
  overflow: hidden;
  background: #000;
  color: #fff;
  aspect-ratio: 1 / 1; /* keep square shape on desktop */
}

.categories .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .3s;
}
.categories .card:hover img { opacity: .7; }

.categories .card .text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.categories .card h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  font-weight: 400;
}

.categories .card p {
  font-size: 0.95rem;
  color: #ccc;
  line-height: 1.4;
  margin: 0;
}

/* Mobile overrides */
@media (max-width: 768px) {
  .categories .grid-2x2 {
    grid-template-columns: 1fr; /* stack vertically */
  }
  .categories .card {
    aspect-ratio: auto; /* let height adjust naturally */
  }
  .categories .card .text {
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    text-align: center; /* center text on mobile */
  }
  .categories .card h3 {
    font-size: 1.1rem;
  }
  .categories .card p {
    font-size: 0.85rem;
  }
}

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
}

/* Hero section adjustments */
.about-page .hero {
  width: 100%;
  max-width: 100%;   /* never exceed viewport */
  overflow: hidden;  /* clip anything that spills */
}

.about-page .hero img,
.about-page .hero .overlay {
  width: 100%;
  max-width: 100%;
}

/* Hero text container on mobile */
@media (max-width: 768px) {
  .about-page .hero-text {
    padding: 0 1rem;   /* smaller side padding */
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* General page spacing */
  .pricing-page {
    padding: 3rem 1rem; /* reduce vertical + side padding */
    overflow-x: hidden; /* prevent horizontal scroll */
  }

  /* Headline and subtitle */
  .pricing-page .headline {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.1;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .pricing-page .subtitle {
    font-size: 1rem;
    max-width: 90%;
    margin: 0 auto 1.5rem;
    text-align: center;
  }

  /* Tiers grid */
  .pricing-page .tiers {
    grid-template-columns: 1fr; /* stack vertically */
    gap: 1.5rem;
  }
  .pricing-page .tier-card {
    padding: 1.25rem;
  }
  .pricing-page .tier-name {
    font-size: 1.2rem;
  }
  .pricing-page .fee {
    font-size: 1.8rem;
  }

  /* Section titles */
  .pricing-page .section-title {
    font-size: 1rem;
    text-align: center;
  }

  /* Tables */
  .pricing-page .table-header,
  .pricing-page .table-row {
    grid-template-columns: 1fr 1fr; /* simplify table layout */
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  /* Notes and disclaimers */
  .pricing-page .note,
  .pricing-page .currency-disclaimer {
    font-size: 0.8rem;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Page */
  .pricing-page {
    padding-top: 6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
  }

  /* Global titles/subtitles alignment */
  .pricing-page .section-title,
  .pricing-page .subtitle {
    text-align: left;
    margin-left: 0;         /* consistent left alignment */
    margin-right: 0;
    max-width: 100%;
  }
  .pricing-page .headline {
    font-size: clamp(2rem, 8vw, 2.5rem);
    text-align: left;       /* match section title alignment */
    margin-top: 0;
  }

  /* Fee Breakdown: center boxes, consistent outline */
  .pricing-page .fee-breakdown .two-column {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: stretch;
  }
  .pricing-page .fee-breakdown .box {
    width: 100%;
    margin: 0;
    border: 1px solid #1f2937;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Example Calculations: scrollable 6-column grid with clean alignment */
  .pricing-page .examples {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-page .examples .table {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)) minmax(140px, 1.2fr);
    /* Item | Price | Tier | Fee | Shipping | Total */
    min-width: 1000px; /* force horizontal scroll */
    font-size: 0.8rem;
    border: 1px solid #1f2937;
  }
  .pricing-page .examples .table-header,
  .pricing-page .examples .table-row {
    display: contents;
  }
  .pricing-page .examples .table-header span {
    background: #111827;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
    white-space: nowrap;
  }
  .pricing-page .examples .table-row span {
    padding: 0.5rem;
    border-bottom: 1px solid #1f2937;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* Alignment: item left; numeric columns centered; total slightly bolder color */
  .pricing-page .examples .table-row span:nth-child(1) { text-align: left; }
  .pricing-page .examples .table-row span:nth-child(2),
  .pricing-page .examples .table-row span:nth-child(3),
  .pricing-page .examples .table-row span:nth-child(4),
  .pricing-page .examples .table-row span:nth-child(5),
  .pricing-page .examples .table-row span:nth-child(6) { text-align: center; }
  .pricing-page .examples .table-row span:nth-child(6) { color: #fff; }

  /* Additional Costs: full width, consistent title/subtitle */
  .pricing-page .additional-costs { text-align: left; }
  .pricing-page .additional-costs .box {
    width: 100%;
    margin: 0;
    border: 1px solid #1f2937;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Multiple Item Orders: keep grid, enable scroll, fix overflow in final box */
  .pricing-page .multi-orders {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Two panels side-by-side on mobile via horizontal scroll */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1rem;
    min-width: 580px; /* ensure horizontal scrolling room */
  }
  .pricing-page .multi-orders .panel {
    background: #111827;
    border: 1px solid #1f2937;
    padding: 1rem;
    box-sizing: border-box;
  }
  /* Full example block: ensure it doesn't collapse or overflow */
  .pricing-page .multi-orders .panel.full-example {
    min-width: 320px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .pricing-page .multi-orders .panel.full-example .kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: nowrap; /* keep line intact */
  }
  .pricing-page .multi-orders .panel.full-example .kv span:first-child {
    white-space: nowrap; /* keep "@ ~US$125" together */
  }
  /* Place "retail" right after the "@ ~US$125 each" label */
  .pricing-page .multi-orders .panel.full-example .kv:nth-child(2) span:first-child::after {
    content: " retail";
    margin-left: 0.25rem;
  }

  /* Common Questions: centered boxes with consistent width */
  .pricing-page .faq { text-align: left; }
  .pricing-page .faq .box {
    width: 100%;
    margin: 0 0 1rem 0;
    border: 1px solid #1f2937;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* CTA: centered and within screen */
  .pricing-page .cta {
    width: 100%;
    max-width: 100%;
    padding: 2rem 1rem;
    margin: 2rem 0 0 0;
    text-align: center;
    box-sizing: border-box;
  }

  /* Final disclaimer: centered and consistent */
  .pricing-page .currency-wrap {
    width: 100%;
    margin: 2rem 0 0 0;
    text-align: center;
    border-top: 1px solid #1f2937;
    padding-top: 1.5rem;
    box-sizing: border-box;
  }
  .pricing-page .currency-disclaimer {
    margin: 0 auto;
    max-width: 90%;
  }

  /* Subtle scrollbars (mobile only) */
  .pricing-page .examples::-webkit-scrollbar,
  .pricing-page .multi-orders::-webkit-scrollbar {
    height: 6px;
  }
  .pricing-page .examples::-webkit-scrollbar-track,
  .pricing-page .multi-orders::-webkit-scrollbar-track {
    background: transparent;
  }
  .pricing-page .examples::-webkit-scrollbar-thumb,
  .pricing-page .multi-orders::-webkit-scrollbar-thumb {
    background: rgba(150,150,150,0.4);
    border-radius: 3px;
  }
  .pricing-page .examples,
  .pricing-page .multi-orders {
    scrollbar-width: thin;
    scrollbar-color: rgba(150,150,150,0.4) transparent;
  }
}

@media (max-width: 768px) {
  /* Example Calculations: align item name and color cleanly */
  .pricing-page .examples .table-row span:nth-child(1) {
    text-align: left;
    line-height: 1.3;
  }
  .pricing-page .examples .table-row span:nth-child(1) .color-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.2;
  }
  /* Ensure header and cells share consistent vertical rhythm */
  .pricing-page .examples .table-header span,
  .pricing-page .examples .table-row span {
    padding: 0.5rem;
  }

  /* Multiple Item Orders: fix final box text and remove extra “retail” */
  .pricing-page .multi-orders .panel.full-example .kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: normal;       /* allow natural wrapping */
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .pricing-page .multi-orders .panel.full-example .kv span:first-child {
    white-space: normal !important; /* undo any previous nowrap */
  }
  .pricing-page .multi-orders .panel.full-example .kv:nth-child(2) span:first-child::after {
    content: none !important;  /* remove appended “retail” */
  }
}
@media (max-width: 768px) {
  /* Example Calculations: left-align headers and all cells */
  .pricing-page .examples .table-header span {
    text-align: left;
  }
  .pricing-page .examples .table-row span {
    text-align: left;
  }

  /* Item column: make color flush under name */
  .pricing-page .examples .table-row span:nth-child(1) {
    line-height: 1.25;
  }
  .pricing-page .examples .table-row span:nth-child(1) .color-label {
    display: block;
    margin-top: 0.15rem;   /* tight, flush under name */
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.2;
  }

  /* Keep consistent padding so headers and cells visually align */
  .pricing-page .examples .table-header span,
  .pricing-page .examples .table-row span {
    padding: 0.5rem 0.75rem;
  }

  /* Apply same left alignment to Multiple Item Orders table (if present) */
  .pricing-page .multi-orders .table-header span,
  .pricing-page .multi-orders .table-row span {
    text-align: left;
  }
  .pricing-page .multi-orders .panel.full-example .kv {
    justify-content: space-between;
    gap: 0.5rem;
  }
}
@media (max-width: 768px) {
  /* Example Calculations: force left alignment across headers and all cells */
  .pricing-page .examples .table-header span,
  .pricing-page .examples .table-row span,
  .pricing-page .examples .table-row span.white,
  .pricing-page .examples .table-row span.gray-300 {
    text-align: left !important;
  }

  /* Ensure consistent padding so headers and cells line up visually */
  .pricing-page .examples .table-header span,
  .pricing-page .examples .table-row span {
    padding: 0.5rem 0.75rem;
  }

  /* Item column: make color sit flush under name */
  .pricing-page .examples .table-row span:nth-child(1) {
    line-height: 1.25;
    white-space: normal;
  }
  .pricing-page .examples .table-row span:nth-child(1) .color-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.2;
  }
}
@media (max-width: 768px) {
  /* Example Calculations: headers not bold */
  .pricing-page .examples .table-header span {
    font-weight: 400 !important; /* normal weight */
    color: #fff;
    background: #111827;
    text-align: left;
    padding: 0.5rem 0.75rem;
  }

  /* Multiple Item Orders: headers not bold */
  .pricing-page .multi-orders .table-header span {
    font-weight: 400 !important;
    color: #fff;
    background: #111827;
    text-align: left;
    padding: 0.5rem 0.75rem;
  }
}
@media (max-width: 768px) {
  /* Example Calculations: headers grey, not bold */
  .pricing-page .examples .table-header span {
    font-weight: 400 !important;   /* normal weight */
    color: #9ca3af;                /* grey tone */
    background: #111827;           /* dark header background */
    text-align: left;
    padding: 0.5rem 0.75rem;
  }

  /* Multiple Item Orders: headers grey, not bold */
  .pricing-page .multi-orders .table-header span {
    font-weight: 400 !important;
    color: #9ca3af;
    background: #111827;
    text-align: left;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 768px) {
  /* Multiple Item Orders: outer box scrolls with content */
  .pricing-page .multi-orders .box.p-12 {
    overflow-x: auto;                /* allow horizontal scroll inside the box */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #1f2937;       /* keep outline visible */
    padding: 1rem;
    margin: 0 auto;
    max-width: 100%;                 /* full width of viewport */
    box-sizing: border-box;
  }

  /* Inner wrapper: let it size naturally */
  .pricing-page .multi-orders .max-3xl {
    width: max-content;              /* expand to fit inner panels */
    max-width: none;                 /* remove cap so it can overflow */
  }

  /* Compare grid: keep panels side by side */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .pricing-page .multi-orders .max-3xl {
    width: max-content;
    max-width: none;
  }

  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 80%); /* was 280px,1fr */
    gap: 0.75rem;                          /* smaller gap */
  }

  .pricing-page .multi-orders .panel {
    min-width: 220px;   /* narrower base size */
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* Multiple Item Orders: tighter scroll panels */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(85%, 1fr); /* each panel ~85% of viewport */
    gap: 0.75rem;
  }

  .pricing-page .multi-orders .panel {
    min-width: auto;   /* let them shrink naturally */
    width: 85%;        /* match viewport proportion */
  }

  /* Scale down text sizes for mobile readability */
  .pricing-page .multi-orders .section-h3 {
    font-size: 1.25rem; /* was 1.5rem */
  }
  .pricing-page .multi-orders .desc-lg {
    font-size: 1rem;    /* was 1.125rem */
    line-height: 1.4;
  }
  .pricing-page .multi-orders .panel-title {
    font-size: 0.8rem;  /* slightly smaller */
  }
  .pricing-page .multi-orders .kv {
    font-size: 0.8rem;  /* reduce key-value text */
  }
}

@media (max-width: 768px) {
  /* Multiple Item Orders: make panels fit viewport width */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 95%;   /* each panel ~95% of viewport */
    gap: 0.5rem;              /* tighter gap */
  }
  .pricing-page .multi-orders .panel {
    width: 95%;               /* match viewport proportion */
    min-width: auto;          /* allow shrink */
    margin: 0;
  }

  /* Scale down green benefit lines */
  .pricing-page .multi-orders .green,
  .pricing-page .multi-orders .saving,
  .pricing-page .multi-orders .tip {
    font-size: 0.75rem;       /* smaller text */
    line-height: 1.3;
  }

  /* How It Works section: smaller text */
  .about-page .how-it-works h3 {
    font-size: 1rem;          /* was 1.25rem */
    margin-bottom: 0.5rem;
  }
  .about-page .how-it-works p {
    font-size: 0.85rem;       /* was 1rem */
    line-height: 1.4;
  }
  .about-page .icon-box {
    width: 50px;
    height: 50px;
  }
  .about-page .icon-box svg {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 768px) {
  /* Multiple Item Orders: make panels shorter horizontally */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70%;   /* each panel ~70% of viewport width */
    gap: 0.75rem;
  }

  .pricing-page .multi-orders .panel {
    width: 70%;               /* match the grid-auto-columns */
    min-width: auto;
    margin: 0;
  }

  /* Optional: scale down text inside panels for mobile */
  .pricing-page .multi-orders .panel-title,
  .pricing-page .multi-orders .kv,
  .pricing-page .multi-orders .green,
  .pricing-page .multi-orders .tip {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  /* Multiple Item Orders: compact horizontal panels */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 60%;   /* each panel ~60% of viewport */
    gap: 0.5rem;              /* smaller gap between panels */
  }

  .pricing-page .multi-orders .panel {
    width: 60%;               /* match the grid-auto-columns */
    min-width: auto;
    margin: 0;
  }

  /* Make green benefit lines smaller */
  .pricing-page .multi-orders .green,
  .pricing-page .multi-orders .saving,
  .pricing-page .multi-orders .tip {
    font-size: 0.7rem;        /* more compact text */
    line-height: 1.3;
  }

  /* How It Works section: scale down text further */
  .about-page .how-it-works h3 {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
  .about-page .how-it-works p {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  .about-page .icon-box {
    width: 45px;
    height: 45px;
  }
  .about-page .icon-box svg {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 768px) {
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50%;   /* each panel ~half the viewport */
    gap: 0.25rem;             /* tighter gap between panels */
  }
  .pricing-page .multi-orders .panel {
    width: 50%;               /* match the grid-auto-columns */
    min-width: auto;
    margin: 0;
  }
}
@media (max-width: 768px) {
  /* General green texts smaller */
  .pricing-page .multi-orders .green {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  /* But make the consolidated shipping total larger */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green {
    font-size: 1rem;          /* larger than other greens */
    font-weight: 500;         /* slightly bolder for emphasis */
  }
}
@media (max-width: 768px) {
  /* Panels: make them narrower and closer together */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 55%;   /* each panel ~55% of viewport */
    gap: 0.25rem;             /* tighter gap between panels */
  }
  .pricing-page .multi-orders .panel {
    width: 55%;               /* match the grid-auto-columns */
    min-width: auto;
    margin: 0;
  }

  /* Green consolidated shipping total: same size as red total */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green {
    font-size: 0.875rem;       /* same as red total */
    font-weight: 400;
  }
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 0.875rem;       /* ensure consistency */
    font-weight: 400;
  }

  /* Other green benefit lines smaller */
  .pricing-page .multi-orders .green:not(.kv .green) {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  /* Multiple Item Orders: reduce spacing between first two panels */
  .pricing-page .multi-orders .compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 45%;   /* narrower panels */
    gap: 0.15rem;             /* minimal gap between them */
    justify-content: start;   /* align panels to the left edge */
  }

  .pricing-page .multi-orders .panel {
    width: 45%;               /* match the grid-auto-columns */
    min-width: auto;
    margin: 0;
  }

  /* Consolidated shipping total: same size as red total */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green,
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 0.875rem;       /* equal sizing */
    font-weight: 400;
  }

  /* Other green benefit lines smaller */
  .pricing-page .multi-orders .green:not(.kv .green) {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  /* Multiple Item Orders: tighter layout for first two panels */
  .pricing-page .multi-orders .compare {
    display: flex;              /* switch from grid to flex for tighter control */
    flex-wrap: nowrap;
    gap: 1rem;               /* minimal gap between panels */
    justify-content: flex-start;
    overflow-x: auto;           /* still scrollable inside the outer box */
    -webkit-overflow-scrolling: touch;
  }

  .pricing-page .multi-orders .panel.separate,
  .pricing-page .multi-orders .panel.consolidated {
    flex: 0 0 20%;              /* each panel ~45% of viewport */
    max-width: 20%;
  }

  /* Full example panel stays full width below */
  .pricing-page .multi-orders .panel.full-example {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1rem;
  }

  /* Consolidated shipping total same size as red total */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green,
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 0.875rem;
    font-weight: 400;
  }

  /* Other green benefit lines smaller */
  .pricing-page .multi-orders .green:not(.kv .green) {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  /* Multiple Item Orders: compact side-by-side panels */
  .pricing-page .multi-orders .compare {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;               /* small gap between boxes */
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Separate + Consolidated panels: narrower width */
  .pricing-page .multi-orders .panel.separate,
  .pricing-page .multi-orders .panel.consolidated {
    flex: 0 0 20%;              /* each panel ~40% of viewport */
    max-width: 20%;
  }

  /* Full example panel stays full width below */
  .pricing-page .multi-orders .panel.full-example {
    flex: 0 0 40%;
    max-width: 100%;
    margin-top: 1rem;
  }

  /* Totals: green and red same size */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green,
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 0.875rem;
    font-weight: 400;
  }

  /* Other green benefit lines smaller */
  .pricing-page .multi-orders .green:not(.kv .green) {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}
@media (max-width: 768px) {
  /* Standardize all green texts to match "You save ~US$55..." */
  .pricing-page .multi-orders .green,
  .pricing-page .multi-orders .saving,
  .pricing-page .multi-orders .tip {
    font-size: 0.85rem;   /* same size as "You save ~US$55..." */
    line-height: 1.4;
    font-weight: 400;
  }

  /* Exception: consolidated shipping total (~US$35) larger, same as red ~US$90 */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green {
    font-size: 1rem;       /* larger for emphasis */
    font-weight: 400;
  }

  /* Red ~US$90 total stays consistent */
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 1rem;
    font-weight: 400;
  }
}
@media (max-width: 768px) {
  /* Pricing Page: How It Works section compact sizing */
  .pricing-page .how-it-works h3 {
    font-size: 1rem !important;      /* compact heading */
    margin-bottom: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .pricing-page .how-it-works p,
  .pricing-page .how-it-works li,
  .pricing-page .how-it-works span {
    font-size: 0.85rem !important;   /* compact body text */
    line-height: 1.4 !important;
  }

  .pricing-page .how-it-works .icon-box {
    width: 10px !important;
    height: 50px !important;
  }

  .pricing-page .how-it-works .icon-box svg {
    width: 10px !important;
    height: 30px !important;
  }
}
@media (max-width: 768px) {
  /* Multiple Item Orders: shrink all panels */
  .pricing-page .multi-orders .compare {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;                 /* small gap between panels */
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-page .multi-orders .panel {
    flex: 0 0 0%;               /* each panel ~32% of viewport */
    max-width: 0%;
    margin: 0;
  }

  /* Totals: green and red emphasized equally */
  .pricing-page .multi-orders .panel.consolidated .kv.total .green,
  .pricing-page .multi-orders .panel.separate .kv.total .red {
    font-size: 1rem;
    font-weight: 300;
  }

  /* Other green benefit lines standardized */
  .pricing-page .multi-orders .green:not(.kv .green),
  .pricing-page .multi-orders .saving,
  .pricing-page .multi-orders .tip {
    font-size: 0.4rem;
    line-height: 1.4;
    font-weight: 300;
  }
}
@media (max-width: 768px) {
  .tiers {
    display: grid !important;
    grid-auto-flow: column !important;              /* lay out cards side by side */
    grid-auto-columns: minmax(85%, 1fr) !important; /* each card ~85% of viewport */
    overflow-x: auto !important;                    /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;              /* smooth iOS scroll */
    gap: 1rem !important;
    padding-bottom: 1rem;
  }

  /* Optional: subtle scrollbar styling */
  .tiers::-webkit-scrollbar { height: 6px; }
  .tiers::-webkit-scrollbar-track { background: transparent; }
  .tiers::-webkit-scrollbar-thumb {
    background: rgba(150,150,150,0.4);
    border-radius: 3px;
  }
}
/* Optional: only enable momentum during active drag */
#productCarousel.momentum {
  -webkit-overflow-scrolling: touch;
}
#productCarousel { display: flex; gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; touch-action: pan-x pan-y; /* allow both directions */ cursor: grab; will-change: scroll-position; -webkit-overflow-scrolling: auto; /* disable momentum so JS scroll works */ } #productCarousel.momentum { -webkit-overflow-scrolling: touch; /* only enable momentum while dragging */ }
.product-page {
  padding-top: 8rem; /* adjust to match header height */
}
.pricing-page .tiers { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 2rem; margin: 0 auto 2rem; max-width: none; /* remove cap so grid can expand */ }
}
@media (min-width:768px){
  .pricing-page .tiers { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .pricing-page .tiers {
    display: grid;
    grid-auto-flow: column;                 /* horizontal flow */
    grid-auto-columns: minmax(85%, 1fr);    /* each card ~85% viewport */
    overflow-x: auto;                       /* keep horizontal scroll */
    overflow-y: visible;                    /* allow badge to float above */
    -webkit-overflow-scrolling: touch;      /* smooth iOS scroll */
    gap: 1rem;
    padding-bottom: 1rem;
    position: relative;
  }

  .pricing-page .tier-card {
    position: relative;
    overflow: visible; /* allow badge outside card */
  }

  .pricing-page .badge {
    position: absolute;
    top: -1rem;      /* float above border */
    left: 2rem;
    z-index: 9999;   /* ensure it’s in front */
  }
}
.pricing-page .tier-card {
  border: 1px solid #1f2937;
  padding: 2rem;
  position: relative;
  background: transparent;
  margin-top: 1.5rem; /* push the whole box down */
}

.pricing-page .tier-card.popular {
  border-color: #fff;
  margin-top: 2rem;   /* give the popular card even more breathing room */
}

.pricing-page .badge {
  position: absolute;
  top: -1rem;   /* stays floating above border */
  left: 2rem;
  background: #fff;
  color: #000;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 10;
}
/* Cart Footer Theme Overrides */
#main-cart-footer {
  background: #000;                /* match product/pricing pages */
  color: #fff;
  font-family: var(--font-family); /* Inter */
  padding: 4rem 2rem;
  border-top: 1px solid #1f2937;   /* subtle divider */
}

/* Totals section */
#main-cart-footer .totals__total {
  font-size: 1.25rem;              /* same as section-title */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 0.5rem;
}

#main-cart-footer .totals__total-value {
  font-size: 1.5rem;               /* ≈ product-price */
  font-weight: 300;
  color: #d1d5db;
  margin-bottom: 1rem;
}

/* Discounts list */
#main-cart-footer .discounts__discount {
  font-size: 0.95rem;
  color: #10b981;                  /* green highlight for savings */
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tax note */
#main-cart-footer .tax-note {
  font-size: 0.875rem;
  color: #6b7280;                  /* gray-600 */
  margin-top: 1rem;
}

/* Checkout button */
#main-cart-footer .cart__checkout-button {
  display: inline-block;
  width: 100%;
  padding: 1.25rem;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  font-weight: 500;
  transition: background .2s ease;
  border: none;
}

#main-cart-footer .cart__checkout-button:hover {
  background: #f3f4f6;
}

/* Dynamic checkout buttons (PayPal, Apple Pay, etc.) */
#main-cart-footer .additional-checkout-buttons {
  margin-top: 1rem;
}
/* Align estimated total label and value */
#main-cart-footer .totals {
  display: flex;
  justify-content: space-between; /* push label left, value right */
  align-items: baseline;          /* align text baselines */
  gap: 1rem;                      /* optional spacing */
}

#main-cart-footer .totals__total {
  margin: 0;                      /* remove extra margin */
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

#main-cart-footer .totals__total-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: #d1d5db;
}
/* Cart footer theme + smaller typography */
#main-cart-footer {
  background: #000;
  color: #fff;
  font-family: var(--font-family);
  border-top: 1px solid #1f2937;
  padding: 2rem 1.5rem; /* tighter spacing */
}

/* Totals block: label left, amount right */
#main-cart-footer .totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#main-cart-footer .totals__total {
  margin: 0;
  font-size: 0.9rem;   /* smaller */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

#main-cart-footer .totals__total-value {
  margin: 0;
  font-size: 1rem;     /* smaller */
  font-weight: 300;
  color: #d1d5db;
}

/* Discounts + tax note smaller and left aligned */
#main-cart-footer .discounts__discount,
#main-cart-footer .tax-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0.25rem 0;
  text-align: left;
}
#main-cart-footer .cart__checkout-button {
  width: 100%;
  padding: 0.9rem;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;   /* smaller */
  font-weight: 500;
  transition: background .2s ease;
  border: none;
}

#main-cart-footer .cart__checkout-button:hover {
  background: #f3f4f6;
}
/* Service Fee pill styling */
.product-form__input--pill .selector-grid label {
  border: 1px solid #1f2937;      /* subtle dark border */
  background: #000;               /* black background */
  color: #fff;                    /* white text */
  border-radius: 6px;
  padding: 0.75rem 1.5rem;        /* larger spacing */
  font-size: 0.9rem;              /* match size selector font */
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  margin: 0.5rem;
}

.product-form__input--pill .selector-grid input[type="radio"]:checked + label {
  background: #fff;               /* invert colors when selected */
  color: #000;
  border-color: #fff;
}

.product-form__input--pill .selector-grid label:hover {
  border-color: #fff;             /* subtle hover highlight */
}
/* Service Fee pill styling */
.product-form__input--pill .selector-grid label {
  border: 1px solid #1f2937;
  background: #000;
  color: #fff;
  border-radius: 6px;
  padding: 1rem 2rem;           /* same padding as Size pills */
  font-size: 1.4rem;            /* match Size font size */
  letter-spacing: 0.1rem;       /* match Size spacing */
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
}

.product-form__input--pill .selector-grid input[type="radio"]:checked + label {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.product-form__input--pill .selector-grid label:hover {
  border-color: #fff;
}

/* Extra spacing before CTA button */
.product-form__input--pill {
  margin-bottom: 2rem;          /* adds breathing room above Secure via Unvaulted */
}
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('cart-remove-button').forEach(button => {
    button.addEventListener('click', async (e) => {
      e.preventDefault();
      const index = button.dataset.index;
      if (!index) return;
      await fetch('/cart/change.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ line: parseInt(index), quantity: 0 })
      });
      window.location.reload();
    });
  });
});