/*!
 * GBZ420 foundation layer - shared design tokens + site-wide component styling
 * Local copy: C:\Codex\GBZ420\site (gbz420.test). Production is out of scope for this phase.
 * Contract : docs/sitewide-maquettes-20260921/DESIGN-CONTRACT.md (sections 3 and 4)
 * Map      : docs/sitewide-maquettes-20260921/TECHNICAL-MAP.md (section 4, single shared token layer)
 * Owner    : integration (foundation phase B1). Loaded once from templates/_partials/head.tpl.
 *
 * Rules for this file:
 *  1. Tokens are declared once, on `body`, and consumed as var(--gbz-*). Nobody else redefines them.
 *  2. Presentational only: no display/position/visibility changes, no wildcard resets, no !important
 *     except the one documented inline-style override on the footer legal line.
 *  3. Checkout is deliberately outside the button/form scope; those pages keep the theme defaults.
 *  4. The legacy green accents (#075F39 / #087747 / #159463) stay in gbz-product-v1..v3.css and
 *     gbz-cart-v1.css until the owning worker replaces them deliberately.
 */

/* ----------------------------------------------------------------------------------------------
 * 0. Self-hosted display face
 *    "GBZ Anton" is Anton (SIL Open Font License 1.1, see
 *    assets/fonts/gbz-display/OFL-Anton.txt), subset to the Latin-1 range plus the punctuation,
 *    currency and typographic marks FR / EN / DE need: 396 glyphs, 12.9 kB WOFF2, served from this
 *    theme - no third-party font host is contacted. It replaces the maquette's heavy condensed
 *    display face (the local Bahnschrift Condensed is noticeably lighter) for the product-page
 *    display type only, declared in gbz-shell-v1.css section 4d. Codepoints Anton does not carry
 *    (for example U+0178, "Ÿ") fall through to the next family in the stack.
 * ------------------------------------------------------------------------------------------- */

@font-face {
    font-family: "GBZ Anton";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/gbz-display/gbz-display-anton-20260923.woff2") format("woff2");
}

/* ----------------------------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------------------------- */

body {
    /* Palette: white surfaces, black bands, one electric-lime accent. */
    --gbz-accent: #D4FA0A;
    --gbz-accent-ink: #000000;
    --gbz-black: #000000;
    --gbz-ink: #101010;
    --gbz-white: #FFFFFF;
    --gbz-surface: #FFFFFF;
    --gbz-surface-alt: #F6F6F6;
    --gbz-muted: #5F5F5F;
    --gbz-on-dark: #FFFFFF;
    --gbz-on-dark-muted: rgba(255, 255, 255, 0.78);

    /* Hairlines replace shadows everywhere in the maquette set. */
    --gbz-hairline-color: #E6E6E6;
    --gbz-hairline-color-strong: #D0D0D0;
    --gbz-hairline: 1px solid var(--gbz-hairline-color);
    --gbz-hairline-strong: 1px solid var(--gbz-hairline-color-strong);
    --gbz-hairline-on-dark: 1px solid rgba(255, 255, 255, 0.18);
    --gbz-shadow: none;

    /* Radii: square panels, full pills for primary actions. */
    --gbz-radius-0: 0;
    --gbz-radius-sm: 2px;
    --gbz-radius-pill: 999px;

    /* Layout: outer gutter and content width. */
    --gbz-container-max: 1320px;
    --gbz-gutter: 16px;

    /* Spacing steps. */
    --gbz-space-1: 4px;
    --gbz-space-2: 8px;
    --gbz-space-3: 12px;
    --gbz-space-4: 16px;
    --gbz-space-5: 24px;
    --gbz-space-6: 32px;
    --gbz-space-7: 48px;
    --gbz-space-8: 64px;

    /* Type scale derived from the live Warehouse tokens: body 1rem/1.25rem, h1-h4 fluid. */
    --gbz-font-body: inherit;
    --gbz-font-display: inherit;
    --gbz-weight-display: 700;
    --gbz-fs-body: 1rem;
    --gbz-lh-body: 1.25rem;
    --gbz-fs-small: 0.875rem;
    --gbz-fs-eyebrow: 0.8125rem;
    --gbz-fs-h1: calc(1.375rem + 1.5vw);
    --gbz-fs-h2: calc(1.325rem + 0.9vw);
    --gbz-fs-h3: calc(1.3rem + 0.6vw);
    --gbz-fs-h4: calc(1.275rem + 0.3vw);
    --gbz-fs-price: 1.5rem;

    --gbz-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    --gbz-focus-ring: 0 0 0 2px var(--gbz-white), 0 0 0 4px var(--gbz-black);
    --gbz-focus-ring-on-dark: 0 0 0 2px var(--gbz-black), 0 0 0 4px var(--gbz-accent);
}

