/*
 * GBZ420 home — new design (2026-09-17)
 * Palette: white / near-black #101010 / lime #d4fa0a - the charte sitewide pair
 *          (--gbz-ink / --gbz-accent, gbz-tokens.css), consumed here, not re-sampled.
 * Type:    Karla (body) + Oswald (display)
 * Scope:   only affects sections carrying the gbz-* classes, so the rest of
 *          the shop (category pages, product pages, checkout) is untouched.
 */

.gbz-product-section,
.gbz-reviews-section,
.gbz-about-section,
.gbz-hero {
  --gbz-ink: #101010;
  --gbz-lime: var(--gbz-accent, #d4fa0a);
  --gbz-white: #fff;
  --gbz-muted: #595959;
  --gbz-line: rgba(16, 16, 16, .12);
}

/* ---------------------------------------------------------------- sections */
.gbz-product-section,
.gbz-reviews-section,
.gbz-about-section,
.gbz-hero {
  font-family: Karla, sans-serif;
  color: var(--gbz-ink);
  background: var(--gbz-white);
  padding: 56px 0;
}

.gbz-product-section.gbz-section-transparent {
  background: var(--gbz-lime);
}

.gbz-product-section.gbz-section-dark {
  background: var(--gbz-ink);
  color: var(--gbz-white);
}

/* --------------------------------------------------------- content gutter */
/*
 * The plate keeps every product row inside a 4.2 % side gutter: the four card
 * borders sit at x 36..825 of 862, i.e. 91.6 % content width and 4.2 % each
 * side, and the kicker / H2 / lead align to the same left edge.
 * The theme's own boxed container is 1270 px wide with no side padding, so
 * below 1270 px the kicker, the H2 and the lead sat flush against x = 0 - at
 * 1260 px and at 390 px alike. The width here therefore comes from the gutter
 * (92 % of the viewport, capped) instead of a fixed 1270 px box.
 *
 * The selector has to out-rank the theme bundle's
 * `.elementor-section.elementor-section-boxed > .elementor-container` (0,3,0).
 * The campaign band is excluded on purpose: on the plate that band - and only
 * that band - runs edge to edge.
 */
section.gbz-product-section:not(.gbz-campaign) > .elementor-container {
  box-sizing: border-box;
  max-width: 1440px;
  padding-left: clamp(16px, 4.2vw, 64px);
  padding-right: clamp(16px, 4.2vw, 64px);
}

.gbz-reviews-section .elementor-container,
.gbz-about-section .elementor-container {
  max-width: 1280px;
}

/* ------------------------------------------------------------------ hero */
.gbz-hero {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.gbz-hero .gbz-hero-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.gbz-hero .gbz-hero-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 16px 8px;
}

.gbz-hero .gbz-hero-kicker {
  display: inline-block;
  background: var(--gbz-lime);
  color: var(--gbz-ink);
  font: 700 12px/1 Karla, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.gbz-hero .gbz-hero-title,
.gbz-hero .ce-display-xl {
  font-family: Oswald, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 76px);
  line-height: .95;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.gbz-hero .gbz-hero-title mark {
  background: var(--gbz-lime);
  color: var(--gbz-ink);
  padding: 0 .08em;
}

.gbz-hero .gbz-hero-intro {
  font-size: 18px;
  line-height: 1.5;
  color: var(--gbz-muted);
  max-width: 720px;
  margin: 0 0 24px;
}

/* -------------------------------------------------------- display heading */
.ce-display-xl {
  font-family: Oswald, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 8px;
}

.gbz-product-section .ce-display-xl strong,
.gbz-product-section .ce-display-xl b {
  background: var(--gbz-ink);
  color: var(--gbz-lime);
  padding: 0 .12em;
  font-weight: 700;
}

.gbz-product-section.gbz-section-transparent .ce-display-xl strong,
.gbz-product-section.gbz-section-transparent .ce-display-xl b {
  background: var(--gbz-ink);
  color: var(--gbz-lime);
}

.gbz-product-section.gbz-section-dark .ce-display-xl strong,
.gbz-product-section.gbz-section-dark .ce-display-xl b {
  background: var(--gbz-lime);
  color: var(--gbz-ink);
}

.gbz-product-section .gbz-section-kicker {
  display: inline-block;
  font: 700 12px/1 Karla, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gbz-muted);
  margin-bottom: 14px;
}

/*
 * Reference 01 sets the "GBZ420" eyebrow at the same optical size as the lead
 * paragraph: 9 px of ink against the lead's 11 px on 862 px of plate width,
 * i.e. a cap height of ~15 px at 1440. The CE page-settings rule caps it at
 * 13 px, which measured 9 px of ink - 40 % under the plate. Only the three home
 * product sections render .gbz-section-kicker (checked on /fr/, /en/, /de/ and
 * on the category and product routes), and this sheet is loaded by the home
 * document alone.
 */
section.gbz-product-section:not(.gbz-campaign) .gbz-section-kicker {
  font-size: clamp(13px, 1.35vw, 20px);
  /* the CE rule's .8em bottom margin scales with the font and would push the
     stack to a 27 px ink gap; the plate keeps eyebrow and heading 15 px apart,
     so the margin is pinned instead of left in em. */
  margin-bottom: 6px;
}

.gbz-product-section .elementor-text-editor {
  font-size: 17px;
  line-height: 1.55;
  max-width: 900px;
  margin: 0 0 26px;
}

.gbz-product-section .elementor-text-editor strong,
.gbz-product-section .elementor-text-editor b {
  background: var(--gbz-lime);
  color: var(--gbz-ink);
  font-weight: 700;
  padding: 0 .12em;
}

.gbz-product-section.gbz-section-transparent .elementor-text-editor strong,
.gbz-product-section.gbz-section-transparent .elementor-text-editor b {
  background: var(--gbz-ink);
  color: var(--gbz-lime);
}

/* --------------------------------------------------------- product cards */
.gbz-product-section .native-products .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gbz-white);
  border: 1px solid var(--gbz-line);
  padding: 12px;
}

