/*
Theme Name:   Bw Printxtore Child
Theme URI:    https://bw-printxtore.bzotech.com/intro/
Author:       The BZOTech
Author URI:   https://bzotech.com/
Description: PrintXtore - A stunning WooCommerce WordPress theme with a flexible style for online product design and printing services!
Template:     bw-printxtore
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: art prints, artist gallery, online design, poster, print, print on demand, print shop, print store, printing, printshop, product design, product designer, t-shirt, T-shirt Designer
Text Domain: bw-printxtore-child
*/

/* ── Slider Hero: Editorial + Tagline responsive design ── */

/* ponytail: full-bleed scrim on ALL breakpoints (not media-gated) — headline/CTA layers on
   every slide sit in the vertical-middle/top band, never the bottom, so the previous
   bottom-anchored gradient (transparent top 30% -> dark bottom, tablet/mobile only) left
   the actual text zone unprotected on every slide and left desktop with zero scrim at all.
   Flat rgba(0,0,0,.6) guarantees white (#fff) headline text stays >=4.5:1 even against a
   blown-out near-white photo highlight (measured worst-case bg pixel pre-fix: rgb(234,233,238),
   contrast as low as 1.2:1). z-index:2 sits below the RevSlider text/CTA layer groups
   (inline z-index 5/7), so no !important needed to win the stack. */
rs-slide {
    overflow: hidden;
}

/* Homepage FAQ: the widget enlarges the icon wrapper to 44px, while the theme
   leaves the Font Awesome glyph absolutely positioned in a 32px box. Make the
   glyph fill the wrapper so plus/minus are geometrically centred. */
.home .elementor-element-a5011c6 .box-icon-accor.item-icon-e {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    position: relative;
}
.home .elementor-element-a5011c6 .box-icon-accor.item-icon-e > i {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    text-align: center;
}
.home .elementor-element-a5011c6 .box-icon-accor.item-icon-e > i::before {
    line-height: 1;
}
rs-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 2;
}

/* ponytail: selector was `.rev_slider ...` but RevSlider 6.6.21's real DOM root is
   `<rs-module id="rev_slider_1_1">` — `.rev_slider` class does not exist in this version,
   so every rule below using it was dead CSS (never matched). Fixed to `rs-module`. */

/* Pill CTA buttons */
rs-module .tp-button,
rs-module .elbzotech-bt-global-default,
rs-module .btn-slide1,
rs-module .btn-slide2 {
    border-radius: 24px !important;
}

/* ponytail: !important needed — theme's global `a { color }` rule wins over the RevSlider
   layer's inherited idle.color (inheritance is always the weakest cascade origin, so any
   element-selector color rule beats it). "Get a Quote" was rendering at rgb(45,49,80),
   near-invisible against the dark scrim (measured ~1:1 contrast) until this override. */
rs-module .btn-slide2 {
    color: #ffffff !important;
    pointer-events: auto !important;
}

/* ── Entrance-animation anti-blank fallback (Ledger #3) ── */

/* ponytail: fail-open — Elementor's own IntersectionObserver-driven JS (frontend.js
   GlobalHandler.onInit/animate, elementor/assets/js/frontend.js) is the only thing that
   ever removes `.elementor-invisible` (base rule: visibility:hidden, elementor frontend
   CSS). If that script never loads/executes for ANY reason (blocked, JS fully disabled,
   plugin conflict, runtime error earlier in the page) the element stays hidden forever —
   confirmed live: 12 top-level Elementor containers on the homepage carry this class,
   and with elementor-frontend.js blocked (while the theme's own script.js still runs
   fine) the entire mid-page content (banner-info block, USP rows, category grid) renders
   permanently blank — see docs/superpowers/backups/before-3-desktop.jpeg.
   The naive fix (`.elementor-invisible{visibility:visible!important}`) was tested and
   rejected: forcing visibility on unconditionally makes content appear instantly on
   every load, so the real entrance animation (JS adds `.animated <name>` right as it
   removes this class) never gets to run even when JS works fine — it kills the feature
   instead of just guarding it.
   This version is a pure-CSS, JS-independent timeout: if JS is working, its own
   IntersectionObserver removes `.elementor-invisible` (usually well under 1s once an
   element scrolls into view), the selector below stops matching, and the CSS animation
   is cancelled before it ever fires — Elementor's real entrance animation plays
   untouched. If JS never removes the class, this 3s delayed keyframe (fill-mode:
   forwards) reveals the element anyway, so no section can stay blank permanently.
   Known tradeoff: a visitor who takes >3s to scroll down to a below-the-fold section
   on a page where JS is fully working would see it pre-revealed instead of animating in
   — accepted as a last-resort safety net per spec (Task 3), not a routine occurrence
   since IntersectionObserver fires immediately once an element enters the viewport. */
@keyframes ponytail-elementor-invisible-failopen {
    to { visibility: visible; }
}
.elementor-invisible {
    animation: ponytail-elementor-invisible-failopen 0.01s 3s forwards;
}
/* ponytail: reduced-motion users skip straight to the fail-open visible state */
@media (prefers-reduced-motion: reduce) {
    .elementor-invisible { animation: none; }
}

/* ── Token drift: unify brand tokens (Ledger #4) ── */

/* ponytail: canonical pink = #c40390, the H1/logo pink (also the Elementor Kit "Primary"
   global color, post 88230) — already the most-used pink on the page (8+ occurrences:
   H1 headline, tagline, main-color spans, mini-cart badge bg, slide-1 CTA pill bg, 3x
   list-text-info icon bg). ≤4-step radius scale capped at r-pill for anything that renders
   as a full circle (border-radius clamps to box-size/2 regardless of the declared px value
   once it's >= half the box, so 40px/50%/100% on these square icon/button boxes are all
   visually identical to r-pill — safe like-for-like swap, zero shape change). */
:root {
    --hype-pink: #c40390;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 24px;
    --r-pill: 999px;
}

/* Off-brand pink #1 (#d52786) -> canonical. Two independent sources, both scoped to the
   exact selectors found live (no blanket override):
   1) DB-stored "Header Footer Code Manager" CSS snippet (wp_hfcm_scripts id=4, not in any
      theme/plugin file, only discoverable via DB — sets #entelech-float-btn + its two
      hidden quick-link icons to #d52786 directly).
   2) Elementor widget element-0e2d825 ("View Promotional Products" button) has its own
      background-color set to the Elementor Kit "Accent" global color (#D52786, Kit post
      88230) — a near-duplicate global color swatch, distinct from "Primary" (#C40390) that
      every other pink element on the page uses. Root cause is at Kit level; not changed
      here (out of this file's scope + site-wide blast radius) — flagged for follow-up.
   !important needed on both: HFCM's snippet loads after this stylesheet in <head>, and
   Elementor's kit-color CSS carries its own specificity from a generated rule. */
#entelech-float-btn,
.entelech-phone-btn,
.entelech-form-btn {
    background-color: var(--hype-pink) !important;
}
.elementor-element-0e2d825 a.elementor-button {
    background-color: var(--hype-pink) !important;
}

