/* ============================================================
   FILE: custom-styles.css
   PURPOSE: All custom frontend styles for SomethingOrganic.com.pk
   SECTIONS:
     1.  Search Results Grid — wrapper & layout
     2.  Search Results — Product Cards
     3.  Search Results — Sale Badge
     4.  Search Results — Product Images
     5.  Search Results — ShopEngine Action Icons (Wishlist / Quickview / Compare)
     6.  Search Results — Category Label
     7.  Search Results — Product Title
     8.  Search Results — Price
     9.  Search Results — Add to Cart Button
     10. Search Results — Buy Now Button
     11. Search Results — Star Rating
     12. Search Results — Responsive (Tablet & Mobile)
     13. Duplicate / Legacy Search Grid (older selectors kept for safety)
     14. Facebook-Style Reviews Shortcode [fb_reviews]
     15. WhatsApp-Style Reviews Shortcode [whatsapp_reviews]
     16. Quantity Boxes Shortcode [qty_boxes]
     17. Promotional Badges (qty_boxes labels)
     18. Video Reviews Shortcode [video_reviews]
   ============================================================ */


/* ============================================================
   SECTION 1: SEARCH RESULTS — WRAPPER & GRID LAYOUT
   ------------------------------------------------------------
   .custom-search-results-wrap is the outer div added by the
   [custom_search_products] shortcode (functions.php #4).
   We reset WooCommerce's default ul.products to a clean flexbox
   grid so cards sit side-by-side in 4 columns on desktop.
   gap/margin/padding overrides clear WooCommerce's own spacing.
   ============================================================ */

.custom-search-results-wrap {
    width: 100%;
    padding: 0;
}

.custom-search-results-wrap ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    justify-content: flex-start !important;
}

/* Remove ghost space added by WooCommerce's clearfix pseudo-elements */
.custom-search-results-wrap ul.products::before,
.custom-search-results-wrap ul.products::after,
.custom-search-results-wrap ul.products li.product::before,
.custom-search-results-wrap ul.products li.product::after {
    display: none !important;
}


/* ============================================================
   SECTION 2: SEARCH RESULTS — PRODUCT CARD BASE STYLE
   ------------------------------------------------------------
   Each li.product is one card. width calc(25% - 15px) gives
   exactly 4 columns accounting for the 20px gap between them.
   flex-direction: column ensures image sits on top, content
   stacks below. overflow:hidden clips the image corners to
   match the card's border-radius cleanly.
   ============================================================ */

.custom-search-results-wrap ul.products li.product {
    width: calc(25% - 15px) !important;
    flex: 0 0 auto !important;
    position: relative !important;           /* needed for absolute-positioned badges/icons */
    background: #fff !important;
    border-radius: 8px !important;
    padding: 0 0 15px 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #eee !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Lift card on hover for interactive feel */
.custom-search-results-wrap ul.products li.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    transform: translateY(-5px) !important;
}


/* ============================================================
   SECTION 3: SEARCH RESULTS — SALE BADGE
   ------------------------------------------------------------
   .onsale is WooCommerce's built-in sale tag. We position it
   absolute top-left so it overlays the product image.
   min-height/width unset removes WooCommerce's default circular
   badge shape and replaces it with a flat pill.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .onsale {
    background: #ff3b30 !important;
    color: white !important;
    border-radius: 3px !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    margin: 0 !important;
    min-height: unset !important;           /* override WooCommerce circular badge default */
    width: auto !important;
}


/* ============================================================
   SECTION 4: SEARCH RESULTS — PRODUCT IMAGE
   ------------------------------------------------------------
   Targets images inside the card link and ShopEngine's own
   image wrapper. width:100% + object-fit:cover ensures images
   fill their container without distorting regardless of the
   original image dimensions uploaded in WooCommerce.
   border-radius only on top corners so it sits flush with card edge.
   ============================================================ */

