/*
Theme Name:   Shoptimizer Child
Theme URI:    https://testingspeed.aromaelitebd.shop
Description:  Child theme for Shoptimizer — keeps custom single-product.php and other overrides safe across parent theme updates.
Author:       Aroma Elite BD
Author URI:   https://testingspeed.aromaelitebd.shop
Template:     shoptimizer
Version:      1.0.8
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  shoptimizer-child
*/

/* ──────────────────────────────────────────────────────────────────
   Product page breadcrumb — TIGHTER VERTICAL SPACING ONLY.

   The actual "remove last segment" trim is now done in PHP via the
   `woocommerce_get_breadcrumb` filter (see functions.php). That gives
   us a clean trim before any HTML is even generated, eliminating all
   the CSS hacks we tried before.
   ────────────────────────────────────────────────────────────────── */

body.single-product .woocommerce-breadcrumb,
body.single-product .shoptimizer-breadcrumb-mod,
body.single-product .breadcrumbs,
body.single-product nav[aria-label="breadcrumb" i] {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    font-size: 12px !important;
}

/* Make sure breadcrumb items have proper inline spacing on every screen size. */
body.single-product .woocommerce-breadcrumb a,
body.single-product .woocommerce-breadcrumb span,
body.single-product .woocommerce-breadcrumb .breadcrumb-separator {
    display: inline !important;
    white-space: normal !important;
}

/* Force visible padding around the separator span so its " / " is never collapsed. */
body.single-product .woocommerce-breadcrumb .breadcrumb-separator {
    padding: 0 6px !important;
    margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   MENU STRIP — make .shoptimizer-primary-navigation.col-full BLACK so
   the menu row (Checkout / FOR HIM / FOR HER ...) is a continuous
   black bar that matches the .com reference site.

   IMPORTANT: only the MENU strip is black. The logo + search row
   (.main-header.col-full) stays WHITE — that matches the reference.

   Specificity note: the cream-tint rule lower in this file
   (body.single-product div#page .col-full) was beating an earlier
   version of this rule. Boosted specificity to (2 IDs + 3 classes)
   by adding body + #page + #masthead, which outranks every
   .col-full rule we have.
   ────────────────────────────────────────────────────────────────── */
body div#page header#masthead .shoptimizer-primary-navigation.col-full,
body div#page header#masthead .col-nav-full,
body div#page #masthead .shoptimizer-primary-navigation {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   #static-banner — REVERT. This is the yellow announcement strip from
   the Shoptimizer theme/plugin. Previously we forced it black to merge
   with the (broken) header. Now that the header is fixed properly, let
   the banner show its original yellow background and text.

   The banner text injection is handled by a fallback in functions.php
   (the original parent-theme JS that populated it has a syntax error
   we can't patch from the child theme).
   ────────────────────────────────────────────────────────────────── */
/* (intentionally left empty — no overrides on #static-banner anymore) */

/* ──────────────────────────────────────────────────────────────────
   Neutralize the cream/grey tint (#f8f8f8 / rgb(248,248,248)) on .col-full
   wrappers on product pages. Confirmed via console - 2 .col-full divs near
   top of page have this background.

   IMPORTANT: scoped to .col-full inside #content/#page-content ONLY.
   Earlier version used `div#page .col-full` which also caught the
   header's .col-full (header is inside #page too) and forced the
   header white. Now using #content as the scope to keep header
   .col-full untouched.
   ────────────────────────────────────────────────────────────────── */
body.single-product div#content.site-content .col-full,
body.single-product div#content .col-full,
body.single-product div#content .shoptimizer-archive .col-full,
body.single-product .site-content > .shoptimizer-archive > .archive-header > .col-full,
body.single-product .site-content > .col-full {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   Tight padding on .archive-header — keeps breadcrumb area compact.
   ────────────────────────────────────────────────────────────────── */
body.single-product .archive-header {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   NOTE: the gaps between mobile blocks (gallery→info, info→action,
   action→timer) are now controlled by the plugin's "📐 Mobile Spacing"
   card. The CSS variables --ap-gap-* are set in single-product.php from
   the saved options. Adjust those values in WP Admin, not here.
   ────────────────────────────────────────────────────────────────── */

/* Remove the underline on "(N reviews)" link — keep the click-to-scroll
   behavior, just visually cleaner. Targets both possible class names. */
body.single-product .ap-reviews-count,
body.single-product a.ap-reviews-count,
body.single-product .ap-mob-rcnt,
body.single-product a.ap-mob-rcnt,
body.single-product .ap-mob-rcnt:hover,
body.single-product .ap-mob-rcnt:focus,
body.single-product .ap-reviews-count:hover,
body.single-product .ap-reviews-count:focus {
    text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   DESKTOP SPARKLE TIMER FIX (2026-05-06)

   Diagnosis: in the parent template, the `.ap-urgency-timer--sparkle`
   and `.ap-mob-sparkle` rules that establish position: relative on the
   timer parent and position: absolute on the sparkle spans are trapped
   inside an unclosed `@media (max-width:768px)` block (starts line 798
   in the parent's <style>, never closes before this block).

   Effect: on desktop, sparkles fall back to position: static and line
   up as inline characters in the left side of the timer flex row,
   instead of being scattered decoratively across the timer's surface.
   The botanical style works because its rules ARE at root level.

   This was a pre-existing template bug — became visible on combo
   product pages because they tend to use the sparkle style and the
   page is now scrolled to where the timer is in primary view.

   Fix: re-declare the affected rules at root level (outside any media
   query), so they apply on desktop too.
   ────────────────────────────────────────────────────────────────── */
body.single-product .ap-urgency-timer--sparkle {
    position: relative !important;
    overflow: hidden !important;
}
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle {
    position: absolute !important;
    width: 8px;
    height: 8px;
    color: #d4af37;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    animation: apSparkle 2.5s ease-in-out infinite;
}
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(1) { top: 14%; left: 8%;  animation-delay: 0s; }
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(2) { top: 70%; left: 12%; animation-delay: 0.6s; }
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(3) { top: 22%; right: 10%; animation-delay: 1.2s; }
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(4) { top: 65%; right: 14%; animation-delay: 1.8s; font-size: 8px; }
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(5) { top: 8%;  left: 50%; animation-delay: 0.4s; font-size: 7px; }
body.single-product .ap-urgency-timer--sparkle .ap-mob-sparkle:nth-child(6) { bottom: 12%; left: 48%; animation-delay: 1.6s; }
@keyframes apSparkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1); }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE COMBO DROPDOWN PADDING (2026-05-06)

   Diagnosis: `.ayra-combo-wrap` renders flush to its parent
   `.ap-product-info`'s edge (left:0, right:0). The .ap-container above
   provides 20px page-edge padding so other text content (title, price)
   has visual room. But the combo cards' borders make them feel cramped
   against that 20px boundary — they need extra inset to breathe.

   Fix: add 6px horizontal padding to the wrap on mobile only.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.single-product .ayra-combo-wrap {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}