/* Off-brand pink #2 (#e91e8c) -> canonical. RevSlider writes this as an inline style via
   its layer JS (layer-100, the "CUSTOM APPAREL" eyebrow label on slide 1) — !important
   needed to beat the inline style. Slides 2/3 have an equivalent eyebrow layer (layer-200
   "CORPORATE GIFTS", layer-300 "PROMO PRODUCTS") but RevSlider only paints a layer's real
   inline color once that slide has been active — at page load they show computed
   rgb(102,102,102) (uninitialized placeholder), so their true configured color could not
   be verified live without triggering a slide change; not touched here since it's
   unconfirmed and slide-layer color config lives in RevSlider's DB tables, outside this
   file's CSS-only scope. */
#slider-1-slide-1-layer-100 {
    color: var(--hype-pink) !important;
}

/* Radius consolidation: 12 distinct radius values/combos measured live -> mapped down to
   the nearest of the 4 canonical steps, on the specific selectors that used them (no
   blanket radius override). !important is required throughout this block: the bzotech
   parent theme enqueues its own per-widget-type stylesheets (e.g. bzotech-el-search-css,
   bzotech-el-mini-cart-css, bzotech-el-account-css — one file per Elementor widget type
   present on the page) AFTER this child style.css, each re-declaring these exact
   plain-class selectors at equal specificity — confirmed live: without !important the
   later-loaded bzotech file always won and none of these rules took effect. The 2px
   grecaptcha-badge radius is left untouched: third-party Google widget, outside brand
   control. */
#entelech-float-btn {
    border-radius: var(--r-sm) !important; /* was 8px */
}
a.elementor-button.elementor-button-link.elementor-size-lg,
.product-thumb.attribute-close.product,
a.adv-thumb-link.elementor-animation- {
    border-radius: var(--r-sm) !important; /* was 5px */
}
.elbzotech-search-global-form,
.elbzotech-search-global-form input,
.elbzotech-banner-info-global-thumb,
.elbzotech-banner-info-global-thumb img,
a.button-inner.icon-off.elbzotech-bt-global-style2,
a.button-inner.icon-on.elbzotech-bt-global-default,
h2.list-text-info__item.elbzotech-bt-global-default,
a.product-thumb-link.translate-thumb,
.bzoteche-info-box-global-,
[class^="attachment-"].size-460x307,
img[class*="460x307"],
.elbzotech-accordion .ui-corner-top,
.elbzotech-accordion .ui-corner-bottom {
    border-radius: var(--r-lg) !important; /* was 22px / 26px / 30px */
}
a.mini-cart-link,
i.la.la-close.elbzotech-close-popup,
span.mini-cart-number-e,
rs-arrow.tp-leftarrow,
rs-arrow.tp-rightarrow,
rs-bullet.tp-bullet,
span.tp-bullet-inner,
span.box-icon-accor.item-icon-e,
i.icon-accor.fas.fa-plus,
i.icon-accor-active.fas.fa-minus,
.swiper-button-nav,
.elbzotech-submit-form,
button.elbzotech-text-bt-search,
a.product-quick-view.quickview-link {
    border-radius: var(--r-pill) !important; /* was 40px / 50% / 100% — same rendered circle */
}
/* rs-module .tp-button / .elbzotech-bt-global-default / .btn-slide1 / .btn-slide2 already
   set to 24px (= --r-lg) by the Task-1 "Slider Hero" block above — already canonical,
   left untouched. */

/* Font leak fix: #entelech-float-btn declares font-family: 'NeueEinstellung', sans-serif
   (from the same DB-stored HFCM snippet above). No @font-face for "NeueEinstellung" exists
   anywhere in the active theme, any plugin, or the DB (confirmed by filesystem + wp_options/
   wp_posts/wp_postmeta search) — the browser silently falls through to the generic
   `sans-serif` keyword, which resolves to Arial/Helvetica on most systems, instead of the
   brand font (Outfit, used for every other piece of text on the page). This was the only
   selector found rendering off-brand text on the homepage (verified via canvas
   measureText comparison against Times/Arial/Outfit reference widths, not just the
   declared font-family string, since a missing web font can silently fall back without
   the fallback name ever appearing in getComputedStyle().fontFamily). Single root cause,
   single override. */
#entelech-float-btn {
    font-family: 'Outfit', sans-serif !important;
}

/* Keep the product quote action available while the tall gallery is above it. */
@media (max-width: 1199px) {
    .single-product #entelech-float-btn { display: none !important; }

    .single-product .bzotech-form-cart-single {
        position: fixed;
        z-index: 10002;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 12px 15px;
        background: #fff;
        box-shadow: 0 -4px 18px rgba(45, 49, 80, 0.12);
    }
}

/* Homepage category mosaic */
.elementor-element-ba0ab32 {
    margin-bottom: 22px !important;
}
.elementor-element-cfc3ddf {
    padding: 20px 45px 72px !important;
    margin-bottom: 64px !important;
}
.elementor-element-cfc3ddf > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}
.elementor-element-cfc3ddf .elementor-element-45afa68,
.elementor-element-cfc3ddf .elementor-element-4bb87d2 {
    display: grid !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
}
.elementor-element-cfc3ddf .elementor-element-4bb87d2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-element-cfc3ddf .elementor-widget-container,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-wrap,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb,
.elementor-element-cfc3ddf .adv-thumb-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb {
    border-radius: var(--r-lg) !important;
    box-shadow: 0 18px 45px rgba(18, 22, 40, .10);
    background: #f6f6f7;
}
.elementor-element-cfc3ddf .adv-thumb-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 12%, rgba(0, 0, 0, .24) 48%, rgba(0, 0, 0, .82) 100%);
}
.elementor-element-cfc3ddf img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.elementor-element-cfc3ddf .info {
    position: absolute !important;
    inset: auto 22px 20px 22px !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    color: #fff !important;
}
.elementor-element-cfc3ddf .info-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.elementor-element-cfc3ddf .desc h2 {
    max-width: 16ch;
    margin: 10px 0 8px !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
.elementor-element-cfc3ddf .desc p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 52ch;
    margin: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c {
    height: 420px !important;
}
.elementor-element-cfc3ddf .elementor-element-da66b20,
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    height: 280px !important;
}
.elementor-element-cfc3ddf .elementor-element-8140ad6,
.elementor-element-cfc3ddf .elementor-element-895abbe {
    height: 230px !important;
}
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    grid-column: 1 / -1 !important;
}
.elementor-element-cfc3ddf .elementor-element-1034bd5 img {
    object-position: center 58% !important;
}