.gbz-product-section.gbz-section-transparent .native-products .product-card {
  border-color: rgba(16, 16, 16, .18);
  box-shadow: 0 8px 20px rgba(16, 16, 16, .12);
}

.gbz-product-section.gbz-section-dark .native-products .product-card {
  background: #111;
  border-color: rgba(255, 255, 255, .14);
  color: var(--gbz-white);
}

.gbz-product-section .native-products .product-card .product-image {
  display: block;
  margin-bottom: 10px;
}

.gbz-product-section .native-products .product-card .product-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f6f6f3;
}

.gbz-product-section .native-products .product-card small {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gbz-muted);
  margin-bottom: 6px;
}

.gbz-product-section.gbz-section-dark .native-products .product-card small {
  color: #b9b9b9;
}

.gbz-product-section .native-products .product-card h3 {
  font-family: Karla, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  min-height: 3.9em;
}

.gbz-product-section .native-products .product-card h3 a {
  color: inherit;
  text-decoration: none;
}

.gbz-product-section .native-products .product-card .product-bottom {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.gbz-product-section .native-products .product-card .price {
  font-family: Oswald, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.gbz-product-section .native-products .product-card .regular-price {
  font-size: 13px;
  color: var(--gbz-muted);
  text-decoration: line-through;
}

.gbz-product-section .native-products .product-card .product-view {
  margin-left: auto;
  font: 700 11px/1 Karla, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gbz-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--gbz-lime);
  padding-bottom: 2px;
}

.gbz-product-section .native-products .product-card .availability {
  display: block;
  font-size: 11px;
  color: var(--gbz-muted);
  margin-top: 8px;
}

/* ------------------------------------------------------------ section CTA */
.gbz-product-section .gbz-section-cta .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gbz-ink);
  color: var(--gbz-lime);
  border: 0;
  border-radius: 999px;
  font: 700 13px/1 Karla, sans-serif;
  letter-spacing: .04em;
  padding: 14px 22px;
  text-decoration: none;
}

.gbz-product-section.gbz-section-dark .gbz-section-cta .elementor-button {
  background: var(--gbz-lime);
  color: var(--gbz-ink);
}

.gbz-product-section .gbz-section-cta .elementor-button:hover {
  opacity: .85;
}

.gbz-product-section .gbz-section-cta {
  text-align: right;
  padding-top: 6px;
}

/* ------------------------------------------------- reviews / about blocks */
.gbz-reviews-section {
  background: #f6f6f3;
  text-align: center;
}

.gbz-about-section {
  background: var(--gbz-white);
  border-top: 1px solid var(--gbz-line);
}

.gbz-about-section .ce-display-xl {
  font-size: clamp(24px, 2.6vw, 40px);
}

.gbz-about-section .gbz-about-link .elementor-button {
  background: transparent;
  color: #101010 !important;
  border: 1px solid var(--gbz-line);
  border-radius: 999px;
  font: 600 12px/1 Karla, sans-serif;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

/* The theme forces white button text; keep the about links legible on white. */
.gbz-about-section .gbz-about-link .elementor-button,
.gbz-about-section .gbz-about-link .elementor-button .elementor-button-text,
.gbz-about-section .gbz-about-link .elementor-button .elementor-button-content-wrapper {
  color: #101010 !important;
}

.gbz-about-section .gbz-about-link {
  display: inline-block;
  margin: 0 8px 10px 0;
}

.gbz-about-section .elementor-widget-button .elementor-widget-container {
  display: inline-block;
}

.gbz-about-section .elementor-text-editor {
  max-width: 900px;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1024px) {
  .gbz-product-section,
  .gbz-reviews-section,
  .gbz-about-section {
    padding: 40px 0;
  }

  .gbz-product-section .gbz-section-cta {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .gbz-hero .gbz-hero-intro {
    font-size: 16px;
  }

  .gbz-product-section .native-products .product-card h3 {
    min-height: 0;
  }
}

/* ------------------------------------------------ home card discount badge */
/* Owner-approved -X % chip. product-gbz-home*.tpl prints it only when the
   presenter reports has_discount + discount_type == 'percentage' + a value, so
   it cannot outlive the reduction it describes. Lime chip on the cover's
   top-left corner; the price / VOIR row is untouched, so the alignment the
   discounted row was measured for stays exactly as it is. */
.gbz-product-section .native-products .product-card {
  position: relative;
}

.gbz-product-section .native-products .product-card > .discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 4px 6px;
  font: 700 12px/1 Karla, sans-serif;
  letter-spacing: .04em;
  color: var(--gbz-ink);
  background: var(--gbz-lime);
  box-shadow: 0 2px 6px rgba(16, 16, 16, .18);
}

@media (max-width: 400px) {
  .gbz-product-section .native-products .product-card > .discount-badge {
    top: 8px;
    left: 8px;
    padding: 3px 5px;
  }
}