/* ==========================================================================
   GENESIS site header (global chrome)
   Design source: "Nuova proposta grafica.dc.html" -> the app bar across Turn 3/4
   screens: 62px band, #0A0C10, 1px rgba(255,255,255,.06) bottom rule, 13px nav
   links in #8B92A0 with the active item in #ECEFF4.

   ⚠️ RESTYLE ONLY - no markup changes. The parent's header.php carries real
   behaviour (mini cart, language dropdown, user menu, search) so this targets
   its existing classes instead of replacing the template.

   ⚠️ Loaded on EVERY page, not just redesigned ones. The header is a
   self-contained band with its own background, so it reads correctly over both
   the new dark screens and the pages still on the old light design. A header
   that changed appearance between pages would look more broken than one that
   is consistently dark.

   The bar carries four links, as the canvas draws it, but not the canvas's
   own labels: "Library" and "Creators" are concept destinations with no
   matching pages on this install. genesys_redesign_nav_bar() picks the four
   real pages closest to that shape - Explore / Devices / Shop / About us - so
   this file only ever styles routes that exist.
   ========================================================================== */

.site-header {
  background: var(--gns-bg) !important;
  border-bottom: 1px solid var(--gns-border-faint);
  box-shadow: none;
}

/*
 * The light bar is WHITE, not the light page ground: "Web - Home (tema chiaro)"
 * draws it `background:#fff` over an #F5F6F8 page, so the bar reads as a plane
 * above the content. On dark the two are one near-black surface and the rule
 * under it does that job instead, which is why this is a light-only override.
 */
[data-theme="light"] .site-header { background: var(--gns-surface) !important; }

.site-header .border-line,
.site-header .header-container,
.site-header .menu-container,
.site-header .logo-container {
  border-color: var(--gns-border-faint) !important;
  background: transparent !important;
}

/* ------------------------------------------------------------- search ---- */

.site-header .header-search,
.site-header .header-search form {
  background: transparent;
}

/* The category select and the text input read as one pill in the design. */
.site-header .header-search input[type="search"],
.site-header .header-search input[type="text"],
.site-header .header-search select {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
  border: 1px solid var(--gns-border-strong) !important;
  border-radius: var(--gns-r-pill);
}
.site-header .header-search input::placeholder { color: var(--gns-muted); opacity: 1; }
.site-header .header-search input:focus,
.site-header .header-search select:focus {
  outline: none;
  border-color: var(--gns-focus) !important;
  box-shadow: 0 0 0 3px var(--gns-cyan-tint);
}
.site-header .header-search option { background: var(--gns-surface); color: var(--gns-text); }

/* The submit magnifier sits inside the pill. */
.site-header .header-search button,
.site-header .search-btn {
  background: transparent;
  border: 0;
  color: var(--gns-secondary-2);
}
.site-header .search-btn:hover { color: var(--gns-text); }
.site-header .header-search svg,
.site-header .search-btn svg { fill: currentColor; }

/* -------------------------------------------------------- account area ---- */

.site-header .account-buttons,
.site-header .user-menu,
.site-header .mini-profile-container,
.site-header .header-mini-cart {
  color: var(--gns-body);
}
.site-header .account-buttons a,
.site-header .user-menu a {
  color: var(--gns-body);
  text-decoration: none;
  font-size: 13px;
}
.site-header .account-buttons a:hover,
.site-header .user-menu a:hover { color: var(--gns-text); }

/*
 * Both icons are drawn on the <path>, not the <svg>, so setting fill on the
 * svg alone changed nothing:
 *
 *   cart     - inline fill="#0F0F10", plus
 *              `.header-mini-cart button svg path { fill: black }`  (0,2,2)
 *   chevron  - inline stroke="var(--wp--preset--color--black)", plus
 *              `.mini-profile svg path { color: black }`            (0,1,2)
 *
 * A presentation attribute loses to any CSS rule, so the parent's path rules
 * are what actually paint them. Match the path.
 */
.site-header .header-mini-cart svg,
.site-header .mini-profile svg { fill: currentColor; color: var(--gns-body); }

/*
 * Not `currentColor`: the path sits inside a <button>, and the UA stylesheet
 * gives buttons `color: buttontext` rather than letting them inherit, so
 * currentColor resolved to black here. Name the token.
 */
.site-header .header-mini-cart button { color: inherit; }
.site-header .header-mini-cart button svg path {
  fill: var(--gns-body);
}
.site-header .mini-profile svg path {
  color: currentColor;
  stroke: currentColor;
}
.site-header .header-mini-cart button:hover svg path { fill: var(--gns-text); }

/* Cart bubble picks up the brand cyan. */
.site-header .header-mini-cart .cart-count,
.site-header .header-mini-cart .count {
  background: var(--gns-cyan);
  color: var(--gns-on-accent);
}

/* Dropdowns float above the dark bar. */
.site-header .mini-cart-dropdown,
.site-header .custom-language-dropdown .language-options,
.site-header .mini-profile-dropdown,
.site-header .pop-ups {
  background: var(--gns-surface);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  box-shadow: var(--gns-shadow-pop);
  color: var(--gns-body);
}
.site-header .mini-cart-dropdown a,
.site-header .mini-profile-content a { color: var(--gns-body); }
.site-header .mini-cart-dropdown a:hover,
.site-header .mini-profile-content a:hover { color: var(--gns-text); }

/* ---------------------------------------------------- profile dropdown ---- */
/*
 * The account menu's real class is `.mini-profile-content` (header.php ->
 * `ul.mini-profile-content.pop-ups.shadow`). An earlier pass here styled
 * `.mini-profile-dropdown`, which matches nothing, so the menu kept the
 * parent's white panel with black links.
 *
 * `.pop-ups` above already darkens the panel; these rules cover the pieces
 * the parent paints individually.
 */
.site-header .mini-profile-container .mini-profile-content {
  background-color: var(--gns-surface);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  padding: 6px 16px;
}
.site-header .mini-profile-container .mini-profile-content a {
  color: var(--gns-body);
  font-family: var(--gns-font);
}
.site-header .mini-profile-container .mini-profile-content a:hover {
  color: var(--gns-cyan-ink);
}
.site-header .mini-profile-container .mini-profile-content li {
  border-bottom: 1px solid var(--gns-border-faint);
}
.site-header .mini-profile-container .mini-profile-content li:last-child {
  border-bottom: 0;
}

/* The trigger pill: parent gives it a light-grey ring. */
.site-header .mini-profile {
  border-color: var(--gns-border-strong);
  background: var(--gns-elevated);
}
.site-header .mini-profile:hover {
  border-color: var(--gns-cyan);
}
.site-header .mini-profile img {
  border: 1px solid var(--gns-border);
}

.site-header .custom-language-dropdown .selected-language { color: var(--gns-body); }