@media (max-width: 1024px) {
    .elementor-element-cfc3ddf {
        padding: 28px 28px 68px !important;
    }
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-4bb87d2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c {
        height: 380px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da66b20,
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        height: 270px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-8140ad6,
    .elementor-element-cfc3ddf .elementor-element-895abbe {
        height: 250px !important;
    }
    .elementor-element-cfc3ddf .desc h2 {
        max-width: 16ch;
        font-size: 26px !important;
    }
    .elementor-element-cfc3ddf .desc p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 15px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 640px) {
    .elementor-element-cfc3ddf {
        padding: 24px 20px 54px !important;
        margin-bottom: 64px !important;
    }
    .elementor-element-cfc3ddf > .e-con-inner,
    .elementor-element-cfc3ddf .elementor-element-45afa68,
    .elementor-element-cfc3ddf .elementor-element-4bb87d2 {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        height: 220px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c {
        height: 320px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        grid-column: auto !important;
    }
    .elementor-element-cfc3ddf .info {
        inset: auto 18px 18px 18px !important;
    }
    .elementor-element-cfc3ddf .desc h2 {
        max-width: 13ch;
        font-size: 23px !important;
    }
    .elementor-element-cfc3ddf .desc p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 3;
    }
}

/* Category section final simplification: 5 clean category cards */
.elementor-element-cfc3ddf {
    padding-top: 34px !important;
    padding-bottom: 70px !important;
}
.elementor-element-cfc3ddf > .e-con-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 310px !important;
    gap: 18px !important;
}
.elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
    grid-row: 1 !important;
    height: 310px !important;
}
.elementor-element-cfc3ddf .elementor-widget-container,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-wrap,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb,
.elementor-element-cfc3ddf .adv-thumb-link {
    height: 100% !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c,
.elementor-element-cfc3ddf .elementor-element-8140ad6,
.elementor-element-cfc3ddf .elementor-element-895abbe,
.elementor-element-cfc3ddf .elementor-element-da66b20,
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    height: 310px !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; }
.elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; }
.elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 3 !important; }
.elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 4 !important; }
.elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 5 !important; }
.elementor-element-cfc3ddf .adv-thumb-link {
    background: #fff !important;
}
.elementor-element-cfc3ddf img {
    height: calc(100% - 68px) !important;
    padding: 18px 18px 10px;
    object-fit: contain !important;
}
.elementor-element-cfc3ddf .info {
    min-height: 68px !important;
    padding: 18px 18px 20px !important;
    border-top: 1px solid rgba(45, 49, 80, .08);
}
.elementor-element-cfc3ddf .info-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
}
.elementor-element-cfc3ddf .desc,
.elementor-element-cfc3ddf .count {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, 280px) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 1 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 2 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 1 / -1 !important; grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        height: 280px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c,
    .elementor-element-cfc3ddf .elementor-element-8140ad6,
    .elementor-element-cfc3ddf .elementor-element-895abbe,
    .elementor-element-cfc3ddf .elementor-element-da66b20,
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        height: 280px !important;
    }
}

@media (max-width: 640px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(5, 240px) !important;
    }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        grid-column: 1 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-row: 4 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-row: 5 !important; }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        height: 240px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c,
    .elementor-element-cfc3ddf .elementor-element-8140ad6,
    .elementor-element-cfc3ddf .elementor-element-895abbe,
    .elementor-element-cfc3ddf .elementor-element-da66b20,
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        height: 240px !important;
    }
}

/* Category section, finished card-grid pass */
.elementor-element-cfc3ddf {
    background: #fff !important; /* 2026-07-13: was #faf9fb — white so flat cards blend, no frame */
}
.elementor-element-cfc3ddf::before {
    content: 'Shop Popular Categories';
    display: block;
    width: min(1320px, calc(100% - 90px));
    margin: 0 auto 24px;
    color: #2d3150;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
}
.elementor-element-cfc3ddf > .e-con-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 240px) !important;
    max-width: 1320px !important;
}
.elementor-element-cfc3ddf .elementor-element-45afa68,
.elementor-element-cfc3ddf .elementor-element-4bb87d2 {
    display: contents !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c {
    grid-column: 1 / 7 !important;
    grid-row: 1 / 3 !important;
    height: auto !important;
}
.elementor-element-cfc3ddf .elementor-element-8140ad6 {
    grid-column: 7 / 10 !important;
    grid-row: 1 !important;
}
.elementor-element-cfc3ddf .elementor-element-895abbe {
    grid-column: 10 / 13 !important;
    grid-row: 1 !important;
}
.elementor-element-cfc3ddf .elementor-element-da66b20 {
    grid-column: 7 / 10 !important;
    grid-row: 2 !important;
}
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    grid-column: 10 / 13 !important;
    grid-row: 2 !important;
}
.elementor-element-cfc3ddf .elementor-element-8140ad6,
.elementor-element-cfc3ddf .elementor-element-895abbe,
.elementor-element-cfc3ddf .elementor-element-da66b20,
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    height: auto !important;
}
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb,
.elementor-element-cfc3ddf .adv-thumb-link {
    overflow: hidden !important;
    /* 2026-07-13: the "grey frame" the user flagged repeatedly = border + box-shadow on the
       white card sitting on a tinted (#FAF9FB) section. No tweak of the shadow was enough — even
       a faint one reads as a frame against the near-white bg. Go FULLY frameless: kill border +
       shadow, make the section white so cards blend into a clean product-image grid, and drop the
       image→label hairline. Zero grey edge anywhere. */
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
}
.elementor-element-cfc3ddf {
    background: #fff !important;
}
.elementor-element-cfc3ddf .info {
    border: none !important;
}
.elementor-element-cfc3ddf .adv-thumb-link {
    display: flex !important;
    flex-direction: column;
}
.elementor-element-cfc3ddf .adv-thumb-link::after {
    content: none;
}
.elementor-element-cfc3ddf img {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
    background: linear-gradient(180deg, #fff 0%, #f7f7fa 100%);
    object-fit: contain !important;
}
.elementor-element-cfc3ddf .info {
    position: static !important;
    width: auto !important;
    padding: 18px 20px 20px !important;
    background: #fff;
    color: #2d3150 !important;
}
.elementor-element-cfc3ddf .info-title {
    color: var(--hype-pink) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-shadow: none;
}
.elementor-element-cfc3ddf .desc h2 {
    max-width: 16ch;
    margin: 8px 0 !important;
    color: #2d3150 !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    text-shadow: none;
}
.elementor-element-cfc3ddf .desc p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 48ch;
    color: #4f536b !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-shadow: none;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c img {
    padding: 22px;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c .info {
    min-height: 160px;
}

@media (max-width: 1024px) {
    .elementor-element-cfc3ddf::before {
        width: calc(100% - 56px);
        font-size: 34px;
    }
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 420px repeat(2, 240px) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-895abbe {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da66b20 {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }
}

@media (max-width: 640px) {
    .elementor-element-cfc3ddf::before {
        width: calc(100% - 40px);
        margin-bottom: 18px;
        font-size: 28px;
    }
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: 390px repeat(4, 220px) !important;
    }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        grid-column: 1 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-row: 4 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-row: 5 !important; }
    .elementor-element-cfc3ddf .desc h2 {
        max-width: none;
        font-size: 24px !important;
    }
    .elementor-element-cfc3ddf .desc p {
        -webkit-line-clamp: 2;
    }
}

/* ponytail: final winner for the homepage category section. Keep below older experiments. */
.elementor-element-cfc3ddf > .e-con-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 310px !important;
    gap: 18px !important;
    max-width: 1320px !important;
}
.elementor-element-cfc3ddf .elementor-element-45afa68,
.elementor-element-cfc3ddf .elementor-element-4bb87d2 {
    display: contents !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c,
.elementor-element-cfc3ddf .elementor-element-8140ad6,
.elementor-element-cfc3ddf .elementor-element-895abbe,
.elementor-element-cfc3ddf .elementor-element-da66b20,
.elementor-element-cfc3ddf .elementor-element-1034bd5 {
    grid-row: 1 !important;
    height: 310px !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; }
.elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; }
.elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 3 !important; }
.elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 4 !important; }
.elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 5 !important; }
.elementor-element-cfc3ddf .elementor-widget-container,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-wrap,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb,
.elementor-element-cfc3ddf .adv-thumb-link {
    height: 100% !important;
}
.elementor-element-cfc3ddf img {
    height: calc(100% - 68px) !important;
    object-fit: contain !important;
}
.elementor-element-cfc3ddf .info {
    position: static !important;
    min-height: 68px !important;
}
.elementor-element-cfc3ddf .desc,
.elementor-element-cfc3ddf .count {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, 280px) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c,
    .elementor-element-cfc3ddf .elementor-element-8140ad6,
    .elementor-element-cfc3ddf .elementor-element-895abbe,
    .elementor-element-cfc3ddf .elementor-element-da66b20,
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        height: 280px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 1 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 2 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 1 / -1 !important; grid-row: 3 !important; }
}

