/* wg-products.css · v1 (2026-10-09)
   Products page (Elementor post 26290). Enqueued site-wide on purpose: Zeyna's
   Barba page transitions bring in the next page's Elementor CSS but not
   child-theme stylesheets enqueued per page, so an is_page() enqueue would be
   missing after a transition. Every rule is scoped to .elementor-26290.
   --wg-orange matches webgold-rail.css (front page only). */
.elementor-26290{
  --wg-orange: #FC4521;
}

/* P1 · hero heading 8ba063a: "Ready to Install." in brand orange (span added in Elementor) */
.elementor-26290 .elementor-element-8ba063a .wg-accent{
  color: var(--wg-orange);
}

/* P2 · TRENDING NOW product carousel 74475fda: pe-core prints the add-to-cart wrapper (.zeyna--single--atc) on every
   card but no button for products that can't be bought (Site Mode, Form Builder: coming soon), which would leave an
   empty bubble on hover once Add To Cart Behavior (Variables) is Popup. (2026-10-26) */
.elementor-26290 .elementor-element-74475fda .zeyna--single--product:not(.purchasable) .zeyna--single--atc{
  display: none;
}

/* P3 · TRENDING NOW product carousel 74475fda: the card art is dark in both colour modes, but the product name
   inherited Zeyna's --mainColor (#0f0f0f in light mode) and was unreadable on it. Glare name, Driftwood category,
   whatever the mode. (2026-10-26) */
.elementor-26290 .elementor-element-74475fda .zeyna--product--meta .product-name{
  color: #FFF0D9;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.elementor-26290 .elementor-element-74475fda .zeyna--product--meta .zeyna--product--cats span{
  color: #B5A898;
}

/* === FAC product page hero (page 56410: hero 8251f01 > fe0d937, marquee 8eabbb1), 2026-11-01 ===
   One left edge (the container's 20px padding; widget offsets cleared in Elementor), order eyebrow → H1 → status
   notice → CTAs, brand colours only. The notice (53b39fe) is a core Text Editor widget with real <p>s. The lead
   (fa71474) is hidden on all breakpoints in Elementor (copy kept); the body paragraph (094514e) now sits under the
   "What's included" subhead (section 73da6be). DM Sans isn't loaded on this site, so it falls back to the site's
   General Sans (which only ships 300–600). */
