/**
 * Teapoz Child — Custom Styles
 *
 * All brand-specific styling for Fresh n Flavour.
 * Organized by component for easy maintenance.
 *
 * @package Teapoz_Child
 * @since 1.3.0
 *
 * Note: We use doubled selectors (e.g. body.woocommerce-active ul.products) to
 * beat parent theme specificity without needing !important.
 * The few remaining !important are marked with why they're needed.
 *
 * BRAND KIT — Always use the var(--fnf-*) tokens defined in section 0 below
 * for any new component. Never hardcode hex codes. The kit is documented in
 * memory/project_fnf_brand_kit.md and was approved by the founder on
 * 2026-04-11 (Option B: green primary + honey gold accent).
 *
 * Table of Contents:
 * 0.0 Brand Kit — CSS Variables           ← v1.7.0
 * 1.0 Typography
 * 2.0 Header
 * 3.0 WooCommerce — Product Variations
 * 4.0 WooCommerce — Add to Cart Button
 * 5.0 WooCommerce — Product Grid Pricing
 * 6.0 WooCommerce — Product Action Buttons
 * 7.0 Integrations — Shiprocket
 * 7.1 Layout
 * 8.0 Responsive
 * 9.0 Single product — Trust badge bar    ← refactored to use vars in v1.7.0
 * 10.0 CusRev — Customer Reviews          ← v1.7.0 (planned)
 */

/* ==========================================================================
   0. Brand Kit — CSS Variables
   Approved palette: Option B (Green + Honey Gold).
   See memory/project_fnf_brand_kit.md for the full mapping rules.
   ========================================================================== */

:root {
    /* Greens — primary brand */
    --fnf-green:        #568f31;
    --fnf-green-dark:   #3f6a23;
    --fnf-green-deep:   #2c4a18;
    --fnf-leaf-mist:    #f4f9ed;
    --fnf-leaf-light:   #e8f0dd;
    --fnf-leaf-border:  #cee0b8;

    /* Honey gold — premium accent */
    --fnf-honey:        #c8943e;
    --fnf-honey-dark:   #a87a2c;
    --fnf-honey-bg:     #fdf6e6;
    --fnf-honey-border: #ecdfc2;

    /* Neutrals — warm dark to harmonize with green */
    --fnf-ink:          #1a2410;
    --fnf-body:         #3a4530;
    --fnf-muted:        #7a8570;
    --fnf-subtle-border:#dde5d4;
    --fnf-off-white:    #fafbf7;
    --fnf-white:        #ffffff;

    /* Functional */
    --fnf-sale-red:     #d63638;
    --fnf-success:      #3a7a23;
    --fnf-warning:      #e8a83a;
}

/* ==========================================================================
   1.0 Typography — System font stack override
   !important needed: Elementor sets font-family via inline styles
   ========================================================================== */

body p, body h1, body h2, body h3, body h4, body h5, body h6, body li, body a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   2.0 Header — Elementor sticky header with blur effect
   !important needed: Elementor injects background-color via inline JS
   ========================================================================== */

.elementor-sticky.elementor-sticky--active.elementor-sticky--effects {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / .6) !important;
}

/* ==========================================================================
   3.0 WooCommerce — Product Variations (WPC Variation Swatches)
   ========================================================================== */

table.variations.wpcvs-initialized tr {
    display: table-row;
}

.wpcvs-terms .wpcvs-term .wpcvs-term-inner {
    justify-content: center;
    background: none;
}

.wpcvs-terms .wpcvs-term.wpcvs-selected .wpcvs-term-inner:before {
    content: none;
}

/* ==========================================================================
   4.0 WooCommerce — Add to Cart Button (Brand yellow #FFD814)
   ========================================================================== */

.single-product div.product .single_add_to_cart_button {
    background: rgb(255, 216, 20);
    color: #000;
    width: 100%;
    border-radius: 24px;
    font-weight: bold;
}

.single-product div.product .single_add_to_cart_button:hover {
    background: rgb(248, 189, 25);
}

/* ==========================================================================
   5.0 WooCommerce — Product Grid Pricing
   ========================================================================== */

body ul.products li.product .price ins,
body ul.products .wc-block-grid__product .price ins,
body .wc-block-grid__products li.product .price ins,
body .wc-block-grid__products .wc-block-grid__product .price ins {
    font-weight: 500;
    color: #000;
    font-size: 22px;
}