@media (max-width: 640px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(5, 240px) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c,
    .elementor-element-cfc3ddf .elementor-element-8140ad6,
    .elementor-element-cfc3ddf .elementor-element-895abbe,
    .elementor-element-cfc3ddf .elementor-element-da66b20,
    .elementor-element-cfc3ddf .elementor-element-1034bd5 {
        grid-column: 1 !important;
        height: 240px !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-row: 4 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-row: 5 !important; }
}

/* Category section final override: keep it as a clean 5-card strip. */
.elementor-element-cfc3ddf {
    padding-top: 34px !important;
    padding-bottom: 70px !important;
    background: #fff !important; /* 2026-07-13: was #faf9fb — white so flat cards blend, no frame */
}
.elementor-element-cfc3ddf > .e-con-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 310px !important;
    gap: 18px !important;
    max-width: 1320px !important;
}
.elementor-element-cfc3ddf .elementor-element-45afa68,
.elementor-element-cfc3ddf .elementor-element-4bb87d2 {
    display: contents !important;
}
.elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
    grid-row: 1 !important;
    height: 310px !important;
}
.elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; }
.elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; }
.elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 3 !important; }
.elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 4 !important; }
.elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 5 !important; }
.elementor-element-cfc3ddf .elementor-widget-container,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-wrap,
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb,
.elementor-element-cfc3ddf .adv-thumb-link {
    height: 100% !important;
}
.elementor-element-cfc3ddf img {
    height: calc(100% - 68px) !important;
    padding: 18px 18px 10px !important;
    object-fit: contain !important;
}
.elementor-element-cfc3ddf .info {
    min-height: 68px !important;
    padding: 18px 18px 20px !important;
    border-top: 1px solid rgba(45, 49, 80, .08);
}
.elementor-element-cfc3ddf .info-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
}
.elementor-element-cfc3ddf .desc,
.elementor-element-cfc3ddf .count {
    display: none !important;
}

@media (max-width: 1024px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, 280px) !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-column: 1 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-column: 2 !important; grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-column: 1 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-column: 2 !important; grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-column: 1 / -1 !important; grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        height: 280px !important;
    }
}

@media (max-width: 640px) {
    .elementor-element-cfc3ddf > .e-con-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(5, 240px) !important;
    }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global {
        grid-column: 1 !important;
    }
    .elementor-element-cfc3ddf .elementor-element-da0e09c { grid-row: 1 !important; }
    .elementor-element-cfc3ddf .elementor-element-8140ad6 { grid-row: 2 !important; }
    .elementor-element-cfc3ddf .elementor-element-895abbe { grid-row: 3 !important; }
    .elementor-element-cfc3ddf .elementor-element-da66b20 { grid-row: 4 !important; }
    .elementor-element-cfc3ddf .elementor-element-1034bd5 { grid-row: 5 !important; }
}

/* Homepage newsletter ("Stay In The Loop") — Elementor Pro form widget (id hypenl01),
   added to replace the empty bzotech-mailchimp-global widget whose [mc4wp_form] shortcode
   rendered no <form>. This build's form-level `show_labels:''` doesn't hide the field label
   (Pro v4.1.1, non-standard build), so the redundant "Email" label is hidden here — the
   placeholder already reads "Your email address". Also lays the email input + Subscribe
   button into one centred inline row (Elementor's default stacks col-100 fields). Scoped to
   the one widget; !important to beat Elementor's generated per-widget form CSS. */
/* Visually hide the label but keep it in the a11y tree (screen readers still announce the
   field — a placeholder is not a substitute for a label). sr-only pattern, not display:none. */
.elementor-element-hypenl01 .elementor-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.elementor-element-hypenl01,
.elementor-element-hypenl01 .elementor-widget-container,
.elementor-element-hypenl01 .elementor-form {
    width: 100% !important;
}
.elementor-element-hypenl01 .elementor-form-fields-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
}
.elementor-element-hypenl01 .elementor-field-group-email {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.elementor-element-hypenl01 .elementor-field-group-email input {
    width: 100% !important;
    height: 48px !important;
}
.elementor-element-hypenl01 .elementor-field-type-submit {
    flex: 0 0 auto !important;
    width: auto !important;
}
.elementor-element-hypenl01 .elementor-field-type-submit .elementor-button {
    width: auto !important;
    height: 48px !important;
    white-space: nowrap !important;
}
@media (max-width: 480px) {
    .elementor-element-hypenl01 .elementor-form-fields-wrapper {
        flex-wrap: wrap !important;
    }
    .elementor-element-hypenl01 .elementor-field-group-email,
    .elementor-element-hypenl01 .elementor-field-type-submit {
        flex: 1 1 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART C — Homepage polish pass (2026-07-08). Beauty-first audit follow-ups.
   Kept as one appended block below all older experiments so nothing above moves.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── C1 Hero (RevSlider) — eyebrow legibility, tagline weight, secondary CTA ──
   Live inspect (1440): eyebrows are 12px, layers 100/200/300 (only ids ending "00");
   magenta (#c40390 s1, off-brand #e91e8c s2/s3) over the rgba(0,0,0,.6) scrim measures
   ~1.1:1 — the fix is WHITE text, not a brighter pink. A 2px magenta lead bar (::before)
   returns the brand pop as a graphic (not contrast-bound like text). Taglines are layers
   ending "01" (101/201/301), previously 82% opacity weight 400 → washed out; set solid
   white 500. CTA2 "Get a Quote" (.btn-slide2) had bg/border/padding all 0 (a bare text
   link beside the solid View Products pill) → outline pill. !important beats RevSlider's
   inline layer styles. */
[id^="slider-1-slide-"][id$="00"].rs-layer {
    color: #ffffff !important;
    font-size: 13px !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55) !important;
}
[id^="slider-1-slide-"][id$="00"].rs-layer::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--hype-pink);
}
[id^="slider-1-slide-"][id$="01"].rs-layer {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5) !important;
}
rs-module .btn-slide2 {
    border: 1.5px solid rgba(255, 255, 255, .65) !important;
    border-radius: var(--r-lg) !important;
    padding: 8px 18px !important;
}
/* Slider 1's boxed width is owned by RevSlider (layouttype: auto + per-device grid widths).
   Do not re-add a CSS width override here: it breaks RevSlider's layer grid. */
/* ponytail: RevSlider CTA layers are absolutely positioned per-device; the outline pill's
   own padding on the tablet breakpoint pushed "Get a Quote" into "View Products" and clipped
   it. Tighter padding + smaller type here keeps both pills clear of each other at 768. */
