/* Shared layer for the Home, About and Contact sections (inc/home.php), converted from the
   guardrail theme's theme.css foundations and the shared parts of sections.css:
   containers, section titles, carousel arrows and dots, paged product rails and grids,
   the reveal and scroll-motion states driven by assets/js/home.js, and the home page's
   render-by-viewport rules. Section-specific rules live in assets/css/home-<type>.css. */

/* The Ecomus content container (inc/home.php hg_home_container_class) carries a clearfix
   class that makes it a table, which would size the page to its widest rail. */
.hg-page-sections.clearfix { display: block; }
/* Sections run edge to edge from the header to the footer. */
.hg-page .site-content { padding-block: 0; }

.hg-sections {
  display: block;
  overflow-x: clip;
}
.hg-sections :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
.hg-sections :where(ul, ol) { margin: 0; padding: 0; }
.hg-sections :where(img) { max-width: 100%; height: auto; }
.hg-section { position: relative; }

/* Home sections from the fourth on (the first screen at every width holds the first three)
   skip rendering until they come near the viewport. Their content stays in the page, so
   find-in-page, anchors and assistive technology still reach it. The scroll gallery and the
   colour scene pin a stage with position: sticky and the tilted marquee overflows its box, so
   they always render. --hg-cv-block estimates a type's height until it has rendered once;
   auto then keeps the real height. Only with scripting: without it, Chrome picks a lazy
   sizes="auto" photo's candidate while its section still skips layout and takes the original
   (assets/js/home.js holds those photos back until their section renders). */
@media (scripting: enabled) {
  main.hg-sections--home > .hg-section:nth-child(n + 4):not(.hg-section--scroll-gallery, .hg-section--tilted-marquee, .hg-section--color-scene) {
    content-visibility: auto;
    contain-intrinsic-block-size: auto var(--hg-cv-block, 600px);
  }
}
main.hg-sections--home > .hg-section--category-tiles { --hg-cv-block: 400px; }
main.hg-sections--home > .hg-section--featured-collection { --hg-cv-block: 610px; }
main.hg-sections--home > .hg-section--tabbed-collections { --hg-cv-block: 470px; }
main.hg-sections--home > .hg-section--card-fan { --hg-cv-block: 490px; }
main.hg-sections--home > .hg-section--build-the-set { --hg-cv-block: 1350px; }
main.hg-sections--home > .hg-section--card-stack { --hg-cv-block: 550px; }
main.hg-sections--home > .hg-section--featured-product { --hg-cv-block: 1040px; }
main.hg-sections--home > .hg-section--icon-row { --hg-cv-block: 330px; }
main.hg-sections--home > .hg-section--brand-story { --hg-cv-block: 940px; }
main.hg-sections--home > .hg-section--numbered-cards { --hg-cv-block: 1130px; }
@media (min-width: 750px) {
  main.hg-sections--home > .hg-section--category-tiles { --hg-cv-block: 600px; }
  main.hg-sections--home > .hg-section--tabbed-collections { --hg-cv-block: 480px; }
  main.hg-sections--home > .hg-section--card-fan { --hg-cv-block: 565px; }
  main.hg-sections--home > .hg-section--build-the-set { --hg-cv-block: 1750px; }
  main.hg-sections--home > .hg-section--card-stack { --hg-cv-block: 800px; }
  main.hg-sections--home > .hg-section--featured-product { --hg-cv-block: 750px; }
  main.hg-sections--home > .hg-section--icon-row { --hg-cv-block: 190px; }
  main.hg-sections--home > .hg-section--brand-story { --hg-cv-block: 1190px; }
  main.hg-sections--home > .hg-section--numbered-cards { --hg-cv-block: 730px; }
}
@media (min-width: 990px) {
  main.hg-sections--home > .hg-section--category-tiles { --hg-cv-block: 480px; }
  main.hg-sections--home > .hg-section--featured-collection { --hg-cv-block: 660px; }
  main.hg-sections--home > .hg-section--tabbed-collections { --hg-cv-block: 610px; }
  main.hg-sections--home > .hg-section--card-fan { --hg-cv-block: 760px; }
  main.hg-sections--home > .hg-section--build-the-set { --hg-cv-block: 860px; }
  main.hg-sections--home > .hg-section--card-stack { --hg-cv-block: 530px; }
  main.hg-sections--home > .hg-section--featured-product { --hg-cv-block: 810px; }
  main.hg-sections--home > .hg-section--icon-row { --hg-cv-block: 170px; }
  main.hg-sections--home > .hg-section--brand-story { --hg-cv-block: 620px; }
  main.hg-sections--home > .hg-section--numbered-cards { --hg-cv-block: 520px; }
}
/* A home photo still far away when the page starts waits without a source (home.js); its box
   keeps the width and height attributes, and nothing (alt text included) paints until it has one. */
