/* FAQ module: same level-B typography and accordion treatment as public pages.
   Scope deliberately excludes product FAQ embeds and all maquette pages. */
body#module-ets_faq-faqs #main .title_block,
body#module-ets_faq-faqs #main .faq_group_title,
body#module-ets_faq-faqs #main .faq_question_name {
    font-family: "GBZ Anton", "Bahnschrift Condensed", "Arial Narrow", Karla, sans-serif;
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
    color: var(--gbz-ink);
    overflow-wrap: anywhere;
}
body#module-ets_faq-faqs #main .title_block {
    font-size: clamp(30px, 3.6vw, 56px);
    line-height: 1.02;
}
body#module-ets_faq-faqs #main .title_block::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: var(--gbz-space-3);
    background: var(--gbz-accent);
}
body#module-ets_faq-faqs #main .faq_group_title {
    font-size: clamp(22px, 1.8vw, 30px);
    line-height: 1.2;
}
body#module-ets_faq-faqs #main .faq_question_name {
    min-height: 44px;
    font-size: 22px;
    line-height: 1.25;
    padding: 14px 40px 14px 16px;
}
body#module-ets_faq-faqs #main .faq_question_li {
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: none;
}
body#module-ets_faq-faqs #main .faq_nav_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    color: var(--gbz-ink);
}
body#module-ets_faq-faqs #main .faq_group_li.open .faq_nav_link,
body#module-ets_faq-faqs #main .faq_nav_link:hover {
    background: var(--gbz-accent);
    color: var(--gbz-black);
}
body#module-ets_faq-faqs #main .faq_answer {
    color: var(--gbz-ink);
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   GBZ420 - public page families without a maquette - v1, 2026-09-23
   --------------------------------------------------------------------------
   Families covered, each qualified by the real body id observed on
   http://gbz420.test on 2026-09-23 (status + body id checked, not the URL):
     #cms (CMS pages and CMS category), #contact, #sitemap, #stores,
     #search (with and without results), #new-products, #prices-drop,
     #best-sales, #manufacturer, #supplier, #pagenotfound,
     #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single.

   What it does: applies the sitewide charter (docs/sitewide-maquettes-20260921/
   CHARTE-GRAPHIQUE.md, level B "extension prudente") to the families that have
   no maquette - display H1/H2 ("GBZ Anton", uppercase, bold), the black / white
   / lime palette through the existing tokens, hairline separations, flat square
   panels and a visible focus ring. No hero, no band, no markup change and no
   layout invention: typography, hairlines and surface treatment only.

   Rules for this file:
    1. Every rule is qualified by a real body id, so the mocked families (home,
       category / Prime, product, cart, checkout, account) and the shared shell
       are not touched.
    2. Tokens are consumed as var(--gbz-*), never redeclared here.
       gbz-tokens.css and gbz-shell-v1.css are not modified by this phase.
    3. Presentational only: no display/visibility change, no wildcard reset and
       no !important. Where the theme's combined stylesheet loads after this
       file, the body-id qualifier is what carries the rule.
    4. The display stack is repeated literally (the same stack gbz-shell-v1.css
       section 4d uses for the product page) because --gbz-font-display is
       declared as `inherit` and therefore resolves to the theme body font.

   Load point: templates/_partials/head.tpl, after gbz-listing-bar-v1.css.
   Owner: public-pages charter phase (2026-09-23).

   Additions of the 2026-09-24 public visual fixes pass:
     * section 5 - the submit control of the contact form reaches the 44 x 44
       touch floor of charte 4.4 / 9.11 (measured 87 x 35 px at 1440 and
       75 x 30 px at 390 before the pass);
     * section 8 - the author CTA of a blog post reaches the same floor, and the
       long source URLs of a post stop overflowing the document on the narrow
       widths (measured 158 x 30 px for the CTA, and +31 / +61 px of document
       width in English at 390 / 360 and +31 px in German at 390);
     * section 12 - the mobile cart-count badge takes the charte ink. It is the
       one rule of this sheet that is not keyed on a page family, because the
       element belongs to the shared header: see the note inside the section.
       The shared header sheet belongs to the header-relayout phase, so the
       correction ships here, where head.tpl loads after it.
   ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Page title (H1) - display face, uppercase, big and bold
 *
 * Sizes: clamp(30px, 3.6vw, 56px) -> 51.8px at 1440 and the 30px floor at 390,
 * the two bounds the charter fixes for a page title (section 4.4 / criterion 10).
 * The short lime rule under the title is the maquette's "souligne lime sous le
 * titre" (section 4.2); it is 3px high and adds no block.
 * ----------------------------------------------------------------------- */

