/* Responsive layer — breakpoints, fluid type, layout containers.
   Authored from the brand's responsive brief; the source .fig only contains a
   1920px desktop frame. */
:root{
  --bp-tablet:768px;
  --bp-desktop:1024px;
  --content-max:1200px;

  /* Fluid type. Mobile floor → desktop ceiling, no per-breakpoint sizes. */
  --fs-h1-fluid:clamp(30px, 6.2vw, 68px); /* @kind font */
  --fs-h2-fluid:clamp(24px, 4vw, 44px); /* @kind font */
  --fs-body-fluid:clamp(15px, 1.15vw, 17px); /* @kind font */
  --fs-button-fluid:clamp(17px, 1.7vw, 32px); /* @kind font */

  --gutter-mobile:20px;
  --gutter-tablet:40px;
}

/* Centred content container. */
.vc-container{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter-mobile);box-sizing:border-box}
@media (min-width:768px){.vc-container{padding:0 var(--gutter-tablet)}}

/* Product grid: 1 / 2 / 3 columns. */
.vc-product-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:768px){.vc-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.vc-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Nav: hamburger below 768px only. */
.vc-nav-toggle{display:inline-flex}
.vc-nav-inline{display:none}
@media (min-width:768px){.vc-nav-toggle{display:none}.vc-nav-inline{display:flex}}