/* ----------------------------------------------------------------------------------------------
 * 2. Reusable helpers (opt-in classes for the family workers; nothing existing uses them yet)
 * ------------------------------------------------------------------------------------------- */

body .gbz-eyebrow {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-eyebrow);
    font-weight: var(--gbz-weight-display);
    line-height: 1.2;
    text-transform: uppercase;
}

body .gbz-display {
    color: var(--gbz-ink);
    font-family: var(--gbz-font-display);
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

body .gbz-card {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
}

body .gbz-hairline {
    border-bottom: var(--gbz-hairline);
}

body .gbz-band--lime {
    background-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

body .gbz-band--black {
    background-color: var(--gbz-black);
    color: var(--gbz-on-dark);
}

body .gbz-chip {
    background-color: var(--gbz-accent);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-accent-ink);
    display: inline-block;
    font-size: var(--gbz-fs-eyebrow);
    font-weight: var(--gbz-weight-display);
    line-height: 1.2;
    padding: var(--gbz-space-1) var(--gbz-space-2);
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------------------------
 * 3. Header and navigation - white utility bar, black main nav band, lime active state
 * ------------------------------------------------------------------------------------------- */

body #header .header-nav {
    border-bottom: var(--gbz-hairline);
}

body #header .header-nav,
body #header .header-nav a {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
}

body #header .header-nav a:hover,
body #header .header-nav a:focus {
    color: var(--gbz-black);
}

/* The megamenu carries the black band of the contract; the theme ships it white with a 10px gap. */
body #header .ets_mm_megamenu {
    background-color: var(--gbz-black);
    margin-top: 0;
}

body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a,
body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > .mm_menu_content_title {
    color: var(--gbz-on-dark);
    font-size: var(--gbz-fs-small);
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a:hover,
body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a:focus,
body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li.active > a {
    color: var(--gbz-accent);
}

/* C4 (2026-09-21): the header mixes light chrome (utility bar #f8f8f8, white logo/search row)
 * with the black nav band. The final visual QA measured the single lime ring at 1.13:1 against
 * those light surfaces (WCAG 2.1 SC 1.4.11 asks for 3:1 on a focus indicator), and the search
 * field had no ring at all (outline:none, 1px #d0d0d0 border = 1.6:1). Dark ring on light
 * chrome, lime ring on the black band - the same split the footer and legal-bar rules use.
 * Corrections C1.6/V-06. */
body #header a:focus-visible,
body #header button:focus-visible,
body #header input:focus-visible,
body #header select:focus-visible,
body #header textarea:focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

body #header .ets_mm_megamenu a:focus-visible,
body #header .ets_mm_megamenu button:focus-visible {
    outline-color: var(--gbz-accent);
}

/* The pre-existing mobile shell rule (#mobile-header-sticky .m-nav-btn:focus-visible in
 * custom.css) paints an orange 3px ring (#ff7a1a, 2.6:1 on the white mobile header) and
 * outranks the header rule above. Keep the theme's ring geometry, take the dark colour. */
body #mobile-header-sticky .m-nav-btn:focus-visible {
    outline-color: var(--gbz-black);
}

body #header .ybc-menu-toggle {
    color: var(--gbz-on-dark);
}

/* ----------------------------------------------------------------------------------------------
 * 4. Footer - white main band with black headings and dark grey text, black legal/cookie bar
 *
 * Correction B1.1 (2026-09-21): all six reference maquettes show a light 5-column footer with
 * black column headings and dark grey body/link text; only the bottom legal/cookie strip is black.
 * The first foundation drop rendered the whole footer black and was rejected in visual review.
 * ------------------------------------------------------------------------------------------- */

body #footer {
    background-color: var(--gbz-surface);
    color: var(--gbz-ink);
}

body #footer .block-title,
body #footer .block-title span {
    color: var(--gbz-black);
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
}

body #footer #footer-container-main .block-content,
body #footer #footer-container-main .contact-rich {
    color: var(--gbz-muted);
}

body #footer .block-links .block-content > ul > li > a,
body #footer .contact-rich a,
body #footer .contact-rich .data {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
}

body #footer .block-links .block-content > ul > li > a:hover,
body #footer .block-links .block-content > ul > li > a:focus,
body #footer .contact-rich a:hover,
body #footer .contact-rich a:focus {
    color: var(--gbz-black);
}

body #footer .contact-rich hr,
body #footer .block {
    border-color: var(--gbz-hairline-color);
}