.custom-search-results-wrap ul.products li.product a img,
.custom-search-results-wrap ul.products li.product .shopengine-product-img-wrapper img,
.custom-search-results-wrap ul.products li.product .woocommerce-LoopProduct-link img {
    width: 100% !important;
    height: auto !important;
    border-radius: 5px 5px 0 0 !important;  /* only round top corners — bottom sits against card body */
    margin-bottom: 0 !important;
    display: block !important;
    background: #F7F9FB !important;         /* placeholder background while image loads */
    object-fit: cover !important;
}


/* ============================================================
   SECTION 5: SEARCH RESULTS — SHOPENGINE ACTION ICONS
   ------------------------------------------------------------
   ShopEngine adds Wishlist, Quickview, and Compare icons as
   absolutely-positioned buttons. We stack them vertically on
   the right side of the card at 50px intervals.
   The circular white background + shadow makes them pop against
   any product image color.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .shopengine-wishlist,
.custom-search-results-wrap ul.products li.product .shopengine-quickview-trigger,
.custom-search-results-wrap ul.products li.product .shopengine-comparison {
    position: absolute !important;
    background: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
    right: 15px !important;
    cursor: pointer !important;
}

/* Wishlist icon — top of the stack */
.custom-search-results-wrap ul.products li.product .shopengine-wishlist {
    top: 15px !important;
    color: black !important;
}

/* Quickview icon — 50px below wishlist */
.custom-search-results-wrap ul.products li.product .shopengine-quickview-trigger {
    top: 65px !important;
    color: black !important;
}

/* Compare icon — 50px below quickview */
.custom-search-results-wrap ul.products li.product .shopengine-comparison {
    top: 115px !important;
    color: black !important;
}


/* ============================================================
   SECTION 6: SEARCH RESULTS — PRODUCT CATEGORY LABEL
   ------------------------------------------------------------
   ShopEngine outputs the category as .shopengine-product-cats.
   WooCommerce's default loop uses .posted_in. Both are targeted
   for compatibility. Shown in grey, small text above the title.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .shopengine-product-cats,
.custom-search-results-wrap ul.products li.product .posted_in {
    font-size: 13px !important;
    color: #858585 !important;
    padding: 18px 0 0 20px !important;
    display: block !important;
    font-weight: 400 !important;
    line-height: 14px !important;
}


/* ============================================================
   SECTION 7: SEARCH RESULTS — PRODUCT TITLE
   ------------------------------------------------------------
   min-height: 40px keeps cards aligned even when product names
   differ in length. padding-left:20px matches the category label
   indent. text-transform:capitalize ensures consistent casing
   regardless of how the product was entered in WooCommerce.
   ============================================================ */

.custom-search-results-wrap ul.products li.product h2,
.custom-search-results-wrap ul.products li.product .woocommerce-loop-product__title {
    font-size: 19px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #101010 !important;
    min-height: 40px !important;
    line-height: 18px !important;
    padding: 10px 20px 1px 20px !important;
    text-align: left !important;
    text-transform: capitalize !important;
}


/* ============================================================
   SECTION 8: SEARCH RESULTS — PRICE
   ------------------------------------------------------------
   WooCommerce wraps the sale price in <ins> and original in <del>.
   We style them separately: del is grey/smaller (crossed out),
   ins is bold black (the actual selling price).
   ============================================================ */

.custom-search-results-wrap ul.products li.product .price {
    display: block !important;
    padding: 8px 20px 16px 20px !important;
    margin: 0 !important;
    color: #101010 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-align: left !important;
    line-height: 20px !important;
}

/* Original (crossed out) price */
.custom-search-results-wrap ul.products li.product .price del {
    color: #999 !important;
    font-size: 14px !important;
    margin-right: 5px !important;
    font-weight: 400 !important;
}

/* Sale / current price */
.custom-search-results-wrap ul.products li.product .price ins {
    text-decoration: none !important;      /* WooCommerce adds underline to <ins> — remove it */
    font-size: 18px !important;
    color: #101010 !important;
    font-weight: 700 !important;
}


