/* =============================================
   IMMUNITY.CSS — Global Element Isolation Layer
   =============================================
   PURPOSE:
   Reset Storefront's content wrapper constraints
   so that Globlazer pages control their own layout.

   LOADED AFTER: core.css
   LOADED BEFORE: components.css
   ============================================= */


/* =============================================
   1. CONTENT WRAPPER RESET (#content > .col-full)
   Storefront wraps all page content in these two
   containers with max-width, padding, and margin.
   We reset them to transparent wrappers so that:
     - Globlazer pages use their own breakpoint system
     - Full-width sections (hero, atmosphere) are not clipped
     - Elementor Pro can manage its own layout
   WooCommerce pages are unaffected because they have
   their own .woocommerce inner containers.
   ============================================= */

#content.site-content {
    padding: 0 !important;
    margin: 0 !important;
}

#content>.col-full {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* =============================================
   2. .col-full — FULLY TRANSPARENT ON ALL PAGES
   Storefront PHP (header.php / footer.php) outputs
   #content > .col-full on every page. We make it
   completely invisible so that width constraints
   are handled exclusively by inner containers:
     - .gl-container  (child-theme page.php, archive templates)
     - Tailwind utilities (custom narrative pages)
   ============================================= */

/* Already covered by Section 1 global reset (L30-34).
   No per-page-type breakpoints needed. */


/* =============================================
   3. FORM MARGIN RESET
   Storefront: form { margin-bottom: 1.618em }
   We reset to 0 on all Globlazer-owned forms.
   ============================================= */

.gi-form {
    margin-bottom: 0 !important;
}

/* =============================================
   4. GLOBAL FOCUS / HOVER BORDER GUARD
   SF woocommerce.css may bleed .button styles
   into Globlazer areas. This ensures no rogue
   borders or outlines appear on hover/focus.
   ============================================= */

.gl-body a:focus,
.gl-body a:active,
.gl-body button:focus,
.gl-body button:active {
    outline: none !important;
    box-shadow: none !important;
}

.gl-body a:hover,
.gl-body button:hover {
    outline: none !important;
}

/* =============================================
   5. CONTENT-AREA & SITE-MAIN WRAPPER RESET
   Storefront @media(min-width:768px) sets:
     .content-area { width:73.91%; float:left; margin-right:4.35% }
   leaving 26% for a sidebar widget-area.
   We reset BOTH the outer wrapper AND inner .site-main
   so our layouts occupy full width.
   ============================================= */

