/**
 * Custodi — Single Product Page CSS
 * Version: v4.10
 *
 * CHANGELOG
 *   v4.10 (this revision)
 *     • Video card icon background swapped from cyan-dark (#0088AA)
 *       to charcoal (#2B3237) to match the PDF card's treatment.
 *       Icon SVG updated in functions.php to a film strip glyph
 *       rendered in white (stroke + fill). Three-card colour rhythm
 *       is now: spec sheet = charcoal, cert docs = cyan, video =
 *       charcoal — reading the cyan as the verification signal.
 *   v4.9
 *     • NEW: video lightbox component. Media tab's product video now
 *       renders as a card matching the PDF download card's styling
 *       (instead of inline iframe embed). Click-through opens a
 *       full-screen lightbox overlay with the YouTube/Vimeo iframe
 *       centred at 16:9, autoplay enabled. Close via backdrop click,
 *       X button, or Esc key. Body scroll locks while open. Removing
 *       iframe on close cleanly stops playback without needing the
 *       provider postMessage API. Icon coral (#0088AA, site blue-dark)
 *       distinguishes video card from PDF (dark) and cert (cyan) cards.
 *       Legacy .custodi-video-wrap CSS retained for backward compat.
 *   v4.8
 *     • Restructured .custodi-product-description layout. Previous
 *       version split text 50% / image 50% side-by-side, which left
 *       the image column visually starved when body copy exceeded
 *       ~200 words. New layout: 16:9 lifestyle image band on top
 *       (full card width, flush to top radius), text block below
 *       at full card width with generous 64px side padding. Title
 *       bumped to 32px to hold its own against the image band above
 *       (earlier v4.8 draft used 26px and 800px text max-width,
 *       which created visible empty margins inside the card and
 *       under-weighted the title — both corrected in this revision).
 *       Explicit padding-bottom:56.25% fallback on image container
 *       for environments that strip aspect-ratio. Mobile breakpoint
 *       switches image to 4:3 for better verticality on narrow
 *       screens.
 *   v4.7
 *     • NEW: .custodi-usage-notes component. Rendered by the
 *       [custodi_usage_notes] shortcode in functions.php. ACF-driven
 *       (field `usage-notes`, Text Area). Neutral styling — info icon
 *       in site blue, bone border, off-white fill. Reads as "important
 *       note" without alarming. Works for care instructions, handling
 *       tips, compatibility notes, etc. Empty ACF = no render. Sits
 *       below product gallery in the hero card's left column.
 *   v4.6
 *     • Expanded white-background suppression on the hero outer container.
 *       The full-viewport band around the hero was rendering white instead
 *       of letting the sand page background show through. Added multi-angle
 *       attack: background-image:none on the container, hide + transparent
 *       on all .fusion-fullwidth-color overlays, transparent on all direct
 *       children except the inner row. May need DOM inspection if still
 *       leaking after deploy.
 *   v4.5
 *     • Hero-card feature strip now correctly bleeds to the card edges.
 *       Previous attempt escaped only the card's 32px padding; this adds
 *       zero-padding overrides on every Avada wrapper between the card
 *       and the strip so nothing introduces inset. Margins bumped to
 *       -32 all sides so the strip is flush bottom-left and bottom-right,
 *       letting the border-radius curves render.
 *   v4.4
 *     • Price weight bumped 700 → 800 for more commanding presence.
 *     • Key specs strip redesigned: transparent background, left-aligned,
 *       cleaner typography (Inter 14/500, labels 11/800 eyebrow standard),
 *       vertical dividers only, breathable padding. Old sand-box look removed.
 *       Optional .custodi-key-spec-value--mono class for numeric values.
 *     • Mobile: specs now 2-col at tablet, 1-col at mobile (was flex-wrap).
 *     • Feature strip can now sit inside the hero card at the bottom
 *       (replaces the cert bar position) via context selector
 *       .custodi-hero-container .custodi-feature-strip. Negative margins
 *       bleed past the card's 32px padding; curves at 12px to match card.
 *     • Duplicate specs strip block removed — single source of truth now.
 *   v4.3
 *     • Shielding hero grid now 34/66 (was 50/50) — gives the blocking_summary
 *       text the width it needs, matches the content type.
 *     • Left column stacks number above descriptor (ACF: shielding_descriptor)
 *       instead of the horizontal 2-line label from v4.2.
 *     • .db-label / .db-label-line classes removed; .db-descriptor added.
 *   v4.2
 *     • Shielding rating restructured: number + inline 2-line ACF-driven label
 *       (shielding_label_line1, shielding_label_line2) stacked to its right.
 *       Old centered "SIGNAL ATTENUATION" label under the number removed.
 *   v4.1
 *     • Rating text safety net: overflow-wrap + word-break added so that
 *       an accidentally-long ACF value wraps inside the box instead of
 *       bleeding across the page. Removed white-space: nowrap.
 *   v4
 *     • Brand tag aligned to site-wide eyebrow standard (11px / 800 / 2px / #0088AA)
 *     • Shielding hero block rebuilt as 50/50 grid (fixes Image 1 overflow bug)
 *     • Body-text colour drift: #3A4045 → #2B3237 (titles) or #4A5568 (body)
 *     • Related-products price colour → #0088AA to match hero price treatment
 *   v3
 *     • Hero card two-layer architecture: inner .fusion-builder-row is the white card;
 *       outer .fusion-fullwidth stays transparent to avoid fullwidth rendering conflicts.
 *
 * Place in: wp-content/themes/Avada-Child-Theme/custodi-product.css
 *
 * Scope: Single WooCommerce product pages (/product/*)
 *        Loaded via custodi_product_page_styles() in functions.php
 *
 * NOT for: shop archives (custodi-shop.css)
 *          solutions pages (custodi-solutions.css)
 *          brand pages (custodi-brands.css)
 */

