/* ============================================================================
   AROMARAY — MASTER STYLESHEET v2.2 (RESTRUCTURED)
   ----------------------------------------------------------------------------
   Still ONE file. Paste it in the SAME place your old sheet lived, REPLACING it.
   Back up the old one first (copy to a note) so this stays reversible.

   Split into 3 clearly labeled zones so you can find anything fast:
     ZONE A · GLOBAL          — loads site-wide (sale badge only)
     ZONE B · CATEGORY / SHOP — product grid, cards, filters, sorting, cat desc
     ZONE C · SINGLE PRODUCT  — product detail page (frosted base + buy area)

   Changed vs v2.1:
     • Section 0 (page-id-5636 product-hide rule) DELETED per request.
     • Duplicate "COSMO-STYLE BUY AREA (clone)" comment removed.
     • Stray 'Oswald' font fallback removed from the mobile button.
   Every remaining rule is unchanged.

   Palette: Gold #c3995b (CTA) · Gold accent #c5a059 · Deep teal #1c3633 · Sale #c9324a
   Font: Montserrat (self-hosted via OMGF; falls back to system sans)

   ⚠ DEPENDENCY: the image hover swap (ZONE B) needs the PHP snippet that outputs
     .aromaray-second-img. Leave that PHP exactly where it is — only CSS moved.
   ============================================================================ */


/* ############################################################################
   ZONE A — GLOBAL  (appears on BOTH cards and single product pages)
   ############################################################################ */

/* ---- SALE / DISCOUNT BADGE ---- */
.woocommerce span.onsale{
    background:#c9324a !important;
    color:#ffffff !important;
    font-family:'Montserrat',sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.3px;
    border:none !important;
    border-radius:6px !important;
    padding:4px 9px !important;
    min-height:0 !important;
    min-width:0 !important;
    line-height:1.2 !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    z-index:5;
}


/* ############################################################################
   ZONE B — CATEGORY / SHOP  (product grid / archive templates)
   ############################################################################ */

/* ================================================================== */
/* B1. PRODUCT CARD                                                    */
/* ================================================================== */
.woocommerce ul.products{ display:flex; flex-wrap:wrap; }

