/**
 * Site-wide layout + responsive lock.
 * Loads last so header / body / footer share one content shell.
 */

:root {
  --i3d-shell-max: var(--tx-content-width, 1320px);
  --i3d-shell-pad: var(--tx-container-pad, 28px);
  --i3d-shell-pad-lg: 20px;
  --i3d-shell-pad-md: 14px;
  --i3d-shell-pad-sm: 10px;
}

/* --------------------------------------------------------------------------
   Global shell — body + footer match .wh-header-bar-inner
   -------------------------------------------------------------------------- */
html {
  overflow-x: clip;
}

body,
#page,
.site,
#content,
.site-content,
.site-main,
.front-page-main,
.wh-about-main,
.wh-product-main,
.wh-online-product,
.terea-wc-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.container,
.terea-container,
.wh-header-bar-inner,
.terea-header-main-inner,
.footer-grid.container,
.wh-site-footer .container,
.site-footer .container,
.i3d-cat-strip__inner.container,
.i3d-hero__grid.container,
.wh-announce-inner {
  width: 100% !important;
  max-width: var(--i3d-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--i3d-shell-pad) !important;
  padding-right: var(--i3d-shell-pad) !important;
  box-sizing: border-box !important;
  min-width: 0;
}

/* Category strip: keep horizontal shell padding (never pad: 0) */
.i3d-cat-strip__inner {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

@media (max-width: 1200px) {
  .container,
  .terea-container,
  .wh-header-bar-inner,
  .terea-header-main-inner,
  .footer-grid.container,
  .wh-site-footer .container,
  .site-footer .container,
  .i3d-cat-strip__inner.container,
  .i3d-hero__grid.container,
  .wh-announce-inner {
    padding-left: var(--i3d-shell-pad-lg) !important;
    padding-right: var(--i3d-shell-pad-lg) !important;
  }
}

@media (max-width: 1100px) {
  .container,
  .terea-container,
  .wh-header-bar-inner,
  .terea-header-main-inner,
  .footer-grid.container,
  .wh-site-footer .container,
  .site-footer .container,
  .i3d-cat-strip__inner.container,
  .i3d-hero__grid.container,
  .wh-announce-inner {
    padding-left: var(--i3d-shell-pad-md) !important;
    padding-right: var(--i3d-shell-pad-md) !important;
  }
}

@media (max-width: 480px) {
  .container,
  .terea-container,
  .wh-header-bar-inner,
  .terea-header-main-inner,
  .footer-grid.container,
  .wh-site-footer .container,
  .site-footer .container,
  .i3d-cat-strip__inner.container,
  .i3d-hero__grid.container,
  .wh-announce-inner {
    padding-left: max(var(--i3d-shell-pad-sm), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--i3d-shell-pad-sm), env(safe-area-inset-right, 0px)) !important;
  }
}