/* CSS variables — duplicated here so this file is self-contained */
:root {
    --custodi-blue: #00C4E8;
    --custodi-blue-dark: #0088AA;
    --headings-colour: #2B3237;
    --body-font-color: #4A5568;
    --content-background: #f4f3f1;
    --header-background: #2B3237;
    --border-color: #B8B3AD;
    --cool-light-sand: #EBE9E6;
    --cool-slate: #6B7780;
    --pure-white: #ffffff;
    --cool-teal-success: #5BA8A0;
    --muted-coral-alert: #C4846B;
    --cool-blue-grey: #C2D4DB;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

/* =================================================================
   CUSTODI SINGLE PRODUCT PAGE STYLES
   Add to: custodi-shop.css (or load separately for single products)
   ================================================================= */


/* =================================================================
   BRAND TAG — Above product title
   Aligned to site-wide eyebrow standard (custodi-site-eyebrow):
   11px / 800 / uppercase / 2px tracking / #0088AA
   Shield SVG sized via CSS (no hardcoded width/height on the SVG).
   ================================================================= */

.custodi-brand-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    color: #0088AA !important;
    margin-bottom: 10px !important;
}
.custodi-brand-tag svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}


/* =================================================================
   KEY SPECS STRIP
   Authoritative definition lives in the "Shortcode Refinements" block
   further down this file. Duplicate removed April 2026 to keep specs
   strip styling in one place.
   ================================================================= */


/* =================================================================
   USAGE NOTES — Neutral product-level info box
   -----------------------------------------------------------------
   Rendered by [custodi_usage_notes] shortcode (functions.php Hook
   29b). ACF-driven: field name `usage-notes` (Text Area).
   Sits inside the hero card's left column, below the product gallery.
   Empty ACF = shortcode returns nothing — no markup, no CSS target.

   Design intent:
     Neutral, professional "important info" treatment. Not a warning.
     Icon in site blue signals "note" without alarm. Subtle bone
     border + off-white fill lifts the box from the card's white
     surface without shouting. Works equally well for care tips,
     compatibility notes, disposal instructions, or any other
     per-product practical information.
   ================================================================= */

.custodi-usage-notes {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #FAF9F7 !important;
    border: 1px solid #EBE9E6 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin: 16px 0 0 0 !important;
    box-sizing: border-box !important;
}

.custodi-usage-notes__icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0088AA !important;
    margin-top: 1px !important;  /* optical alignment with first line of text */
}

.custodi-usage-notes__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.custodi-usage-notes__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;  /* prevents overflow in narrow columns */
}

.custodi-usage-notes__text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #4A5568 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custodi-usage-notes__text strong {
    color: #2B3237 !important;
    font-weight: 600 !important;
}

/* Responsive — tighten padding on mobile where the box shares
   narrow real estate with the gallery below it */
@media (max-width: 768px) {
    .custodi-usage-notes {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .custodi-usage-notes__text {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
}


/* =================================================================
   FEATURE STRIP — Dark bar below product summary
   ================================================================= */

.custodi-feature-strip {
    background: #2B3237 !important;
    padding: 32px 0 !important;
    /* Full viewport width — this is its own container, not inside a card */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    left: unset !important;
    right: unset !important;
    border-radius: 0 !important;
}
.custodi-feature-strip-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
}
.custodi-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
}
.custodi-feature-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    background: rgba(0, 196, 232, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.custodi-feature-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #00C4E8 !important;
    stroke: #00C4E8 !important;
}
.custodi-feature-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.custodi-feature-text strong {
    display: block !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
}
.custodi-feature-text span {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #C2D4DB !important;
    margin-top: 2px !important;
    font-family: 'Inter', sans-serif !important;
}


/* =================================================================
   FEATURE STRIP — Inside Hero Card (bottom position)
   =================================================================
   When the feature strip is placed INSIDE the hero card (replacing
   the cert bar's old position), it needs to bleed past the card's
   32px padding AND any Avada column/wrapper padding nested between
   the strip and the card edge. This is a two-layer escape.

   Strategy:
     1. Zero out padding on every Avada wrapper between the hero card
        (`.fusion-builder-row`) and the strip, so nothing introduces
        inset margin.
     2. Apply generous negative margins (-40px) on the strip itself to
        escape the card's 32px padding + any residual column gutter.
     3. Constrain visual content inside with explicit inner padding.

   Uses .custodi-hero-container context selector so these overrides
   only apply when the strip is inside the hero card — default
   full-viewport behaviour is preserved everywhere else.

   Avada layout setup:
     1. Remove the standalone feature strip container below the hero.
     2. Add a single full-width column at the bottom of the hero card's
        inner row.
     3. Drop [custodi_feature_strip] inside a Text Block in that column.
     4. Set the column's padding to 0 in Avada Design tab.
   ================================================================= */

/* ── Step 1: zero out padding on Avada wrappers inside the hero card
   that sit between the card and the strip. This is the critical fix
   — Avada columns carry their own inset that my negative margins
   alone can't escape reliably. */
.custodi-hero-container .fusion-builder-row .fusion-layout-column:has(.custodi-feature-strip),
.custodi-hero-container .fusion-builder-row .fusion-column-wrapper:has(.custodi-feature-strip),
.custodi-hero-container .fusion-builder-row .fusion-column-inner-bg:has(.custodi-feature-strip),
.custodi-hero-container .fusion-builder-row .fusion-text:has(.custodi-feature-strip) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

/* ── Step 2: strip itself bleeds through the card's 32px padding
   and sits flush against the card bottom. */
.custodi-hero-container .custodi-feature-strip {
    margin-left: -32px !important;
    margin-right: -32px !important;
    margin-bottom: -32px !important;
    margin-top: 24px !important;
    padding: 20px 32px !important;
    width: calc(100% + 64px) !important;
    max-width: none !important;
    border-radius: 0 0 12px 12px !important;
    box-sizing: border-box !important;
}

/* ── Step 3: inner container takes the full width of the strip. */
.custodi-hero-container .custodi-feature-strip-inner {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
}

/* fusion-text wrapper around the strip — same treatment as cert bar had */
.custodi-hero-container .fusion-text:has(.custodi-feature-strip) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}


/* =================================================================
   TRUST SIGNALS — Below add to cart
   ================================================================= */

.custodi-trust-signals {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #EBE9E6 !important;
}
.custodi-trust-signal {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    background: #f4f3f1 !important;
    border: 1px solid #EBE9E6 !important;
}
.custodi-trust-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 6px !important;
    background: rgba(0, 136, 170, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.custodi-trust-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: #0088AA !important;
    stroke: #0088AA !important;
}
.custodi-trust-signal span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4A5568 !important;
    line-height: 1.3 !important;
    font-family: 'Inter', sans-serif !important;
}