/* ======================================================== language pill === */
/*
 * The canvas is explicit about this control: "La pill IT|EN vive nella nav
 * fissa, sempre visibile - stessa posizione su landing, marketplace e pagine
 * editoriali." (screen "Web - Switch lingua").
 *
 * The parent ships a flag dropdown instead: a `.selected-language` button
 * holding one flag image, and a `.language-options` list that WP Multilang
 * shows and hides. Nothing about it is a pill, and the current language is
 * legible only as a national flag - which names a country, not a language.
 *
 * This turns the list the parent already renders into the pill, rather than
 * forking header.php to emit new markup: the flags are hidden, the list is
 * unhidden permanently, and each link is labelled from its own href. The
 * language codes are therefore never hard-coded - a third language added in
 * WP Multilang appears in the pill on its own, with the fallback label.
 *
 * ⚠️ display is !important because the parent's JS writes `style="display:none"`
 * on the list inline. "Sempre visibile" is the whole point of the control, so
 * it has to outrank that.
 */
/* ======================================================= header search === */
/*
 * The parent lays the category select and the search field out as
 * `.header-search { display: flex; gap: 0 }`, so the two sit edge to edge -
 * the select ended at 593 and the input began at 593. With both controls
 * pill-rounded they read as one fused shape with a seam in it rather than as
 * two fields.
 */
.site-header .header-search {
  gap: 10px;
}

.site-header .custom-language-dropdown { position: relative; }

/* The single-flag trigger is what the pill replaces. */
.site-header .custom-language-dropdown .selected-language { display: none !important; }

.site-header .custom-language-dropdown .language-options {
  display: inline-flex !important;
  position: static !important;
  gap: 3px;
  margin: 0;
  padding: 3px;
  list-style: none;
  /* The canvas rings this control in the brand cyan rather than in the bar's
     neutral hairline - it is the one control in the nav that is always visible
     and always actionable, and the ring is what says so. */
  border: 1px solid rgba(0, 191, 255, .4);
  border-radius: var(--gns-r-pill);
  background: var(--gns-cyan-tint);
  /* it is not a dropdown any more */
  box-shadow: none;
  min-width: 0;
  width: auto;
}
/*
 * ⚠️ The parent marks the current language by painting the LIST ITEM
 * `background: #F3F3F3` - a fixed near-white that does not invert. The pill
 * marks it with the gradient on the <a> instead, and the <a> is fully rounded
 * while the <li> behind it is a square, so that near-white stayed visible at
 * the four corners and read as a white backing on the dark ground.
 *
 * The item is now only a slot; everything visible belongs to the link.
 */
.site-header .custom-language-dropdown .language-options li,
.site-header .custom-language-dropdown .language-options li.active {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.site-header .custom-language-dropdown .language-options a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--gns-r-pill);
  color: var(--gns-body) !important;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .1em;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.site-header .custom-language-dropdown .language-options a:hover {
  color: var(--gns-text) !important;
}

/*
 * The label. WP Multilang gives the link no text at all - only a flag <img> -
 * so the code comes from the href, which is the one thing on the element that
 * already names the language. `/it/` is the Italian permalink prefix; anything
 * else is the site's default language.
 */
.site-header .custom-language-dropdown .language-options a img { display: none; }
.site-header .custom-language-dropdown .language-options a::after { content: "EN"; }
.site-header .custom-language-dropdown .language-options a[href*="/it/"]::after,
.site-header .custom-language-dropdown .language-options a[href$="/it"]::after { content: "IT"; }

/*
 * ⚠️ NOT the brand gradient, which is what sat here before. The canvas marks
 * the selected language with a plain LIGHT chip - `background:#ECEFF4;
 * color:#0A0C10` on the dark bar - and keeps the gradient for the things that
 * carry the product's meaning (CTAs, the wordmark, the AUTO chip, the seal).
 * Stated as the text/background tokens so the chip inverts with the theme:
 * dark ink on a light chip in the dark bar, light ink on a dark chip in the
 * light one.
 */
.site-header .custom-language-dropdown .language-options li.active a {
  background: var(--gns-text);
  color: var(--gns-bg) !important;
  font-weight: 700;
}

/* Coarse pointers get the 44px target WCAG 2.2 asks of a control. */
@media (pointer: coarse) {
  .site-header .custom-language-dropdown .language-options a {
    min-width: 44px;
    height: 40px;
  }
}

/* ------------------------------------------------------ mini-cart panel ---- */
/*
 * MOVED. The basket panel is no longer a dropdown hanging off the icon - it is
 * a drawer that slides in from the right, and everything about it now lives in
 * assets/css/cart-drawer.css alongside woocommerce/cart/mini-cart.php, which
 * supplies its markup.
 *
 * The block that stood here restyled the parent's own mini-cart markup -
 * `.mini-cart-item-url`, `.mini-cart-price`, `.quantity-section` - none of
 * which is rendered any more.
 */

/* ---------------------------------------------------------- primary nav --- */

.site-header .menu-container { border-top: 1px solid var(--gns-border-faint); }

/* The real menu is ul.main-menu. It must not wrap onto a second row - the
   header is fixed and the parent clears it with a STATIC
   `margin-top: var(--top-margin) !important` (113px), so a taller header
   overlaps the page on every template. Ten items at 1440px is tight, so it
   scrolls horizontally instead.

   ⚠️ Scrolling only works if the row is actually constrained. As a flex item
   the nav sized itself to its content - 1785px for eleven items - and
   overflowed its own 1440px container AND the viewport, ending at 2008px in
   an 1885px window. `overflow-x: auto` never engaged, because the box was
   never smaller than what was in it; the G-Coin chip a signed-in visitor gets
   at the end of the row simply ran off the page with no way to reach it.

   `min-width: 0` is the part that matters: a flex item's default
   `min-width: auto` refuses to shrink below its content, which is what let
   the row grow past its parent in the first place. */
.site-header .primary-nav {
  min-width: 0;
  max-width: 100%;
}
.site-header .primary-nav .main-menu,
.site-header .primary-nav .menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
  scroll-behavior: smooth;
}
.site-header .primary-nav .main-menu::-webkit-scrollbar { display: none; }
/*
 * `padding-right: 24px` on the parent's `.main-menu li` sat INSIDE each item,
 * so the measured distance between links was 24 + the flex gap - 50px against
 * the canvas's 26px, and every item's box ran 24px past its own text. The gap
 * is the only thing that should be spacing them.
 *
 * The border goes with it: below 782px the parent draws a `1px solid
 * lightgrey` divider between items (style.css:5337), a near-white hairline
 * that the dark bar never wanted and that the canvas does not draw in any
 * state. Its 24px of padding was the only thing holding it off the text.
 */
.site-header .primary-nav .main-menu > li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * ⚠️ Cancels: style.css
 *     .main-menu li a { color: var(--wp--preset--color--black) !important; }
 *     .main-menu li a[aria-current="page"] { color: ...violamain !important; }
 *
 * Both are !important, so these have to be too - specificity then decides.
 * Without this the nav renders black-on-black in the dark bar.
 */
