/* ==========================================================================
   GBZ420 - home / category / footer polish - v1, 2026-09-24
   --------------------------------------------------------------------------
   Local copy only: C:\Codex\GBZ420\site (gbz420.test). Production is out of scope.

   Scope (owner request of 2026-09-24, five visual changes):

     1. Home product cards: the VOIR / VIEW action is vertically centred on the
        price row instead of sitting on its baseline (home.css sets
        `align-items: baseline` on `.product-bottom`).

     2. Home section titles (H2 - the owner calls them H1) and the category hero
        H1 are links to the destination of the CTA that used to sit beside them.
        The affordance added here is a small arrow after the title and an
        underline on hover and on keyboard focus. The heading text, size, face
        and case are untouched: only the anchor is styled.

     3. The redundant CTAs and the "GBZ420" eyebrows are removed from the
        Creative Elements documents themselves, not hidden here. Nothing in this
        file hides or suppresses content.

     4. Footer: the decorative chevron the theme prints before every link of a
        `.block-links` column (theme.css `.block-links ul>li a:before`, the
        FontAwesome U+F105 glyph, 3 px slide on hover) is removed. The chevron of
        `.block-toggle > .block-title span::after` is the mobile accordion
        indicator, a disclosure control, and is deliberately NOT touched.

     5. Home lime band only: the product cards take a very light shadow. This is
        the explicit owner exception to the sitewide "no shadow" rule
        (CHARTE-GRAPHIQUE.md section 3.3 rule 4). No other card or band changes.

   Rules kept by this file
     - Tokens are consumed as var(--gbz-*); none is redeclared here.
     - Presentational only: no copy, no price, no link target, no product data.
     - The theme's combined bundle (assets/cache/theme-*.css, which carries
       theme.css and the Creative Elements post CSS) is printed after this file,
       so every override below wins on specificity and never on source order.
     - No !important.
   Owner: home / category / footer polish (2026-09-24).
   ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Home product cards - VOIR / VIEW centred on the price line
 *
 * home.css: `.gbz-product-section .native-products .product-card
 * .product-bottom { align-items: baseline }` (0,4,0) aligns the 12 px action on
 * the 18-30 px price's baseline, which reads low next to the price. Centring the
 * two boxes is what the owner's screenshot asks for. The row keeps
 * `margin-top: auto` and `flex-wrap` from home.css, so card heights and the
 * shell's carousel stretch rules (gbz-shell-v1.css section 5) are unchanged.
 * ----------------------------------------------------------------------- */

body .gbz-section.gbz-product-section .native-products .product-card > .product-bottom {
    align-items: center;
}

/* --------------------------------------------------------------------------
 * 2. Section title / hero H1 as a link
 *
 * The anchor is written by the Creative Elements heading widget, which wraps the
 * whole title - including the hero's `.gbz-hero-mark` highlight - in
 * `<a>`; see includes/widgets/heading.php render().
 *
 * Selector shape matters here: the widget-level classes (`.ce-display-xl` on the
 * home sections, `.gbz-hero-title` on the category hero) sit on the widget WRAPPER,
 * not on the heading. The heading is one level deeper, inside
 * `.elementor-widget-container`:
 *
 *   <div class="elementor-element ce-display-xl elementor-widget elementor-widget-heading">
 *     <div class="elementor-widget-container">
 *       <h2 class="elementor-heading-title"><a href="...">TITLE</a></h2>
 *
 * The v1 file used `.ce-display-xl > .elementor-heading-title > a` (a direct-child
 * chain), which matched nothing: the heading link kept the theme's own anchor colour
 * and no arrow was painted. The selectors below descend instead, and every one of
 * them is asserted against the served markup by
 * docs/sitewide-maquettes-20260921/qa-home-cat-footer-polish-20260924/tools/verify-css-selectors.mjs.
 *
 * Both surfaces inherit the heading colour (`color: inherit`) because the theme
 * paints every anchor with its own blue, and the CE hero sets the colour on
 * `.gbz-hero` itself.
 * ----------------------------------------------------------------------- */

body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a,
body#category .gbz-hero .gbz-hero-title .elementor-heading-title > a {
    color: inherit;
    text-decoration: none;
}

body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a:hover,
body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a:focus-visible,
body#category .gbz-hero .gbz-hero-title .elementor-heading-title > a:hover,
body#category .gbz-hero .gbz-hero-title .elementor-heading-title > a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--gbz-accent);
    text-decoration-thickness: 3px;
    text-underline-offset: .08em;
}