/* Outer wrapper: kill sidebar-column width + float */
#primary.content-area,
.content-area {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Inner main: remove padding/max-width constraints */
.storefront-full-width-content .site-main,
.content-area .site-main {
    padding: 0;
    max-width: none;
}

.site-content .col-full {
    padding: 0;
    max-width: none;
}

/* =============================================
   8. CAROUSEL ARROW BUTTONS — Storefront button bleed guard
   SF applies global button styles (background, padding, font)
   to bare <button> elements. These rules ensure gl-strip-prev
   and gl-strip-next keep their Tailwind-defined appearance.
   ============================================= */

.gl-strip-prev,
.gl-strip-next {
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 0 !important;
    /* hide any inherited text */
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #d4d4d4 !important;
    border-radius: 9999px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #525252 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.gl-strip-prev:hover,
.gl-strip-next:hover {
    border-color: #262626 !important;
    background-color: #262626 !important;
    color: #fff !important;
}

.gl-strip-prev i,
.gl-strip-next i {
    font-size: 16px !important;
    color: inherit !important;
    line-height: 1 !important;
}



/* =============================================
   6. STOREFRONT BREADCRUMB OVERRIDE
   SEO plugins (Yoast, Rank Math) inject a breadcrumb
   via .storefront-breadcrumb. Reskin to match the
   gi-breadcrumb design system.
   ============================================= */

.storefront-breadcrumb {
    border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reset inner Storefront/WC breadcrumb containers */
.storefront-breadcrumb .woo-breadcrumbs,
.storefront-breadcrumb .breadcrumb,
.storefront-breadcrumb .breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
}

/* Breadcrumb .col-full: reuse .gl-container dimensions.
   Storefront PHP outputs .col-full inside .storefront-breadcrumb;
   we mirror .gl-container breakpoints so breadcrumbs align with header. */
.storefront-breadcrumb .col-full {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) {
    .storefront-breadcrumb .col-full {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .storefront-breadcrumb .col-full {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .storefront-breadcrumb .col-full {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .storefront-breadcrumb .col-full {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .storefront-breadcrumb .col-full {
        max-width: 1320px !important;
    }
}

@media (min-width: 1488px) {
    .storefront-breadcrumb .col-full {
        max-width: 1488px !important;
    }
}

.storefront-breadcrumb .breadcrumb-trail {
    padding: 12px 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

/* Inner wrapper span: flex for perfect alignment */
.storefront-breadcrumb .breadcrumb-trail>span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #999999;
    font-size: 10px;
    gap: 7px;
}

/* Inner spans (each breadcrumb item wrapper) */
.storefront-breadcrumb .breadcrumb-trail>span>span {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.storefront-breadcrumb .breadcrumb-trail a {
    color: #525252;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.storefront-breadcrumb .breadcrumb-trail a:hover {
    color: #262626;
}

.storefront-breadcrumb .breadcrumb_last {
    color: #262626;
    font-size: 12px !important;
    font-weight: normal;
    letter-spacing: 0.01em;
    /* PC: Cancel Truncation & Drop max-width limits to allow natural multi-line wrap */
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 767px) {
    .storefront-breadcrumb .breadcrumb_last {
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        min-width: 0 !important;
        word-break: normal;
    }
}


/* =============================================
   7. WOOCOMMERCE NOTICE RESKIN
   SF defaults: solid colored banners (green/blue/red)
   with white text and Font Awesome icons.
   
   Globlazer style: light background card with
   left accent border, dark text, no FA icons.
   ============================================= */

/* --- Base reset for all three notice types --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background-color: #ffffff !important;
    color: #262626 !important;
    border: 1px solid #e5e5e7 !important;
    border-radius: 12px !important;
    padding: 20px 24px 20px 52px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    position: relative !important;
    outline: none !important;
    margin-bottom: 0;
    /* Prevent focus outline when WC JS focuses the container */
}

/* Prevent black outline when WooCommerce JS scrolls to and focuses the notice */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-noreviews:focus,
p.no-comments:focus {
    outline: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    /* Keep original shadow, no focus ring */
}

/* Replace SF's Font Awesome ::before with inline SVG icons */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before {
    content: '' !important;
    font-family: inherit !important;
    font-weight: normal !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    top: 20px !important;
    /* Fixed top position in case of multi-line text */
    left: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Success icon: check-circle (brand green) */
.woocommerce-message::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8219' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") !important;
}

/* Info icon: info-circle (blue-grey) */
.woocommerce-info::before,
.woocommerce-noreviews::before,
p.no-comments::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e858d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

/* Error icon: alert-triangle (red) */
.woocommerce-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
}

/* --- Notice general links --- */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
    color: #262626 !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #d4d4d4 !important;
    transition: all 0.3s ease !important;
}

.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
    color: #5a8219 !important;
    text-decoration-color: #5a8219 !important;
}

/* --- Notice action button (e.g. "View cart", "Browse products") --- */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    float: right !important;
    background: none !important;
    color: #262626 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin-top: 2px !important;
    margin-left: 20px !important;
    border: none !important;
    border-bottom: 1px solid #262626 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Kill ALL Storefront icon-font pseudo-elements on WC buttons.
   SF injects ::before / ::after with its own icon font on .button, .wc-forward, etc.
   When the font fails to load, garbled characters (e.g. "iŒ") appear. */
.woocommerce .button::before,
.woocommerce .button::after,
.woocommerce-page .button::before,
.woocommerce-page .button::after,
.wc-forward::after,
.wc-backward::before {
    display: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    color: #5a8219 !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #5a8219 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Kill any rogue outline/border from SF button base */
.woocommerce-message .button:focus,
.woocommerce-info .button:focus,
.woocommerce-error .button:focus,
.woocommerce-message .button:active,
.woocommerce-info .button:active,
.woocommerce-error .button:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #262626 !important;
    background: transparent !important;
}

/* --- No products found: transparent variant --- */
.woocommerce-info.woocommerce-no-products-found {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #525252 !important;
    padding: 60px 0 !important;
    text-align: center !important;
    font-size: 16px !important;
}

.woocommerce-info.woocommerce-no-products-found:hover {
    box-shadow: none !important;
}

.woocommerce-info.woocommerce-no-products-found::before {
    display: none !important;
}

/* --- Price: remove SF left-margin on ins after del --- */
.price del+ins {
    margin-left: 0 !important;
}

/* =============================================
   WC Review Submission Form — Override Storefront
   Collapsible wrapper + right-column layout
   ============================================= */

/* Collapsible toggle wrapper — background style */
.gi-review-form-toggle {
    border: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background-color: transparent !important;
    overflow: hidden !important;
}

/* Summary trigger bar */
.gi-review-form-toggle summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #262626 !important;
    background-color: #f5f5f5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

/* Icon inside summary inherits color */
.gi-review-form-toggle summary i {
    font-size: 14px !important;
    color: inherit !important;
    line-height: 1 !important;
}

/* Remove default marker */
.gi-review-form-toggle summary::-webkit-details-marker {
    display: none !important;
}

.gi-review-form-toggle summary::marker {
    display: none !important;
    content: "" !important;
}

/* Chevron arrow pushed to right */
.gi-review-form-toggle summary::after {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.2s ease !important;
}

/* Rotate chevron when open */
.gi-review-form-toggle[open] summary::after {
    transform: rotate(180deg) !important;
}

.gi-review-form-toggle summary:hover {
    color: #5a8219 !important;
    background-color: #eef0eb !important;
}

/* When open: summary loses rounding on bottom */
.gi-review-form-toggle[open] summary {
    border-radius: 8px 8px 0 0 !important;
}

/* Form body when open */
.gi-review-form-toggle[open] #reviews.woocommerce-Reviews {
    padding: 20px !important;
    border: 1px solid #e5e5e7 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    background-color: #fff !important;
}

/* Reset inner #reviews default */
#reviews.woocommerce-Reviews {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Hide the WC reply-title since summary already says "Write a Review" */
#reviews .comment-reply-title {
    display: none !important;
}

/* Rating row */
#reviews .comment-form-rating {
    margin-bottom: 16px !important;
}