/* =================================================================
   CERTIFICATION BAR — Below product tabs
   ================================================================= */

.custodi-cert-bar {
    /* Avada column padding is zeroed in builder.
       Negative margins escape only the hero card's 32px padding. */
    margin-left: -32px !important;
    margin-right: -32px !important;
    margin-bottom: -32px !important;
    margin-top: 12px !important;
    padding: 18px 40px !important;
    background: #6B7780 !important;
    border-top: 1px solid #5A666F !important;
    border-radius: 0 0 12px 12px !important;
    box-sizing: border-box !important;
    width: calc(100% + 64px) !important;
}

/* fusion-text wrapper around cert bar — full width, no margin */
.fusion-text:has(.custodi-cert-bar) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.custodi-cert-bar-inner {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    align-items: center !important;
}
.custodi-cert-item {
    text-align: center !important;
    white-space: nowrap !important;
}
.custodi-cert-value {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    white-space: nowrap !important;
}
.custodi-cert-label {
    font-size: 11px !important;
    color: #C2D4DB !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
}
.custodi-cert-divider {
    width: 1px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.25) !important;
}


/* =================================================================
   SINGLE PRODUCT — General overrides for Avada defaults
   ================================================================= */

/* Product title — larger, bolder, commanding */
body.single-product .product_title,
body.single-product .entry-title,
body.single-product h1.fusion-title-heading {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
}

/* Price — teal, prominent. Selector chain widened to cover
   .woocommerce-Price-amount, .amount, and bdi so weight/family
   propagate all the way to the innermost element rendering the
   number. Weight 700 for reliable bold rendering with the current
   system-font fallback stack (600 renders too light when Inter is
   not loaded); revisit to 600 once Inter is configured in Avada. */
body.single-product .price,
body.single-product p.price,
body.single-product .price .woocommerce-Price-amount,
body.single-product .price .amount,
body.single-product .price bdi,
body.single-product p.price .woocommerce-Price-amount,
body.single-product p.price .amount,
body.single-product p.price bdi {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0088AA !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    margin-bottom: 4px !important;
}

/* POA badge inside the .price element — inherit price sizing so POA
   reads at the same visual weight as "$749.00". Overrides any archive-
   card sizing that may leak in. */
body.single-product .price .custodi-poa,
body.single-product p.price .custodi-poa,
body.single-product .price span.custodi-poa {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
}
body.single-product .price del {
    color: #B8B3AD !important;
    font-size: 20px !important;
}
body.single-product .price ins {
    text-decoration: none !important;
}

/* Short description */
body.single-product .woocommerce-product-details__short-description,
body.single-product .product .summary .short-description {
    font-size: 15px !important;
    color: #4A5568 !important;
    line-height: 1.7 !important;
    margin-bottom: 8px !important;
}

/* Stock status */
body.single-product .stock.in-stock {
    color: #5BA8A0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
body.single-product .stock.out-of-stock {
    color: #C4846B !important;
    font-weight: 700 !important;
}

/* Add to cart button */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
    background: #0088AA !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 14px 32px !important;
    transition: all 0.2s !important;
    font-family: 'Inter', sans-serif !important;
}
body.single-product .single_add_to_cart_button:hover {
    background: #007A99 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 170, 0.25) !important;
}

/* Quantity input */
body.single-product .quantity .qty {
    border: 1px solid #B8B3AD !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #2B3237 !important;
}

/* Quantity +/- buttons */
body.single-product .quantity .minus,
body.single-product .quantity .plus,
body.single-product .quantity .qty-minus,
body.single-product .quantity .qty-plus {
    transition: all 0.2s ease !important;
}

body.single-product .quantity .minus:hover,
body.single-product .quantity .plus:hover,
body.single-product .quantity .qty-minus:hover,
body.single-product .quantity .qty-plus:hover {
    background: #0088AA !important;
    color: #FFFFFF !important;
    border-color: #0088AA !important;
}

/* Tabs — restyle Avada's default orange/teal tabs */
body.single-product .woocommerce-tabs ul.tabs li a,
body.single-product .woocommerce-tabs .tabs li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6B7780 !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 14px 28px !important;
    transition: all 0.2s !important;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #2B3237 !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #0088AA !important;
    border-bottom-color: #0088AA !important;
    font-weight: 700 !important;
    background: transparent !important;
}
body.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #EBE9E6 !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
    background: transparent !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
    display: none !important;
}

/* Tab content panel */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Product meta (categories/tags) — subtle, readable, tight */
body.single-product .product_meta,
body.single-product .product_meta > span {
    font-size: 12px !important;
    color: #6B7780 !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #EBE9E6 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.single-product .product_meta > span {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
body.single-product .product_meta a,
body.single-product .product_meta a:visited,
body.single-product .product_meta span a {
    color: #0088AA !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.single-product .product_meta a:hover {
    text-decoration: underline !important;
    color: #006d8a !important;
}
/* Override Avada's inline link color on meta */
body.single-product .fusion-meta-tb a,
body.single-product .fusion-meta-tb a:visited,
body.single-product .product_meta .posted_in a,
body.single-product .product_meta .tagged_as a {
    color: #0088AA !important;
}

/* Social sharing — hidden (too visually loud, pulls focus from product) */
/* Remove this rule to bring them back */
body.single-product .fusion-sharing-box,
body.single-product .fusion-social-links-footer {
    display: none !important;
}


/* =================================================================
   SINGLE PRODUCT — Page background (sand, so white card reads)
   Applied to both individual product layouts AND Layout Section.
   body.single-product   = WooCommerce class (per-product layouts)
   body.custodi-product-page = our injected class (Layout Section)
   ================================================================= */

body.single-product,
body.custodi-product-page,
body.single-product #wrapper,
body.custodi-product-page #wrapper,
body.single-product #main,
body.custodi-product-page #main,
body.single-product #content,
body.custodi-product-page #content,
body.single-product .fusion-page-content-wrap,
body.custodi-product-page .fusion-page-content-wrap {
    background-color: #f4f3f1 !important;
}

/* Kill any Avada injected white backgrounds on the content area.
   Only strip vertical padding — horizontal padding on enclosed containers
   controls the inner content width and must not be touched. */
body.single-product #main .fusion-fullwidth,
body.custodi-product-page #main .fusion-fullwidth,
body.single-product #content .fusion-fullwidth,
body.custodi-product-page #content .fusion-fullwidth {
    background: transparent !important;
}