/* ============================================================
   SECTION 9: SEARCH RESULTS — ADD TO CART BUTTON
   ------------------------------------------------------------
   WooCommerce outputs different classes depending on product type:
   .product_type_simple / .product_type_variable — all targeted.
   width: calc(100% - 20px) + margin:0 10px keeps the button
   inset from the card edges by 10px on each side.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .button,
.custom-search-results-wrap ul.products li.product .add_to_cart_button,
.custom-search-results-wrap ul.products li.product .product_type_simple,
.custom-search-results-wrap ul.products li.product .product_type_variable {
    background: #000 !important;
    color: #f1f1f1 !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    width: calc(100% - 20px) !important;
    margin: 0 10px 0 10px !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.custom-search-results-wrap ul.products li.product .button:hover,
.custom-search-results-wrap ul.products li.product .add_to_cart_button:hover {
    background: #333 !important;
    color: #f1f1f1 !important;
}


/* ============================================================
   SECTION 10: SEARCH RESULTS — BUY NOW BUTTON
   ------------------------------------------------------------
   .wpcbn-btn is added by the "Buy Now" plugin (WPC Buy Now).
   Styled in orange/yellow to visually separate it from the
   black "Add to Cart" button directly above.
   margin-top:5px creates a small gap between the two buttons.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .wpcbn-btn {
    background: #f4b41a !important;
    color: #fff !important;
    margin: 5px 10px 0 10px !important;
    display: block !important;
    width: calc(100% - 20px) !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    text-align: center !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
}

.custom-search-results-wrap ul.products li.product .wpcbn-btn:hover {
    background: #f57c00 !important;
    color: #fff !important;
}


/* ============================================================
   SECTION 11: SEARCH RESULTS — STAR RATING
   ------------------------------------------------------------
   WooCommerce outputs .star-rating via its template.
   We just nudge it into alignment with the card's left padding.
   ============================================================ */

.custom-search-results-wrap ul.products li.product .star-rating {
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: #FEC42D !important;
}


/* ============================================================
   SECTION 12: SEARCH RESULTS — RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------
   Desktop:  4 columns (default above)
   Tablet:   2 columns at ≤992px
   Mobile:   2 columns at ≤768px with smaller text/buttons
   Small:    2 columns at ≤480px with tighter gaps
   Icons are also shrunk and repositioned on mobile.
   ============================================================ */

/* Tablet — 2 columns */
@media (max-width: 992px) {
    .custom-search-results-wrap ul.products li.product {
        width: calc(50% - 10px) !important;
    }
}