body:is(#cms, #contact, #sitemap, #stores, #search, #new-products, #prices-drop, #best-sales,
    #manufacturer, #supplier, #pagenotfound, #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single)
    #main .page-title {
    color: var(--gbz-black);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(30px, 3.6vw, 56px);
    font-weight: var(--gbz-weight-display);
    letter-spacing: 0;
    line-height: 1.02;
    margin-bottom: var(--gbz-space-4);
    text-transform: uppercase;
}

body:is(#cms, #contact, #sitemap, #stores, #search, #new-products, #prices-drop, #best-sales,
    #manufacturer, #supplier, #pagenotfound, #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single)
    #main .page-title::after {
    background-color: var(--gbz-accent);
    content: "";
    display: block;
    height: 3px;
    margin-top: var(--gbz-space-3);
    width: 56px;
}

/* gbz-tokens.css section 9 carries a 404-specific rule
   (`body#pagenotfound #main .page-header h1`, specificity 2-1-2) that outranks the
   generic page-title rule above and re-points font-family at the theme body font.
   The extra class keeps the display face on this one heading without touching the
   token file. */
body#pagenotfound #main .page-header .page-title,
body#pagenotfound #main .page-header h1 {
    color: var(--gbz-black);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * 2. Section headings (H2/H3) - same display face, one step down, hairline
 *    separation underneath. Scoped to the long-form surfaces that carry their
 *    own headings: CMS body copy, contact form, sitemap columns, store card,
 *    blog post body and the blog "related products" title.
 * ----------------------------------------------------------------------- */

body#cms #main h2,
body#contact #main h2,
body#module-ph_simpleblog-single #main .simpleblog__post__content h2,
body#module-ph_simpleblog-single #main .simpleblog__post__content h3,
body#module-ph_simpleblog-single #main .section-title,
body#sitemap #main .block-title,
body#stores #main .store-description .card-title {
    border-bottom: var(--gbz-hairline);
    color: var(--gbz-black);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(20px, 1.8vw, 30px);
    font-weight: var(--gbz-weight-display);
    letter-spacing: 0;
    line-height: 1.06;
    margin-bottom: var(--gbz-space-4);
    margin-top: var(--gbz-space-7);
    padding-bottom: var(--gbz-space-2);
    text-transform: uppercase;
}

/* The first heading of a CMS body, of the contact form and of a blog post sits
   directly under the page title: it keeps the hairline but not the big gap. */
body#cms #main h2:first-child,
body#contact #main .page-content h2:first-child,
body#module-ph_simpleblog-single #main .simpleblog__post__content h2:first-child,
body#module-ph_simpleblog-single #main .simpleblog__post__content h3:first-child {
    margin-top: 0;
}

/* Group titles inside the sitemap columns and inside the store card are close
   to their own content, so they take the tighter step. */
body#sitemap #main .block-title,
body#stores #main .store-description .card-title {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
 * 3. CMS body copy - light grey rules out of the merchant HTML are pulled back
 *    onto the hairline token so the long pages read as one system. No content,
 *    no heading text and no inline style is changed.
 * ----------------------------------------------------------------------- */

body#cms #main .page-content {
    color: var(--gbz-ink);
}

body#cms #main .page-content p,
body#module-ph_simpleblog-single #main .simpleblog__post__content p {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    line-height: 1.6;
}

body#cms #main .page-content hr,
body#module-ph_simpleblog-single #main .simpleblog__post__content hr {
    border-color: var(--gbz-hairline-color);
    border-style: solid;
    border-width: 1px 0 0;
    margin: var(--gbz-space-6) 0;
}

body#cms #main .page-content ul,
body#cms #main .page-content ol {
    color: var(--gbz-ink);
    line-height: 1.6;
}

