/* =============================================================================
   NABTA — STORE UI SYSTEM  (EasyOrders theme overlay)
   -----------------------------------------------------------------------------
   Refactored stylesheet. Brand values are carried over unchanged from the
   original file; every class/ID hook is preserved.

   CONTENTS
     1.  Design tokens
     2.  Base: global font support, platform branding
     3.  Fake countdown (.ab-fc-*)
     4.  Variation chips (.button_variation)
     5.  Quantity selectors
     6.  Buttons: Buy now / Add to cart
     7.  Badges, bars & micro-animations
     8.  Decorative "veggie sparkles" (reviews, footer, header) + icon tokens
     9.  PDP purchase panel (.ab-pd*)
     10. Page spacing & payment cards
     11. Bundle builder (.bundles_*)
     12. Visa-discount text
     13. Reduced motion (single, final block — must stay LAST)

   NOTE ON !important
     EasyOrders ships Tailwind-style utility classes (bg-skin-primary, flex,
     text-xl …) and inline styles. Most !important flags below exist to beat
     those and were deliberately KEPT. Removing them safely needs the rendered
     HTML to test against — do that per-component, not in bulk.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
:root {
    /* --- Brand palette (verified from original file) ----------------------- */
    --nabta-green:      #244B32;
    --nabta-green-dark: #193923;
    --nabta-cream:      #F5EBDD;
    --nabta-off-white:  #FFFDF8;
    --nabta-gold:       #E8A22B;
    --nabta-charcoal:   #292823;
    --nabta-brown:      #75563A;
    --nabta-sale:       #B42318;

    /* --- Tints derived from the palette (were hard-coded in the original) --- */
    --nabta-cream-deep: #EFE1CE;   /* add-to-cart hover */
    --nabta-gold-light: #FFD978;   /* footer-credit text shine */

    /* --- RGB channels, so translucent brand colours stay in sync ------------
       usage: rgba(var(--nabta-green-rgb), .16)                                */
    --nabta-green-rgb:     36, 75, 50;
    --nabta-gold-rgb:      232, 162, 43;
    --nabta-sale-rgb:      180, 35, 24;
    --nabta-off-white-rgb: 255, 253, 248;

    /* --- Existing tokens (kept for any external use) ------------------------ */
    --nabta-border: rgba(var(--nabta-green-rgb), .13);
    --nabta-shadow: rgba(var(--nabta-green-rgb), .10);

    /* --- Typography --------------------------------------------------------- */
    --nabta-font:         "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
    --nabta-font-display: "Alexandria", "IBM Plex Sans Arabic", sans-serif;
    --nabta-font-text:    "IBM Plex Sans Arabic", sans-serif;
    --nabta-font-badge:   "Manrope", "Alexandria", system-ui, sans-serif;

    /* --- Spacing (4px rhythm; used where values land on the scale) ---------- */
    --nabta-space-1: 4px;
    --nabta-space-2: 8px;
    --nabta-space-3: 12px;
    --nabta-space-4: 16px;
    --nabta-space-5: 24px;

    /* --- Radius scale (nearest-step consolidation of 8–20px originals) ------ */
    --nabta-radius-sm:   8px;
    --nabta-radius-md:   12px;
    --nabta-radius-lg:   16px;
    --nabta-radius-xl:   20px;
    --nabta-radius-pill: 999px;

    /* --- Surfaces & elevation ----------------------------------------------- */
    --nabta-surface-card:
        linear-gradient(145deg, var(--nabta-off-white) 0%, var(--nabta-cream) 100%);
    --nabta-shadow-card:       0 8px 28px rgba(var(--nabta-green-rgb), .07);
    --nabta-shadow-card-hover: 0 13px 36px rgba(var(--nabta-green-rgb), .11);

    /* --- Motion -------------------------------------------------------------- */
    --nabta-dur-fast: .2s;
    --nabta-dur:      .25s;
    --nabta-dur-slow: .3s;
    --nabta-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* --- Shine switch for 3 effects that never actually ran in the original --
       Buy-now (.checkout_buy_now), bundle card and fire badge. The original
       animated `left` while also pinning `left` with !important, and an
       !important declaration beats keyframes — so they sat off-screen.
       They are rebuilt correctly below but ship PAUSED so the live look is
       unchanged. To switch all three on, set:  --nabta-shine-state: running;  */
    --nabta-shine-state: paused;

    /* --- Keyboard focus (original ring was gold @26% — ~1.2:1, near-invisible)
       Green gives 8–9:1 against cream/off-white. --------------------------- */
    --nabta-focus-color:  var(--nabta-green);
    --nabta-focus-width:  2px;
    --nabta-focus-offset: 2px;
}


/* =============================================================================
   2. BASE
   ============================================================================= */

/* Global font on the store's interactive widgets */
.ab-fake-counter,
.button_variation,
.quantity_btn_container,
.ab-fixed-buy-qty,
div[data-product-preview="quantity-control"],
.checkout_buy_now {
    font-family: var(--nabta-font) !important;
}

/* Hide EasyOrders "powered by" footer line */
.ab-footer-powered {
    display: none !important;
}


/* =============================================================================
   3. FAKE COUNTDOWN
   ============================================================================= */
.ab-fake-counter {
    width: 100% !important;
    max-width: 420px !important;
    margin: 24px auto 0 !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
    background: linear-gradient(145deg, var(--nabta-green) 0%, var(--nabta-green-dark) 100%) !important;
    border: 1px solid rgba(var(--nabta-gold-rgb), .22) !important;
    border-radius: var(--nabta-radius-xl) !important;
    box-shadow:
        0 12px 32px rgba(var(--nabta-green-rgb), .18),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    transition:
        transform var(--nabta-dur-slow) ease,
        box-shadow var(--nabta-dur-slow) ease !important;
}

.ab-fc-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

/* Clock badge */
.ab-fc-clock {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    color: var(--nabta-green) !important;
    background: var(--nabta-gold) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(var(--nabta-gold-rgb), .30) !important;
}

.ab-fc-clock svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2 !important;
}

.ab-fc-title {
    margin: 0 !important;
    color: var(--nabta-off-white) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}

.ab-fc-columns {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.ab-fc-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Digit tile */
.ab-fc-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 52px !important;
    color: var(--nabta-green) !important;
    background: linear-gradient(180deg, var(--nabta-off-white) 0%, var(--nabta-cream) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: var(--nabta-radius-md) !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        0 4px 10px rgba(0, 0, 0, .15) !important;
    transition: transform var(--nabta-dur-fast) ease !important;
}

.ab-fc-label {
    margin-top: 7px !important;
    color: rgba(var(--nabta-off-white-rgb), .88) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Blinking separator dots */
.ab-fc-colon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 52px !important;
    align-self: flex-start !important;
}

.ab-fc-colon span {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--nabta-gold) !important;
    box-shadow: 0 0 8px rgba(var(--nabta-gold-rgb), .45) !important;
    animation: nabtaCounterBlink 1.5s ease-in-out infinite !important;
}