/* Strip vertical padding from all product page containers —
   spacing is controlled per-container by the named class rules below. */
body.single-product .custodi-hero-container,
body.single-product .custodi-feature-container,
body.single-product .custodi-description-container,
body.single-product .custodi-tabs-container,
body.single-product .custodi-related-container,
body.custodi-product-page .custodi-hero-container,
body.custodi-product-page .custodi-feature-container,
body.custodi-product-page .custodi-description-container,
body.custodi-product-page .custodi-tabs-container,
body.custodi-product-page .custodi-related-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Kill page title bar on single products (we have breadcrumb + title in hero card) */
body.single-product .fusion-page-title-bar,
body.custodi-product-page .fusion-page-title-bar {
    display: none !important;
}


/* =================================================================
   SINGLE PRODUCT — Hero Container (White Card)

   ARCHITECTURE — Two-layer approach (Avada-proof):

   WHY: Avada's .fusion-fullwidth uses negative margins to bleed to
   the full viewport width. Applying border-radius/shadow to a full-
   viewport element places the rounded corners off-screen (invisible).
   Setting width/max-width fights Avada's negative-margin fullwidth
   mechanism and causes layout breaks.

   LAYER 1 — .fusion-fullwidth.custodi-hero-container (outer container)
     Transparent background. Vertical padding only for card breathing
     room. Do NOT apply border-radius, shadow, border, or width here.

   LAYER 2 — .custodi-hero-container .fusion-builder-row (inner row)
     THE VISUAL WHITE CARD. Avada already gives this element:
       max-width: 1200px; margin: 0 auto;
     We add: background, border-radius, shadow, border, padding.
     This element stays within the viewport so rounded corners render.

   AVADA UI SETUP (one-time per container):
     Hero container → Design tab → Background → set to "No Background"
     Hero container → Design tab → Padding → set all to 0
     (removes Avada's inline background-color and padding attributes,
     so our CSS + JS override takes clean effect)
   ================================================================= */

/* ── Layer 1: Outer container — transparent spacer only ──
   Earlier versions left a white strip visible in the full-viewport outer
   container. Fixing that here with a multi-angle attack:
     - Suppress background on the container itself (both shorthand and
       background-color)
     - Suppress Avada's absolutely-positioned .fusion-fullwidth-color
       pseudo-background overlay (rendered as a child div)
     - Suppress any background on the direct children Avada may inject
       (builder row wrappers, background layers)
     - Force parent #main / #content to keep the sand page background */

body.single-product .custodi-hero-container,
body.custodi-product-page .custodi-hero-container,
.fusion-fullwidth.custodi-hero-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    /* Explicitly clear any card-shaping from this level */
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    /* Don't constrain width — let Avada's fullwidth mechanism do its job */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Suppress Avada's .fusion-fullwidth-color pseudo-background overlay.
   Avada sometimes renders an absolutely-positioned child div as a
   visual background layer, bypassing the parent's background property. */
.custodi-hero-container > .fusion-fullwidth-color,
.custodi-hero-container .fusion-fullwidth-color {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Belt-and-braces: force transparency on any direct child of the
   outer container that isn't the visual white card (the inner builder
   row). Covers background-painting wrappers Avada may inject between
   the container and the row. */
.custodi-hero-container > :not(.fusion-builder-row):not(.fusion-row) {
    background: transparent !important;
    background-color: transparent !important;
}

/* If a parent content wrapper is painting white, push sand through it
   for the hero region. These rules already exist higher in the file
   for body.single-product #main / #content etc; this is a final guard
   for the hero-adjacent space specifically. */
body.single-product .custodi-hero-container + *,
body.custodi-product-page .custodi-hero-container + * {
    /* No background changes — sibling containers own their own background.
       This rule exists as a hook for future adjustments. */
}

/* ── Layer 2: Inner row — the visual white card ── */

