/**
 * Homepage Card Sections CSS
 * Wraps each section in a white card container
 */

/* ==========================================
   PAGE BACKGROUND - Gray for contrast
   ========================================== */

body.page-index #wrapper,
body.page-index #content-wrapper {
    background-color: #f5f7fa !important;
}

/* ==========================================
   CARD WRAPPER FOR SECTIONS
   Target the column-wrap inside 100% width columns
   ========================================== */

/* All top-level sections with single column get card treatment */
.elementor-top-section .elementor-col-100 > .elementor-column-wrap {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 20px 22px !important; /* 2026-09-10: was 25px — card hugs its content */
    margin: 0 0 20px 0 !important;
}

/* ==========================================
   EXCLUDE CERTAIN SECTIONS FROM CARD STYLE
   ========================================== */

/* Hero/Slider sections - no card */
.elementor-section-full_width .elementor-col-100 > .elementor-column-wrap,
.elementor-section[data-settings*="full_width"] .elementor-col-100 > .elementor-column-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sections with slideshow widget - no card */
.elementor-widget-pos_slideshow,
.elementor-section:has(.elementor-widget-pos_slideshow) .elementor-col-100 > .elementor-column-wrap {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Image carousel at bottom - no card */
.elementor-widget-image-carousel {
    background: transparent !important;
}

/* Multi-column sections (like category grid) - card on parent only */
.elementor-top-section:not(:has(.elementor-col-100)) .elementor-column-wrap {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================
   SECTION HEADER STYLING
   ========================================== */

/* Header row with title and button.
   2026-09-10: the border-bottom here fired on EVERY inner section, not just the
   title row, so each card showed a rule under the heading and another under the
   content — plus a third under the standalone-heading rule below. Removed; the
   white card edge is already the separator. Spacing tightened so the cards sit
   closer to their content. */
.elementor-inner-section {
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 0 !important;
}

/* Section titles */
.elementor-top-section .elementor-widget-heading .elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #253237 !important;
    line-height: 1.3 !important;
}

/* Standalone section headings (2026-09-10: rule removed — it drew a second,
   half-width line directly under the title next to the "Shop All" button). */
.elementor-col-100 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-heading:first-child .elementor-heading-title {
    padding-bottom: 0;
    margin-bottom: 14px;
    border-bottom: 0;
}

/* ==========================================
   VIEW ALL BUTTONS
   ========================================== */

.elementor-top-section .elementor-button.elementor-size-xs {
    background: #80b435 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 18px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.elementor-top-section .elementor-button.elementor-size-xs:hover {
    background: #6a9a2d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(128, 180, 53, 0.3);
}

/* ==========================================
   PRODUCT CARDS INSIDE SECTIONS
   ========================================== */

.elementor-widget-pos_products .product-miniature {
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    margin: 5px !important;
}

.elementor-widget-pos_products .product-miniature:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-4px) !important;
    border-color: #e0e0e0 !important;
}