body ul.products li.product .price,
body ul.products .wc-block-grid__product .price,
body .wc-block-grid__products li.product .price,
body .wc-block-grid__products .wc-block-grid__product .price {
    font-size: 22px;
    font-weight: 500;
    color: #000;
}

/* ==========================================================================
   6.0 WooCommerce — Product Card Layout (shop grid)
   HTML order from child theme template: Title → Price → Stars → Tagline → Cart pill
   No flex order needed — HTML is already in correct order.
   ========================================================================== */

body.woocommerce-active ul.products li.product .product-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 12px 14px 14px;
}

/* Title */
body.woocommerce-active ul.products li.product .product-caption .woocommerce-loop-product__title {
    margin: 0 0 4px;
    min-height: auto;
    text-align: center;
    width: 100%;
    padding-right: 0;
}

/* Price block */
body.woocommerce-active ul.products li.product .product-caption .price {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 0 4px;
}

/* Star rating wrapper override (parent theme has margin-bottom: 8px) */
body.woocommerce-active ul.products li.product .product-caption .star-rating {
    margin: 2px auto 4px !important;
}

/* Tagline */
body.woocommerce-active ul.products li.product .product-caption .fnf-card-tagline {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 8px;
    width: 100%;
}

/* Cart action wrapper — full width pill */
body.woocommerce-active ul.products li.product .product-caption .product-action {
    width: 100%;
    padding: 0;
    margin-top: 0;
    display: block;
    text-align: center;
}

body.woocommerce-active ul.products li.product .product-caption .product-action .opal-add-to-cart-button {
    width: 100%;
}

/* Hide group action overlays inside caption if present */
body.woocommerce-active ul.products li.product .product-caption .group-action {
    display: none;
}

/* ==========================================================================
   6.0a Star Rating — bigger rounded stars (override teapoz-icon font)
   Uses system font + Unicode ★ instead of theme's narrow icon font
   ========================================================================== */

body.woocommerce-active ul.products li.product .star-rating {
    font-size: 20px;
    height: 22px;
    width: 6.2em;
    line-height: 1;
    letter-spacing: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
}

body.woocommerce-active ul.products li.product .star-rating::before {
    content: "\2605\2605\2605\2605\2605";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
    color: #e0d5c8;
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 1;
}

body.woocommerce-active ul.products li.product .star-rating span {
    padding-top: 1.6em;
}

body.woocommerce-active ul.products li.product .star-rating span::before {
    content: "\2605\2605\2605\2605\2605";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
    color: #f5b024;
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 1;
}