@media (min-width: 641px) and (max-width: 1024px) {
    rs-module .btn-slide2 {
        padding: 6px 14px !important;
        font-size: 14px !important;
    }
}

/* ── C1 Hero — layer positions now live in Slider Revolution's per-device DB settings, not CSS. ── */
/* Empty RevSlider groups sit above CTA2 and otherwise swallow its clicks. */
rs-group-wrap:has(> rs-group[id$="-layer-19"]),
rs-group[id$="-layer-19"] {
    pointer-events: none !important;
}

/* ── C2 Category cards — hover affordance (cards were fully static: no lift, no feedback,
   read as dead). DESIGN.md card-category: hover = lift + shadow-card-hover. Thumb carries
   the resting shadow (set earlier), so animate the thumb; label deepens to magenta-deep.
   cubic-bezier(.22,1,.36,1) = ease-out-quart (no bounce). Art-direction note: "Branded
   Polos" uses a lifestyle photo while the other 4 are product-on-white — flagged for an
   image swap in the media library (content task, not CSS). */
.elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}
.elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global:hover .elbzotech-banner-info-global-thumb {
    /* 2026-07-13: cards are now fully frameless at rest (no bg/border/shadow). ANY hover shadow
       re-introduces the grey "frame" the user flagged — so hover carries NO shadow. Affordance =
       a subtle lift + the label deepening to magenta below. */
    transform: translateY(-6px) !important;
    box-shadow: none !important;
}
.elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global:hover .info-title {
    color: #9e0374 !important; /* magenta-deep on hover */
}
@media (prefers-reduced-motion: reduce) {
    .elementor-element-cfc3ddf .elbzotech-banner-info-global-thumb {
        transition: box-shadow .2s ease !important;
    }
    .elementor-element-cfc3ddf .elementor-widget-bzotech-banner-info-global:hover .elbzotech-banner-info-global-thumb {
        transform: none !important;
    }
}

/* C2c (category-card 3 fixes: equal width + rounded hover + focus ring) MOVED to Elementor →
   section cfc3ddf › Advanced › Custom CSS (2026-07-09), same home as C2b. */

/* C2b (kill scrim ::before + tablet 5th-card centre) MOVED to Elementor →
   section cfc3ddf › Advanced › Custom CSS (post 67372). Kept out of theme per
   "everything through Elementor" (2026-07-09). */

/* ── C7 Main H1 — font drift + shouty magenta ──
   Live: h1 renders in Roboto (not Outfit — the second-geometric-sans accident DESIGN.md
   calls out), 39px, magenta #c40390 across the whole line. The full-line magenta competes
   with this same section's magenta "View Promotional Products" button; DESIGN.md rations
   magenta to ~one moment per viewport, and here that moment is the button. So: Outfit,
   navy ink, responsive clamp (caps near the old size, shrinks on mobile where it was
   filling the screen), balanced wrap. */
.elementor-element-b49c94b .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em !important;
    color: #2d3150 !important;
    text-wrap: balance;
}
/* Intro subtitle was full-line magenta 19px/600 → louder than the navy H1 above it and a
   second magenta moment beside the button. Drop to ink-muted so hierarchy reads
   H1 (navy) > subtitle (muted) > button (magenta CTA). */
.elementor-element-b2a7853 .elementor-heading-title {
    color: #4f536b !important;
    font-weight: 500 !important;
    text-wrap: pretty;
}

/* ── C4 Trust bar (section ba0ab32, 4 bzotech info-boxes) — 6-axis polish ──
   Live inspect (1440): icons render #666 30px Line Awesome, labels already navy Outfit 500.
   Axis findings fixed here:
   • Committed color — icons were #666 grey (the uncommitted "trust-row template" tell) → navy
     ink (#2d3150), the authority anchor, unified with the label. Magenta stays rationed to this
     section's ONE moment, the "View Promotional Products" CTA (DESIGN.md: ~one magenta / viewport),
     so magenta appears on the trust icons only as an interactive accent on hover.
   • Mood + motion — the row was fully static (dead, like the C2 cards pre-fix) → magenta + a 2px
     lift on hover, ease-out-quart, with a reduced-motion fallback.
   • Semantic glyphs — the money glyph sat on the wrong row: "Value for money" showed a dolly/
     hand-truck (la-dolly-flatbed) and "Committed to quality" a hand-holding-cash. Swapped to
     hand-holding-usd (value) + award (quality). Unicodes f4c0 / f559 verified live against the
     loaded Line Awesome Free font. Speed (shipping-fast) + Adviser (headphones) were already right.
   • Spatial rhythm — stacked mobile items were too airy; tighten the inter-item gap ≤767.
   ponytail: CSS glyph content-swap keeps this version-safe on the child theme (no DB write); the
   durable home for the icon choice is the bzotech widget's icon field via Elementor when the MCP
   is back up. */
.elementor-element-ba0ab32 i {
    color: #2d3150 !important;
    transition: color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.elementor-element-fdc4206 i.la-dolly-flatbed::before {
    content: "\f4c0" !important; /* hand-holding-usd = value for money */
}
.elementor-element-ba0f391 i.la-hand-holding-usd::before {
    content: "\f559" !important; /* award = committed to quality */
}
.elementor-element-ba0ab32 [data-widget_type^="bzotech_info_box"]:hover i {
    color: #c40390 !important;
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .elementor-element-ba0ab32 i {
        transition: color .2s ease;
    }
    .elementor-element-ba0ab32 [data-widget_type^="bzotech_info_box"]:hover i {
        transform: none !important;
    }
}
@media (max-width: 767px) {
    /* stacked items read airy because each widget-container carries a 20px margin-bottom;
       that (not the item margin) is the gap. Collapse it and give the item one modest margin. */
    .elementor-element-ba0ab32 .elementor-widget-container {
        margin-bottom: 0 !important;
    }
    .elementor-element-ba0ab32 [data-widget_type^="bzotech_info_box"] {
        margin-bottom: 12px !important;
    }
}

/* Sedgwick landing page: when Elementor already supplies a content H1, remove
   the duplicate theme title/breadcrumb. If it does not, the renamed theme H1
   remains visible so the document never loses its primary heading. */
.page-id-83189.hype-has-content-h1 .wrap-bread-crumb {
    display: none;
}

/* The global floating contact button sits directly over the hero at the first
   viewport on this page. The landing page already provides phone, email and a
   full Contact Us CTA, so the duplicate overlay is intentionally suppressed. */
.page-id-83189 #entelech-float-btn {
    display: none !important;
}

/* Raise body copy above WCAG AA's 4.5:1 threshold while retaining the existing
   navy/pink visual hierarchy. */
.page-id-83189 article p,
.page-id-83189 article li {
    color: #626262;
}

/* Keep the icon's visual size while expanding its interactive target. */
.page-id-83189 article a.product-quick-view.quickview-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* Never expose Elementor's grey editor placeholder as public decoration. The
   production page currently has real artwork; this also keeps stale/local page
   data from placing placeholder images inside accessible headings. */
.page-id-83189 article img[src*="/elementor/assets/images/placeholder.png"] {
    display: none !important;
}

/* Calm enterprise landing-page rhythm. Elementor stored 580px minimums on
   every section and then repeated 60/80px padding on both the boxed wrapper and
   its inner container. That made the page read as missing content. Keep a
   deliberate hero canvas, but let all following sections size to real content. */