@keyframes nabtaCounterBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Hover lift — pointer devices only (avoids "sticky" hover after a tap) */
@media (hover: hover) {
    .ab-fake-counter:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 16px 40px rgba(var(--nabta-green-rgb), .24) !important;
    }
    .ab-fc-cell:hover {
        transform: translateY(-2px) !important;
    }
}

@media (max-width: 480px) {
    .ab-fake-counter {
        margin: 16px auto 0 !important;
        padding: 16px 14px !important;
        border-radius: var(--nabta-radius-lg) !important;
    }
    .ab-fc-top   { gap: 8px !important; margin-bottom: 14px !important; }
    .ab-fc-title { font-size: 15px !important; }
    .ab-fc-clock { width: 32px !important; height: 32px !important; }
    .ab-fc-clock svg { width: 16px !important; height: 16px !important; }
    .ab-fc-columns { gap: 8px !important; }
    .ab-fc-cell {
        width: 38px !important;
        height: 42px !important;
        font-size: 18px !important;
        border-radius: var(--nabta-radius-sm) !important;
    }
    .ab-fc-colon { height: 42px !important; }
    .ab-fc-colon span { width: 4px !important; height: 4px !important; }
    .ab-fc-label { margin-top: 6px !important; font-size: 10px !important; }
}


/* =============================================================================
   4. VARIATION CHIPS (.button_variation)
   -----------------------------------------------------------------------------
   The original defined this component twice (global block + PDP block). The PDP
   block came later and therefore won; this is the merged, effective result.
   The old 480px override was always beaten by the later 768px rule, so it is
   dropped. Bundle-specific tweaks live in section 11.
   ============================================================================= */
.button_variation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 72px !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    color: var(--nabta-green) !important;
    background: var(--nabta-off-white) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .16) !important;
    border-radius: var(--nabta-radius-md) !important;
    font-family: var(--nabta-font-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(var(--nabta-green-rgb), .04) !important;
    transition:
        transform var(--nabta-dur-fast) ease,
        background var(--nabta-dur-fast) ease,
        color var(--nabta-dur-fast) ease,
        border-color var(--nabta-dur-fast) ease,
        box-shadow var(--nabta-dur-fast) ease !important;
}

@media (hover: hover) {
    .button_variation:hover {
        border-color: rgba(var(--nabta-green-rgb), .40) !important;
        box-shadow: 0 6px 15px rgba(var(--nabta-green-rgb), .08) !important;
        transform: translateY(-2px) !important;
    }
}

/* Selected — also signalled by fill + inset ring, not colour alone.
   Must stay AFTER :hover so a selected chip settles at -1px. */
.button_variation[aria-checked="true"] {
    color: var(--nabta-off-white) !important;
    background: var(--nabta-green) !important;
    border-color: var(--nabta-green) !important;
    box-shadow:
        0 7px 18px rgba(var(--nabta-green-rgb), .18),
        inset 0 0 0 1px rgba(var(--nabta-gold-rgb), .25) !important;
    transform: translateY(-1px) !important;
}

.button_variation[aria-checked="true"] p {
    color: var(--nabta-off-white) !important;
}

@media (hover: hover) {
    .button_variation[aria-checked="true"]:hover {
        background: var(--nabta-green-dark) !important;
    }
}

/* Keyboard focus. Uses outline (not box-shadow) so it also survives on the
   selected chip, where the old shadow-based ring was overridden. */
.button_variation:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: var(--nabta-focus-offset) !important;
}

.variation_name {
    margin-bottom: 7px !important;
    color: var(--nabta-green) !important;
    font-family: var(--nabta-font-display) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.button_variations_container {
    gap: 10px !important;
}

@media (max-width: 768px) {
    .button_variation {
        min-width: 64px !important;
        min-height: 41px !important;
        padding: 7px 11px !important;
    }
}


/* =============================================================================
   5. QUANTITY SELECTORS
   -----------------------------------------------------------------------------
   Shared base for the three quantity widgets, followed by the PDP-specific
   overrides for .quantity_btn_container (which won in the original cascade).
   ============================================================================= */
div[data-product-preview="quantity-control"],
.quantity_btn_container,
.ab-fixed-buy-qty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: ltr !important;             /* keep − / + order stable in RTL pages */
    min-width: 124px !important;
    height: 44px !important;
    padding: var(--nabta-space-1) 6px !important;
    box-sizing: border-box !important;
    background: var(--nabta-cream) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .18) !important;
    border-radius: var(--nabta-radius-md) !important;
    box-shadow: 0 2px 8px rgba(var(--nabta-green-rgb), .05) !important;
}

/* PDP variant (original: later rule, so it wins) */
.quantity_btn_container {
    min-width: 126px !important;
    height: 48px !important;
    gap: 7px !important;
    background: var(--nabta-off-white) !important;
    border-color: rgba(var(--nabta-green-rgb), .15) !important;
    box-shadow: 0 3px 10px rgba(var(--nabta-green-rgb), .04) !important;
}

/* − / + buttons */
div[data-product-preview="quantity-control"] button,
.quantity_btn_container button,
.ab-fixed-buy-qty-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--nabta-off-white) !important;
    background: var(--nabta-green) !important;
    border: none !important;
    border-radius: var(--nabta-radius-sm) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(var(--nabta-green-rgb), .16) !important;
    transition:
        background var(--nabta-dur-fast) ease,
        transform var(--nabta-dur-fast) ease,
        box-shadow var(--nabta-dur-fast) ease !important;
}

div[data-product-preview="quantity-control"] button:active,
.quantity_btn_container button:active,
.ab-fixed-buy-qty-btn:active {
    transform: scale(.96) !important;
}

div[data-product-preview="quantity-control"] button:focus-visible,
.quantity_btn_container button:focus-visible,
.ab-fixed-buy-qty-btn:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: var(--nabta-focus-offset) !important;
}

div[data-product-preview="quantity-control"] button svg,
.quantity_btn_container button svg,
.ab-fixed-buy-qty-btn svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--nabta-off-white) !important;
}

div[data-product-preview="quantity-control"] button svg path,
.quantity_btn_container button svg path,
.ab-fixed-buy-qty-btn svg path {
    stroke: var(--nabta-off-white) !important;
}