/* Star count number (if shown) */
body.woocommerce-active ul.products li.product .star-rating + .count,
body.woocommerce-active ul.products li.product .review-count {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

/* ==========================================================================
   6.1 WooCommerce — Pill Add-to-Cart Button (shop grid)
   Full-width yellow pill with "Add to cart" text + cart icon on right
   ========================================================================== */

/* Reset parent's absolute positioning — make button block-level inside card */
body.woocommerce-active ul.products li.product .product-action,
body.woocommerce-active.post-type-archive-product ul.products li.product .product-action {
    position: relative;
    padding-right: 0;
}

body.woocommerce-active ul.products li.product .product-action .opal-add-to-cart-button {
    position: static;
    margin-top: 10px;
    width: 100%;
}

/* The pill button itself */
body.woocommerce-active ul.products li.product .product-action a[class*=product_type_],
body.woocommerce-active.post-type-archive-product ul.products li.product .product-action a[class*=product_type_] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 18px 0 22px;
    background-color: rgb(255, 216, 20);
    color: #1a1a1a;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

body.woocommerce-active ul.products li.product .product-action a[class*=product_type_]:hover {
    background-color: rgb(248, 189, 25);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(255, 216, 20, 0.4);
    transform: translateY(-1px);
}

/* Hide parent's font icon (which is rendered via :before from icon font) */
body.woocommerce-active ul.products li.product .product-action a[class*=product_type_]:before {
    display: none;
}

/* Add cart SVG via :after */
body.woocommerce-active ul.products li.product .product-action a[class*=product_type_]:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

/* ==========================================================================
   6.1 WooCommerce — Sale Price (red) on shop cards + product page
   ========================================================================== */

/* Sale price (ins) — red, light weight, larger */
body.woocommerce-active ul.products li.product .price ins,
body.woocommerce-active ul.products li.product .price ins .woocommerce-Price-amount {
    color: #d63638;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}

/* Original price (del) — black, 20% smaller than sale */
body.woocommerce-active ul.products li.product .price del,
body.woocommerce-active ul.products li.product .price del .woocommerce-Price-amount {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 4px;
}

/* Single product page — same treatment */
body.single-product div.product p.price ins,
body.single-product div.product p.price ins .woocommerce-Price-amount {
    color: #d63638;
    font-weight: 400;
    text-decoration: none;
}

body.single-product div.product p.price del,
body.single-product div.product p.price del .woocommerce-Price-amount {
    color: #000;
    font-weight: 400;
    text-decoration: line-through;
}

/* 20% smaller than sale price — applied to the inner span only so the
   strikethrough line doesn't render at the parent del's larger context size. */
body.single-product div.product p.price del .woocommerce-Price-amount {
    font-size: 0.8em;
}

/* ==========================================================================
   7.0 Integrations — Shiprocket Headless Checkout
   !important needed: Shiprocket plugin injects inline line-height
   ========================================================================== */

.shiprocket-headless {
    margin: 10px 15px;
}

body .sr-headless-checkout {
    min-height: 47px;
    line-height: 22px !important;
}

/* ==========================================================================
   6.1 WooCommerce — Flavor Grid (single product page)
   Other chai products shown as flavor swatches above product_meta
   ========================================================================== */

.fnf-flavor-grid-wrap {
    margin: 20px 0 24px;
    padding: 0;
}

.fnf-flavor-grid-label {
    font-size: 14px;
    color: #5a4030;
    margin-bottom: 10px;
    font-weight: 500;
}

.fnf-flavor-grid-label .fnf-current-flavor {
    color: #2d1810;
    font-weight: 700;
    margin-left: 4px;
}

.fnf-flavor-grid-slider {
    position: relative;
    padding: 0 40px;
}

.fnf-flavor-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.fnf-flavor-grid::-webkit-scrollbar {
    display: none;
}

.fnf-flavor-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #e0d5c8;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 64px;
    width: 150px;
    max-width: 150px;
    box-sizing: border-box;
    scroll-snap-align: start;
    overflow: hidden;
}

.fnf-flavor-card:hover {
    border-color: #c8943e;
    box-shadow: 0 2px 8px rgba(200, 148, 62, 0.15);
    text-decoration: none;
}

.fnf-flavor-card.is-current {
    border-color: #c8943e;
    border-width: 2px;
    background: #faf4eb;
    cursor: default;
    pointer-events: none;
}

.fnf-flavor-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2d1810;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fnf-flavor-price {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #5a4030;
    line-height: 1.2;
}

.fnf-flavor-price .woocommerce-Price-amount {
    font-size: 13px;
    color: #5a4030;
}

.fnf-flavor-price del {
    font-size: 11px;
    opacity: 0.6;
    margin-right: 3px;
}

.fnf-flavor-price ins {
    text-decoration: none;
    color: #c8943e;
    font-weight: 600;
}

/* Slider arrows */
.fnf-flavor-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e0d5c8;
    color: #5a4030;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    margin: 0;
    line-height: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.fnf-flavor-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fnf-flavor-arrow:hover {
    background: #c8943e;
    color: #fff;
    border-color: #c8943e;
    box-shadow: 0 3px 10px rgba(200, 148, 62, 0.25);
}

.fnf-flavor-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.fnf-flavor-prev {
    left: -4px;
}

.fnf-flavor-next {
    right: -4px;
}

/* Draggable cursor states */
.fnf-flavor-grid {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.fnf-flavor-grid.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.fnf-flavor-grid.is-dragging .fnf-flavor-card {
    pointer-events: none;
}

/* Mobile — slightly smaller cards */
@media (max-width: 767px) {
    .fnf-flavor-grid {
        grid-auto-columns: 130px;
    }

    .fnf-flavor-card {
        width: 130px;
        max-width: 130px;
        padding: 8px 10px;
        min-height: 58px;
    }

    .fnf-flavor-grid-slider {
        padding: 0 34px;
    }

    .fnf-flavor-arrow {
        width: 30px;
        height: 30px;
    }

    .fnf-flavor-arrow svg {
        width: 15px;
        height: 15px;
    }

    .fnf-flavor-name {
        font-size: 12px;
    }

    .fnf-flavor-price {
        font-size: 12px;
    }
}

/* ==========================================================================
   7.1 Layout — Remove top margin on shop & product archive pages
   ========================================================================== */

.post-type-archive-product #page .site-content,
.tax-product_cat #page .site-content,
.tax-product_tag #page .site-content {
    margin-top: 0;
}

/* ==========================================================================
   8.0 Responsive
   !important needed on display:block — parent uses display:none with
   high specificity via Elementor responsive-visibility classes
   ========================================================================== */

@media (max-width: 1024px) {
    .site-header-account,
    .site-header-search {
        display: block !important;
    }
}

/* --------------------------------------------------------------------------
   8.1 Mobile Shop Grid Fix — prevent product cards from overflowing
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* Ensure shop container doesn't overflow */
    body .site-content,
    body .site-main,
    body .content-area {
        overflow-x: hidden;
    }

    /* Product grid: 2 columns with proper gaps and padding
       Parent uses: ul.products { display: grid; grid-gap: var(--gutter-width); }
       We need higher specificity to override grid-template-columns */
    body.woocommerce-active ul.products,
    body.woocommerce-active.post-type-archive-product ul.products,
    body .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 12px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* Ensure product cards don't overflow */
    body ul.products li.product,
    body ul.products .wc-block-grid__product {
        min-width: 0;
        overflow: hidden;
    }

    /* Product image fits container */
    body ul.products li.product img {
        width: 100%;
        height: auto;
    }

    /* Product title: show full name, equal height across cards
       Parent uses: display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;
       We override all three to unclamp */
    body.woocommerce-active ul.products li.product .woocommerce-loop-product__title,
    body.woocommerce-active ul.products li.product .wc-block-grid__product-title,
    body.woocommerce-active ul.products li.product h2,
    body.woocommerce-active ul.products li.product h3 {
        font-size: 13px;
        line-height: 1.35;
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
        text-overflow: unset;
        min-height: 54px;
    }

    /* Product caption padding */
    body ul.products li.product .product-caption {
        padding: 8px 10px;
    }

    /* product-action: stack price above pill button (overrides desktop pill row) */
    body.woocommerce-active ul.products li.product .product-action {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-right: 0;
    }

    /* Price: full width on mobile */
    body.woocommerce-active ul.products li.product .product-action .price {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
        font-size: 14px;
    }

    /* Compact pill button on mobile */
    body.woocommerce-active ul.products li.product .product-action a[class*=product_type_],
    body.woocommerce-active.post-type-archive-product ul.products li.product .product-action a[class*=product_type_] {
        height: 38px;
        padding: 0 14px 0 16px;
        font-size: 13px;
    }

    body.woocommerce-active ul.products li.product .product-action a[class*=product_type_]:after {
        width: 17px;
        height: 17px;
    }

    /* Filter bar wrapping */
    body .teapoz-sorting {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 12px;
    }
}