/* On an accent surface the lime underline is invisible, so the same
   underline switches to ink - the pair the charte already uses for lime bands
   (section 3.3: text over lime is black). */
body .gbz-section.gbz-product-section.gbz-section-transparent .ce-display-xl .elementor-heading-title > a:hover,
body .gbz-section.gbz-product-section.gbz-section-transparent .ce-display-xl .elementor-heading-title > a:focus-visible,
body#category .gbz-hero.gbz-hero--lime .gbz-hero-title .elementor-heading-title > a:hover,
body#category .gbz-hero.gbz-hero--lime .gbz-hero-title .elementor-heading-title > a:focus-visible {
    text-decoration-color: var(--gbz-ink);
}

/* Keyboard focus stays visible without a hover. The category hero already ships
   a ring from its own CE sheet (`.gbz-hero a:focus-visible`, 2 px in the hero's
   own ink colour) - it is left as the single source there. Only the home titles,
   which had no rule at all, take one here. */
body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a:focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 4px;
}

/* The arrow: the same small north-east mark the product cards use for VOIR, at
   42 % of the display size. A non-breaking space in the content binds it to the
   last word so it can never be wrapped onto a line of its own, and `middle`
   centres it on the capital height instead of dropping it on the baseline. */
body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a::after,
body#category .gbz-hero .gbz-hero-title .elementor-heading-title > a::after {
    content: "\00A0\2197";
    display: inline-block;
    font-size: .42em;
    line-height: 1;
    margin-left: .16em;
    text-decoration: none;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * 3. Footer - decorative chevrons of the link columns
 *
 * Every column rendered by iqitlinksmanager is `.block-links`, and theme.css
 * prints one absolutely positioned U+F105 chevron at x=0 of each link plus a
 * 3 px slide on hover: five to seven marks per column, on every page. The
 * FOOTER link rules of gbz-shell-v1.css section 3 already zeroed the horizontal
 * padding the glyph was reserving, so hiding the pseudo-element is the whole
 * change and the text does not shift. `content: none` also drops the hover
 * slide. Scope is the footer container: the same `.block-links` component is
 * used by the sitemap page and by checkout, and neither is in this change.
 * ----------------------------------------------------------------------- */

body #footer #footer-container-main .block-links .block-content > ul > li > a::before,
body #footer #footer-container-main .block-links .block-content > ul > li > a:hover::before,
body #footer #footer-container-main .block-links .block-content > ul > li > a:focus::before,
body #footer #footer-container-main .block-links .block-content > ul > li > a:active::before {
    content: none;
    display: none;
}

body #footer #footer-container-main .block-links .block-content > ul > li > a {
    padding-left: 0;
}

/* --------------------------------------------------------------------------
 * 4. Home lime band - very light product shadow
 *
 * Owner exception, lime band only (the section the shop renders with
 * `.gbz-section-transparent`). Two low-opacity layers: a 2 px contact shadow and
 * a wide soft one, both well under a 10 % ink wash, so the band still reads flat
 * and the card edges stay the hairline. Every other card, listing and panel on
 * the site keeps `box-shadow: none`.
 * ----------------------------------------------------------------------- */

body .gbz-section.gbz-product-section.gbz-section-transparent .native-products .product-card {
    box-shadow: 0 2px 6px rgba(16, 16, 16, .07), 0 10px 24px rgba(16, 16, 16, .05);
}