.quantity_btn_container button svg {
    width: 14px !important;
    height: 14px !important;
}

.quantity_btn_container button svg path {
    fill: currentColor !important;     /* icon set uses fill here, stroke elsewhere */
}

/* Quantity number */
p[data-product-preview="quantity"],
.quantity_btn_container p,
.ab-fixed-buy-qty-value {
    min-width: 30px !important;
    margin: 0 !important;
    padding: 0 var(--nabta-space-2) !important;
    color: var(--nabta-green) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1 !important;
}

.quantity_btn_container p {
    min-width: 26px !important;
    font-weight: 800 !important;
}

@media (hover: hover) {
    div[data-product-preview="quantity-control"] button:hover,
    .quantity_btn_container button:hover,
    .ab-fixed-buy-qty-btn:hover {
        background: var(--nabta-green-dark) !important;
        transform: scale(1.04) !important;
        box-shadow: 0 4px 10px rgba(var(--nabta-green-rgb), .20) !important;
    }
    .quantity_btn_container button:hover {
        transform: scale(1.05) !important;
    }
}


/* =============================================================================
   6. BUTTONS
   ============================================================================= */

/* ---- 7a. Primary "Buy now" (sticky bar / theme primary button) ------------ */
.checkout_buy_now,
button.flex.w-full.bg-skin-primary {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: var(--nabta-off-white) !important;
    background: var(--nabta-green) !important;
    border-color: var(--nabta-green) !important;
    box-shadow: 0 5px 16px rgba(var(--nabta-green-rgb), .20) !important;
    transition:
        background var(--nabta-dur) ease,
        box-shadow var(--nabta-dur) ease,
        transform var(--nabta-dur-fast) ease !important;
}

.checkout_buy_now:hover {
    background: var(--nabta-green-dark) !important;
    box-shadow: 0 8px 22px rgba(var(--nabta-green-rgb), .26) !important;
}

.checkout_buy_now:active {
    transform: scale(.985) !important;
}

.checkout_buy_now:focus-visible,
button.flex.w-full.bg-skin-primary:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: 3px !important;
}

/* Shine sweep. Rebuilt on `transform` (compositor-only, no per-frame layout).
   Travel = (145% − (−100%)) / 44% width = 556.82% of the shine's own width.
   Ships PAUSED via --nabta-shine-state: in the original this animation was
   defeated by `left … !important`, so the sheen was never visible. */
.checkout_buy_now::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 44% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, .08) 32%,
        rgba(255, 255, 255, .46) 50%,
        rgba(255, 255, 255, .08) 68%,
        transparent 100%
    ) !important;
    transform: translateX(0) skewX(-23deg);
    animation: nabtaBuyShine 4.5s ease-in-out infinite var(--nabta-shine-state, paused) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

@keyframes nabtaBuyShine {
    0%, 72%, 100% { transform: translateX(0)       skewX(-23deg); }
    88%           { transform: translateX(556.82%) skewX(-23deg); }
}

/* ---- 7b. Secondary add-to-cart (theme standard button) -------------------- */
button.bg-skin-secondary,
.add_to_cart {
    color: var(--nabta-green) !important;
    background: var(--nabta-cream) !important;
    border: 1px solid var(--nabta-green) !important;
    transition:
        background var(--nabta-dur) ease,
        color var(--nabta-dur) ease,
        transform var(--nabta-dur-fast) ease !important;
}

button.bg-skin-secondary:focus-visible,
.add_to_cart:focus-visible,
.add_to_cart_btn:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: var(--nabta-focus-offset) !important;
}

@media (hover: hover) {
    button.bg-skin-secondary:hover,
    .add_to_cart:hover {
        background: rgba(var(--nabta-green-rgb), .07) !important;
        transform: translateY(-1px) !important;
    }
}


/* =============================================================================
   7. BADGES, BARS & MICRO-ANIMATIONS
   ============================================================================= */

/* ---- 8a. Navigation badges ------------------------------------------------ */
.ab-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    margin-inline-start: 6px;
    border-radius: var(--nabta-radius-pill);
    font-family: var(--nabta-font-badge);
    font-size: 10px;                 /* very small — see Compatibility Notes */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(var(--nabta-green-rgb), .08);
}

.ab-nav-badge--sale {
    background: var(--nabta-sale) !important;
    color: var(--nabta-off-white) !important;
    border-color: rgba(var(--nabta-sale-rgb), .18) !important;
    animation: nabtaSalePulse 4s ease-in-out infinite;
}

.ab-nav-badge--new {
    background: var(--nabta-gold) !important;
    color: var(--nabta-green) !important;
    border-color: rgba(var(--nabta-gold-rgb), .28) !important;
}

@keyframes nabtaSalePulse {
    0%, 85%, 100% { transform: scale(1); }
    92%           { transform: scale(1.07); }
}

/* ---- 8b. Soft gold glow on discount / "new" badges ------------------------ */
.nabta-discount-badge,
.discount-badge,
.hero-badge,
.ab-nav-badge--new {
    animation: nabtaGoldGlow 3.8s ease-in-out infinite;
}

@keyframes nabtaGoldGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(var(--nabta-gold-rgb), 0); }
    50%      { box-shadow: 0 0 16px rgba(var(--nabta-gold-rgb), .22); }
}

/* ---- 8c. Subtle shine across trust / feature bars ------------------------- */
:is(
    .features-badge-bar,
    .feature-banner,
    .bestseller-feature-bar,
    .promo-banner-bar,
    .promo-feature-bar,
    .nabta-trust-bar,
    .nabta-order-assurance,
    .nabta-shipping-notice
) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Shine layer. transform-based (was `left`); travel = (145% + 120%) / 38%
   = 697.37% of the layer's own width — same visual path as before. */
:is(
    .features-badge-bar,
    .feature-banner,
    .bestseller-feature-bar,
    .promo-banner-bar,
    .promo-feature-bar,
    .nabta-trust-bar,
    .nabta-order-assurance,
    .nabta-shipping-notice
)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 38%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, .28) 50%,
        rgba(255, 255, 255, 0) 75%,
        transparent 100%
    );
    transform: translateX(0) skewX(-22deg);
    animation: nabtaSectionShine 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes nabtaSectionShine {
    0%, 72%  { transform: translateX(0)       skewX(-22deg); }
    88%, 100% { transform: translateX(697.37%) skewX(-22deg); }
}

/* Real content stays above the shine */
:is(
    .features-badge-bar,
    .feature-banner,
    .bestseller-feature-bar,
    .promo-banner-bar,
    .promo-feature-bar,
    .nabta-trust-bar,
    .nabta-order-assurance,
    .nabta-shipping-notice
) > * {
    position: relative;
    z-index: 2;
}