@media (max-width: 720px) {
  .i3d-cat-strip {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .i3d-hero__copy,
  .i3d-hero__content,
  .i3d-hero--split .i3d-hero__copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Footer — one brand layout on every template
   -------------------------------------------------------------------------- */
.site-footer.wh-site-footer,
.wh-site-footer {
  width: 100%;
  max-width: 100%;
  background: #f3f3f1 !important;
  color: #374151 !important;
  border-top: 1px solid #e5e5e5;
  overflow: visible;
}

.wh-site-footer::before {
  background: linear-gradient(90deg, var(--tx-accent, #c8102e), transparent 55%);
}

.wh-site-footer .footer-top {
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
}

.wh-site-footer .footer-grid,
.wh-site-footer .footer-grid--2,
.wh-site-footer .footer-grid--3,
.wh-site-footer .footer-grid--4 {
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

.wh-site-footer .footer-col,
.wh-site-footer .footer-col .widget,
.wh-site-footer .footer-col .footer-widget {
  min-width: 0;
  max-width: 100%;
}

.wh-site-footer .footer-title,
.wh-site-footer .footer-widget-title,
.wh-site-footer .widget-title {
  margin: 0 0 16px;
  color: #111 !important;
  font-family: var(--tx-font-heading, Syne, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.wh-site-footer .footer-brand img {
  display: block;
  max-width: min(200px, 70vw);
  max-height: 44px;
  width: auto;
  height: auto;
  filter: none !important;
  opacity: 1 !important;
}

.wh-site-footer .footer-description {
  max-width: 36ch;
  color: #4b5563 !important;
}

.wh-site-footer a {
  color: #374151 !important;
}

.wh-site-footer a:hover {
  color: var(--tx-accent, #c8102e) !important;
}

.wh-site-footer .footer-bottom {
  background: #ecece8 !important;
  border-top: 1px solid #dddcd7 !important;
}

.wh-site-footer .footer-bottom,
.wh-site-footer .footer-copyright,
.wh-site-footer .footer-payment-label,
.wh-site-footer .age-notice {
  color: #1f2937 !important;
}

.wh-site-footer .social-link {
  background: #fff !important;
  border: 1px solid #d7d7d4;
  color: #111 !important;
}

.wh-site-footer .social-link img {
  filter: none !important;
}

.wh-site-footer .social-link:hover,
.wh-site-footer .social-link:focus-visible {
  background: var(--tx-accent, #c8102e) !important;
  border-color: var(--tx-accent, #c8102e) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Kickers on light surfaces — beat Customizer white !important
   -------------------------------------------------------------------------- */
body .i3d-kicker:not(.i3d-kicker--light):not(.i3d-kicker--on-dark),
.front-page-main .i3d-kicker:not(.i3d-kicker--light):not(.i3d-kicker--on-dark),
.i3d-hero--split .i3d-kicker,
.i3d-section-head .i3d-kicker,
.i3d-intro .i3d-kicker,
.i3d-spotlight__copy .i3d-kicker,
.i3d-checklist .i3d-kicker,
.i3d-metrics .i3d-kicker,
.i3d-range .i3d-kicker,
.i3d-featured .i3d-kicker,
.i3d-process .i3d-kicker,
.i3d-about-hero .i3d-kicker,
.i3d-about-story .i3d-kicker {
  color: #6b7280 !important;
}

.i3d-consult--campaign .i3d-kicker,
.i3d-kicker--light,
.i3d-kicker--on-dark {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* --------------------------------------------------------------------------
   Desktop section grids (explicit so mobile rules can override cleanly)
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .i3d-spotlight__panel {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  }

  .i3d-spotlight--accessories .i3d-spotlight__panel {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }

  .i3d-checklist__card {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  }

  .wh-site-footer .footer-grid,
  .wh-site-footer .footer-grid--4 {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }

  .wh-site-footer .footer-grid--3 {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  }

  .wh-site-footer .footer-grid--2 {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Tablet ≤ 980px — stack split sections, keep 2-up cards/footer
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .i3d-hero--split .i3d-hero__grid,
  .i3d-intro__grid,
  .i3d-testimonials__grid,
  .i3d-spotlight__panel,
  .i3d-spotlight--accessories .i3d-spotlight__panel,
  .i3d-spotlight--titanium .i3d-spotlight__panel,
  .i3d-brand__grid,
  .i3d-about-hero__grid,
  .i3d-about-story__grid,
  .i3d-cat-hero__grid,
  .i3d-split,
  .i3d-split--flip,
  .i3d-checklist__card,
  .i3d-consult__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .i3d-spotlight--flip .i3d-spotlight__media,
  .i3d-spotlight__media {
    order: -1 !important;
  }

  .i3d-spotlight__copy,
  .i3d-checklist__copy,
  .i3d-checklist__actions {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .i3d-spotlight__title,
  .i3d-spotlight__lead,
  .i3d-hero__title,
  .i3d-intro__title,
  .i3d-section-title {
    max-width: none !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .i3d-checklist__actions .i3d-btn {
    width: 100%;
  }

  .i3d-range__grid,
  .i3d-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wh-site-footer .footer-grid,
  .wh-site-footer .footer-grid--2,
  .wh-site-footer .footer-grid--3,
  .wh-site-footer .footer-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wh-site-footer .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Phone ≤ 720px — single column everything
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .i3d-range__grid,
  .i3d-range__grid:has(> :nth-child(4)),
  .i3d-featured__grid,
  .i3d-metrics__grid,
  .i3d-process__grid,
  .i3d-about-values__grid,
  .i3d-about-facts__grid,
  .i3d-about-facts__grid[data-count="3"],
  .i3d-about-facts__grid[data-count="4"],
  .i3d-brand__benefits--3 {
    grid-template-columns: 1fr !important;
  }

  .wh-site-footer .footer-grid,
  .wh-site-footer .footer-grid--2,
  .wh-site-footer .footer-grid--3,
  .wh-site-footer .footer-grid--4 {
    grid-template-columns: 1fr !important;
  }

  .wh-site-footer .footer-grid > :first-child {
    grid-column: auto;
  }

  .wh-site-footer .footer-top {
    padding: 36px 0 24px;
  }

  .wh-site-footer .footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .i3d-spotlight__panel,
  .i3d-spotlight--accessories .i3d-spotlight__panel,
  .i3d-checklist__card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .i3d-spotlight__media {
    min-height: 0 !important;
    padding: 12px !important;
  }

  .i3d-spotlight__media img {
    max-height: min(280px, 42vh) !important;
  }

  .i3d-spotlight__copy .i3d-btn,
  .i3d-hero__actions .i3d-btn,
  .i3d-consult__inner .i3d-btn {
    width: 100%;
    justify-content: center;
  }

  .i3d-hero__actions,
  .i3d-about-hero__actions,
  .i3d-intro__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .i3d-cat-strip__inner {
    flex-direction: column;
    align-items: stretch;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Tiny phones
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .i3d-spotlight__title,
  .i3d-section-title,
  .i3d-hero__title {
    font-size: clamp(1.35rem, 7.5vw, 1.7rem) !important;
    line-height: 1.2 !important;
  }
}

/* --------------------------------------------------------------------------
   Product pages — keep hero/gallery top-aligned + header-width locked
   -------------------------------------------------------------------------- */
.wh-product-main .container,
.wh-online-product .container,
.wh-product-jump-inner,
.wh-product-jump .container,
.wh-split-feature {
  width: 100%;
  max-width: var(--i3d-shell-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--i3d-shell-pad);
  padding-right: var(--i3d-shell-pad);
  box-sizing: border-box;
}

.wh-banner-grid,
.wh-banner-grid.is-config {
  align-items: start !important;
}

.wh-gallery {
  align-items: start !important;
}

.wh-product-main .wh-banner-copy,
.wh-product-main .wh-banner-media {
  align-self: start;
}

.wh-split-feature {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 28px !important;
  background: transparent !important;
}

@media (max-width: 1024px) {
  .wh-banner-grid,
  .wh-banner-grid.is-config,
  .wh-split-feature,
  .wh-brand-line-grid,
  .wh-req__layout {
    grid-template-columns: 1fr !important;
  }

  .wh-split-feature-media {
    order: -1 !important;
    min-height: 240px !important;
  }

  .wh-product-main .container,
  .wh-online-product .container,
  .wh-product-jump-inner,
  .wh-split-feature {
    padding-left: var(--i3d-shell-pad-md);
    padding-right: var(--i3d-shell-pad-md);
  }
}

@media (max-width: 720px) {
  .wh-req,
  .wh-req > .container,
  .wh-req__layout,
  .wh-req__nav,
  .wh-req__panels,
  .wh-req__panel,
  .wh-req__summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .wh-req .wh-section-header--center {
    text-align: left !important;
  }

  .wh-req .wh-section-eyebrow,
  .wh-req .wh-section-title,
  .wh-req .wh-section-sub,
  .wh-req__panel-head p,
  .wh-req__help,
  .wh-req__card-name {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .wh-req__nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wh-req__nav::-webkit-scrollbar {
    display: none !important;
  }

  .wh-req__nav ol {
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  .wh-req__nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }

  .wh-req__nav-copy,
  .wh-req__nav-count {
    display: none !important;
  }

  .wh-req__nav-num {
    width: 100% !important;
    height: 100% !important;
  }

  .wh-req__cards,
  .wh-req__cards.is-compact {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wh-req__card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .wh-sticky-cta-copy {
    display: none !important;
  }

  .wh-sticky-cta .wh-btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  .wh-sticky-cta-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 480px) and (max-width: 720px) {
  .wh-req__cards,
  .wh-req__cards.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}