.page-id-83189 .hype-landing-hero-section {
    margin-bottom: 0 !important;
    min-height: clamp(420px, 34vw, 480px) !important;
}
.page-id-83189 article .elementor > .e-con:not(.hype-landing-hero-section) {
    margin-bottom: 0 !important;
    min-height: 0 !important;
}
.page-id-83189 article .elementor > .e-con:not(.hype-landing-hero-section) > .e-con-inner {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
.page-id-83189 article .elementor > .e-con:not(.hype-landing-hero-section) > .e-con-inner > .e-con {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-bottom: clamp(48px, 4vw, 56px) !important;
    padding-top: clamp(48px, 4vw, 56px) !important;
}

/* The local Elementor data still references the white logo intended for a dark
   background. JavaScript swaps it to the existing dark asset; these dimensions
   keep the brand mark crisp and balanced at every breakpoint. */
.page-id-83189 .hype-sedgwick-logo {
    height: auto;
    max-width: clamp(220px, 24vw, 320px);
    width: 100%;
}

.page-id-83189 article h1.title48.elbzotech-heading-global {
    margin-inline: auto;
    max-width: 900px;
    text-wrap: balance;
}
.page-id-83189 article h1.title48.elbzotech-heading-global > span:first-child,
.page-id-83189 article h1.title48.elbzotech-heading-global > span:first-child > span {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
}
.page-id-83189 article h1.title48.elbzotech-heading-global .type-title_shadow {
    display: none !important;
}
.page-id-83189 article h1.title48.elbzotech-heading-global br {
    display: none;
}

/* Keyboard skip link: visually hidden until it receives focus. */
.hype-skip-link {
    background: #ffffff;
    border: 2px solid var(--hype-pink);
    border-radius: var(--r-sm);
    color: #2d3150;
    font-weight: 700;
    left: 16px;
    padding: 10px 14px;
    position: fixed;
    top: -100px;
    z-index: 100000;
}
.hype-skip-link:focus {
    top: 16px;
}

@media (max-width: 767px) {
    /* Elementor's hero inner container is saved at 200px wide on phones,
       forcing the title into four oversized lines. Let the branded heading use
       the available canvas and keep all section titles readable at a phone-safe
       scale. */
    .page-id-83189 .hype-landing-hero-inner,
    .page-id-83189 .hype-primary-heading-widget {
        max-width: 100% !important;
        width: 100% !important;
    }
    .page-id-83189 .hype-landing-hero-section {
        min-height: 420px !important;
        padding-bottom: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 40px !important;
    }
    .page-id-83189 article .elementor > .e-con:not(.hype-landing-hero-section) > .e-con-inner > .e-con {
        padding-bottom: 40px !important;
        padding-top: 40px !important;
    }
    .page-id-83189 article h1.title48.elbzotech-heading-global {
        font-size: clamp(1.875rem, 8vw, 2rem) !important;
        line-height: 1.15 !important;
        text-align: center;
        width: 100%;
    }
    .page-id-83189 article h1.title48.elbzotech-heading-global > span:first-child {
        display: flex !important;
        justify-content: center;
    }
    .page-id-83189 article h1.title48.elbzotech-heading-global > span:first-child > span {
        min-width: calc(100vw - 60px) !important;
        width: calc(100vw - 60px) !important;
    }
    .page-id-83189 article h2.title48.elbzotech-heading-global {
        font-size: clamp(1.625rem, 7vw, 1.875rem) !important;
        line-height: 1.2 !important;
        text-wrap: balance;
    }
}

@media (max-width: 480px) {
    /* Give the delivery message a readable two-line option instead of shrinking
       it to 9px to preserve one line. */
    .page-id-83189 #header .top-header3 {
        min-height: 58px !important;
        padding: 6px 10px !important;
    }
    .page-id-83189 #header .top-header3 h4 {
        font-size: 12px !important;
        line-height: 15px !important;
        white-space: normal !important;
    }
    .page-id-83189 #header .top-header3 a {
        font-size: 12px !important;
        min-height: 36px;
    }
}

/* ── C7b Intro section top breathing (section 50b2451) ──
   Live measure (1440): intro section padding is a uniform 10px, so the gap between the hero
   slider's bottom and the H1 is 0px — the H1 sits flush against the slide dots above it, and
   the flat 10px reads as "off" (the padding the user flagged). Give the section a real top
   breath scaled to the viewport; the boundary from hero → first content block deserves more
   air than the intra-section gaps below it (intro→trust 50px, trust→cards 22px are already
   fine, so bottom padding is left at 10px — raising it would over-separate the CTA from the
   trust row). ponytail: pad-top only; the rest of the section rhythm already measured clean. */
.elementor-element-50b2451 {
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    /* 2026-07-13: user flagged the 64/10 top-bottom as lopsided ("เบี้ยว"). Give the bottom a
       real (smaller) breath so the block reads balanced, without pushing the trust row as far
       as a fully symmetric bottom would (the C7b concern). ~24–40px vs the 40–64px top. */
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* 2026-07-13: unify the newsletter (Stay In The Loop) submit button onto the primary magenta
   #C40390 — UAT rendered the theme-default #D52786 (two-magenta drift found in the audit). */
.elementor-element-9647e70 .elementor-button,
.elementor-element-9647e70 button[type="submit"] {
    background-color: #C40390 !important;
}
.elementor-element-9647e70 .elementor-button:hover,
.elementor-element-9647e70 button[type="submit"]:hover {
    background-color: #A8027C !important;
}

/* C3 Customer Favourites polish (touch CTA, hide $0.00, card shadow/radius/hover, gap)
   MOVED to Elementor → section 4706679 › Advanced › Custom CSS + native margin control
   (post 67372). Kept out of theme per "everything through Elementor" (2026-07-09). */

/* 2026-07-15: woo-rfq-for-woocommerce-backed prints `.single_add_to_cart_button{visibility:hidden}`
   on every single-product page, meant to hide the native WC button while a PayPal Express button
   loads — but PayPal Express Checkout isn't installed on this site, and this button IS the real
   "Add to Quote" submit. The plugin's own JS re-shows it on document.ready, but that JS is not
   guaranteed to run before paint/interaction (slow network, NitroPack JS delay, etc.), so users
   reported the button invisible until they scrolled and the first click not registering (handler
   not bound yet). Not plugin-editable (overwritten on update) — force-visible here instead, no
   JS dependency needed since the button already works as a plain form submit. Plugin: woo-rfq-for-
   woocommerce-backed, includes/classes/gpls_woo_rfq_functions.php ~L2463/L2640/L2613. */
.single-product div.product form.cart .single_add_to_cart_button {
    visibility: visible !important;
}

/* Product single: breathing room between price and the add-to-quote form */
.product-detail-info .bzotech-price-single { margin-top: 8px; padding-bottom: 16px; }
.product-detail-info .bzotech-form-cart-single { margin-top: 16px; }

/* 2026-07-24: Shop/category cards in a bordered box (client req #13, like Brighter Ideas).
   Scoped to the archive/shop loop (.product-grid-view .list-col-item) so homepage Elementor
   product carousels (bzotech-products-global) are untouched.
   Two card types share the loop: product cards (.list-col-item.item-grid-product-) and
   category tiles (.list-col-item.product-category). Both get the box; each type gets a
   fixed image area + reserved title height so every card in a row is the SAME height with
   no dead whitespace (the first pass used height:100% which stretched short-title cards and
   left big empty gaps — the "not pretty" the client flagged). */
/* Vertical gap between card rows. The tiles are flex items whose own margin-bottom the theme
   forces to 0, so a bare margin-bottom here is overridden — add row-gap on the flex row instead
   so every row has consistent top/bottom breathing room (client feedback 2026-07-24). */
.product-grid-view .list-product-wrap {
    row-gap: 30px;
}
.product-grid-view .list-col-item {
    margin-bottom: 0;
}
.product-grid-view .list-col-item .item-product {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.product-grid-view .list-col-item .item-product:hover {
    border-color: #d0d0d0;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ── Product cards (leaf listing) ── */
.product-grid-view .list-col-item:not(.product-category) .product-thumb {
    border-radius: 6px;
    overflow: hidden;
}
.product-grid-view .list-col-item:not(.product-category) .product-thumb-link img,
.product-grid-view .list-col-item:not(.product-category) img.wp-post-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #fafafa;
    display: block;
}
.product-grid-view .list-col-item:not(.product-category) .product-info {
    margin-top: 12px;
}
.product-grid-view .list-col-item:not(.product-category) .product-title {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ── Category tiles ── smaller centred title (was oversized H2 → clumsy, uneven boxes) */
.product-grid-view .list-col-item.product-category .item-product > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}
.product-grid-view .list-col-item.product-category img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fafafa;
    border-radius: 6px;
    display: block;
}
.product-grid-view .list-col-item.product-category .woocommerce-loop-category__title {
    margin: 14px 0 0;
    padding: 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    min-height: 2.7em;                 /* reserve ~2 lines so every tile lines up */
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-grid-view .list-col-item.product-category .woocommerce-loop-category__title .count {
    display: none;                     /* hide the "(n)" product count mark */
}

/* 2026-07-27: Keep only the semantic footer phrases together. The surrounding text may wrap
   naturally in its narrow column, avoiding the horizontal overflow caused by nowrap on the p. */
#footer .footer-keep {
    white-space: nowrap;
}

/* Footer newsletter fallback: MC4WP deliberately returns no form for visitors when its API
   key is missing. Offer a useful, honest route instead of an empty box (or an admin error).
   functions.php automatically yields to the real signup form once Mailchimp is connected. */
#footer .hype-newsletter-fallback {
    margin-top: 22px;
}
#footer .hype-newsletter-fallback__button {
    align-items: center;
    background: #c40390;
    border: 2px solid #c40390;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 48px;
    padding: 12px 24px;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