/* --------------------------------------------------------------------------
   8.2 Small mobile (< 380px) — single column fallback
   -------------------------------------------------------------------------- */

@media (max-width: 379px) {
    body.woocommerce-active ul.products,
    body.woocommerce-active.post-type-archive-product ul.products,
    body .wc-block-grid__products {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }
}

/* ==========================================================================
   9. Single product — Trust badge bar (v1.7.0 — uses brand kit vars)
   Vertical stacked badges (icon on top, label + sub centered below).
   Renders below Add-to-Cart via teapoz_child_product_trust_badges() at
   woocommerce_single_product_summary priority 31.
   ========================================================================== */

.fnf-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,1fr) prevents overflow */
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 20px 0 16px;
    padding: 16px 4px;
    background: transparent;
    border-top: 1px solid var(--fnf-honey-border);
    border-bottom: 1px solid var(--fnf-honey-border);
    border-radius: 0;
    overflow: hidden; /* defensive — never bleed past parent */
}

/* Vertical divider between adjacent badges (skip the first) */
.fnf-trust-bar > .fnf-trust-badge + .fnf-trust-badge {
    border-left: 1px solid var(--fnf-honey-border);
}

.fnf-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 8px;
    padding: 4px 8px;
    min-width: 0; /* allow text to ellipsis instead of pushing parent */
    color: var(--fnf-ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    transition: color 0.18s ease, transform 0.18s ease;
}

.fnf-trust-badge:hover {
    color: var(--fnf-honey-dark);
    text-decoration: none;
    background: transparent;
    transform: translateY(-1px);
}