.site-header .primary-nav .main-menu li a,
.site-header .primary-nav a {
  font-size: 13px;
  /* The parent bolds every menu link. The canvas nav is regular weight - the
     only weight in the bar belongs to the active item in the LIGHT theme (see
     below), so bold on all four would erase that distinction. */
  font-weight: 400;
  line-height: 1;
  color: var(--gns-secondary) !important;
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color .15s ease;
  white-space: nowrap;
}
.site-header .primary-nav .main-menu li a:hover,
.site-header .primary-nav a:hover { color: var(--gns-text) !important; }

/*
 * Current section. The canvas marks it by LIFTING THE COLOUR ONLY - dark bar:
 * `<span style="color:#ECEFF4">Explore</span>` beside plain #828B99 siblings,
 * with no rule, no weight change and no chip. The gradient underline that used
 * to sit here was an addition, not something the reference draws, so it goes.
 *
 * Colour is not the only signal the item carries: the anchor also has
 * `aria-current="page"`, which is what assistive tech announces, so 1.4.1 is
 * satisfied without painting a second cue the design does not have.
 */
.site-header .primary-nav .main-menu li a[aria-current="page"],
.site-header .primary-nav .current-menu-item > a,
.site-header .primary-nav .current_page_item > a,
.site-header .primary-nav .current-menu-ancestor > a {
  color: var(--gns-text) !important;
}

/*
 * The LIGHT bar does bold it - "Web - Home (tema chiaro)" draws the active item
 * as `color:#0E1116;font-weight:700` - so the weight is a light-theme rule
 * rather than a global one. On the near-black bar the colour jump from #828B99
 * to #ECEFF4 is emphatic on its own; against #6B7482 on white it is not.
 */
[data-theme="light"] .site-header .primary-nav .main-menu li a[aria-current="page"],
[data-theme="light"] .site-header .primary-nav .current-menu-item > a,
[data-theme="light"] .site-header .primary-nav .current_page_item > a,
[data-theme="light"] .site-header .primary-nav .current-menu-ancestor > a {
  font-weight: 700;
}

/* Submenus */
.site-header .primary-nav .sub-menu {
  background: var(--gns-surface);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-card);
  box-shadow: var(--gns-shadow-pop);
  padding: 6px;
  gap: 0;
}
.site-header .primary-nav .sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
}
.site-header .primary-nav .sub-menu a:hover { background: var(--gns-elevated); }

/* -------------------------------------------------------------- banner --- */

.banner {
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
}

/* ---------------------------------------------------------------- misc --- */

/* The mobile menu / hamburger inherits the bar colour. */
.site-header .menu-icon span,
.site-header .mobile-search svg { background-color: var(--gns-body); color: var(--gns-body); }

@media (max-width: 900px) {
  .site-header .primary-nav ul,
  .site-header .primary-nav .menu { gap: 14px; }
  .site-header .primary-nav a { font-size: 12.5px; }
}

/* ============================================================== footer ==== */
/*
 * The footer is global chrome like the header, which is why it is handled in
 * this stylesheet - it is the one redesign file that loads on every page.
 *
 * The parent paints it #0F0F10 on every page. Against the light pages that is
 * a deliberate dark slab, but against the redesigned dark ground (#0A0C10) it
 * read as a mismatched band rather than a section. Aligning it to the ground
 * and marking the join with a hairline keeps the seam intentional.
 *
 * Scoped to `gns-dark-page` so pages still on the light design are untouched.
 */
body.gns-dark-page .footer,
body.gns-dark-page .site-footer {
  background-color: var(--gns-bg);
  border-top: 1px solid var(--gns-border);
}

/*
 * ⚠️ The rule above only repainted the GROUND. The parent paints every piece
 * of footer text `--wp--preset--color--alwayswhite` - a preset that is #fff in
 * BOTH themes, as its name says - because it assumed the footer is always the
 * dark slab it set at .footer { background: alwaysblack }.
 *
 * So in light mode the ground followed --gns-bg to #F5F6F8 while the text
 * stayed #fff: 14 links at a 1.08 contrast ratio, i.e. invisible. Everything
 * below makes the text follow the ground.
 *
 * `.footer-address p` and the `h4` are NOT listed here on purpose - gns-base
 * already themes bare headings and paragraphs inside .gns-scope, so they were
 * the only two things in the footer that survived the flip. Links, borders and
 * the icons are what the parent colours explicitly, and they are what breaks.
 */
body.gns-dark-page .footer {
  color: var(--gns-body);
}
body.gns-dark-page .footer-address a,
body.gns-dark-page .footer-menu a {
  color: var(--gns-text);
}
/*
 * The wordmark needs its own rule: the parent colours it at `.footer-address
 * a h4`, which beats the inherited colour set on .footer above.
 *
 * ⚠️ Do NOT drop this on the grounds that gns-base already themes headings.
 * gns-base is written `:where(.gns-scope) :where(h1..h6)`, and `gns-scope`
 * goes on each SCREEN's root element - the footer is global chrome, outside
 * every one of them. It only appeared themed on the home page, which is what
 * made this look fixed when it was not.
 */
body.gns-dark-page .footer-address a h4 {
  color: var(--gns-text);
}
/* The phone and e-mail sit inside the address paragraph, so they read as body. */
body.gns-dark-page .footer-address p a {
  color: var(--gns-body);
}
body.gns-dark-page .footer-address a:hover,
body.gns-dark-page .footer-address p a:hover,
body.gns-dark-page .footer-menu a:hover {
  color: var(--gns-cyan-ink);
  text-decoration: none;
}

/* Hairlines the parent drew in flat white - invisible on the light ground. */
body.gns-dark-page .newsletter-signup {
  border-left-color: var(--gns-border-strong);
}
body.gns-dark-page .footer-menus {
  border-top-color: var(--gns-border-strong);
  border-bottom-color: var(--gns-border-strong);
}

/*
 * The five social glyphs are <img>, not inline SVG, so no selector can reach
 * their <path> - and all five are pure white (checked: facebook, instagram,
 * linkedin and reddit ship `fill="#ffffff"`, discord.png is 100% white opaque
 * pixels). A filter is the only lever.
 *
 * brightness(0) rather than invert(1): both give black for a white source, but
 * if a coloured logo is ever dropped in, brightness(0) degrades to a clean
 * silhouette where invert(1) would produce its garish complement. The opacity
 * lands them near --gns-text instead of pure black.
 */
:root[data-theme="light"] body.gns-dark-page .social-icon img {
  filter: brightness(0) opacity(.86);
}