body#cms #main .page-content a,
body#module-ph_simpleblog-single #main .simpleblog__post__content a {
    color: var(--gbz-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body#cms #main .page-content a:hover,
body#cms #main .page-content a:focus,
body#module-ph_simpleblog-single #main .simpleblog__post__content a:hover,
body#module-ph_simpleblog-single #main .simpleblog__post__content a:focus {
    color: var(--gbz-black);
}

/* --------------------------------------------------------------------------
 * 4. Listing surfaces (search, new products, promotions, best sellers, brands)
 *    - count / sort row as a hairline band, sober empty state, brand tiles.
 *    The product cards themselves are already charter-styled sitewide by
 *    gbz-tokens.css section 6 and are not restated here.
 * ----------------------------------------------------------------------- */

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main .products-selection {
    align-items: center;
    border-bottom: var(--gbz-hairline);
    border-top: var(--gbz-hairline);
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
    margin-bottom: var(--gbz-space-5);
    padding-bottom: var(--gbz-space-3);
    padding-top: var(--gbz-space-3);
}

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main .products-selection .showing {
    color: var(--gbz-muted);
}

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main .products-selection .view-switcher a {
    color: var(--gbz-ink);
}

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main .products-selection .view-switcher a.current {
    color: var(--gbz-black);
}

/* Empty state: the stock Bootstrap yellow alert breaks the black / white / lime
   palette, so it becomes a flat hairline panel with the display face on the
   message. Wording and markup stay the shop's own. */
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main #products > .alert {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    color: var(--gbz-ink);
    padding: var(--gbz-space-5);
}

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier)
    #main #products > .alert strong {
    color: var(--gbz-black);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

/* Brand tiles (manufacturer / supplier index): flat hairline frame, name in the
   display face, no shadow. */
body:is(#manufacturer, #supplier) #main .ms-grid .brand {
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
}

body:is(#manufacturer, #supplier) #main .ms-grid .brand .brand-infos a {
    color: var(--gbz-ink);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
}

body:is(#manufacturer, #supplier) #main .ms-grid .brand .brand-infos a:hover,
body:is(#manufacturer, #supplier) #main .ms-grid .brand .brand-infos a:focus {
    color: var(--gbz-black);
}

/* --------------------------------------------------------------------------
 * 5. Contact - information panel on the hairline language, form title in the
 *    display face. The form controls themselves stay with gbz-tokens.css
 *    section 8 (square hairline field, lime focus).
 * ----------------------------------------------------------------------- */

body#contact #main .contact-page-info .contact-rich {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    padding: var(--gbz-space-5);
}

body#contact #main .contact-page-info .contact-rich strong {
    color: var(--gbz-black);
    display: block;
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: var(--gbz-weight-display);
    text-transform: uppercase;
}

body#contact #main .contact-page-info .contact-rich hr {
    border-color: var(--gbz-hairline-color);
    border-style: solid;
    border-width: 1px 0 0;
    margin: var(--gbz-space-4) 0;
}

body#contact #main .contact-page-info .contact-rich .data {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
}

body#contact #main .contact-page-info .contact-rich .data a {
    color: var(--gbz-ink);
}

body#contact #main .contact-page-info .contact-rich .icon {
    color: var(--gbz-black);
}

/* The submit control of the contact form is the page CTA, so it takes the 44 x
   44 floor of charte 4.4 and 9.11 ("zone tactile de CTA et d'accordeon d'au
   moins 44 x 44 px"), the same floor the account and checkout passes applied.
   Measured before this pass: 87 x 35 px at 1440 and 75 x 30 px at 390, in the
   three languages (the label, the black fill, the white ink and the pill radius
   are untouched; only the box grows). The selector names the widget's own
   `section.contact-form > form > footer.form-footer`, so no other form of the
   shop - and not the third-party tracking form - can match it. */
body#contact #main section.contact-form > form > .form-footer [type="submit"] {
    min-height: 44px;
    min-width: 44px;
}

/* --------------------------------------------------------------------------
 * 6. Sitemap - column titles and link lists on the hairline language.
 * ----------------------------------------------------------------------- */

body#sitemap #main .block-links ul > li > a {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
}

body#sitemap #main .block-links ul > li > a:hover,
body#sitemap #main .block-links ul > li > a:focus {
    color: var(--gbz-black);
}

/* --------------------------------------------------------------------------
 * 7. Stores - one flat hairline card per store, opening hours in the same
 *    hairline table language gbz-tokens.css section 9 uses for page tables.
 * ----------------------------------------------------------------------- */