#footer .hype-newsletter-fallback__button:hover,
#footer .hype-newsletter-fallback__button:focus-visible {
    background: #a8027c;
    border-color: #a8027c;
    color: #fff;
    text-decoration: none !important;
    transform: translateY(-1px);
}
#footer .hype-newsletter-fallback__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* 2026-07-27: Compress WooCommerce notices only on phones. The parent theme's 60px icon
   gutter and 30px padding make validation messages disproportionately narrow at 375px. */
@media (max-width: 767px) {
    .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message,
    .woocommerce-page .woocommerce-error, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-message {
        padding: 18px 16px 18px 44px;
    }
    .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
        font-size: 18px;
        left: 14px;
        top: 18px;
        line-height: 1;
    }
}

/* 2026-07-24: Relocated category SEO copy (printed after the loop by hype_category_copy_below()).
   Full-width, clears the grid, sits clearly below products. Our own class so the theme's
   .term-description{margin-left:290px} (which indented + overlapped the grid) never applies. */
.product-grid-view .hype-category-copy,
.shop-list-view .hype-category-copy {
    clear: both;
    width: 100%;
    margin: 44px 0 0;
    padding-top: 28px;
    border-top: 1px solid #ececec;
    margin-left: 0;
}

/* ── 2026-07-27 Header responsive repair (Elementor header 88306) ──
   The Theme Builder header is intentionally left in Elementor: its desktop composition is signed
   off. At Elementor's real tablet/mobile breakpoints the fixed 388px account column, percentage
   logo column and hidden search widget instead force extra rows (and a three-line phone number).
   These narrowly-scoped child rules restore the intended compact flow below 1025px only; desktop
   selectors and the template data remain untouched. */
@media (max-width: 1024px) {
    #header .elementor-element-6890198.elementor-hidden-tablet,
    #header .elementor-element-6890198.elementor-hidden-mobile {
        display: block;
    }

    /* Elementor hides the only child widget at these breakpoints. Keep the category picker in
       the available width rather than allowing its intrinsic label/input widths to create x-scroll. */
    #header .elementor-element-6890198,
    #header .elementor-element-6890198 .elbzotech-search-wrap-global,
    #header .elementor-element-6890198 .elbzotech-search-form-wrap-global,
    #header .elementor-element-6890198 .elbzotech-search-global-form {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
    #header .elementor-element-6890198 .elbzotech-dropdown-box {
        flex: 0 1 42%;
        min-width: 0;
    }
    /* The theme renders the category label and its arrow inline, carrying a desktop-only 30px
       arrow gutter. At a 42% mobile flex basis that gutter crosses the divider into the search
       input. Make the link itself the layout row: the DESIGN.md xs (8px) gap keeps the arrow in
       its own box while the label may yield first instead of either control overlapping. */
    #header .elementor-element-6890198 .elbzotech-dropdown-box {
        align-items: center;
        display: flex;
    }
    #header .elementor-element-6890198 .elbzotech-dropdown-box .dropdown-link,
    #header .elementor-element-6890198 input[type="text"] {
        min-width: 0;
    }
    #header .elementor-element-6890198 .elbzotech-dropdown-box .dropdown-link {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        gap: 8px;
        justify-content: space-between;
        overflow: hidden;
        padding-inline: 12px;
        white-space: nowrap;
    }
    #header .elementor-element-6890198 .elbzotech-dropdown-box .dropdown-link i.la-angle-down {
        flex: 0 0 auto;
        margin-left: 8px;
    }
    #header .elementor-element-6890198 .elbzotech-dropdown-list {
        max-width: 100%;
    }

    /* Elementor adds 10px to the search column, while the logo starts at the parent gutter.
       Removing only that nested gutter gives the logo, call row and form one shared alignment line. */
    #header .elementor-element-236a83b {
        padding-inline: 0;
    }
    /* Elementor writes heading typography onto the inner title, so these token values belong on
       that rendered element at both tablet and phone widths. */
    #header .elementor-element-3da480d .elementor-heading-title {
        color: #4f536b;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.2;
        white-space: nowrap;
    }
    #header .elementor-element-8c146e5 .elementor-heading-title {
        color: #2d3150;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    #header .elementor-element-786dbe4 {
        justify-content: flex-start;
        padding-inline: 0;
    }

    /* The visible controls are small icon glyphs, not small tap targets.  Give their links a
       44px hit box while retaining the inherited glyph dimensions and visual weight. */
    #header .toggle-mobile-menu,
    #header .elementor-element-98e8c1e .title-account-e,
    #header .elementor-element-638bd83 .mini-cart-link {
        align-items: center;
        display: inline-flex;
        height: 44px;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        position: relative;
        width: 44px;
    }
    #header .elementor-element-98e8c1e,
    #header .elementor-element-638bd83 {
        min-height: 44px;
    }
    #header .elementor-element-6890198 button[type="submit"],
    #header .elementor-element-6890198 input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }


    /* This is a drawer, not a child-width popup. Its Elementor offset parent is the 78px
       hamburger wrapper on phones, so width: 100% must resolve from the fixed element's
       initial containing block (the viewport client area). The parent script writes a negative
       inline right value; with left + width specified, the over-constrained right is discarded
       in LTR instead of widening the drawer. The custom property is updated from the rendered
       sticky header's live bottom edge in functions.php, keeping the drawer below either
       sticky-header state without page overlap. */
    #header .elementor-element-c3e8931 .bzotech-menu-inner {
        bottom: 0;
        box-sizing: border-box;
        height: calc(100dvh - var(--hype-header-bottom, 0px));
        left: 0;
        max-height: calc(100dvh - var(--hype-header-bottom, 0px));
        max-width: none;
        overflow-y: auto;
        position: fixed;
        top: var(--hype-header-bottom, 0px);
        width: 100%;
        z-index: 10001;
    }

    /* The compact cart keeps a 390px dropdown even while its 44px icon is in the account
       column. Its desktop left/right offsets then place the hidden panel a few pixels before
       the viewport, making the header fail its own bounds contract whenever the menu is open.
       Re-anchor this full-width mobile panel to the header row, rather than changing its width
       or the cart icon's touch target. Desktop keeps the parent theme's cart placement. */
    #header .elementor-element-638bd83,
    #header .elementor-element-0b237e4 {
        position: static;
    }
    #header .elementor-element-638bd83 .mini-cart-content {
        left: 0;
        right: auto;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    /* A tablet call column beside the logo creates a competing left edge.  Stack the compact
       call line beneath the logo/account row, and remove only responsive wrapper whitespace. */
    #header .elementor-element-c7d5fa8,
    #header .elementor-element-c6b2476 {
        padding-block: 0;
    }
    #header .elementor-element-73b8c03 {
        min-height: 44px;
    }
    #header .elementor-element-c6b2476 {
        flex-wrap: wrap;
        row-gap: 0;
    }
    #header .elementor-element-d658bc6 {
        min-width: 150px;
        width: 30%;
    }
    #header .elementor-element-786dbe4 {
        align-items: baseline;
        flex-direction: row;
        gap: 8px;
        height: 44px;
        order: 3;
        width: 100%;
    }
    #header .elementor-element-68b3034 img {
        height: auto;
        max-height: 72px;
        width: auto;
    }
    #header .elementor-element-8c146e5 .elementor-heading-title {
        white-space: nowrap;
    }
    #header .elementor-element-0b237e4 {
        flex: 1 1 auto;
        height: 72px;
        min-height: 0;
        width: auto;
    }
    #header .elementor-element-236a83b {
        order: 9;
        padding-block: 0;
        width: 100%;
    }
    #header .elementor-element-0ec5660 {
        height: 44px;
    }
}