/* Legal / cookie strip: the only black band inside the footer. */
body #footer #footer-copyrights,
body #footer ._footer-copyrights-1 {
    background-color: var(--gbz-black);
    border-top: var(--gbz-hairline-on-dark);
    color: var(--gbz-on-dark);
}

body #footer #footer-copyrights .copyright-txt,
body #footer ._footer-copyrights-1 .copyright-txt,
body #footer #footer-copyrights a,
body #footer ._footer-copyrights-1 a {
    color: var(--gbz-on-dark-muted);
}

body #footer #footer-copyrights a:hover,
body #footer #footer-copyrights a:focus,
body #footer ._footer-copyrights-1 a:hover,
body #footer ._footer-copyrights-1 a:focus {
    color: var(--gbz-accent);
}

body #footer .gbz-footer-legal {
    /* Single deliberate !important: the legal line carries an inline color:#555 and sits on the
       black legal bar, where that grey is unreadable. The whole rule is scoped to this element. */
    color: var(--gbz-on-dark-muted) !important;
}

/* Focus visibility stays accessible on both surfaces: dark outline on the white band,
   lime outline on the black legal bar. */
body #footer #footer-container-main .block-links .block-content > ul > li > a:focus-visible,
body #footer #footer-container-main .contact-rich a:focus-visible,
body #footer #footer-container-main .block-title a:focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

body #footer #footer-copyrights a:focus-visible,
body #footer ._footer-copyrights-1 a:focus-visible {
    outline: 2px solid var(--gbz-accent);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------------------------
 * 5. Reassurance strip (blockreassurance: hook strip, display block, product block)
 * ------------------------------------------------------------------------------------------- */

body #block-reassurance {
    background-color: var(--gbz-surface);
    border-bottom: var(--gbz-hairline);
    border-top: var(--gbz-hairline);
}

body #block-reassurance li {
    border-color: var(--gbz-hairline-color);
}

body #block-reassurance .block-reassurance-item span {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
}

body .blockreassurance {
    background-color: var(--gbz-surface);
    border-bottom: var(--gbz-hairline);
    border-top: var(--gbz-hairline);
}

body .blockreassurance .block-title {
    color: var(--gbz-ink);
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

body .blockreassurance p {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
}

body .blockreassurance_product__item {
    border-top: var(--gbz-hairline);
}

/* ----------------------------------------------------------------------------------------------
 * 6. Product and listing cards - flat white, hairline border, no shadow
 * ------------------------------------------------------------------------------------------- */

body .product-miniature {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
}

body .product-miniature .product-category-name {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-eyebrow);
    text-transform: uppercase;
}

body .product-miniature .product-title,
body .product-miniature .product-title a {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
    line-height: var(--gbz-lh-body);
}

body .product-miniature .product-title a:hover,
body .product-miniature .product-title a:focus {
    color: var(--gbz-black);
}

body .product-miniature .product-price {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-price);
    font-weight: var(--gbz-weight-display);
}

body .product-miniature .regular-price {
    color: var(--gbz-muted);
}

body .product-miniature .product-flag {
    background-color: var(--gbz-accent);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-accent-ink);
    font-size: var(--gbz-fs-eyebrow);
    text-transform: uppercase;
}

body .product-miniature .btn-product-list,
body .product-miniature .btn-add-to-cart-small,
body .product-miniature .add-to-cart {
    background-color: var(--gbz-black);
    border-color: var(--gbz-black);
    border-radius: var(--gbz-radius-pill);
    color: var(--gbz-white);
}