/* --------------------------------------------------------------------------
 * 5. Home product cards, narrow viewports - the discounted price row
 *
 * Mobile QA measured the discounted cards at 390 px: the action's centre sat 23.5 px below the
 * current price's centre, because `.price`, `.regular-price` and the action all share one flex
 * row and only two of them fit, so the third wrapped. Cards without a discount (two items) sit
 * on one line, measuring 0 px of offset.
 *
 * Nothing in the geometry is a surprise once measured: at 360 px the card's inner width is
 * about 134 px, while the three items need 161-168 px on the real rows the three home pages
 * serve (widths from tools/measure-price-row.mjs, which reads the live rows and the real font
 * metrics - Oswald with its Arial fallback for the prices, the self-hosted Karla for the
 * label). Three items cannot share that line with the 18 px price and the 12 px action, so the
 * fix gives the discounted row the same shape as the non-discounted one:
 *
 *   line 1  current price            VOIR / VIEW / ANSEHEN   (right-aligned, as before)
 *   line 2  the struck price, in full
 *
 * Only `order` moves: the DOM order stays price, struck price, action, so the template, the
 * catalogue data and every accessible name are untouched, and the struck price is neither
 * hidden, shortened nor clipped. Its own line is roomy, so it keeps its 15 px size.
 *
 * The narrow band also reclaims the width the 360 px case needs - 8 px instead of 12 px of card
 * padding below 400 px, a 4 px column gap instead of 8 px, and 0.02em of tracking instead of
 * 0.08em on the action label. Measured on the widest row the three home pages actually serve
 * (DE `135,00 €` + `ANSEHEN ↗`, the longest label of the three languages), that is 139.7 px
 * against 142 px of card width at 360 px and 157 px at 390 px: 2.3 px and 17.3 px of margin.
 * With the serving geometry the same row needed 149.5 px against 134 / 149 px, which is why it
 * wrapped. No type size changes anywhere: the price keeps its 18 px floor and the action its
 * 12 px, the floor the charte sets for small text.
 * ----------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    body .gbz-section.gbz-product-section .native-products .product-card > .product-bottom {
        column-gap: 4px;
        row-gap: 2px;
    }

    body .gbz-section.gbz-product-section .native-products .product-card > .product-bottom > .product-view {
        letter-spacing: .02em;
        order: 2;
    }

    body .gbz-section.gbz-product-section .native-products .product-card > .product-bottom > .regular-price {
        flex-basis: 100%;
        order: 3;
    }
}

@media (max-width: 400px) {
    body .gbz-section.gbz-product-section .native-products .product-card {
        padding: 8px;
    }
}

/* --------------------------------------------------------------------------
 * 6. Category anchor offset - the listing anchor under the sticky header
 *
 * Browser QA: on a category page, following a heading that points at `#js-product-list` landed
 * the listing 0.1 px from the top of the viewport, while the sticky header covered the first
 * 60 px at 1440. Browsers scroll a fragment target to the top of the scrollport unless the
 * target declares a scroll margin, so the fix belongs on the target - and one declaration then
 * covers every link that points at it: the three maquette hero H1s and the shared band H1 (the
 * 34 generic categories) all link to the same anchor.
 *
 * The heights are the ones the header owner measured on this copy: the stuck band is 60 px at
 * >= 1200 px and 72 px for the compact band below that; 12 px of gap keeps the first row of
 * cards clear of the header. `scroll-margin-top` is a scroll-position property only - it moves
 * where the jump lands and never touches layout, spacing or the flow of the page.
 *
 * Scoped to `body#category`: the search page carries an element with the same id and is out of
 * this pass. The header's own `--gbz-header-bar-height` (56 px) is declared on the header
 * element and does not inherit down to the listing, and the real stuck heights are the measured
 * 60 / 72 px anyway, so those two values are written out here: this is the single place to
 * change if the header geometry moves again.
 * ----------------------------------------------------------------------- */

body#category #js-product-list {
    scroll-margin-top: calc(72px + 12px);
}

@media (min-width: 1200px) {
    body#category #js-product-list {
        scroll-margin-top: calc(60px + 12px);
    }
}

/* --------------------------------------------------------------------------
 * 7. Linked headings - the whole title is one click target
 *
 * Browser QA: a heading link that wraps is an inline box, painted as one fragment per line.
 * Its bounding rectangle covers the whole block, but the parts of that rectangle no line box
 * reaches are not part of the link: clicking the centre of the rectangle (x 257, y 304 on the
 * measured page, while the second line ends at x 219) lands in whitespace and nothing happens.
 *
 * `display: inline-block` turns the anchor into a single box whose border box spans all of its
 * lines, so the whole visible title area is clickable. Typography and wrapping are untouched:
 * the box is shrink-to-fit - its width is the widest line, capped by the container - the text
 * breaks exactly where it broke before, and `text-align` is inherited, so a centred heading
 * stays centred (the three surfaces below are left-aligned today; the listing's centred rules
 * target product cards, not these headings).
 *
 * The three surfaces that carry a linked heading: the home section H2s (the German THCX title
 * wraps over two lines at mobile widths), the three maquette hero H1s, and the shared band H1
 * of the 34 generic categories. The inline `::after` arrow of section 2 rides along inside the
 * box, so it stays glued to the last word.
 * ----------------------------------------------------------------------- */

body .gbz-section.gbz-product-section .ce-display-xl .elementor-heading-title > a,
body#category .gbz-hero .gbz-hero-title .elementor-heading-title > a,
body#category .gbz-cat-hero__editorial h1 > a {
    display: inline-block;
}