/* ---- 8d. Icon micro-float on hover ---------------------------------------- */
.feature-icon-wrapper,
.icon-badge,
.bestseller-icon-badge,
.promo-icon-badge,
.nabta-trust-icon,
.assurance-icon {
    transition:
        transform var(--nabta-dur-slow) var(--nabta-ease-out),
        background-color var(--nabta-dur-slow) ease,
        color var(--nabta-dur-slow) ease,
        box-shadow var(--nabta-dur-slow) ease;
}

@media (hover: hover) {
    .feature-item:hover .feature-icon-wrapper,
    .feature-card:hover .icon-badge,
    .bestseller-item:hover .bestseller-icon-badge,
    .promo-item:hover .promo-icon-badge,
    .nabta-trust-item:hover .nabta-trust-icon,
    .assurance-item:hover .assurance-icon {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 8px 18px rgba(var(--nabta-green-rgb), .13);
    }
}

/* ---- 8e. Footer credit text shine ----------------------------------------- */
.footer-credit span {
    background: linear-gradient(
        90deg,
        var(--nabta-gold) 0%,
        var(--nabta-gold-light) 45%,
        var(--nabta-gold) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nabtaTextShine 4s linear infinite;
}

@keyframes nabtaTextShine {
    to { background-position: 200% center; }
}

/* ---- 8f. Product-grid "fire" badge ----------------------------------------
   Intentionally OFF-PALETTE (reds/oranges) in the original. Preserved as-is
   because it is a deliberate urgency treatment; flagged in the notes. */
.ab-pgrid-badge-stack .ab-product-custom-badge {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    padding: 7px 14px !important;
    border: 1px solid #ffdc80 !important;
    border-radius: var(--nabta-radius-sm) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px #700000 !important;
    background: linear-gradient(110deg, #b51600, #ff3c00, #ff9800, #d52200, #ff6500) !important;
    background-size: 300% 300% !important;
    transform-origin: center;
    animation:
        abFireColors 1.2s linear infinite,
        abFireAttention 2.4s ease-in-out infinite !important;
}

/* Strong shine across the badge. Travel = (150% + 80%) / 45% = 511.11%.
   Paused by default (see --nabta-shine-state): the original `inset … !important`
   pinned `left`, so its `left` keyframes never took effect. */
.ab-pgrid-badge-stack .ab-product-custom-badge::after {
    content: "" !important;
    position: absolute !important;
    inset: -50% auto -50% -80% !important;
    width: 45% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent) !important;
    transform: translateX(0) skewX(-20deg);
    pointer-events: none;
    animation: abFireShine 2.4s ease-in-out infinite var(--nabta-shine-state, paused) !important;
}

@keyframes abFireColors {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes abFireAttention {
    0%, 100% { transform: scale(1) rotate(0);      box-shadow: 0 0 5px #ff4d00; }
    35%      { transform: scale(1.1) rotate(0);    box-shadow: 0 0 14px #ff6500, 0 0 22px #ff980080; }
    43%      { transform: scale(1.1) rotate(-3deg); }
    51%      { transform: scale(1.1) rotate(3deg); }
    59%      { transform: scale(1.1) rotate(-2deg); }
    67%      { transform: scale(1.1) rotate(0);    box-shadow: 0 0 14px #ff6500, 0 0 22px #ff980080; }
}

@keyframes abFireShine {
    0%, 15%   { transform: translateX(0)       skewX(-20deg); }
    55%, 100% { transform: translateX(511.11%) skewX(-20deg); }
}


/* =============================================================================
   8. DECORATIVE "VEGGIE SPARKLES" — reviews, footer, header
   -----------------------------------------------------------------------------
   Pure-CSS background art. The 13 inline SVGs used to be pasted 56 times; they
   are now defined ONCE as custom properties on the three host elements and
   referenced by name. SVG markup is byte-identical to the original.
   Colour is baked into each SVG (data-URIs can't read CSS variables), so there
   are separate green / gold / off-white variants.
   ============================================================================= */

.sr-reviews,
.ab-footer,
.ab-header-inner {
    --nabta-ico-leaf-green:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.4 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
    --nabta-ico-sun-gold:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A22B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
    --nabta-ico-carrot-gold:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A22B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14c-1.5 1.5-2 4-1 7 3 1 5.5.5 7-1l3-3-6-6-3 3Z'/%3E%3Cpath d='M13 11 11 9M14 4c1 0 2 .5 2.5 1.5M11 5c0-1.5.5-2.5 1.5-3M15 7c1.8-.2 3-.8 4-2'/%3E%3C/svg%3E");
    --nabta-ico-leaf2-green:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C8 12 12 7 19 5c0 7-4 13-10 14-1.5.3-2.8.2-4 0Z'/%3E%3Cpath d='M5 19c3-3 6-6 10-8'/%3E%3C/svg%3E");
    --nabta-ico-sprout-green:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M7 15c-2.5 0-4-1.5-4-4 3 0 5 1 6 3'/%3E%3Cpath d='M17 15c2.5 0 4-1.5 4-4-3 0-5 1-6 3'/%3E%3Cpath d='M12 11c0-3.5 2-6 6-7 0 4-2 6.5-6 7Z'/%3E%3C/svg%3E");
    --nabta-ico-sun2-gold:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A22B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E");
    --nabta-ico-sprout2-green:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M7 15c-2.5 0-4-1.5-4-4 3 0 5 1 6 3'/%3E%3Cpath d='M17 15c2.5 0 4-1.5 4-4-3 0-5 1-6 3'/%3E%3C/svg%3E");
    --nabta-ico-leaf-cream:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.4 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
    --nabta-ico-leaf2-cream:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C8 12 12 7 19 5c0 7-4 13-10 14-1.5.3-2.8.2-4 0Z'/%3E%3Cpath d='M5 19c3-3 6-6 10-8'/%3E%3C/svg%3E");
    --nabta-ico-sprout-cream:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M7 15c-2.5 0-4-1.5-4-4 3 0 5 1 6 3'/%3E%3Cpath d='M17 15c2.5 0 4-1.5 4-4-3 0-5 1-6 3'/%3E%3Cpath d='M12 11c0-3.5 2-6 6-7 0 4-2 6.5-6 7Z'/%3E%3C/svg%3E");
    --nabta-ico-sprout2-cream:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M7 15c-2.5 0-4-1.5-4-4 3 0 5 1 6 3'/%3E%3Cpath d='M17 15c2.5 0 4-1.5 4-4-3 0-5 1-6 3'/%3E%3C/svg%3E");
    --nabta-ico-leaf-green-sm:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.4 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3C/svg%3E");
    --nabta-ico-sun2-gold-sm:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A22B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2'/%3E%3C/svg%3E");
}


/* Hosts */
.sr-reviews,
.ab-footer {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.ab-header-inner {
    position: relative !important;
    isolation: isolate !important;
}

/* Keep real content above the decoration */
.sr-reviews .sr-inner,
.ab-footer .ab-footer-inner,
.ab-footer .ab-footer-bottom {
    position: relative !important;
    z-index: 2 !important;
}

.ab-header-inner > * {
    position: relative;
    z-index: 2;
}

/* Shared mechanics of every decorative layer */
.sr-reviews::before,   .sr-reviews::after,
.ab-footer::before,    .ab-footer::after,
.ab-header-inner::before, .ab-header-inner::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-repeat: no-repeat;       /* a single value applies to every layer */
    will-change: transform;
}


/* Reviews · layer 1 (leaves, sun, carrot) */
.sr-reviews::before {
    inset: -90px -50px !important;
    opacity: 0.16;
    background-size: 30px 30px, 23px 23px, 34px 34px, 27px 27px, 25px 25px, 21px 21px, 29px 29px, 24px 24px, 32px 32px, 22px 22px, 27px 27px, 20px 20px;
    background-position: 4% 16%, 11% 73%, 20% 38%, 29% 87%, 37% 18%, 45% 62%, 54% 31%, 63% 82%, 72% 15%, 80% 56%, 89% 33%, 96% 78%;
    background-image:
        var(--nabta-ico-leaf-green),
        var(--nabta-ico-sun-gold),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-sprout-green),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf-green),
        var(--nabta-ico-sprout2-green),
        var(--nabta-ico-sun-gold),
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-carrot-gold);
    animation: nabtaVeggieFloatA 14s ease-in-out infinite alternate !important;
}


/* Reviews · layer 2 (small details) */
.sr-reviews::after {
    inset: -70px -40px !important;
    opacity: 0.11;
    background-size: 19px 19px, 24px 24px, 18px 18px, 22px 22px, 20px 20px, 17px 17px, 23px 23px, 18px 18px, 21px 21px, 17px 17px;
    background-position: 7% 45%, 18% 91%, 30% 15%, 40% 53%, 51% 90%, 61% 8%, 71% 48%, 81% 93%, 89% 11%, 97% 51%;
    background-image:
        var(--nabta-ico-sprout2-green),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-sprout2-green),
        var(--nabta-ico-leaf-green),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-sprout2-green);
    animation: nabtaVeggieFloatB 18s ease-in-out infinite alternate !important;
}