.fnf-trust-badge:hover .fnf-trust-icon {
    background: var(--fnf-leaf-mist);
}

/* Kill sticky focus outline after mouse click; keep it for keyboard. */
.fnf-trust-badge:focus {
    outline: none;
    background: transparent;
}
.fnf-trust-badge:focus:not(:focus-visible) {
    outline: none;
    background: transparent;
}
.fnf-trust-badge:focus-visible {
    outline: 2px solid var(--fnf-honey);
    outline-offset: 3px;
    background: transparent;
}

.fnf-trust-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fnf-honey);
    background: var(--fnf-honey-bg);
    border-radius: 50%;
    border: 0;
    transition: background-color 0.18s ease;
}

.fnf-trust-icon svg {
    width: 22px;
    height: 22px;
}

.fnf-trust-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    width: 100%;
    min-width: 0;
}

.fnf-trust-label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fnf-ink);
    letter-spacing: 0.1px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Allow up to 2 lines for longer labels like "7-Day Quality Guarantee" */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.fnf-trust-sub {
    font-weight: 400;
    font-size: 11px;
    color: var(--fnf-muted);
    margin-top: 2px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Tablet — keep 4 columns but tighter, smaller text */
@media (max-width: 900px) {
    .fnf-trust-bar {
        padding: 14px 2px;
    }

    .fnf-trust-badge {
        padding: 4px 4px;
        gap: 6px;
    }

    .fnf-trust-icon {
        width: 36px;
        height: 36px;
    }

    .fnf-trust-icon svg {
        width: 20px;
        height: 20px;
    }

    .fnf-trust-label {
        font-size: 11.5px;
    }

    .fnf-trust-sub {
        font-size: 10px;
    }
}

/* Mobile — drop to 2×2 */
@media (max-width: 560px) {
    .fnf-trust-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 14px;
        padding: 14px 4px;
        margin: 16px 0 12px;
    }

    .fnf-trust-bar > .fnf-trust-badge + .fnf-trust-badge {
        border-left: 0;
    }

    /* Re-add divider only between odd → even on the same row */
    .fnf-trust-bar > .fnf-trust-badge:nth-child(odd) {
        border-right: 1px solid var(--fnf-honey-border);
    }

    .fnf-trust-badge {
        padding: 4px 10px;
        gap: 8px;
    }

    .fnf-trust-icon {
        width: 38px;
        height: 38px;
    }

    .fnf-trust-icon svg {
        width: 21px;
        height: 21px;
    }

    .fnf-trust-label {
        font-size: 12px;
    }

    .fnf-trust-sub {
        font-size: 10.5px;
    }
}

/* ==========================================================================
   10. CusRev — Customer Reviews for WooCommerce (v1.7.0)
   Styles the review form, summary box, and review cards to match the brand
   kit. Star colors are set via the plugin's `ivole_stars_color` option
   (configured to var(--fnf-honey) #c8943e via WP-CLI), so we don't override
   them in CSS — the plugin renders the SVG fills server-side.
   ========================================================================== */