/* ======================================== newsletter - UNVERIFIED LOCALLY ==
   The signup is an ActiveCampaign embed: footer.php prints an empty
   `<div class="_form_8">` plus a script from thegenesys.activehosted.com, and
   that host is not reachable from this stack, so the form renders EMPTY here.

   The parent styles it for a dark slab (white text, #ffffff29 fills, white
   borders), which is the same trap the links fell into. The rules below are
   written from those parent rules and have NEVER been seen rendered - re-check
   them the first time the page loads with the form present. Note the embed is
   requested with `nostyles=0`, so ActiveCampaign ships its own CSS too and may
   need more than this.
   ========================================================================= */
body.gns-dark-page .newsletter-signup h3 { color: var(--gns-text); }
body.gns-dark-page .newsletter-signup p { color: var(--gns-body); }
body.gns-dark-page .newsletter-signup input[type="email"] {
  background: var(--gns-tint);
  border-color: var(--gns-border-strong);
  color: var(--gns-text);
}
body.gns-dark-page .newsletter-signup input[type="email"]::placeholder {
  color: var(--gns-muted);
}
body.gns-dark-page .newsletter-signup button {
  background: var(--gns-tint);
  border-color: var(--gns-border-strong);
  color: var(--gns-text);
}
body.gns-dark-page .newsletter-signup button:hover {
  border-color: var(--gns-border-cyan);
  color: var(--gns-text);
}
body.gns-dark-page .newsletter-signup input[type="checkbox"] {
  border-color: var(--gns-border-heavy);
  accent-color: var(--gns-cyan);
}
body.gns-dark-page .newsletter-signup .aggreement label {
  color: var(--gns-secondary);
}
/* The privacy links are commented out in footer.php, but styled in case. */
body.gns-dark-page .privacy-links { color: var(--gns-body); }


/* ==========================================================================
   ONE-ROW APP BAR
   Supersedes the two-row treatment above (the `.menu-container` border-top at
   the top of "primary nav", and the nav's own horizontal scroll).

   The reference puts everything on a single line: wordmark, then the nav
   inline beside it, then search and the controls pushed right. The parent's
   header.php nests those in two sibling rows -

       .header-container
         .row.logo-container   -> .logo + .header-search (which holds .user-menu)
         .row.menu-container   -> nav.primary-nav

   - and .logo-container is itself wrapped in a .border-line div, so the pieces
   that need to sit next to each other are two levels apart and `order` cannot
   reach across a parent. `display: contents` on BOTH wrappers dissolves their
   boxes so .logo and .header-search join .menu-container in one flex context;
   ordering then works. That keeps the promise at the top of this file - no
   markup changes - while still getting the reference's layout.

   The parent also lays .header-container out as a flex COLUMN, which is what
   stacked the two rows in the first place; it has to be turned back to a row
   explicitly.

   Link ORDER is untouched: whatever the client sets in wp-admin is what
   renders, left to right.
   ========================================================================== */

.site-header .header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Dissolve both wrappers. Their boxes carried nothing but layout - the rule
   .border-line used to draw is already on .site-header's own border-bottom. */
.site-header .border-line,
.site-header .row.logo-container { display: contents; }

/* Four flex items once the wrappers are dissolved: the wordmark, the nav, the
   search, and the account cluster. .account-buttons is a sibling of .logo, not
   a child of .header-search, so without an explicit order it defaults to 0 and
   renders BEFORE the wordmark. */
.site-header .logo               { order: 1; flex: 0 0 auto; margin: 0; }
/* The nav must not shrink: it is the one item whose content cannot be
   abbreviated without hiding a destination. The search yields instead - it
   stays usable at any width, it just gets narrower. */
/* `width: auto` matters as much as the flex basis: the parent's .row class is
   `width: 100%`, which made this item 1375px of a 1425px bar and pushed the
   search and account cluster clean off the right edge. */