/* Footer · layer 1 */
.ab-footer::before {
    inset: -80px -50px !important;
    opacity: 0.14;
    background-size: 29px 29px, 23px 23px, 33px 33px, 25px 25px, 27px 27px, 21px 21px, 30px 30px, 24px 24px, 28px 28px, 22px 22px, 31px 31px, 20px 20px;
    background-position: 4% 15%, 12% 72%, 21% 39%, 30% 84%, 38% 20%, 47% 63%, 55% 31%, 64% 80%, 73% 16%, 81% 55%, 90% 32%, 97% 76%;
    background-image:
        var(--nabta-ico-leaf-cream),
        var(--nabta-ico-sun-gold),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf2-cream),
        var(--nabta-ico-sprout-cream),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-leaf-cream),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-sprout2-cream),
        var(--nabta-ico-sun-gold),
        var(--nabta-ico-leaf2-cream),
        var(--nabta-ico-carrot-gold);
    animation: nabtaFooterFloatA 16s ease-in-out infinite alternate !important;
}


/* Footer · layer 2 */
.ab-footer::after {
    inset: -60px -40px !important;
    opacity: 0.08;
    background-size: 18px 18px, 22px 22px, 17px 17px, 20px 20px, 19px 19px, 23px 23px, 17px 17px, 20px 20px;
    background-position: 8% 47%, 20% 92%, 33% 11%, 46% 70%, 59% 22%, 72% 88%, 84% 42%, 95% 13%;
    background-image:
        var(--nabta-ico-sprout2-cream),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-leaf2-cream),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf-cream),
        var(--nabta-ico-sprout2-cream),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-leaf2-cream);
    animation: nabtaFooterFloatB 20s ease-in-out infinite alternate !important;
}


/* Header · layer 1 */
.ab-header-inner::before {
    inset: 0 !important;
    opacity: 0.13;
    background-size: 20px 20px, 16px 16px, 22px 22px, 17px 17px, 19px 19px, 15px 15px, 21px 21px, 16px 16px;
    background-position: 5% 30%, 17% 72%, 30% 22%, 43% 68%, 57% 28%, 70% 70%, 84% 25%, 96% 64%;
    background-image:
        var(--nabta-ico-leaf-green),
        var(--nabta-ico-sun-gold),
        var(--nabta-ico-sprout-green),
        var(--nabta-ico-carrot-gold),
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-sprout2-green),
        var(--nabta-ico-carrot-gold);
    animation: nabtaHeaderFloatA 13s ease-in-out infinite alternate !important;
}


/* Header · layer 2 */
.ab-header-inner::after {
    inset: 0 !important;
    opacity: 0.075;
    background-size: 13px 13px, 16px 16px, 12px 12px, 15px 15px, 13px 13px, 17px 17px;
    background-position: 10% 60%, 26% 38%, 40% 78%, 61% 52%, 76% 77%, 91% 42%;
    background-image:
        var(--nabta-ico-leaf2-green),
        var(--nabta-ico-sun2-gold),
        var(--nabta-ico-sprout2-green),
        var(--nabta-ico-leaf-green-sm),
        var(--nabta-ico-sun2-gold-sm),
        var(--nabta-ico-leaf2-green);
    animation: nabtaHeaderFloatB 17s ease-in-out infinite alternate !important;
}