body.single-product .custodi-hero-container .fusion-builder-row,
body.single-product .custodi-hero-container .fusion-row,
body.custodi-product-page .custodi-hero-container .fusion-builder-row,
body.custodi-product-page .custodi-hero-container .fusion-row,
.fusion-fullwidth.custodi-hero-container .fusion-builder-row,
.fusion-fullwidth.custodi-hero-container .fusion-row {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #EBE9E6 !important;
    padding: 32px !important;
    /* Width and centering already provided by Avada, but we enforce */
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ── Container spacing (non-hero) ── */

/* Container spacing — margin-top is intentionally NOT set here.
   Control spacing between containers via the Avada builder:
   Design tab → Margin → Top on each container.
   Only padding is zeroed here to prevent Avada's internal spacing fighting our cards. */

/* Feature strip — zero padding only, margin set in builder */
body.single-product .custodi-feature-container,
body.custodi-product-page .custodi-feature-container {
    padding: 0 !important;
}

/* Description card — zero padding only */
body.single-product .custodi-description-container,
body.custodi-product-page .custodi-description-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Tabs card — zero padding only */
body.single-product .custodi-tabs-container,
body.custodi-product-page .custodi-tabs-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Related products — zero padding, bottom breathing room before footer */
body.single-product .custodi-related-container,
body.custodi-product-page .custodi-related-container {
    margin-bottom: 0 !important;
    padding: 0 0 48px 0 !important;
}

/* Gallery column — clean up spacing */
body.single-product .woocommerce-product-gallery {
    margin-bottom: 0 !important;
}

/* Thumbnails — tighter row */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
    gap: 8px !important;
    margin-top: 12px !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #EBE9E6 !important;
    transition: border-color 0.2s ease !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover,
body.single-product .woocommerce-product-gallery .flex-control-thumbs li.active {
    border-color: #0088AA !important;
}

/* Signal icons row below main image — if present */
body.single-product .woocommerce-product-gallery img {
    border-radius: 8px !important;
}

/* Breadcrumb — add one above the card if Avada outputs it */
body.single-product .woocommerce-breadcrumb,
body.single-product .fusion-breadcrumbs {
    font-size: 12px !important;
    color: #6B7780 !important;
    padding: 16px 0 0 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

body.single-product .woocommerce-breadcrumb a,
body.single-product .fusion-breadcrumbs a {
    color: #0088AA !important;
    text-decoration: none !important;
}

body.single-product .woocommerce-breadcrumb a:hover,
body.single-product .fusion-breadcrumbs a:hover {
    text-decoration: underline !important;
}


/* =================================================================
   SINGLE PRODUCT — Description + Lifestyle Image Section
   Shortcode: [custodi_product_description]

   v2 layout (22 April 2026):
   Image band on top (16:9 aspect), text block below in single column
   with a 760px max-width for readability. Replaces the previous
   text-left / image-right split which left the image column visually
   starved when body copy grew past ~200 words.
   ================================================================= */

/* Outer wrapper — white card, same width as hero card */
.custodi-product-description {
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EBE9E6 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* Inner wrapper — stacked flow (image on top, text below).
   No grid here; block flow gives natural vertical rhythm and
   lets the image band sit flush to the card's top radius. */
.custodi-product-description-inner {
    display: block !important;
}

/* Image band on top — 16:9 aspect, full card width, flush to edges.
   Explicit height in addition to aspect-ratio for older Avada themes
   that strip aspect-ratio or when the background-image's natural
   height would otherwise override (some background-size cover
   interactions). The container sizes itself; the image tiles
   within at cover. */
.custodi-desc-image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 9/16 = 0.5625 — aspect-ratio fallback */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Reset previous min-height from v1 layout */
    min-height: 0 !important;
    max-height: 680px !important; /* cap on ultra-wide viewports */
}

/* Text block below the image — full card width minus generous
   horizontal padding. Previous version constrained text to 800px
   centred, which created visible empty margins inside the card —
   the text retreated from the image's confident full-width. This
   version lets the text match the image's horizontal reach, with
   padding doing the breathing-room work instead of a max-width. */
.custodi-desc-text {
    padding: 56px 64px 60px !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
}

/* "About This Product" eyebrow label */
.custodi-desc-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #0088AA !important;
    margin-bottom: 18px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Description title — anchors the full-width section below the
   image band. Bumped to 32px to hold its own against the 16:9
   image above it. */
.custodi-desc-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    line-height: 1.2 !important;
    margin: 0 0 28px 0 !important;
    letter-spacing: -0.4px !important;
    font-family: 'Inter', sans-serif !important;
    text-wrap: balance !important;
}

/* Description body paragraphs */
.custodi-desc-body p {
    font-size: 14px !important;
    color: #4A5568 !important;
    line-height: 1.75 !important;
    margin: 0 0 16px 0 !important;
}

.custodi-desc-body p:last-child {
    margin-bottom: 0 !important;
}

.custodi-desc-body strong {
    color: #2B3237 !important;
    font-weight: 600 !important;
}

.custodi-desc-body a {
    color: #0088AA !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(0, 136, 170, 0.3) !important;
    text-underline-offset: 2px !important;
}

.custodi-desc-body a:hover {
    text-decoration-color: #0088AA !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .custodi-product-description {
        width: calc(100% - 40px) !important;
    }
    .custodi-desc-text {
        padding: 44px 44px 48px !important;
    }
    .custodi-desc-title {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .custodi-product-description {
        width: calc(100% - 24px) !important;
        border-radius: 10px !important;
    }
    .custodi-desc-image {
        /* On mobile, 16:9 becomes a bit squat — use 4:3 for more presence
           on narrow screens where verticality reads better */
        aspect-ratio: 4 / 3 !important;
        padding-bottom: 75% !important; /* 4:3 fallback */
    }
    .custodi-desc-text {
        padding: 32px 24px 36px !important;
    }
    .custodi-desc-title {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }
    .custodi-desc-body p {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
    }
}


/* =================================================================
   SINGLE PRODUCT — Product Detail Tabs
   Shortcode: [custodi_product_tabs]
   ================================================================= */

/* Outer wrapper — white card at 1200px.
   Margin controlled by container, not the card itself. */
.custodi-product-tabs {
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EBE9E6 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* Tab navigation */
.custodi-tabs-nav {
    display: flex !important;
    border-bottom: 2px solid #EBE9E6 !important;
}

.custodi-tab-btn {
    flex: 1 !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6B7780 !important;
    text-align: center !important;
    cursor: pointer !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-tab-btn:hover {
    color: #2B3237 !important;
}

.custodi-tab-btn.active {
    color: #0088AA !important;
    border-bottom-color: #0088AA !important;
    font-weight: 700 !important;
}

/* Tab panels */
.custodi-tab-panel {
    display: none !important;
    padding: 40px !important;
}

.custodi-tab-panel.active {
    display: block !important;
}

/* ── Specs Table ── */
/* ── Specifications Tab: 2-column grid layout ── */
.custodi-specs-grid {
    display: flex !important;
    gap: 0 !important;
    padding: 28px 32px !important;
    align-items: stretch !important;
}

.custodi-specs-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.custodi-specs-divider {
    width: 1px !important;
    background: #EBE9E6 !important;
    margin: 0 32px !important;
    flex-shrink: 0 !important;
}

.custodi-spec-row {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #EBE9E6 !important;
    gap: 4px !important;
}

.custodi-spec-row:last-child {
    border-bottom: none !important;
}

.custodi-spec-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #6B7780 !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-spec-value {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2B3237 !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    letter-spacing: -0.3px !important;
}

/* ── Shielding Hero Block ──
   Two halves:
     Left  (50%) — .custodi-shielding-db (rating headline + label)
     Right (50%) — .custodi-shielding-text (blocking_summary from ACF)
   A subtle vertical divider separates the two halves.
*/
.custodi-shielding-hero {
    background: linear-gradient(135deg, #2B3237 0%, #3A4045 100%) !important;
    border-radius: 10px !important;
    padding: 32px 40px !important;
    margin-bottom: 28px !important;
    display: grid !important;
    grid-template-columns: 34% 66% !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Left column — 34% width.
   Stacks the rating number (row 1) above an optional descriptor (row 2).
   Both centred horizontally. */
.custodi-shielding-db {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 8px 24px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
}

.custodi-shielding-db .db-value {
    font-size: 52px !important;
    font-weight: 800 !important;
    color: #00C4E8 !important;
    line-height: 1 !important;
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: -1.5px !important;
    /* Safety net: if the ACF value is longer than expected (e.g. an
       entire descriptor got pasted into the rating field), wrap inside
       the box instead of overflowing across the page. Rating should
       normally be 4–8 characters ("103dB", "N/A", "60dB+"). */
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Descriptor — sits below the rating number. Reads as technical context
   (e.g. "Average Attenuation, 10MHz–10GHz" or "Keystone Compliance verified").
   Deliberately sized down so the rating number stays the visual anchor. */
.custodi-shielding-db .db-descriptor {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #C2D4DB !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.custodi-shielding-text {
    padding: 8px 16px 8px 32px !important;
}

.custodi-shielding-text p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #C2D4DB !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.custodi-shielding-text p + p {
    margin-top: 10px !important;
}

/* If only one side is populated, let it fill the full hero width */
.custodi-shielding-hero > .custodi-shielding-db:only-child,
.custodi-shielding-hero > .custodi-shielding-text:only-child {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    padding: 8px !important;
}

/* ── Signal Cards Grid ── */
.custodi-signals-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

.custodi-signal-card {
    background: #f4f3f1 !important;
    border: 1px solid #EBE9E6 !important;
    border-radius: 10px !important;
    padding: 24px 16px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.custodi-signal-card:hover {
    border-color: #0088AA !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 170, 0.1) !important;
}

.custodi-signal-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: rgba(0, 136, 170, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    color: #0088AA !important;
}

.custodi-signal-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.custodi-signal-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    margin-bottom: 3px !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-signal-detail {
    font-size: 15px !important;
    color: #4A5568 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 500 !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .custodi-product-tabs {
        width: calc(100% - 40px) !important;
    }
    .custodi-signals-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .custodi-tab-panel {
        padding: 28px !important;
    }
}

@media (max-width: 768px) {
    .custodi-product-tabs {
        width: calc(100% - 24px) !important;
        border-radius: 10px !important;
    }
    .custodi-tabs-nav {
        flex-wrap: wrap !important;
    }
    .custodi-tab-btn {
        flex: 1 1 50% !important;
        font-size: 13px !important;
        padding: 14px 16px !important;
    }
    .custodi-tab-panel {
        padding: 24px 20px !important;
    }
    .custodi-shielding-hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 28px 24px !important;
        gap: 24px !important;
    }
    .custodi-shielding-hero .custodi-shielding-db {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 0 0 24px 0 !important;
    }
    .custodi-shielding-hero .custodi-shielding-text {
        padding: 0 !important;
        text-align: left !important;
    }
    .custodi-shielding-hero .db-value {
        font-size: 44px !important;
    }
    .custodi-shielding-hero .db-descriptor {
        font-size: 12px !important;
    }
    .custodi-signals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =================================================================
   SINGLE PRODUCT — Use Cases Tab
   ================================================================= */

.custodi-use-cases-panel {
    padding: 32px 36px !important;
}

.custodi-use-cases-intro {
    margin-bottom: 24px !important;
}

.custodi-use-cases-intro p {
    font-size: 14px !important;
    color: #4A5568 !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
}

.custodi-use-cases-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

.custodi-use-case-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px !important;
    background: #F4F3F1 !important;
    border-radius: 10px !important;
    border: 1px solid #EBE9E6 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.custodi-use-case-card:hover {
    border-color: #1BA8C8 !important;
    box-shadow: 0 2px 12px rgba(27, 168, 200, 0.1) !important;
}

.custodi-uc-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background: #2B3237 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
}

.custodi-uc-icon svg {
    width: 100% !important;
    height: 100% !important;
    stroke: #ffffff !important;
}

.custodi-uc-content {
    flex: 1 !important;
}

.custodi-uc-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    margin-bottom: 5px !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-uc-desc {
    font-size: 12px !important;
    color: #4A5568 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* =================================================================
   SINGLE PRODUCT — Media & Downloads Tab
   ================================================================= */

.custodi-media-panel {
    padding: 32px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.custodi-media-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #1BA8C8 !important;
    margin-bottom: 12px !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-downloads-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.custodi-download-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    background: #F4F3F1 !important;
    border: 1px solid #EBE9E6 !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}

.custodi-download-card:hover {
    border-color: #1BA8C8 !important;
}

.custodi-specsheet-card {
    background: #ffffff !important;
    border: 1.5px solid #1BA8C8 !important;
    box-shadow: 0 2px 12px rgba(27, 168, 200, 0.08) !important;
}

.custodi-dl-icon {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    background: #2B3237 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px !important;
}

.custodi-dl-icon--cert {
    background: #1BA8C8 !important;
}

.custodi-dl-icon svg {
    width: 100% !important;
    height: 100% !important;
    stroke: #ffffff !important;
}

.custodi-dl-info {
    flex: 1 !important;
}

.custodi-dl-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    margin-bottom: 3px !important;
    font-family: 'Inter', sans-serif !important;
}

.custodi-dl-meta {
    font-size: 11px !important;
    color: #6B7780 !important;
}

.custodi-dl-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 20px !important;
    background: #1BA8C8 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
    transition: background 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
}

.custodi-dl-btn:hover {
    background: #1590A8 !important;
    color: #ffffff !important;
}

.custodi-dl-btn--secondary {
    background: #2B3237 !important;
}

.custodi-dl-btn--secondary:hover {
    background: #3A4045 !important;
}

/* Video card icon — charcoal background matches the PDF card's
   treatment. Icon is a horizontal film strip: white body with
   sprocket holes along the top and bottom edges, rendered as
   fills (not strokes) so the punch-outs read cleanly at 40px.
   The fill overrides below neutralise the base .custodi-dl-icon
   svg stroke rule which was designed for outline-style icons. */
.custodi-dl-icon--video {
    background: #2B3237 !important;
}

.custodi-dl-icon--video svg {
    fill: #ffffff !important;
    stroke: none !important;
}

/* Button reset — .custodi-dl-btn was previously only applied to <a>
   tags. The video card uses a <button> so users can click to open
   the lightbox without a URL change. These rules neutralise the
   default browser button chrome (border, background inheritance)
   and ensure the button matches the anchor-styled buttons visually. */
button.custodi-dl-btn {
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    /* matches default a.custodi-dl-btn line-height for visual parity */
    line-height: 1 !important;
}

button.custodi-dl-btn:focus-visible {
    outline: 2px solid #00C4E8 !important;
    outline-offset: 2px !important;
}

/* Legacy inline video embed — kept for backward compatibility if
   [custodi_get_video_embed] is called directly anywhere else. The
   media-panel card + lightbox pattern replaces this for the Media
   & Downloads tab as of v4.9. */
.custodi-video-wrap {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #2B3237 !important;
}

.custodi-video-wrap iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 10px !important;
}


/* =================================================================
   VIDEO LIGHTBOX — Full-screen overlay player
   Rendered in footer by custodi_video_lightbox_scaffold() (functions.php).
   Shown on click of any .custodi-video-trigger button (currently
   only the Media tab's video card uses this, but the pattern is
   reusable across the site).

   Design intent:
     · Deep-charcoal backdrop at ~92% opacity — keeps peripheral
       context visible behind the video (so it doesn't feel like
       a modal taking over), reads as "overlay" not "page".
     · 16:9 frame centred, maxes at 1100px wide or 85vh tall —
       whichever hits first — so the video stays well-proportioned
       on every screen size without touching viewport edges.
     · Close button top-right, generous hit area (44×44), neutral
       white on charcoal — visible but not shouty.
     · Fade-in / fade-out transitions at 180ms — quick enough to
       feel responsive, slow enough to read as intentional.
   ================================================================= */

.custodi-video-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important; /* above everything including Avada sticky header */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
}

