/* VULQIR v2.7.1 — final editorial width, rhythm and responsive polish.
 * This stylesheet is intentionally additive: existing page copy, image/video
 * URLs, editable fields, menus, forms and WooCommerce behavior are untouched.
 */
:root {
  --vq-editorial-rail: 1600px;
  --vq-editorial-gutter: clamp(48px, 4vw, 90px);
}

/* One coherent desktop rail for the three key brand pages.
   The Home and Brand Story rails grow by about 3–5%; Products by about 8%.
   Paragraphs retain their existing max-widths, so wider screens do not create
   excessively long reading lines. */
@media (min-width: 1551px) {
  #vulqir-home .vq-wrap {
    width: min(calc(100% - 2 * var(--vq-editorial-gutter)), var(--vq-editorial-rail));
    max-width: none;
  }

  .vq-brand-story-page {
    width: min(calc(100% - 2 * var(--vq-editorial-gutter)), var(--vq-editorial-rail));
    max-width: var(--vq-editorial-rail);
    margin-inline: auto;
  }

  .vq-story .vq-container {
    width: 100%;
    max-width: var(--vq-editorial-rail);
    padding-inline: clamp(48px, 3vw, 76px);
  }

  .vq-collection .vq-wrap {
    width: min(calc(100% - 2 * var(--vq-editorial-gutter)), 1550px);
    max-width: none;
  }
}

/* Mid-size desktop: keep the three page rails visually aligned without
   forcing the content against the edge of a laptop display. */
@media (min-width: 1181px) and (max-width: 1550px) {
  #vulqir-home .vq-wrap,
  .vq-collection .vq-wrap {
    width: calc(100% - 80px);
    max-width: none;
  }

  .vq-brand-story-page {
    width: calc(100% - 80px);
    max-width: none;
    margin-inline: auto;
  }

  .vq-story .vq-container {
    width: 100%;
    max-width: none;
    padding-inline: clamp(30px, 4vw, 58px);
  }
}

/* Tablet: use a shared safe gutter and keep every grid child shrinkable. */
@media (min-width: 761px) and (max-width: 1180px) {
  #vulqir-home .vq-wrap,
  .vq-collection .vq-wrap {
    width: calc(100% - 56px);
    max-width: none;
  }

  .vq-brand-story-page {
    width: 100%;
    max-width: none;
  }

  .vq-story .vq-container {
    width: 100%;
    max-width: none;
    padding-inline: clamp(28px, 4vw, 46px);
  }

  #vulqir-home .vq-intro-grid,
  #vulqir-home .vq-story-grid,
  .vq-story .vq-origin-section .vq-split,
  .vq-story .vq-values-feature,
  .vq-story .vq-partner-layout {
    min-width: 0;
  }
}

/* A little more air between editorial elements, not a wholesale redesign. */
#vulqir-home .vq-collection-grid {
  gap: clamp(20px, 1.7vw, 34px);
}
#vulqir-home .vq-collection-head {
  margin-bottom: clamp(42px, 3vw, 52px);
}
.vq-story .vq-values {
  gap: clamp(16px, .9vw, 22px);
}
.vq-collection .vq-gallery {
  gap: clamp(16px, 1.1vw, 26px);
}
.vq-collection .vq-section-head {
  margin-bottom: 36px;
}
.vq-collection .vq-collection-section {
  padding-bottom: clamp(96px, 5vw, 116px);
}

/* Footer: improve legibility on high-density and large desktop displays. */
.vq-site-footer {
  padding: 47px 24px 52px;
}
.vq-site-footer .foot-mark {
  font-size: 14px;
  margin-bottom: 13px;
}
.vq-site-footer .foot-copy {
  font-size: 12px;
  line-height: 1.8;
}
.vq-site-footer .foot-links {
  gap: 20px;
  margin: 14px 0;
}
.vq-site-footer .foot-links a {
  font-size: 12px;
  line-height: 1.8;
}
.vq-site-footer .foot-note {
  max-width: 900px;
  font-size: 10px;
  line-height: 1.85;
}

/* Mobile: deliberately preserve the current single/two-column arrangements,
   existing banner crops, linen background and video fallbacks. */
@media (max-width: 760px) {
  #vulqir-home .vq-wrap,
  .vq-collection .vq-wrap {
    width: calc(100% - 36px);
    max-width: none;
  }

  .vq-brand-story-page {
    width: 100%;
    max-width: none;
  }
  .vq-story .vq-container {
    width: 100%;
    max-width: none;
    padding-inline: clamp(20px, 5vw, 38px);
  }

  #vulqir-home .vq-collection-grid {
    gap: 16px;
  }
  .vq-story .vq-values {
    gap: 14px;
  }
  .vq-collection .vq-gallery {
    gap: 11px;
  }
  .vq-collection .vq-collection-section {
    padding-bottom: 60px;
  }

  .vq-site-footer {
    padding: 36px 18px 40px;
  }
  .vq-site-footer .foot-links {
    gap: 9px 16px;
  }
  .vq-site-footer .foot-links a {
    font-size: 11.5px;
  }
  .vq-site-footer .foot-note {
    font-size: 10px;
    max-width: 560px;
  }
}

@media (max-width: 480px) {
  #vulqir-home .vq-collection-grid {
    gap: 14px 12px;
  }
  .vq-story .vq-values {
    gap: 12px;
  }
  .vq-site-footer .foot-links {
    gap: 8px 13px;
  }
}

/* Guard against accidental horizontal scrolling from long labels or media. */
#vulqir-home,
.vq-brand-story-page,
.vq-collection {
  min-width: 0;
}
#vulqir-home img,
.vq-brand-story-page img,
.vq-collection img {
  max-width: 100%;
}