/* ---- Float animations (transform only — compositor friendly) -------------- */
@keyframes nabtaVeggieFloatA {
    0%   { transform: translate3d(0, 8px, 0)    rotate(-2deg); }
    50%  { transform: translate3d(9px, -9px, 0) rotate(2deg); }
    100% { transform: translate3d(-7px, -20px, 0) rotate(-1deg); }
}
@keyframes nabtaVeggieFloatB {
    0%   { transform: translate3d(0, -5px, 0)   rotate(1deg); }
    50%  { transform: translate3d(-10px, 9px, 0) rotate(-2deg); }
    100% { transform: translate3d(8px, 17px, 0) rotate(2deg); }
}
@keyframes nabtaFooterFloatA {
    0%   { transform: translate3d(0, 7px, 0)    rotate(-1.5deg); }
    50%  { transform: translate3d(8px, -8px, 0) rotate(1.5deg); }
    100% { transform: translate3d(-7px, -16px, 0) rotate(-1deg); }
}
@keyframes nabtaFooterFloatB {
    0%   { transform: translate3d(0, -4px, 0)   rotate(1deg); }
    50%  { transform: translate3d(-8px, 8px, 0) rotate(-1.5deg); }
    100% { transform: translate3d(7px, 14px, 0) rotate(1.5deg); }
}
@keyframes nabtaHeaderFloatA {
    0%   { transform: translate3d(0, 1px, 0)    rotate(-0.8deg); }
    50%  { transform: translate3d(5px, -2px, 0) rotate(0.8deg); }
    100% { transform: translate3d(-4px, 2px, 0) rotate(-0.5deg); }
}
@keyframes nabtaHeaderFloatB {
    0%   { transform: translate3d(0, -1px, 0)   rotate(0.5deg); }
    50%  { transform: translate3d(-4px, 2px, 0) rotate(-0.8deg); }
    100% { transform: translate3d(4px, -2px, 0) rotate(0.5deg); }
}

/* ---- Mobile: fewer / softer details so content stays clean --------------- */
@media (max-width: 768px) {
    .sr-reviews::before {
        opacity: 0.13;
        background-size: 24px 24px, 19px 19px, 27px 27px, 21px 21px, 20px 20px, 17px 17px, 23px 23px, 19px 19px, 25px 25px, 18px 18px, 21px 21px, 17px 17px;
    }
    .sr-reviews::after { opacity: 0.085; }
    .ab-footer::before {
        opacity: 0.10;
        background-size: 23px 23px, 18px 18px, 26px 26px, 20px 20px, 21px 21px, 17px 17px, 24px 24px, 19px 19px, 22px 22px, 18px 18px, 24px 24px, 17px 17px;
    }
    .ab-footer::after { opacity: 0.065; }
    .ab-header-inner::before {
        opacity: 0.09;
        background-size: 16px 16px, 13px 13px, 17px 17px, 14px 14px, 15px 15px, 12px 12px, 16px 16px, 13px 13px;
    }
    .ab-header-inner::after { opacity: 0.045; }
}


/* =============================================================================
   9. PDP PURCHASE PANEL (.ab-pd*)
   ============================================================================= */
/* Rating */
.ab-pd-rating {
    display: flex !important;
    align-items: center !important;
    gap: var(--nabta-space-2) !important;
    margin-bottom: 14px !important;
}
.ab-pd-stars { display: flex !important; gap: 3px !important; }
.ab-pd-star  { color: var(--nabta-gold) !important; }
.ab-pd-reviews-count {
    color: var(--nabta-brown) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Low-stock pill */
.ab-fake-stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 14px 0 4px !important;
    padding: 9px 13px !important;
    background: rgba(var(--nabta-sale-rgb), .06) !important;
    border: 1px solid rgba(var(--nabta-sale-rgb), .12) !important;
    border-radius: var(--nabta-radius-pill) !important;
    box-shadow: none !important;
}
.ab-fs-status-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--nabta-sale) !important;
    box-shadow: 0 0 0 5px rgba(var(--nabta-sale-rgb), .08) !important;
}
.ab-fs-text {
    margin: 0 !important;
    color: var(--nabta-sale) !important;
    font-family: var(--nabta-font-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Live-visitors pill */
.ab-fake-visitor {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--nabta-space-2) !important;
    margin: var(--nabta-space-2) 0 4px !important;
    padding: 9px 13px !important;
    color: var(--nabta-green) !important;
    background: rgba(var(--nabta-green-rgb), .055) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .10) !important;
    border-radius: var(--nabta-radius-pill) !important;
}
.ab-fv-eye   { display: flex !important; color: var(--nabta-green) !important; }
.ab-fv-text  { margin: 0 !important; color: var(--nabta-green) !important; font-size: 13px !important; font-weight: 500 !important; }
.ab-fv-count { color: var(--nabta-gold) !important; font-weight: 800 !important; }   /* gold on off-white ≈ 2.1:1 — see notes */

/* Wishlist */
.ab-pd-actions { margin-top: var(--nabta-space-3) !important; }

.ab-pd-wishlist-btn {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--nabta-green) !important;
    background: var(--nabta-off-white) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .15) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(var(--nabta-green-rgb), .07) !important;
    /* was `transition: all` — now limited to what actually changes */
    transition:
        color var(--nabta-dur-fast) ease,
        background var(--nabta-dur-fast) ease,
        border-color var(--nabta-dur-fast) ease,
        transform var(--nabta-dur-fast) ease !important;
}
.ab-pd-wishlist-btn svg { width: 19px !important; height: 19px !important; }

.ab-pd-wishlist-btn:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: var(--nabta-focus-offset) !important;
}

@media (hover: hover) {
    .ab-pd-wishlist-btn:hover {
        color: var(--nabta-sale) !important;
        border-color: rgba(var(--nabta-sale-rgb), .25) !important;
        transform: translateY(-2px) !important;
    }
}

/* Active (wishlisted) state — filled, not colour-only */
.ab-pd-wishlist-btn.ab-active {
    color: var(--nabta-off-white) !important;
    background: var(--nabta-sale) !important;
    border-color: var(--nabta-sale) !important;
}

/* ---- Main CTA ---------------------------------------------------------------
   IMPORTANT: no colour / background / border-color overrides on purpose —
   EasyOrders keeps the button colour chosen in the dashboard.               */
.checkout_btn {
    position: relative !important;
    overflow: hidden !important;
    min-height: 52px !important;
    border-radius: var(--nabta-radius-md) !important;
    font-family: var(--nabta-font-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .12) !important;
    transition:
        transform var(--nabta-dur-fast) ease,
        box-shadow var(--nabta-dur-fast) ease,
        opacity var(--nabta-dur-fast) ease !important;
}

@media (hover: hover) {
    .checkout_btn:hover {
        transform: translateY(-2px) !important;      /* colour stays platform-owned */
        box-shadow: 0 10px 25px rgba(0, 0, 0, .16) !important;
    }
}

.checkout_btn:active {
    transform: scale(.985) !important;
}

.checkout_btn:focus-visible {
    outline: var(--nabta-focus-width) solid var(--nabta-focus-color) !important;
    outline-offset: 3px !important;
}