.custodi-video-lightbox--open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.custodi-video-lightbox__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(17, 21, 24, 0.92) !important;
    cursor: pointer !important;
}

.custodi-video-lightbox__inner {
    position: relative !important;
    width: min(90vw, 1100px) !important;
    max-height: 85vh !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #000000 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.custodi-video-lightbox__frame {
    position: absolute !important;
    inset: 0 !important;
    background: #000000 !important;
}

.custodi-video-lightbox__frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

/* Close button — sits outside the video frame at top-right,
   stays visible over the video during playback */
.custodi-video-lightbox__close {
    position: absolute !important;
    top: -48px !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    padding: 0 !important;
}

.custodi-video-lightbox__close:hover,
.custodi-video-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
}

/* Body scroll lock — applied by JS via body.custodi-video-lightbox-active */
body.custodi-video-lightbox-active {
    overflow: hidden !important;
}

/* Responsive — tighten margins and move close button inside frame
   on very small screens where the -48px offset would push it
   above the viewport */
@media (max-width: 640px) {
    .custodi-video-lightbox__inner {
        width: 94vw !important;
    }
    .custodi-video-lightbox__close {
        top: 8px !important;
        right: 8px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Responsive — use cases 2 col on tablet */
@media (max-width: 768px) {
    .custodi-use-cases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .custodi-use-cases-panel,
    .custodi-media-panel {
        padding: 24px 20px !important;
    }
    .custodi-download-card {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    .custodi-use-cases-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =================================================================
   SINGLE PRODUCT — Hide Default WooCommerce Related Products
   ================================================================= */
body.single-product .related.products {
    display: none !important;
}

/* =================================================================
   SINGLE PRODUCT — Related Products (Shortcode Cards)
   ================================================================= */

.custodi-related-products {
    max-width: 1200px !important;
    width: calc(100% - 60px) !important;
    margin: 8px auto 40px !important;
}

.custodi-related-heading {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    margin-bottom: 24px !important;
}

.custodi-related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.custodi-rp-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.custodi-rp-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
}

.custodi-rp-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.custodi-rp-link:hover {
    color: inherit !important;
}

.custodi-rp-img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f4f3f1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.custodi-rp-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.custodi-rp-card:hover .custodi-rp-img img {
    transform: scale(1.04) !important;
}

.custodi-rp-brand {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    background: rgba(58,64,69,0.85) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2 !important;
}

.custodi-rp-body {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.custodi-rp-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.custodi-rp-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #6B7780 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    flex: 1 !important;
}

.custodi-rp-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 16px !important;
    border-top: 1px solid #EBE9E6 !important;
}

.custodi-rp-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0088AA !important;
}

.custodi-rp-price span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6B7780 !important;
    display: block !important;
    margin-top: 1px !important;
}