/* Mobile — 2 columns, smaller fonts */
@media (max-width: 768px) {
    .custom-search-results-wrap ul.products {
        gap: 12px !important;
    }
    .custom-search-results-wrap ul.products li.product {
        width: calc(50% - 6px) !important;
    }
    .custom-search-results-wrap ul.products li.product h2,
    .custom-search-results-wrap ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px !important;
        padding: 8px 10px 1px 10px !important;
    }
    .custom-search-results-wrap ul.products li.product .price {
        font-size: 15px !important;
        padding: 6px 10px 10px 10px !important;
    }
    .custom-search-results-wrap ul.products li.product .button,
    .custom-search-results-wrap ul.products li.product .add_to_cart_button,
    .custom-search-results-wrap ul.products li.product .product_type_simple {
        font-size: 12px !important;
        padding: 8px 8px !important;
        width: calc(100% - 12px) !important;
        margin: 0 6px !important;
    }
    .custom-search-results-wrap ul.products li.product .wpcbn-btn {
        font-size: 12px !important;
        padding: 8px 8px !important;
        width: calc(100% - 12px) !important;
        margin: 4px 6px 0 6px !important;
    }
    /* Shrink and reposition ShopEngine icons on mobile */
    .custom-search-results-wrap ul.products li.product .shopengine-wishlist {
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .custom-search-results-wrap ul.products li.product .shopengine-quickview-trigger {
        top: 52px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .custom-search-results-wrap ul.products li.product .shopengine-comparison {
        top: 94px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
    }
}

/* Small mobile — 2 columns, tightest gap */
@media (max-width: 480px) {
    .custom-search-results-wrap ul.products {
        gap: 10px !important;
    }
    .custom-search-results-wrap ul.products li.product {
        width: calc(50% - 5px) !important;
    }
}


/* ============================================================
   SECTION 13: LEGACY / DUPLICATE SEARCH GRID SELECTORS
   ------------------------------------------------------------
   These older selectors target the WooCommerce search results
   page via body class (post-type-archive-product.search and
   search-results). They were written before the [custom_search_products]
   shortcode existed and are kept as a safety net in case the
   shortcode wrapper is not present on some pages.
   They use CSS variables (--shopengine-*) that ShopEngine
   injects, so styling stays consistent with the main shop page.
   ============================================================ */

/* Buy Now button override for legacy search pages */
.wpcbn-btn {
    width: 90% !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 12px !important;
}

/* Grid layout via CSS grid (older approach — still active on body.search pages) */
.post-type-archive-product.search .woocommerce ul.products,
.search-results .woocommerce ul.products,
body.woocommerce-page.woocommerce-shop .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    margin: 0 0 50px 0 !important;
    padding: 0 !important;
}