/* CTA shine — travel = (145% + 110%) / 45% = 566.67% */
.checkout_btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, .08),
        rgba(255, 255, 255, .42),
        rgba(255, 255, 255, .08),
        transparent
    );
    transform: translateX(0) skewX(-22deg);
    animation: nabtaPdpShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nabtaPdpShine {
    0%, 72%, 100% { transform: translateX(0)       skewX(-22deg); }
    88%           { transform: translateX(566.67%) skewX(-22deg); }
}

/* Secondary CTA */
.add_to_cart_btn {
    min-height: 48px !important;
    color: var(--nabta-green) !important;
    background: var(--nabta-cream) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .35) !important;
    border-radius: var(--nabta-radius-md) !important;
    font-family: var(--nabta-font-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition:
        background var(--nabta-dur-fast) ease,
        transform var(--nabta-dur-fast) ease,
        border-color var(--nabta-dur-fast) ease !important;
}

@media (hover: hover) {
    .add_to_cart_btn:hover {
        background: var(--nabta-cream-deep) !important;
        border-color: var(--nabta-green) !important;
        transform: translateY(-1px) !important;
    }
}

@media (max-width: 768px) {
    .checkout_btn { min-height: 50px !important; }
}


/* =============================================================================
   10. PAGE SPACING & PAYMENT CARDS
   ============================================================================= */
.ab-features   { margin-top: 30px; margin-bottom: 30px; }
.sr-reviews    { margin-bottom: 30px; }

/* ⚠ Tied to ONE specific section ID in the EasyOrders page builder.
   If that section is recreated, this rule silently stops matching. */
.home_section_container:has([sectionid="f3e7b6e3-383e-4ec2-942c-b1740933346a"]) {
    margin-bottom: 30px;
}

/* Hide the original (old) payment-methods image… */
.payment_card_img_container img,
.payment_card_img_container .payment_card_img {
    display: none !important;
}

/* …and show the new payment-methods artwork as a background instead.
   (As a CSS background it has no alt text — decorative only.) */