#reviews .comment-form-rating label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #262626 !important;
    margin-bottom: 6px !important;
}

#reviews .comment-form-rating select {
    width: auto !important;
    min-width: 160px !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #262626 !important;
    background-color: #fafafa !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    transition: all 0.2s ease !important;
}

#reviews .comment-form-rating select:focus {
    border-color: #5a8219 !important;
    background-color: #fff !important;
}

/* WC star JS (p.stars) — brand orange */
#reviews p.stars a::before {
    color: #999 !important;
}

#reviews p.stars:hover a::before,
#reviews p.stars.selected a.active::before,
#reviews p.stars.selected a:not(.active)::before {
    color: #f27d0c !important;
}

#reviews p.stars.selected a.active~a::before,
#reviews p.stars a:hover~a::before {
    color: #999 !important;
    opacity: 0.25 !important;
}

/* Shared label styles */
#reviews .comment-form label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #262626 !important;
    margin-bottom: 6px !important;
}

#reviews .comment-form .required {
    color: #dc2626 !important;
}

/* Textarea — full width */
#reviews .comment-form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #262626 !important;
    background-color: #fafafa !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    resize: vertical !important;
    min-height: auto !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
}

#reviews .comment-form textarea:focus {
    border-color: #5a8219 !important;
    background-color: #fff !important;
}

#reviews .comment-form textarea::placeholder {
    color: #999 !important;
}

/* Text inputs — full width, same as textarea */
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"] {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #262626 !important;
    background-color: #fafafa !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#reviews .comment-form input[type="text"]:focus,
#reviews .comment-form input[type="email"]:focus {
    border-color: #5a8219 !important;
    background-color: #fff !important;
}

#reviews .comment-form input[type="text"]::placeholder,
#reviews .comment-form input[type="email"]::placeholder {
    color: #999 !important;
}

/* Name + Email: stacked full-width for consistent layout */
#reviews .comment-form-author,
#reviews .comment-form-email {
    display: block !important;
    width: 100% !important;
}

/* Field spacing */
#reviews .comment-form p {
    margin-bottom: 14px !important;
}

