/* VOLORA responsive layer.
 *
 * The design pages are fixed-desktop and style everything inline, which no
 * stylesheet can override by element selector alone. storefront.js measures the
 * rendered page and tags the structural pieces (page gutters, product grids,
 * fixed-width columns, display type, full-height heroes, the sticky nav); this
 * sheet then adapts those tags per breakpoint.
 *
 * Above 1100px nothing here applies — the original desktop design is untouched.
 */

html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }

/* Safety net against stray horizontal scroll. `clip` rather than `hidden`:
   hidden makes the body a scroll container, which silently breaks every
   position:sticky inside it — including the nav. */
body { overflow-x: hidden; }
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  [data-vl-gutter] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  [data-vl-grid="4"], [data-vl-grid="5"], [data-vl-grid="6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [data-vl-fixedw] {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 820px) {
  [data-vl-gutter] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Content grids stack; the product grid keeps two columns. */
  [data-vl-grid] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  [data-vl-grid][data-vl-products] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Header: wrap the three nav groups instead of letting them collide. */
  [data-vl-nav] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
    column-gap: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [data-vl-nav] > * { justify-content: center !important; }
  [data-vl-navgroup] { gap: 16px !important; font-size: 10.5px !important; }
  [data-vl-logo] { font-size: 16px !important; letter-spacing: .3em !important; }

  /* Display type steps down proportionally. */
  [data-vl-type="xl"] { font-size: 32px !important; }
  [data-vl-type="lg"] { font-size: 26px !important; }
  [data-vl-type="md"] { font-size: 21px !important; }

  [data-vl-hero] { height: 76vh !important; min-height: 440px !important; }

  /* Hero captions inset from the frame edge instead of a 64/80px offset. */
  [data-vl-inset] { left: 20px !important; right: 20px !important; }

  /* Filter chips scroll horizontally rather than squeezing. */
  [data-vl-chiprow] {
    overflow-x: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-vl-chiprow]::-webkit-scrollbar { display: none; }
  [data-vl-chiprow] > * { flex: 0 0 auto !important; }

  /* Long horizontal rows wrap instead of running past the edge. */
  [data-vl-wrap]:not([data-vl-chiprow]) {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
  }

  /* Sticky side-columns must let go once the layout is a single column,
     otherwise they hover over the content scrolling underneath. */
  [data-vl-unstick] {
    position: static !important;
    top: auto !important;
  }

  /* Product thumbnails share the row instead of wrapping onto a second line. */
  [data-vl-thumb] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Tall section padding is wasted space on a phone. */
  [data-vl-section] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ------------------------------------------------------------ small phones */
@media (max-width: 520px) {
  [data-vl-gutter] { padding-left: 16px !important; padding-right: 16px !important; }
  [data-vl-grid][data-vl-products] { grid-template-columns: 1fr !important; gap: 26px !important; }
  [data-vl-type="xl"] { font-size: 27px !important; }
  [data-vl-type="lg"] { font-size: 22px !important; }
  [data-vl-section] { padding-top: 44px !important; padding-bottom: 44px !important; }
}