.site-header .row.menu-container {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.site-header .primary-nav { width: auto; flex: 0 0 auto; }
/* The canvas draws the search as a FIXED 240px pill, not a field that eats the
   slack - the slack belongs to the bar. `margin-left: auto` is what pushes it
   and the account cluster to the right edge now that it no longer grows. */
.site-header .header-search      { order: 3; flex: 0 1 240px; width: 240px; min-width: 0; max-width: 100%; margin-left: auto; }
.site-header .account-buttons,
.site-header .logo-container > .user-menu {
  order: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;                        /* canvas right cluster */
}

/* No longer a row of its own, so it sheds the rule that separated it. */
.site-header .menu-container {
  border-top: 0 !important;
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------- nav ------ */
/* Inline in the bar now, so the row no longer needs to scroll: the four-link
   bar (see genesys_redesign_nav_bar) is what made a single row viable.
   Typography is set once, in "primary nav" above - 13px / #828B99 / active
   #ECEFF4 - exactly as the canvas draws it; nothing is re-stated here. */
.site-header .primary-nav .main-menu,
.site-header .primary-nav .menu {
  overflow-x: visible;
}

/* ----------------------------------------------------------- controls ---- */
.site-header .header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* The search reads as one quiet pill: filled, borderless until focus. */
/* The reference shows a single search pill, and the category filter is not
   wanted, so the select is hidden.

   ⚠️ Hidden, NOT removed, and it must stay that way. The parent's
   assets/js/script.js:762 grabs #search-category on load and reads
   `searchCategory.value` inside getSearchData() on every keystroke and every
   click of the magnifier; deleting the element throws a TypeError there and
   takes the whole search with it. Its first option is `value="all"`, so a
   hidden select keeps reporting "all" - which is precisely the unfiltered
   search that dropping the control is meant to give.

   `padding-right` on the input clears the absolutely-positioned magnifier. */
.site-header .header-search input[type="search"],
.site-header .header-search input[type="text"] {
  background-color: var(--gns-tint-weak) !important;
  border: 1px solid var(--gns-border) !important;
  border-radius: var(--gns-r-pill);
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.site-header .header-search .search-categories,
.site-header .header-search select#search-category,
.site-header .header-search select#mobile-search-category {
  display: none !important;
}

/* Language pill, and the theme icon beside it. */
.site-header .custom-language-dropdown .selected-language {
  border-radius: var(--gns-r-pill);
  padding: 6px 10px;
}

.site-header .gns-theme {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--gns-border-strong);
  border-radius: 50%;
  color: var(--gns-secondary);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.site-header .gns-theme:hover {
  color: var(--gns-text);
  border-color: var(--gns-border-heavy);
  background: var(--gns-elevated);
}
.site-header .gns-theme:focus-visible {
  outline: none;
  border-color: var(--gns-focus);
  box-shadow: 0 0 0 3px var(--gns-cyan-tint);
}

/* Two glyphs stacked in one 18px box; only one is ever visible. The icon
   shows the theme the next click will GIVE you, matching the aria-label the
   script keeps in sync - sun while dark, moon while light. */
.site-header .gns-theme__glyphs {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}
.site-header .gns-theme__icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity .18s ease, transform .18s ease;
}
.site-header .gns-theme__icon--sun  { opacity: 0; transform: rotate(35deg) scale(.65); }
.site-header .gns-theme__icon--moon { opacity: 1; transform: none; }
.site-header .gns-theme.is-dark .gns-theme__icon--sun  { opacity: 1; transform: none; }
.site-header .gns-theme.is-dark .gns-theme__icon--moon { opacity: 0; transform: rotate(-35deg) scale(.65); }

@media (prefers-reduced-motion: reduce) {
  .site-header .gns-theme__icon { transition: none; }
}

/* Label is for screen readers only; the glyph carries it visually. */
.site-header .gns-theme__text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------------------------------------------------------- narrow ------- */
/* Below the point where nav + search + controls stop fitting, the nav gets its
   scroll behaviour back rather than wrapping the bar to two rows - the fixed
   header's height is measured once and everything below it is offset by that. */
@media (max-width: 1100px) {
  .site-header .header-container { gap: 18px; }
  .site-header .primary-nav .main-menu,
  .site-header .primary-nav .menu {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header .header-search { flex-basis: 180px; }
}

@media (max-width: 782px) {
  /* Back to stacked rows: one line cannot hold all four groups on a phone. */
  .site-header .header-container { flex-wrap: wrap; row-gap: 8px; }
  .site-header .row.menu-container { order: 4; flex-basis: 100%; }
  .site-header .header-search { order: 2; }
}

/* ------------------------------------------------- header clearance ------ */
/*
 * The bar is one row now - 63px against the 122px it used to be - so every
 * `margin-top: var(--top-margin) !important` in the parent's style.css (lines
 * 714, 732, 747, 6818, 7109) was leaving a 48px band of dead space under the
 * header.
 *
 * --top-margin is declared in an inline <style> in the parent's header.php,
 * which is printed AFTER wp_head() and therefore after this file. `html:root`
 * (0,1,1) outranks its bare `:root` (0,1,0), which is what lets a stylesheet
 * win against a later inline block without !important.
 *
 * --gns-header-h is the header's real measured height, published by
 * theme-switch.js on every load and resize; it already accounts for the beta
 * banner, which renders inside .site-header. The literal is only the
 * pre-measurement fallback.
 */
html:root { --top-margin: var(--gns-header-h, 63px); }


/* ================================================== canvas metrics ======= */
/*
 * The bar's own numbers, read off the reference nav. It is drawn identically
 * on every 1440px web screen in "Nuova proposta grafica.dc.html" - Turn 3
 * "GENESIS" home, Turn 4 "Web - Risultati", Turn 12 "Web - Switch lingua" -
 * so these are the design's values, not a reading of one screen:
 *
 *     bar        height 62px, padding 0 36px, 1px .06 rule under it
 *     wordmark   11px tall, then 36px of air before the nav
 *     links      13px, #828B99, active #ECEFF4, 26px apart
 *     right      cluster pushed to the edge, items 12px apart, 32px tall
 *     search     240px pill, 1px .08 border on a .02 fill, 12.5px muted text
 *
 * Anything the canvas does not draw but the markup carries - the theme toggle,
 * Login/Register, the mini cart - is sized to the same 32px so it lands on the
 * cluster's line rather than inventing a second one.
 */

.site-header .header-container {
  padding-left: 36px;
  padding-right: 36px;
  min-height: 62px;
  gap: 0;                 /* spacing is set per gap below, not once globally */
}

/*
 * The wordmark. Sized by HEIGHT so the aspect ratio stays exact whatever asset
 * the client uploads through the customiser - the current upload is 273x25 and
 * the handoff's own the-GENESYS-grad.svg is 419x37, which are the same 11:1
 * wordmark at two scales.
 *
 * 11px is small for a hit target, and the image is the whole of the home link,
 * so the padding on the anchor - not the image - is what carries the 24x24 that
 * WCAG 2.2 (2.5.8) asks of it.
 */
.site-header .logo img {
  width: auto;
  max-width: none;
  height: 11px;
  display: block;
}
.site-header .logo a {
  display: inline-flex;
  align-items: center;
  padding: 7px 0;
}

/* 36px: the canvas separates the mark from the navigation by noticeably more
   than it separates the links from each other (26px), which is what keeps the
   wordmark from reading as a fifth nav item. */
.site-header .row.menu-container { margin-left: 36px; }

.site-header .primary-nav .main-menu,
.site-header .primary-nav .menu { gap: 26px; }

/* ------------------------------------------------------- search pill ----- */
/*
 * The parent dresses .header-search as the light design's field: a fixed 480px
 * box with `box-shadow: 0 0 8px #00000014` around it and an italic input
 * inside. The canvas has neither - one flat 240px pill, upright text - so both
 * are cleared here rather than left to show through the dark bar.
 */
.site-header .header-search {
  box-shadow: none;
  margin-left: auto;      /* pushes the pill and the cluster to the right edge */
}

.site-header .header-search input[type="search"],
.site-header .header-search input[type="text"] {
  height: 32px;
  font-size: 12.5px;
  font-style: normal;     /* parent: `.header-search input { font-style: italic }` */
  color: var(--gns-text) !important;
}

/*
 * The magnifier leads the field in the canvas ("⌕ dragon" on Web - Risultati),
 * where the parent absolutely positions it at `right: 10px`. Both sides of the
 * swap have to be stated: the button moves left, and the input's padding moves
 * with it, or the caret starts underneath the glyph.
 */
.site-header .header-search .search-btn {
  right: auto;
  left: 11px;
  color: var(--gns-muted);
  font-size: 12px;
  line-height: 1;
}
.site-header .header-search input[type="search"],
.site-header .header-search input[type="text"] {
  padding: 0 14px 0 32px;
}

/* ------------------------------------------------- account cluster ------- */
/*
 * `justify-content: flex-end` collapses the ~14px of slack the cluster carries
 * (a display:none .mobile-search child leaves the box wider than its visible
 * contents), so the last control lands on the same 36px edge the wordmark
 * starts from instead of stopping short of it.
 */
.site-header .account-buttons {
  margin-left: 12px;
  justify-content: flex-end;
}

/* The parent gives .user-menu `gap: 16px; margin-right: 32px` and its buttons a
   14px right margin - light-design spacing that would open the cluster past the
   canvas's 12px and hold the last control 32px off the edge. */
.site-header .user-menu { gap: 12px; margin-right: 0; }
.site-header .gns-theme { margin-right: 0; }

@media (max-width: 1100px) {
  .site-header .header-container { padding-left: 20px; padding-right: 20px; }
  .site-header .row.menu-container { margin-left: 24px; }
  .site-header .primary-nav .main-menu,
  .site-header .primary-nav .menu { gap: 20px; }
}

/* ============================================== search: result rows ====== */
/*
 * The live dropdown's rows, shared by BOTH panels the theme opens - the
 * `#search-results` one under the bar's field on desktop, and the
 * `#mobile-search-results` one inside the phone modal below.
 *
 * script.js builds them the same way for both (its renderer around line 820):
 * `.product-search-container > a > img + .product-search-content` with an h1, a
 * p and an h2.price-html inside. Nothing in the redesign had ever reached them,
 * and the parent paints the title `color: #000` - which on desktop was black on
 * the dark `.pop-ups` panel this file already sets, i.e. the product names in
 * the search dropdown were invisible.
 */
.site-header .search-content .product-search-container,
.search-modal .search-content .product-search-container {
  border-bottom: 1px solid var(--gns-border-faint);
}
.site-header .search-content .product-search-container:last-child,
.search-modal .search-content .product-search-container:last-child {
  border-bottom: 0;
}
.site-header .search-content .product-search-container > a,
.search-modal .search-content .product-search-container > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none !important;
}
.site-header .search-content .product-search-container > a:hover,
.search-modal .search-content .product-search-container > a:hover {
  background: var(--gns-elevated);
}
.site-header .search-content .product-search-container img,
.search-modal .search-content .product-search-container img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--gns-elevated);
}
.site-header .search-content .product-search-content,
.search-modal .search-content .product-search-content { min-width: 0; }
.site-header .search-content .product-search-content h1,
.search-modal .search-content .product-search-content h1 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gns-text);
}
/* The description is whatever the creator wrote, so it is clamped rather than
   trusted to be short. */