/* --- Review summary box (above the review list) --- */
#reviews .cr-summaryBox-wrap,
.cr-all-reviews-shortcode .cr-summaryBox-wrap {
    background: var(--fnf-leaf-mist);
    border: 1px solid var(--fnf-leaf-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

#reviews .cr-summaryBox-wrap .cr-average-rating,
.cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-average-rating {
    color: var(--fnf-green-deep);
    font-weight: 700;
}

#reviews .cr-summaryBox-wrap .cr-total-rating-count,
.cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-total-rating-count {
    color: var(--fnf-muted);
}

/* "Write a Review" button — match the Add to Cart pill style */
#reviews .cr-add-review-wrap a,
#reviews .cr-add-review-wrap button,
.cr-all-reviews-shortcode .cr-add-review-wrap a,
.cr-all-reviews-shortcode .cr-add-review-wrap button {
    background: var(--fnf-green);
    color: var(--fnf-white);
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

#reviews .cr-add-review-wrap a:hover,
#reviews .cr-add-review-wrap button:hover,
.cr-all-reviews-shortcode .cr-add-review-wrap a:hover,
.cr-all-reviews-shortcode .cr-add-review-wrap button:hover {
    background: var(--fnf-green-dark);
    color: var(--fnf-white);
}

/* --- Review form (modal/inline) --- */
.cr-form-wrap,
.cr-form {
    background: var(--fnf-white);
    border: 1px solid var(--fnf-leaf-border);
    border-radius: 12px;
}

.cr-form .cr-form-title {
    color: var(--fnf-green-deep);
    font-weight: 700;
}

.cr-form input[type="text"],
.cr-form input[type="email"],
.cr-form textarea {
    border: 1px solid var(--fnf-subtle-border);
    border-radius: 6px;
    padding: 10px 12px;
}

.cr-form input[type="text"]:focus,
.cr-form input[type="email"]:focus,
.cr-form textarea:focus {
    border-color: var(--fnf-green);
    outline: 2px solid var(--fnf-leaf-light);
    outline-offset: 0;
}

/* Submit button — brand green pill */
.cr-form-submit {
    background: var(--fnf-green) !important; /* override plugin's hardcoded #2c5e66 */
    color: var(--fnf-white) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    transition: background-color 0.18s ease !important;
}

.cr-form-submit:hover {
    background: var(--fnf-green-dark) !important;
}

/* --- Individual review card --- */
.cr-review,
.cr-reviews-grid .cr-review-card {
    background: var(--fnf-white);
    border: 1px solid var(--fnf-leaf-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.cr-review .cr-review-author,
.cr-reviews-grid .cr-review-card .cr-review-author {
    color: var(--fnf-ink);
    font-weight: 600;
}

.cr-review .cr-review-date,
.cr-reviews-grid .cr-review-card .cr-review-date {
    color: var(--fnf-muted);
    font-size: 12px;
}

.cr-review .cr-review-content,
.cr-reviews-grid .cr-review-card .cr-review-content {
    color: var(--fnf-body);
    line-height: 1.55;
}

/* "Verified Buyer" badge — green pill */
.cr-review-verified-icon,
.cr-review .cr-verified-text,
.cr-reviews-grid .cr-review-card .cr-verified-text {
    background: var(--fnf-green);
    color: var(--fnf-white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   11. WPC Force Sells — Bundle linked products display (v1.7.1)
   The plugin renders the linked-products list on the single product page
   with a price column for each item. Because we set per-item price to 0
   (the chained items are "free with bundle"), each row shows
   "₹300 ₹0.00" with the original price struck through — confusing.
   The bundle already has its own single price, so we hide the per-item
   price entirely and let the bundle price stand alone.
   ========================================================================== */

/* Hide the per-item price column on the single bundle product page */
.woofs-products .woofs-product .woofs-price {
    display: none !important;
}

/* Tighten up the linked products list — give it a soft brand-tinted background
   so it visually reads as a "what's inside" panel, not a separate purchase area. */
.woofs-wrap .woofs-products {
    background: var(--fnf-leaf-mist);
    border: 1px solid var(--fnf-leaf-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0 18px;
}

.woofs-products .woofs-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--fnf-leaf-border);
}

.woofs-products .woofs-product:last-child {
    border-bottom: 0;
}

.woofs-products .woofs-product .woofs-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

.woofs-products .woofs-product .woofs-thumb img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--fnf-leaf-border);
    background: var(--fnf-white);
}

.woofs-products .woofs-product .woofs-title {
    flex: 1 1 auto;
    color: var(--fnf-ink);
    font-weight: 600;
    font-size: 13px;
}

.woofs-products .woofs-product .woofs-title a {
    color: var(--fnf-ink);
    text-decoration: none;
}

.woofs-products .woofs-product .woofs-title a:hover {
    color: var(--fnf-green);
}

/* Optional: small "Included" pill on the right of each row, replaces the price
   that we hid. Generated via ::after on the title cell — pure CSS, no markup change. */
.woofs-products .woofs-product .woofs-title::after {
    content: "Included";
    margin-left: 8px;
    display: inline-block;
    background: var(--fnf-honey-bg);
    color: var(--fnf-honey-dark);
    border: 1px solid var(--fnf-honey-border);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Cart "Linked products" list (when hide_linked=yes_list) — the plugin
   injects an <ul><li> list under the bundle line via woocommerce_get_item_data.
   Style it so it looks like a sub-list, not random text. */
.woocommerce-cart-form .cart_item .woofs-data,
.woocommerce-cart .cart_item .woofs_data,
.cart_item .woofs_data {
    color: var(--fnf-muted);
    font-size: 12px;
    margin-top: 4px;
}

.cart_item .woofs_data ul,
.cart_item .woofs-data ul {
    margin: 4px 0 0 0;
    padding-left: 16px;
}

.cart_item .woofs_data li,
.cart_item .woofs-data li {
    list-style: disc;
    color: var(--fnf-body);
    font-size: 12px;
    line-height: 1.5;
}

/* ==========================================================================
   12. Variable product — Card-based variation selector (v1.8.0)
   Replaces the standard WC dropdown with visual cards showing
   discount %, pack count, sale vs MRP, price/kg. The hidden dropdown
   stays in the DOM for WC's internal JS to work.
   ========================================================================== */

/* Force 2x2 grid layout */
.fnf-variation-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0 16px;
    width: 100%;
}

.fnf-var-card {
    position: relative;
    border: 2px solid var(--fnf-subtle-border, #dde5d4);
    border-radius: 10px;
    padding: 18px 14px 12px;
    cursor: pointer;
    background: var(--fnf-white, #fff);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
}

.fnf-var-card:hover {
    border-color: var(--fnf-honey, #c8943e);
    box-shadow: 0 2px 8px rgba(200, 148, 62, 0.12);
}

.fnf-var-card.selected {
    border-color: var(--fnf-honey, #c8943e);
    box-shadow: 0 0 0 1px var(--fnf-honey, #c8943e);
    background: var(--fnf-honey-bg, #fdf6e6);
}

/* Discount badge — sits ON the top border, overlapping it (reference style).
   The badge is centered vertically on the 2px border line using
   transform: translateY(-50%) from the card's top edge. Background
   color hides the border behind the text, creating the "cut-through" effect. */
.fnf-var-discount {
    position: absolute;
    top: 0;
    left: 14px;
    transform: translateY(-50%);
    background: var(--fnf-white, #fff);
    padding: 1px 10px;
    color: var(--fnf-honey-dark, #a87a2c);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    z-index: 2;
    border-radius: 2px;
}

/* When card is selected, badge background matches selected card bg */
.fnf-var-card.selected .fnf-var-discount {
    background: var(--fnf-honey-bg, #fdf6e6);
}

/* Pack description */
.fnf-var-pack {
    color: var(--fnf-body, #3a4530);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 4px;
    line-height: 1.3;
}

/* Force left-align on every child — override any parent/theme centering */
.fnf-var-card,
.fnf-var-card * {
    text-align: left !important;
}

/* Price row */
.fnf-var-price {
    margin-bottom: 2px;
    text-align: left;
}

/* Sale price — inherits the site's existing product page price styling */
.fnf-var-sale {
    font-size: 18px;
    font-weight: 700;
    color: var(--fnf-ink, #1a2410);
    line-height: 1.2;
}

/* Total weight line — highlighted */
.fnf-var-weight {
    display: inline-block;
    font-size: 11px;
    color: var(--fnf-green-deep, #2c4a18);
    background: var(--fnf-leaf-light, #e8f0dd);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-weight: 600;
}

.fnf-var-mrp {
    font-size: 12px;
    color: var(--fnf-muted, #7a8570);
    font-weight: 400;
}

.fnf-var-mrp del {
    text-decoration: line-through;
}

.fnf-var-mrp del .woocommerce-Price-amount {
    color: var(--fnf-muted, #7a8570);
}

/* Inclusive of taxes */
.fnf-var-meta {
    font-size: 11px;
    color: var(--fnf-muted, #7a8570);
    margin-bottom: 2px;
}

/* Price per kg */
.fnf-var-perkg {
    font-size: 12px;
    color: var(--fnf-body, #3a4530);
}

.fnf-var-perkg .woocommerce-Price-currencySymbol {
    font-size: 11px;
}

/* Free shipping badge */
.fnf-var-freeship {
    font-size: 10px;
    font-weight: 600;
    color: var(--fnf-green, #568f31);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mobile */
@media (max-width: 560px) {
    .fnf-variation-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .fnf-var-card {
        padding: 16px 10px 10px;
    }

    .fnf-var-sale {
        font-size: 16px;
    }

    .fnf-var-pack {
        font-size: 12px;
    }
}

/* Small mobile — single column with more space */
@media (max-width: 379px) {
    .fnf-variation-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ─────────────────────────────────────────────
 * 13.0 Product Breadcrumb                  v1.8.6
 * Single line, 13px, no wrapping on mobile
 * ───────────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb,
.breadcrumb-wrap .woocommerce-breadcrumb,
.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    padding: 8px 0;
}

@media (max-width: 768px) {
    .woocommerce .woocommerce-breadcrumb,
    .breadcrumb-wrap .woocommerce-breadcrumb,
    .elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb {
        font-size: 13px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 6px 0;
    }
}

/* ─────────────────────────────────────────────
 * 14.0 Widget Titles                       v1.8.7
 * ───────────────────────────────────────────── */
.widget.teapoz-widget-woocommerce .widget-title {
    padding-top: 30px;
}

/* ─────────────────────────────────────────────
 * 15.0 Mobile Product Grid — 2 columns       v1.8.8
 * ───────────────────────────────────────────── */
@media (max-width: 768px) {
    body.woocommerce-active ul.products,
    body.woocommerce-active ul.products.columns-3,
    body.woocommerce-active ul.products.columns-4 {
        display: grid !important; /* override parent theme flexbox */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    body.woocommerce-active ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ─────────────────────────────────────────────
 * 16.0 Add to Cart — Amazon Yellow (Global)  v1.8.8
 * Consistent yellow button across grid, single
 * product, and sticky bar.
 * ───────────────────────────────────────────── */

/* ── Shared Amazon-yellow flat button style ── */
button.fnf-quick-add,
button.fnf-quick-add.button,
.product-action .fnf-quick-add,
body.woocommerce div.product form.cart .single_add_to_cart_button,
body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt,
body.woocommerce-active ul.products li.product .product-action .button,
body.woocommerce-active ul.products li.product .product-action .add_to_cart_button,
.teapoz-sticky-add-to-cart .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background: #ffd814 !important;
    color: #0f1111 !important;
    border: none !important;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    line-height: 1.3;
    text-decoration: none !important;
    box-shadow: none !important;
}

button.fnf-quick-add:hover,
.product-action .fnf-quick-add:hover,
body.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.woocommerce-active ul.products li.product .product-action .button:hover,
.teapoz-sticky-add-to-cart .single_add_to_cart_button:hover {
    background: #f7ca00 !important;
    color: #0f1111 !important;
    text-decoration: none !important;
}

button.fnf-quick-add:active,
body.woocommerce div.product form.cart .single_add_to_cart_button:active {
    transform: scale(0.97);
}

/* ── Grid: button row ── */
.product-action {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.fnf-quick-add {
    flex: 1;
    font-size: 13px;
    padding: 10px 14px;
}

/* ── Cart icon (teapoz-icon font) on all add-to-cart buttons ── */
.fnf-quick-add::before,
body.woocommerce div.product form.cart .single_add_to_cart_button::before {
    font-family: "teapoz-icon";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
    content: "";
    margin-right: 4px;
}

.fnf-quick-add.loading {
    opacity: 0.7;
    pointer-events: none;
}

.fnf-quick-add.added {
    background: #4caf50 !important;
    color: #fff !important;
}

/* ── "More sizes" link ── */
.fnf-more-sizes {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--fnf-green, #568f31);
    text-decoration: none;
    white-space: nowrap;
}

.fnf-more-sizes:hover {
    color: var(--fnf-green-deep, #2c4a18);
    text-decoration: underline;
}

/* ── Single product: full-width button ── */
body.woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 10px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .fnf-quick-add {
        font-size: 12px;
        padding: 9px 10px;
    }

    .fnf-more-sizes {
        font-size: 11px;
    }

    /* Sticky bottom bar on product page — targets theme's sticky bar only */
    body.single-product .teapoz-sticky-add-to-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        padding: 10px 16px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    body.single-product .teapoz-sticky-add-to-cart .single_add_to_cart_button {
        width: 100%;
        font-size: 14px;
        padding: 12px 16px;
    }

    /* Spacing so content isn't hidden behind sticky bar */
    body.single-product div.product {
        padding-bottom: 70px;
    }
}

/* ─────────────────────────────────────────────
 * 17.0 WhatsApp Floating Button             v1.8.9
 * ───────────────────────────────────────────── */
.fnf-wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.2s;
}

.fnf-wa-float:hover {
    transform: scale(1.05);
    text-decoration: none;
}

.fnf-wa-float-icon {
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.fnf-wa-float-icon svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

.fnf-wa-float-label {
    background: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a2410;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fnf-wa-float {
        bottom: 16px;
        right: 16px;
    }

    .fnf-wa-float-icon {
        width: 50px;
        height: 50px;
    }

    .fnf-wa-float-label {
        display: none;
    }
}