body#stores #main .store-item {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    margin-bottom: var(--gbz-space-5);
    padding: var(--gbz-space-5);
}

body#stores #main .store-description address {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
    line-height: 1.6;
}

body#stores #main .store-item table th {
    border-bottom: var(--gbz-hairline-strong);
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
    text-transform: uppercase;
}

body#stores #main .store-item table td {
    border-bottom: var(--gbz-hairline);
}

body#stores #main #about-1 {
    border-top: var(--gbz-hairline);
}

/* --------------------------------------------------------------------------
 * 8. Blog (ph_simpleblog) - listing cards and single post. The module owns its
 *    markup and its own stylesheet; only surfaces and type are aligned.
 * ----------------------------------------------------------------------- */

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .simpleblog__listing__post__wrapper.cardblog {
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    margin-bottom: var(--gbz-space-6);
}

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .post-title,
body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .post-title a {
    color: var(--gbz-ink);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: var(--gbz-weight-display);
    line-height: 1.12;
}

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .post-title a:hover,
body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .post-title a:focus {
    color: var(--gbz-black);
}

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .simpleblog__listing__post__wrapper__content {
    padding: var(--gbz-space-5);
}

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .simpleblog__listing__post__wrapper__content__readmore {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
}

body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .simpleblog__listing__pagination {
    border-top: var(--gbz-hairline);
    padding-top: var(--gbz-space-4);
}

body#module-ph_simpleblog-single #main .simpleblog__postInfo {
    border-bottom: var(--gbz-hairline);
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
    padding-bottom: var(--gbz-space-3);
}

body#module-ph_simpleblog-single #main .simpleblog__post__content {
    color: var(--gbz-ink);
}

/* The author card carries the id `blog-author` (the module renders it as
   div#blog-author.cardblog.author-card), so it is matched on that id. */
body#module-ph_simpleblog-single #main #blog-author.cardblog {
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    padding: var(--gbz-space-5);
}

/* The only control of that card - "See the author's articles" / "Voir les
   articles de l'auteur" / the German label - is a CTA like any other, so it
   takes the 44 x 44 floor of charte 4.4 and 9.11. Measured before this pass:
   158 x 30 px at 390 and 360, 35 px high at 1440. It stays floated to the right
   of the card, keeps its label, its black fill and its white ink; the label is
   centred in the taller box rather than top-aligned. */
body#module-ph_simpleblog-single #main #blog-author.cardblog .authorMiniature__btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
}

/* Long source URLs. The articles of the blog end with a SOURCES list whose
   anchors print the full URL, and the theme leaves `overflow-wrap` and
   `word-break` at `normal`, so an anchor whose path has no break opportunity
   widens the whole document on a phone. Measured on the served pages of
   2026-09-24: the English guide `space-cake-effects` overflowed by 31 px at 390
   and 61 px at 360, the German `haschkekse-wirkung` by 31 px at 390; the widest
   element was always the `canada.ca` anchor of the list. `overflow-wrap` is an
   inherited property, so the container rule reaches the anchors, the list items
   and the paragraphs; the explicit anchors rule keeps the value on the element
   itself, whatever the combined theme bundle declares on `a`. No URL, no label
   and no content of the articles is rewritten by this pass. */
body#module-ph_simpleblog-single #main .simpleblog__post__content {
    overflow-wrap: anywhere;
}

body#module-ph_simpleblog-single #main .simpleblog__post__content a,
body#module-ph_simpleblog-single #main .simpleblog__post__content li,
body#module-ph_simpleblog-single #main .simpleblog__post__content p {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * 9. 404 - the panel itself is already charter-styled by gbz-tokens.css
 *    section 9; this adds the display face to the message and quiet copy.
 * ----------------------------------------------------------------------- */

body#pagenotfound #main .page-content {
    padding: var(--gbz-space-6);
}

body#pagenotfound #main .page-content h4 {
    color: var(--gbz-black);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(20px, 1.8vw, 30px);
    font-weight: var(--gbz-weight-display);
    line-height: 1.06;
    text-transform: uppercase;
}

body#pagenotfound #main .page-content p {
    color: var(--gbz-muted);
}

