/*
 Theme Name:   WoodMart Child
 Template:     woodmart
 Description:  Child theme for Dilan Jewels customisations.
 Author:       Dilan Jewels
 Version:      2.1.34
 Text Domain:  woodmart-child
*/

/* Larger header logo (zoomed in from ~58px) */
html body .wd-logo.wd-main-logo img,
html body .whb-header .wd-logo img,
html body .wd-header-logo img {
    height: 78px !important;
    max-width: 380px !important;
    width: auto !important;
}

/* ---------- Dilan Jewels brand palette ---------- */
:root {
    --dilan-gold: #B89968;          /* antique gold — primary brand */
    --dilan-gold-dark: #C8A05D;     /* hover/active state — primary gold accent used site-wide */
    --dilan-gold-light: #D9C39A;    /* subtle backgrounds, dividers */
    --dilan-ivory: #FAF6EF;         /* page/section background */
    --dilan-charcoal: #2B2118;      /* body text */
    --dilan-brown: #3C2A1E;         /* secondary / dark accents */

    /* Luxury gold gradients — subtle metallic feel */
    --dilan-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #B89968 50%, #97774A 100%);
    --dilan-gold-gradient-hover: linear-gradient(135deg, #97774A 0%, #B89968 50%, #D4AF37 100%);
    --dilan-gold-gradient-subtle: linear-gradient(135deg, #C9A961 0%, #A88A4F 100%);
    --dilan-gold-shimmer: linear-gradient(90deg, #B89968 0%, #E8D4A0 50%, #B89968 100%);

    /* Brand red — used for add-to-cart strip and selective accents */
    --dilan-red: #B5184D;
    --dilan-red-dark: #8A0F39;
    --dilan-red-gradient: linear-gradient(135deg, #C81E5C 0%, #B5184D 50%, #8A0F39 100%);

    /* Override WoodMart's CSS variables (theme uses these internally) */
    --wd-primary-color: #B89968;
    --wd-link-color: #B89968;
    --wd-link-color-hover: #97774A;
    --wd-alternative-color: #B89968;
    --btn-accented-bgcolor: #B89968;
    --btn-accented-bgcolor-hover: #97774A;
    --btn-accented-color: #FFFFFF;
    --btn-accented-color-hover: #FFFFFF;
}

/* Buttons, badges, sale tags */
.btn-color-primary,
.button.btn-color-primary,
.wd-button-wrapper .btn-color-primary,
.wd-buttons .button.alt,
.button.alt,
.added_to_cart,
.onsale,
.wd-product-label.onsale,
.wc-block-grid__product-onsale,
.wd-nav-product-cat .wd-active > a,
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--dilan-gold-gradient) !important;
    border-color: var(--dilan-gold-dark) !important;
    color: #FFFFFF !important;
}

.btn-color-primary:hover,
.button.btn-color-primary:hover,
.button.alt:hover,
.wd-buttons .button.alt:hover {
    background-color: var(--dilan-gold-dark) !important;
    border-color: var(--dilan-gold-dark) !important;
}

/* ---------- Gold gradient: buttons + accents ---------- */
.btn-color-primary,
.button.btn-color-primary,
.wd-buttons .button.alt,
.button.alt,
.woocommerce a.button.alt,
.single_add_to_cart_button,
.checkout-button,
.wd-button-wrapper a.btn {
    background: var(--dilan-gold-gradient) !important;
    background-size: 200% 200% !important;
    border: none !important;
    color: #FFFFFF !important;
    transition: background-position .6s ease, transform .2s ease, box-shadow .3s ease !important;
    background-position: 0% 50% !important;
    box-shadow: 0 2px 8px rgba(184, 153, 104, 0.25) !important;
}

.btn-color-primary:hover,
.button.btn-color-primary:hover,
.wd-buttons .button.alt:hover,
.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wd-button-wrapper a.btn:hover {
    background-position: 100% 50% !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(151, 119, 74, 0.35) !important;
    color: #FFFFFF !important;
}

/* Top header social icons: show Instagram, YouTube, Facebook, Pinterest (hide only X) */
.whb-top-bar .wd-social-icon.social-twitter {
    display: none !important;
}

/* Top announcement bar — light ivory background with dark text */
.whb-top-bar {
    background-color: #F5F1EA !important;
    background-image: none !important;
    color: var(--dilan-gold-dark) !important;
}
.whb-top-bar,
.whb-top-bar p,
.whb-top-bar strong,
.whb-top-bar a,
.whb-top-bar .wd-social-icon {
    color: var(--dilan-gold-dark) !important;
}
/* Social icons: dark for clear visibility on the ivory bar */
.whb-top-bar .wd-social-icon,
.whb-top-bar .wd-social-icon i,
.whb-top-bar .wd-social-icon svg {
    color: var(--dilan-charcoal) !important;
}
.whb-top-bar .wd-social-icon svg {
    fill: currentColor;
}
.whb-top-bar .wd-social-icon:hover,
.whb-top-bar .wd-social-icon:hover svg {
    color: var(--dilan-gold-dark) !important;
}
/* Force every inner section transparent so only the bar's fill shows (no darker/lighter segments) */
.whb-top-bar .whb-general-products,
.whb-top-bar .whb-row,
.whb-top-bar .whb-column,
.whb-top-bar .whb-col-left,
.whb-top-bar .whb-col-center,
.whb-top-bar .whb-col-right,
.whb-top-bar .wd-header-inner {
    background-color: transparent !important;
    background-image: none !important;
}
.whb-top-bar a {
    color: #FFFFFF !important;
}
.whb-top-bar,
.whb-top-bar p,
.whb-top-bar strong,
.whb-top-bar .html-block-content,
.whb-top-bar .wd-info-text {
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important;
    font-size: 14px !important;   /* was 18px — client asked for a smaller runner */
    font-weight: 500 !important;
    letter-spacing: .5px;
    line-height: 1.5 !important;
    color: var(--dilan-gold-dark) !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Top bar marquee: scroll text right -> left ---------- */
.whb-top-bar .wd-header-text {
    overflow: hidden;
}
.whb-top-bar .wd-header-text > p {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;          /* start fully off the right edge */
    margin: 0;
    text-align: left !important;
    /* 22s was too quick to read comfortably — 45s roughly halves the speed. */
    animation: dilan-marquee 45s linear infinite;
}
/* pause on hover so people can read it */
.whb-top-bar .wd-header-text:hover > p {
    animation-play-state: paused;
}
@keyframes dilan-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ---------- Reduce main navigation bar height ----------
   The row height comes from --wd-header-general-h (theme default 90px), applied as
   an explicit height on .whb-general-header-inner — so we must override the variable,
   not just min-height. */
@media (min-width: 1025px) {
    /* Lock the nav band to 64px in EVERY state — normal, sticky-on-scroll, and hover —
       so the band never jumps between small/large. */
    .whb-general-header,
    .whb-general-header.whb-sticked,
    .whb-sticked .whb-general-header,
    .whb-scroll-stick .whb-general-header,
    .whb-general-header:hover {
        --wd-header-general-h: 64px !important;
    }
    .whb-general-header .whb-flex-row,
    .whb-general-header-inner,
    .whb-general-header .whb-column,
    .whb-general-header:hover .whb-flex-row,
    .whb-general-header:hover .whb-general-header-inner,
    .whb-sticked .whb-general-header .whb-flex-row,
    .whb-scroll-stick .whb-general-header .whb-flex-row,
    .whb-scroll-stick .whb-general-header-inner {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }
    /* The header is position:fixed, so WoodMart reserves space below it via .whb-header
       padding-top. It reserved 132px (its original 90px nav + 42px promo bar); since the
       nav is now 64px the header is 106px, so match the spacer to kill the 26px white gap. */
    .whb-header {
        padding-top: 106px !important;
        /* On refresh the fixed header paints a frame after the body, so the reserved 106px
           strip flashed white and the bar looked like it "dropped in". Pre-paint that strip
           with the header's own colours — ivory top bar (42px) + white nav (64px) — so there's
           nothing to flash: the bar simply paints over an identical-looking strip. */
        background:
            linear-gradient(#F5F1EA 0, #F5F1EA 42px, #ffffff 42px, #ffffff 106px) top left / 100% 106px no-repeat,
            #ffffff !important;
    }
}
.whb-general-header .site-logo img,
.whb-general-header .wd-logo img {
    max-height: 58px !important;   /* bigger logo, within the locked 64px band */
    width: auto !important;
}
/* Logo cache-bust: the IMG_4462 logo was white-flattened on the server, but browsers
   cache the image for ~30 days, so the old off-white version keeps showing. Point the
   logo at a versioned URL the browser has never cached so it fetches the fresh white one.
   (The header height is locked above, so this swap can't cause a reflow/jump.)
   If the logo is ever changed in the Header Builder, update this URL or remove this rule. */
.whb-general-header .site-logo img,
.whb-general-header .wd-logo img {
    content: url('/wp-content/uploads/2026/06/IMG_4462-400x173.png.webp?v=2') !important;
}

/* Side gaps on the nav — desktop only (mobile/tablet uses WoodMart's own header) */
@media (min-width: 1025px) {
    .whb-general-header .whb-col-left {
        padding-left: 2% !important;
    }
    .whb-general-header .whb-col-right {
        padding-right: 5% !important;
    }
}
/* Mobile/tablet: keep the cart off the right edge */
@media (max-width: 1024px) {
    .whb-general-header .whb-col-right,
    .whb-mobile-header .whb-col-right,
    .whb-general-header .wd-header-cart {
        padding-right: 14px !important;
    }
}

/* Remove the empty band between the nav and the hero on the home page
   (WoodMart applies .wd-content-layout { padding-block: 40px }). */
.home .wd-content-layout {
    padding-top: 0 !important;
}

/* Remove the white gap between the top banner and the nav row.
   NOTE: do not zero out padding/height on .whb-header or .whb-main-header —
   the sticky-real header reserves its height there, and removing it makes the
   hero slide up underneath the nav. */
.whb-top-bar {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
.whb-general-header {
    margin-top: 0 !important;
    border-top: 0 !important;
}

/* Keep the navigation always visible.
   - In-flow main header never hides — fixes the nav disappearing on page load
     (previously you had to scroll up to reveal it).
   - The fixed sticky clone stays put while scrolled, scoped to .whb-sticked so it
     never covers the top of the page. */
.whb-hide-on-scroll .whb-main-header,
.whb-scroll-slide.whb-hide-on-scroll.whb-sticked .whb-main-header,
.whb-scroll-stick.whb-hide-on-scroll.whb-sticked .whb-main-header,
.whb-sticked .whb-clone.whb-hide-on-scroll,
.whb-clone.whb-hide-on-scroll.whb-sticked {
    transform: none !important;
    animation: none !important;
}

/* Force the main nav menu to stay on one line (no wrapping) */
.whb-general-header .wd-nav-main,
.whb-general-header .wd-nav.wd-nav-header {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.whb-general-header .wd-nav-main > li,
.whb-general-header .wd-nav.wd-nav-header > li {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
.whb-general-header .wd-nav-main > li > a,
.whb-general-header .wd-nav.wd-nav-header > li > a {
    white-space: nowrap !important;
}

/* Subtle shadow on the main nav menu + tools text */
.whb-general-header .wd-nav-main > li > a,
.whb-general-header .item-level-0 > a,
.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-tools-text,
.whb-general-header .account-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Section title underline — gold accent (WoodMart-specific only) */
.wd-section-title:after,
.wd-title-style-default:after,
.title-design-underline:after,
.title-design-stroke:after,
.title-design-with-line:after,
.wd-section-title .liner-continer:after {
    background: var(--dilan-gold-shimmer) !important;
    background-color: var(--dilan-gold) !important;
    border-color: var(--dilan-gold) !important;
}

/* Shorten the decorative side lines in section titles to roughly half length */
.wd-section-title .liner-continer,
.title-shop-section .liner-continer,
.wd-section-title .liner {
    flex: 0 1 auto !important;
    max-width: 70px !important;
    width: 70px !important;
}

/* Underline color on the divider line elements WoodMart inserts in section titles */
.wd-section-title .liner-continer,
.title-shop-section .liner-continer,
.wd-section-title hr,
.wd-section-title .line {
    border-color: var(--dilan-gold) !important;
    background-color: transparent !important;
}

/* Subtitle text above section titles (was green: "WOODMART COLLECTIONS") */
.wd-subtitle,
.title-subtitle,
.wd-section-title .subtitle,
.wd-section-title > span:first-child,
.title .subtitle,
.subtitle,
.wd-tab-color-default .wd-nav-tabs .active a,
.wd-nav-tabs li.active a {
    color: var(--dilan-gold) !important;
}

/* Hard-kill any remaining green accent colors WoodMart inlines */
[style*="83B735"],
[style*="#83b735"],
[style*="83b735"] {
    color: var(--dilan-gold) !important;
    background-color: var(--dilan-gold) !important;
    border-color: var(--dilan-gold) !important;
}

/* All submit / generic buttons (newsletter signup, contact forms, comments, search) */
input[type="submit"],
button[type="submit"],
.mc4wp-form input[type="submit"],
.mc4wp-form button[type="submit"],
.mc4wp-form-fields input[type="submit"],
.subscribe-form input[type="submit"],
.subscribe-form .button,
.subscribe-form .btn,
.wpcf7-submit,
.wd-newsletter .btn,
.wd-newsletter-form button,
.wd-newsletter-form input[type="submit"],
.searchsubmit,
#searchsubmit,
.btn,
.button:not(.added_to_cart) {
    background: var(--dilan-gold-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    border: none !important;
    color: #FFFFFF !important;
    transition: background-position .6s ease, transform .2s ease, box-shadow .3s ease !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover,
.mc4wp-form button[type="submit"]:hover,
.subscribe-form input[type="submit"]:hover,
.subscribe-form .button:hover,
.wpcf7-submit:hover,
.wd-newsletter .btn:hover,
.wd-newsletter-form button:hover,
.btn:hover,
.button:not(.added_to_cart):hover {
    background-position: 100% 50% !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(151, 119, 74, 0.35) !important;
}

/* Blog post category labels (DESIGN TRENDS / DECORATION / INSPIRATION badges) */
.post-categories,
.post-categories a,
.cat-labels,
.cat-labels a,
.wd-post-cat,
.wd-post-cat a,
.entry-meta-list .cat-links a,
.wd-entities-cat a,
.wp-block-post-terms a,
.entry-category a,
.cat-link {
    background-color: var(--dilan-gold) !important;
    background: var(--dilan-gold-gradient) !important;
    color: #FFFFFF !important;
    border-color: var(--dilan-gold) !important;
}

.post-categories a:hover,
.cat-labels a:hover,
.wd-post-cat a:hover,
.wd-entities-cat a:hover {
    background: var(--dilan-gold-gradient-hover) !important;
    color: #FFFFFF !important;
}

/* Continue Reading / Read More links */
.read-more,
.read-more a,
.more-link,
.continue-reading,
.continue-reading a,
.wd-post-readmore,
.wd-post-readmore a,
.wp-block-read-more {
    color: var(--dilan-gold) !important;
    border-bottom-color: var(--dilan-gold) !important;
}

.read-more:hover,
.read-more a:hover,
.more-link:hover,
.continue-reading:hover,
.continue-reading a:hover,
.wd-post-readmore:hover,
.wd-post-readmore a:hover {
    color: var(--dilan-gold-dark) !important;
}

/* Sale / onsale badge — gradient pill */
.onsale,
.wd-product-label.onsale,
span.onsale {
    background: var(--dilan-gold-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600;
}

/* Footer top border — gold gradient divider */
.site-footer,
.footer-container {
    border-top: 3px solid transparent;
    border-image: var(--dilan-gold-gradient) 1;
}

/* ---------- Product card "Add to Cart" bar (was green) ---------- */
.product-element-bottom .add-to-cart-loop,
.wd-add-btn > a,
.wd-add-btn.wd-style-bg-btn > a,
.products .product .button.wd-add-btn-replace,
.product-grid-item .wd-add-btn > a,
.product-grid-item .add_to_cart_button,
.product-grid-item .button.product_type_simple,
.product-grid-item .button.product_type_variable,
.product-grid-item .button.product_type_grouped,
.products .add_to_cart_button,
.products .button.product_type_simple,
.products .button.product_type_variable,
.wd-buttons.wd-pos-r-t .add_to_cart_button,
.hover-action-button .add_to_cart_button {
    background: #B89968 !important;
    color: #FFFFFF !important;
    border: none !important;
    transition: background-color .3s ease !important;
}

.product-element-bottom .add-to-cart-loop:hover,
.wd-add-btn > a:hover,
.wd-add-btn.wd-style-bg-btn > a:hover,
.products .product .button.wd-add-btn-replace:hover,
.product-grid-item .wd-add-btn > a:hover,
.product-grid-item .add_to_cart_button:hover,
.products .add_to_cart_button:hover,
.wd-buttons.wd-pos-r-t .add_to_cart_button:hover,
.hover-action-button .add_to_cart_button:hover {
    background: #97774A !important;
    color: #FFFFFF !important;
}

/* Cart icon inside the strip — ensure white */
.product-element-bottom .add-to-cart-loop svg,
.wd-add-btn svg,
.product-grid-item .add_to_cart_button svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Links, prices, hover states */
a:hover,
.wd-nav > li:hover > a,
.wd-nav > li.current-menu-item > a,
.product .price,
.woocommerce-Price-amount,
.product-title:hover,
.wd-entities-title a:hover,
.wd-tools-element:hover,
.wd-cart-number,
.wd-header-cart .wd-tools-icon:hover {
    color: var(--dilan-gold) !important;
}

/* Form focus, dividers, accent borders */
input:focus,
textarea:focus,
select:focus,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--dilan-gold) !important;
    box-shadow: 0 0 0 1px var(--dilan-gold-light) !important;
}

/* WoodMart green checkmarks / progress / loader */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--dilan-gold) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--dilan-gold) !important;
}

/* ---------- SHOP BY CATEGORIES section + carousel background ----------
   WHITE, not ivory: after Best-Sellers was moved above it, two ivory sections
   sat next to each other and read as one long block. Alternating the two keeps
   the boundary visible. */
.elementor-element-4d5ed99 {
    background-color: #FFFFFF !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.elementor-element-4d5ed99 .wd-cats.wd-carousel-container,
.elementor-element-4d5ed99 .wd-carousel {
    background-color: transparent !important;
}

/* ---------- BEST-SELLERS section — ivory background ----------
   (ID 46e3ec0. The old comment said "Shop by Collection"; that was wrong —
   this element is the Best-Sellers row.) */
.elementor-element-46e3ec0 {
    background-color: #F7F6F2 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* ---------- NEW ARRIVALS section — matches Best-Sellers ----------
   Both product rows now share the same ivory panel. */
.elementor-element-8150b32 {
    background-color: #F7F6F2 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.elementor-element-46e3ec0 .wd-cats.wd-carousel-container,
.elementor-element-46e3ec0 .wd-carousel {
    background-color: transparent !important;
}
/* Smaller category label text + narrower label pill */
.elementor-element-4d5ed99 .wd-cat-content .wd-entities-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
/* Hide the "0 products" count under category labels */
.elementor-element-4d5ed99 .wd-cat-content .wd-cat-count {
    display: none !important;
}
.elementor-element-4d5ed99 .wd-cat-content {
    max-width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 7px 14px !important;
}

/* ---------- "View All" buttons under category / collection carousels ---------- */
.dilan-view-all-wrap {
    text-align: center;
    margin-top: 28px;
}
.dilan-view-all-btn {
    display: inline-block;
    padding: 6px 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF !important;
    background: var(--dilan-gold-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    border-radius: 50px;
    transition: background-position .6s ease, transform .2s ease, box-shadow .3s ease;
    box-shadow: 0 3px 10px rgba(184, 153, 104, 0.30);
}
.dilan-view-all-btn:hover {
    color: #FFFFFF !important;
    background-position: 100% 50% !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(151, 119, 74, 0.40);
}
@media (max-width: 768px) {
    .dilan-view-all-btn {
        font-size: 13px;
        padding: 7px 22px;
    }
    .dilan-view-all-wrap { margin-top: 14px; }
}

/* ---------- Budget / price banners — label at BOTTOM CENTER ---------- */
.dilan-budget-row .wrapper-content-banner,
.dilan-budget-row .content-banner,
.dilan-budget-row .content-banner.text-left,
.dilan-budget-row .banner-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;        /* horizontal centre */
    justify-content: flex-end !important;  /* push to the bottom */
    text-align: center !important;
    width: 100% !important;
}
.dilan-budget-row .wrapper-content-banner {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    padding: 0 10px 22px !important;
}
.dilan-budget-row .banner-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
}
/* Responsive: budget banners to fewer columns on tablet/mobile.
   The row is forced to display:flex/nowrap by the mu-plugin, so overriding grid
   columns alone does nothing — we force it back to a grid (by element ID) and
   reset the flex children so the grid controls the column count. */
.elementor-element-c4822e7 > * {
    min-width: 0 !important;
}
/* Budget banners: 2 per row on tablet/mobile (two-two layout).
   flex-wrap + 50% children forces 2-up whether the row renders as flex or grid. */
@media (max-width: 900px) {
    .elementor-element-c4822e7 {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: repeat(2, 1fr) !important;
        --e-con-grid-template-columns: repeat(2, 1fr) !important;
    }
    .elementor-element-c4822e7 > * {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
        height: auto !important;
    }
    .dilan-budget-row .banner-title { font-size: 14px !important; }
}

/* ---------- SHOP BY CRAFT — Swiper coverflow (mortantra-style) ---------- */
.dilan-cf {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 0 12px;
    position: relative;
    overflow: visible;
}
.dilan-cf .swiper-wrapper {
    align-items: center;
}
.dilan-cf .swiper-slide {
    width: 300px;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    transition: box-shadow .3s ease;
    background: #f4f1ec;
}
.dilan-cf .swiper-slide-active {
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.30);
}
.dilan-cf-slide {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}
.dilan-cf-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dilan-cf-label {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background: rgba(43, 33, 24, 0.72);
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.dilan-cf-nav {
    display: none !important;   /* hide arrows — coverflow auto-rotates and supports swipe */
}
.dilan-cf-pagination {
    display: none !important;   /* hide the long row of dots under the coverflow */
}
@media (max-width: 1024px) {
    .dilan-cf .swiper-slide { width: 250px; height: 350px; }
}
@media (max-width: 600px) {
    .dilan-cf .swiper-slide { width: 200px; height: 290px; }
    .dilan-cf-nav { width: 38px; height: 38px; font-size: 22px; }
}

/* Force category / collection / craft labels onto a single line (ID beats all) */
.elementor-element-4d5ed99 .wd-cat .wd-entities-title,
.elementor-element-4d5ed99 .wd-cat h3.wd-entities-title,
.elementor-element-46e3ec0 .wd-cat .wd-entities-title,
.elementor-element-46e3ec0 .wd-cat h3.wd-entities-title,
.elementor-element-404105d .wd-cat .wd-entities-title,
.elementor-element-404105d .wd-cat h3.wd-entities-title {
    white-space: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* Mobile: shrink labels so a long name fits on one line inside the narrower card */
@media (max-width: 768px) {
    .elementor-element-4d5ed99 .wd-cat .wd-entities-title,
    .elementor-element-4d5ed99 .wd-cat h3.wd-entities-title,
    .elementor-element-46e3ec0 .wd-cat .wd-entities-title,
    .elementor-element-46e3ec0 .wd-cat h3.wd-entities-title,
    .elementor-element-404105d .wd-cat .wd-entities-title,
    .elementor-element-404105d .wd-cat h3.wd-entities-title,
    .dilan-cf-label {
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
        padding: 6px 10px !important;
    }
}

/* ---------- Category / collection tile labels: keep the overlaid title legible on
   ANY image, including categories with no image or a light one (e.g. "Best Sellers",
   which shows white text on a light placeholder and disappears). A strong text-shadow
   plus a subtle dark pill behind the label guarantees contrast on every tile. ---------- */
.wd-cat .wd-cat-content .wd-entities-title,
.wd-cat .wd-cat-content .wd-entities-title a,
.wd-cat h3.wd-entities-title,
.wd-cat h3.wd-entities-title a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.55) !important;
}
.wd-cat .wd-cat-content {
    background: rgba(20,14,8,.34) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

/* ---------- Floating WhatsApp chat button (bottom-left) ---------- */
.dilan-wa-float {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9998;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform .2s ease, box-shadow .3s ease, background .2s ease;
}
.dilan-wa-float:hover {
    background: #1ebe5d;
    transform: scale(1.07);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    color: #FFFFFF !important;
}
.dilan-wa-float svg {
    width: 34px;
    height: 34px;
    display: block;
}
@media (max-width: 768px) {
    /* On mobile the bottom sticky toolbar covers the corner — hide WA by default,
       only reveal when the user scrolls into the footer. Also lifted higher. */
    .dilan-wa-float {
        display: none;
        bottom: 90px;          /* above the mobile bottom toolbar */
        left: 16px;
        width: 52px;
        height: 52px;
    }
    .dilan-wa-float svg { width: 30px; height: 30px; }
    .dilan-wa-float.dilan-wa-show { display: flex; }
}

/* Widen the WoodMart dropdown panel for our 4-column mega menu
   Anchor to viewport (position: fixed) so it stays centered regardless of
   whether the trigger (CATEGORIES / COLLECTIONS) sits left or right of center. */
.wd-nav-main > li > .wd-dropdown-menu.dilan-mega-dropdown,
.wd-nav-main > li > .wd-dropdown.dilan-mega-dropdown,
.wd-nav > li > .wd-dropdown-menu.dilan-mega-dropdown {
    position: fixed !important;
    top: var(--dilan-mega-top, 120px) !important;
    /* Anchored UNDER the hovered trigger (JS sets --dilan-mega-left to the trigger's
       left edge, clamped to stay on screen). Falls back to centred if JS hasn't run.
       Compacted ~10%: 900px → 810px. */
    left: var(--dilan-mega-left, 50%) !important;
    right: auto !important;
    transform: var(--dilan-mega-transform, translateX(-50%)) !important;
    width: min(92vw, 810px) !important;
    max-width: 810px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.dilan-mega-dropdown .wd-sub-menu,
.dilan-mega-dropdown .sub-menu {
    background: #fff;
    width: 100%;
}
/* Invisible hover bridge so the cursor can cross the gap from menu link → fixed panel
   without the dropdown closing. */
.wd-nav-main > li:hover > .wd-dropdown-menu.dilan-mega-dropdown::before,
.wd-nav-main > li:hover > .wd-dropdown.dilan-mega-dropdown::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: transparent;
}

/* ---------- Category Archive: "Shop By Style" section (Mortantra-style cards) ---------- */
/* Hide WoodMart's entire page-title banner (the demo-furniture hero) on the
   Shop page AND product category archives — the "Explore Categories" cards grid
   takes its place at the top of the page. */
.tax-product_cat .wd-page-title,
.tax-product_cat .wd-nav-product-cat,
.tax-pa_collection .wd-page-title,
.tax-pa_collection .wd-nav-product-cat,
.woocommerce-shop .wd-page-title,
.post-type-archive-product .wd-page-title,
.woocommerce-shop .wd-nav-product-cat,
.post-type-archive-product .wd-nav-product-cat {
    display: none !important;
}

/* Widen the shop / category / collection content area — the default container
   leaves large empty margins on big screens. Use most of the viewport width. */
.woocommerce-shop .wd-page-content > .container,
.tax-product_cat .wd-page-content > .container,
.tax-pa_collection .wd-page-content > .container,
.post-type-archive-product .wd-page-content > .container,
.woocommerce-shop .wd-content-layout.container,
.tax-product_cat .wd-content-layout.container,
.tax-pa_collection .wd-content-layout.container,
.post-type-archive-product .wd-content-layout.container {
    max-width: min(1760px, 94vw) !important;
    width: 100% !important;
}

/* Align product cards: titles of varying length pushed the price to different
   heights. Give the title a fixed 2-line height (non-invasive — no card
   restructuring) so the price below lands on a consistent baseline. */
.wd-products .product-grid-item .wd-entities-title,
ul.products li.product .wd-entities-title {
    min-height: 2.8em !important;          /* room for up to 2 lines */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin: 12px 0 6px !important;
}
.wd-products .product-grid-item .price,
ul.products li.product .price,
.wd-products .product-grid-item .product-rating-price,
ul.products li.product .product-rating-price {
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 18px !important;   /* lift price off the card's bottom edge */
    padding-bottom: 2px !important;
}
/* Sale "-XX%" badge: keep it fully inside the image (it was clipping at top) */
.wd-products .product-element-top .product-labels,
ul.products li.product .product-element-top .product-labels {
    top: 12px !important;
    inset-inline-start: 12px !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
}
.wd-products .product-labels .onsale,
ul.products li.product .product-labels .onsale,
.product-labels .onsale {
    margin: 0 !important;
    background-color: var(--dilan-gold-dark, #C8A05D) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
/* The round-shape sale badge keeps its circle but solid gold fill */
.product-labels.labels-rounded .onsale,
.product-labels .onsale.wd-shape-round {
    background-color: var(--dilan-gold-dark, #C8A05D) !important;
    color: #FFFFFF !important;
}

.dilan-cat-style {
    /* Full-width band inserted before .wd-content-layout — spans the page above
       the filter sidebar + product grid. Inner blocks are centred at the SAME
       width as the shop content below, so cards line up and the band reads centred. */
    width: 100%;
    clear: both;
    margin: 0 auto 46px;
    padding: 6px 0 38px;
    box-sizing: border-box;
}
.dilan-cat-carousel,
.dilan-cat-style-head,
.dilan-cat-style-desc {
    max-width: min(1760px, 94vw);
    margin-left: auto;
    margin-right: auto;
}
/* Header matches the home "NEW ARRIVALS" section title: gold diamond + rule
   lines + gold uppercase Georgia text, for visual symmetry across the site. */
.dilan-cat-style-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 38px;
}
.dilan-cat-style-orn {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    background: var(--dilan-gold-dark, #C8A05D);
    transform: rotate(45deg);   /* diamond */
    font-size: 0;               /* hide any text node */
}
.dilan-cat-style-rule {
    display: inline-block;
    width: 70px;
    height: 1px;
    background: var(--dilan-gold-dark, #C8A05D);
    opacity: 0.85;
}
.dilan-cat-style-title {
    margin: 0;
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
    font-size: clamp(14px, 1.28vw, 16px);   /* 20% down from 17/1.6vw/20 */
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dilan-gold-dark, #C8A05D);
}
/* ---- Carousel (4 cards per view + arrows) ---- */
.dilan-cat-carousel {
    position: relative;
    padding: 4px 0;
}
.dilan-cat-carousel .swiper-slide {
    height: auto;
}
/* Prev/next arrows */
.dilan-cat-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--dilan-gold-dark, #C8A05D);
    border: 1px solid rgba(151, 119, 74, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.dilan-cat-nav:hover {
    background: var(--dilan-gold-dark, #C8A05D);
    color: #FFFFFF;
}
.dilan-cat-prev { left: -10px; }
.dilan-cat-next { right: -10px; }
.dilan-cat-nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

.dilan-cat-style-card {
    display: block;
    position: relative;
    aspect-ratio: 430 / 602;   /* portrait, matching the source images exactly.
                                 Was 5/4 (landscape 1.25) against 430x602 portrait
                                 photos, so object-fit:cover cut about a third off
                                 the height — faces and pieces were being sliced. */   /* shorter, landscape cards — reduces the band height */
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #F5F1EA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dilan-cat-style-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}
.dilan-cat-style-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.dilan-cat-style-card:hover .dilan-cat-style-img {
    transform: scale(1.04);
}
.dilan-cat-style-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E8DFCB, #C8A05D);
    color: #FFF;
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 500;
}
/* Collection cards: Dilan logo centered on a soft ivory panel */
.dilan-cat-style-img-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FBF8F1 0%, #EFE6D2 100%);
    padding: 18%;
    box-sizing: border-box;
}
.dilan-cat-style-img-logo img {
    width: 100%;
    max-width: 170px;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.dilan-cat-style-card:hover .dilan-cat-style-img-logo img {
    transform: scale(1.05);
}
/* Card label — the HOMEPAGE nameplate, reused on every card grid (shop
   "Explore Categories", the collections landing page, the cross-nav carousel)
   so all the bands match. Same values as the homepage rule in
   dilan-customizations.css (.dilan-collection-section .wd-entities-title):
   dark translucent charcoal plate, 6px radius, letter-spaced uppercase serif.
   Replaces the old cream band, which fought with the photography. */
.dilan-cat-style-name {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    max-width: 88%;                 /* hugs the text, never wider than the card */
    padding: 10px 22px;             /* 20% down from 12px 28px */
    color: #FFF;
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
    font-size: 14px;                /* 20% down from 18px */
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(43, 33, 24, 0.72);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    pointer-events: none;
}
.dilan-cat-style-desc {
    margin: 36px auto 0;
    max-width: 1080px;
    padding: 0 10px;
    text-align: center;
    color: #555;
    font-size: 15px;
    line-height: 1.75;
    font-family: Georgia, "Times New Roman", serif;
}
.dilan-cat-style-desc p { margin: 0 0 10px; }
@media (max-width: 1024px) {
    .dilan-cat-style-name { font-size: 13px; }
    .dilan-cat-prev { left: 0; }
    .dilan-cat-next { right: 0; }
}
@media (max-width: 600px) {
    .dilan-cat-style { padding: 0 12px; margin: 16px auto 28px; }
    .dilan-cat-style-rule { width: 30px; }
    .dilan-cat-style-title { font-size: 14px; }
    .dilan-cat-style-name { font-size: 11px; padding: 7px 13px; bottom: 12px; letter-spacing: 0.14em; }
    .dilan-cat-style-desc { font-size: 14px; }
    .dilan-cat-nav { width: 36px; height: 36px; font-size: 22px; }
}

/* ---------- CATEGORIES landing page (/categories/) ---------- */
/* Strip the demo banner + blog sidebar; make content full width */
.dilan-categories-page .wd-page-title { display: none !important; }
.dilan-categories-page .wd-sidebar,
.dilan-categories-page .sidebar-container { display: none !important; }
.dilan-categories-page .wd-content-layout { display: block !important; }
.dilan-categories-page .wd-content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.dilan-cat-page {
    max-width: min(1500px, 94vw);
    margin: 10px auto 50px;
}
.dilan-cat-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) { .dilan-cat-page-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .dilan-cat-page-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- Hide CURCY's built-in switcher (our gold pill drives conversion) ----------
   Price conversion is server-side and unaffected; this only removes CURCY's own
   switcher UI so it doesn't duplicate the Dilan currency pill. */
.wmc-currency-wrapper,
.wmc-shortcode,
.wmc-list-currencies,
.wmc-sub-currency,
.wmc-price-switcher,
.woo-multi-currency,
.widget_wmc_widget,
.widget_wmc_widget_rates,
.woocommerce-currency-switcher-form {
    display: none !important;
}

/* ---------- Dilan Currency Floating Button (flag + INR + caret, white pill) ---------- */
.dilan-currency-float {
    position: fixed !important;
    right: 20px !important;
    left: auto !important;
    /* Sits clear of the header search dropdown and its close (X) button, which
       open in the top-right and were being overlapped at the old 200px. */
    top: 260px !important;
    bottom: auto !important;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 1px solid #C9C9C9 !important;
    border-radius: 12px !important;
    /* Visible card base — outer grey ring + soft drop, so the pill never blends into white */
    box-shadow:
        0 0 0 6px rgba(0, 0, 0, 0.04),
        0 0 0 7px rgba(0, 0, 0, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.18) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none;
}
.dilan-currency-float:hover {
    transform: translateY(-2px);
    border-color: #A8A8A8 !important;
    box-shadow:
        0 0 0 6px rgba(0, 0, 0, 0.06),
        0 0 0 7px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.18),
        0 16px 36px rgba(0, 0, 0, 0.22) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}
.dilan-currency-float:focus-visible {
    box-shadow: 0 0 0 3px rgba(200, 160, 93, 0.45), 0 6px 18px rgba(0, 0, 0, 0.12);
}
.dilan-currency-float .dilan-currency-flag {
    display: inline-flex;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    flex-shrink: 0;
}
.dilan-currency-float .dilan-currency-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}
.dilan-currency-float .dilan-currency-code {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}
.dilan-currency-float .dilan-currency-caret {
    display: inline-flex;
    align-items: center;
    color: #999;
    margin-left: 2px;
}
@media (max-width: 768px) {
    /* Compact pill tucked into the top-right corner so it stops covering
       the middle of every section as you scroll. */
    .dilan-currency-float {
        right: 10px !important;
        left: auto !important;
        top: 104px !important;
        bottom: auto !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        font-size: 11px !important;
        border-radius: 40px !important;
    }
    .dilan-currency-float .dilan-currency-flag { width: 15px !important; height: 10px !important; }
    .dilan-currency-float .dilan-currency-code { font-size: 11px !important; }
    .dilan-currency-float .dilan-currency-caret svg { width: 12px !important; height: 12px !important; }
}
.dilan-currency-float .dilan-currency-flag-img,
.dilan-currency-item .dilan-currency-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Inline-SVG flag */
.dilan-currency-flag-svg {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.dilan-currency-flag-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Currency Drawer ---------- */
.dilan-currency-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.dilan-currency-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
body.dilan-currency-locked { overflow: hidden; }

.dilan-currency-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(380px, 100vw);
    background: #FFFFFF;
    z-index: 99999;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dilan-currency-drawer.is-open { transform: translateX(0); }

.dilan-currency-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid #EEE;
    flex-shrink: 0;
}
.dilan-currency-drawer-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #1a1a1a;
}
.dilan-currency-close {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dilan-currency-close:hover { background: #F5F1EA; color: var(--dilan-gold-dark, #C8A05D); }

.dilan-currency-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}
.dilan-currency-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #666;
    background: #FFFFFF;
    transition: background 0.15s ease, color 0.15s ease;
}
.dilan-currency-item:hover,
.dilan-currency-item:focus-visible {
    background: #FAF7F1;
    color: var(--dilan-gold-dark, #C8A05D);
    outline: none;
}
.dilan-currency-item.is-selected {
    background: #F5F1EA;
    color: var(--dilan-gold-dark, #C8A05D);
    font-weight: 600;
}
.dilan-currency-item .dilan-currency-flag {
    display: inline-flex;
    width: 28px;
    height: 19px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.dilan-currency-item .dilan-currency-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dilan-currency-item-code { font-weight: inherit; }

@media (max-width: 480px) {
    .dilan-currency-drawer { width: 100vw; }
    .dilan-currency-drawer-head { padding: 18px 18px; }
    .dilan-currency-item { padding: 14px 18px; font-size: 15px; }
}

/* ---------- My Account header dropdown — brand styling ---------- */
html .wd-dropdown-my-account {
    background: #FFFFFF !important;
    border: 1px solid rgba(151, 119, 74, 0.16) !important;
    border-radius: 4px !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 !important;
    min-width: 250px !important;
}
html .wd-dropdown-my-account .wd-sub-menu {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 0 !important;
    background: transparent !important;
}
html .wd-dropdown-my-account .wd-sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(151, 119, 74, 0.10);
    list-style: none;
}
html .wd-dropdown-my-account .wd-sub-menu > li:last-child {
    border-bottom: 0;
}
html .wd-dropdown-my-account .wd-sub-menu > li > a {
    display: block !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    color: var(--dilan-charcoal, #2a2a2a) !important;
    padding: 14px 22px !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, padding-left .2s ease !important;
    position: relative;
}
html .wd-dropdown-my-account .wd-sub-menu > li > a > span {
    color: inherit !important;
}
html .wd-dropdown-my-account .wd-sub-menu > li > a:hover,
html .wd-dropdown-my-account .wd-sub-menu > li.is-active > a,
html .wd-dropdown-my-account .wd-sub-menu > li.current-menu-item > a {
    color: var(--dilan-gold-dark, #C8A05D) !important;
    background: #FAF7F1 !important;
    padding-left: 28px !important;
}
html .wd-dropdown-my-account .wd-sub-menu > li > a:hover > span,
html .wd-dropdown-my-account .wd-sub-menu > li.is-active > a > span {
    color: var(--dilan-gold-dark, #C8A05D) !important;
}
/* Matching gold left-border accent on hover (same as SHOP BY BUDGET) */
html .wd-dropdown-my-account .wd-sub-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--dilan-gold-dark, #C8A05D);
    transition: transform 0.2s ease;
}
html .wd-dropdown-my-account .wd-sub-menu > li > a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---------- Brand styling for ALL standard nav dropdowns (Shop By Budget, etc.)
   — applied to every WoodMart main-nav dropdown EXCEPT our mega-menu dropdown,
   which has its own custom layout. */
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown),
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) {
    background: #FFFFFF !important;
    border: 1px solid rgba(151, 119, 74, 0.16) !important;
    border-radius: 4px !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 !important;
    min-width: 250px !important;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(151, 119, 74, 0.10);
    list-style: none;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li:last-child,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li:last-child,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li:last-child,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li:last-child {
    border-bottom: 0;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li > a,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li > a,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li > a,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li > a {
    display: block !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    color: var(--dilan-charcoal, #2a2a2a) !important;
    padding: 14px 22px !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
    position: relative;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li > a:hover,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li > a:hover,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li > a:hover,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li > a:hover,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li.current-menu-item > a,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li.current-menu-item > a {
    color: var(--dilan-gold-dark, #C8A05D) !important;
    background: #FAF7F1 !important;
    padding-left: 28px !important;
}
/* Small gold left border on hover for an elegant accent */
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li > a::before,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li > a::before,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li > a::before,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--dilan-gold-dark, #C8A05D);
    transition: transform 0.2s ease;
}
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .wd-sub-menu > li > a:hover::before,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .wd-sub-menu > li > a:hover::before,
.wd-nav-main > li > .wd-dropdown-menu:not(.dilan-mega-dropdown) .sub-menu > li > a:hover::before,
.wd-nav-main > li > .wd-dropdown:not(.dilan-mega-dropdown) .sub-menu > li > a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* ---------- Dilan Mega Menu (for COLLECTIONS / CATEGORIES dropdown) ---------- */
.dilan-mega {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 26px 20px 14px;
    max-width: 810px;
    margin: 0 auto;
    background: #fff;
}
.dilan-mega-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dilan-mega-head {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2B2118 !important;
    text-decoration: none;
    margin: 15px 0 0;
}
.dilan-mega-head:first-child { margin-top: 0; }
.dilan-mega-head:hover { color: var(--dilan-gold-dark) !important; }
.dilan-mega-orn {
    display: block;
    width: 120px;
    height: 1px;
    margin: 14px 0 0;
    background: var(--dilan-gold);
    position: relative;
}
.dilan-mega-orn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--dilan-gold);
}
.dilan-mega-sub {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    width: 100%;
}
.dilan-mega-sub li {
    border-bottom: 1px solid #eee;
}
.dilan-mega-sub li:last-child { border-bottom: 0; }
.dilan-mega-sub a {
    display: block;
    position: relative;
    text-align: left;
    padding: 8px 14px 8px 2px;
    color: #2B2118 !important;
    text-decoration: none;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 12.5px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dilan-mega-sub a:hover { color: var(--dilan-gold-dark) !important; }
.dilan-mega-sub .dilan-mega-arrow {
    position: absolute;
    right: 0;
    top: 10px;
    color: var(--dilan-gold-dark);
    font-size: 14px;
}
/* "View All Categories" — small gold link tucked into the empty bottom-left of the mega
   grid, aligned with the bottom of the (tallest) Accessories column — NOT a full-width
   row below the categories. Absolute so it doesn't disturb the 4-column grid. */
.dilan-mega { position: relative; }
.dilan-mega-viewall {
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 73%;
    text-align: center;
    border-top: 1px solid var(--dilan-gold, #B89968);  /* horizontal gold line above */
    padding-top: 14px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dilan-gold-dark, #97774A) !important;
    text-decoration: none;
    transition: color .25s ease;
}
.dilan-mega-viewall:hover { color: var(--dilan-gold, #B89968) !important; }
.dilan-mega-viewall .dilan-mega-arrow { color: inherit; font-size: 15px; }
@media (max-width: 1024px) {
    .dilan-mega { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px 20px; }
}
@media (max-width: 600px) {
    .dilan-mega { grid-template-columns: 1fr; }
}
/* CATEGORIES dropdown is content-dense (4 columns + long headings like "MANGALSUTRA SETS")
   — give it more room than the default 900px so headings sit on one line.
   COLLECTIONS (#menu-item-29814) stays at the narrow 900px default. */
@media (min-width: 1025px) {
    #menu-item-29847 .dilan-mega-dropdown {
        width: min(95vw, 1010px) !important;
        max-width: 1010px !important;
    }
    #menu-item-29847 .dilan-mega { max-width: 1010px !important; }
}

/* ---------- Dilan footer (My Account / Useful Links / Contact Us) ---------- */
/* Constrain the footer wrapper itself (wins on every page layout, incl. full-width) */
html body .main-footer.dilan-footer,
html body .wd-footer .main-footer.dilan-footer {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
html body .dilan-footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 10px 40px !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
/* Apply the same side padding/width to the copyright/credit bar */
html body .wd-copyrights .container,
html body .wd-copyrights .wd-grid-g {
    padding-left: 40px !important;
    padding-right: 40px !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
@media (max-width: 1024px) {
    .dilan-footer-inner,
    .wd-copyrights .container,
    .wd-copyrights .wd-grid-g {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}
@media (max-width: 600px) {
    .dilan-footer-inner,
    .wd-copyrights .container,
    .wd-copyrights .wd-grid-g {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
.dilan-fcol-title {
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--dilan-gold-dark) !important;
    margin: 0 0 22px;
}
/* Light ivory background on the whole footer */
.wd-footer.footer-container,
html body .main-footer.dilan-footer,
html body .wd-copyrights {
    background-color: #F6F3EC !important;
    color: var(--dilan-charcoal) !important;
}
/* Divider line between the footer columns and the copyright bar */
html body .wd-copyrights {
    border-top: 1px solid #C8A05D !important;
}
html body .wd-copyrights .wd-col-start,
html body .wd-copyrights .wd-col-end,
html body .wd-copyrights * {
    color: var(--dilan-charcoal) !important;
}
.dilan-fcol-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dilan-fcol-links li {
    margin-bottom: 16px;
}
.dilan-fcol-links a {
    color: var(--dilan-charcoal) !important;
    text-decoration: none;
    font-size: 16px;
    transition: color .2s ease;
}
.dilan-fcol-links a:hover {
    color: var(--dilan-gold-dark) !important;
}
.dilan-fcol-contact p {
    color: var(--dilan-charcoal);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.dilan-fcol-contact .dilan-contact-addr {
    padding-left: 30px;   /* align under the pin icon */
    margin-top: -8px;
}
.dilan-fcol-contact a {
    color: var(--dilan-charcoal) !important;
    text-decoration: none;
}
.dilan-fcol-contact a:hover { color: var(--dilan-gold-dark) !important; }
.dilan-ci {
    flex: 0 0 auto;
}
.dilan-ci svg {
    width: 20px;
    height: 20px;
    color: var(--dilan-gold-dark);
}
.dilan-fsocial {
    display: flex;
    gap: 18px;
    margin-top: 6px;
}
.dilan-fsocial a { color: var(--dilan-charcoal); transition: color .2s ease; }
.dilan-fsocial a:hover { color: var(--dilan-gold-dark); }
.dilan-fsocial svg { width: 22px; height: 22px; }
/* Footer logo (top of the My Account column) */
.dilan-footer-logo { display: inline-block; margin: 0 0 20px; max-width: 170px; line-height: 0; }
.dilan-footer-logo img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .dilan-footer-logo { max-width: 140px; margin-bottom: 14px; } }
@media (max-width: 768px) {
    /* Stack columns (override the html-body-prefixed desktop grid) */
    html body .dilan-footer-inner {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        text-align: left !important;
        padding: 0 20px !important;
    }
    /* Accordion: each column collapses; tap title to expand */
    .dilan-fcol {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(151, 119, 74, 0.20);
    }
    .dilan-fcol:last-child { border-bottom: 0; }
    .dilan-fcol-title {
        cursor: pointer;
        position: relative;
        margin: 0 !important;
        padding: 18px 40px 18px 0 !important;
        user-select: none;
        font-size: 16px !important;
        line-height: 1.2;
        white-space: normal;
        word-break: keep-all;
    }
    .dilan-fcol-title::after {
        content: "+";
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        color: var(--dilan-gold-dark, #C8A05D);
        transition: transform 0.2s ease;
    }
    .dilan-fcol.dilan-open .dilan-fcol-title::after {
        content: "\2212"; /* − */
    }
    /* Hide content by default; show when open */
    .dilan-fcol .dilan-fcol-links,
    .dilan-fcol-contact > *:not(.dilan-fcol-title) {
        display: none !important;
    }
    .dilan-fcol.dilan-open .dilan-fcol-links,
    .dilan-fcol.dilan-open.dilan-fcol-contact > *:not(.dilan-fcol-title) {
        display: block !important;
    }
    .dilan-fcol.dilan-open .dilan-fcol-links { padding-bottom: 16px; }
    .dilan-fcol.dilan-open.dilan-fcol-contact { padding-bottom: 16px; }
    /* Compact contact rows */
    .dilan-fcol-contact p { padding-bottom: 4px; font-size: 15px; }
    .dilan-fcol-contact .dilan-contact-addr { padding-left: 30px; }
    .dilan-fcol-links li { margin-bottom: 12px; }
    .dilan-fcol-links a { font-size: 15px; }
    .dilan-fsocial { display: flex; margin-top: 12px; }
    /* Tighten copyrights bar on mobile */
    html body .wd-copyrights .container,
    html body .wd-copyrights .wd-grid-g {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ---------- Site-wide title font consistency (Georgia serif) ---------- */
.dilan-trust-title,
.dilan-ws-title,
.dilan-fcol-title,
.dilan-cf-label,
.wd-entities-title,
.wd-entities-title a,
.woocommerce-loop-product__title,
.product_title,
.wd-section-title .liner-continer + h2,
.elementor-heading-title,
.dilan-section-title .elementor-heading-title {
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important;
}

/* ---------- "Why Trust Us?" section ---------- */
.dilan-trust-section {
    background-color: #F6F3EC;
    padding: 48px 20px 30px;
}
.dilan-trust-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.dilan-trust-title {
    text-align: center;
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dilan-gold-dark);
    margin: 0 0 44px;
}
.dilan-trust-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 24px;
    align-items: start;
}
.dilan-trust-item {
    text-align: center;
    color: var(--dilan-charcoal);
}
.dilan-trust-icon svg {
    width: 46px;
    height: 46px;
    color: var(--dilan-gold-dark);
    margin-bottom: 14px;
}
.dilan-trust-item p {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: var(--dilan-charcoal);
}
@media (max-width: 1024px) {
    .dilan-trust-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
}
@media (max-width: 600px) {
    .dilan-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
    .dilan-trust-title { font-size: 26px; margin-bottom: 30px; }
}

/* ---------- "Watch & Shop" Instagram reels ---------- */
.dilan-ws-section {
    background-color: #FFFFFF;
    padding: 30px 20px 60px;
}
.dilan-ws-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.dilan-ws-title {
    text-align: center;
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif;
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dilan-gold-dark);
    margin: 0 0 36px;
}
/* Instagram header — simple, minimal (logo + name · Follow + followers) */
.dilan-ig-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 28px;
}
.dilan-ig-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background: var(--dilan-gold-gradient);
}
.dilan-ig-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.dilan-ig-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.dilan-ig-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--dilan-charcoal) !important;
    text-decoration: none;
}
.dilan-ig-follow {
    font-size: 14px;
    font-weight: 600;
    color: var(--dilan-gold-dark) !important;
    text-decoration: none;
}
.dilan-ig-follow:hover {
    text-decoration: underline;
}
.dilan-ig-count {
    font-size: 14px;
    color: var(--dilan-charcoal);
}

.dilan-ws-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}
.dilan-ws-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
}
.dilan-ws-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #EDE6DA 0%, #DCCFBE 100%);
    background-size: cover;
    background-position: center;
}
.dilan-ws-caption {
    display: none !important;   /* caption is part of the reel video itself */
}
.dilan-ws-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}
.dilan-ws-play svg {
    width: 24px;
    height: 24px;
    color: #fff;
    margin-left: 3px;
}
.dilan-ws-media:hover .dilan-ws-play {
    background: rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(1.08);
}
.dilan-ws-product {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 16px;
    text-decoration: none;
}
.dilan-ws-pthumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: linear-gradient(135deg, #EDE6DA 0%, #D9C39A 100%);
}
.dilan-ws-pinfo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dilan-ws-ptitle {
    font-size: 13px;
    line-height: 1.3;
    color: #2B2118;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dilan-ws-pprice {
    font-size: 13px;
    font-weight: 700;
    color: var(--dilan-charcoal);
    margin-top: 3px;
}
@media (max-width: 1024px) {
    .dilan-ws-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .dilan-ws-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dilan-ws-title { font-size: 26px; }
}

/* Product action icons (quick view / wishlist / compare): white icon on gold when hovered — like the cart.
   The icon is a font glyph on .wd-action-icon::before, and the theme turns it grey on hover
   via --wd-action-color-hover, so we override that variable + the glyph color directly. */
.wd-action-btn.wd-style-icon > a:hover,
.wd-action-btn.wd-style-icon > a:focus {
    background-color: var(--dilan-gold) !important;
    border-color: var(--dilan-gold) !important;
    --wd-action-color-hover: #FFFFFF !important;
    --wd-action-icon-color-hover: #FFFFFF !important;
}
.wd-action-btn.wd-style-icon > a:hover .wd-action-icon:before,
.wd-action-btn.wd-style-icon > a:hover .wd-action-icon:after,
.wd-action-btn.wd-style-icon > a:hover .wd-action-icon,
.wd-action-btn.wd-style-icon > a:hover svg,
.wd-action-btn.wd-style-icon > a:hover svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Mobile: trim the large vertical padding on the home carousel sections
   (NEW ARRIVALS / CATEGORIES / COLLECTION) so they don't leave big empty gaps. */
@media (max-width: 768px) {
    .elementor-element-4d5ed99,
    .elementor-element-46e3ec0 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    /* NEW ARRIVALS had the most empty space — trim it tighter */
    .elementor-element-8150b32 {
        padding-top: 14px !important;
        padding-bottom: 6px !important;
    }
    .elementor-element-9c01e07 .wd-carousel { padding-bottom: 0 !important; }
    /* Empty section sitting between the hero slider and NEW ARRIVALS — collapse it */
    .elementor-element-923ba19 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
    .elementor-element-923ba19 > .e-con-inner,
    .elementor-element-923ba19 > .e-con {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
}

/* Mobile: hide product/category carousel arrows (not the hero slider) and let the
   cards run edge-to-edge — removes the side gap the arrows were reserving. */
@media (max-width: 768px) {
    .wd-products-element .wd-btn-arrow,
    .wd-products-element .wd-nav-arrows,
    .wd-cats-element .wd-btn-arrow,
    .wd-cats-element .wd-nav-arrows,
    .wd-cats .wd-btn-arrow,
    .wd-cats .wd-nav-arrows {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Hide the hover action-icon stack on mobile (it overflows the card on touch;
       the normal "Add to cart" button below still works). */
    .wd-products-element .wd-buttons.wd-pos-r-t,
    .elementor-element-9c01e07 .wd-buttons {
        display: none !important;
    }
    /* Re-clip the thumbnail on mobile so nothing spills out */
    .elementor-element-9c01e07 .wd-product-thumb,
    .elementor-element-9c01e07 .product-element-top {
        overflow: hidden !important;
    }

    /* (Column counts are set server-side: NEW ARRIVALS=2, Categories/Collection=1 —
       the slider lays them out natively. Image keeps the theme's square cover fit.) */
}

/* ---------- Products carousel (9c01e07): bigger image, un-clipped icons ---------- */
/* Fill the image edge-to-edge (cover) so the card background never shows on the sides. */
.elementor-element-9c01e07 .wd-product-grid-slide img,
.elementor-element-9c01e07 .wd-product-img-link img,
.elementor-element-9c01e07 .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Bolder product titles */
.elementor-element-9c01e07 .wd-entities-title,
.elementor-element-9c01e07 .wd-entities-title a {
    font-weight: 700 !important;
}
/* Stop the thumbnail from clipping the action-icon stack
   (carousel itself keeps its overflow so adjacent slides don't peek) */
.elementor-element-9c01e07 .wd-product-thumb,
.elementor-element-9c01e07 .product-element-top {
    overflow: visible !important;
}
/* Keep the action icons on top and fully visible */
.elementor-element-9c01e07 .wd-buttons,
.elementor-element-9c01e07 .wd-buttons.wd-pos-r-t {
    z-index: 30 !important;
}
.elementor-element-9c01e07 .product-grid-item:hover,
.elementor-element-9c01e07 .wd-carousel-item:hover {
    z-index: 40 !important;
}

/* ---------- Hero slider — reduce banner height ---------- */
/* Desktop */
.wd-slider .wd-slide,
.wd-slider-wrap .wd-slide,
.wd-slider .swiper-slide,
.wd-slider-wrap .swiper-slide {
    min-height: 520px !important;
    max-height: 520px;
}
.wd-slider img,
.wd-slider-wrap img {
    width: 100%;
    height: 520px;
    max-height: 520px;
    object-fit: contain;        /* show whole image, no cropping */
    object-position: center center;
    display: block;
    background-color: #FAF6EF;  /* ivory fallback for letterbox area */
}
/* Slider uses a background-image fill (cover) — switch to contain so nothing is cropped */
.wd-slider .wd-slide-bg,
.wd-slider .wd-slide-bg.wd-fill {
    background-size: contain !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    background-color: #FAF6EF !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .wd-slider .wd-slide,
    .wd-slider-wrap .wd-slide,
    .wd-slider .swiper-slide,
    .wd-slider-wrap .swiper-slide {
        min-height: 380px !important;
        max-height: 380px;
    }
    .wd-slider img,
    .wd-slider-wrap img {
        max-height: 380px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .wd-slider .wd-slide,
    .wd-slider-wrap .wd-slide,
    .wd-slider .swiper-slide,
    .wd-slider-wrap .swiper-slide {
        min-height: 260px !important;
        max-height: 260px;
    }
    .wd-slider img,
    .wd-slider-wrap img {
        max-height: 260px;
    }
}

/* ---------- Filter by Category (custom HTML list) ---------- */
.dilan-cat-filter {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dilan-cat-filter li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dilan-cat-filter li:last-child {
    border-bottom: 0;
}
.dilan-cat-filter li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 2px;
    color: #555;
    font-size: 14px;
    line-height: 1.35;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.dilan-cat-filter li a:hover {
    color: var(--dilan-gold-dark, #9a7d4f);
    padding-left: 6px;
}
.dilan-cat-filter .dilan-cf-count {
    flex: 0 0 auto;
    margin-left: 10px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(184, 153, 104, 0.12);
    color: var(--dilan-gold-dark, #9a7d4f);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}
.dilan-cat-filter li a:hover .dilan-cf-count {
    background: var(--dilan-gold, #B89968);
    color: #fff;
}

/* ---------- Single product: Compare / Add to wishlist (text style) ----------
   These render with a fixed 44px icon-button width, so the label overflowed and
   overlapped the icon. Make them auto-width inline rows: [icon] Label, no circle. */
.single-product .wd-action-btn.wd-style-text > a {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dilan-charcoal, #2B2118);
    font-weight: 600;
    white-space: nowrap;
}
.single-product .wd-action-btn.wd-style-text > a .wd-action-icon,
.single-product .wd-action-btn.wd-style-text > a > span:first-child {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
}
/* sit the two buttons on one tidy row with a divider gap */
.single-product .wd-add-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}
/* hover: tint icon + label gold (no pill background) */
.single-product .wd-action-btn.wd-style-text > a:hover,
.single-product .wd-action-btn.wd-style-text > a:hover .wd-action-icon,
.single-product .wd-action-btn.wd-style-text > a:hover .wd-action-icon:before {
    color: var(--dilan-gold-dark, #9a7d4f) !important;
    background: transparent !important;
}

/* ---------- Page-title banner (GLOBAL): replace the WoodMart demo furniture
   photo with an on-brand dark gradient on every inner page (Account, Cart,
   Checkout, Collection, Category, Wishlist, blog, etc). The furniture is a real
   <img> inside .wd-page-title-bg, so we hide it and recolour the title bar. ---------- */
.wd-page-title .wd-page-title-bg {
    display: none !important;
}
.wd-page-title {
    background: linear-gradient(135deg, #2B2118 0%, #4a3826 55%, #6b5234 100%) !important;
}
/* keep title + breadcrumb text light & readable on the dark brand banner */
.wd-page-title .title,
.wd-page-title .entry-title,
.wd-page-title .woocommerce-breadcrumb,
.wd-page-title .woocommerce-breadcrumb *,
.wd-page-title .wd-breadcrumbs,
.wd-page-title .wd-breadcrumbs *,
.wd-page-title a {
    color: #fff !important;
}
.wd-page-title .wd-breadcrumbs a:hover,
.wd-page-title .woocommerce-breadcrumb a:hover {
    color: var(--dilan-gold, #B89968) !important;
}

/* ---------- Promo popup: on-brand espresso background (demo used a furniture photo).
   WoodMart bakes the bg into cached CSS, so override it here. ---------- */
.wd-promo-popup.wd-popup,
.wd-popup.wd-promo-popup,
.mfp-content .wd-promo-popup {
    background-image: none !important;
    background-color: #241A12 !important;
}

/* ---------- Modern centered Sign-in (My Account, logged out) ---------- */
.woocommerce-account:not(.logged-in) #customer_login.wd-grid-f-col {
    display: block !important;
    max-width: 440px;
    margin: 0 auto;
    gap: 0;
}
.woocommerce-account:not(.logged-in) #customer_login .wd-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    border: 0 !important;
}
/* default: show login only; register appears on toggle */
.woocommerce-account #customer_login .col-register,
.woocommerce-account #customer_login .col-register-text { display: none !important; }
.woocommerce-account #customer_login.dilan-show-reg .col-login { display: none !important; }
.woocommerce-account #customer_login.dilan-show-reg .col-register { display: block !important; }
/* hide WooCommerce's own "Login"/"Register" column headings (we use one heading) */
.woocommerce-account #customer_login .col-login > h2,
.woocommerce-account #customer_login .col-register > h2,
.woocommerce-account #customer_login .col-login .wd-login-header,
.woocommerce-account #customer_login .col-register .wd-login-header { display: none !important; }

.dilan-auth-head {
    max-width: 440px;
    margin: 8px auto 22px;
    text-align: left;
}
.dilan-auth-title {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--dilan-charcoal, #2B2118);
}
.dilan-auth-sub { color: #9a9488; margin: 0; font-size: 15px; }

.dilan-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    margin: 0 0 14px;
    border: 1px solid #e3ddd1;
    border-radius: 12px;
    background: #fff;
    color: var(--dilan-charcoal, #2B2118);
    font-weight: 600;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dilan-social-btn:hover {
    border-color: var(--dilan-gold, #B89968);
    box-shadow: 0 4px 14px rgba(0,0,0,.07);
    color: var(--dilan-charcoal, #2B2118);
}
.dilan-g-ico { flex: 0 0 20px; }

.dilan-auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
    color: #b3ab9c;
    font-size: 13px;
    text-transform: lowercase;
}
.dilan-auth-or::before,
.dilan-auth-or::after { content: ""; flex: 1; height: 1px; background: #ece5d8; }

/* rounded brand inputs + full-width submit */
.woocommerce-account #customer_login input[type=text],
.woocommerce-account #customer_login input[type=email],
.woocommerce-account #customer_login input[type=password],
.woocommerce-account #customer_login input[type=tel] {
    width: 100%;
    min-height: 50px;
    border: 1px solid #e3ddd1;
    border-radius: 12px;
    padding: 0 16px;
    background: #fff;
}
.woocommerce-account #customer_login input:focus { border-color: var(--dilan-gold, #B89968); outline: none; }
.woocommerce-account #customer_login button[type=submit] {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    margin-top: 6px;
}
.dilan-auth-switch { text-align: center; margin: 18px 0 0; color: #8a8275; font-size: 14px; }
.dilan-auth-switch a { color: var(--dilan-gold-dark, #9a7d4f); font-weight: 600; }

/* ---------- Product page: trust badges ---------- */
.dilan-trust-badges {
    display: flex;
    gap: 14px;
    margin: 22px 0 6px;
    padding: 16px 0;
    border-top: 1px solid rgba(0,0,0,.07);
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.dilan-trust {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.dilan-trust-ico {
    width: 40px; height: 40px;
    color: var(--dilan-gold-dark, #9a7d4f);
    display: inline-flex; align-items: center; justify-content: center;
}
.dilan-trust-ico svg { width: 34px; height: 34px; }
.dilan-trust-txt { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; color: #6a6155; }
.dilan-trust-txt strong { color: var(--dilan-charcoal, #2B2118); font-size: 13.5px; }

/* ---------- Product page: section headings (You May Also Like / Recently Viewed) ---------- */
.related.products > h2,
.dilan-pp-head,
.up-sells > h2 {
    text-align: center !important;
    font-size: 26px !important;
    letter-spacing: .04em;
    margin: 10px 0 26px !important;
    position: relative;
    color: var(--dilan-charcoal, #2B2118);
}
.related.products > h2::before, .related.products > h2::after,
.dilan-pp-head::before, .dilan-pp-head::after {
    content: "\2756";
    color: var(--dilan-gold, #B89968);
    font-size: 14px;
    margin: 0 16px;
    vertical-align: middle;
}
.dilan-pp-section { margin-top: 44px; clear: both; }
.dilan-recently-viewed { border-top: 1px solid rgba(0,0,0,.06); padding-top: 30px; }

@media (max-width: 575px) {
    .dilan-trust-badges { gap: 8px; }
    .dilan-trust-txt { font-size: 12px; }
    .related.products > h2, .dilan-pp-head { font-size: 21px !important; }
}

/* ---------- Slim modern page-title bar (option B) ---------- */
.wd-page-title {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
    min-height: 0 !important;
}
.wd-page-title .entry-title,
.wd-page-title .title {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
}
.wd-page-title .woocommerce-breadcrumb,
.wd-page-title .wd-breadcrumbs {
    font-size: 13px !important;
    opacity: .9;
}
@media (max-width: 768px) {
    .wd-page-title { padding-top: 18px !important; padding-bottom: 18px !important; }
    .wd-page-title .entry-title,
    .wd-page-title .title { font-size: 23px !important; }
}

/* No cream/light variant is needed for cards without an image: the nameplate
   brings its own dark plate, so white text stays readable on the ivory logo
   panel exactly as it does over photography. */

/* ---------- Watch & Shop (Instagram Reels, shoppable) ---------- */
.dilan-watch { max-width: min(1760px, 94vw); margin: 16px auto 40px; }
/* Trim the big gap between "Why Trust Us?" and "Shop by Reels" (was 48px pb + 60px mt = 108px) */
.elementor-element-adec28a { padding-bottom: 20px !important; }
.dilan-watch-head {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 22px;
}
.dilan-watch-title {
    font-size: 30px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--dilan-gold-dark, #9a7d4f); margin: 0 14px; font-weight: 600;
}
.dilan-watch-acct {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px;
}
.dilan-watch-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    /* d-mark (transparent PNG) centered on the gold circle; "DJ" text hidden.
       !important because a WoodMart link rule overrides the avatar background otherwise. */
    background:
        url('/wp-content/uploads/2026/06/dilan-dmark.png') center / 80% no-repeat,
        radial-gradient(circle at 30% 30%, #d9bd82, #a9863f) !important;
    color: transparent !important; font-size: 0 !important;
    display: flex; align-items: center; justify-content: center; flex: 0 0 56px;
}
.dilan-watch-acct-meta { display: flex; flex-direction: column; line-height: 1.4; }
.dilan-watch-acct-line { display: flex; align-items: center; gap: 12px; }
.dilan-watch-name { font-weight: 700; color: var(--dilan-charcoal, #2B2118); font-size: 15px; }
.dilan-watch-follow { color: var(--dilan-gold-dark, #9a7d4f); font-weight: 600; font-size: 14px; }
.dilan-watch-followers { color: #9a9488; font-size: 13px; }

.dilan-watch-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
/* Reels arrows exist only for the phone scroller; the desktop grid shows all 5. */
.dilan-watch-nav { display: none; }
.dilan-watch-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 22px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04);
    display: flex; flex-direction: column;
}
.dilan-watch-video {
    position: relative; display: block; aspect-ratio: 3 / 4;
    background: #ece4d4 center/cover no-repeat;
}
.dilan-watch-play {
    position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
    border-radius: 50%; background: rgba(40,33,24,.55);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.dilan-watch-play svg { margin-left: 3px; }
.dilan-watch-video:hover .dilan-watch-play { background: var(--dilan-gold-dark, #9a7d4f); transform: scale(1.08); }
.dilan-watch-info { display: flex; gap: 10px; align-items: center; padding: 12px; }
.dilan-watch-thumb {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px;
    background: #ece4d4 center/cover no-repeat;
}
.dilan-watch-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dilan-watch-pname {
    font-size: 13px; line-height: 1.3; color: var(--dilan-charcoal, #2B2118);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dilan-watch-pprice { font-size: 14px; font-weight: 700; color: var(--dilan-charcoal, #2B2118); }
.dilan-watch-pprice del { color: #b3ab9c; font-weight: 400; margin-right: 5px; }

@media (max-width: 1024px) { .dilan-watch-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  {
    .dilan-watch-row {
        /* 82% — a full-width column made each reel fill the phone screen (367x530
           on a 390px viewport), which read as oversized. At 82% the reel is a
           comfortable size and the sliver of the next one tells the customer
           there is more to swipe. */
        grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%;
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        /* Constrain the row to the viewport so its columns overflow INSIDE it and it
           scrolls. Without this the row is a flex item with min-width:auto, so it grows
           to its full content width (~6000px) and never scrolls — that was the "not
           swiping" bug. */
        width: 100% !important; max-width: 100% !important; min-width: 0 !important;
        padding-bottom: 0;
        /* hide the horizontal scrollbar ("scroll ball") — swipe still works */
        scrollbar-width: none;            /* Firefox */
        -ms-overflow-style: none;         /* old Edge/IE */
    }
    .dilan-watch-row::-webkit-scrollbar { display: none; width: 0; height: 0; }  /* Chrome/Safari */
    .dilan-watch-card { scroll-snap-align: center; }
    .dilan-watch-title { font-size: 22px; }

    /* Reels prev/next — phones only (the row is a plain scroller on desktop grid) */
    .dilan-watch-nav {
        display: flex; align-items: center; justify-content: center;
        gap: 14px; margin-top: 18px;
    }
    /* WoodMart's generic `button` rules flatten these (border:0, radius:0, grey
       text, 42px tall from padding), so the circle needs both the extra
       specificity and !important to survive. */
    .dilan-watch .dilan-watch-nav .dilan-watch-arrow {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 40px !important; height: 40px !important; min-height: 40px !important;
        flex: 0 0 40px !important; padding: 0 !important; margin: 0 !important;
        border: 1px solid rgba(176,141,87,.45) !important; border-radius: 50% !important;
        background: #fff !important; color: var(--dilan-gold-dark, #9a7d4f) !important;
        font-size: 20px !important; line-height: 1 !important; cursor: pointer;
        box-shadow: 0 2px 8px rgba(43,33,24,.10) !important;
        text-transform: none !important; letter-spacing: 0 !important;
    }
    .dilan-watch .dilan-watch-nav .dilan-watch-arrow:active {
        background: var(--dilan-gold-dark, #9a7d4f) !important; color: #fff !important;
    }

    /* Footer was edge-to-edge on the home page (its container had 0 side
       padding, unlike other pages). Give it left/right breathing room. */
    .wd-footer .container,
    .wd-footer .main-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* ---------- Product summary: free-shipping line + assistance box ---------- */
.dilan-pp-freeship { font-weight: 600; color: var(--dilan-charcoal, #2B2118); margin: 16px 0 2px; font-size: 14px; }
.dilan-pp-taxnote { color: #9a9488; font-size: 12.5px; margin: 0 0 16px; }
.dilan-assist-box {
    background: #f5efe2;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 0 0 6px;
}
.dilan-assist-q { display: block; font-size: 13.5px; color: #6a6155; margin-bottom: 7px; }
.dilan-assist-links a { color: var(--dilan-gold-dark, #9a7d4f); font-weight: 600; text-decoration: underline; }
.dilan-assist-links i { color: #cabfa8; font-style: normal; margin: 0 9px; }

/* ---------- Hero slides: fill the fixed-height strip cleanly (cover), centered.
   WoodMart generates per-slide CSS with ID specificity, so we use .wd-slide#id
   (1,2,0) to win over it for every slide. Banners should be ~1920x590 to fill
   with no crop. ---------- */
.wd-slide#slide-11018 .wd-slide-bg,
.wd-slide#slide-11003 .wd-slide-bg,
.wd-slide#slide-30010 .wd-slide-bg,
.wd-slider .wd-slide .wd-slide-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-color: #f6efe2 !important;
}

/* ---------- Currency float must sit BELOW the side cart / off-canvas panels (z-index 500),
   so it no longer overlaps the open cart drawer ---------- */
.dilan-currency-float { z-index: 490 !important; }
body.cart-widget-opened .dilan-currency-float,
body.wd-search-full-screen-opened .dilan-currency-float,
body.wd-mobile-menu-opened .dilan-currency-float,
body.wd-open .dilan-currency-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The search overlay never added a body class in this theme version — checked on
   the live page: opening it sets .wd-opened on .wd-search-full-screen and leaves
   <body> untouched. So the wd-search-full-screen-opened rule above has never
   matched anything, and the pill stayed on top of the search box and its close
   button. Keying off the overlay's own state is what actually works. */
body.dilan-search-overlay-open .dilan-currency-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------- Single product: sticky gallery ----------
   With the accordions in the right summary column, the right side is long while
   the left image is short. Make the gallery sticky so it follows the scroll and
   fills that empty left space. ---------- */
@media (min-width: 769px) {
    .single-product .product-image-summary-inner .product-images {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

/* ---------- Single product: pin the sale badge to the top-LEFT of the gallery
   image so it no longer overlaps the product title ---------- */
.single-product .wd-gallery-images .product-labels,
.single-product .product-images .product-labels,
.single-product .product-image-summary .product-labels {
    left: 15px !important;
    right: auto !important;
    top: 15px !important;
    text-align: left !important;
    width: auto !important;
}
.single-product .wd-gallery-images .product-labels .onsale,
.single-product .product-images .product-labels .onsale {
    margin: 0 !important;
}

/* ---------- Watch & Shop: caption for an Instagram reel with no linked product ---------- */
.dilan-watch-info--reel { justify-content: center; }
.dilan-watch-info--reel .dilan-watch-pname { color: var(--dilan-gold-dark, #9a7d4f); font-weight: 600; }

/* ===================== Header refinements (v2.0.68) ===================== */
/* Menu / nav bar → serif (matches the category font) + no text shadow */
.whb-general-header .wd-nav-main > li > a,
.whb-general-header .whb-main-menu .menu-item > a,
.whb-general-header .menu-item.item-level-0 > a {
    font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important;
    font-size: 14px !important;   /* was 16px — read as oversized on wide screens */
    font-weight: 500;
    letter-spacing: .9px;
    text-transform: uppercase;
    text-shadow: none !important;
}
/* Remove any shadow on the top line (announcement bar + its text) */
.whb-top-bar, .whb-top-bar *,
.wd-header-text, .wd-header-text *,
.whb-general-header .wd-nav-main a {
    text-shadow: none !important;
}

/* Social icons (top header): Instagram → YouTube → Facebook → Pinterest, brand colours, hide only X */
.whb-header .wd-social-icon.social-instagram { order: 1; }
.whb-header .wd-social-icon.social-youtube   { order: 2; }
.whb-header .wd-social-icon.social-facebook  { order: 3; }
.whb-header .wd-social-icon.social-pinterest { order: 4; }
.whb-header .wd-social-icon.social-twitter,
.whb-header .wd-social-icon.social-x { display: none !important; }
.whb-header .wd-social-icon.social-instagram { color: #E1306C !important; }
.whb-header .wd-social-icon.social-youtube   { color: #FF0000 !important; }
.whb-header .wd-social-icon.social-facebook  { color: #1877F2 !important; }
.whb-header .wd-social-icon.social-pinterest { color: #E60023 !important; }
.whb-header .wd-social-icon.social-instagram:hover { color: #c1306c !important; }
.whb-header .wd-social-icon.social-youtube:hover   { color: #cc0000 !important; }
.whb-header .wd-social-icon.social-facebook:hover  { color: #145fc0 !important; }
.whb-header .wd-social-icon.social-pinterest:hover { color: #b3001b !important; }

/* Same treatment everywhere else (footer, widgets, mobile) — brand colours + hide only X/Twitter */
.wd-social-icon.social-instagram { color: #E1306C !important; }
.wd-social-icon.social-youtube   { color: #FF0000 !important; }
.wd-social-icon.social-facebook  { color: #1877F2 !important; }
.wd-social-icon.social-pinterest { color: #E60023 !important; }
.wd-social-icon.social-instagram:hover { color: #c1306c !important; }
.wd-social-icon.social-youtube:hover   { color: #cc0000 !important; }
.wd-social-icon.social-facebook:hover  { color: #145fc0 !important; }
.wd-social-icon.social-pinterest:hover { color: #b3001b !important; }
.wd-social-icon.social-twitter,
.wd-social-icon.social-x { display: none !important; }

/* Footer "Contact Us" social icons (.dilan-fsocial) — brand colours instead of dark currentColor */
.dilan-fsocial a[aria-label="Facebook"]  { color: #1877F2 !important; }
.dilan-fsocial a[aria-label="Instagram"] { color: #E1306C !important; }
.dilan-fsocial a[aria-label="YouTube"]   { color: #FF0000 !important; }
.dilan-fsocial a[aria-label="Pinterest"] { color: #E60023 !important; }
.dilan-fsocial a[aria-label="Facebook"]:hover  { color: #145fc0 !important; }
.dilan-fsocial a[aria-label="Instagram"]:hover { color: #c1306c !important; }
.dilan-fsocial a[aria-label="YouTube"]:hover   { color: #cc0000 !important; }
.dilan-fsocial a[aria-label="Pinterest"]:hover { color: #b3001b !important; }

/* (Reverted: uniform zoom-out shrank the full-width banner.) */

/* ===== Shorter hero on limited-height screens (e.g. 125% scaling) so New Arrivals peeks in ===== */
@media (min-width:1025px) and (max-height:780px) {
    .wd-slider .wd-slide,
    .elementor-widget-wd_slider .wd-slide,
    .wd-slide,
    .wd-slide-bg {
        min-height: 56vh !important;
        height: 56vh !important;
    }
}
@media (min-width:1025px) and (max-height:640px) {
    .wd-slider .wd-slide,
    .elementor-widget-wd_slider .wd-slide,
    .wd-slide,
    .wd-slide-bg {
        min-height: 52vh !important;
        height: 52vh !important;
    }
}

/* ===== New Arrivals: clean single-card style (image full, heart top-left, left-aligned text) ===== */
.elementor-element-9c01e07 .wd-product { box-shadow: none !important; border: none !important; text-align: left !important; }
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title,
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .price,
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-product-detail,
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .product-element-bottom,
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .product-rating {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
/* Card: full-width image (3:4 — shortened from the taller 2:3) + title & price pinned to the bottom (aligned across cards) */
.elementor-element-9c01e07 .wd-product,
.elementor-element-9c01e07 .wd-product .wd-product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
}
.elementor-element-9c01e07 .wd-product .wd-product-thumb {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
/* Image edge-to-edge + NO photoframe: drop the 15px wrapper padding AND the wrapper box-shadow
   (badge, cart/hover icons and their positions are unchanged — they sit on the thumb). */
.elementor-element-9c01e07 .wd-product .wd-product-wrapper {
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
/* Equal-height cards (symmetric) */
.elementor-element-9c01e07 .swiper-wrapper { align-items: stretch !important; }
.elementor-element-9c01e07 .wd-carousel-item,
.elementor-element-9c01e07 .swiper-slide { height: auto !important; }
.elementor-element-9c01e07 .wd-product .wd-product-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;   /* contains the hover zoom (cart icons sit on the thumb, so they stay visible) */
}
.elementor-element-9c01e07 .wd-product .wd-product-img-link img,
.elementor-element-9c01e07 .wd-product .wd-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
    transition: transform .6s ease, opacity .45s ease !important;
}
/* ---- Product hover slideshow (mortantra-style): cross-fade through ALL gallery images ----
   The PHP hook outputs each gallery image as .dilan-gallery-img; the footer JS adds .is-active
   to cycle them on hover. Each active image cross-fades in with a slow Ken-Burns zoom. Hidden
   everywhere by default so it never affects other loops; only New Arrivals runs the slideshow. */
.dilan-hover-gallery { display: none; }
.elementor-element-9c01e07 .wd-product .product-wrapper,
.elementor-element-9c01e07 .wd-product .wd-product-wrapper { position: relative; }
.elementor-element-9c01e07 .dilan-hover-gallery { display: block; }
.elementor-element-9c01e07 .dilan-gallery-img {
    display: block;
    position: absolute; top: 0; left: 0; width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transform: scale(1.03);
    transition: opacity 1.1s ease, transform 3.4s ease;
    pointer-events: none; z-index: 3;
}
.elementor-element-9c01e07 .dilan-gallery-img.is-active { opacity: 1; transform: scale(1.08); }
/* Main image: gentle zoom on hover (its frame in the slideshow + products that have no gallery). */
.elementor-element-9c01e07 .wd-product:hover .wd-product-img-link img { transform: scale(1.06) !important; }
.elementor-element-9c01e07 .wd-product .wd-product-img-link img { transition: transform 2.6s ease, opacity .45s ease !important; }
/* title hugs the image (small gap), price right under it; spare space falls to card bottom */
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title {
    min-height: 0 !important;
    margin: 8px 0 2px !important;
    line-height: 1.3 !important;
}
.elementor-element-9c01e07.elementor-element .wd-products .wd-product .price {
    margin: 0 0 6px !important;
}
/* Hide the carousel pagination dots on EVERY carousel/slider site-wide
   (hero banner, New Arrivals, Wedding Collection, etc.). WoodMart sliders use
   .wd-nav-pagin; the coverflow uses .dilan-cf-pagination; products use .swiper-pagination. */
.wd-nav-pagin-wrap,
.wd-nav-pagin,
.dilan-cf-pagination,
.wd-slider-pagin,
.woocommerce .wd-nav-pagin { display: none !important; }

/* Reduce the gap between New Arrivals cards: the slide spacing is the carousel-item's
   10px L/R padding (=20px between cards). Halve it to 5px (=10px gap, slightly wider cards). */
.elementor-element-9c01e07 .wd-carousel-item {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Mobile: let the New Arrivals images render at natural ratio (the desktop 2/3 aspect + cover
   squished them on the narrow phone cards). */
@media (max-width: 767px) {
    .elementor-element-9c01e07 .wd-product,
    .elementor-element-9c01e07 .wd-product .wd-product-wrapper { height: auto !important; }
    .elementor-element-9c01e07 .wd-product .wd-product-thumb {
        aspect-ratio: auto !important;
        height: auto !important;
    }
    .elementor-element-9c01e07 .wd-product .wd-product-img-link img,
    .elementor-element-9c01e07 .wd-product .wd-product-thumb img {
        height: auto !important;
        object-fit: contain !important;
    }
    .elementor-element-9c01e07 .swiper-wrapper { align-items: flex-start !important; }
    .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title { margin-top: 10px !important; }
}

/* Remove the empty spacer section below Google Reviews on the home page */
.home .elementor-element-43608bf { display: none !important; }

/* ===== Match Shop by Reels + Google Reviews headings to the Elementor section style ===== */
/* Hide the old square-diamond + line spans in these two custom headings */
.dilan-watch-head .dilan-cat-style-orn,
.dilan-watch-head .dilan-cat-style-rule,
.dilan-greviews-head .dilan-cat-style-orn,
.dilan-greviews-head .dilan-cat-style-rule { display: none !important; }
/* Recreate the exact "✦ ───── TITLE ───── ✦" ornament with em-dash rules */
.dilan-watch-title::before,
.dilan-greviews-title::before {
    content: "✦ ─────";
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--dilan-gold-dark, #C8A05D);
    font-size: 0.82em;
    letter-spacing: 0;
    margin-right: 0.45em;
    vertical-align: middle;
}
.dilan-watch-title::after,
.dilan-greviews-title::after {
    content: "───── ✦";
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--dilan-gold-dark, #C8A05D);
    font-size: 0.82em;
    letter-spacing: 0;
    margin-left: 0.45em;
    vertical-align: middle;
}

/* =========================================================================
   FLUID DISPLAY TYPOGRAPHY  (Dilan Jewels — 2026-07)
   Headings/titles were fixed px, so they looked oversized on smaller / low-res
   desktops and undersized on very large monitors. clamp() makes them scale with
   the viewport: IDENTICAL to the previous fixed sizes at ~1600px+ (the design
   reference — so large screens are unchanged), scaling down smoothly to ~1024px.
   Body text is intentionally left at a stable 15px for readability.
   Scoped to min-width:1025px so the theme's existing mobile/tablet sizes are
   untouched. Resolved sizes, e.g. product title: 1920→34  1440→31  1200→27  1024→25.
   ========================================================================= */
@media (min-width: 1025px) {
    /* Homepage band titles: NEW ARRIVALS / SHOP BY COLLECTION / BEST-SELLERS … (reduced to 20px max) */
    .elementor-widget-heading.dilan-section-title .elementor-heading-title {
        font-size: clamp(17px, 8px + 0.8vw, 20px) !important;
    }
    /* Secondary section titles: Why Trust Us? / Watch & Shop (was 26px) */
    .dilan-trust-title,
    .dilan-ws-title {
        font-size: clamp(20px, 8px + 1.1vw, 26px) !important;
    }
    /* Page titles h1 (was 30px) */
    h1,
    .wd-page-title .title {
        font-size: clamp(23px, 10px + 1.2vw, 30px) !important;
    }
    /* Single product title (reduced from 34px → 28px max) */
    .product_title,
    h1.product_title {
        font-size: clamp(22px, 11px + 1.05vw, 28px) !important;
    }
    /* Related / up-sell / cross-sell section headings (was ~30px) */
    .related.products > h2,
    .up-sells > h2,
    .cross-sells > h2 {
        font-size: clamp(22px, 9px + 1.35vw, 30px) !important;
    }
}

/* =========================================================================
   INNER-PAGE TITLE BAND — remove the dark gradient strip behind the header
   The WooCommerce page-title band (About Us and other inner pages) has a dark
   brown gradient background and sits partly behind the header, so only a ~14px
   dark sliver peeked out under the nav. Neutralise the background so it blends.
   ========================================================================= */
.wd-page-title,
.wd-page-title .wd-page-title-bg {
    background: transparent !important;
    background-image: none !important;
}

/* ============================================================
   Mega menu: compact below 1536px, untouched above

   At 1920/100% the menu is right. At 125% zoom the browser reports a ~1536px
   viewport, so the menu's fixed pixel sizes (16px headings, 26px padding, a
   120px ornament) take up a much larger share of a smaller screen and it reads
   oversized. Zoom is not scaling the menu up — the screen got smaller while the
   menu stayed the same size.

   So the sizes step down from 1536px and below, which also covers real 1536,
   1440 and 1366 laptops. Anything wider than 1536 keeps the approved sizing.
   Floor of 1025px because the mobile menu takes over under that.

   Measured at 1920 before: dropdown 1010x376.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1536px) {

    .dilan-mega {
        gap: 10px;
        padding: 18px 16px 10px;
        max-width: 720px;              /* was 810px */
    }

    .dilan-mega-head {
        font-size: 14px;               /* was 16px */
        letter-spacing: 0.1em;         /* was 0.12em */
        margin-top: 10px;              /* was 15px */
    }

    .dilan-mega-orn {
        width: 96px;                   /* was 120px */
        margin-top: 9px;               /* was 14px */
    }

    .dilan-mega-viewall {
        font-size: 12.5px;             /* was 14px */
        padding-top: 10px;             /* was 14px */
        bottom: 12px;                  /* was 16px */
    }
}

/* ============================================================
   Category tiles: the grid and the carousel need different shapes

   `.dilan-cat-style-card` is used in two places:
     - .dilan-cat-page-grid     the /categories/ and /collections/ pages
     - .dilan-cat-carousel      the "Explore Categories" strip on collection
                                and category pages
   One aspect-ratio was serving both, so making the grid tall enough to stop
   cropping also made the strip enormous (427x512 on a collection page).

   GRID  -> 430/602, the shape most of the category images actually are, so the
            photo fills the box with nothing cropped.
   STRIP -> 20% shorter than the grid tile, as requested. 430/602 is 1.400 tall
            per unit width; 20% off gives 1.120, i.e. 430/482.

   NOTE ON THE IMAGES: the 23 category images are NOT all one shape —
     430x602 (0.714) x11   430x430 (1.000) x4    430x516 (0.833) x2
     430x537 (0.801) x2    430x515 (0.835) x2    430x573 x1   430x512 x1
   No single box can fit all of those. This sizes to the majority; the odd ones
   still crop and need re-exporting at 3:4 to match.
   ============================================================ */
.dilan-cat-page-grid .dilan-cat-style-card {
    aspect-ratio: 430 / 602;
}

body.tax-pa_collection .dilan-cat-carousel .dilan-cat-style-card {
    /* Same shape as the grid, so nothing is cropped — the strip gets shorter by
       being NARROWER, not by being squashed.

       The first attempt cut 20% off the height by changing the ratio to
       430/482. That did shorten it, but with object-fit: cover a shorter box
       crops the photo: 19.9% came off the top and bottom, slicing the faces.
       The categories page looked right precisely because its ratio was left
       alone.

       NO width cap. A fixed 285px cap inside a wider slide is exactly what
       created the visible gaps: the slide was 427px, the tile 285px, leaving
       ~142px of dead space around each one. The tile now fills whatever width
       its slide gives it, so spacing is controlled solely by slidesPerView and
       spaceBetween — change the count, and the tiles resize to suit instead of
       leaving holes.

       The 430/602 ratio is what matters and is kept: it matches the source
       images, so nothing is ever cropped whatever the width works out to. */
    aspect-ratio: 430 / 602;
}

/* Mobile: shorter reels.

   The tile is 3/4 on desktop, which at 301px wide still made a 401px-tall video
   (441px card) on a phone — it filled most of the screen vertically. 4/5 takes
   that to about 376px, so more of the page shows around it.

   The reels themselves are 9:16, so the tile already crops top and bottom; this
   crops a little further. Going shorter still (1/1) would cut noticeably into
   the frame, so 4/5 is the point where it stays comfortable without losing much
   of the piece being shown. */
@media (max-width: 768px) {
    .dilan-watch-video {
        aspect-ratio: 4 / 5;
    }
}

/* ---------- Mobile header: currency pill vs cart, plus a search icon ----------
 *
 * The currency pill was pinned at top:104px on mobile, which is exactly where
 * the cart icon sits — it covered the cart on every page. Anchoring it to the
 * header was always going to be fragile anyway, because the announcement bar
 * auto-closes and changes the header height underneath it.
 *
 * Docking it to the BOTTOM-right removes the dependency entirely: no header
 * measurement, no reflow when the bar closes. Bottom-left is already taken by
 * the WhatsApp button, so the two do not meet.
 */
@media (max-width: 768px) {
    .dilan-currency-float {
        /* Top-right, just below the header — the same placement desktop uses.
           Two earlier positions were wrong for opposite reasons: top:104px sat
           ON the cart icon, and docking it to the bottom put it on WoodMart's
           sticky toolbar (measured at 757-812). 180px clears the header, whose
           bottom edge measures 128px on a 375px-wide viewport, and leaves the
           whole lower screen free. */
        top: 180px !important;
        bottom: auto !important;
        right: 14px !important;
        left: auto !important;
    }

    /* Search icon added next to the cart by mobile-search-icon.js. It borrows
       WoodMart's tools-element classes, so it only needs spacing and a tap
       target here — the glyph and colour come from the theme. */
    .whb-mobile-right .dilan-mobile-search {
        display: inline-flex !important;
        align-items: center;
        margin-right: 4px;
    }
    .whb-mobile-right .dilan-mobile-search > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;   /* comfortable tap target */
        min-height: 44px;
        color: inherit;    /* the SVG is stroked with currentColor */
    }
    /* The magnifier is an inline SVG, not the theme icon font: WoodMart's
       ::before glyph computed to "" for this class combination, leaving an
       invisible gap where the icon should have been. */
    .whb-mobile-right .dilan-mobile-search .dilan-search-svg {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        /* Near-black, matching the cart glyph beside it. The inherited grey
           (rgb(118,118,118)) was too faint to find on a white header. */
        stroke: #2B2118 !important;
        fill: none !important;
    }
    .whb-mobile-right .dilan-mobile-search > a { color: #2B2118 !important; }
}

/* ---------- Mobile search drop-down panel ----------
 *
 * Opened by the magnifier next to the cart. It sits at the very top of the
 * viewport rather than measuring the header and positioning beneath it: the
 * header is fixed AND its height changes when the announcement bar auto-closes,
 * so any measured offset would be wrong half the time. Overlaying the header
 * for the moment you are typing is both simpler and steadier.
 */
.dilan-search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #FFFFFF;
    padding: 12px 14px calc(12px + env(safe-area-inset-top, 0px));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    transform: translateY(-110%);
    transition: transform 0.22s ease;
    visibility: hidden;
}
.dilan-search-panel.is-open {
    transform: translateY(0);
    visibility: visible;
}
.dilan-search-panel form {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #D9CFC0;
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    background: #FFFFFF;
}
.dilan-search-panel .dilan-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    outline: none;
    background: transparent;
    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 0;
    color: #2B2118;
    box-shadow: none !important;
}
.dilan-search-panel .dilan-search-go {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    /* !important throughout: the theme styles submit buttons inside forms and
       was repainting this one gold with a transparent background. */
    background: #7B1E28 !important;
    background-color: #7B1E28 !important;
    color: #FFFFFF !important;
    cursor: pointer;
}
/* Close (X) for the search panel. Sits beside the bar, not inside the form, so
   it can never be mistaken for a submit control. */
.dilan-search-panel {
    display: block;
}
.dilan-search-panel.is-open {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dilan-search-panel.is-open form {
    flex: 1 1 auto;
    min-width: 0;
}
.dilan-search-close {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #2B2118 !important;
    cursor: pointer;
}
/* Same zero-width SVG problem as the submit button. */
.dilan-search-close svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    min-width: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* The theme collapses SVGs inside buttons to zero width — measured on the live
   page, the magnifier was present, display:block, stroke white, and 0px wide,
   which is why the button looked like an empty coloured square. The width and
   height ATTRIBUTES on the tag do not survive that, so they are restated here. */
.dilan-search-panel .dilan-search-go svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    min-width: 20px !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* ---------- Search: one look everywhere ----------
 *
 * Three search boxes exist on the site — the header panel (ours), the mobile
 * menu drawer's form, and the theme's full-screen form. They were three
 * different colours. The drawer's submit button in particular came out gold,
 * which reads as a different feature rather than the same search.
 */

/* Desktop: the panel is a centred bar, not a full-width strip. */
@media (min-width: 769px) {
    .dilan-search-panel {
        padding: 14px 24px;
    }
    .dilan-search-panel.is-open {
        justify-content: center;
    }
    .dilan-search-panel.is-open form {
        flex: 0 1 720px;
        max-width: 720px;
    }
}

/* The mobile menu drawer's search button, repainted to match ours. */
.wd-search-form .searchsubmit,
.wd-search-form button[type="submit"] {
    background: #7B1E28 !important;
    background-color: #7B1E28 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.wd-search-form .searchsubmit:hover,
.wd-search-form button[type="submit"]:hover {
    background: #66161F !important;
    background-color: #66161F !important;
}
.wd-search-form .searchsubmit svg,
.wd-search-form .searchsubmit::before {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* ---------- Size dropdown on catalogue product cards ----------
 *
 * Every product with sizes imports as a VARIABLE product, and WoodMart's
 * "quick shop" renders the variations form inside the product card — so the home
 * page, category grids and carousels each showed a "Choose an option" select
 * under the price.
 *
 * On a card that is noise: the shopper has not chosen a product yet, and a
 * dropdown competes with the image for attention. The picker belongs on the
 * product page, where it still appears untouched — this hides it ONLY inside
 * the card markup (.wd-product), never on the single product template.
 */
/* SCOPED to catalogue pages only. .wd-product also wraps the SINGLE product
   page — verified on /product/gold-plated-kundan-bangles-ban002911/ — so an
   unscoped rule hid the real size picker and made every variable product
   impossible to buy. body:not(.single-product) keeps the product page intact,
   and wd-quick-shop-2 is the card-only form class. */
body:not(.single-product) .wd-product form.cart.wd-quick-shop-2,
body:not(.single-product) .wd-product .wd-reset-var,
body:not(.single-product) .wd-product .reset_variations {
    display: none !important;
}

/* ...and the same treatment for the product carousels ON the single product page
   ("You may also like", up-sells). The rule above excludes .single-product entirely so
   the real size picker survives — but that also let the picker back into the little
   cards underneath, where the swatches sit ON TOP of the photograph and clip it.
   Those cards are inside .wd-products-element; the product's own form is not, so this
   cannot touch the picker the customer actually buys with. */
body.single-product .wd-products-element .wd-product form.cart.wd-quick-shop-2,
body.single-product .wd-products-element .wd-product .wd-reset-var,
body.single-product .wd-products-element .wd-product .reset_variations,
body.single-product .wd-products-element .wd-product .wd-swatches-product {
    display: none !important;
}