/* Card styles using ShopEngine CSS variables for consistency with shop page */
.post-type-archive-product.search .woocommerce ul.products li.product,
.search-results .woocommerce ul.products li.product {
    background: var(--shopengine-product-bg, #ffffff) !important;
    border: 1px solid var(--shopengine-border-color, #eaeaea) !important;
    border-radius: var(--shopengine-border-radius, 12px) !important;
    padding: var(--shopengine-padding, 25px) !important;
    text-align: center !important;
    position: relative !important;
    transition: all 0.3s var(--shopengine-transition, ease) !important;
    box-shadow: var(--shopengine-shadow, 0 5px 15px rgba(0,0,0,0.05)) !important;
}

/* Hover effect using ShopEngine variables */
.post-type-archive-product.search .woocommerce ul.products li.product:hover,
.search-results .woocommerce ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shopengine-hover-shadow, 0 15px 30px rgba(0,0,0,0.1)) !important;
    border-color: var(--shopengine-primary, #27ae60) !important;
}

.post-type-archive-product.search .woocommerce span.onsale,
.search-results .woocommerce span.onsale {
    background: var(--shopengine-sale-bg, #ff3b30) !important;
    color: var(--shopengine-sale-color, #ffffff) !important;
    border-radius: 3px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10 !important;
    line-height: 1 !important;
}

.post-type-archive-product.search .woocommerce ul.products li.product img,
.search-results .woocommerce ul.products li.product img {
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    height: auto !important;
}

.post-type-archive-product.search .woocommerce-loop-product__title,
.search-results .woocommerce-loop-product__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}

.post-type-archive-product.search .woocommerce ul.products li.product .price,
.search-results .woocommerce ul.products li.product .price {
    color: #e74c3c !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 15px 0 !important;
}

.post-type-archive-product.search .woocommerce ul.products li.product .price del,
.search-results .woocommerce ul.products li.product .price del {
    color: #95a5a6 !important;
    font-size: 16px !important;
    margin-right: 10px !important;
}

/* Button using ShopEngine primary colour variable */
.post-type-archive-product.search .woocommerce ul.products li.product .button,
.search-results .woocommerce ul.products li.product .button {
    background: var(--shopengine-button-bg, #27ae60) !important;
    color: var(--shopengine-button-color, #ffffff) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 25px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: block !important;
    margin: 10px 0 5px 0 !important;
    transition: all 0.3s ease !important;
}

.post-type-archive-product.search .woocommerce ul.products li.product .button:hover,
.search-results .woocommerce ul.products li.product .button:hover {
    background: var(--shopengine-button-hover, #219653) !important;
    transform: translateY(-2px) !important;
}

/* Legacy ShopEngine icon positioning for search body class pages */
.post-type-archive-product.search .shopengine-wishlist,
.search-results .shopengine-wishlist,
.post-type-archive-product.search .shopengine-quickview-trigger,
.search-results .shopengine-quickview-trigger {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    z-index: 5 !important;
}


/* ============================================================
   SECTION 14: FACEBOOK-STYLE REVIEWS — [fb_reviews] SHORTCODE
   ------------------------------------------------------------
   Rendered by custom_fb_reviews_shortcode() in functions.php #6.
   Cards are laid out in a 5-column flex row (width:19% each
   with gap:10px). Portrait image (height:300px) sits at the top,
   reviewer name below, then the message text.
   Background #f0f2f5 is Facebook's own comment bubble colour.
   On mobile (≤768px) switches to single-column stacked layout.
   ============================================================ */

.fb-style-reviews {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

/* Each individual Facebook-style review card */
.fb-style-card {
    background: #f0f2f5 !important;         /* matches Facebook comment bubble background */
    border-radius: 12px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
    padding: 12px !important;
    width: 19% !important;                  /* 5 cards per row with gap */
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Card header: image stacked above name */
.fb-style-header {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 8px !important;
}

/* Reviewer portrait image — tall crop like Facebook post images */
.fb-style-img {
    width: 100% !important;
    height: 300px !important;
    border-radius: 10px !important;
    object-fit: cover !important;           /* prevents distortion on different image ratios */
    margin-bottom: 8px !important;
}

.fb-style-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #050505 !important;
    margin-bottom: 4px !important;
}

/* white-space:pre-wrap preserves line breaks entered in ACF textarea */
.fb-style-message {
    font-size: 13px !important;
    color: #050505 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
}


/* ============================================================
   SECTION 15: WHATSAPP-STYLE REVIEWS — [whatsapp_reviews] SHORTCODE
   ------------------------------------------------------------
   Rendered by custom_whatsapp_reviews_shortcode() in functions.php #7.
   Same 5-column layout as Facebook reviews.
   Background #DCF8C6 is WhatsApp's own message bubble green.
   Adds a .whatsapp-style-time element (optional ACF sub-field)
   shown in small grey text below the reviewer's name.
   ============================================================ */

.whatsapp-style-reviews {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 30px !important;
}

/* Each individual WhatsApp-style review card */
.whatsapp-style-card {
    background: #DCF8C6 !important;         /* WhatsApp message bubble green */
    border-radius: 15px !important;
    padding: 12px !important;
    width: 19% !important;                  /* 5 cards per row with gap */
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
}

.whatsapp-style-header {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 8px !important;
}

/* Reviewer portrait — same dimensions as Facebook cards for visual consistency */
.whatsapp-style-img {
    width: 100% !important;
    height: 300px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    margin-bottom: 8px !important;
}

.whatsapp-style-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #050505 !important;
    margin-bottom: 4px !important;
}

/* Timestamp shown in grey — mimics WhatsApp's message time display */
.whatsapp-style-time {
    font-size: 12px !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}

.whatsapp-style-message {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #050505 !important;
    white-space: pre-wrap !important;       /* preserve ACF textarea line breaks */
    word-wrap: break-word !important;
}




/* ============================================================
   SECTION 16: QUANTITY BOXES — [qty_boxes] SHORTCODE
   ------------------------------------------------------------
   Rendered by dynamic_qty_boxes_shortcode() in functions.php #8.
   Three side-by-side boxes: 1 month / 2 months / 3 months.
   Each is width:33% in a flex row with gap:20px.
   border:2px solid #ff6a2a gives the orange brand border.
   position:relative on .qty-box is required so the absolute-
   positioned badge (.qty-badge-disc) can sit on the top edge.
   Clicking a box triggers the jQuery in functions.php #9 which
   sets the WooCommerce quantity input value.
   ============================================================ */

.custom-qty-boxes-disc {
    display: flex !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Individual quantity option box */
.qty-box {
    border: 2px solid #ff6a2a;
    border-radius: 16px;
    padding: 15px;
    width: 33%;
    text-align: center;
    cursor: pointer;
    position: relative;                     /* needed for .qty-badge-disc absolute positioning */
    transition: .3s;
}

/* Highlighted state when a box is selected (set by jQuery click handler) */
.qty-box.active {
    box-shadow: 0 0 0 2px #ff6a2a;
    background: #fff7f2;                    /* light orange tint shows selection clearly */
}

/* Product image inside quantity box — capped at 80px to keep boxes compact */
.qty-box img {
    max-width: 80px;
    margin-bottom: 10px;
}

.qty-box h4 {
    margin: 5px 0;
}


/* ============================================================
   SECTION 17: PROMOTIONAL BADGES — QTY BOX LABELS
   ------------------------------------------------------------
   .qty-badge-disc is the label that sits on the top edge of
   each quantity box (e.g. "BESTSELLER", "FOR BEST RESULTS").
   top:-12px + translateX(-50%) centres it horizontally and
   pulls it up so it overlaps the box border — creating the
   "floating tag" effect. Orange background matches brand colour.
   .bestseller and .discount use identical styles — kept separate
   in case you want to differentiate them later.
   ============================================================ */

/* Main floating badge used on all qty boxes */
.qty-badge-disc {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);            /* horizontally centres badge over the box */
    background: #ff6a2a;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
}

/* Bestseller badge — same style, separate class for future customisation */
.bestseller {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6a2a;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
}

/* Discount % badge — same style, separate class for future customisation */
.discount {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6a2a;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
}



/* ============================================================
   SECTION 18: VIDEO REVIEWS — [video_reviews] SHORTCODE
   ------------------------------------------------------------
   Rendered by custom_video_reviews_shortcode() in functions.php #11.
   Same 5-column flex layout as the other review shortcodes.
   Uses native HTML5 <video> with controls + preload="metadata"
   (only loads thumbnail/duration, not the full video file).
   max-height:260px on the video element prevents very tall
   portrait videos from breaking the card layout.
   background:#eee on .video-review-card gives a neutral grey
   background different from FB (blue-grey) and WhatsApp (green).
   ============================================================ */

/* Wrapper — same 5-column flex as other review sections */
.video-reviews-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

/* Individual video review card */
.video-review-card {
    width: 19% !important;                  /* 5 cards per row */
    background: #eee !important;            /* neutral grey — distinct from FB/WhatsApp reviews */
    padding: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* Native HTML5 video player — fills card width, capped height for portrait videos */
.video-review-video video {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important;           /* prevents very tall portrait videos breaking layout */
    border-radius: 10px !important;
    object-fit: cover !important;
}

.video-review-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    color: #000 !important;
}

/* =========================================================
MOBILE & TABLET SLIDER FOR REVIEWS
Only affects screen ≤1024px
Desktop layout remains unchanged
========================================================= */

@media (max-width:768px){

/* Review wrappers become horizontal slider */
.fb-style-reviews,
.whatsapp-style-reviews,
.video-reviews-wrapper{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}

/* hide scrollbar */
.fb-style-reviews::-webkit-scrollbar,
.whatsapp-style-reviews::-webkit-scrollbar,
.video-reviews-wrapper::-webkit-scrollbar{
    display:none !important;
}

/* cards behave like slides */
.fb-style-card,
.whatsapp-style-card,
.video-review-card{
    flex:0 0 auto !important;
    scroll-snap-align:start !important;
    width:85% !important;
}

}
@media (max-width:425px){
    .fb-style-img{
        height: 240px!important;
    }
    /* Reviewer portrait — same dimensions as Facebook cards for visual consistency */
.whatsapp-style-img {
    height: 240px !important;
}
}