/* --------------------------------------------------------------------------
 * 10. Focus visibility - gbz-tokens.css section 9 already covers #cms,
 *     #contact and #pagenotfound; the families below get the same dark ring on
 *     the white surfaces they render.
 * ----------------------------------------------------------------------- */

body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main a:focus-visible,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main button:focus-visible,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main input:focus-visible,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main select:focus-visible,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main textarea:focus-visible,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #sitemap, #stores,
    #module-ph_simpleblog-list, #module-ph_simpleblog-category, #module-ph_simpleblog-single) #main [tabindex]:focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 11. Small screens - the charter's mobile bounds. The page title keeps its
 *     30px floor (section 4.4); the store card keeps the vertical stack the
 *     theme already renders below 768px and only the hairline divider comes
 *     back when the two columns sit side by side.
 * ----------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:is(#cms, #contact, #sitemap, #stores, #search, #new-products, #prices-drop, #best-sales,
        #manufacturer, #supplier, #pagenotfound, #module-ph_simpleblog-list, #module-ph_simpleblog-category,
        #module-ph_simpleblog-single) #main .page-title {
        font-size: 30px;
        line-height: 1.04;
    }

    body#stores #main .store-item {
        padding: var(--gbz-space-4);
    }
}

@media (min-width: 768px) {
    body#stores #main .store-item .divide-left {
        border-color: var(--gbz-hairline-color);
    }
}

/* Native cards outside the maquette pages still inherited 14px Karla from
   Warehouse. Match the display treatment without touching home/category/PDP. */
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #module-ph_simpleblog-single)
    #main .product-miniature .product-title,
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #module-ph_simpleblog-single)
    #main .product-miniature .product-title a {
    color: var(--gbz-ink);
    font-family: "GBZ Anton", "Bahnschrift Condensed", "Arial Narrow", Karla, sans-serif;
    font-size: 20px;
    font-weight: var(--gbz-weight-display);
    line-height: 1.25;
    text-transform: none;
    overflow-wrap: anywhere;
    height: auto;
}
body:is(#search, #new-products, #prices-drop, #best-sales, #manufacturer, #supplier, #module-ph_simpleblog-single)
    #main .product-miniature .product-price {
    font-family: "GBZ Anton", "Bahnschrift Condensed", "Arial Narrow", Karla, sans-serif;
    font-size: 24px;
    line-height: 1.2;
}

/* Keep the blog cover aligned with its card without stretching its aspect ratio. */
body:is(#module-ph_simpleblog-list, #module-ph_simpleblog-category) #main .cardblog > a > img.photo {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
 * 12. The cart-count badge of the shared mobile bar - charte ink, not white
 *
 * Charte 3.3.2: white text on the lime flat is forbidden (1.20:1); the badge
 * carries black ink. Measured on the served cart page at 390 before this pass:
 * `span#mobile-cart-products-count.cart-products-count-btn` is 16 x 16 px, its
 * background is rgb(212, 250, 10) and its text is rgb(255, 255, 255). The same
 * element is `d-none` on the desktop band, so the defect only exists below
 * 1200 px.
 *
 * The white ink does not come from the theme bundle: gbz-header-v1.css already
 * asks for #000 on `... #mobile-header-sticky .cart-products-count-btn`
 * (0-2-1-1), but the white of its own `... #mobile-header-sticky .m-nav-btn span`
 * (0-2-1-2) outranks it. The extra class below (0-2-2-1) is what lets the badge
 * win; the fill, the size, the position and the toggle around it are untouched.
 *
 * Placement: the element belongs to the shared header, whose sheet is owned by
 * the header-relayout phase, so the correction ships from this sheet - head.tpl
 * loads it after gbz-header-v1.css on every layout. This is the only rule of
 * this file that is not keyed on a page family, and it is keyed on the mobile
 * bar (`#mobile-header-sticky`) so the desktop band, the side cart and every
 * other control keep their own colours. The desktop badge of `.header-cart-btn`
 * (white ink on the black band) is deliberately out of scope.
 * ----------------------------------------------------------------------- */

body #header #mobile-header-sticky .m-nav-btn .cart-products-count-btn,
body #header #mobile-header-sticky #mobile-cart-products-count {
    background-color: var(--gbz-accent, #d4fa0a);
    color: var(--gbz-black, #000);
}