.payment_card_img_container {
    width: 100% !important;
    height: 145px !important;
    margin-top: 10px !important;
    background-image: url("https://res.cloudinary.com/h0wdwj1p/image/upload/v1790682091/Payment_way.png");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* Centre the card content */
.payment_card_content {
    align-items: center !important;
}
.payment_card_name,
.payment_card_description {
    width: 100% !important;
    text-align: center !important;
}


/* =============================================================================
   11. BUNDLE BUILDER (.bundles_*)
   -----------------------------------------------------------------------------
   Relies on EasyOrders' own utility classes (.flex, .text-xl, .text-xs,
   .border-skin-primary). Those hooks are fragile if the platform changes its
   markup — they are kept exactly as in the original.
   ============================================================================= */
.bundles_container {
    direction: rtl !important;
    margin-top: 26px !important;
    padding: 0 !important;
    font-family: var(--nabta-font) !important;
}

.bundles_title {
    margin: 0 !important;
    color: var(--nabta-green) !important;
    font-size: clamp(22px, 2.4vw, 28px) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.bundles_description {
    margin: 6px 0 var(--nabta-space-4) !important;
    color: var(--nabta-brown) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

/* Bundle card — same surface language as .ab-pd */
.bundles_item {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    padding: 22px !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .11) !important;
    border-radius: var(--nabta-radius-xl) !important;
    background: var(--nabta-surface-card) !important;
    box-shadow: var(--nabta-shadow-card) !important;
    transition:
        transform var(--nabta-dur-slow) var(--nabta-ease-out),
        box-shadow var(--nabta-dur-slow) ease,
        border-color var(--nabta-dur-slow) ease !important;
}

@media (hover: hover) {
    .bundles_item:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(var(--nabta-green-rgb), .20) !important;
        box-shadow: var(--nabta-shadow-card-hover) !important;
    }
}

/* Sun glow */
.bundles_item::before {
    content: "" !important;
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;
    top: -90px !important;
    left: -65px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(var(--nabta-gold-rgb), .17) 0%, rgba(var(--nabta-gold-rgb), 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.bundles_item > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Offer header */
.bundles_item > .flex:first-child {
    align-items: center !important;
    padding-bottom: 18px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(var(--nabta-green-rgb), .09) !important;
}

.bundles_item > .flex:first-child p.text-xl {
    margin: 0 !important;
    color: var(--nabta-green) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

/* Savings chip */
.bundles_item > .flex:first-child p.text-xs {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    padding: 7px 11px !important;
    margin-top: 7px !important;
    color: var(--nabta-green-dark) !important;
    background: rgba(var(--nabta-gold-rgb), .15) !important;
    border: 1px solid rgba(var(--nabta-gold-rgb), .30) !important;
    border-radius: var(--nabta-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Radio */
.bundles_item .radio_container {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    margin-inline-end: var(--nabta-space-2) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .25) !important;
    background: var(--nabta-off-white) !important;
    box-shadow: 0 2px 8px rgba(var(--nabta-green-rgb), .05) !important;
}
.bundles_item .radio_circle {
    width: 13px !important;
    height: 13px !important;
    background: var(--nabta-green) !important;
    box-shadow: 0 2px 5px rgba(var(--nabta-green-rgb), .18) !important;
}

/* Product block inside a bundle */
.bundles_item > div:not(:first-child) .border-skin-primary {
    margin-top: 14px !important;
    padding: var(--nabta-space-4) var(--nabta-space-4) 18px !important;
    background: rgba(var(--nabta-off-white-rgb), .70) !important;
    border: 1px solid rgba(var(--nabta-green-rgb), .09) !important;
    border-radius: var(--nabta-radius-lg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
}

/* Soften the platform's straight dividers */
.bundles_item .border-skin-primary.border-b {
    border-bottom: 1px solid rgba(var(--nabta-green-rgb), .09) !important;
}

.bundles_item .border-skin-primary > p:first-child {
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: var(--nabta-green) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

/* Variation chips inside bundles (extends section 4) */
.bundles_item .variation_name {
    margin-bottom: 6px !important;
    color: var(--nabta-brown) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.bundles_item .button_variations_container { gap: var(--nabta-space-2) !important; }

.bundles_item .button_variation {
    min-height: 42px !important;
    padding: 7px var(--nabta-space-3) !important;
    border-radius: var(--nabta-radius-md) !important;
    font-size: 13px !important;
}

@media (hover: hover) {
    /* Gold hover makes bundles feel richer */
    .bundles_item .button_variation:hover {
        border-color: rgba(var(--nabta-gold-rgb), .55) !important;
        box-shadow: 0 5px 14px rgba(var(--nabta-gold-rgb), .10) !important;
    }
}

.bundles_item .button_variation[aria-checked="true"] {
    color: var(--nabta-off-white) !important;
    background: var(--nabta-green) !important;
    border-color: var(--nabta-green) !important;
    box-shadow: 0 7px 18px rgba(var(--nabta-green-rgb), .18) !important;
}

/* "Save X" label */
.bundles_label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 11px !important;
    color: var(--nabta-off-white) !important;
    background: var(--nabta-sale) !important;
    border: 1px solid rgba(var(--nabta-sale-rgb), .20) !important;
    border-radius: var(--nabta-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(var(--nabta-sale-rgb), .16) !important;
}
.bundles_label > .absolute {            /* old ribbon wings */
    display: none !important;
}

/* Shine — travel = (145% + 120%) / 32% = 828.13%.
   Paused by default (see --nabta-shine-state); same original defect as above. */
.bundles_item::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 32% !important;
    height: 100% !important;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, .24) 50%,
        rgba(255, 255, 255, 0) 75%,
        transparent 100%
    ) !important;
    transform: translateX(0) skewX(-22deg);
    animation: nabtaBundleShine 8s ease-in-out infinite var(--nabta-shine-state, paused) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

@keyframes nabtaBundleShine {
    0%, 76%   { transform: translateX(0)       skewX(-22deg); }
    90%, 100% { transform: translateX(828.13%) skewX(-22deg); }
}

@media (max-width: 768px) {
    .bundles_item {
        padding: var(--nabta-space-4) !important;
        border-radius: var(--nabta-radius-lg) !important;
    }
    .bundles_item > .flex:first-child { padding-bottom: 14px !important; }
    .bundles_item > div:not(:first-child) .border-skin-primary {
        padding: 14px !important;
        border-radius: var(--nabta-radius-md) !important;
    }
    .bundles_item .button_variation {
        min-height: 40px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }
    .bundles_item > .flex:first-child p.text-xl      { font-size: 18px !important; }
    .bundles_item .border-skin-primary > p:first-child { font-size: 14px !important; }

    /* Overflow fix: drop the oversized decorative pseudo-elements on phones.
       Bundle choices, pricing and checkout are untouched. */
    #product-id .bundles_item::before,
    #product-id .bundles_item::after {
        content: none !important;
        animation: none !important;
    }
}


/* =============================================================================
   12. VISA-DISCOUNT TEXT (payment card)
   -----------------------------------------------------------------------------
   Matches the card by the filename of its image — brittle: if the image is
   re-uploaded under a new name this rule stops applying.
   ============================================================================= */
button.payment_card:has(img[src*="1790669819536645281.png"]) .payment_card_content::after {
    content: "خصم 10% عند الدفع بالفيزا";        /* "10% off when paying by Visa" */
    display: block;
    width: fit-content;
    margin: var(--nabta-space-2) auto 0;
    color: var(--nabta-green);                   /* fallback if background-clip:text is unsupported */
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    direction: rtl;
    background: linear-gradient(
        110deg,
        var(--nabta-green) 0%,
        var(--nabta-green) 35%,
        var(--nabta-gold) 50%,
        var(--nabta-green) 65%,
        var(--nabta-green) 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: visaShine 2.8s ease-in-out infinite;
}

@keyframes visaShine {
    0%      { background-position: 120% 0; }
    55%,100% { background-position: -120% 0; }
}


/* =============================================================================
   13. REDUCED MOTION — keep this block LAST
   -----------------------------------------------------------------------------
   One consolidated block (the original had 8 scattered ones, and missed the
   .checkout_btn shine and the Visa text shine). Every selector here repeats the
   one that sets its animation so the override always wins.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ab-fc-colon span,
    .checkout_buy_now::before,
    .checkout_btn::after,
    .bundles_item::after,
    :is(
        .features-badge-bar,
        .feature-banner,
        .bestseller-feature-bar,
        .promo-banner-bar,
        .promo-feature-bar,
        .nabta-trust-bar,
        .nabta-order-assurance,
        .nabta-shipping-notice
    )::after,
    .nabta-discount-badge,
    .discount-badge,
    .hero-badge,
    .ab-nav-badge--new,
    .ab-nav-badge--sale,
    .footer-credit span,
    .ab-pgrid-badge-stack .ab-product-custom-badge,
    .ab-pgrid-badge-stack .ab-product-custom-badge::after,
    .sr-reviews::before,
    .sr-reviews::after,
    .ab-footer::before,
    .ab-footer::after,
    .ab-header-inner::before,
    .ab-header-inner::after {
        animation: none !important;
    }

    /* Separate rule: a selector list containing :has() is dropped entirely by
       browsers without :has() support, so it must not share a list. */
    button.payment_card:has(img[src*="1790669819536645281.png"]) .payment_card_content::after {
        animation: none !important;
    }

    /* Make hover/focus transitions effectively instant */
    .ab-fake-counter,
    .ab-fc-cell,
    .button_variation,
    .quantity_btn_container button,
    .ab-fixed-buy-qty-btn,
    .checkout_btn,
    .add_to_cart_btn,
    .ab-pd-wishlist-btn,
    .bundles_item {
        transition-duration: .01ms !important;
    }
}



/* NABTA — Shipping Cost */

.shipping_cost_container {
  direction: rtl;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  padding: 14px 15px !important;
  margin: 12px 0 !important;
  background: #F5EBDD;
  border: 1px solid rgba(36, 75, 50, 0.14);
  border-right: 4px solid #E8A22B;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Shipping title + SVG icon */
.shipping_cost_container dt.text-gray-600 {
  position: relative;
  padding-right: 38px;
  color: #244B32 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 28px;
}

/* SVG truck icon — CSS only */
.shipping_cost_container dt.text-gray-600::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: rgba(36, 75, 50, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23244B32' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  border-radius: 7px;
}

/* Estimated shipping range */
.shipping_cost_container dt.text-gray-600::after {
  content: "من 65 لـ 85 جنيه حسب المحافظة";
  display: block;
  margin-top: 5px;
  color: #75563A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* Dynamic shipping price */
.shipping_cost_container dd.shipping_cost {
  flex-shrink: 0;
  margin: 0 !important;
  color: #244B32 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.6;
  text-align: left;
}

/* Mobile */
@media (max-width: 480px) {
  .shipping_cost_container {
    gap: 10px;
    padding: 12px !important;
    border-radius: 9px;
  }

  .shipping_cost_container dt.text-gray-600 {
    font-size: 14px !important;
  }

  .shipping_cost_container dt.text-gray-600::before {
    width: 27px;
    height: 27px;
    background-size: 20px 20px;
  }

  .shipping_cost_container dt.text-gray-600::after {
    font-size: 14px;
  }

  .shipping_cost_container dd.shipping_cost {
    font-size: 12px !important;
  }
}