.woocommerce ul.products li.product{
    background:#ffffff !important;
    border:1px solid #ece6da !important;
    border-radius:12px !important;
    padding:14px !important;
    box-sizing:border-box !important;
    font-family:'Montserrat',sans-serif !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    min-height:470px !important;                       /* single source of truth */
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.woocommerce ul.products li.product:hover{
    box-shadow:0 10px 30px rgba(28,54,51,.10) !important;
    transform:translateY(-3px);
    border-color:#e0d8c7 !important;
}


/* ================================================================== */
/* B2. IMAGE + SECOND-IMAGE-ON-HOVER SWAP                             */
/*     (requires the PHP snippet that outputs .aromaray-second-img)    */
/* ================================================================== */
.woocommerce ul.products li.product > a:first-of-type{ position:relative; display:block; }

.woocommerce ul.products li.product a img{
    margin-bottom:10px !important;
    border-radius:8px !important;
    object-fit:contain !important;
    height:235px !important;              /* +18% larger product image */
    width:100% !important;
    display:block;
}
.aromaray-second-img{
    position:absolute !important;
    top:0; left:0;
    height:235px !important;
    width:100% !important;
    object-fit:contain !important;
    border-radius:8px !important;
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
    z-index:2;
    margin:0 !important;
}
.woocommerce ul.products li.product:hover .aromaray-second-img{ opacity:1; }


/* ================================================================== */
/* B2b. "LIQUID GLASS" FROSTED BASE — CATEGORY CARDS (50% SHORTER)     */
/* ================================================================== */
.woocommerce ul.products li.product > a:first-of-type::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:235px;                                  /* = desktop image height */
    border-radius:8px;
    pointer-events:none;
    z-index:3;
    /* the frost */
    -webkit-backdrop-filter:blur(7px);
            backdrop-filter:blur(7px);
    /* soft light tint that reads as glass */
    background:linear-gradient(to top,
                 rgba(255,255,255,.50) 0%,
                 rgba(255,255,255,.18) 15%,
                 rgba(255,255,255,0)   24%);
    /* frost band HALVED — was 46%, now 23% */
    -webkit-mask-image:linear-gradient(to top, #000 0%, #000 10%, transparent 23%);
            mask-image:linear-gradient(to top, #000 0%, #000 10%, transparent 23%);
}
/* a whisper of gold light where the bottle meets the glass */
.woocommerce ul.products li.product > a:first-of-type::after{
    content:"";
    position:absolute;
    left:14%; right:14%;
    top:225px;                                     /* just under the frost line */
    height:2px;
    border-radius:2px;
    pointer-events:none;
    z-index:4;
    background:linear-gradient(to right, transparent, rgba(197,160,89,.55), transparent);
}
/* NOTE: To make the frost even shorter later, lower BOTH "23%" values (mask)
   together — e.g. 23% -> 12% halves it again. backdrop-filter blur is drawn by
   the visitor's device, not your server, so it never slows your hosting. */


/* ================================================================== */
/* B3. STAR RATING (unified to gold)                                  */
/* ================================================================== */
.woocommerce ul.products li.product .woocommerce-product-rating{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    margin:6px 0 !important;
    font-family:'Montserrat',sans-serif !important;
}
.woocommerce ul.products li.product .star-rating{
    display:block !important;
    margin:4px auto !important;
    font-size:14px !important;
    color:#c5a059 !important;
    float:none !important;
}
.woocommerce ul.products li.product .star-rating span{ color:#c5a059 !important; }
.woocommerce ul.products li.product .woocommerce-review-link{
    font-size:10px !important;
    color:#8f8a7c !important;
    text-decoration:none !important;
    font-family:'Montserrat',sans-serif !important;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{ color:#785d32 !important; }


/* ================================================================== */
/* B4. TITLE                                                          */
/* ================================================================== */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
    font-family:'Montserrat',sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:#1c3633 !important;
    line-height:1.35 !important;
    margin:5px 0 !important;
    text-align:center;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    min-height:38px;
}


/* ================================================================== */
/* B4b. SHORT "INSPIRED BY" DESCRIPTION                               */
/* ================================================================== */
.woocommerce ul.products li.product .luxury-short-desc,
.luxury-short-desc{
    animation:none !important;
    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    -webkit-text-fill-color:#837e70 !important;
    color:#837e70 !important;
    font-family:'Montserrat',sans-serif !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:.2px !important;
    line-height:1.4 !important;
    text-align:center !important;
    margin:2px 0 8px 0 !important;
    padding:0 4px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    box-shadow:none !important;
    border:none !important;
}


/* ================================================================== */
/* B5. PRICE (works with AboveWP dual currency лв. / €)               */
/* ================================================================== */
.woocommerce ul.products li.product .price{
    font-family:'Montserrat',sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    color:#1c3633 !important;
    text-align:center;
    margin:5px 0 12px 0 !important;
    display:block !important;
    line-height:1.4;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del *{
    font-weight:500 !important;
    font-size:12px !important;
    color:#a8a294 !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins *{
    text-decoration:none !important;
    font-weight:700 !important;
    color:#1c3633 !important;
}


/* ================================================================== */
/* B6. ADD-TO-CART CTA (card button)                                  */
/* ================================================================== */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart{
    font-family:'Montserrat',sans-serif !important;
    background:#c3995b !important;
    color:#ffffff !important;
    font-size:12px !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    letter-spacing:.8px !important;
    padding:13px 0 !important;
    border:none !important;
    border-radius:7px !important;
    width:100% !important;
    margin-top:auto !important;
    line-height:1 !important;
    display:block !important;
    text-align:center !important;
    transition:background .25s ease, box-shadow .25s ease !important;
}
.woocommerce ul.products li.product a.added_to_cart{ margin-top:10px !important; }
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover{
    background:#d3aa6a !important;
    color:#ffffff !important;
    box-shadow:0 6px 16px rgba(195,153,91,.32) !important;
    text-decoration:none !important;
}


/* ================================================================== */
/* B7. WOOF FILTER SIDEBAR                                            */
/* ================================================================== */

/* -- Sidebar shell -- */
.woof{
    font-family:'Montserrat',sans-serif !important;
    background:#ffffff;
    border:1px solid #ece6da;
    border-radius:12px;
    padding:18px 16px;
    box-sizing:border-box;
}

/* -- Each filter block -- */
.woof_container{ margin-bottom:20px !important; padding-bottom:16px; border-bottom:1px solid #f2ede3; }
.woof_container:last-of-type{ border-bottom:none; }

/* -- Filter block titles (Марки, Price, etc.) -- */
.woof h4,
.woof .woof_container_inner h4,
.woof_container > h4{
    font-family:'Montserrat',sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:#1c3633 !important;
    margin:0 0 12px 0 !important;
    padding:0 0 8px 0 !important;
    border-bottom:2px solid #c5a059;
    background:none !important;
}

/* -- Checkbox / radio lists (brands, on-sale) -- */
.woof ul,
.woof .woof_list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.woof li{ margin:0 0 7px 0 !important; }
.woof li label{
    display:flex !important;
    align-items:center;
    gap:8px;
    font-size:13px !important;
    font-weight:500 !important;
    color:#4a463c !important;
    cursor:pointer;
    line-height:1.3;
    transition:color .2s ease;
}
.woof li label:hover{ color:#785d32 !important; }

/* gold checkboxes/radios (modern browsers) */
.woof input[type="checkbox"],
.woof input[type="radio"]{
    accent-color:#785d32;
    width:16px; height:16px;
    flex:0 0 auto;
    cursor:pointer;
}

/* long brand list: cap height + scroll so it isn't endless */
.woof .woof_container_product_brand .woof_block_html_items,
.woof .woof_container_product_brand ul{
    max-height:230px;
    overflow-y:auto;
    padding-right:6px;
}
.woof .woof_container_product_brand ul::-webkit-scrollbar{ width:6px; }
.woof .woof_container_product_brand ul::-webkit-scrollbar-thumb{ background:#e0d8c7; border-radius:3px; }

/* -- Price slider (jQuery UI) → gold -- */
.woof .ui-slider{
    background:#ece6da !important;
    height:5px !important;
    border:none !important;
    border-radius:4px !important;
    margin:14px 4px 10px !important;
}
.woof .ui-slider .ui-slider-range{ background:#c5a059 !important; }
.woof .ui-slider .ui-slider-handle{
    background:#785d32 !important;
    border:2px solid #ffffff !important;
    width:18px !important; height:18px !important;
    border-radius:50% !important;
    top:-7px !important;
    box-shadow:0 1px 5px rgba(0,0,0,.22) !important;
    cursor:pointer;
}
.woof .woof_price_filter,
.woof .woof_price_search_container{
    font-size:12px !important;
    font-weight:600 !important;
    color:#1c3633 !important;
}

/* -- Reset + Submit buttons -- */
.woof .woof_reset_button,
.woof input.woof_reset_search_form{
    background:#ffffff !important;
    color:#785d32 !important;
    border:1px solid #c5a059 !important;
    border-radius:7px !important;
    font-size:12px !important;
    font-weight:600 !important;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:9px 18px !important;
    cursor:pointer;
    transition:all .2s ease;
}
.woof .woof_reset_button:hover,
.woof input.woof_reset_search_form:hover{
    background:#785d32 !important; color:#f6efe1 !important; border-color:#785d32 !important;
}
.woof .woof_submit_search_form_button{
    background:#785d32 !important;
    color:#f6efe1 !important;
    border:none !important;
    border-radius:7px !important;
    font-size:12px !important;
    font-weight:600 !important;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:11px 18px !important;
    cursor:pointer;
    transition:background .2s ease;
}
.woof .woof_submit_search_form_button:hover{ background:#1c3633 !important; }

/* -- HIDE the dead colour filter (every colour was 0) -- */
.woof .woof_container_pa_color{ display:none !important; }

/* -- HIDE the bloated 40-item category list. To bring it back, delete line. -- */
.woof .woof_container_product_cat{ display:none !important; }


/* ================================================================== */
/* B8. RESULT COUNT + SORTING BAR                                     */
/* ================================================================== */
.woocommerce .woocommerce-result-count{
    color:#8f8a7c !important;
    font-family:'Montserrat',sans-serif !important;
    font-size:13px !important;
    font-weight:500 !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce .orderby{
    font-family:'Montserrat',sans-serif !important;
    font-size:13px !important;
    font-weight:500 !important;
    color:#1c3633 !important;
    background:#ffffff !important;
    border:1px solid #ece6da !important;
    border-radius:8px !important;
    padding:9px 14px !important;
    cursor:pointer;
}


/* ================================================================== */
/* B9. CATEGORY DESCRIPTION (moved below products)                    */
/* ================================================================== */
.aroma-cat-desc {
    max-width: 900px;
    margin: 2.5rem auto 0;          /* gap under the pagination numbers */
    padding-top: 2rem;
    border-top: 1px solid #ece7e0;  /* subtle divider from the numbers */
    color: #4a4a4a;
    font-size: 1.05rem;
    line-height: 1.8;
}
.aroma-cat-desc p { margin: 0 0 1.4rem; }
.aroma-cat-desc h2,
.aroma-cat-desc h3 {
    margin: 2.4rem 0 1rem;
    color: #b8935e;                 /* matches the gold buttons */
    font-weight: 600;
    line-height: 1.3;
}
.aroma-cat-desc ul { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.aroma-cat-desc li { margin-bottom: 0.6rem; line-height: 1.7; }
.aroma-cat-desc strong { color: #2c2c2c; }


/* ================================================================== */
/* B10. MOBILE (grid)                                                 */
/* ================================================================== */
@media (max-width:767px){
    .woocommerce ul.products{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
    }
    .woocommerce ul.products li.product{
        width:100% !important;
        margin:0 !important;
        min-height:380px !important;
        padding:10px !important;
    }
    .woocommerce ul.products li.product a img,
    .aromaray-second-img{ height:170px !important; }   /* larger on mobile too */
    /* keep the frosted-glass base aligned with the smaller mobile image */
    .woocommerce ul.products li.product > a:first-of-type::before{ height:170px; }
    .woocommerce ul.products li.product > a:first-of-type::after{ top:162px; }
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title{ font-size:13px !important; }
    .woocommerce ul.products li.product .luxury-short-desc{ font-size:10px !important; margin-bottom:6px !important; }
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.added_to_cart{
        font-family:'Montserrat',sans-serif !important;
        font-size:12px !important;
        letter-spacing:1px !important;
        padding:14px 0 !important;
    }
    .woocommerce ul.products li.product:hover{ transform:none !important; }
    .woof{ margin-bottom:20px; }
}


/* ================================================================== */
/* B11. RESPECT REDUCED MOTION                                        */
/* ================================================================== */
@media (prefers-reduced-motion:reduce){
    .woocommerce ul.products li.product,
    .aromaray-second-img,
    .woof li label{ transition:none !important; }
}


/* ############################################################################
   ZONE C — SINGLE PRODUCT  (product detail page)
   ############################################################################ */

/* ================================================================== */
/* C1. FROSTED BASE — SINGLE PRODUCT PAGE                             */
/* ================================================================== */
.woocommerce div.product .woocommerce-product-gallery{ position:relative; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{ position:relative; }
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder{ position:relative; }

.woocommerce div.product .woocommerce-product-gallery__image::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:24%;                                    /* frost sits low at the base */
    pointer-events:none;                           /* clicks/zoom pass straight through */
    z-index:2;
    -webkit-backdrop-filter:blur(7px);
            backdrop-filter:blur(7px);
    background:linear-gradient(to top,
                 rgba(255,255,255,.52) 0%,
                 rgba(255,255,255,.18) 55%,
                 rgba(255,255,255,0)   100%);
    -webkit-mask-image:linear-gradient(to top, #000 0%, #000 42%, transparent 100%);
            mask-image:linear-gradient(to top, #000 0%, #000 42%, transparent 100%);
}
/* NOTE: this targets the STANDARD WooCommerce product gallery. If your product
   pages are built with ShopEngine and the frost doesn't appear, send a screenshot
   with Inspect open on the product image and I'll swap in the exact class. */


/* ================================================================== */
/* C2. COSMO-STYLE BUY AREA — swatches + quantity + gold add-to-cart  */
/* ================================================================== */
.woocommerce div.product form.cart{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:560px !important;
}
.woocommerce div.product form.cart > *,
.woocommerce div.product .single_variation_wrap,
.woocommerce div.product .single_variation_wrap > *,
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product .woocommerce-variation-add-to-cart > *{
  float:none !important; max-width:100% !important; box-sizing:border-box !important;
}

/* size buttons: full-width row, ABOVE the button */
.aromaray-swatch-block{ order:-1 !important; width:100% !important; margin:0 0 16px !important; float:none !important; }
.aromaray-swatch-wrap{ display:flex !important; gap:12px !important; }
.aromaray-swatch{
  flex:1 1 0 !important; min-width:0 !important;
  background:#fff !important; color:#1c3633 !important;
  border:1.5px solid #e0d8c7 !important; border-radius:12px !important;
  padding:18px 8px !important; font-size:16px !important; font-weight:700 !important;
  text-align:center !important; position:relative !important; float:none !important;
}
.aromaray-swatch.selected{ background:#1c3633 !important; color:#fff !important; border-color:#1c3633 !important; }

/* quantity on its own row, then full-width GOLD add-to-cart */
.woocommerce div.product .woocommerce-variation-add-to-cart{ display:flex !important; flex-direction:column !important; gap:12px !important; width:100% !important; }
.woocommerce div.product form.cart .quantity{ display:inline-flex !important; width:auto !important; align-self:flex-start !important; margin:0 !important; }
.woocommerce div.product .single_add_to_cart_button{
  display:block !important; width:100% !important; float:none !important;
  background:#c3995b !important; color:#fff !important;
  border:none !important; border-radius:12px !important;
  padding:20px 16px !important; font-size:16px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.5px !important; white-space:normal !important;
  box-shadow:0 8px 20px rgba(195,153,91,.22) !important;
}
.woocommerce div.product .single_add_to_cart_button:hover{ background:#a97f45 !important; }


/* ============================================================================
   NOTES
   ----------------------------------------------------------------------------
   • This is ONE global stylesheet, just organized by zone. Because you're on
     free Elementor (no per-template Custom CSS field), keeping it global lets
     Autoptimize minify + combine it — faster and safer than an inline 
     block inside the ShopEngine template.
   • ZONE B frost: to shorten the CARD frost, lower BOTH "23%" mask values.
   • ZONE C frost: to shorten it, lower the "24%" height.
   • Colour filter + category filter are HIDDEN via CSS (B7).
   • Empty brand rows ("Nusuk (0)") — turn off in WOOF/HUSKY settings:
     "Hide empty terms" = Yes.
   ============================================================================ */
ul.products li.product a img {
    transition: opacity 0.3s ease;
}

/* Hide the second image by default */
ul.products li.product .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Make sure the product image wrapper is positioned */
ul.products li.product a {
    position: relative;
    display: block;
}

/* On hover: fade in the second image */
ul.products li.product:hover .secondary-image {
    opacity: 1;
}
/* Out-of-stock badge on category cards — AromaRay */
ul.products li.product.outofstock,
.elementor .product.outofstock,
.e-loop-item.outofstock { position: relative; }

ul.products li.product.outofstock::before,
.elementor .product.outofstock::before,
.e-loop-item.outofstock::before {
  content: "Изчерпан";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  background: #6b6b6b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  pointer-events: none;
}