/* Product image area */
.elementor-widget-pos_products .product-miniature .thumbnail-container,
.elementor-widget-pos_products .product-miniature .img_block {
    background: #fafafa;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

/* Product info area */
.elementor-widget-pos_products .product-miniature .product-description,
.elementor-widget-pos_products .product-miniature .product_desc {
    padding: 15px !important;
    background: #ffffff;
}

/* Product title */
.elementor-widget-pos_products .product-miniature .product-title a,
.elementor-widget-pos_products .product-miniature .product_name a {
    font-weight: 600 !important;
    color: #253237 !important;
    font-size: 14px !important;
}

.elementor-widget-pos_products .product-miniature .product-title a:hover,
.elementor-widget-pos_products .product-miniature .product_name a:hover {
    color: #80b435 !important;
}

/* Product price */
.elementor-widget-pos_products .product-miniature .price {
    font-weight: 700 !important;
    color: #80b435 !important;
    font-size: 16px !important;
}

.elementor-widget-pos_products .product-miniature .regular-price {
    color: #999 !important;
    text-decoration: line-through !important;
}

/* Product badges */
.elementor-widget-pos_products .product-miniature .product-flags .new {
    background: #80b435 !important;
    border-radius: 3px !important;
}

.elementor-widget-pos_products .product-miniature .product-flags .discount,
.elementor-widget-pos_products .product-miniature .product-flags .on-sale {
    background: #e74c3c !important;
    border-radius: 3px !important;
}

.elementor-widget-pos_products .product-miniature .out-of-stock {
    background: #dc3545 !important;
    color: #fff !important;
    border-radius: 3px !important;
}

/* ==========================================
   IMAGE BOX CARDS (Categories, Sellers)
   ========================================== */

.elementor-widget-image-box .elementor-image-box-wrapper {
    background: #fafafa !important;
    border-radius: 10px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-widget-image-box .elementor-image-box-img img {
    border-radius: 8px !important;
}

.elementor-widget-image-box .elementor-image-box-title {
    font-weight: 600 !important;
    color: #253237 !important;
    margin-top: 12px !important;
}

.elementor-widget-image-box .elementor-image-box-title a:hover {
    color: #80b435 !important;
}

/* ==========================================
   CAROUSEL ARROWS
   ========================================== */

.elementor-widget-pos_products .slick-arrow,
.pos-product-widget .slick-arrow {
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-pos_products .slick-arrow:hover,
.pos-product-widget .slick-arrow:hover {
    background: #80b435 !important;
    border-color: #80b435 !important;
}

.elementor-widget-pos_products .slick-arrow:before,
.pos-product-widget .slick-arrow:before {
    color: #666 !important;
}

.elementor-widget-pos_products .slick-arrow:hover:before,
.pos-product-widget .slick-arrow:hover:before {
    color: #ffffff !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 991px) {
    .elementor-top-section .elementor-col-100 > .elementor-column-wrap {
        padding: 20px !important;
        margin: 0 0 15px 0 !important;
    }
}

@media (max-width: 767px) {
    .elementor-top-section .elementor-col-100 > .elementor-column-wrap {
        padding: 15px !important;
        border-radius: 8px !important;
    }

    .elementor-top-section .elementor-widget-heading .elementor-heading-title {
        font-size: 18px !important;
    }

    .elementor-top-section .elementor-button.elementor-size-xs {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }
}

/* ==========================================
   MOBILE: multi-column tile rows (2026-09-10, R2#6)
   theme.css declares `.elementor-col-25 { width: 25% }` with NO responsive
   override, and the theme's `elementor-sm-*` mobile-width classes are only
   emitted when someone sets a mobile width for that column in the page builder.
   The category-tile rows were built without one, so four tiles stay 4-up at
   ~105px on a phone and their labels clip mid-word ("Gro…", "He & Spi").
   Wrap those rows 2-up. Columns that DO carry an `elementor-sm-*` class were
   configured deliberately and are left alone.
   The real home for this is the Back Office page builder (set the mobile column
   width per section); this is the safety net for sections nobody has revisited.
   ========================================== */

@media (max-width: 767px) {
    .elementor-inner-section .elementor-row {
        flex-wrap: wrap;
    }

    .elementor-inner-section .elementor-column.elementor-col-25:not([class*="elementor-sm-"]),
    .elementor-inner-section .elementor-column.elementor-col-20:not([class*="elementor-sm-"]),
    .elementor-inner-section .elementor-column.elementor-col-16:not([class*="elementor-sm-"]) {
        width: 50%;
    }

    /* Labels wrap instead of being clipped by the tile box */
    .elementor-widget-image-box .elementor-image-box-title,
    .elementor-widget-image-box .elementor-image-box-description {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .elementor-widget-image-box .elementor-image-box-wrapper {
        padding: 12px !important;
    }
}