.site-header .search-content .product-search-content p,
.search-modal .search-content .product-search-content p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gns-secondary-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-header .search-content .product-search-content .price-html,
.search-modal .search-content .product-search-content .price-html {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gns-text);
}
.site-header .search-content > p,
.search-modal .search-content > p {
  margin: 0;
  padding: 16px 12px;
  font-size: 13px;
  color: var(--gns-secondary);
}

/* ============================================== phone search panel ======= */
/*
 * The panel the magnifier in the bar opens on a phone. footer.php renders
 * `.search-modal > .search-box` on every page and nothing in the redesign had
 * ever reached it: it sits OUTSIDE `.site-header`, so the `.pop-ups` rule near
 * the top of this file misses it, and `gns-scope` goes on each screen's root
 * rather than on the footer.
 *
 * What was actually on screen, measured at 440px:
 *
 *   .search-box            the parent's `background: white`, inheriting the
 *                          dark page's #ECEFF4 text - near-white on white
 *   #mobile-search-input   started at x = -32: thirty-two pixels OUTSIDE its
 *                          own panel, because the parent sizes it for the
 *                          700px desktop box
 *   #mobile-search-button  `position: absolute` in the panel's top-right, with
 *                          no relationship to the field it searches
 *   #mobile-search-results `position: absolute; top: 80px`, 414px tall inside a
 *                          153px panel - a white slab hanging off the bottom
 *
 * The three controls become one field row, and the results list flows under it
 * so the panel is one box that grows.
 *
 * PRESENTATION ONLY. #mobile-search-category, #mobile-search-input,
 * #mobile-search-button and #mobile-search-results are all read by name in the
 * parent's script.js, and assets/js/header-search.js binds Enter and the
 * magnifier to the same field. Nothing here renames or moves them in the DOM.
 */
.search-modal { background: rgba(6, 8, 12, .72); }

.search-modal .search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* The parent centres with `translate(-50%, -50%)` against `top: 10%`, so the
     panel drifts upward as it grows. Only the horizontal half is wanted. */
  top: 9vh;
  transform: translate(-50%, 0);
  width: min(94vw, 560px);
  max-height: 82vh;
  padding: 44px 14px 14px;
  overflow-y: auto;
  background: var(--gns-surface);
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  box-shadow: var(--gns-shadow-pop);
  color: var(--gns-body);
}

.search-modal .search-box .close-modal {
  top: 12px;
  right: 12px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--gns-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.search-modal .search-box .close-modal:hover { color: var(--gns-text); }

/*
 * The category select is not shown on a phone. It cost close to a third of the
 * field row for a filter the shop page offers again, in full, one tap later -
 * and the panel reads as one thing to type into once it is the only control
 * beside the magnifier.
 *
 * ⚠️ HIDDEN, not removed. The parent's script.js reads
 * `mobilesearchCategory.value` on every keystroke to build the products
 * request; take the element out of the DOM and that is a TypeError on the
 * first character typed. Removing it for real would mean forking the parent's
 * footer.php, which renders this panel - see the note at the top of this file
 * for why this theme does not do that. Hidden, it keeps reporting its first
 * option, "all", which is the unfiltered request the field already sent
 * whenever nobody touched the select.
 */
.search-modal .search-box .search-categories,
.search-modal .search-box #mobile-search-category {
  display: none;
}

.search-modal .search-box #mobile-search-input {
  flex: 1 1 140px;
  width: auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-pill);
  background: var(--gns-elevated);
  color: var(--gns-text);
  font-family: var(--gns-font);
  font-size: 14px;
  font-style: normal;   /* parent: `.search-box input { font-style: italic }` */
  box-shadow: none;
}
.search-modal .search-box #mobile-search-input::placeholder { color: var(--gns-muted); }
.search-modal .search-box #mobile-search-input:focus {
  outline: none;
  border-color: var(--gns-cyan);
}

/* Back in the flow, at the end of the field row it belongs to. */
.search-modal .search-box #mobile-search-button {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* border: 0, never a transparent one - see the note on .gns-hero__cta. */
  border: 0;
  border-radius: 50%;
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
  font-size: 13px;
  cursor: pointer;
}

/* The list flows under the field instead of hanging off the panel. */
.search-modal .search-box #mobile-search-results {
  flex: 1 1 100%;
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  background: var(--gns-bg);
  color: var(--gns-body);
  box-shadow: none;
}

/*
 * ⚠️ The overlap hack. Inside its `@media (max-width: 767.98px)` block the
 * parent writes -
 *
 *     .search-box .search-categories { width: 145px !important; z-index: 10 }
 *     .search-box input { margin-left: -53px !important; padding-left: 60px !important }
 *
 * - which pulls the field 53px BACK over the category pill so the two overlap,
 * the old light design's fused control. In a flex row that negative margin is
 * what put the input's left edge outside the panel entirely, and it still
 * would with the pill hidden - the margin is on the input, not on the pair.
 * Answered in kind: the parent's declarations are !important.
 */
.search-modal .search-box #mobile-search-input {
  margin-left: 0 !important;
  padding-left: 14px !important;
}

/*
 * ⚠️ `min-width: 0` on all three. A flex item's automatic minimum size is its
 * MIN-CONTENT width, and a result row is an image plus an unwrapped product
 * description - so the list refused to shrink and measured 5437px inside a
 * 414px panel.
 */