/* Cookies consent */
#reviews .comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

#reviews .comment-form-cookies-consent input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    margin-top: 2px !important;
    accent-color: #5a8219 !important;
    flex-shrink: 0 !important;
}

#reviews .comment-form-cookies-consent label {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #525252 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* Submit button — brand CTA */
#reviews .comment-form .form-submit {
    margin-bottom: 0 !important;
}

#reviews .comment-form .form-submit .submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #fff !important;
    background-color: #5a8219 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

#reviews .comment-form .form-submit .submit:hover {
    opacity: 0.7 !important;
}

/* =============================================
   Assembly Video Accordion — Collapsible toggle
   Reuses same visual language as .gi-review-form-toggle
   ============================================= */

.gi-video-toggle {
    border: none !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background-color: transparent !important;
    overflow: hidden !important;
}

.gi-video-toggle summary {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 28px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #262626 !important;
    background-color: #f5f5f5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.gi-video-toggle summary i {
    font-size: 22px !important;
    color: #5a8219 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.gi-video-toggle summary span {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Remove default marker */
.gi-video-toggle summary::-webkit-details-marker {
    display: none !important;
}

.gi-video-toggle summary::marker {
    display: none !important;
    content: "" !important;
}

/* Chevron arrow */
.gi-video-toggle summary::after {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.2s ease !important;
}

.gi-video-toggle[open] summary::after {
    transform: rotate(180deg) !important;
}

.gi-video-toggle summary:hover {
    color: #5a8219 !important;
    background-color: #eef0eb !important;
}

/* When open: summary bottom rounding removed */
.gi-video-toggle[open] summary {
    border-radius: 8px 8px 0 0 !important;
}

/* Video body — border on 3 sides */
.gi-video-body {
    padding: 16px !important;
    border: 1px solid #e5e5e7 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    background-color: #fff !important;
}

/* =============================================
   9. PDP LAYOUT ISOLATION
   Storefront woocommerce.css applies float-based
   layout with fixed widths to:
     .single-product div.product .images (41.17% float:left)
     .single-product div.product .summary (52.94% float:right)
     .single-product div.product form.cart (padding + float)
     .single-product div.product p.price (font-size: 1.41575em)
   These MUST be neutralized because our PDP uses
   Tailwind flex + w-[50%] layout exclusively.
   ============================================= */

/* --- PDP Notice Container (.woocommerce > .woocommerce-message) ---
   Lives OUTSIDE #primary as a sibling under .col-full.
   Must follow the gl-container grid breakpoints. */
body.single-product .col-full>.woocommerce {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    body.single-product .col-full>.woocommerce {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    body.single-product .col-full>.woocommerce {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    body.single-product .col-full>.woocommerce {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    body.single-product .col-full>.woocommerce {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    body.single-product .col-full>.woocommerce {
        max-width: 1320px;
    }
}

@media (min-width: 1488px) {
    body.single-product .col-full>.woocommerce {
        max-width: 1488px;
    }
}

/* Product wrapper: remove overflow:hidden + clearfix pseudo-elements
   SF adds ::before/::after { display:table } + ::after { clear:both }
   which injects invisible table elements into our flex layout. */
.single-product div.product {
    overflow: visible !important;
}

.single-product div.product::before,
.single-product div.product::after {
    display: none !important;
}

/* Clear all float-based layout Storefront forces on images/summary.
   .woocommerce-product-gallery: force-hidden since we use Swiper (gi-gallery-wrap) */
.single-product div.product .images,
.single-product div.product .woocommerce-product-gallery {
    display: none !important;
}

.single-product div.product .summary {
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* price: PDP now uses custom gi-pdp-price-row / gi-pdp-price-now structure.
   No Storefront overrides needed — kept as reference for future WC fallback. */

/* form.cart: Storefront adds padding:1em 0 + clearfix float + form { margin-bottom:1.618em }.
   Our gi-pdp-actions uses flex layout controlled by page.css. */
.single-product div.product form.cart,
#pdp-hero .gi-pdp-actions form.cart {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* quantity: Storefront floats left with margin-right.
   Our page.css uses flex-based quantity layout. */
.single-product div.product form.cart .quantity {
    float: none !important;
    margin-right: 0 !important;
}

/* form.cart clearfix: Storefront adds ::before/::after { display:table }
   which becomes invisible flex items in our flex layout, causing offset. */
.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
    display: none !important;
}

/* stock: Storefront colors stock with its own green/red.
   Our page.css uses custom dot indicators via ::before. */
.single-product div.product .stock::before {
    font-family: inherit !important;
    content: '' !important;
    margin-right: 0 !important;
}

/* WC tabs: hidden in our PDP (we use custom sections) */
.single-product div.product .woocommerce-tabs {
    display: none !important;
}

/* Storefront product meta: hidden (we output SKU etc. in custom template) */
.single-product div.product .product_meta {
    display: none !important;
}

/* Storefront product rating: hidden (we use gi-pdp-rating) */
.single-product div.product .woocommerce-product-rating {
    display: none !important;
}

/* Storefront product pagination: already removed via hook, safety guard */
.storefront-product-pagination {
    display: none !important;
}


/* §10 WC Cart Block overrides → moved to cart-checkout.css (conditional load) */

/* =============================================
   11. PAGINATION — Storefront Override
   SF applies border-top/bottom + padding to .pagination.
   WP the_posts_pagination() merges .pagination and
   .gl-pagination onto the same <nav>, so SF's styles
   bleed into our component. Reset them here.
   ============================================= */

nav.navigation.pagination.gl-pagination {
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
    clear: both !important;
}

nav.navigation.pagination .screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

/* =============================================
   11b. WC PAGINATION — Full Immunity Override
   components.css defines gl-pagination styles without
   !important. Storefront / WC CSS overrides them.
   Re-declare ALL pagination visuals here with !important.
   ============================================= */

/* Reset <nav> container */
.gl-pagination .woocommerce-pagination {
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
}

/* Reset <ul class="page-numbers"> — WC makes it a clearfix block */
.woocommerce .gl-pagination .woocommerce-pagination ul.page-numbers,
.gl-pagination .woocommerce-pagination ul.page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    float: none !important;
}

/* Kill WC clearfix pseudo-elements */
.woocommerce .gl-pagination .woocommerce-pagination ul.page-numbers::before,
.woocommerce .gl-pagination .woocommerce-pagination ul.page-numbers::after {
    display: none !important;
}

/* Reset <li> */
.woocommerce .gl-pagination .woocommerce-pagination ul.page-numbers li,
.gl-pagination .woocommerce-pagination ul.page-numbers li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── Page number buttons (a & span inside li) ── */
.gl-pagination .woocommerce-pagination ul.page-numbers li a.page-numbers,
.gl-pagination .woocommerce-pagination ul.page-numbers li span.page-numbers {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e7 !important;
    background-color: #ffffff !important;
    color: #262626 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Hover */
.gl-pagination .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    border-color: #262626 !important;
    background-color: #ffffff !important;
    color: #262626 !important;
}

/* Current page — brand green */
.gl-pagination .woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background-color: #5a8219 !important;
    border-color: #5a8219 !important;
    color: #ffffff !important;
}

/* Dots "..." */
.gl-pagination .woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
    border: none !important;
    background: transparent !important;
    color: #999 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Prev / Next arrows */
.gl-pagination .woocommerce-pagination ul.page-numbers li a.prev.page-numbers,
.gl-pagination .woocommerce-pagination ul.page-numbers li a.next.page-numbers {
    color: #999 !important;
}

.gl-pagination .woocommerce-pagination ul.page-numbers li a.prev.page-numbers:hover,
.gl-pagination .woocommerce-pagination ul.page-numbers li a.next.page-numbers:hover {
    border-color: #262626 !important;
    color: #262626 !important;
}

/* Mobile: slightly smaller pagination */
@media (max-width: 767px) {

    .gl-pagination .woocommerce-pagination ul.page-numbers li a.page-numbers,
    .gl-pagination .woocommerce-pagination ul.page-numbers li span.page-numbers {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }
}

/* =============================================
   WC AJAX ADD-TO-CART — Hide "View Cart" Link
   WC's wc-add-to-cart.js injects <a class="added_to_cart">
   next to each add-to-cart button on AJAX success.
   We use a side cart drawer instead, making this
   link redundant and causing a "double button" glitch.
   ============================================= */
a.added_to_cart {
    display: none !important;
}