@media (max-width: 767px) {
    /* Keep the client CTA in the compact delivery row: hiding it was a content change, not a
       layout repair.  Both pieces use the label scale and retain a 44px tappable row. */
    #header .elementor-element-d4fa478 {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
    }
    #header .elementor-element-d4fa478 .button-inner {
        align-items: center;
        background: #fff;
        border-radius: 15px !important;
        box-shadow: none;
        color: #2d3150;
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        line-height: 1.2;
        justify-content: center;
        margin-right: 22px;
        min-height: 28px;
        padding: 2px 10px !important;
    }
    /* Elementor gives the delivery label a 100% flex basis. When this CTA is present, let the
       label yield within the same 44px row rather than wrapping the button onto a second line. */
    #header .elementor-element-73b8c03:has(.elementor-element-d4fa478) {
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    #header .elementor-element-73b8c03:has(.elementor-element-d4fa478) .elementor-element-82c6f43 {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    #header .elementor-element-73b8c03:has(.elementor-element-d4fa478) .elementor-element-82c6f43 .elementor-widget-container {
        align-items: center;
        display: flex;
        height: 100%;
    }
    #header .elementor-element-73b8c03:has(.elementor-element-d4fa478) .elementor-element-82c6f43 h4 {
        font-size: 9px !important;
        letter-spacing: 0 !important;
        line-height: 16px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: translateY(2.5px);
        white-space: nowrap !important;
    }
    #header .elementor-element-73b8c03:has(.elementor-element-d4fa478) .elementor-element-4097d21 {
        top: 50% !important;
        transform: translateY(-50%);
    }
    #header .elementor-element-73b8c03 {
        flex-wrap: nowrap;
        min-height: 44px;
        padding: 0 12px;
    }
    #header .elementor-element-c7d5fa8 {
        padding-block: 0;
    }
    #header .elementor-element-82c6f43 h4 {
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
    }
    #header .elementor-element-c6b2476 {
        padding: 12px 18px;
        row-gap: 8px;
    }
    #header .elementor-element-d658bc6 {
        flex: 0 0 auto;
        width: auto;
    }
    #header .elementor-element-68b3034 img {
        height: auto;
        max-height: 60px;
        width: auto;
    }
    #header .elementor-element-0b237e4 {
        flex: 0 0 auto;
        height: 60px;
        margin-left: auto;
        min-height: 0;
        order: 2;
        width: auto;
    }
    #header .elementor-element-786dbe4 {
        align-items: baseline;
        flex-direction: row;
        gap: 8px;
        order: 3;
        width: 100%;
    }
    /* Elementor owns font declarations on `.elementor-heading-title`; styling its wrapper had
       no rendered effect.  Apply the approved label/title hierarchy to the actual text nodes. */
    #header .elementor-element-3da480d .elementor-heading-title {
        color: #4f536b;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.2;
        white-space: nowrap;
    }
    #header .elementor-element-8c146e5 .elementor-heading-title {
        color: #2d3150;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    #header .elementor-element-236a83b {
        order: 4;
        padding-block: 0;
        width: 100%;
    }
}

/* 2026-08-10: The theme pins nothing at the viewport top at 1440/768/375. Its header-bottom
   variable tracks the live header edge and equals the full header height at page top, over-scrolling this jump. */
.hype-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 24px;
}

/* 2026-08-10: Give Sedgwick product visitors a clear route back to the curated range. */
.hype-sedgwick-back {
    margin: 32px auto;
    text-align: center;
}

/* 2026-08-10: Keep this return route deliberately secondary so Add to Cart remains the primary action. */
.hype-sedgwick-back__button {
    align-items: center;
    background: transparent;
    border: 2px solid #c40390;
    border-radius: 4px;
    color: #c40390;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    min-height: 48px;
    padding: 12px 24px;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* 2026-08-10: Confirm interaction without competing with the page's primary action at rest. */
.hype-sedgwick-back__button:hover,
.hype-sedgwick-back__button:focus-visible {
    background: #c40390;
    border-color: #c40390;
    color: #fff;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* 2026-08-10: Keep keyboard focus visible against the light product-page background. */
.hype-sedgwick-back__button:focus-visible {
    outline: 3px solid #2d3150;
    outline-offset: 3px;
}

/* 2026-08-10: Make the Sedgwick grid jump feel direct without imposing motion preferences. */
@media (prefers-reduced-motion: no-preference) {
    .page-id-83189 {
        scroll-behavior: smooth;
    }
}