.search-modal .search-box #mobile-search-results,
.site-header .search-content .product-search-container,
.search-modal .search-content .product-search-container,
.site-header .search-content .product-search-container > a,
.search-modal .search-content .product-search-container > a {
  min-width: 0;
  max-width: 100%;
}

/* ==================================================== phone bar ========== */
/*
 * The stacked-row layout is set up at `@media (max-width: 782px)` further up
 * this file, but it cannot be finished there: the "canvas metrics" section and
 * its own `@media (max-width: 1100px)` block BOTH sit after it and re-state
 * `margin-left` on the nav row, so a value written in the 782px block is
 * overridden at every phone width. Hence a second phone block, last in the
 * file, where it actually wins. Do not fold these back up.
 *
 * Three things were wrong on a 440px phone:
 *
 *  1. The nav row ran off the page. `.row.menu-container` is `flex-basis: 100%`
 *     once the bar wraps, and the 24px indent above is ADDED to that 100%, so
 *     the row measured 410px starting at x=44 in a 410px content box and the
 *     whole document scrolled sideways.
 *  2. The account cluster floated. It kept `flex: 0 0 auto` and a 12px left
 *     margin, so on its own row it sat at x=32 and ended 83px short of the
 *     right edge - aligned to neither the wordmark above it nor the bar's edge.
 *  3. The four nav links had nowhere to go when they outgrew the row, because
 *     the one-row bar had turned their horizontal scroll off.
 */
@media (max-width: 782px) {
  .site-header .header-container { gap: 10px; row-gap: 6px; }

  /*
   * TWO rows, not three. The bar wrapped into wordmark / controls / links
   * because `.account-buttons` is one box that can only ever be on one line -
   * so the four controls it holds could not be split between the two rows that
   * actually had room for them.
   *
   * `display: contents` dissolves it, exactly as `.border-line` and
   * `.row.logo-container` are dissolved for the desktop bar above, and its
   * children become flex items of `.header-container` that `order` can place
   * individually. No markup change, same as everything else in this file.
   *
   *   row 1   wordmark ......... search  language  theme
   *   row 2   Explore Devices Shop About us ...... Login | Register
   *
   * Row 1 carries only controls whose width is fixed by their icon, so the row
   * holds at any translation; the two things that grow with the language - the
   * nav links and Login/Register - are together on row 2, where the links
   * scroll and Login/Register keeps its width.
   */
  .site-header .account-buttons { display: contents; }

  /*
   * ⚠️ This catch-all first, the four specific items after it: equal
   * specificity, so source order decides. Without it, whatever the cluster
   * carries when SIGNED IN - the avatar, the mini-cart - would keep the
   * default `order: 0` and jump in front of the wordmark.
   */
  .site-header .account-buttons > *      { order: 40; flex: 0 0 auto; }

  /*
   * ⚠️ `margin-right: auto` belongs on the WORDMARK, not on the first control
   * after it. Which control that is changes with the width: the parent hides
   * the desktop `.header-search` and shows `.mobile-search` somewhere under
   * 768px, so an auto margin pinned to either one pushed nothing on the other
   * side of that switch - and two auto margins would have split the slack and
   * centred the row. On the wordmark it holds at every width.
   */
  .site-header .logo                     { order: 10; margin-right: auto; }
  /*
   * The desktop search still renders between 768 and 782px. Without an order in
   * this scheme it kept `order: 2` from the earlier block and sorted BEFORE the
   * wordmark, which put the field on the left of the bar and the logo in the
   * middle of it.
   */
  .site-header .header-search            { order: 11; flex: 0 1 190px; }
  .site-header .mobile-search            { order: 12; }
  .site-header .custom-language-dropdown { order: 14; }
  .site-header .gns-theme                { order: 16; }

  /* The line break between the two rows, so row 2 does not depend on row 1
     happening to be full. A zero-height 100% item ends the flex line. */
  .site-header .header-container::after {
    content: "";
    order: 20;
    flex: 0 0 100%;
    height: 0;
    margin: 0;
  }

  /* Row 2. The nav takes the slack, which leaves Login/Register on the right
     edge without an auto margin that a signed-in cluster would not inherit. */
  .site-header .row.menu-container {
    order: 30;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The links scroll inside their own row rather than pushing the page. */
  .site-header .primary-nav { width: 100%; flex: 1 1 auto; min-width: 0; }
  .site-header .primary-nav .main-menu,
  .site-header .primary-nav .menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header .primary-nav .main-menu::-webkit-scrollbar { display: none; }

  /*
   * The language pill, at the coarse-pointer size set in "language pill"
   * above, measured 99x48 - a quarter of a 440px bar's width, and taller than
   * every other control on it, for a two-item toggle.
   *
   * ⚠️ The comment on that rule says 44px is "the target WCAG 2.2 asks of a
   * control". It is not: 2.5.8 Target Size (Minimum) is AA at 24x24 CSS px,
   * and 44x44 is 2.5.5, which is AAA. 34x30 clears the AA floor with room and
   * still lands well inside the surrounding 10px gaps, so nothing here drops
   * below the level the rest of the theme holds.
   */
  .site-header .custom-language-dropdown .language-options a {
    min-width: 34px;
    height: 30px;
  }
}


/* ========================================================= footer layout ===
   Markup: this theme's footer.php, a fork of the parent's - see the note at
   the top of that file for what changed and why.

   The problem this closes, measured on the home page at 1440px: the footer's
   content ran 25..1400 while every other section on the page sat on the 1180px
   measure at 123..1303. Its left edge was 98px further left than everything
   above it and its band 195px wider, which is what read as the footer being
   "pushed left" - it was not indented, it was on a different grid.

   ⚠️ SCOPING. Everything structural below is UNSCOPED, and that is deliberate:
   footer.php is a fork, so the new markup - three headed columns, the
   newsletter band, the copyright line - renders on every page, while
   `gns-dark-page` is only on the redesigned families (see
   genesys_redesign_is_dark_page). Scoping the grid to that class would have
   left an ordinary WordPress page rendering the new markup with no layout at
   all. Only the REPAINTS stay scoped, so pages still on the old design keep
   the parent's footer palette.
   ========================================================================= */

.footer {
  /*
   * The page's measure, restated locally. `--measure` and `--gutter` are
   * declared on `body.gns-home`, and the footer is global chrome that also
   * renders on the shop, the product page and the reserved area - so it cannot
   * inherit them. Same numbers, own declaration.
   */
  --gns-foot-measure: 1180px;
  --gns-foot-gutter: 36px;

  /* ⚠️ !important cancels an !important: the parent pads the footer element
     itself, which stacked 10px on top of the container's gutter and put the
     footer's left edge 10px inside the page's. The gutter belongs to the
     container, in one place. */
  padding-inline: 0 !important;
}

/* The parent gives both of these `margin: 0 25px; max-width: 1440px`, which is
   the off-measure band. */
.footer .footer-container,
.footer .social-container,
.footer .gns-foot__news {
  /* ⚠️ Both !important, and both cancelling one. Inside its 767.98px block the
     parent sets `width: 100% !important; max-width: 100% !important` on the
     first two - written for a full-bleed footer, and the reason the measure
     did not hold on a phone. */
  width: auto !important;
  max-width: var(--gns-foot-measure) !important;
  margin-inline: auto;
  padding-inline: var(--gns-foot-gutter);
}
.footer .footer-container { padding-block: 56px 0; }

/* ------------------------------------------------------------ the columns - */
/*
 * Brand, then the three link sections. The brand column takes a little more
 * than a link column because it holds an address, not a list of one-liners.
 */
.gns-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.footer .footer-address {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: auto;
  min-width: 0;
  margin: 0;
}
.footer .footer-address h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.footer .footer-address p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
}