body .product-miniature .btn-product-list:hover,
body .product-miniature .btn-product-list:focus,
body .product-miniature .add-to-cart:hover,
body .product-miniature .add-to-cart:focus {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

/* Quantity steppers inside a card follow the same hairline language. */
body .product-miniature .input-qty {
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
}

/* ----------------------------------------------------------------------------------------------
 * 7. Buttons - black pills, lime on hover. Checkout is excluded on purpose.
 * ------------------------------------------------------------------------------------------- */

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .btn {
    border-radius: var(--gbz-radius-pill);
    font-weight: var(--gbz-weight-display);
    transition: var(--gbz-transition);
}

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .btn-primary {
    --bs-btn-bg: var(--gbz-black);
    --bs-btn-border-color: var(--gbz-black);
    --bs-btn-color: var(--gbz-white);
    --bs-btn-hover-bg: var(--gbz-accent);
    --bs-btn-hover-border-color: var(--gbz-accent);
    --bs-btn-hover-color: var(--gbz-accent-ink);
    --bs-btn-active-bg: var(--gbz-accent);
    --bs-btn-active-border-color: var(--gbz-accent);
    --bs-btn-active-color: var(--gbz-accent-ink);
    --bs-btn-disabled-bg: var(--gbz-surface-alt);
    --bs-btn-disabled-border-color: var(--gbz-hairline-color);
    --bs-btn-disabled-color: var(--gbz-muted);
}

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .btn-outline-primary,
body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .btn-secondary {
    --bs-btn-bg: var(--gbz-white);
    --bs-btn-border-color: var(--gbz-black);
    --bs-btn-color: var(--gbz-black);
    --bs-btn-hover-bg: var(--gbz-accent);
    --bs-btn-hover-border-color: var(--gbz-black);
    --bs-btn-hover-color: var(--gbz-accent-ink);
    --bs-btn-active-bg: var(--gbz-accent);
    --bs-btn-active-border-color: var(--gbz-black);
    --bs-btn-active-color: var(--gbz-accent-ink);
}

/* Lime call to action for use inside black bands. */
body .gbz-cta,
body .gbz-band--black .btn {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    border-radius: var(--gbz-radius-pill);
    color: var(--gbz-accent-ink);
}

body .gbz-cta:hover,
body .gbz-cta:focus,
body .gbz-band--black .btn:hover,
body .gbz-band--black .btn:focus {
    background-color: var(--gbz-white);
    border-color: var(--gbz-white);
    color: var(--gbz-black);
}

/* ----------------------------------------------------------------------------------------------
 * 8. Forms - square hairline fields with a lime focus ring
 * ------------------------------------------------------------------------------------------- */

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .form-control {
    border-color: var(--gbz-hairline-color-strong);
    border-radius: var(--gbz-radius-0);
    border-style: solid;
    border-width: 1px;
}

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .form-control:focus {
    border-color: var(--gbz-black);
    box-shadow: 0 0 0 2px var(--gbz-accent);
}

body:is(#index, #category, #product, #search, #manufacturer, #supplier, #new-products, #prices-drop,
    #best-sales, #cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) label {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
}

/* ----------------------------------------------------------------------------------------------
 * 9. Page shells - CMS, contact, authentication, cart, empty and error states
 * ------------------------------------------------------------------------------------------- */

body:is(#cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) #content-wrapper,
body:is(#cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) #main {
    color: var(--gbz-ink);
}

body:is(#cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .page-header h1,
body:is(#cms, #contact, #authentication, #registration, #password, #cart, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking, #stores, #sitemap) .page-header .h1 {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-h1);
    font-family: var(--gbz-font-display);
    font-weight: var(--gbz-weight-display);
}

/* Square hairline panels for the shell sections and cart tables (no layout change). */
body:is(#cart, #authentication, #registration, #password, #contact, #cms, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking) #main .page-content,
body:is(#cart, #authentication, #contact, #cms) #main .card,
body:is(#cart, #authentication, #contact, #cms) #main .cart-summary,
body:is(#cart, #authentication, #contact, #cms) #main .cart-detailed,
body:is(#cart, #authentication, #contact, #cms) #main table {
    border-color: var(--gbz-hairline-color);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
}

body:is(#cart, #authentication, #registration, #password, #contact, #cms, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking) #main table th {
    border-bottom: var(--gbz-hairline-strong);
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
    text-transform: uppercase;
}

body:is(#cart, #authentication, #registration, #password, #contact, #cms, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking) #main table td {
    border-bottom: var(--gbz-hairline);
}

/* Empty and error states keep their markup; only the panel language changes. */
body#cart.cart-empty #main .cart-empty,
body#cart.cart-empty #main .page-content,
body#pagenotfound #main .page-content,
body#pagenotfound #main .page-not-found {
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
}

body#pagenotfound #main .page-header h1,
body#cart.cart-empty #main h4 {
    color: var(--gbz-ink);
    font-family: var(--gbz-font-display);
    font-weight: var(--gbz-weight-display);
}

body:is(#cart, #authentication, #registration, #password, #contact, #cms, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking) #main a:focus-visible,
body:is(#cart, #authentication, #registration, #password, #contact, #cms, #pagenotfound,
    #my-account, #order-confirmation, #guest-tracking) #main button:focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------------------------
 * 10. Small screens - keep the strips readable without inventing new layout
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
    body #block-reassurance .block-reassurance-item span,
    body .blockreassurance p {
        font-size: var(--gbz-fs-small);
    }

    body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a,
    body #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > .mm_menu_content_title {
        font-size: var(--gbz-fs-body);
    }
}