.hg-sections img[data-hg-src] { opacity: 0; }

/* Heading face (theme.css .ig-heading with the saved -2.5 spacing and 110 line height). */
.hg-heading {
  font-family: var(--hg-font-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Page containers (theme.css .ig-container / .ig-container-fluid). */
.hg-container {
  width: min(1440px, calc(100% - 32px));
  margin-inline: auto;
}
.hg-container-fluid {
  width: min(1680px, calc(100% - 32px));
  margin-inline: auto;
}
@media (max-width: 749px) {
  .hg-container,
  .hg-container-fluid { width: calc(100% - 24px); }
}

/* Section containers: wide / medium / small / fluid (sections.css .hpc-wrap). */
.hg-wrap { box-sizing: border-box; width: 100%; margin-inline: auto; padding-inline: 20px; }
.hg-wrap--fluid { width: 100%; }
@media (min-width: 768px) {
  .hg-wrap { padding-inline: 15px; }
  .hg-wrap--sm { max-width: 740px; }
  .hg-wrap--fluid { width: 95%; max-width: none; }
}
@media (min-width: 992px) { .hg-wrap--sm { max-width: 900px; } }
@media (min-width: 1200px) {
  .hg-wrap { max-width: 1170px; }
  .hg-wrap--md { max-width: 1080px; }
  .hg-wrap--sm { max-width: 1000px; }
}
@media (min-width: 1280px) {
  .hg-wrap { max-width: 1300px; }
  .hg-wrap--md { max-width: 1170px; }
  .hg-wrap--sm { max-width: 1000px; }
}
@media (min-width: 1441px) {
  .hg-wrap { max-width: 1400px; }
  .hg-wrap--md { max-width: 1300px; }
  .hg-wrap--sm { max-width: 1250px; }
}
@media (min-width: 1800px) {
  .hg-wrap { max-width: 1730px; }
  .hg-wrap--md { max-width: 1480px; }
  .hg-wrap--sm { max-width: 1250px; }
}
.hg-wrap--fluid { max-width: none; }
@media (max-width: 767px) { .hg-wrap--sm { width: 96%; } }

/* Section titles (h2 scale 26 / 43.5 / 49.3; --hg-title-size(-m) override per section). */
.hg-title {
  margin: 0;
  font-family: var(--hg-font-heading);
  font-size: var(--hg-title-size-m, 26px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hg-title.hg-title--h2 { font-size: var(--hg-title-size-m, 23.4px); }
@media (min-width: 768px) {
  .hg-title { font-size: var(--hg-title-size, 43.5px); }
  .hg-title.hg-title--h2 { font-size: var(--hg-title-size, 34.5px); }
}
@media (min-width: 1200px) {
  .hg-title { font-size: var(--hg-title-size, 49.3px); }
  .hg-title.hg-title--h2 { font-size: var(--hg-title-size, 39.1px); }
}

/* Round carousel arrow (sections.css .hpb-arrow). */
.hg-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hg-arrow-size, 34px);
  height: var(--hg-arrow-size, 34px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--hg-arrow-border, var(--hg-arrow-bg, #ececec));
  border-radius: 50%;
  background: var(--hg-arrow-bg, #ececec);
  color: var(--hg-arrow-fg, #000);
  box-shadow: 0 1px 3px #d9d9d9;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.hg-arrow:hover,
.hg-arrow:active {
  border-color: var(--hg-arrow-border, var(--hg-arrow-bg, #ececec));
  background: var(--hg-arrow-bg, #ececec);
  color: var(--hg-arrow-fg, #000);
}
/* Ecomus gives every button a shine ::after on hover. */
.hg-arrow::after,
.hg-dots button::after { content: none; }
.hg-arrow svg { width: 10px; height: 10px; }
.hg-arrow:disabled { opacity: 0.4; cursor: default; }
.hg-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[dir="rtl"] .hg-arrow svg { transform: scaleX(-1); }

/* Carousel dots, filled in by home.js (sections.css .hp-dots). */
.hg-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hg-dots button {
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
}
.hg-dots button:hover { border-color: currentColor; background: transparent; color: inherit; }
.hg-dots button[aria-current="true"] { background: currentColor; opacity: 1; }

.hg-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(127 127 127 / 0.15);
  fill: rgb(127 127 127 / 0.5);
}

/* Paged product rail: track + arrows (sections.css .hpc-rail). The track is the store's
   ul.products list, so its Ecomus widths, gutters and wrapping are reset here. */
.hg-rail { position: relative; margin-inline: -7.5px; container-type: inline-size; }
.hg-rail__track,
ul.products.hg-rail__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hg-rail-gap, 20px);
  margin: 0 10px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hg-rail__track::-webkit-scrollbar { display: none; }
.hg-rail__track:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.hg-rail__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.hg-rail__track.is-dragging * { pointer-events: none; }
.hg-rail__track > *,
ul.products.hg-rail__track > li.product {
  flex: 0 0 calc((100% - (var(--hg-rail-cols-m, 2) - 1) * var(--hg-rail-gap-m, 20px)) / var(--hg-rail-cols-m, 2));
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  scroll-snap-align: start;
}
.hg-rail__arrow { position: absolute; z-index: 2; }
@media (max-width: 767px) {
  .hg-rail__track,
  ul.products.hg-rail__track { gap: var(--hg-rail-gap-m, 20px); }
  .hg-rail { padding-bottom: 30px; }
  .hg-rail__arrow { bottom: 2px; width: 30px; height: 30px; }
  .hg-rail__arrow--prev { inset-inline-start: calc(50% - 40px); }
  .hg-rail__arrow--next { inset-inline-start: calc(50% + 10px); }
}
@media (min-width: 768px) {
  .hg-rail__track > *,
  ul.products.hg-rail__track > li.product {
    flex-basis: calc((100% - (var(--hg-rail-cols, 4) - 1) * var(--hg-rail-gap, 20px)) / var(--hg-rail-cols, 4));
    margin-bottom: 10px;
  }
  .hg-rail__arrow {
    top: calc((100cqw / var(--hg-rail-cols, 4) - var(--hg-rail-gap, 20px)) * var(--hg-rail-ar, 1) / 2 + 23.5px);
    transform: translateY(-50%);
  }
  .hg-rail__arrow--prev { inset-inline-start: 0; }
  .hg-rail__arrow--next { inset-inline-end: 0; }
}
@media (min-width: 1200px) {
  .hg-rail__arrow--prev { inset-inline-start: -3%; }
  .hg-rail__arrow--next { inset-inline-end: -3%; }
}

/* Product grid (stacked layout, sections.css .hpc-grid). */
.hg-grid,
ul.products.hg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px var(--hg-rail-gap-m, 20px);
  margin: 0 5px;
  padding: 0 0 45px;
}
.hg-grid > *,
ul.products.hg-grid > li.product {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .hg-grid,
  ul.products.hg-grid {
    grid-template-columns: repeat(var(--hg-rail-cols, 4), minmax(0, 1fr));
    gap: 30px var(--hg-rail-gap, 20px);
    margin-inline: 2.5px;
    padding-bottom: 30px;
  }
}

/* Product card names stay on two lines inside section rails and grids. */
.hg-cards ul.products li.product .woocommerce-loop-product__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Reveal on scroll ([data-hg-reveal]); classes are only added by home.js, so content stays
   visible without it. */
.hg-reveal-pending { transition: opacity 0.8s ease, transform 0.8s ease; }
.hg-reveal-pending[data-hg-reveal="fade"]:not(.hg-revealed) { opacity: 0; }
.hg-reveal-pending[data-hg-reveal="slide-up"]:not(.hg-revealed) { opacity: 0; transform: translateY(40px); }
.hg-reveal-pending[data-hg-reveal="zoom"]:not(.hg-revealed) { opacity: 0; transform: scale(0.96); }
.hg-reveal-item { transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--hg-delay, 0ms); }
[data-hg-reveal="stagger"].hg-reveal-pending:not(.hg-revealed) .hg-reveal-item { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  .hg-reveal-pending,
  .hg-reveal-item { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Scroll motion ([data-hg-motion-root]). Only applied once home.js adds .hg-motion-on, so
   reduced motion, lite (html.hg-lite) and no-JS show the settled layout. Reveals carry no
   will-change: only the few that animate are promoted, by their transition, while it runs. */
.hg-motion-on {
  --hg-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hg-motion-dur: 900ms;
  --hg-motion-dist: 32px;
}
.hg-motion-on .hg-motion-reveal {
  transition: opacity var(--hg-motion-dur) var(--hg-motion-ease), translate var(--hg-motion-dur) var(--hg-motion-ease);
  transition-delay: var(--hg-motion-delay, 0ms);
}
/* Once in, the element's own opacity applies again (the story copy's 0.85), not a full 1. */
.hg-motion-on .hg-motion-reveal:not(.is-in) {
  opacity: 0;
  translate: 0 var(--hg-motion-dist);
}
.hg-motion-on [data-hg-motion-zoom] {
  clip-path: inset(calc((1 - var(--hg-motion-z, 0)) * 7%) calc((1 - var(--hg-motion-z, 0)) * 5%) round var(--hg-motion-radius, 0px));
}
.hg-motion-on [data-hg-motion-zoom] :is(img, svg) {
  scale: calc(1.18 - 0.18 * var(--hg-motion-z, 0));
}
.hg-motion-on .hg-motion-word {
  opacity: 0.18;
  transition: opacity 0.45s;
}
.hg-motion-on .hg-motion-word.is-lit { opacity: 1; }