/*
 * ⚠️ `display: contents` dissolves `.footer-menus` so its three children become
 * cells of `.gns-foot__top` directly. It also drops the border-top AND
 * border-bottom the parent draws on that box - two rules across the middle of
 * the footer that made the link block read as a table sitting inside it. The
 * headed columns do the separating now.
 */
.footer .footer-menus {
  display: contents;
}
.footer .footer-menu {
  min-width: 0;
  width: auto;
  padding: 0;
  margin: 0;
}
/*
 * ⚠️ Selector length is load-bearing, and the !importants cancel !importants.
 * home.css carries `body.gns-home h1..h4` (0,2,1) - a neutraliser for the
 * parent's all-caps display face - which sets font-family, letter-spacing and
 * `text-transform: none`, and pins the colour with `!important` and
 * `-webkit-text-fill-color`. A plain `.gns-foot__head` (0,1,0) lost to it, so
 * the section headings rendered as ordinary sentence-case text ON THE HOME PAGE
 * ONLY - correct everywhere else, which is exactly how it went unnoticed.
 */
.footer .footer-menu .gns-foot__head {
  margin: 0 0 14px;
  font: 500 10.5px/1 var(--gns-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
.footer .footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer .footer-menu li { margin: 0; }
.footer .footer-menu a {
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none !important;
}

/* ---------------------------------------------------------- the newsletter */
/*
 * ⚠️ The band hides itself when the embed rendered nothing. footer.php prints
 * an empty `_form_N` div plus a script from thegenesys.activehosted.com, and
 * that host is not reachable from every environment - on this stack the div
 * stays empty, and an always-on band would be a rule and ~170px of nothing at
 * the foot of every page. `:has()` re-evaluates when the script fills it, so
 * the band appears the moment there is a form to show.
 */
.gns-foot__news {
  margin-top: 44px;
  padding-block: 32px;
  border-top: 1px solid var(--gns-border-faint);
}
.gns-foot__news:has([class*="_form_"]:empty) { display: none; }
.gns-foot__news .newsletter-signup {
  width: auto;
  padding: 0;
  border-left: 0;   /* the parent's divider belonged to the old two-up row */
}

/* ---------------------------------------------------------- the base line - */

.footer .social-container {
  padding-block: 22px 40px;
  margin-top: 0;
  border-top: 1px solid var(--gns-border-faint);
}
.footer .social-container > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
}
.footer .social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.footer .social-icon img {
  width: 17px;
  height: 17px;
  opacity: .72;
  transition: opacity .15s ease;
}
.footer .social-icon:hover img { opacity: 1; }
/* Same fight as the headings above: `body.gns-home p` is (0,2,1). */
.footer .social-container .gns-foot__legal {
  margin: 0;
  font-size: 12px;
  color: var(--gns-muted);
}

/* ------------------------------------------------------------- repaints --- */
/* Colour only, and scoped: a page still on the old design keeps the parent's
   footer palette, and only gets the layout above. */

body.gns-dark-page .footer { border-top: 1px solid var(--gns-border); }
body.gns-dark-page .footer .footer-address p { color: var(--gns-secondary); }
body.gns-dark-page .footer .footer-menu a { color: var(--gns-secondary) !important; }
body.gns-dark-page .footer .footer-menu a:hover { color: var(--gns-text) !important; }

/* --------------------------------------------------------------- narrow --- */

@media (max-width: 900px) {
  .footer { --gns-foot-gutter: 24px; }
  /* Brand over the links, then the three sections keep their own row. */
  .gns-foot__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .footer .footer-address { grid-column: 1 / -1; }

  /*
   * ⚠️ Un-centre everything. Inside `@media (max-width: 767.98px)` the parent
   * centres the brand block (`.footer-address { align-items: center }`, its
   * paragraph `text-align: center`) and the social row, while the link columns
   * stay left - so the footer had two different alignments stacked on one
   * another. One left edge, at every width; that is the whole point of this
   * section. `margin-bottom` needs !important because the parent's does.
   */
  .footer .footer-address {
    align-items: flex-start;
    margin-bottom: 0 !important;
  }
  .footer .footer-address p { text-align: left; }
  .footer .footer-container,
  .footer .social-container { align-items: stretch; }
  .footer .social-container > .row { align-items: flex-start; }
}

@media (max-width: 620px) {
  .footer { --gns-foot-gutter: 20px; }
  .footer .footer-container { padding-block: 40px 0; }
  /*
   * Two columns, not three. Three sections in a 400px phone leaves each ~117px,
   * and "Hermes: the Communication Hub" needs four lines of it. Two columns run
   * the longest label to two.
   */
  .gns-foot__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .footer .social-container > .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (max-width: 380px) {
  .gns-foot__top { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .footer .social-icon img { transition: none; }
}

/* ============================================= the logo: G + wordmark =======
 * The logo is a lock-up of two pieces - the gradient G, then THE GENESYS - and
 * there is no single asset for it. Every file in the handoff puts
 * `the-GENESYS-grad.svg` (the wordmark, 419x37, no G) in the nav on its own,
 * and `logo-full.png` is the hands mark, which is a different thing again.
 *
 * So it is composed: the <img> is the wordmark, supplied by the attachment
 * filter in functions.php, and the G is this ::before, from the mark that lives
 * in the media library as the site icon and is copied into the theme as
 * assets/image/mark-g.png (512x512, transparent).
 *
 * The proportion is the design's: the G stands about 2.2x the wordmark's
 * height. At the canvas's 11px wordmark that puts the G at 24px, and the pair
 * at 157px wide inside the 62px bar.
 */
.site-header .logo a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
}
.site-header .logo a::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url("../image/mark-g.png") center / contain no-repeat;
}
.site-header .logo img {
  height: 11px;
}

@media (max-width: 782px) {
  /* The phone bar is two rows and tighter; the pair comes down together so the
     G never outgrows the wordmark beside it. */
  .site-header .logo a { gap: 8px; }
  .site-header .logo a::before { width: 21px; height: 21px; }
  .site-header .logo img { height: 10px; }
}