.custodi-rp-cta {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #00C4E8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: gap 0.2s ease !important;
}

.custodi-rp-card:hover .custodi-rp-cta {
    gap: 8px !important;
}

.custodi-rp-cta svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .custodi-related-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .custodi-related-products {
        width: calc(100% - 40px) !important;
    }
}

@media (max-width: 768px) {
    .custodi-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .custodi-related-products {
        width: calc(100% - 24px) !important;
    }
    .custodi-related-heading {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .custodi-related-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =================================================================
   SINGLE PRODUCT — Shortcode Refinements (v25)
   ================================================================= */

/* Key specs strip — modern, minimal, transparent.
   Sits cleanly on the hero card's white background. Cells are separated
   by subtle vertical dividers only; no outer box. Left-aligned values so
   multi-line content reads naturally. Inter throughout for prose values;
   apply .custodi-key-spec-value--mono to any individual value you want
   in JetBrains Mono (e.g. purely-numeric values like "103dB"). */

/* ================================================================
   SINGLE PRODUCT PAGE — POA HANDLING
   For POA products:
     - Price position renders "POA" via the shared .custodi-poa filter
       (font-size / color inherited from .price element)
     - Availability text is "Available to Order" (orange)
     - Add to Cart is suppressed; [custodi_poa_cta] renders a full-width
       Get a Quote button matching Add to Cart visual language
   ================================================================ */

/* In Stock text on single product page — punchy Tailwind green
   (matches the archive card treatment). 14px matches Available
   to Order below. */
body.single-product .stock.in-stock,
body.single-product .stock.in-stock *,
body.single-product p.stock.in-stock {
    color: #22c55e !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Out of Stock text on single product page — red */
body.single-product .stock.out-of-stock,
body.single-product .stock.out-of-stock *,
body.single-product p.stock.out-of-stock {
    color: #ef4444 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Available to Order — used inside the POA block (rendered by the
   [custodi_poa_cta] shortcode when the standard stock element is
   suppressed via is_purchasable = false). Matches the visual weight
   and size of WC's "In stock" text; colour carries the signal. */
.custodi-poa-availability {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    margin: 0 0 14px !important;
}

/* Fallback rule kept in case any code path still emits the standard
   WooCommerce stock element with the available-to-order class. */
body.single-product .stock.available-to-order,
body.single-product .stock.available-to-order *,
body.single-product p.stock.available-to-order {
    color: #f97316 !important;
    font-weight: 700 !important;
}

/* Get a Quote CTA — solid button visually matching .single_add_to_cart_button;
   click behaviour comes from the .custodi-enquire-trigger class which is
   the same trigger used on the shop cards (opens the enquiry modal). */
.custodi-poa-cta {
    display: inline-block !important;
    background: #0088AA !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 14px 32px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    text-align: center !important;
}

body.single-product .custodi-poa-cta {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.custodi-poa-cta:hover {
    background: #007A99 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 170, 0.25) !important;
}


.custodi-key-specs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin: 18px 0 24px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.custodi-key-spec {
    padding: 14px 18px !important;
    text-align: left !important;
    border-right: 1px solid #EBE9E6 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    gap: 6px !important;
}

.custodi-key-spec:first-child {
    padding-left: 0 !important;
}

.custodi-key-spec:last-child {
    padding-right: 0 !important;
    border-right: none !important;
}

.custodi-key-spec-label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #6B7780 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.custodi-key-spec-value {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2B3237 !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    margin: 0 !important;
}

/* Optional modifier for numeric / technical values that benefit
   from mono (e.g. "103dB (10MHz–10GHz)"). Apply per value as needed. */
.custodi-key-spec-value--mono {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    font-weight: 600 !important;
}

/* Trust signals — tighter, polished, correct selectors */
.custodi-trust-signals {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 16px 0 !important;
}

.custodi-trust-signal {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #f4f3f1 !important;
    border-radius: 8px !important;
    border: 1px solid #EBE9E6 !important;
    transition: border-color 0.2s ease !important;
}

.custodi-trust-signal:hover {
    border-color: #D2CEC8 !important;
}

.custodi-trust-signal .custodi-trust-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    background: rgba(0, 136, 170, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0088AA !important;
}

.custodi-trust-signal .custodi-trust-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.custodi-trust-signal .custodi-trust-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4A5568 !important;
    line-height: 1.3 !important;
}

.custodi-trust-signal .custodi-trust-sublabel {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #6B7780 !important;
    line-height: 1.3 !important;
}

/* Brand tag — eyebrow standard (see earlier definition) */
.custodi-brand-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    color: #0088AA !important;
    margin-bottom: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.custodi-brand-tag svg,
.custodi-brand-tag .brand-icon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
}

/* Short description — links styled */
body.single-product .woocommerce-product-details__short-description a {
    color: #0088AA !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(0, 136, 170, 0.3) !important;
    text-underline-offset: 2px !important;
}
body.single-product .woocommerce-product-details__short-description a:hover {
    text-decoration-color: #0088AA !important;
}

/* Tighten bottom of hero card — remove trailing space */
body.single-product .product_meta {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove extra margin from last element in right column */
body.single-product .fusion-content-layout-column > .fusion-builder-row > .fusion-layout-column:last-child .fusion-text:last-child,
body.single-product .fusion-meta-tb:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* =================================================================
   RESPONSIVE — Single product
   ================================================================= */

@media (max-width: 768px) {
    /* Hero card — reduce padding on tablet/mobile */
    body.single-product .custodi-hero-container {
        margin: 16px 12px !important;
        padding: 24px 20px !important;
        border-radius: 10px !important;
    }

    .custodi-key-specs {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .custodi-key-spec {
        border-bottom: 1px solid #EBE9E6 !important;
        padding: 14px 16px !important;
    }
    /* On tablet, cells in row 1 (items 1–2) get bottom border; row 2 loses it */
    .custodi-key-spec:nth-last-child(-n+2) {
        border-bottom: none !important;
    }
    /* Right-border handling on 2-col layout: remove from right-column items */
    .custodi-key-spec:nth-child(2n) {
        border-right: none !important;
        padding-right: 0 !important;
    }
    .custodi-key-spec:nth-child(2n+1) {
        padding-left: 0 !important;
    }
    .custodi-feature-strip-inner {
        flex-wrap: wrap !important;
    }
    .custodi-feature-item {
        flex: 1 1 45% !important;
    }
    .custodi-trust-signals {
        grid-template-columns: 1fr !important;
    }
    .custodi-cert-bar-inner {
        flex-wrap: wrap !important;
        gap: 24px !important;
    }
    .custodi-cert-divider {
        display: none !important;
    }
    body.single-product .product_title,
    body.single-product .entry-title,
    body.single-product h1.fusion-title-heading {
        font-size: 26px !important;
    }
    body.single-product .price,
    body.single-product p.price {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .custodi-feature-item {
        flex: 1 1 100% !important;
    }
    .custodi-key-specs {
        grid-template-columns: 1fr !important;
    }
    .custodi-key-spec {
        border-right: none !important;
        border-bottom: 1px solid #EBE9E6 !important;
        padding: 14px 0 !important;
    }
    .custodi-key-spec:last-child {
        border-bottom: none !important;
    }
}


/* ============================================================
   PART NO. (SKU) — top of single-product summary
   Rendered by custodi_show_product_sku_at_top() in functions.php
   at priority 25 (between short description and add-to-cart).
   Default WooCommerce .product_meta SKU is hidden site-wide via
   wp_head inline style so this is the single source of truth.
   ============================================================ */
.custodi-product-sku {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 18px 0 12px !important;
    padding: 10px 14px !important;
    background: #F4F2EF !important;
    border-left: 3px solid #0088AA !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}
.custodi-product-sku .custodi-sku-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #6B7780 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}
.custodi-product-sku .custodi-sku-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2B3237 !important;
    letter-spacing: 0.5px !important;
}