.elementor-56410 .elementor-element.elementor-element-8251f01 {
  --min-height: 0px;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-fe0d937 {
  --flex-direction: column;
  --flex-wrap: nowrap;
  --justify-content: flex-start;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-top: 20px;
  --padding-right: 20px;
  --padding-bottom: 64px; /* CTAs → marquee */
  --padding-left: 20px;
  max-width: 800px; /* ~760px content column + padding: no empty right half */
}
.elementor-56410 .elementor-element-8251f01 .elementor-element-fe0d937 > .elementor-widget {
  width: 100%;
  margin: 0;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element-fe0d937 > .elementor-widget > .elementor-widget-container {
  margin: 0;
  padding: 0;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element-fe0d937 .text-wrapper p {
  margin: 0;
}

/* Eyebrow */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-8fb8526 .text-wrapper {
  --mainColor: #F1C36D;
  color: #F1C36D;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-8fb8526 .text-wrapper p {
  font-family: "DM Sans", "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* H1 */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac {
  max-width: 760px;
  margin-top: 8px;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper p,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper > * {
  font-size: 64px;
  line-height: 1.1;
}

/* Status notice */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe {
  box-sizing: border-box;
  max-width: 720px;
  margin-top: 32px;
  padding: 20px 24px;
  background: #1E1E1E;
  border: 1px solid rgba(241, 195, 109, .35);
  border-left: 4px solid #FC4521;
  border-radius: 12px;
  font-family: "DM Sans", "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(245, 243, 240, .8);
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe p {
  margin: 0;
  font: inherit;
  color: inherit;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe p + p {
  margin-top: 12px;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe strong {
  font-weight: 600;
  color: #FFF0D9;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe .wg-fac-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FC4521;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe .wg-fac-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6.5px; /* centred on the first line (14px × 1.5) when the label wraps */
  border-radius: 50%;
  background: #FC4521;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe a {
  color: #F1C36D;
  text-decoration: none;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe a:hover,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-53b39fe a:focus-visible {
  color: #FF6B55;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lead: hidden in Elementor; these rules only apply if it's shown again */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-fa71474 {
  max-width: 640px;
  margin-top: 32px;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-fa71474 .text-wrapper {
  --mainColor: rgba(255, 240, 217, .85);
  color: rgba(255, 240, 217, .85);
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-fa71474 .text-wrapper p {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: normal;
}

/* Body paragraph: intro under the "What's included" subhead (section 73da6be, header container 71633cb) */
.elementor-56410 .elementor-element-73da6be .elementor-element.elementor-element-094514e {
  width: 100%;
  max-width: 720px;
  margin: 0;
}
.elementor-56410 .elementor-element-73da6be .elementor-element.elementor-element-094514e > .elementor-widget-container {
  margin: 0;
  padding: 0;
}
.elementor-56410 .elementor-element-73da6be .elementor-element.elementor-element-094514e .text-wrapper {
  --mainColor: rgba(245, 243, 240, .7);
  color: rgba(245, 243, 240, .7);
}
.elementor-56410 .elementor-element-73da6be .elementor-element.elementor-element-094514e .text-wrapper p {
  margin: 0;
  font-family: "DM Sans", "General Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: normal;
}

/* CTAs */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-62bef33,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-90129af {
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-62bef33 {
  --margin-top: 32px; /* notice → CTAs */
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-90129af {
  --flex-direction: row;
  --flex-wrap: wrap;
  --gap: 16px;
  --row-gap: 16px;
  --column-gap: 16px;
}
/* primary: Orange with Blackout text (5.0:1; the Vellum it had was 3.3:1), Flare on hover */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-84b25a4 .pe--button--wrapper .pe--button--text,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-84b25a4 .pe--button--wrapper .pb--marquee--wrap,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-84b25a4 .pe--button--wrapper .pb--handle:hover .pe--button--text,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-84b25a4 .pe--button--wrapper .pb--handle:hover .pb--marquee--wrap {
  --buttonTextColor: #191919;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-84b25a4 .pe--button--wrapper .pb--handle::after {
  --buttonBgHovercolor: #FF6B55;
}
/* secondary: ghost in Glare (was teal), Glare fill with Blackout text on hover */
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--handle::before {
  --buttonBgcolor: transparent;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #FFF0D9;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--handle::after {
  --buttonBgHovercolor: #FFF0D9;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pe--button--text,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--marquee--wrap {
  --buttonTextColor: #FFF0D9;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--handle:hover .pe--button--text,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--handle:hover .pb--marquee--wrap {
  --buttonTextColor: #191919;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pe--button--icon,
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70 .pe--button--wrapper .pb--handle:hover .pe--button--icon {
  --buttonIconColor: #191919;
}
.elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-ced3e70._button_icon--pop--styled .pe--button--wrapper .pe--button--icon::before {
  background-color: #FFF0D9;
}

@media (max-width: 1024px) {
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper p,
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper > * {
    font-size: 52px;
  }
}
@media (max-width: 767px) {
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper p,
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-edfb8ac .text-wrapper > * {
    font-size: 40px;
    letter-spacing: -1.5px;
  }
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-fa71474 .text-wrapper p {
    font-size: 18px;
  }
  .elementor-56410 .elementor-element-73da6be .elementor-element.elementor-element-094514e .text-wrapper p {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .elementor-56410 .elementor-element-8251f01 .elementor-element.elementor-element-90129af {
    --flex-direction: column;
  }
  .elementor-56410 .elementor-element-8251f01 .elementor-element-90129af > .elementor-widget,
  .elementor-56410 .elementor-element-8251f01 .elementor-element-90129af .pe--button,
  .elementor-56410 .elementor-element-8251f01 .elementor-element-90129af .pe--button--wrapper,
  .elementor-56410 .elementor-element-8251f01 .elementor-element-90129af .pb--handle {
    width: 100%;
    max-width: 100%;
  }
}

/* Marquee band under the hero: quiet text, Gold separators (the bullets are wrapped in .wg-sep in Elementor; the
   loop seam gets one from the empty .seperator) */
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee span {
  font-family: "DM Sans", "General Sans", sans-serif;
  font-weight: 500;
  color: rgba(255, 240, 217, .3);
}
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee span.wg-sep,
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee .seperator::before {
  color: #F1C36D;
}
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee .seperator::before {
  content: "•";
  font-family: "DM Sans", "General Sans", sans-serif;
  font-weight: 500;
}
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee,
.elementor-56410 .elementor-element.elementor-element-8eabbb1 .pe-marquee .marquee-wrap {
  gap: .3em;
}