/* ============================================================ Dilan Jewels — minimal brand customizations Theme-independent (loaded via mu-plugin). Colors are controlled by WoodMart admin (Theme settings → Colors). This file only handles things WoodMart can't do via admin. ============================================================ */ :root { --dilan-gold: #B89968; --dilan-gold-dark: #97774A; --dilan-ivory: #FAF6EF; --dilan-charcoal: #2B2118; } /* All width-override CSS removed — was causing character-by-character vertical text in multiple sections. Letting Elementor handle widths natively. */ /* Wider product carousels — without breaking the layout via viewport math */ body.home .elementor-widget-wd_products, body.home .wd-products-element, body.home .elementor-widget-wd_product_categories { width: 100% !important; max-width: 100% !important; } /* ---------- Force WoodMart content wrapper to full width on homepage ---------- */ body.home .main-page-wrapper, body.home .content-layout-wrapper, body.home .container, body.home #main-content > .container, body.home main.site-main { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Override WoodMart container max-width for category carousels — true edge-to-edge */ body.home .elementor-widget-wd_product_categories .wd-cats-element, body.home .elementor-widget-wd_product_categories .wd-grid-g { max-width: 100% !important; width: 100% !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important; } /* ===================================================================== HARD NUKE: the .wd-add-btn-replace button (the unwanted overlay) This appears on every product, with or without variations. ===================================================================== */ .wd-add-btn.wd-add-btn-replace, div.wd-add-btn.wd-add-btn-replace, .wd-product .wd-add-btn-replace, .wd-product-thumb .wd-add-btn-replace, .wd-product-thumb > .wd-add-btn-replace, .wd-product-thumb > .wd-add-btn.wd-add-btn-replace, .product-element-top .wd-add-btn-replace, .product-grid-item .wd-add-btn-replace { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; position: absolute !important; left: -99999px !important; top: -99999px !important; } /* Also kill the ::after pseudo on .wd-product-thumb (it can contain the overlay icon) */ .wd-product-thumb::after, .wd-product .wd-product-thumb::after { display: none !important; content: none !important; } /* ============================================================ PRODUCT CARD CLEANUP — final override (HIGH SPECIFICITY) Hide EVERY add-to-cart variant inside .wd-product-thumb except the .wd-buttons stack and the image link. ============================================================ */ .wd-product-thumb > a:not(.product-image-link):not(.wd-product-image-link), .wd-product-thumb > .wd-add-btn:not(.dilan-cart-btn), .wd-product-thumb > .wd-buttons-with-text, .wd-product-thumb > .wd-add-btn-replace, .wd-product-thumb > .wd-quick-shop-link, .wd-product .product-element-top > a.add_to_cart_button, .wd-product .product-element-top > a.product_type_variable, .wd-product .product-element-top > a.button, .wd-product .product-element-top > .wd-add-btn:not(.dilan-cart-btn) { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; } /* Force .dilan-cart-btn (injected cart) to white circle in the stack. Extra margin-top so the carousel next-arrow (which sits at the vertical centre of the card) lands in the gap between heart and cart, not on top of the cart button. */ .wd-buttons .dilan-cart-btn, .wd-product .dilan-cart-btn, .dilan-cart-btn { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: 40px !important; height: 40px !important; margin: 0 !important; /* arrows now live in side gutters, no push needed */ background: transparent !important; box-shadow: none !important; border: none !important; left: auto !important; } .dilan-cart-btn > a, .wd-buttons .dilan-cart-btn > a, .wd-buttons .dilan-cart-btn a.dilan-cart-link, a.dilan-cart-link { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--dilan-charcoal) !important; padding: 0 !important; border: none !important; text-decoration: none !important; transition: all .3s ease !important; transform: none !important; position: static !important; opacity: 1 !important; } .dilan-cart-btn > a:hover, a.dilan-cart-link:hover { background: var(--dilan-gold) !important; background-color: var(--dilan-gold) !important; color: #FFFFFF !important; transform: scale(1.05) !important; box-shadow: 0 4px 14px rgba(151, 119, 74, 0.3) !important; } /* Force .wd-buttons to be the visible hover stack on the right */ .wd-product .wd-buttons, .wd-product-thumb .wd-buttons, .product-grid-item .wd-buttons { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; z-index: 10 !important; width: auto !important; height: auto !important; background: transparent !important; margin: 0 !important; padding: 0 !important; opacity: 0; transition: opacity .35s ease; } .wd-product:hover .wd-buttons, .product:hover .wd-buttons, .product-grid-item:hover .wd-buttons, .wd-product-thumb:hover .wd-buttons { opacity: 1 !important; } /* ---------- Hide WoodMart brands strip (demo brands like vitra, hay, flos) ---------- */ .elementor-widget-wd_products_brands, .wd-products-brands, .wd-brand-carousel { display: none !important; } /* ---------- Hide page title banner on homepage ---------- */ .home .page-title, .home .page-title-default, .home .wd-page-title, .home .wd-page-title-default, .home-page .page-title, .page-template-front-page .page-title, .home #title, body.home > .title-size-default, body.home .title-shop-section.title-size-default { display: none !important; } /* ---------- Inner-page title band ---------- WoodMart's configured page-title background (Theme Settings > Page title) stopped rendering on the outdated Core, leaving white title text on a transparent band (invisible). Restore it as a thin BROWN band with white text. */ .wd-page-title.page-title { background-color: #4a3b28 !important; padding-top: 12px !important; padding-bottom: 12px !important; } .wd-page-title .entry-title, .wd-page-title .title { color: #ffffff !important; } .wd-page-title .woodmart-breadcrumbs, .wd-page-title .woodmart-breadcrumbs *, .wd-page-title .breadcrumbs, .wd-page-title .breadcrumbs * { color: rgba(255, 255, 255, 0.8) !important; } /* ---------- Footer logo — clean transparent swap ---------- Uploaded logo (dilan-logo.jpg) has a baked-in checkerboard background AND a stale .webp sibling gets served, so replacing the file doesn't fix it. Keep the original to hold the exact box, hide it, and paint a clean transparent PNG (embedded) as the container background. Self-contained; no file/cache/webp dependency. */ .dilan-footer-logo { background-image: url('data:image/png;base64,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'); background-repeat: no-repeat; background-position: left center; background-size: contain; } .dilan-footer-logo img { opacity: 0 !important; } /* ---------- Buttons: charcoal text on gold (override child theme white) ---------- */ .btn-color-primary, .button.btn-color-primary, .button.alt, .woocommerce a.button.alt, .single_add_to_cart_button, .checkout-button, .wd-button-wrapper a.btn, .wd-button-wrapper .btn, .btn, .button:not(.added_to_cart), input[type="submit"], button[type="submit"], .mc4wp-form input[type="submit"], .wpcf7-submit, .promo-banner .btn, .promo-banner a.btn, .wd-add-btn > a, .products .add_to_cart_button { color: var(--dilan-charcoal) !important; } .btn-color-primary:hover, .button.btn-color-primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, .wd-button-wrapper a.btn:hover, .btn:hover, .button:not(.added_to_cart):hover, input[type="submit"]:hover, button[type="submit"]:hover, .promo-banner .btn:hover, .promo-banner a.btn:hover, .wd-add-btn > a:hover, .products .add_to_cart_button:hover { color: var(--dilan-charcoal) !important; } /* Top bar text should stay light against gold-subtle background */ .whb-top-bar, .whb-top-bar a { color: var(--dilan-charcoal) !important; } /* ---------- Sale price color — DARK MAROON (was gold, was green) ---------- Client asked for all prices in dark maroon, so this block now carries the maroon value rather than being overridden later in the file. ---------- */ .products .product .price ins, .products .product .price ins .amount, .products .product .price ins span, .product .price ins, .product .price ins .amount, .price ins .woocommerce-Price-amount, ins .amount, .amount ins, .wd-product .price ins, .wd-product-grid-item .price ins, .product-grid-item .price ins, .product-grid-item .price ins .amount, .products .price > ins, .woocommerce-Price-amount bdi { color: #7B1E28 !important; text-decoration: none !important; } /* Strike-through old price — dark/charcoal so it stays legible. Was #999 at 0.7 opacity, which read as barely-visible light gray. */ .products .product .price del, .products .product .price del .amount, .products .product .price del bdi, .product .price del, .product .price del .amount, .product .price del bdi, .price del .amount, .price del bdi, .wd-product .price del, .wd-product .price del .amount { color: #2B2118 !important; text-decoration: line-through; opacity: 1 !important; font-weight: 400 !important; } /* ---------- WoodMart Title widget: "Custom divider" style ---------- */ /* Used as section header throughout the site: SUBTITLE TEXT (small, gold uppercase) MAIN TITLE ─── ❋ ─── (elegant divider) Description text */ /* Container — center everything */ .wd-title-element, .wd-title-color-default, .wd-section-title, .elementor-widget-wd_title .wd-title-element, .elementor-widget-wd_title { text-align: center !important; margin-bottom: 28px; } /* Subtitle (small uppercase above main title) */ .wd-title-element .wd-subtitle, .wd-section-title .subtitle, .wd-title-element > span:first-child, .elementor-widget-wd_title .wd-subtitle { display: block; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; color: var(--dilan-gold) !important; margin-bottom: 12px !important; } /* Main title — refined, serif feel */ .wd-title-element .liner-continer, .wd-title-element h1, .wd-title-element h2, .wd-title-element h3, .wd-title-element h4, .wd-section-title h1, .wd-section-title h2, .wd-section-title h3, .elementor-widget-wd_title h1, .elementor-widget-wd_title h2, .elementor-widget-wd_title h3 { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: clamp(28px, 3.2vw, 44px) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; color: var(--dilan-charcoal) !important; margin: 0 !important; text-transform: none !important; } /* Elegant custom divider — gold lines with center ornament */ .wd-title-element .title-divider, .wd-section-title .title-divider, .elementor-widget-wd_title .title-divider, .title-design-with-custom-divider:after, .wd-title-style-default + .title-divider { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px; margin: 18px auto 10px !important; max-width: 280px; height: auto !important; background: transparent !important; border: none !important; position: static !important; } /* Lines + center ornament via pseudo elements */ .wd-title-element::before, .wd-title-element::after { display: none !important; } .wd-title-element .title-divider::before, .elementor-widget-wd_title .title-divider::before, .wd-title-element .title-divider::after, .elementor-widget-wd_title .title-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--dilan-gold) 50%, transparent 100%); opacity: 0.7; } /* Center ornament — use Unicode flower/star */ .wd-title-element .title-divider .divider-icon, .elementor-widget-wd_title .title-divider .divider-icon { color: var(--dilan-gold) !important; font-size: 14px; line-height: 1; } /* Fallback: if no .divider-icon span exists, inject one with content */ .wd-title-element .title-divider { position: relative; } .wd-title-element .title-divider::before { margin-right: 12px; } .wd-title-element .title-divider::after { margin-left: 12px; } /* Description text below divider */ .wd-title-element .wd-description, .wd-title-element + .wd-description, .elementor-widget-wd_title + .elementor-widget-text-editor p, .wd-title-element p { font-size: 14px !important; line-height: 1.6 !important; color: #6b6256 !important; max-width: 600px; margin: 8px auto 0 !important; text-align: center; font-weight: 400 !important; } /* ============================================================ Dilan section title — [✤] ─── TITLE ─── [✤] Apply CSS class "dilan-section-title" to any Elementor Heading ============================================================ */ .elementor-widget-heading.dilan-section-title { text-align: center; } .elementor-widget-heading.dilan-section-title .elementor-heading-title, .dilan-section-title > h1, .dilan-section-title > h2, .dilan-section-title > h3, .dilan-section-title > h4 { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: clamp(20px, 2.2vw, 32px) !important; font-weight: 500 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--dilan-gold-dark) !important; margin: 0 auto !important; padding: 0 !important; white-space: nowrap; } /* Left ornament + line via dash characters (perfectly symmetric, no flex weirdness) */ .elementor-widget-heading.dilan-section-title .elementor-heading-title::before, .dilan-section-title > h1::before, .dilan-section-title > h2::before, .dilan-section-title > h3::before, .dilan-section-title > h4::before { content: "✦ ─────"; color: var(--dilan-gold); font-size: 0.85em; letter-spacing: -0.05em; margin-right: 16px; font-family: Georgia, serif; font-weight: 400; line-height: 1; } /* Right line + ornament (mirror) */ .elementor-widget-heading.dilan-section-title .elementor-heading-title::after, .dilan-section-title > h1::after, .dilan-section-title > h2::after, .dilan-section-title > h3::after, .dilan-section-title > h4::after { content: "───── ✦"; color: var(--dilan-gold); font-size: 0.85em; letter-spacing: -0.05em; margin-left: 16px; font-family: Georgia, serif; font-weight: 400; line-height: 1; } /* Tablet — shorter lines */ @media (max-width: 1024px) { .elementor-widget-heading.dilan-section-title .elementor-heading-title::before, .elementor-widget-heading.dilan-section-title .elementor-heading-title::after { width: 110px !important; } } @media (max-width: 768px) { .elementor-widget-heading.dilan-section-title .elementor-heading-title { letter-spacing: 0.1em !important; font-size: clamp(16px, 4.5vw, 22px) !important; } .elementor-widget-heading.dilan-section-title .elementor-heading-title::before, .elementor-widget-heading.dilan-section-title .elementor-heading-title::after { width: 60px !important; padding-left: 10px !important; padding-right: 10px !important; margin-left: 12px !important; margin-right: 12px !important; font-size: 0.6em; } } @media (max-width: 480px) { .elementor-widget-heading.dilan-section-title .elementor-heading-title { letter-spacing: 0.08em !important; font-size: clamp(14px, 5vw, 18px) !important; } .elementor-widget-heading.dilan-section-title .elementor-heading-title::before, .elementor-widget-heading.dilan-section-title .elementor-heading-title::after { width: 30px !important; padding-left: 6px !important; padding-right: 6px !important; margin-left: 8px !important; margin-right: 8px !important; font-size: 0.55em; } } /* Extra small — ornaments only, no lines */ @media (max-width: 360px) { .elementor-widget-heading.dilan-section-title .elementor-heading-title::before, .elementor-widget-heading.dilan-section-title .elementor-heading-title::after { border-bottom: none !important; width: auto !important; } } /* ---------- Mortantra-style product cards ---------- */ /* Clean, premium product cards with hover image swap (uses gallery's 2nd image) */ .products .product, .wd-products-element .product-grid-item, ul.products li.product { background-color: transparent !important; border: none !important; transition: transform .3s ease, box-shadow .3s ease; } .products .product:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(43, 33, 24, 0.08); } /* Product image area — square, clean */ .product-image-link, .product-grid-item .product-image-link, .products .product img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; background-color: #FFFFFF; } /* ---------- Product images: visible, proper sizing (use actual WoodMart classes) ---------- */ .wd-product .wd-product-thumb, .product-grid-item .wd-product-thumb, .products .product .wd-product-thumb { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; position: relative; overflow: hidden; } .wd-product .wd-product-thumb img, .product-grid-item .wd-product-thumb img, .products .product .wd-product-thumb img, .products .product img.wp-post-image, .product-grid-item img.wp-post-image, .wd-product img.wp-post-image { opacity: 1 !important; visibility: visible !important; display: block !important; width: 100% !important; height: auto !important; } /* ---------- Product card hover: icons stacked on RIGHT (max specificity) ---------- */ .product .wd-buttons, .products .product .wd-buttons, .product-grid-item .wd-buttons, .wd-product .wd-buttons, [class*="wd-buttons"], .wd-buttons-position-left, .wd-buttons-position-bottom, .wd-buttons-position-center, .wd-buttons-position-default, .product-wrapper .wd-buttons, .product-element-top .wd-buttons { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; transform: none; display: flex !important; flex-direction: column !important; gap: 8px !important; z-index: 5 !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; opacity: 0; transition: opacity .35s ease, transform .35s ease; } /* Show on hover */ .product:hover .wd-buttons, .product-grid-item:hover .wd-buttons, .products li:hover .wd-buttons, .wd-product:hover .wd-buttons, .product-wrapper:hover .wd-buttons { opacity: 1 !important; } /* Each icon button — round white pill */ .wd-buttons > div, .wd-buttons > a, .wd-buttons .wd-action-btn, .wd-buttons .wd-action-btn > a { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; background-color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--dilan-charcoal) !important; margin: 0 !important; padding: 0 !important; border: none !important; transition: background-color .3s ease, color .3s ease, transform .2s ease !important; } /* ---------- HIDE only the giant "Background button" / OPTIONS bar ---------- */ /* Keep the icon-style add-to-cart so it can join the right-side stack. */ .wd-add-btn.wd-style-bg-btn, .wd-add-btn.wd-style-bg-btn-2, .products .product .button.wd-add-btn-replace, .product-grid-item .wd-add-btn-replace, .product-element-bottom > .wd-add-btn.wd-style-bg-btn, .wd-buttons-with-text .wd-add-btn.wd-style-bg-btn { display: none !important; } .product-element-bottom { background: transparent !important; } /* ---------- Hide the "SELECT OPTIONS" / variable product overlay ---------- */ /* Variable products show "Select Options" instead of "Add to Cart" — kill it */ .products .product .wd-add-btn-replace, .product-grid-item .wd-add-btn-replace, .wd-product .wd-add-btn-replace, .products .product a.button.product_type_variable, .product-grid-item a.button.product_type_variable, .products .product .wd-quick-shop-link, .product-grid-item .wd-quick-shop-link, .wd-product .wd-quick-shop-link, .products .product .select-options-link, .product-grid-item .select-options-link, /* ---------- Hide ANY left-side overlay button/circle on product image ---------- */ /* The "SELECT OPTIONS" gold circle on the left is one of these variants */ a.wd-quick-shop-link, .wd-quick-shop-link, .wd-quick-shop-link.wd-action-btn, .wd-product-thumb > a.wd-quick-shop-link, .wd-product-thumb > .wd-quick-shop-link, .wd-product-thumb .wd-add-btn-replace, .wd-product .wd-add-btn-replace, .product-grid-item .wd-add-btn-replace, [class*="select-options-overlay"], [class*="quick-shop-overlay"], /* Any standalone .wd-add-btn directly inside .wd-product-thumb (NOT inside .wd-buttons) */ .wd-product-thumb > .wd-add-btn:not(.dilan-cart-btn), .wd-product-thumb > a.add_to_cart_button, .wd-product-thumb > a.product_type_variable, .wd-product-thumb > a.button, .wd-product-thumb > .wd-buttons-with-text, /* Quick-shop on overlay variants */ .wd-product-thumb > .wd-add-btn-replace, .product-element-top > a.wd-quick-shop-link, .product-element-top > .wd-add-btn:not(.dilan-cart-btn), .product-element-top > a.add_to_cart_button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ---------- Hide the ORIGINAL cart button (we cloned it into the stack) ---------- */ /* The originals are still in their default position (left/bottom) — hide them */ .products .product > a.add_to_cart_button, .products .product > a.product_type_simple, .products .product > a.product_type_variable, .products .product > a.product_type_grouped, .products .product > a.product_type_external, .product-grid-item > a.add_to_cart_button, .product-grid-item > a.product_type_simple, .product-grid-item > a.product_type_variable, .wd-product > a.add_to_cart_button, .product-element-bottom > a.add_to_cart_button, .product-element-bottom > a.product_type_simple, .product-element-bottom > a.product_type_variable, /* The original .wd-add-btn that's NOT our cloned one */ .product > .wd-add-btn:not(.dilan-cart-btn), .products .product > .wd-add-btn:not(.dilan-cart-btn), .product-grid-item > .wd-add-btn:not(.dilan-cart-btn), .product-element-bottom > .wd-add-btn:not(.dilan-cart-btn), .product .product-image-link + .wd-add-btn:not(.dilan-cart-btn), .product .product-image-link ~ .wd-add-btn:not(.dilan-cart-btn) { display: none !important; visibility: hidden !important; } /* ---------- Cart icon (injected by JS, inside .wd-buttons stack) ---------- */ .dilan-cart-btn { width: 40px !important; height: 40px !important; background: transparent !important; box-shadow: none !important; position: static !important; transform: none !important; opacity: 1 !important; } .dilan-cart-btn > a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background-color: #FFFFFF !important; background-image: none !important; background: #FFFFFF !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--dilan-charcoal) !important; padding: 0 !important; border: none !important; text-decoration: none !important; transition: all .3s ease !important; /* Override any inherited gold gradient from earlier rules */ background-position: 0 0 !important; background-size: auto !important; } .dilan-cart-btn > a:hover { background-color: var(--dilan-gold) !important; background: var(--dilan-gold) !important; color: #FFFFFF !important; transform: scale(1.05); box-shadow: 0 4px 14px rgba(151, 119, 74, 0.3) !important; } /* ---------- Cart icon now back in right-side hover stack ---------- */ /* Hide the old price-row injection (in case JS already ran before update) */ .dilan-price-row { display: contents !important; } .dilan-price-cart-btn { display: none !important; } .dilan-cart-icon { width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 18px 18px; mask: url("data:image/svg+xml;utf8,") no-repeat center / 18px 18px; display: inline-block; } .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } /* ---------- ADD-TO-CART ICON — joins right-side hover stack ---------- */ /* Make sure the add-to-cart icon variant is visible and styled like a circle */ .product .wd-add-btn.wd-style-icon, .products .product .wd-add-btn.wd-style-icon, .product-grid-item .wd-add-btn.wd-style-icon, .wd-product .wd-add-btn.wd-style-icon, .product .wd-add-btn:not(.wd-style-bg-btn):not(.wd-style-bg-btn-2), .product-grid-item .wd-add-btn:not(.wd-style-bg-btn):not(.wd-style-bg-btn-2) { position: absolute !important; top: 14px !important; right: 14px !important; /* Stack below the 3 icons in .wd-buttons: 3 * 40px + 3 * 8px gap = 144px */ transform: translateY(144px) !important; opacity: 0; transition: opacity .35s ease !important; z-index: 5; width: 40px !important; height: 40px !important; display: block !important; visibility: visible !important; } .product:hover .wd-add-btn.wd-style-icon, .product-grid-item:hover .wd-add-btn.wd-style-icon, .products li:hover .wd-add-btn.wd-style-icon, .wd-product:hover .wd-add-btn.wd-style-icon, .product:hover .wd-add-btn:not(.wd-style-bg-btn):not(.wd-style-bg-btn-2), .product-grid-item:hover .wd-add-btn:not(.wd-style-bg-btn):not(.wd-style-bg-btn-2) { opacity: 1 !important; } /* Round white circular button styling */ .product .wd-add-btn.wd-style-icon > a, .products .product .wd-add-btn.wd-style-icon > a, .product-grid-item .wd-add-btn.wd-style-icon > a, .product .wd-add-btn:not(.wd-style-bg-btn):not(.wd-style-bg-btn-2) > a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background-color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--dilan-charcoal) !important; padding: 0 !important; border: none !important; transition: all .3s ease !important; } .product .wd-add-btn > a:hover, .product-grid-item .wd-add-btn > a:hover { background-color: var(--dilan-gold) !important; color: #FFFFFF !important; transform: scale(1.05); box-shadow: 0 4px 14px rgba(151, 119, 74, 0.3) !important; } /* Show on product hover */ .product:hover .wd-buttons, .product-grid-item:hover .wd-buttons, .wd-product:hover .wd-buttons { opacity: 1 !important; transform: translateX(0) !important; } /* Each action button — white circular pill */ .wd-buttons > div, .wd-buttons .wd-action-btn, .wd-buttons .wd-action-btn > a, .wd-action-btn.wd-wishlist-btn > a, .wd-action-btn.wd-add-btn > a, .wd-action-btn.wd-compare-btn > a, .wd-action-btn.wd-quick-view-btn > a { width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background-color .3s ease, color .3s ease, transform .2s ease !important; color: var(--dilan-charcoal) !important; } .wd-buttons > div:hover, .wd-buttons .wd-action-btn:hover, .wd-action-btn > a:hover { background-color: var(--dilan-gold) !important; color: #FFFFFF !important; transform: scale(1.08); } /* Icons inside the buttons */ .wd-buttons svg, .wd-buttons i, .wd-action-btn svg, .wd-action-btn i { width: 18px; height: 18px; font-size: 16px; color: inherit !important; fill: currentColor !important; } /* ---------- Sale labels — charcoal circle (contrast with gold theme) ---------- */ .product-labels span.onsale, .wd-product-label.onsale, span.onsale, .products .product .onsale { position: absolute !important; top: 14px !important; left: 14px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--dilan-charcoal) !important; /* dark — stands out */ color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; box-shadow: 0 3px 10px rgba(43, 33, 24, 0.25); z-index: 4; } /* "NEW" labels — deep teal — broader selectors */ .product-labels .wd-new, .product-labels .new-label, .product-labels span.new, .product-labels > span:first-child:not(.onsale), .wd-product-label.new, .wd-product-label.wd-new, .product .new-label, .product .wd-product-label[class*="new"], span.wd-product-label.new, [class*="product-label"][class*="new"] { position: absolute !important; top: 14px !important; left: 14px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #1B5E72 !important; /* deep teal blue */ color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; box-shadow: 0 3px 10px rgba(27, 94, 114, 0.3); z-index: 4; } /* "FEATURED" labels — gold (curator's pick) */ .product-labels .wd-featured, .wd-product-label.featured, .product .featured-label { position: absolute !important; top: 14px !important; left: 14px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--dilan-gold) !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; box-shadow: 0 3px 10px rgba(151, 119, 74, 0.25); z-index: 4; } /* "HOT" label — RED (urgent / attention) */ .product-labels .wd-hot, .product-labels .hot, .product-labels .label-hot, .wd-product-label.hot, .product .hot-label, .product-labels [class*="hot"] { position: absolute !important; top: 14px !important; left: 14px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #C0392B !important; /* deep red — stands out */ color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; box-shadow: 0 3px 10px rgba(192, 57, 43, 0.3); z-index: 4; } /* Stack subsequent labels vertically (so SALE + NEW don't overlap) */ .product-labels > span:nth-child(2), .product-labels > .wd-product-label:nth-child(2) { top: 70px !important; } /* ---------- Color swatches below image (left aligned) ---------- */ .wd-swatches-product, .wd-product-grid-item .wd-swatches-product { display: flex !important; gap: 6px !important; margin: 10px 0 0 0 !important; padding: 0 !important; justify-content: center; } .wd-swatches-product .wd-swatch { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 1px solid rgba(0,0,0,0.1) !important; cursor: pointer; transition: transform .2s ease; } .wd-swatches-product .wd-swatch:hover { transform: scale(1.15); } /* ---------- Carousel arrows (gold circular, sides of carousel) ---------- */ .wd-btn-arrow.wd-prev, .wd-btn-arrow.wd-next, .swiper-button-prev, .swiper-button-next { width: 48px !important; height: 48px !important; border-radius: 50% !important; background-color: rgba(255,255,255,0.9) !important; border: 1px solid rgba(184, 153, 104, 0.3) !important; color: var(--dilan-charcoal) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; transition: all .3s ease; } .wd-btn-arrow.wd-prev:hover, .wd-btn-arrow.wd-next:hover, .swiper-button-prev:hover, .swiper-button-next:hover { background-color: var(--dilan-gold) !important; color: #FFFFFF !important; border-color: var(--dilan-gold) !important; } /* Product title — small, refined */ .product-grid-item .wd-entities-title, .products .product .wd-entities-title, .products .product h3, .products .product h2 { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: center; margin-top: 16px !important; margin-bottom: 6px !important; color: var(--dilan-charcoal) !important; letter-spacing: 0.02em; } /* Price — gold, refined */ .products .product .price, .product-grid-item .price, .wd-product .price { text-align: center; font-size: 14px !important; font-weight: 500 !important; color: var(--dilan-gold) !important; margin-top: 4px; } .products .product .price ins { text-decoration: none; } .products .product .price del { color: #999 !important; margin-right: 8px; font-size: 13px; } /* Color swatches under price (when product has color variations) */ .wd-swatches-product .wd-swatch { border-radius: 50% !important; width: 16px !important; height: 16px !important; margin: 0 3px !important; } /* "Select options" / hover overlay button */ .product-grid-item .add_to_cart_button, .wd-add-btn.wd-style-bg-btn > a, .products .product .button { border-radius: 999px !important; /* pill shape */ padding: 10px 24px !important; font-size: 13px !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-weight: 500 !important; } /* Remove sale "%" badge clutter on jewellery cards (looks promotional/cheap) */ .products .product .product-labels .onsale { background: transparent !important; color: var(--dilan-gold) !important; border: 1px solid var(--dilan-gold) !important; font-size: 11px !important; padding: 3px 10px !important; } /* ---------- Hide ALL "Added to cart" success messages on grid cards ---------- */ .products .product .added_to_cart, .product-grid-item .added_to_cart, .wd-product .added_to_cart, .product .added_to_cart, .products .product .wc-forward, a.added_to_cart, .added_to_cart.wc-forward, .product-element-top .added_to_cart { display: none !important; } /* ---------- Hide harsh black tooltips on action buttons ---------- */ .products .product .wd-tooltip-label, .product-grid-item .wd-tooltip-label, .wd-action-btn .wd-tooltip-label, .wd-buttons .wd-tooltip-label, .wd-action-btn[data-title]:before, .wd-action-btn[data-title]:after, .products .product [title]:hover:after, .wd-tooltip:before, .wd-tooltip:after, .wd-tooltip-label-content { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Refined hover state — softer scale + gold tint */ .wd-buttons .wd-action-btn > a:hover, .product .wd-buttons > div:hover, .product .wd-buttons > a:hover { background-color: var(--dilan-gold) !important; color: #FFFFFF !important; transform: scale(1.05) !important; /* gentler than 1.1 */ box-shadow: 0 4px 14px rgba(151, 119, 74, 0.3) !important; } /* ---------- Disable Quick Shop popup overlay ---------- */ /* When customer clicks cart for variable product, send them to product page instead of opening this modal */ .wd-quick-shop-modal, .wd-popup-quick-shop, .wd-quick-shop-popup, .mfp-content .wd-quick-shop, .wd-popup .wd-quick-shop, .wd-popup-content .wd-quick-shop { display: none !important; } .wd-quick-shop-link, .wd-product .wd-quick-shop-link, a.wd-quick-shop-link { pointer-events: none !important; display: none !important; } /* ---------- Color swatches on grid cards — show, refined style ---------- */ .products .product .wd-swatches-product, .product-grid-item .wd-swatches-product, .wd-product-grid-item .wd-swatches-product, .products .product .wd-swatches { display: flex !important; gap: 8px !important; justify-content: center !important; margin: 10px 0 6px 0 !important; padding: 0 !important; flex-wrap: wrap; } .wd-swatches-product .wd-swatch, .wd-swatches .wd-swatch { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 0 0 1px #FFFFFF inset !important; /* subtle ring */ cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; padding: 0 !important; margin: 0 !important; } .wd-swatches-product .wd-swatch:hover, .wd-swatches .wd-swatch:hover { transform: scale(1.2); box-shadow: 0 0 0 2px var(--dilan-gold) !important; } .wd-swatches-product .wd-swatch.wd-active, .wd-swatches .wd-swatch.wd-active { box-shadow: 0 0 0 2px var(--dilan-gold) !important; } /* Hide stock status / "out of stock" / leftover label squares on cards */ .products .product .stock, .products .product .wd-product-stock, .product-grid-item .wd-product-stock, .products .product .wd-out-of-stock-label, .products .product .wd-buttons-with-text > a, .products .product .product-image-link + .wd-add-btn-replace, .product-image-link ~ .wd-add-btn:not(.wd-style-icon) { display: none !important; } /* ---------- Hide quantity selector on product grid cards ---------- */ /* The +/- 1 widget belongs on the product detail page, not on shop cards */ .products .product .quantity, .products .product .wd-qty, .products .product .wd-quantity, .product-grid-item .quantity, .product-grid-item .wd-qty, .product-grid-item .wd-quantity, .wd-product .quantity, .wd-product .wd-qty, .products .quantity-button, .products .product input.qty, .products .product .quantity-control, .products .product .wd-quantity-control { display: none !important; } /* ---------- Equal-height product cards ---------- */ .products, ul.products, .wd-products-element .products, .swiper-wrapper { align-items: stretch !important; } .products .product, ul.products li.product, .swiper-slide.product, .product-grid-item { display: flex !important; flex-direction: column !important; height: 100% !important; } .products .product .product-wrapper, .product-grid-item .product-wrapper { flex: 1; display: flex !important; flex-direction: column; height: 100%; } /* Image container — let WoodMart handle dimensions */ /* ---------- Hide ratings on grid cards (cleaner luxury look) ---------- */ .products .product .star-rating, .product-grid-item .star-rating, .wd-product .star-rating, .products .star-rating, .products .product .wd-product-rating, .product-grid-item .wd-product-rating, .wd-rating, .woocommerce-product-rating { display: none !important; } /* ---------- Hide category text (cleaner — name + price only) ---------- */ .products .product .wd-product-cats, .product-grid-item .wd-product-cats, .wd-product .wd-product-cats, .product-grid-item .product_cat, .products .product .product_cat { display: none !important; } /* ---------- Force carousel arrows visible + styled ---------- */ .wd-nav-arrows { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .wd-nav-arrows .wd-prev, .wd-nav-arrows .wd-next, .wd-btn-arrow, .wd-prev, .wd-next, .swiper-button-prev, .swiper-button-next { display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; width: 56px !important; /* larger button */ height: 56px !important; border-radius: 50% !important; background: #FFFFFF !important; border: 1px solid rgba(184, 153, 104, 0.3) !important; color: var(--dilan-charcoal) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; transition: all .3s ease !important; font-size: 22px !important; /* larger icon */ } /* Make the icon character/SVG inside the arrow larger */ .wd-prev::before, .wd-next::before, .wd-prev::after, .wd-next::after, .wd-prev > i, .wd-next > i, .wd-prev svg, .wd-next svg { font-size: 22px !important; width: 22px !important; height: 22px !important; line-height: 1 !important; } .wd-nav-arrows .wd-prev, .swiper-button-prev, .wd-prev { left: 12px !important; right: auto !important; } .wd-nav-arrows .wd-next, .swiper-button-next, .wd-next { right: 12px !important; left: auto !important; } .wd-nav-arrows .wd-prev:hover, .wd-nav-arrows .wd-next:hover, .wd-prev:hover, .wd-next:hover { background: var(--dilan-gold) !important; color: #FFFFFF !important; border-color: var(--dilan-gold) !important; } .wd-nav-arrows .wd-prev.wd-disabled, .wd-nav-arrows .wd-next.wd-disabled { opacity: 0.4 !important; cursor: default; } /* Ensure the carousel container is positioned so absolute arrows work */ /* ===== NEW ARRIVALS carousel ONLY — arrows outside the card strip ===== Scoped to .elementor-widget-wd_products (the recent-products widget used by NEW ARRIVALS). Categories / Craft / Collection carousels are NOT touched here so they keep their original full-width layout. */ .elementor-widget-wd_products, .elementor-widget-wd_products .elementor-widget-container, .elementor-widget-wd_products .wd-carousel-container, .elementor-widget-wd_products .wd-products-element { position: relative !important; overflow: visible !important; } .elementor-widget-wd_products .wd-carousel { overflow: hidden !important; } .elementor-widget-wd_products .wd-btn-arrow.wd-prev { left: -55px !important; right: auto !important; z-index: 5 !important; } .elementor-widget-wd_products .wd-btn-arrow.wd-next { right: -55px !important; left: auto !important; z-index: 5 !important; } body.home .elementor-widget-wd_products { margin-left: 100px !important; margin-right: 100px !important; max-width: calc(100% - 200px) !important; } /* Hover icon stack MUST sit above carousel arrows */ .wd-product .wd-buttons, .wd-product-thumb .wd-buttons, .product-grid-item .wd-buttons, .wd-buttons .wd-action-btn, .wd-buttons .dilan-cart-btn, .dilan-cart-btn { z-index: 50 !important; } /* Coverflow override — needs visible overflow so the centre card can scale up */ .dilan-coverflow, .dilan-coverflow .wd-carousel-container, .dilan-coverflow .wd-carousel { overflow: visible !important; } body.home .dilan-coverflow.elementor-widget-wd_product_categories { padding-left: 90px !important; padding-right: 90px !important; } /* Carousel arrows — gold circular */ .wd-btn-arrow, .wd-prev-arrow, .wd-next-arrow, .swiper-button-prev, .swiper-button-next { background-color: rgba(255,255,255,0.95) !important; border: 1px solid var(--dilan-gold) !important; color: var(--dilan-gold) !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: background-color .3s, color .3s; } .wd-btn-arrow:hover, .wd-prev-arrow:hover, .wd-next-arrow:hover, .swiper-button-prev:hover, .swiper-button-next:hover { background-color: var(--dilan-gold) !important; color: #FFFFFF !important; } /* ---------- Green section title underline → gold ---------- */ /* Only targets the decorative line inside WoodMart section titles. */ .wd-section-title:after, .wd-section-title hr, .wd-section-title .liner-continer, .title-shop-section:after, .title-design-default:after, .title-design-stroke:after, .title-design-with-line:after, .title-design-underline:after { background-color: var(--dilan-gold) !important; background: var(--dilan-gold) !important; border-color: var(--dilan-gold) !important; } /* ---------- Close gap between section heading and content below ---------- */ /* Covers both old Elementor (.elementor-section) and new (.e-con) */ .elementor-section:has(.dilan-section-title), .e-con:has(.dilan-section-title), .elementor-element:has(> .elementor-widget-wrap > .dilan-section-title), .elementor-element:has(> .elementor-widget-container > .dilan-section-title) { padding-bottom: 0 !important; margin-bottom: 0 !important; } .elementor-section:has(.dilan-section-title) + .elementor-section, .e-con:has(.dilan-section-title) + .e-con, .elementor-element:has(.dilan-section-title) + .elementor-element { padding-top: 16px !important; margin-top: 0 !important; } /* The heading widget itself — tight margin */ .elementor-widget-heading.dilan-section-title { margin-bottom: 12px !important; padding-bottom: 0 !important; } .elementor-widget-heading.dilan-section-title .elementor-widget-container { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* The heading's H2 — no bottom margin */ .dilan-section-title .elementor-heading-title { margin-bottom: 0 !important; } /* ---------- Comfortable spacing between homepage sections ---------- */ body.home .elementor-section, body.home .e-con { padding-top: 48px !important; padding-bottom: 48px !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ...but the hero slider section must be flush (this 48px bottom padding was showing the ivory page background as a band UNDER the banner). :has(.wd-slider) targets the hero container whatever its Elementor ID. */ body.home .e-con:has(.wd-slider), body.home .elementor-section:has(.wd-slider) { padding-top: 0 !important; padding-bottom: 0 !important; } /* Hero section flush against header (no gap below header) */ body.home .dilan-hero-section, body.home .elementor-section:first-child, body.home > .elementor > .e-con:first-child { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* Tighten the gap right after the hero — usually big white space */ body.home .dilan-hero-section + .e-con, body.home .dilan-hero-section + .elementor-section { padding-top: 24px !important; } /* Hero — no top padding */ body.home .elementor-section:first-of-type, body.home .e-con:first-of-type { padding-top: 0 !important; } /* Containers that just have a heading inside — minimal bottom padding */ body.home .elementor-section:has(> .elementor-container > .elementor-row > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading:only-child), body.home .e-con:has(> .e-con-inner > .elementor-widget-heading:only-child), body.home .e-con:has(> .elementor-widget-heading:only-child) { padding-top: 32px !important; padding-bottom: 4px !important; } /* Sections with banners — also tight */ body.home .e-con:has(.wd_banner), body.home .elementor-section:has(.wd_banner) { padding-top: 12px !important; padding-bottom: 24px !important; } /* ====== Hero banner — show the FULL image on mobile (desktop-wide image was cropping) ====== */ @media (max-width: 768px) { body.home .dilan-hero-section img, body.home .dilan-hero-section .wd-banner img, body.home .dilan-hero-section .banner-image img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* if the hero image is a CSS background instead of an */ body.home .dilan-hero-section, body.home .dilan-hero-section .e-con, body.home .dilan-hero-section .e-con-inner, body.home .dilan-hero-section .elementor-widget-image, body.home .dilan-hero-section .wd-banner, body.home .dilan-hero-section .banner-image { min-height: 0 !important; height: auto !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } } /* Sections with products carousel — tight */ body.home .e-con:has(.wd-products-element), body.home .elementor-section:has(.wd-products-element) { padding-top: 12px !important; padding-bottom: 24px !important; } /* Containers with the dilan-no-counts class (Collections) — tight */ body.home .e-con.dilan-no-counts, body.home .elementor-section.dilan-no-counts { padding-top: 24px !important; padding-bottom: 24px !important; } /* ============================================================ SHOP BY CRAFT — Mortantra coverflow style Center card large, side cards scaled down + faded, overlap ============================================================ */ .dilan-coverflow .wd-carousel-wrap, .dilan-coverflow .swiper-wrapper { align-items: center !important; padding: 30px 0 !important; overflow: visible !important; } .dilan-coverflow .wd-carousel, .dilan-coverflow .swiper { overflow: visible !important; } .dilan-coverflow .wd-carousel-item, .dilan-coverflow .swiper-slide { transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease !important; transform-origin: center center !important; transform: scale(0.78) !important; opacity: 0.5 !important; z-index: 1; } /* Prev/next slides — medium scale */ .dilan-coverflow .wd-carousel-item.wd-slide-prev, .dilan-coverflow .wd-carousel-item.wd-slide-next, .dilan-coverflow .swiper-slide-prev, .dilan-coverflow .swiper-slide-next { transform: scale(0.88) !important; opacity: 0.85 !important; z-index: 2; } /* Active center slide — full scale */ .dilan-coverflow .wd-carousel-item.wd-active, .dilan-coverflow .wd-carousel-item.wd-slide-visible.wd-full-visible:nth-child(odd):not(.wd-slide-prev):not(.wd-slide-next), .dilan-coverflow .swiper-slide-active { transform: scale(1.08) !important; opacity: 1 !important; z-index: 5; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important; } /* Coverflow cards — taller portrait, rounded corners on EVERY wrapper so the radius is visible regardless of which element holds the background image */ .dilan-coverflow .wd-carousel-item, .dilan-coverflow .swiper-slide, .dilan-coverflow .wd-cat, .dilan-coverflow .wd-cat.cat-design-default, .dilan-coverflow .category-grid-item, .dilan-coverflow .wd-cat-inner, .dilan-coverflow .wd-entities-image, .dilan-coverflow .wd-cat > a, .dilan-coverflow .wd-cat a, .dilan-coverflow .wd-cat img, .dilan-coverflow .wd-cat picture { border-radius: 18px !important; overflow: hidden !important; } .dilan-coverflow .wd-cat.cat-design-default, .dilan-coverflow .category-grid-item { aspect-ratio: 3 / 4 !important; background-color: transparent !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important; } /* Stronger shadow + slightly larger radius on the active centre card */ .dilan-coverflow .wd-carousel-item.wd-active, .dilan-coverflow .wd-carousel-item.wd-active .wd-cat, .dilan-coverflow .swiper-slide-active, .dilan-coverflow .swiper-slide-active .wd-cat { border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important; overflow: hidden !important; } /* Reduce padding between slides for overlap */ .dilan-coverflow .wd-carousel, .dilan-coverflow .swiper-wrapper { gap: 0 !important; } /* ============================================================ Instagram Carousel — match WoodMart demo (5 images, no gap) ============================================================ */ .elementor-widget-wd_instagram .wd-insta-item, .elementor-widget-wd_instagram .wd-carousel-item { padding: 0 !important; margin: 0 !important; } .elementor-widget-wd_instagram .wd-insta-item img, .elementor-widget-wd_instagram .wd-carousel-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: 1 / 1; display: block; } .elementor-widget-wd_instagram .wd-carousel-wrap { gap: 0 !important; } /* Full-width Instagram section */ .elementor-widget-wd_instagram { width: 100% !important; max-width: 100% !important; } /* ============================================================ SHOP BY BUDGET — Instagram-carousel style (5 edge-to-edge, no gap) ============================================================ */ .dilan-budget-row, .dilan-budget-row > .e-con-inner { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 0 !important; /* ZERO gap — cards touch */ width: 100% !important; align-items: stretch !important; padding: 0 !important; margin: 0 !important; } /* HARD-LOCKED equal-size budget cells using CSS GRID (Elementor renders the row as e-grid; we work with that rather than fighting it). */ .dilan-budget-row, .dilan-budget-row.e-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; grid-auto-rows: 20vw !important; /* each row is 20vw tall = square cells */ grid-template-rows: 20vw !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; /* break out of centred container */ margin-right: 0 !important; padding: 0 !important; border: 0 !important; align-items: stretch !important; justify-items: stretch !important; } /* Every direct child fills its grid cell exactly — ignore Elementor's __width-initial variable and any intrinsic content sizing */ .dilan-budget-row > .e-con-inner > .e-con, .dilan-budget-row > .e-con, .dilan-budget-row > .elementor-element, .dilan-budget-row > .elementor-widget, .dilan-budget-row > .elementor-widget-wd_banner, .dilan-budget-row.e-grid > *, .dilan-budget-row > * { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 20vw !important; min-height: 20vw !important; max-height: 20vw !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; box-sizing: border-box !important; display: block !important; position: relative !important; gap: 0 !important; /* Override Elementor's container-widget-width variable */ --container-widget-width: 100% !important; --container-widget-flex-grow: 0 !important; flex: unset !important; align-self: stretch !important; justify-self: stretch !important; } /* NUKE every Elementor variable that injects gap/padding into the budget section */ .dilan-budget-section, .dilan-budget-section .e-con, .dilan-budget-section .e-con-inner, .dilan-budget-row, .dilan-budget-row .e-con, .dilan-budget-row .e-con-inner, .dilan-budget-row-wrap, .dilan-budget-row-wrap .e-con, .dilan-budget-row-wrap .e-con-inner { --gap: 0 !important; --gap-default: 0 !important; --row-gap: 0 !important; --column-gap: 0 !important; --padding-top: 0 !important; --padding-right: 0 !important; --padding-bottom: 0 !important; --padding-left: 0 !important; --margin-top: 0 !important; --margin-right: 0 !important; --margin-bottom: 0 !important; --margin-left: 0 !important; --container-default-padding-top: 0 !important; --container-default-padding-right: 0 !important; --container-default-padding-bottom: 0 !important; --container-default-padding-left: 0 !important; --widgets-spacing: 0 !important; --widgets-spacing-column: 0 !important; --widgets-spacing-row: 0 !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Banner widget itself — kill internal padding that creates visible white frame */ .dilan-budget-row .elementor-widget-wd_banner, .dilan-budget-row .elementor-widget, .dilan-budget-row .elementor-element { --margin-top: 0 !important; --margin-right: 0 !important; --margin-bottom: 0 !important; --margin-left: 0 !important; --padding-top: 0 !important; --padding-right: 0 !important; --padding-bottom: 0 !important; --padding-left: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } /* Every inner wrapper fills the locked cell completely */ .dilan-budget-row > * .elementor-widget-container, .dilan-budget-row > * .elementor-widget-wd_banner, .dilan-budget-row > * .promo-banner, .dilan-budget-row > * .wd-banner, .dilan-budget-row > * .banner-image, .dilan-budget-row > * .main-wrapp-img, .dilan-budget-row > * .content-banner, .dilan-budget-row > * .banner-inner, .dilan-budget-row > * a.promo-banner, .dilan-budget-row > * a { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: auto !important; /* parent already locked */ padding: 0 !important; margin: 0 !important; display: block !important; position: relative !important; overflow: hidden !important; } /* The actual image — cover-fit inside the locked square */ .dilan-budget-row > * img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* Responsive: 5 → 3 → 2 → 1 columns on smaller screens */ @media (max-width: 1024px) { .dilan-budget-row > * { flex: 0 0 33.333% !important; width: 33.333% !important; min-width: 33.333% !important; max-width: 33.333% !important; height: 33.333vw !important; min-height: 33.333vw !important; max-height: 33.333vw !important; } } @media (max-width: 768px) { .dilan-budget-row > * { flex: 0 0 50% !important; width: 50% !important; min-width: 50% !important; max-width: 50% !important; height: 50vw !important; min-height: 50vw !important; max-height: 50vw !important; } } @media (max-width: 480px) { .dilan-budget-row > * { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100vw !important; min-height: 100vw !important; max-height: 100vw !important; } } .dilan-budget-row .elementor-widget-wd_banner, .dilan-budget-row .elementor-widget-container, .dilan-budget-row .elementor-element, .dilan-budget-row .promo-banner, .dilan-budget-row .wd-banner, .dilan-budget-row .banner-image, .dilan-budget-row .main-wrapp-img, .dilan-budget-row .content-banner, .dilan-budget-row a { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: unset !important; } /* Banner widget itself must fill its cell — Elementor defaults to inline-block */ .dilan-budget-row .elementor-widget-wd_banner { display: block !important; } /* Intermediate wrap container between the heading and the banner row — was constraining width and pushing the row off-centre. Force full width. */ .dilan-budget-row-wrap, .dilan-budget-row-wrap > .e-con-inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* When the row is set as Flex (via baked Elementor settings), enforce 5 equal children at 20% each so banners always touch edge-to-edge. */ .dilan-budget-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Equal share: every direct child takes exactly 1 of N regardless of how many siblings exist (flex-basis 0 + grow 1 ignores intrinsic size). */ .dilan-budget-row > * { flex: 1 1 0 !important; width: 0 !important; /* flex-basis 0 — equal split */ min-width: 0 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Budget labels — WHITE text with soft shadow so it stays readable on any photo */ .dilan-budget-row .banner-title, .dilan-budget-row .promo-banner .banner-title, .dilan-budget-row .wd-banner .banner-title, .dilan-budget-row .banner-title * { color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* Hide EVERY non-essential element inside budget banners so all 5 cards render only the image + centred title (identical structure → identical size). */ .dilan-budget-row .banner-btn, .dilan-budget-row .btn-link, .dilan-budget-row .wd-banner-btn, .dilan-budget-row .wd-banner .btn, .dilan-budget-row .promo-banner .btn, .dilan-budget-row .promo-banner .btn-shop, .dilan-budget-row .btn-promo-banner, .dilan-budget-row .wd-banner-design-default .btn, .dilan-budget-row .wd-action-btn, .dilan-budget-row .banner-subtitle, .dilan-budget-row .banner-description, .dilan-budget-row .promo-banner .banner-inner > *:not(.banner-title):not(.banner-image):not(.main-wrapp-img) { display: none !important; } /* ---- Shop by Budget — position + hover only (band + image-fit are in the FINAL block) ---- */ .dilan-budget-row .wd-banner, .dilan-budget-row .promo-banner { position: relative !important; } .dilan-budget-row .wd-banner img, .dilan-budget-row .promo-banner img { transition: transform 3s ease !important; } .dilan-budget-row .wd-banner:hover img, .dilan-budget-row .promo-banner:hover img { transform: scale(1.05) !important; } /* Equal height across all 5 cards regardless of internal content */ .dilan-budget-row > .elementor-element, .dilan-budget-row > .e-con, .dilan-budget-row .elementor-widget-wd_banner, .dilan-budget-row .elementor-widget-container { height: auto !important; align-self: stretch !important; } /* Lock the visible card area to a strict 1:1 aspect ratio, no overflow */ .dilan-budget-row .promo-banner, .dilan-budget-row .wd-banner, .dilan-budget-row .banner-image, .dilan-budget-row .main-wrapp-img, .dilan-budget-row .content-banner { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } /* Each banner's inner image MUST cover the 1:1 cell — kill any intrinsic sizing */ .dilan-budget-row .promo-banner, .dilan-budget-row .wd-banner, .dilan-budget-row .banner-image, .dilan-budget-row .main-wrapp-img, .dilan-budget-row .content-banner { width: 100% !important; max-width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; } .dilan-budget-row img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; max-width: none !important; } /* Square aspect ratio + cover image, like Instagram demo */ .dilan-budget-row .promo-banner, .dilan-budget-row .wd-banner { aspect-ratio: 1 / 1 !important; max-height: none !important; overflow: hidden !important; border-radius: 0 !important; } .dilan-budget-row .promo-banner img, .dilan-budget-row .promo-banner .banner-image img, .dilan-budget-row .main-wrapp-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Make the budget section edge-to-edge like Instagram */ body.home .dilan-budget-section, body.home [class*="dilan-budget-section"] { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Budget banner — smaller, more compact */ .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .promo-banner, .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .wd-banner { aspect-ratio: 4 / 5; min-height: auto !important; max-height: 360px; overflow: hidden; } .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .banner-title { font-size: clamp(14px, 1.1vw, 18px) !important; } .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .banner-subtitle { font-size: clamp(10px, 0.8vw, 12px) !important; } @media (max-width: 1200px) { .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) { grid-template-columns: repeat(5, 1fr) !important; /* still 5 */ gap: 8px !important; } } @media (max-width: 900px) { .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) { grid-template-columns: 1fr !important; } } .dilan-budget-row > .e-con, .dilan-budget-row > .elementor-element { width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: unset !important; } @media (max-width: 1024px) { .dilan-budget-section .dilan-budget-row, .dilan-budget-row { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .dilan-budget-section .dilan-budget-row, .dilan-budget-row { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .dilan-budget-section .dilan-budget-row, .dilan-budget-row { grid-template-columns: 1fr !important; } } /* ====== Shop by Budget — FINAL clean block (placed last, wins by source order) ====== (1) Full image, no crop: object-fit contain + teal backdrop. Height applies to the IMAGE box ONLY — NOT .content-banner (forcing the label wrapper to full height collapsed the text). */ /* Force the WHOLE image chain (incl. the Elementor wrappers that were constraining it) to a PORTRAIT box (20vw wide x 24vw tall ≈ the photo's 5:6 ratio). Then object-fit: cover fills it: full image, no square-crop, no empty teal gap. Label wrappers are NOT forced (kept above). */ /* Height on the whole chain (tile + Elementor wrappers + banner). The TILE keeps its flex width. */ html body .dilan-budget-row > *, html body .dilan-budget-row .e-con, html body .dilan-budget-row .e-con-inner, html body .dilan-budget-row .elementor-element, html body .dilan-budget-row .elementor-widget-wd_banner, html body .dilan-budget-row .elementor-widget-container, html body .dilan-budget-row .wd-banner, html body .dilan-budget-row .promo-banner, html body .dilan-budget-row .banner-image, html body .dilan-budget-row .main-wrapp-img, html body .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .wd-banner, html body .e-con-inner:has(> .e-con > .elementor-widget-wd_banner) .promo-banner { aspect-ratio: auto !important; height: 24vw !important; min-height: 24vw !important; max-height: 24vw !important; overflow: hidden !important; background: #023b42 !important; position: relative !important; } /* FULL WIDTH on the inner image wrappers (NOT the tile — that would break the 5 columns). This is what was missing: the image container was ~60% wide, leaving teal on the right. */ html body .dilan-budget-row .e-con, html body .dilan-budget-row .e-con-inner, html body .dilan-budget-row .elementor-element, html body .dilan-budget-row .elementor-widget-wd_banner, html body .dilan-budget-row .elementor-widget-container, html body .dilan-budget-row .wd-banner, html body .dilan-budget-row .promo-banner, html body .dilan-budget-row .banner-image, html body .dilan-budget-row .main-wrapp-img, html body .dilan-budget-row .banner-inner, html body .dilan-budget-row a { width: 100% !important; max-width: 100% !important; min-width: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; display: block !important; } html body .dilan-budget-row img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; } /* (2) The label wrapper sizes to its content (free it from the 1:1 / full-height locks) */ html body .dilan-budget-row .content-banner, html body .dilan-budget-row .banner-inner, html body .dilan-budget-row .wd-banner-content { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; z-index: 3 !important; text-align: center !important; } /* (3) Light ivory band — ONE line, hugs the text, never collapses */ html body .dilan-budget-row .banner-title { display: inline-block !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; white-space: nowrap !important; background: rgba(245, 241, 234, 0.92) !important; color: #2B2118 !important; -webkit-text-fill-color: #2B2118 !important; text-shadow: none !important; font-weight: 600 !important; letter-spacing: .05em !important; line-height: 1.2 !important; font-size: clamp(11px, 1vw, 15px) !important; padding: 6px 16px !important; border-radius: 4px !important; box-sizing: border-box !important; } html body .dilan-budget-row .banner-title * { white-space: nowrap !important; color: #2B2118 !important; -webkit-text-fill-color: #2B2118 !important; } html body .dilan-budget-row .banner-title br { display: none !important; } /* (heights are handled by aspect-ratio: 1146/1373 above — no fixed vw heights needed) */ /* ====== Shop by Budget — MOBILE/TABLET carousel: ONE tile at a time, swipeable ====== The row is flexbox with fixed flex:1 1 0, so it never drops to fewer columns -> 5 cramped tiles with clipped labels. Below 1024px, make it a horizontal scroll-snap carousel (one per screen, with a small peek of the next), so the full image + full label show. */ @media (max-width: 1024px) { html body .dilan-budget-row, html body .dilan-budget-row.e-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; grid-template-columns: none !important; grid-auto-rows: auto !important; grid-template-rows: none !important; gap: 10px !important; padding: 0 7vw !important; /* centres each snapped tile, shows a peek */ scroll-padding: 0 7vw !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; scrollbar-width: none !important; } html body .dilan-budget-row::-webkit-scrollbar { display: none !important; } html body .dilan-budget-row > * { flex: 0 0 86vw !important; width: 86vw !important; min-width: 86vw !important; max-width: 86vw !important; height: auto !important; scroll-snap-align: center !important; border-radius: 8px !important; overflow: hidden !important; } /* height comes from aspect-ratio (86vw wide -> ~103vw tall), so the image fills with no gap */ } /* ---------- Force Shop by Categories / Collection / Craft into horizontal rows ---------- */ /* Any section that contains 3+ wd_banner widgets should display them in a row */ body.home .elementor-section:has(.wd_banner + .wd_banner), body.home .e-con:has(.elementor-widget-wd_banner + .elementor-widget-wd_banner) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: space-between !important; align-items: stretch !important; } /* When wd_banners are inside column containers, those columns should sit in a row */ body.home .e-con > .e-con:has(.wd_banner), body.home .e-con > .e-con:has(.elementor-widget-wd_banner) { flex: 1 1 calc(33% - 12px) !important; min-width: 280px !important; max-width: 100% !important; } /* Tablet — 2 per row */ @media (max-width: 1024px) { body.home .e-con > .e-con:has(.wd_banner), body.home .e-con > .e-con:has(.elementor-widget-wd_banner) { flex: 1 1 calc(50% - 8px) !important; } } /* Mobile — 1 per row */ @media (max-width: 600px) { body.home .e-con > .e-con:has(.wd_banner), body.home .e-con > .e-con:has(.elementor-widget-wd_banner) { flex: 1 1 100% !important; } } /* ============================================================ Shop by Category cards — clean Mortantra-style (Edge-to-edge stretching removed — was breaking layouts) ============================================================ */ /* Each category card */ .wd-products-element-categories .wd-product-cat, .product-category, .wc-block-product-categories-list-item, .wd-cat-design-default .wd-product-cat { text-align: center !important; background: transparent !important; border: none !important; padding: 0 !important; transition: transform .3s ease; } .wd-products-element-categories .wd-product-cat:hover, .product-category:hover { transform: translateY(-4px); } /* Category image — circular thumbnail */ .wd-product-cat img, .product-category img, .wd-cat-design-default img { border-radius: 50% !important; aspect-ratio: 1 / 1; object-fit: cover; width: 100% !important; max-width: 180px; margin: 0 auto 12px !important; transition: box-shadow .3s ease; box-shadow: 0 3px 12px rgba(43, 33, 24, 0.08); } .wd-product-cat:hover img, .product-category:hover img { box-shadow: 0 6px 18px rgba(184, 153, 104, 0.25); } /* Category name */ .wd-product-cat .wd-entities-title, .wd-product-cat h3, .product-category h2, .product-category h3, .wc-block-product-categories-list-item__link { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: 16px !important; font-weight: 500 !important; color: var(--dilan-charcoal) !important; letter-spacing: 0.05em !important; margin: 8px 0 4px !important; text-decoration: none !important; text-transform: uppercase; } .wd-product-cat:hover .wd-entities-title, .product-category:hover h2, .product-category:hover h3 { color: var(--dilan-gold) !important; } /* Product count */ .wd-product-cat .count, .wd-product-cat .wd-cat-count, .product-category .count, mark.count { display: inline-block !important; font-size: 12px !important; font-weight: 400 !important; color: var(--dilan-gold) !important; background: transparent !important; border: none !important; padding: 0 !important; letter-spacing: 0.05em; margin-top: 2px; } .wd-product-cat .count::before, .product-category .count::before { content: ""; } .wd-product-cat .count::after, .product-category .count::after { content: " items"; } /* When section has the "no-counts" class, hide product counts (for Collections) */ .dilan-no-counts .wd-product-cat .count, .dilan-no-counts .wd-product-cat .wd-cat-count, .dilan-no-counts .product-category .count, .dilan-no-counts mark.count { display: none !important; } /* Hide the product count ("N products") on all category / collection cards */ html body .wd-cat .wd-cat-count, html body .category-grid-item .wd-cat-count, html body .wd-cat-content .wd-cat-count { display: none !important; } /* Coverflow CSS removed — it was conflicting with categories carousel layout. Use WoodMart's built-in carousel settings instead. */ /* ============================================================ Category cards — match WoodMart "Carousel of Categories" demo Apply to SHOP BY CATEGORIES, COLLECTION, CRAFT ============================================================ */ .wd-cats .category-grid-item, .wd-cats-element .category-grid-item, .wd-cat.cat-design-default { position: relative !important; overflow: hidden !important; border-radius: 0 !important; aspect-ratio: 1 / 1 !important; /* square cards like demo */ background-color: #f5f5f5 !important; /* light gray like demo */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: box-shadow .3s ease, transform .3s ease; } .wd-cats .category-grid-item:hover, .wd-cat.cat-design-default:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .wd-cats .wd-cat-inner, .wd-cat .wrapp-category { height: 100% !important; width: 100% !important; position: relative !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .wd-cat .wd-cat-thumb, .wd-cat .category-image-wrapp { height: 100% !important; width: 100% !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; } .wd-cat .wd-cat-image, .wd-cat .category-image, .wd-cat .wd-cat-image a, .wd-cat .category-image a { display: block !important; height: 100% !important; width: 100% !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center; } .wd-cat .wd-cat-image img, .wd-cat .category-image img, .wd-cat img.wp-post-image { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* Category name overlay — Mortantra-style dark framed label, centered */ .wd-cat .wd-cat-content { position: absolute !important; bottom: 32px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 3; background: transparent !important; text-align: center !important; padding: 0 !important; min-width: 60%; max-width: 85%; } /* ============================================================ CATEGORY-STYLE LABEL PILLS — three variants - .dilan-categories-section → large pill (22px) — SHOP BY CATEGORIES - .dilan-collection-section → small pill (14px) — SHOP BY COLLECTION - .dilan-coverflow → small pill (14px) — SHOP BY CRAFT ============================================================ */ /* Pill-style label on dark charcoal — SHOP BY CATEGORIES (large). */ html body .dilan-categories-section .wd-cat .wd-entities-title, html body .dilan-categories-section .wd-cat h3.wd-entities-title, html body .dilan-categories-section .category-grid-item .wd-entities-title, html body .dilan-categories-widget .wd-entities-title { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #FFFFFF !important; background: rgba(43, 33, 24, 0.72) !important; padding: 9px 20px !important; white-space: nowrap !important; margin: 0 !important; display: inline-block !important; position: relative !important; border: none !important; border-radius: 999px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); line-height: 1.2 !important; text-align: center !important; } /* ---------- Home "Shop by Categories" carousel — ROUNDED pill label ---------- The pill styling above is scoped to .dilan-categories-section, a class added by JS (add-cart-near-price.js) that keys off the heading text. That tagging is not landing on this section, so the label fell through to the square-cornered nameplate meant for COLLECTION / CRAFT. Target the Elementor element directly (.elementor-element-a881297 = SHOP BY CATEGORIES, same id used by the columns and link overrides in dilan-customizations.php) so the rounded pill renders whether or not the JS runs. */ html body .elementor-element-a881297 .wd-cat .wd-entities-title, html body .elementor-element-a881297 .wd-cat h3.wd-entities-title, html body .elementor-element-a881297 .category-grid-item .wd-entities-title { display: inline-block !important; width: auto !important; max-width: 88% !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: rgba(43, 33, 24, 0.72) !important; padding: 9px 20px !important; margin: 0 !important; border: none !important; border-radius: 999px !important; /* fully rounded, not the 6px plate */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; } /* Wrapper: carries NO background of its own (only the pill does), and spans the full card so the pill can be centred with text-align. The inherited rule positions this with left:50% + translateX(-50%) and lets the box shrink-to-fit — which drifts off-centre once min-width is removed, so the label sat slightly left or right of the card. Pinning left/right to 0 and dropping the transform makes centring exact at any label width. */ html body .elementor-element-a881297 .wd-cat .wd-cat-content { left: 0 !important; right: 0 !important; transform: none !important; text-align: center !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; min-width: 0 !important; max-width: none !important; } /* ---------- Home carousels: FIT the whole photo inside the card ---------- The artwork is portrait (571x800) while the card box is near-square, so object-fit: cover centre-cropped roughly 28% off the top AND bottom — exactly where the necklace / pendant / mangalsutra sits, so every piece looked chopped. Use `contain` rather than reshaping the card: the full frame is always visible and the card KEEPS ITS CURRENT HEIGHT. The spare space either side is filled with the site ivory so it reads as a mount, not a gap. */ /* SQUARE cards. A fixed pixel height made the card's SHAPE depend on the viewport (743x360 = 2.06 at 1920px wide, 576x360 = 1.60 at 1280) while the artwork is a fixed 0.71 portrait — so the crop changed as the window resized and no single object-position could suit every category (earrings sit high in frame, mangalsutra and anklets low). A fixed 1:1 makes the card shape constant at every width, so square artwork lands pixel-perfect with nothing cropped. */ html body .elementor-element-a881297 .wd-cat, html body .elementor-element-a881297 .wd-cat .wd-cat-image, html body .elementor-element-a881297 .wd-cat .wd-cat-image a, html body .elementor-element-d7e1786 .wd-cat, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image a { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } @media (max-width: 1024px) { html body .elementor-element-a881297 .wd-cat, html body .elementor-element-a881297 .wd-cat .wd-cat-image, html body .elementor-element-a881297 .wd-cat .wd-cat-image a, html body .elementor-element-d7e1786 .wd-cat, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image a { height: 300px !important; max-height: 300px !important; } } @media (max-width: 600px) { html body .elementor-element-a881297 .wd-cat, html body .elementor-element-a881297 .wd-cat .wd-cat-image, html body .elementor-element-a881297 .wd-cat .wd-cat-image a, html body .elementor-element-d7e1786 .wd-cat, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image a { height: 260px !important; max-height: 260px !important; } } html body .elementor-element-a881297 .wd-cat .wd-cat-image, html body .elementor-element-a881297 .wd-cat .category-image, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image, html body .elementor-element-d7e1786 .wd-cat .category-image { background: #F7F1E6 !important; overflow: hidden !important; } html body .elementor-element-a881297 .wd-cat .wd-cat-image img, html body .elementor-element-a881297 .wd-cat .category-image img, html body .elementor-element-d7e1786 .wd-cat .wd-cat-image img, html body .elementor-element-d7e1786 .wd-cat .category-image img { width: 100% !important; height: 100% !important; /* CRITICAL: older rules below force the img to min-height 420px (<=1024px) and 360px (<=600px). Inside a shorter card with overflow:hidden that pushes the image past the box and CLIPS it — which cancels `contain` and is why the photo still looked cut on tablet/mobile widths. Release both bounds. */ min-height: 0 !important; max-height: 100% !important; /* Fill the card edge-to-edge — `contain` left ivory strips down both sides because the artwork is portrait in a short, wide frame. `cover` removes them, which means cropping vertically; bias the crop DOWNWARD (68% rather than centre) so what's trimmed is the model's forehead and hair, not the necklace / pendant / mangalsutra sitting in the lower half. */ object-fit: cover !important; object-position: center 60% !important; background: #F7F1E6 !important; } /* ---------- Tighten the cream gap under the carousels / View All ---------- Every homepage section carries 48px top+bottom padding for rhythm, and the View All button widget adds its own margin on top of that. Under these two carousels it stacked into a deep empty cream band. Trim the section padding and pull the button up close to the cards. */ html body.home .e-con:has(.elementor-element-a881297), html body.home .e-con:has(.elementor-element-d7e1786) { padding-top: 26px !important; padding-bottom: 18px !important; } html body.home .e-con:has(.elementor-element-a881297) .elementor-widget-button, html body.home .e-con:has(.elementor-element-d7e1786) .elementor-widget-button, html body.home .e-con:has(.elementor-element-a881297) .elementor-widget-wd_button, html body.home .e-con:has(.elementor-element-d7e1786) .elementor-widget-wd_button { margin-top: 2px !important; margin-bottom: 0 !important; } /* the carousel itself shouldn't add a trailing gap either */ html body .elementor-element-a881297 .wd-carousel-container, html body .elementor-element-d7e1786 .wd-carousel-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } .wd-cat .wd-entities-title a, .wd-cat h3.wd-entities-title a { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-decoration: none !important; } /* SHOP BY COLLECTION + SHOP BY CRAFT — wide nameplate banner style. Matches the PICHWAI COLLECTION reference: dark translucent rectangle spanning most of the card width with letter-spaced uppercase serif text. (CRAFT-specific override below removes the rounded corners.) */ html body .dilan-collection-section .wd-cat .wd-entities-title, html body .dilan-collection-section .wd-cat h3.wd-entities-title, html body .dilan-collection-section .category-grid-item .wd-entities-title, html body .dilan-collection-widget .wd-entities-title, html body .dilan-coverflow .wd-cat .wd-entities-title, html body .dilan-coverflow .wd-cat h3.wd-entities-title, html body .dilan-coverflow .category-grid-item .wd-entities-title, html body .dilan-coverflow-widget .wd-entities-title { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #FFFFFF !important; background: rgba(43, 33, 24, 0.72) !important; padding: 12px 28px !important; margin: 0 auto !important; display: inline-block !important; /* hugs the text width */ width: auto !important; /* size to content */ max-width: 88% !important; /* but never exceed card width */ position: relative !important; border: none !important; border-radius: 6px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } /* Wrapping content — center the inline-block label */ html body .dilan-collection-section .wd-cat .wd-cat-content, html body .dilan-coverflow .wd-cat .wd-cat-content { left: 50% !important; transform: translateX(-50%) !important; width: 88% !important; text-align: center !important; } /* CRAFT + COLLECTION: smaller text, wrap-friendly so longer names fit. CRAFT also gets sharp rectangular corners (no rounding). */ html body .dilan-coverflow .wd-cat .wd-entities-title, html body .dilan-coverflow .wd-cat h3.wd-entities-title, html body .dilan-coverflow .category-grid-item .wd-entities-title, html body .dilan-coverflow-widget .wd-entities-title, html body .dilan-collection-section .wd-cat .wd-entities-title, html body .dilan-collection-section .wd-cat h3.wd-entities-title, html body .dilan-collection-section .category-grid-item .wd-entities-title, html body .dilan-collection-widget .wd-entities-title { font-size: 13px !important; letter-spacing: 0.14em !important; padding: 9px 18px !important; white-space: nowrap !important; /* keep label on a single line */ text-overflow: clip !important; max-width: none !important; /* size to content */ overflow: visible !important; } /* CRAFT only — sharp rectangular corners (no rounding) */ html body .dilan-coverflow .wd-cat .wd-entities-title, html body .dilan-coverflow .wd-cat h3.wd-entities-title, html body .dilan-coverflow .category-grid-item .wd-entities-title, html body .dilan-coverflow-widget .wd-entities-title { border-radius: 0 !important; } .wd-cat .wd-cat-count { color: rgba(255, 255, 255, 0.85) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.08em; margin-top: 8px !important; background: rgba(43, 33, 24, 0.7); padding: 4px 12px; display: inline-block; } .wd-cat .wd-cat-count a { color: inherit !important; text-decoration: none !important; } /* Tablet — slightly shorter */ @media (max-width: 1024px) { .wd-cats .category-grid-item, .wd-cat.cat-design-default { min-height: 420px !important; } .wd-cat .wd-cat-image img { min-height: 420px !important; } } /* Mobile */ @media (max-width: 600px) { .wd-cats .category-grid-item, .wd-cat.cat-design-default { min-height: 360px !important; } .wd-cat .wd-cat-image img { min-height: 360px !important; } } /* ---------- (Removed aggressive edge-to-edge rules — they broke layouts) ---------- */ /* Allow carousel arrows to sit just outside the cards */ .wd-products-element .wd-carousel-container, .products .wd-carousel-container { overflow: visible !important; } /* ---------- Home hero slider — full-bleed, sized to the banner's own ratio ---------- The container is Elementor "boxed" (~1400px) + WoodMart `wd-section-str` stretch, which left ivory bands at the left/right of a full-width banner. Force the whole chain to the full viewport width. The exact HEIGHT (= the banner's aspect ratio) is applied by hero-banner-fit.js, because WoodMart writes an inline `height:...px !important` on each slide that an external stylesheet cannot override. These rules are the CSS baseline; the JS makes the width pixel-exact (it also beats WoodMart's inline stretch margins). */ body.home .e-con:has(.wd-slider) { max-width: 100vw !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } body.home .wd-slider .e-con-inner, body.home .elementor-widget:has(.wd-slider), body.home .elementor-widget:has(.wd-slider) > .elementor-widget-container, body.home .wd-slider, body.home .wd-slider .wd-carousel-wrap, body.home .wd-slider .wd-carousel-inner, body.home .wd-slider .wd-carousel { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; padding: 0 !important; } body.home .wd-slider .wd-slide, body.home .wd-slider-wrap .wd-slide { width: 100% !important; overflow: hidden; background-color: var(--dilan-ivory); } body.home .wd-slider .wd-slide img, body.home .wd-slider-wrap .wd-slide img, body.home .wd-slider .wd-slide .wd-fill, body.home .wd-slider-wrap .wd-slide .wd-fill { object-fit: cover !important; object-position: center center !important; width: 100% !important; height: 100% !important; } /* ---------- Category / promo banner cards — fix overflow text ---------- */ /* "Sofa Lounge", "Side Tables", "Chair Orgone" text was overflowing their container boxes because the demo used fixed font sizes that don't fit at this column width. Make the text fluid. */ .promo-banner, .wd-banner, .banner-content, .wd-banner-text, .wd-promo-banner { overflow: visible; word-wrap: break-word; overflow-wrap: break-word; } .promo-banner .banner-title, .wd-banner .banner-title, .wd-banner h2, .wd-banner h3, .wd-banner h4, .wd-banner-title, .promo-banner h2, .promo-banner h3, .promo-banner h4 { font-size: clamp(18px, 2vw, 32px) !important; line-height: 1.2 !important; word-wrap: break-word; overflow-wrap: break-word; white-space: normal !important; max-width: 100%; padding: 0 8px; } .promo-banner .banner-subtitle, .wd-banner .banner-subtitle, .wd-banner p, .promo-banner p { font-size: clamp(12px, 1.2vw, 16px) !important; line-height: 1.4 !important; word-wrap: break-word; max-width: 100%; padding: 0 8px; } /* Tighter on small columns */ @media (max-width: 768px) { .promo-banner .banner-title, .wd-banner .banner-title, .wd-banner-title, .promo-banner h2, .promo-banner h3 { font-size: clamp(16px, 4vw, 24px) !important; } } /* Universal: any heading/text inside Elementor or WoodMart promo/banner widgets */ .elementor-image-box-content h1, .elementor-image-box-content h2, .elementor-image-box-content h3, .elementor-image-box-content h4, .elementor-image-box-title, .elementor-image-box-description, .elementor-widget-image-box h1, .elementor-widget-image-box h2, .elementor-widget-image-box h3, .elementor-widget-image-box h4, .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3, .elementor-widget-heading h4, .elementor-heading-title, [class*="elementor-widget"] h1, [class*="elementor-widget"] h2, [class*="elementor-widget"] h3, [class*="elementor-widget"] h4, [class*="banner"] h1, [class*="banner"] h2, [class*="banner"] h3, [class*="banner"] h4, [class*="banner-title"], [class*="banner-subtitle"], .wd-banner-inner * { word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: normal !important; hyphens: auto; max-width: 100%; white-space: normal !important; text-overflow: clip !important; } /* Container itself shouldn't clip the content */ .elementor-image-box-wrapper, .elementor-image-box-content, .elementor-widget-image-box, .elementor-widget-heading, .wd-banner, .wd-banner-inner, .promo-banner, .promo-banner-inner, [class*="banner"]:not([class*="slider"]):not([class*="wd-slider"]) { overflow: visible !important; } /* Scale down heading sizes when in a narrow column */ @media (max-width: 1200px) { [class*="elementor-widget"] h1 { font-size: clamp(20px, 2.4vw, 36px) !important; line-height: 1.2 !important; } [class*="elementor-widget"] h2 { font-size: clamp(18px, 2.0vw, 30px) !important; line-height: 1.2 !important; } [class*="elementor-widget"] h3 { font-size: clamp(16px, 1.6vw, 24px) !important; line-height: 1.25 !important; } [class*="elementor-widget"] h4 { font-size: clamp(15px, 1.4vw, 20px) !important; line-height: 1.3 !important; } } /* ============================================================ Homepage "Browse Our Categories" banner section Force 3-column equal grid (was: 2 small left + 1 wide right) ============================================================ */ /* Target rows containing promo-banner widgets and reflow as equal grid */ .elementor-section:has(.wd_banner), .elementor-element:has(> .elementor-widget-wd_banner), .elementor-row:has(.promo-banner), .e-con:has(.wd_banner), /* Any container with 2+ wd_banner children — force into horizontal grid */ .e-con-full:has(> .elementor-widget-wd_banner + .elementor-widget-wd_banner), .elementor-container:has(.elementor-widget-wd_banner + .elementor-widget-wd_banner), .elementor-section-wrap:has(.elementor-widget-wd_banner + .elementor-widget-wd_banner) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; width: 100% !important; align-items: stretch !important; } /* Container queries — if too narrow, drop to 2 then 1 column */ @media (max-width: 900px) { .elementor-section:has(.wd_banner), .e-con:has(.wd_banner), .elementor-container:has(.elementor-widget-wd_banner + .elementor-widget-wd_banner) { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .elementor-section:has(.wd_banner), .e-con:has(.wd_banner), .elementor-container:has(.elementor-widget-wd_banner + .elementor-widget-wd_banner) { grid-template-columns: 1fr !important; } } /* Each column / container becomes a uniform cell */ .elementor-section:has(.wd_banner) > .elementor-container, .elementor-section:has(.wd_banner) > .elementor-container > .elementor-row { display: contents !important; } .elementor-section:has(.wd_banner) .elementor-column, .elementor-section:has(.wd_banner) .elementor-widget-wrap, .e-con:has(.wd_banner) > .e-con-inner, .e-con-inner:has(.wd_banner) { width: 100% !important; max-width: 100% !important; flex: 1 !important; } /* Promo-banner cards — uniform size & layout */ .promo-banner, .wd_banner .promo-banner, .elementor-widget-wd_banner .promo-banner { width: 100% !important; height: 100% !important; min-height: 300px !important; aspect-ratio: 4 / 3; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; } .promo-banner .main-wrapp-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; z-index: 0 !important; } .promo-banner .main-wrapp-img img, .promo-banner img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; position: absolute !important; inset: 0 !important; opacity: 1 !important; /* prevent hover from hiding image */ visibility: visible !important; display: block !important; transition: transform .6s ease !important; } /* Hover zoom — make the image scale gently instead of disappearing */ .promo-banner.banner-hover-zoom:hover .main-wrapp-img img, .promo-banner:hover .main-wrapp-img img, .promo-banner:hover img { transform: scale(1.05) !important; opacity: 1 !important; visibility: visible !important; } /* NUCLEAR: keep image visible no matter what hover state WoodMart applies */ .promo-banner .main-wrapp-img, .promo-banner:hover .main-wrapp-img, .promo-banner.banner-hover-zoom .main-wrapp-img, .promo-banner.banner-hover-zoom:hover .main-wrapp-img, .promo-banner.banner-hover-shadow .main-wrapp-img, .promo-banner.banner-hover-shadow:hover .main-wrapp-img, .promo-banner[class*="banner-hover"] .main-wrapp-img, .promo-banner[class*="banner-hover"]:hover .main-wrapp-img { opacity: 1 !important; visibility: visible !important; display: block !important; transform: none; } .promo-banner .main-wrapp-img img, .promo-banner:hover .main-wrapp-img img, .promo-banner.banner-hover-zoom .main-wrapp-img img, .promo-banner.banner-hover-zoom:hover .main-wrapp-img img, .promo-banner[class*="banner-hover"] .main-wrapp-img img, .promo-banner[class*="banner-hover"]:hover .main-wrapp-img img { opacity: 1 !important; visibility: visible !important; display: block !important; filter: none !important; } /* Subtle zoom on hover for the visible image */ .promo-banner:hover .main-wrapp-img img.wd-fill { transform: scale(1.05) !important; transition: transform .5s ease !important; } /* ---------- Hover-image swap support ---------- WoodMart banners can have TWO images: - .main-wrapp-img > img.wd-fill (default, visible) - .main-wrapp-img > img.wd-hover-img (shown on hover, fades in) Let WoodMart's native opacity transitions work; don't force-show everything. */ .promo-banner .main-wrapp-img img.wd-hover-img, .promo-banner img.wd-hover-img, .promo-banner img[class*="hover-img"] { opacity: 0; transition: opacity .5s ease; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .promo-banner:hover .main-wrapp-img img.wd-hover-img, .promo-banner:hover img.wd-hover-img, .promo-banner:hover img[class*="hover-img"] { opacity: 1 !important; } /* Only dim the default image when a hover image actually exists. Use :has() so the rule only applies if the container holds a .wd-hover-img */ .promo-banner .main-wrapp-img:has(img.wd-hover-img):hover img.wd-fill:not(.wd-hover-img) { opacity: 0; transition: opacity .5s ease; } /* NUCLEAR: force the default image to stay visible on hover always. The WoodMart hover-fade and hover-zoom effects sometimes hide the image when no second image is set. */ .promo-banner:hover .main-wrapp-img, .promo-banner.banner-hover-zoom:hover .main-wrapp-img, .promo-banner.banner-hover-fade:hover .main-wrapp-img, .promo-banner.banner-hover-shadow:hover .main-wrapp-img { opacity: 1 !important; visibility: visible !important; display: block !important; } .promo-banner:hover .main-wrapp-img img, .promo-banner:hover .main-wrapp-img img.wd-fill, .promo-banner.banner-hover-fade:hover img.wd-fill, .promo-banner.banner-hover-zoom:hover img.wd-fill { opacity: 1 !important; visibility: visible !important; display: block !important; } /* Allow gentle scale on hover-zoom variant, but keep image visible */ .promo-banner.banner-hover-zoom:hover img.wd-fill { transform: scale(1.05) !important; transition: transform .5s ease !important; } /* If a hover image IS set, allow the swap (overrides the nuclear rule above) */ .promo-banner .main-wrapp-img:has(img.wd-hover-img):hover img.wd-fill:not(.wd-hover-img) { opacity: 0 !important; } /* MAXIMUM SPECIFICITY: force every image inside .main-wrapp-img to be visible no matter the state, with high inline-style-beating specificity */ body .promo-banner .main-wrapp-img, body .promo-banner.banner-hover-zoom .main-wrapp-img, body .promo-banner.banner-hover-fade .main-wrapp-img, body .promo-banner:hover .main-wrapp-img, body .promo-banner.banner-hover-zoom:hover .main-wrapp-img, body .promo-banner.banner-hover-fade:hover .main-wrapp-img { opacity: 1 !important; visibility: visible !important; display: block !important; position: relative; } body .promo-banner .main-wrapp-img > img, body .promo-banner .main-wrapp-img > a > img, body .promo-banner .main-wrapp-img img, body .promo-banner:hover .main-wrapp-img > img, body .promo-banner:hover .main-wrapp-img > a > img, body .promo-banner:hover .main-wrapp-img img, body .promo-banner.banner-hover-zoom:hover .main-wrapp-img img, body .promo-banner.banner-hover-fade:hover .main-wrapp-img img { opacity: 1 !important; visibility: visible !important; display: block !important; width: 100% !important; height: auto !important; } .promo-banner .wrapper-content-banner { position: relative !important; z-index: 2 !important; width: 100% !important; padding: 24px !important; text-align: center !important; } /* Force charcoal text even when WoodMart applies color-scheme-dark */ .promo-banner.color-scheme-dark .banner-title, .promo-banner.color-scheme-dark h2, .promo-banner.color-scheme-dark h3, .promo-banner.color-scheme-dark h4, .promo-banner.color-scheme-dark p, .promo-banner.color-scheme-dark .banner-inner, .promo-banner.color-scheme-dark .text-content, .promo-banner.color-scheme-dark, .promo-banner.color-scheme-light .banner-title, .promo-banner.color-scheme-light h2, .promo-banner.color-scheme-light h3, .promo-banner.color-scheme-light p, .promo-banner .wrapper-content-banner * { color: #2B2118 !important; } /* Promo banner text — readable at any column width */ .promo-banner .banner-title, .promo-banner h2, .promo-banner h3, .promo-banner h4 { font-size: clamp(20px, 1.8vw, 28px) !important; line-height: 1.2 !important; margin: 0 0 8px 0 !important; color: #2B2118 !important; /* charcoal black — Dilan body color */ text-shadow: 0 1px 3px rgba(255,255,255,0.5); /* subtle light halo for legibility on busy images */ word-wrap: break-word !important; white-space: normal !important; font-weight: 600; } .promo-banner .banner-inner p, .promo-banner .text-content, .promo-banner p { font-size: clamp(13px, 1.1vw, 15px) !important; line-height: 1.4 !important; color: #2B2118 !important; /* charcoal */ text-shadow: 0 1px 2px rgba(255,255,255,0.4); margin: 0 0 14px 0 !important; } /* No dark scrim — user wants light/cream banner feel with dark text */ .promo-banner .main-wrapp-img:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.25) 100%); pointer-events: none; } /* Mobile — stack vertically */ @media (max-width: 768px) { .elementor-section:has(.wd_banner), .e-con:has(.wd_banner), .elementor-row:has(.promo-banner) { grid-template-columns: 1fr !important; } .promo-banner { min-height: 220px !important; aspect-ratio: 16 / 9; } } /* ====== Keep the category / collection label BAND on MOBILE ====== WoodMart drops the overlay-title background on small screens, so labels like "PENDANT SETS" float with no plaque. Re-force the band below 1024px. */ @media (max-width: 1024px) { html body .dilan-collection-section .wd-cat .wd-entities-title, html body .dilan-collection-section .category-grid-item .wd-entities-title, html body .dilan-categories-section .wd-cat .wd-entities-title, html body .dilan-categories-section .category-grid-item .wd-entities-title, html body .dilan-coverflow .wd-cat .wd-entities-title, html body .dilan-coverflow .category-grid-item .wd-entities-title, html body.home .wd-cat .wd-entities-title { background: rgba(43, 33, 24, 0.72) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; display: inline-block !important; width: auto !important; max-width: 88% !important; padding: 8px 16px !important; border-radius: 6px !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important; white-space: nowrap !important; } /* keep the label wrapper overlaid + centred at the bottom on mobile */ html body .dilan-collection-section .wd-cat .wd-cat-content, html body .dilan-categories-section .wd-cat .wd-cat-content, html body .dilan-coverflow .wd-cat .wd-cat-content, html body.home .wd-cat .wd-cat-content { display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 18px !important; top: auto !important; text-align: center !important; background: transparent !important; } } /* ============================================================ MOBILE: NEW ARRIVALS / product cards — shorter, uniform height. The long product names (incl. the SKU suffix) were wrapping to 5-6 lines, making the cards very tall. Clamp the title to 2 lines with a smaller font and tighten the spacing/price. ============================================================ */ @media (max-width: 768px) { body.home .products .wd-entities-title, body.home .wd-products .wd-entities-title, body.home li.product .wd-entities-title, body.home .product-grid-item .wd-entities-title, body.home .products .product-title, body.home .wd-product .wd-entities-title { font-size: 13px !important; line-height: 1.3 !important; margin: 8px 0 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: 2.6em !important; /* 2 lines fallback for non-clamp browsers */ } body.home .products .wd-entities-title a, body.home .wd-product .wd-entities-title a { display: inline !important; } /* tighten price + card padding so the card is compact */ body.home .products .price, body.home .wd-product .price { font-size: 13px !important; margin-top: 2px !important; } body.home .products .product-element-bottom, body.home .wd-product .product-element-bottom { padding-top: 6px !important; } } /* ============================================================ MOBILE: SALE BADGE — was a big (48px) transparent gold-outline circle that overlapped the product and was hard to read. Make it a compact, solid, premium tag pinned to the TOP-LEFT of every card. (The theme's selector uses 3 classes, so we out-specify it.) ============================================================ */ /* Sale badge + "Hot"/featured badge were overlapping: .product-labels is a flex COLUMN, but WoodMart pins .onsale with position:absolute, pulling it out of the column so it and the featured label stacked on the same spot. Let the sale badge flow in the column too, and give the stack a small gap. Applies at all widths. */ html body .product-labels { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } html body .product-labels .onsale.product-label, html body .product-labels span.onsale, html body .product-labels .onsale { position: static !important; top: auto !important; left: auto !important; right: auto !important; } @media (max-width: 768px) { html body .product-labels { top: 8px !important; left: 8px !important; right: auto !important; } html body .product-labels .onsale.product-label.wd-shape-round-sm, html body .product-labels .onsale.product-label, html body .product-labels .onsale { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; border-radius: 4px !important; background: #B89968 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .3px !important; padding: 3px 7px !important; line-height: 1.2 !important; white-space: nowrap !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important; aspect-ratio: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================ MOBILE polish round 2 — home carousels 1) Hide WoodMart carousel scrollbars ("scroll balls") + nav arrows 2) New Arrivals / Best Sellers: bigger, full-bleed 2-up (kill the left indent + side gutters of WoodMart's native scroll carousel) 3) Category / Collection nameplate: re-centre (a leftover translateX shifted it left) + let long names wrap instead of clip ============================================================ */ @media (max-width: 768px) { /* 1) hide scrollbars on every home carousel. NOTE: arrows are NO LONGER hidden here — we now show sleek prev/next buttons on mobile (see dilan-carousel-arrows.php). Keeping the old .wd-nav-arrows / .wd-btn-arrow selectors in this list silently beat those rules on specificity (body.home = 0,2,0). */ body.home .wd-carousel-scroll, body.home .wd-scroll { display: none !important; } body.home .wd-carousel { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.home .wd-carousel::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* 2) New Arrivals / Best Sellers were "very small" because the wd_products WIDGET itself was constrained to ~188px wide with big auto side-margins on mobile (an Elementor width setting that doesn't adapt). Force the widget full-width so WoodMart's sm:2 gives proper half-width cards (≈197px instead of ≈87px). */ body.home .elementor-widget-wd_products { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.home .elementor-widget-wd_products .wd-carousel, body.home .elementor-widget-wd_products .wd-carousel-inner { padding-left: 0 !important; padding-right: 0 !important; } /* 3) Category / Collection nameplate: undo the leftover translate so the label is centred, sit it at the bottom, and let long names wrap to two lines (instead of being clipped to "WEDDING COL") */ html body.home .wd-cat .wd-cat-content, html body .dilan-categories-section .wd-cat .wd-cat-content, html body .dilan-collection-section .wd-cat .wd-cat-content, html body .dilan-coverflow .wd-cat .wd-cat-content { left: 8px !important; right: 8px !important; transform: none !important; text-align: center !important; } html body.home .wd-cat .wd-entities-title { white-space: normal !important; font-size: 12px !important; line-height: 1.25 !important; max-width: 100% !important; padding: 6px 12px !important; word-break: normal !important; } } /* ============================================================ Shop by Budget grid — Elementor stamps a min-height (e.g. 161px) on each banner column. When that re-applies after our JS sizes the tiles, the columns balloon and the grid rows spread apart, leaving big empty gaps between rows. Killing the min-height lets the JS-set tile height (and the grid row height) win, so the rows pack tightly. A stylesheet !important beats Elementor's inline (non-important) value, so this holds even if Elementor re-stamps it on resize. ============================================================ */ .dilan-budget-row > * { min-height: 0 !important; } /* Shop by Budget tiles must be clickable — the banner link was getting pointer-events:none, so taps did nothing. Re-enable the whole tile link. */ .dilan-budget-row a, .dilan-budget-row .banner-image, .dilan-budget-row .promo-banner, .dilan-budget-row .promo-banner-wrapper, .dilan-budget-row .main-wrapp-img, .dilan-budget-row img { pointer-events: auto !important; cursor: pointer !important; } /* Category / Collection / Craft carousels: never show the horizontal scrollbar ("scroll ball") — swipe still works. */ body.home .dilan-categories-section .wd-carousel, body.home .dilan-collection-section .wd-carousel, body.home .dilan-coverflow .wd-carousel, body.home [data-dj-2up] { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.home .dilan-categories-section .wd-carousel::-webkit-scrollbar, body.home .dilan-collection-section .wd-carousel::-webkit-scrollbar, body.home .dilan-coverflow .wd-carousel::-webkit-scrollbar, body.home [data-dj-2up]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ============================================================ HERO SLIDER: the banners were cut because the slide (~404px) was SHORTER than the image box (600px) — the bottom got clipped. The banners are ~2:1, so we size the whole hero to 2:1 (height = half the width) and use Cover, so the banner fills it edge-to-edge with NO cutting and NO bars, on every screen. max-height caps it so it isn't huge on very wide monitors. ============================================================ */ /* Heights are set in JS (forceHeroHeight) because WoodMart stamps inline heights on the slide/slide-bg that beat any stylesheet rule. Here we only keep the image fit + the cream fallback. */ .wd-slider .wd-slide-bg img, .wd-slide-bg.wd-fill img { object-fit: contain !important; object-position: center !important; width: 100% !important; height: 100% !important; } /* Cream on the whole hero area (not just the image box) so that while the banner image is still loading, the 400px hero shows cream — not the white page behind a transparent slider (the "white band" on desktop load). */ .wd-slider, .wd-slider .wd-carousel-container, .wd-slider .wd-carousel-inner, .wd-slider .wd-slide, .wd-slider .wd-carousel-item, .wd-slider .wd-slide-inner, .wd-slider .wd-slide-bg, .wd-slide-bg.wd-fill { background-color: #F6EFE2 !important; } /* ============================================================ WHITE BAND ON LOAD: .wd-skip-links (accessibility "skip to…" links) is position:fixed + visible + ~89px tall, because WoodMart defers the CSS that hides it — so during load it flashes a white band at the top. Hide it off-screen (still focusable for keyboard users). ============================================================ */ .wd-skip-links { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .wd-skip-links a:focus { position: fixed !important; left: 10px !important; top: 10px !important; width: auto !important; height: auto !important; z-index: 99999; background: #fff; padding: 8px 14px; } /* ========================================================================= HOMEPAGE CONTENT-WIDTH CAP (Dilan Jewels — 2026-07) The homepage was built full-bleed (max-width:100%) with several bands sized to the viewport width, so content ballooned on wide screens. Cap every TOP-LEVEL homepage section to a centred 1600px content width (optimised for 1920px screens — ~160px margin each side). The hero slider section is capped separately at 1400px, centred (see the next block). Note: the "Shop by Budget" band is grid-sized inline by JS (add-cart-near-price.js); its width basis is capped to 1600 there so it lines up with these sections. On phones/tablets 1600px exceeds the viewport, so this rule is a no-op and the existing responsive layout is untouched. ========================================================================= */ body.home .elementor > .e-con:not(:has(.wd-slider)):not(:has(.slick-slider)) { max-width: 1760px !important; margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------------------------- HERO BANNER — CAPPED AT 1400px, CENTRED The banner asset is max 1400px wide, so cap the hero section to 1400px and centre it — the banner shows at its true size (crisp, no upscaling, no crop). The slider wrappers fill that 1400px container. IMPORTANT: the band height is stamped inline by forceHeroHeight() in add-cart-near-price.js (currently 400px on desktop). For the banner to fill the band with NO cream margins, the banner image's aspect ratio must match the band — i.e. a 1400×400 banner fills the 400px band exactly. A different height leaves cream (contain) or crops (cover); update the JS band height to match the chosen banner height. ------------------------------------------------------------------------- */ body.home .elementor > .e-con:has(.wd-slider), body.home .elementor > .e-con:has(.slick-slider) { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } /* The WoodMart slider breaks out to the full viewport width even inside the 1400px section, leaving the banner misaligned (cream on one side). Cap the slider + carousel levels to 1400px and centre them so the image lines up. */ body.home .wd-slider, body.home .wd-slider .wd-carousel, body.home .wd-slider .wd-carousel-inner, body.home .wd-slider .wd-carousel-wrap { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } /* Slide + image fill the now-1400px carousel */ body.home .wd-slider .wd-carousel-item, body.home .wd-slider .wd-slide, body.home .wd-slider .wd-slide-bg { width: 100% !important; max-width: 100% !important; } /* CRITICAL: each slide has an EMPTY content wrapper (.wd-slide-inner) with a cream background that animates in over the LEFT ~490px of the banner — covering the banner's own artwork and looking like "cream on the left". The banners are self-contained images (all content is in the image), so hide this empty box to reveal the full banner. */ body.home .wd-slider .wd-slide-inner { display: none !important; } /* ------------------------------------------------------------------------- TIGHTEN SECTION TITLE → CONTENT GAP The "Shop by Budget" tiles wrapper had a 48px padding-top, leaving a big gap under the title (60px total). Pull it in to ~14px so the title sits closer to its content, consistent with the other bands. ------------------------------------------------------------------------- */ body.home .dilan-budget-row-wrap { padding-top: 14px !important; } /* ---------- Collapsible sidebar filter sections ---------- Chevron shown via CSS on every sidebar widget title (no JS needed to reveal it). A single delegated click handler in dilan-customizations.php toggles .dilan-collapsed. */ .sidebar-container .widget > .widget-title, .widget-area .widget > .widget-title, .wd-sidebar .widget > .widget-title { cursor: pointer; position: relative; padding-right: 22px; -webkit-user-select: none; user-select: none; } .sidebar-container .widget > .widget-title::after, .widget-area .widget > .widget-title::after, .wd-sidebar .widget > .widget-title::after { content: ""; position: absolute; right: 4px; top: calc(50% - 6px); width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; transition: transform .2s ease; } .widget.dilan-collapsed > .widget-title::after { transform: rotate(-45deg); } .widget.dilan-collapsed > *:not(.widget-title) { display: none !important; } /* ============================================================ Home carousels — apply the SAME square-card treatment to all three (Shop by Categories a881297, Shop by Collection d7e1786, Best-Sellers 88a5374). Best-Sellers is the section whose heading the text-override plugin renames; it was previously the only one styled, because the rules above were scoped to the wrong id. Sharing one block keeps the three rows visually identical at every breakpoint. aspect-ratio (not a pixel height) is what makes this responsive: the card stays square from 375px to 2560px, so artwork never needs per-breakpoint tuning and the image box can't grow taller than its card — which was the mobile clipping bug (141px card holding a 260px image box). ============================================================ */ html body .elementor-element-88a5374 .wd-cat, html body .elementor-element-88a5374 .wd-cat .wd-cat-image, html body .elementor-element-88a5374 .wd-cat .wd-cat-image a { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html body .elementor-element-88a5374 .wd-cat .wd-cat-image img, html body .elementor-element-88a5374 .wd-cat .category-image img { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; object-fit: cover !important; object-position: center 60% !important; } /* ---------- Collection + Best-Sellers labels: same nameplate as the cards the owner approved ("KIDS COLLECTION"). The pill rule earlier in this file is scoped to a881297 only, so labels in the other two carousels fell through with no plate at all and rendered as bare text ("DAILY WEAR"). ---------- */ html body .elementor-element-d7e1786 .wd-cat .wd-entities-title, html body .elementor-element-d7e1786 .wd-cat h3.wd-entities-title, html body .elementor-element-d7e1786 .category-grid-item .wd-entities-title, html body .elementor-element-88a5374 .wd-cat .wd-entities-title, html body .elementor-element-88a5374 .wd-cat h3.wd-entities-title, html body .elementor-element-88a5374 .category-grid-item .wd-entities-title { display: inline-block !important; width: auto !important; max-width: 88% !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: rgba(43, 33, 24, 0.72) !important; padding: 9px 20px !important; margin: 0 !important; border: none !important; border-radius: 6px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body .elementor-element-d7e1786 .wd-cat .wd-cat-content, html body .elementor-element-88a5374 .wd-cat .wd-cat-content { left: 0 !important; right: 0 !important; transform: none !important; text-align: center !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; max-width: none !important; } /* ---------- Top bar text: maroon, not gold ---------- The row is set to WoodMart's "whb-color-light" scheme, which paints the text pale gold on a cream background — measured 2.16:1, well under the 4.5:1 readability minimum, and genuinely hard to read. Maroon on the same cream is 8.62:1. Scoped to .wd-header-text (the centre column) so the brand-coloured social icons in the right column are untouched. Harmless if the marquee later replaces this bar. */ .whb-top-bar .wd-header-text, .whb-top-bar .wd-header-text *, .whb-top-bar .wd-header-text a { color: #7B1E28 !important; } /* ============================================================ Home card carousels — full-width capped at 1600, edge-to-edge, zoom-stable. Categories (a881297) and Best-Sellers (88a5374) only — both confirmed SCROLL carousels. Shop by Collection (d7e1786) is deliberately EXCLUDED: it lays out differently (no scroll, zero-width probe) and carries heavy custom styling, so it needs its own handling rather than this flex rebuild. The old sizing came from WoodMart writing a FIXED PIXEL width on each item at init (e.g. 345px). That doesn't rescale on browser zoom, so at 125% the cards overflowed and looked huge, and a 32px container pad left a cream inset. These are SCROLL carousels (the track scrolls; no translateX), so overriding the item width is safe — there is no slide-position math to desync. Item width is now a PERCENTAGE of the track, so it always resolves to 4 equal columns at any zoom. The container is capped at 1600 and centred, and its side padding is removed so cards reach the edges on laptops. ============================================================ */ html body .elementor-element-a881297 .wd-carousel-container, html body .elementor-element-88a5374 .wd-carousel-container { max-width: 1760px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } html body .elementor-element-a881297 .wd-carousel, html body .elementor-element-88a5374 .wd-carousel { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; /* gap is the item padding below, so widths sum to exactly 100% */ } html body .elementor-element-a881297 .wd-carousel-item, html body .elementor-element-88a5374 .wd-carousel-item { flex: 0 0 25% !important; /* EXACTLY 4 per view (pages evenly: 4+4+4) */ width: 25% !important; max-width: 25% !important; box-sizing: border-box !important; /* padding IS the gap → 4 × 25% = 100%, no 5th peeking */ margin: 0 !important; padding: 0 9px !important; } /* Tablet: 3 columns; phone: 2 — same box-sizing model, zoom-stable. */ @media (max-width: 1024px) { html body .elementor-element-a881297 .wd-carousel-item, html body .elementor-element-88a5374 .wd-carousel-item { flex: 0 0 33.3333% !important; width: 33.3333% !important; max-width: 33.3333% !important; } } @media (max-width: 600px) { html body .elementor-element-a881297 .wd-carousel-item, html body .elementor-element-88a5374 .wd-carousel-item { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; } } /* ---------- Home category carousels on MOBILE — fix card/image/label ---------- The card rendered ~141x151 while the image was forced to 260px min-height, so the image overflowed and was clipped, and the label lost its plate. Give the card a 3:4 portrait box the image fills exactly (object-fit cover), and pin the title as a dark nameplate at the bottom. Scoped to the two home card carousels. */ @media (max-width: 600px) { html body .elementor-element-a881297 .wd-cat, html body .elementor-element-88a5374 .wd-cat { aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; } html body .elementor-element-a881297 .wd-cat .wd-cat-image, html body .elementor-element-a881297 .wd-cat .wd-cat-image img, html body .elementor-element-88a5374 .wd-cat .wd-cat-image, html body .elementor-element-88a5374 .wd-cat .wd-cat-image img { height: 100% !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; } html body .elementor-element-a881297 .wd-cat .wd-cat-content .wd-entities-title, html body .elementor-element-a881297 .wd-cat .wd-entities-title, html body .elementor-element-88a5374 .wd-cat .wd-cat-content .wd-entities-title, html body .elementor-element-88a5374 .wd-cat .wd-entities-title { position: absolute !important; left: 50% !important; bottom: 12px !important; transform: translateX(-50%) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12px !important; letter-spacing: 0.06em !important; white-space: nowrap !important; margin: 0 !important; width: auto !important; z-index: 3 !important; } /* The plate is drawn as a ::before, NOT the label's own background: some high-specificity theme reset force-clears background-color AND padding on .wd-entities-title (all matching rules set maroon, yet it computes transparent — the reset uses a selector .matches() can't evaluate). A pseudo-element's background is immune to that. Negative insets give the padded look without relying on the label's padding, which is also reset. */ /* DISABLED 2026-08: this pseudo-plate is now a SECOND band on mobile. It existed because the label's own background used to compute transparent; that is no longer the case (.wd-entities-title paints rgba(43,33,24,.72) correctly), so the ::before duplicated it — a wider, lighter rectangle behind the pill. The label alone is the nameplate now. */ html body .elementor-element-a881297 .wd-cat .wd-entities-title::before, html body .elementor-element-88a5374 .wd-cat .wd-entities-title::before { content: none !important; background: none !important; display: none !important; } } /* ============================================================================ dilan-maroon-buttons — Add to Cart in brand maroon (was WoodMart gold #B89968) Scoped to purchase buttons only, so links/prices keep the gold accent. ========================================================================== */ :root{ --dilan-maroon: #7B1E28; --dilan-maroon-hover: #641822; } /* Single product page */ .single_add_to_cart_button, .single_add_to_cart_button.button, .single_add_to_cart_button.button.alt, /* Catalogue cards + quick shop */ .products .add_to_cart_button, .products .product_type_variable, .wd-add-btn > a, .wd-buy-now-btn > a, /* Cart / checkout actions */ .wc-proceed-to-checkout .checkout-button, .woocommerce-cart .button[name="update_cart"], .woocommerce-checkout #place_order{ background-color: var(--dilan-maroon) !important; background-image: none !important; border-color: var(--dilan-maroon) !important; color: #fff !important; } /* WoodMart paints some buttons through a pseudo-element overlay */ .single_add_to_cart_button::before, .products .add_to_cart_button::before, .wd-add-btn > a::before{ background-color: var(--dilan-maroon) !important; } .single_add_to_cart_button:hover, .single_add_to_cart_button.button.alt:hover, .products .add_to_cart_button:hover, .wd-add-btn > a:hover, .wc-proceed-to-checkout .checkout-button:hover, .woocommerce-checkout #place_order:hover{ background-color: var(--dilan-maroon-hover) !important; border-color: var(--dilan-maroon-hover) !important; color: #fff !important; } /* Disabled state (no variation chosen yet) stays muted, not maroon */ .single_add_to_cart_button.disabled, .single_add_to_cart_button:disabled{ background-color: #C9C2B6 !important; border-color: #C9C2B6 !important; color: #fff !important; cursor: not-allowed; } /* ============================================================================ CAROUSEL / ARROW PATCHES REMOVED (cleanup) The Elementor widgets are already configured correctly — "Slides per view" is 2 on mobile and "Hide prev/next buttons" is No. The stack of overrides added while debugging (forced --wd-col, pixel widths, arrow sizing/positioning, wd-lock unlocking) was fighting WoodMart's own correct rendering, so it has been removed. The theme now renders these carousels natively. KEPT (deliberately, these are real fixes): • dilan-maroon-buttons — brand maroon Add to Cart / checkout buttons • the legacy mobile rule no longer hides carousel arrows (it used to force display:none on .wd-nav-arrows at <=768px) SEPARATE FILES, unaffected: • dilan-variations.php — size pills + in-stock-only sizes • dilan-image-fix.php — Safari sizes="auto" image fix • add-cart-near-price.js — mobile scroll-strip rebuild left DISABLED (it broke these carousels in Safari) ========================================================================== */ /* ============================================================================ dilan-categories-mobile-cols The "Shop by Categories" widget is saved with col-sm:1, so WoodMart resolves --wd-col to 1 on phones and renders ONE full-width tile. ("Shop by Collection" is saved col-sm:2 and correctly shows two — same page, same CSS, proving this is the widget setting and nothing else.) --wd-col is the exact variable WoodMart divides by: .wd-carousel-item { flex: 0 0 calc(100% / var(--wd-col)); } so overriding it is equivalent to changing the widget field, and WoodMart still does its own gap maths. Scoped to the categories carousel on phones only — no effect on desktop, on "Shop by Collection", or on the product carousels. Delete this block if the widget's mobile "Slides per view" is ever set to 2. ========================================================================== */ @media (max-width: 768.98px) { .elementor-element-4d5ed99 .wd-carousel-container, .elementor-element-4d5ed99 .wd-carousel, .elementor-element-4d5ed99 .wd-carousel-wrap { --wd-col: 2 !important; --wd-col-sm: 2 !important; } /* WoodMart hides slides 2+ while a col-sm:1 carousel is un-initialised */ .elementor-element-4d5ed99 [style*="col-sm:1"] > .wd-carousel-wrap > .wd-carousel-item:nth-child(n+2) { display: block !important; } } /* dilan-cat-arrows REMOVED — attempts to force arrows onto the Categories / Collection carousels kept breaking the PRODUCT carousels (Best Sellers, New Arrivals), whose arrows work natively. Not worth the regressions; if these arrows are wanted, set them in the Elementor widget instead. */ /* ============================================================================ dilan-home-arrow-size — SIZE ONLY, deliberately. The home carousel arrows render with zero width, so nothing paints. An earlier attempt gave them size AND position:absolute/top/left — the positioning is what broke Best Sellers and New Arrivals. This sets dimensions only and leaves all layout to WoodMart, so every home carousel keeps its native arrow placement. ========================================================================== */ body.home .wd-btn-arrow, body.home .wd-nav-arrows .wd-btn-arrow { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; opacity: 1 !important; visibility: visible !important; } body.home .wd-btn-arrow .wd-arrow-inner { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } body.home .wd-btn-arrow.wd-disabled { opacity: .35 !important; } @media (max-width: 768.98px) { body.home .wd-btn-arrow, body.home .wd-nav-arrows .wd-btn-arrow { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } } /* ============================================================================ NAMEPLATE: no custom rules here. Several attempts to restyle the category nameplate (full-width bar, hug-the- text plate, transparent wrapper) each caused a regression — the plate vanishing on mobile, or a double band. The theme's own rules already style it, including the .dilan-collection-section / .dilan-coverflow treatment used for the Collection cards. Left to the theme deliberately. ========================================================================== */ /* ============================================================================ dilan-kill-hover-mask-band — ONE rule, nothing else. The intended nameplate is the LABEL: `.wd-entities-title` already has background rgba(43,33,24,.72) + inline-block, so it hugs the text (the JADAU / MEN'S COLLECTION look). WoodMart additionally paints its own `.wd-cat-content.hover-mask` wrapper, which shows as a second, wider band behind that pill. Only the wrapper's background is removed — position, size and the label styling are all left exactly as the theme sets them. High specificity because WoodMart's stylesheets load after this file. ========================================================================== */ html body .wd-cat .wd-cat-content.hover-mask, html body .wd-cats .wd-cat .wd-cat-content, html body .wd-cats-element .wd-cat .wd-cat-content, html body .category-grid-item .wd-cat-content { background: none !important; background-color: rgba(0, 0, 0, 0) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================================ TOUCH-ARROW RULES REVERTED. WoodMart reveals carousel arrows on hover, so they sit at opacity:0 on touch devices. Forcing them visible required also un-collapsing .wd-nav-arrows (height:0) and re-sizing the buttons (width:0) — and that added stray vertical space to the home grids ("Shop by Budget" gap). Not worth the layout damage: swipe works fine on phones. If arrows on mobile are wanted, do it in the WoodMart widget settings rather than by overriding this cascade. ========================================================================== */ /* ============================================================================ dilan-mobile-arrows Goal: visible prev/next arrows on touch devices. Three things have to be true, and WoodMart breaks all three on mobile: 1. opacity — arrows are revealed on HOVER, so they sit at 0 on touch. 2. size — the buttons compute to 0 x 0. 3. layout — .wd-nav-arrows collapses to height:0. Giving it height:auto made it occupy space and opened a gap in the home grids, so instead the buttons are taken OUT of flow (position:absolute) and centred over the carousel. Out of flow = no gap. Touch / phone only; desktop hover behaviour is untouched. ========================================================================== */ @media (hover: none), (pointer: coarse), (max-width: 768.98px) { /* anchor for the absolutely-positioned buttons */ .wd-carousel-inner { position: relative !important; } /* container itself must take NO space and must not clip its children */ .wd-nav-arrows, .wd-carousel-arrows { display: block !important; position: static !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; /* never block swiping */ } .wd-nav-arrows .wd-btn-arrow, .wd-btn-arrow { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: -50% !important; /* sits over the carousel above it */ transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 2px 8px rgba(43,33,24,.2) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; /* but stay tappable */ z-index: 30 !important; } .wd-nav-arrows .wd-btn-arrow.wd-prev, .wd-btn-arrow.wd-prev { left: 4px !important; right: auto !important; } .wd-nav-arrows .wd-btn-arrow.wd-next, .wd-btn-arrow.wd-next { right: 4px !important; left: auto !important; } .wd-btn-arrow .wd-arrow-inner { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; background: none !important; } .wd-btn-arrow .wd-arrow-inner::before { color: #7B1E28 !important; font-size: 12px !important; } .wd-btn-arrow.wd-disabled { opacity: .35 !important; pointer-events: none !important; } } /* ============================================================ HOME PAGE REVISION — client feedback round (v2.1) Items are numbered to match the client's list. ============================================================ */ /* (1) Promo scroll runner — smaller text. SPEED is a setting, not CSS: Settings -> Promo Bar -> Speed (higher number = slower scroll; the default was raised to 45s). */ .dilan-promo-marquee, .dilan-promo-marquee * { font-size: 12.5px !important; letter-spacing: .04em !important; } /* (4) Remove the "-20%" discount badge everywhere (home, shop, product, carousels). The saving is still visible from the struck-through original price. */ html body .product-labels .onsale, html body .product-labels .onsale.product-label, html body span.onsale, html body .wd-product-label.onsale, html body .products .product .onsale, html body .single-product .product-labels .onsale, html body .product-labels .onsale.product-label.wd-shape-round-sm { display: none !important; } /* (6) Prices in dark maroon (regular, sale and single-product). */ html body .price, html body .price > .amount, html body .price > bdi, html body .price > .woocommerce-Price-amount, html body .price ins, html body .price ins .amount, html body .price ins bdi, html body .products .product .price ins, html body .products .product .price ins .amount, html body .wd-product .price ins, html body .summary .price, html body .summary .price > .amount, html body .summary .price > bdi, html body .woocommerce-Price-amount bdi { color: #7B1E28 !important; } /* keep the old/struck price muted so the live price stands out */ html body .price del, html body .price del .amount, html body .price del bdi, html body .price del .woocommerce-Price-amount { color: #8d8579 !important; opacity: 1 !important; } /* (7) Header cart — show the item count only, hide the running total. */ .wd-header-cart .subtotal-divider, .wd-header-cart .wd-cart-subtotal, .wd-header-cart .woocommerce-Price-amount, .wd-header-cart .amount, .whb-column .wd-header-cart .wd-tools-text .woocommerce-Price-amount { display: none !important; } /* (8) "HOT" becomes a deep-maroon "Best Seller" disc, on two lines. The theme prints the word "Hot"; we blank it and draw our own label so no template file has to be edited. */ .product-labels .featured.product-label, .wd-product-label.featured { font-size: 0 !important; /* hide the theme's "Hot" text */ width: 54px !important; height: 54px !important; min-width: 54px !important; border-radius: 50% !important; background: #6B1420 !important; /* deep maroon */ color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(43,33,24,.22) !important; } .product-labels .featured.product-label::after, .wd-product-label.featured::after { content: "Best\ASeller"; /* \A = line break -> two words, two lines */ white-space: pre !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: .02em !important; text-transform: none !important; color: #fff !important; } /* (11) "Why Trust Us?" — scaled down and tightened. The block uses its own .dilan-trust-* classes, NOT Elementor's heading class, so the height came from .dilan-trust-section's 48px/30px padding and the title's 44px bottom margin. Section height: 280px -> ~206px. */ body.home .elementor-element-0426cd3 { font-size: 12.5px !important; } html body .dilan-trust-section { padding-top: 22px !important; padding-bottom: 18px !important; } html body .dilan-trust-title { font-size: 20px !important; margin-bottom: 18px !important; } html body .dilan-trust-inner { row-gap: 14px !important; } /* Icons: 26px was too small on a desktop screen. Bigger from 1025px up, compact on phones where space is tight. */ html body .dilan-trust-section img, html body .dilan-trust-section svg { width: 28px !important; height: 28px !important; } @media (min-width: 1025px) { html body .dilan-trust-section img, html body .dilan-trust-section svg { width: 46px !important; height: 46px !important; } } /* (12) "Shop by Budget" labels — no drop shadow, bolder, cleaner plate. */ .dilan-budget-row .banner-title, .dilan-budget-row .wrapper-content-banner .banner-title { text-shadow: none !important; font-weight: 700 !important; background: rgba(255,255,255,.94) !important; color: #2B2118 !important; letter-spacing: .02em !important; } /* (13) Tighter gaps between home-page sections (was 26/18 and 12/24). */ body.home .e-con.e-parent { padding-top: 14px !important; padding-bottom: 14px !important; } body.home .e-con.e-parent:first-child { padding-top: 0 !important; } /* banner stays flush */ /* (5 & 10) Swap the order: Best-Sellers moves ABOVE Shop by Categories, New Arrivals drops to where Best-Sellers used to be. The home page's top-level sections are siblings, so ordering them with flexbox avoids rebuilding the page in Elementor. */ body.home .elementor-1322 { display: flex !important; flex-direction: column !important; } /* ⚠️ Flex items size to their CONTENT by default (min-width:auto), so a wide carousel stretched New Arrivals to 1760px on a 1536px screen and pushed its right arrow off-screen. Pin the children back to the container width. */ body.home .elementor-1322 > * { order: 50; /* default: keep sequence */ min-width: 0 !important; width: 100% !important; max-width: 100% !important; } body.home .elementor-1322 > *:nth-child(1) { order: 1; } /* banner slider */ body.home .elementor-1322 > *:nth-child(2) { order: 2; } /* Instagram strip */ body.home .elementor-1322 > .elementor-element-46e3ec0 { order: 3; } /* Best-Sellers ▲ */ body.home .elementor-1322 > *:nth-child(4) { order: 4; } /* Categories */ body.home .elementor-1322 > *:nth-child(5) { order: 5; } /* Collection */ body.home .elementor-1322 > .elementor-element-8150b32 { order: 6; } /* New Arrivals ▼ */ body.home .elementor-1322 > *:nth-child(7) { order: 7; } /* Shop by Budget */ body.home .elementor-1322 > *:nth-child(8) { order: 8; } /* Why Trust Us */ body.home .elementor-1322 > *:nth-child(9) { order: 9; } /* Reels */ body.home .elementor-1322 > *:nth-child(10){ order: 10; } /* Google reviews */ /* ---- Home product cards: white tile + portrait image (client round v2.2) ---- An earlier rule forces .products .product transparent, so these selectors are deliberately heavier (html body.home …) to win without editing that rule and changing the shop grid too. */ html body.home .products .product, html body.home .wd-products-element .product-grid-item, html body.home .wd-carousel .wd-product, html body.home .wd-product.product-grid-item { background-color: #fff !important; border-radius: 6px !important; overflow: hidden !important; } /* Product image: square -> 3:4 portrait rectangle, so the piece shows taller. Paired with the compact caption below, the card gets SHORTER overall (636px -> ~490px) while the photo itself gets bigger — which is what was asked for. */ /* Product photos are 1500x2100 = ratio 0.71. Matching the box to that exactly means the photo FILLS it with nothing cropped and no empty gap. (A `contain` box left dead space above/below the image — don't do that.) */ html body.home .wd-product .product-image-link, html body.home .wd-product .product-image-link img, html body.home .wd-product .wd-product-thumb img, html body.home .wd-product .hover-img img { aspect-ratio: 0.79 !important; /* ~10% shorter than the 0.71 source ratio */ height: auto !important; object-fit: cover !important; } /* Compact caption: tighten the name + price block so the image gets the room. */ html body.home .wd-product .product-information, html body.home .wd-product .wd-product-header { padding-top: 8px !important; padding-bottom: 8px !important; } html body.home .wd-product .wd-entities-title { margin: 0 0 4px !important; line-height: 1.25 !important; font-size: 13px !important; } html body.home .wd-product .price { margin: 0 !important; line-height: 1.2 !important; } /* Close the white gap between the Google-reviews block and the footer. .wd-prefooter is an empty theme spacer; the reviews block added its own bottom margin on top of it. */ html body .wd-prefooter { padding-bottom: 0 !important; min-height: 0 !important; } html body .dilan-greviews { margin-bottom: 0 !important; padding-bottom: 14px !important; } /* ---- Navbar spacing, tiered by screen width (client round v2.3) ---- Two different complaints, two different widths: • very wide screens -> items looked cramped, needed spreading • laptop widths -> the same spacing made the bar look oversized So the gap scales with the viewport instead of using one value. */ /* Laptop / mid screens: compact. */ @media (min-width: 1200px) and (max-width: 1599px) { html body ul.wd-nav-main { column-gap: 20px !important; } html body .whb-general-header .wd-nav-main > li > a, html body .whb-general-header .menu-item.item-level-0 > a { font-size: 13.5px !important; letter-spacing: .6px !important; } html body .whb-general-header .wd-header-my-account a { font-size: 13px !important; } } /* Large desktops: room to breathe. */ @media (min-width: 1600px) { html body ul.wd-nav-main { column-gap: 40px !important; } } /* ---- Product page: drop the product name from the breadcrumb ---- The title is already the biggest thing on the page, so repeating it in the trail is noise. Hides the final crumb AND the "/" before it, leaving "Home / Bangles". nth-last-child(2) targets the delimiter regardless of how deep the category trail is. */ html body.single-product .wd-breadcrumbs .wd-last { display: none !important; } html body.single-product .wd-breadcrumbs .wd-delimiter:nth-last-child(2) { display: none !important; } /* ---- Shop by Categories: portrait tiles, 10% taller (client round v2.4) ---- The tiles were forced to 1:1 while the category photos are 571x799 portrait, so a third of each image was being cropped away. 0.6818 is 3:4 made 10% taller as requested (0.75 / 1.1) and sits close to the source ratio (0.71), so very little of the photo is lost. Measured: tile 394x394 square -> 351x515 portrait. */ /* Category images are 571x799 (ratio 0.71). Matching that exactly means NOTHING is cropped, and it is also ~4% shorter than the 0.6818 box it replaces — so the section loses height rather than gaining it. `cover` is kept here (not `contain`) because these are full-bleed lifestyle photos, which would show white bars if letterboxed. */ html body.home .elementor-element-4d5ed99 .wd-cat, html body.home .elementor-element-4d5ed99 .wd-cat-image, html body.home .elementor-element-4d5ed99 .wd-cat-image img, html body.home .elementor-element-4d5ed99 .category-image, html body.home .elementor-element-4d5ed99 .category-image img { aspect-ratio: 0.71 !important; height: auto !important; object-fit: cover !important; } /* Categories had 26/18 padding while the neighbouring sections use 14/14. */ html body.home .e-con.e-parent.elementor-element-4d5ed99 { padding-top: 26px !important; padding-bottom: 26px !important; } /* ============================================================ RESPONSIVE PASS — home carousels (client round v2.5) The three home carousels were each configured differently, which showed up badly once the sections sat next to each other: section desktop tablet mobile Best Sellers 4 1 1 <- one card per row on a phone Categories 4 1 1 <- same New Arrivals 5 2 2 WoodMart drives the count from --wd-col, so setting it per breakpoint gives all three the same rhythm: 4 across on desktop, and 2 on tablet AND phone (client asked for 2-up on both, so the tiles stay large enough to read). ============================================================ */ @media (min-width: 1200px) { html body.home .elementor-element-46e3ec0 .wd-carousel, html body.home .elementor-element-8150b32 .wd-carousel, html body.home .elementor-element-4d5ed99 .wd-carousel { --wd-col: 4 !important; } } /* Tablet and phone share the same 2-up layout. */ @media (max-width: 1199px) { html body.home .elementor-element-46e3ec0 .wd-carousel, html body.home .elementor-element-8150b32 .wd-carousel, html body.home .elementor-element-4d5ed99 .wd-carousel { --wd-col: 2 !important; } } /* ============================================================ OTHER PAGES — footer spacing, archive cards, sorting (client round v2.6) ============================================================ */ /* Footer was touching the content on non-home pages. That was a side effect of collapsing .wd-prefooter to close the home page's reviews->footer gap: the prefooter is the theme's only spacer before the footer, so removing it left category/collection pages with the footer overlapping by 40px. Home keeps the tight treatment; every other page gets breathing room. */ html body:not(.home) .wd-footer { margin-top: 56px !important; } /* Hide WooCommerce's native "Sort by latest" dropdown ONLY where our own filter bar already provides a SORT control — otherwise the page shows two different sort widgets. :has() makes this conditional rather than guessing per page type, so shop / category / collection each do the right thing: the native dropdown survives anywhere the custom bar is not rendered. */ html body:has(.dilan-cf-row) .woocommerce-ordering, html body:has(.dilan-cf-sort) .woocommerce-ordering { display: none !important; } /* Archive product cards (category / collection / shop): same treatment as the home cards — whole photo visible (contain), shorter box, compact caption. */ html body.woocommerce.archive .wd-product .product-image-link, html body.woocommerce.archive .wd-product .product-image-link img, html body.woocommerce.archive .wd-product .wd-product-thumb img, html body.woocommerce.archive .wd-product .hover-img img { aspect-ratio: 0.71 !important; height: auto !important; object-fit: cover !important; } html body.woocommerce.archive .wd-product .product-information, html body.woocommerce.archive .wd-product .wd-product-header { padding-top: 8px !important; padding-bottom: 8px !important; } html body.woocommerce.archive .wd-product .wd-entities-title { margin: 0 0 4px !important; line-height: 1.25 !important; font-size: 13px !important; } html body.woocommerce.archive .wd-product .price { margin: 0 !important; line-height: 1.2 !important; } /* ============================================================ ARCHIVE LAYOUT POLISH (client round v2.7) ============================================================ */ /* Narrower filter sidebar so the products get more room. */ @media (min-width: 1025px) { html body.woocommerce.archive .wd-sidebar.sidebar-container { width: 230px !important; flex: 0 0 230px !important; max-width: 230px !important; } html body.woocommerce.archive .wd-content-area.site-content { flex: 1 1 0 !important; width: auto !important; max-width: none !important; } html body.woocommerce.archive .wd-sidebar .widget-title, html body.woocommerce.archive .wd-sidebar .widgettitle { font-size: 13px !important; } html body.woocommerce.archive .wd-sidebar li { padding-top: 5px !important; padding-bottom: 5px !important; } } /* Equal-height cards: the price is pinned to the bottom of the card, so every price in a row lines up even when titles run to one or two lines. Measured: all four prices in a row at the same y. */ html body.woocommerce .wd-product { display: flex !important; flex-direction: column !important; height: 100% !important; } html body.woocommerce .wd-product .product-information { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } html body.woocommerce .wd-product .price { margin-top: auto !important; } /* Size pills must NOT make a card taller than its neighbours. Float them over the bottom of the photo instead of adding a row under it. Measured: card with pills 439px -> 383px (a card without pills is 371px). */ html body.woocommerce .wd-product .product-element-top, html body.woocommerce .wd-product .wd-product-thumb { position: relative !important; } html body.woocommerce .wd-product .dj-attr-wrap.dj-card-pills { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 6px !important; z-index: 6 !important; margin: 0 !important; padding: 5px 0 !important; background: rgba(255,255,255,.9) !important; } html body.woocommerce .wd-product .dj-card-pills .dj-attr-label { display: none !important; } /* ============================================================ SECTION HEIGHT + MOBILE FIXES (client round v2.8) ============================================================ */ /* Trim the SECTION chrome, not the photo: heading block, carousel padding and the space under each card. The image keeps its full 0.71 size. */ /* ⚠️ SPECIFICITY: `body.home .e-con.e-parent` (3 classes) sets 14px and beats a plain `html body.home .elementor-element-XXX` (2 classes). The element class is therefore combined WITH .e-con.e-parent so these actually win. 26px keeps a clear break between sections — 10px made them run together. */ html body.home .e-con.e-parent.elementor-element-46e3ec0, html body.home .e-con.e-parent.elementor-element-8150b32, html body.home .e-con.e-parent.elementor-element-4d5ed99 { padding-top: 26px !important; padding-bottom: 26px !important; } html body.home .elementor-element-46e3ec0 .elementor-widget-heading, html body.home .elementor-element-8150b32 .elementor-widget-heading, html body.home .elementor-element-4d5ed99 .elementor-widget-heading { margin-bottom: 6px !important; } html body.home .wd-carousel-container, html body.home .wd-carousel { padding-top: 0 !important; padding-bottom: 0 !important; } html body.home .wd-product .product-information, html body.home .wd-product .wd-product-header { padding-top: 6px !important; padding-bottom: 6px !important; } /* ---- Mobile ---- */ @media (max-width: 768px) { /* Banner was 388px tall because the wide desktop image is cropped into a tall box on phones. 280px keeps it a banner, not half the screen. */ html body .wd-slider, html body .wd-slider .wd-slide, html body .wd-slider .swiper-slide, html body .wd-slider img { height: 280px !important; max-height: 280px !important; } html body .wd-slider img { object-fit: cover !important; } /* "Join us on Instagram…" was set to nowrap at 16px, so it measured 487px inside a 390px screen and was clipped at both ends. Let it wrap. */ html body .dilan-promo-cta__heading, html body .dilan-promo-cta__head, html body .elementor-heading-title { white-space: normal !important; font-size: 15px !important; line-height: 1.35 !important; overflow-wrap: break-word !important; } } /* ============================================================ SHOP / CATEGORY CONSOLIDATION (client round v2.9) ============================================================ */ /* Hide the "Explore Categories" tile block on the shop and category archives — the customer is already inside a category there, and the filter sidebar covers navigation. (It lives on /shop/, not on individual category pages.) */ html body.post-type-archive-product .dilan-cat-style, html body.tax-product_cat .dilan-cat-style { display: none !important; } /* Give the product grid more width. ⚠️ This layout is a 12-COLUMN CSS GRID: the sidebar is `span 3` and the content `span 9`. Replacing grid-template-columns with a 2-column track list left the content with nowhere to span, so it wrapped BELOW the 3500px-tall sidebar and the shop looked empty. Keep the 12 tracks and change the SPANS instead. Measured: content 922px -> 1029px, sidebar and content back on the same row. */ @media (min-width: 1025px) { html body.woocommerce .wd-content-layout.content-layout-wrapper { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: 26px !important; } html body.woocommerce .wd-content-layout .wd-sidebar.sidebar-container { grid-column: auto / span 2 !important; } html body.woocommerce .wd-content-layout .wd-content-area.site-content { grid-column: auto / span 10 !important; } } /* Price centred under the product name. ⚠️ A child-theme rule scoped to the New Arrivals widget (.elementor-element-9c01e07 … .price) forces text-align:left with !important, so this has to repeat that selector to outrank it. */ html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .price, html body .wd-products .wd-product .price, html body .wd-product .price { text-align: center !important; } /* New Arrivals is a free-scroll carousel, so it stops mid-card and looks misaligned next to the snapping ones. Snap it to card edges. */ html body.home .elementor-element-8150b32 .wd-carousel-wrap { scroll-snap-type: x mandatory !important; } html body.home .elementor-element-8150b32 .wd-carousel-item { scroll-snap-align: start !important; } /* ---- Card caption centred: NAME as well as price (client round v3.0) ---- The child theme forces text-align:left on the New Arrivals widget's titles (.elementor-element-9c01e07 … .wd-entities-title), so that selector has to be repeated here to be outranked. */ html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title, html body .wd-product .wd-entities-title, html body .wd-product .product-information, html body .wd-product .wd-product-header { text-align: center !important; } /* ---- "Shop by Budget": breathing room at the left and right edges ---- The tiles ran flush to both sides of the screen. */ html body.home .e-con.e-parent.elementor-element-fc08860 { padding-left: 26px !important; padding-right: 26px !important; } @media (max-width: 768px) { html body.home .e-con.e-parent.elementor-element-fc08860 { padding-left: 14px !important; padding-right: 14px !important; } } /* ---- Product page: justify the descriptive copy (client round v3.1) ---- Applies to the tab content (Description / Returns / Care / Shipping) and the short description, so paragraphs align on both edges. Headings and the specification tables are left alone. */ html body.single-product .woocommerce-Tabs-panel p, html body.single-product .wc-tab p, html body.single-product .woocommerce-product-details__short-description p, html body.single-product .wd-accordion-content p, html body.single-product .wd-tab-content p { text-align: justify !important; text-justify: inter-word !important; hyphens: auto !important; } /* ---- Smaller card caption so cards get shorter (client round v3.2) ---- Name and price both come down a step, with tighter line-height. Applies on the home carousels and the shop/category grids. */ html body .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title { font-size: 11.5px !important; line-height: 1.2 !important; margin: 0 0 3px !important; } html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price del, html body .wd-products .wd-product .price { font-size: 12px !important; line-height: 1.15 !important; } html body .wd-product .product-information, html body .wd-product .wd-product-header { padding-top: 5px !important; padding-bottom: 5px !important; } /* ============================================================ PRODUCT PAGE ROUND (client items 5, 10, 11) ============================================================ */ /* (5) Description and tab copy: smaller + justified. */ html body.single-product .woocommerce-Tabs-panel, html body.single-product .wc-tab, html body.single-product .wd-accordion-content, html body.single-product .dilan-tab-from-page { font-size: 13.5px !important; line-height: 1.7 !important; } html body.single-product .woocommerce-Tabs-panel p, html body.single-product .wc-tab p, html body.single-product .wd-accordion-content p, html body.single-product .dilan-tab-from-page p, html body.single-product .woocommerce-product-details__short-description p { font-size: 13.5px !important; text-align: justify !important; text-justify: inter-word !important; } html body.single-product .dilan-tab-from-page li { font-size: 13.5px !important; } html body.single-product .dilan-tab-from-page h2 { font-size: 16px !important; } html body.single-product .dilan-tab-from-page h3 { font-size: 14.5px !important; } html body.single-product .dilan-tab-more { text-align: right !important; margin-top: 10px !important; } html body.single-product .dilan-tab-more a { color: #7B1E28 !important; font-weight: 600 !important; } /* (10) Remove the Facebook / Pinterest (and other) share buttons. */ html body.single-product .wd-social-icons, html body.single-product .product-share, html body.single-product .wd-product-share, html body.single-product .social-share, html body.single-product .wd-social-icons.wd-style-default { display: none !important; } /* (11) "You may also like" / related headings: centred, gold, serif. */ html body.single-product .related.products > h2, html body.single-product .up-sells > h2, html body.single-product .related-and-upsells h2, html body.single-product .wd-products-element > h2, html body.single-product section.related > h2, html body.single-product .cross-sells > h2 { text-align: center !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; color: #B08D57 !important; font-size: 24px !important; letter-spacing: .16em !important; text-transform: uppercase !important; font-weight: 500 !important; margin-bottom: 18px !important; } /* ---- Card titles: bold, everywhere (client round v3.3) ---- The name already used the category serif and was already centred; what was missing was weight, and the smaller size only applied on the home page. These selectors are unscoped so the shop, category, collection and the related-products strip on a product page all match. */ html body .wd-product .wd-entities-title, html body .wd-product .wd-entities-title a, html body .wd-products .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title a, html body.single-product .related .wd-product .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-weight: 700 !important; font-size: 12px !important; line-height: 1.25 !important; text-align: center !important; letter-spacing: .2px !important; } html body .wd-product .price, html body .wd-products .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.single-product .related .wd-product .price { font-size: 12px !important; line-height: 1.2 !important; text-align: center !important; } /* ---- Card title centring, the real fix (client round v3.4) ---- ⚠️ .wd-entities-title is display:flex. A flex container IGNORES text-align — its children are laid out by justify-content — which is why "text-align:center" computed correctly yet the name still sat on the left. */ html body .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title { justify-content: center !important; align-items: center !important; text-align: center !important; } /* ---- Single product title: same serif as the category headings ---- */ html body.single-product .product_title, html body.single-product .summary .product_title, html body.single-product h1.product_title { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-weight: 600 !important; letter-spacing: .5px !important; color: #2B2118 !important; } /* SITE-WIDE TYPOGRAPHY — REVERTED. A global serif override was applied here and then removed: forcing font-family across the page also hit the icon fonts (WoodMart draws its search / wishlist / cart glyphs with font-family: woodmart-font), so the header icons rendered as empty boxes. The theme's own fonts are left alone. Card titles and the product title still use the category serif via their own targeted rules further up — those are scoped to text elements only. */ /* ---- Category serif on product NAME + PRICE (client round v3.6) ---- Scoped deliberately to text elements only — the card title, the card price and the single-product price. No wildcard, no body rule, nothing with a ::before, so icon fonts cannot be affected the way the reverted global rule affected them. Covers Best Sellers and New Arrivals on the home page, the shop/category grids and the product page (including the related-products strip). */ html body .wd-product .wd-entities-title, html body .wd-product .wd-entities-title a, html body .wd-products .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title a, html body .elementor-element-46e3ec0 .wd-product .wd-entities-title, html body .elementor-element-8150b32 .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title, html body.single-product .related .wd-product .wd-entities-title { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-weight: 700 !important; } html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price del, html body .wd-product .price .woocommerce-Price-amount, html body .elementor-element-46e3ec0 .wd-product .price, html body .elementor-element-8150b32 .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.single-product .summary > .price, html body.single-product .summary > .price bdi, html body.single-product .summary > .price ins, html body.single-product .summary > .price del, html body.single-product .related .wd-product .price { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; } /* ---- Prices: serif + bold, including the single product page (v3.7) ---- The single-product price sits deeper than `.summary > .price`, so the earlier child-combinator selector missed it and it stayed on Lato. Broadened, and the struck-through original stays lighter so the live price still leads. */ html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price ins bdi, html body .wd-product .price .woocommerce-Price-amount, html body.single-product .summary .price, html body.single-product .summary .price bdi, html body.single-product .summary .price ins, html body.single-product .summary .price ins bdi, html body.single-product .summary .price .woocommerce-Price-amount, html body.woocommerce.archive .wd-product .price, html body.woocommerce.archive .wd-product .price bdi { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-weight: 700 !important; } html body .wd-product .price del, html body .wd-product .price del bdi, html body.single-product .summary .price del, html body.single-product .summary .price del bdi { font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; font-weight: 400 !important; } /* Related-products cards on a product page were rendering their price at weight 500 while every other price is 700 — match them up. */ html body.single-product .related .wd-product .price, html body.single-product .related .wd-product .price bdi, html body.single-product .related .wd-product .price ins, html body.single-product .up-sells .wd-product .price, html body.single-product .up-sells .wd-product .price bdi { font-weight: 700 !important; } html body.single-product .related .wd-product .price del, html body.single-product .up-sells .wd-product .price del { font-weight: 400 !important; } /* ---- "You may also like" styled like the home section headings (v3.8) ---- Same "✦ ───── TITLE ───── ✦" ornament used by Shop by Categories / Watch & Shop / Google Reviews, so the product page matches the rest of the site. */ html body.single-product .related > h2, html body.single-product .up-sells > h2, html body.single-product section.related > h2, html body.single-product .cross-sells > h2, html body.single-product .dilan-recently-viewed .dilan-pp-head { display: block !important; text-align: center !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; color: var(--dilan-gold-dark, #C8A05D) !important; font-size: 24px !important; font-weight: 400 !important; letter-spacing: .16em !important; text-transform: uppercase !important; margin: 34px 0 20px !important; } html body.single-product .related > h2::before, html body.single-product .up-sells > h2::before, html body.single-product section.related > h2::before, html body.single-product .cross-sells > h2::before, html body.single-product .dilan-recently-viewed .dilan-pp-head::before { content: "✦ ─────"; font-family: Georgia, serif; font-weight: 400; color: var(--dilan-gold-dark, #C8A05D); font-size: .82em; letter-spacing: 0; margin-right: .45em; vertical-align: middle; } html body.single-product .related > h2::after, html body.single-product .up-sells > h2::after, html body.single-product section.related > h2::after, html body.single-product .cross-sells > h2::after, html body.single-product .dilan-recently-viewed .dilan-pp-head::after { content: "───── ✦"; font-family: Georgia, serif; font-weight: 400; color: var(--dilan-gold-dark, #C8A05D); font-size: .82em; letter-spacing: 0; margin-left: .45em; vertical-align: middle; } /* ---- "You may also like" — correct selector (v3.9) ---- The heading is H2.wd-el-title inside .related-products, NOT `.related > h2`, which is why the earlier rule matched nothing. And like the card titles it is display:flex, so text-align does nothing — it needs justify-content. */ html body.single-product .related-products .wd-el-title, html body.single-product .related-and-upsells .wd-el-title, html body.single-product .wd-carousel-container .wd-el-title, html body.single-product .dilan-recently-viewed .dilan-pp-head { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: .45em !important; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif !important; color: var(--dilan-gold-dark, #C8A05D) !important; font-size: 24px !important; font-weight: 400 !important; letter-spacing: .16em !important; text-transform: uppercase !important; margin: 34px 0 20px !important; } html body.single-product .related-products .wd-el-title::before, html body.single-product .related-and-upsells .wd-el-title::before, html body.single-product .wd-carousel-container .wd-el-title::before, html body.single-product .dilan-recently-viewed .dilan-pp-head::before { content: "✦ ─────"; font-family: Georgia, serif; font-weight: 400; font-size: .82em; letter-spacing: 0; color: var(--dilan-gold-dark, #C8A05D); } html body.single-product .related-products .wd-el-title::after, html body.single-product .related-and-upsells .wd-el-title::after, html body.single-product .wd-carousel-container .wd-el-title::after, html body.single-product .dilan-recently-viewed .dilan-pp-head::after { content: "───── ✦"; font-family: Georgia, serif; font-weight: 400; font-size: .82em; letter-spacing: 0; color: var(--dilan-gold-dark, #C8A05D); } /* ---- Product tags as badges (v4.0) ---- The tag list rendered as a long comma-separated paragraph that read like body copy. Each tag becomes a rounded pill instead, and the separating commas are suppressed. The "Tags:" label stays as a normal label. */ html body.single-product .tagged_as, html body.single-product .product_meta .tagged_as { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; line-height: 1.6 !important; font-size: 0 !important; /* kills the stray commas between links */ } html body.single-product .tagged_as > span:first-child, html body.single-product .tagged_as .meta-label, html body.single-product .tagged_as .wd-meta-label { font-size: 13px !important; font-weight: 600 !important; color: #2B2118 !important; margin-right: 2px !important; } html body.single-product .product_meta span.tagged_as a[rel="tag"], html body.single-product span.tagged_as a[rel="tag"], html body.single-product .tagged_as a { display: inline-block !important; font-size: 12px !important; line-height: 1.2 !important; padding: 5px 12px !important; border: 1px solid rgba(176,141,87,.45) !important; border-radius: 20px !important; background: #FBF8F3 !important; color: #7B1E28 !important; text-decoration: none !important; transition: background .18s ease, color .18s ease, border-color .18s ease; } html body.single-product .tagged_as a:hover { background: #7B1E28 !important; border-color: #7B1E28 !important; color: #fff !important; } /* ---- Size Guide tab: collapsible chart panels (v4.1) ---- */ html body.single-product .dj-sg { font-size: 13.5px; } html body.single-product .dj-sg-item { border: 1px solid #e7ddcf; border-radius: 8px; margin: 0 0 12px; background: #fff; overflow: hidden; } html body.single-product .dj-sg-item > summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 18px; position: relative; font-family: Georgia, "Cormorant Garamond", "Playfair Display", serif; font-size: 16px; font-weight: 600; color: #2B2118; background: #FBF8F3; } html body.single-product .dj-sg-item > summary::-webkit-details-marker { display: none; } html body.single-product .dj-sg-item > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #B08D57; line-height: 1; } html body.single-product .dj-sg-item[open] > summary::after { content: "\2013"; } html body.single-product .dj-sg-body { padding: 16px 18px 18px; } html body.single-product .dj-sg-steps { margin: 0 0 12px 1.1em; padding: 0; line-height: 1.9; } html body.single-product .dj-sg-steps li { font-size: 13.5px; text-align: left !important; } html body.single-product .dj-sg-vid a { color: #7B1E28; font-weight: 600; } html body.single-product .dj-sg-note { background: #FBF8F3; border-left: 3px solid #B08D57; padding: 10px 14px; margin: 12px 0; border-radius: 6px; text-align: left !important; } html body.single-product .dj-sg-table { border-collapse: collapse; width: 100%; max-width: 520px; margin: 12px 0 4px; font-size: 13px; } html body.single-product .dj-sg-table th, html body.single-product .dj-sg-table td { border: 1px solid #e7ddcf; padding: 8px 12px; text-align: left; } html body.single-product .dj-sg-table thead th { background: #FBF8F3; color: #7B1E28; font-weight: 600; } html body.single-product .dj-sg-help { margin-top: 14px; text-align: left !important; } html body.single-product .dj-sg-help a { color: #7B1E28; font-weight: 600; } /* Header tools spacing — REVERTED to the theme default. The ask was to move the account/icon group further right, but it is already flush against the right edge of the header container, so there is nowhere to move it to. Widening the gap inside the group was the wrong answer, so it has been removed and the icons sit together again as before. */ /* Tag badges are now non-clickable elements (converted in PHP so they aren't focusable or announced as links). Same pill styling as the anchors had; the hover state is dropped since there is nothing to click. */ html body.single-product .tagged_as .dj-tag { display: inline-block !important; font-size: 12px !important; line-height: 1.2 !important; padding: 5px 12px !important; border: 1px solid rgba(176,141,87,.45) !important; border-radius: 20px !important; background: #FBF8F3 !important; color: #7B1E28 !important; cursor: default !important; } /* ============================================================ v4.3 — Shop by Budget tiles clickable again The tiles each carry WoodMart's full-tile overlay link: which only works while it is absolutely positioned over the image. The sizing block above ("Every inner wrapper fills the locked cell") matches `.dilan-budget-row > * a`, so it was also hitting that overlay and forcing position:relative + height:100% on it. That dropped the link into normal flow behind the image inside an overflow:hidden box — visually identical, but nothing to click. Put the overlay back where it belongs. ============================================================ */ .dilan-budget-row > * a.wd-promo-banner-link, .dilan-budget-row > * a.wd-fill, .dilan-budget-row a.wd-promo-banner-link { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; z-index: 6 !important; /* above image and caption plate */ pointer-events: auto !important; overflow: visible !important; } /* The tile is the positioning context for that overlay. */ .dilan-budget-row > * .promo-banner, .dilan-budget-row > * .banner-inner { position: relative !important; } /* The visible "UNDER ₹1500" button is a real link too — keep it on top so a tap on the label works as well as a tap anywhere else on the tile. */ .dilan-budget-row > * .banner-btn-wrapper, .dilan-budget-row > * .wd-button-wrapper, .dilan-budget-row > * .content-banner { position: relative !important; z-index: 7 !important; pointer-events: auto !important; } .dilan-budget-row > * a.btn { pointer-events: auto !important; position: relative !important; z-index: 8 !important; width: auto !important; height: auto !important; } /* ============================================================ v4.4 — Product name & price in Times New Roman; price one step larger Replaces the Georgia stack used since v3.4 on card names and prices. Georgia is set wider and heavier by design, so at the same pixel size Times reads noticeably smaller — which is why the price also moves 12px → 13px rather than staying put. Declared last and with the same "html body …" specificity as the rules it supersedes, so it wins on source order without another round of !important escalation. Covers the home carousels, shop and category grids, the related strip, and the single product page. ============================================================ */ /* ---- Product NAME ---- */ html body .wd-product .wd-entities-title, html body .wd-product .wd-entities-title a, html body .wd-products .wd-product .wd-entities-title, html body .wd-products .wd-product .wd-entities-title a, html body .elementor-element-46e3ec0 .wd-product .wd-entities-title, html body .elementor-element-8150b32 .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title, html body.single-product .related .wd-product .wd-entities-title, html body.single-product .up-sells .wd-product .wd-entities-title, html body.single-product .product_title { font-family: "Times New Roman", Times, serif !important; } /* ---- Product PRICE — same family, one step up from 12px ---- */ html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price ins bdi, html body .wd-product .price del, html body .wd-product .price del bdi, html body .wd-product .price .woocommerce-Price-amount, html body .wd-products .wd-product .price, html body .elementor-element-46e3ec0 .wd-product .price, html body .elementor-element-8150b32 .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.woocommerce.archive .wd-product .price bdi, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price, html body.single-product .summary .price, html body.single-product .summary .price bdi, html body.single-product .summary .price ins, html body.single-product .summary .price ins bdi, html body.single-product .summary .price del, html body.single-product .summary .price .woocommerce-Price-amount { font-family: "Times New Roman", Times, serif !important; } /* Size bump applies to the CARD price only. The single product page sets its own larger size, and raising that too would throw the summary out of balance. */ html body .wd-product .price, html body .wd-products .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price { font-size: 13px !important; } /* ============================================================ v4.5 — Cards WITH size pills: tighter caption, taller photo, same card height Only cards that actually render pills are touched (`:has(.dj-card-pills)`), so plain cards keep the spacing already signed off. The trade is deliberate: roughly 13px of dead space is taken out of the caption (pill row bottom margin, the name's top margin, and the price's) and the SAME amount is given back to the photo by making its box slightly taller. Card height therefore stays where it is instead of growing. Ratios are width/height, so a SMALLER number is a TALLER box: archive 0.71 -> 0.69 (about +13px on a 330px-wide card) home 0.79 -> 0.766 (same gain, different starting box) ============================================================ */ /* ---- Photo gets the reclaimed height ---- */ html body.woocommerce.archive .wd-product:has(.dj-card-pills) .product-image-link, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .product-image-link img, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .wd-product-thumb img, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .hover-img img { aspect-ratio: 0.69 !important; } html body.home .wd-product:has(.dj-card-pills) .product-image-link, html body.home .wd-product:has(.dj-card-pills) .product-image-link img, html body.home .wd-product:has(.dj-card-pills) .wd-product-thumb img, html body.home .wd-product:has(.dj-card-pills) .hover-img img { aspect-ratio: 0.766 !important; } /* ---- Pill row hugs the name instead of floating between it and the photo ---- */ html body .wd-product .dj-attr-wrap.dj-card-pills { margin: 4px 0 0 !important; } html body .wd-product .dj-card-pills .dj-pills { margin: 0 !important; } html body .wd-product .dj-card-pills .dj-attr-label { margin: 0 0 3px !important; } /* ---- Name sits closer under the pills ---- */ html body .wd-product:has(.dj-card-pills) .wd-entities-title { margin-top: 3px !important; margin-bottom: 2px !important; } /* ---- Price lifted a few pixels ---- */ html body .wd-product:has(.dj-card-pills) .price { margin-top: -4px !important; } /* ============================================================ v4.6 — Single product page: smaller name and price Measured on dev at a 1600px viewport before changing anything: .product_title 27.6px (theme uses a fluid size, hence the odd value) .summary .price 14px .summary .price del 12.6px The title is capped rather than given one fixed pixel value, so it still shrinks on narrow screens instead of wrapping to three lines on a phone. ============================================================ */ html body.single-product .product_title, html body.single-product .summary .product_title, html body.single-product h1.product_title { font-size: clamp(17px, 1.5vw, 22px) !important; /* was ~27.6px at 1600px */ line-height: 1.25 !important; } html body.single-product .summary .price, html body.single-product .summary .price bdi, html body.single-product .summary .price ins, html body.single-product .summary .price ins bdi, html body.single-product .summary .price .woocommerce-Price-amount { font-size: 13px !important; /* was 14px */ } /* The struck-out original stays a step below the live price, as before. */ html body.single-product .summary .price del, html body.single-product .summary .price del bdi, html body.single-product .summary .price del .woocommerce-Price-amount { font-size: 12px !important; } /* ============================================================ v4.7 — Times runs small: size corrections, and a bigger product photo Times New Roman is a narrower, lighter face than the Georgia it replaced, so every size carried over from v4.4/v4.6 reads a step smaller than it measures. These are the corrected sizes, not new design decisions. card name 12px -> 14px card price 13px -> 15px product name 22px -> 24px cap product price 13px -> 16px (13px was too small on screen) Also fixes the product title, which stayed Georgia: the old rule included `html body.single-product h1.product_title` (0,2,3) and beat the v4.4 replacement (0,2,2). Matching the h1 here settles it. ============================================================ */ /* ---- Card name ---- */ html body .wd-product .wd-entities-title, html body .wd-product .wd-entities-title a, html body .wd-products .wd-product .wd-entities-title, html body .elementor-element-46e3ec0 .wd-product .wd-entities-title, html body .elementor-element-8150b32 .wd-product .wd-entities-title, html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title, html body.single-product .related .wd-product .wd-entities-title { font-size: 15px !important; } /* ---- Card price ---- */ html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price ins bdi, html body .wd-product .price .woocommerce-Price-amount, html body .wd-products .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.woocommerce.archive .wd-product .price bdi, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price { font-size: 17px !important; } html body .wd-product .price del, html body .wd-product .price del bdi, html body.woocommerce.archive .wd-product .price del { font-size: 14px !important; /* struck-out original stays a step behind */ } /* ---- Product page: title in Times, and one size up ---- */ html body.single-product h1.product_title, html body.single-product .summary h1.product_title, html body.single-product .summary .product_title, html body.single-product .product_title { font-family: "Times New Roman", Times, serif !important; font-size: clamp(19px, 1.7vw, 24px) !important; } /* ---- Product page: price back up, 16px ---- */ html body.single-product .summary .price, html body.single-product .summary .price bdi, html body.single-product .summary .price ins, html body.single-product .summary .price ins bdi, html body.single-product .summary .price .woocommerce-Price-amount { font-size: 16px !important; } html body.single-product .summary .price del, html body.single-product .summary .price del bdi, html body.single-product .summary .price del .woocommerce-Price-amount { font-size: 14px !important; } /* ============================================================ Bigger product photo — by widening its column, not by stretching Measured: the row is a 12-column grid split 6/6. The gallery column is 581px, of which the vertical thumbnail strip takes 122px, leaving 459px for the photo. Product photos are 700x980 (ratio 0.714), so the photo is limited by WIDTH, not height — it is already at full natural proportion. Stretching it would distort it; the only honest way to make it taller is to give the column more room. Moving the split to 7/5 takes the photo to roughly 556px wide and 779px tall (was 459x629, so about +150px of height) with no cropping. The summary still has ~484px, which comfortably holds the title, price, size pills and button. Desktop only — below 1025px the theme stacks the two columns and these spans must not interfere. ============================================================ */ @media (min-width: 1025px) { html body.single-product .product-image-summary-inner > .product-images { grid-column: auto / span 7 !important; } html body.single-product .product-image-summary-inner > .summary { grid-column: auto / span 5 !important; } } /* ============================================================ v4.8 — Close the gap between the card name and its price Measured on a category card: 16px sits between the name and the price, and it comes from two places, not one — .wd-product-wrapper is a flex COLUMN with gap: 12px .wd-entities-title adds margin-bottom: 4px which is why nudging only the price margin earlier barely moved it. The name's bottom margin goes to 0 and the price is lifted 6px, leaving about 6px between them. The wrapper's 12px gap is left alone because it also spaces the photo from the name, and that spacing is already approved. Both plain and pill cards are listed so this beats the narrower v4.5 rule, whose `:has()` selector scores higher than a plain class chain. ============================================================ */ html body .wd-product .wd-entities-title, html body .wd-product:has(.dj-card-pills) .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title { margin-bottom: 0 !important; } html body .wd-product .price, html body .wd-product:has(.dj-card-pills) .price, html body.woocommerce.archive .wd-product .price, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price { margin-top: -6px !important; } /* ============================================================ v4.9 — Card struck-out price stayed at the live-price size v4.7 set `.price del` to 14px, but the number itself lives in a nested .woocommerce-Price-amount, and the 17px rule matches that element directly: html body .wd-product .price .woocommerce-Price-amount -> (0,3,2) WINS html body .wd-product .price del -> (0,2,3) Class count is compared before element count, so 3 classes beat 2 and the old price rendered at the full 17px. Matching the amount inside `del` settles it — this is the same trap the product page avoided only because its rule already named the nested element. ============================================================ */ html body .wd-product .price del, html body .wd-product .price del bdi, html body .wd-product .price del .woocommerce-Price-amount, html body .wd-products .wd-product .price del .woocommerce-Price-amount, html body.woocommerce.archive .wd-product .price del .woocommerce-Price-amount, html body.single-product .related .wd-product .price del .woocommerce-Price-amount, html body.single-product .up-sells .wd-product .price del .woocommerce-Price-amount { font-size: 14px !important; } /* ============================================================ v5.0 — Filter sidebar must never spill onto the product grid Reported at 125% browser zoom on a 1920 screen. Browser zoom does not scale the layout as a picture — it changes the effective CSS viewport, so 1920 at 125% behaves as a ~1536px screen and every responsive rule re-evaluates. The fix is therefore not "ignore zoom", it is to make the sidebar safe at ANY width so no zoom level can break it. Measured at 1536: the sidebar column is 230px but its content needs 245px (scrollWidth 245 vs clientWidth 230). The row is `a { display: flex }` holding the label and the count badge, and a flex item will not shrink below its content by default — so the badge is pushed past the column edge and lands on the first product card. Three things make it structural rather than width-specific: 1. min-width: 0 on the column and the row, which lets flex actually shrink. 2. The label may wrap; the badge is fixed-size and never shrinks. 3. The badge is pinned to the right with margin-left: auto instead of relying on leftover space that does not exist at narrow widths. ============================================================ */ html body .wd-sidebar, html body .wd-sidebar .widget, html body .sidebar-container, html body .sidebar-container .widget { min-width: 0 !important; } /* The row: label shrinks and wraps, badge holds its size on the right. */ html body .wd-sidebar li > a, html body .sidebar-container li > a { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; } html body .wd-sidebar li > a .dilan-cat-count, html body .sidebar-container li > a .dilan-cat-count { flex: 0 0 auto !important; /* never squashed, never stretched */ margin-left: auto !important; /* sits at the right edge of the row itself */ } /* Belt and braces: nothing inside the sidebar may render wider than the column, whatever a widget or plugin adds later. */ html body .wd-sidebar > *, html body .sidebar-container > * { max-width: 100% !important; } /* ============================================================ v5.1 — The sidebar overlap: a fixed width on a fluid column Measured, sidebar right edge vs content left edge: 1536px viewport sidebar 61..291 content starts 298 ok, 7px clear 1440px viewport sidebar 58..288 content starts 280 OVERLAPS by 8px Cause is the width set when the sidebar was narrowed earlier: .wd-sidebar.sidebar-container { width:230px; flex:0 0 230px; max-width:230px } 230px is fine while the column is wider than that (1920), but the column shrinks with the viewport and the fixed width does not, so from about 1500px down the sidebar simply sticks out over the product grid. Same intent, expressed as a CEILING instead of a fixed size: still no wider than 230px on big screens, but free to shrink with its column below that. ============================================================ */ @media (min-width: 1025px) { html body.woocommerce.archive .wd-sidebar.sidebar-container, html body.woocommerce .wd-sidebar.sidebar-container { width: 100% !important; flex: 1 1 auto !important; max-width: 230px !important; min-width: 0 !important; } } /* ---- Price slider handle hung 15px outside the column ---- The handle is a 30px circle centred on the track end, so half of it sits beyond the track. Insetting the track by half a handle keeps both handles inside the sidebar at every width. */ html body .wd-sidebar .price_slider_wrapper, html body .sidebar-container .price_slider_wrapper, html body .wd-sidebar .widget_price_filter .price_slider_wrapper { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; } /* ============================================================ v5.2 — Best Sellers / New Arrivals: name-to-price gap (the home-page case) v4.8 closed this gap on category pages but not on the home carousels, because the home cards are styled by an earlier `body.home` block: html body.home .wd-product .wd-entities-title -> (0,3,2) WINS html body .wd-product .wd-entities-title -> (0,2,2) v4.8 `body.home` adds a third class, so v4.8 never applied there and the caption kept margin-bottom:3px with no lift on the price. Measured on Best Sellers before this change: wrapper flex gap 12px + title margin-bottom 3px = 15px between them, and the price sat flush against the bottom of the card (0px below it). Taking the title margin to 0 and lifting the price 7px leaves about 5px between name and price, and lifts the price off the card's bottom edge. The wrapper's 12px gap is deliberately untouched — it also spaces the photo from the name, which is already approved. ============================================================ */ html body.home .wd-product .wd-entities-title, html body.home .wd-products .wd-product .wd-entities-title, html body.home .elementor-element-88a5374 .wd-product .wd-entities-title, html body.home .elementor-element-46e3ec0 .wd-product .wd-entities-title, html body.home .elementor-element-8150b32 .wd-product .wd-entities-title, html body.woocommerce.archive .wd-product .wd-entities-title, html body.single-product .related .wd-product .wd-entities-title { margin-bottom: 0 !important; } html body.home .wd-product .price, html body.home .wd-products .wd-product .price, html body.home .elementor-element-88a5374 .wd-product .price, html body.home .elementor-element-46e3ec0 .wd-product .price, html body.home .elementor-element-8150b32 .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price { margin-top: -7px !important; margin-bottom: 2px !important; /* lift it off the very bottom edge */ } /* ============================================================ v5.3 — Make BOTH home carousels use the same name/price spacing Measured after v5.2 went live: 88a5374 (one carousel) gap 5px <- v5.2 applied 9c01e07 > 8150b32 (the other) gap 15px <- v5.2 lost The second carousel is wrapped in elementor-element-9c01e07, and an older rule targets it as: html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product ... That chains 9c01e07 AND elementor-element on one node, giving 5 classes and beating v5.2's 4 — so the older margins stayed. Matching that shape here (same doubled class, same depth) puts both carousels on identical spacing, whichever one is showing Best Sellers on the day. The two sections have been swapped before, so pinning this to a section's meaning rather than its markup would only break again next time they move. ============================================================ */ html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body.home .elementor-element-9c01e07.elementor-element .wd-products .wd-product .wd-entities-title, html body .elementor-element-8150b32.elementor-element .wd-products .wd-product .wd-entities-title, html body .elementor-element-88a5374.elementor-element .wd-products .wd-product .wd-entities-title, html body .elementor-element-46e3ec0.elementor-element .wd-products .wd-product .wd-entities-title { margin-top: 0 !important; margin-bottom: 0 !important; } html body .elementor-element-9c01e07.elementor-element .wd-products .wd-product .price, html body.home .elementor-element-9c01e07.elementor-element .wd-products .wd-product .price, html body .elementor-element-8150b32.elementor-element .wd-products .wd-product .price, html body .elementor-element-88a5374.elementor-element .wd-products .wd-product .price, html body .elementor-element-46e3ec0.elementor-element .wd-products .wd-product .price { margin-top: -7px !important; margin-bottom: 2px !important; } /* ============================================================ v5.4 — Cards with size pills: close the pills-to-name gap Measured on /product-category/bangles/ after v5.3: pills -> name 18px <- the gap still visible name -> price 5px <- already correct So the name/price work was done; what remained is the space above the name. The 18px is the wrapper's 12px flex gap plus ~6px of leading, and the earlier v4.5 pill rule only nudged the pill row's own margins, which the flex gap ignores. A negative top margin on the name is what actually crosses a flex gap. -12px brings the pills within about 6px of the name, matching the 5px used between name and price so the caption reads as one block. Specificity: five classes (woocommerce + archive + wd-product + dj-card-pills + target), which clears both the v4.5 `:has()` rule and the theme's `.wd-products .product-grid-item .wd-entities-title { margin: 12px 0 6px }`. ============================================================ */ html body.woocommerce.archive .wd-product:has(.dj-card-pills) .wd-entities-title, html body.home .wd-product:has(.dj-card-pills) .wd-entities-title, html body.single-product .wd-product:has(.dj-card-pills) .wd-entities-title, html body .wd-products .wd-product:has(.dj-card-pills) .wd-entities-title { margin-top: -12px !important; margin-bottom: 0 !important; } /* The pill row itself sits tight under the photo, with no trailing space. */ html body.woocommerce.archive .wd-product .dj-attr-wrap.dj-card-pills, html body.home .wd-product .dj-attr-wrap.dj-card-pills, html body .wd-products .wd-product .dj-attr-wrap.dj-card-pills { margin: 0 !important; padding: 0 !important; } /* ============================================================ v5.5 — Mobile: stop cropping the piece in card photos Measured at 390px on /product-category/bangles/: photo natural 1500x2100 -> ratio 0.714 card image box 163x237 -> ratio 0.690 With object-fit: cover, a box narrower than the source crops the SIDES — about 3.7% of the width, ~1.9% off each edge. On a bangle or a wide necklace that clips the very part being sold. The 0.69 box was chosen on DESKTOP to buy back caption height (v4.5/v5.4). That trade does not apply on a phone: cards are already one or two per row with plenty of vertical room, and losing the edge of the piece costs more than a few pixels of height saves. So below 768px the box returns to 0.714 — the exact source ratio, meaning `cover` has nothing to crop and the whole piece is visible. Desktop keeps the tighter 0.69. (The single product gallery was checked at the same width and already crops 0% — it is not touched here.) ============================================================ */ @media (max-width: 767px) { html body.woocommerce.archive .wd-product .product-image-link, html body.woocommerce.archive .wd-product .product-image-link img, html body.woocommerce.archive .wd-product .wd-product-thumb img, html body.woocommerce.archive .wd-product .hover-img img, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .product-image-link, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .product-image-link img, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .wd-product-thumb img, html body.woocommerce.archive .wd-product:has(.dj-card-pills) .hover-img img, html body.home .wd-product .product-image-link, html body.home .wd-product .product-image-link img, html body.home .wd-product .wd-product-thumb img, html body.home .wd-product .hover-img img, html body.home .wd-product:has(.dj-card-pills) .product-image-link, html body.home .wd-product:has(.dj-card-pills) .product-image-link img, html body.home .wd-product:has(.dj-card-pills) .wd-product-thumb img, html body.home .wd-product:has(.dj-card-pills) .hover-img img, html body.single-product .related .wd-product .product-image-link img, html body.single-product .up-sells .wd-product .product-image-link img { aspect-ratio: 0.714 !important; /* 1500 / 2100 — the source ratio exactly */ height: auto !important; object-fit: cover !important; /* nothing left to crop at this ratio */ object-position: center !important; } } /* ============================================================ v5.6 — Size Guide: links in brand maroon "Clicking here" was rendering #333 — identical to the body text around it, so it did not read as a link at all. #7B1E28 is the maroon already used by the size pills, order tracker and video badge. Scoped by CONTENT, not by page id: `:has(.dj-size-table)` matches the page because it contains the size charts. A `page-id-42661` selector would work on dev and silently stop working on live, where the page gets a different id after migration. Underlined as well as coloured, so it is still identifiable as a link for anyone who cannot distinguish the colour. ============================================================ */ html body .wd-entry-content:has(.dj-size-table) a, html body .entry-content:has(.dj-size-table) a, html body .wd-entry-content:has(.dj-size-note) a, html body .entry-content:has(.dj-size-note) a { color: #7B1E28 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html body .wd-entry-content:has(.dj-size-table) a:hover, html body .entry-content:has(.dj-size-table) a:hover, html body .wd-entry-content:has(.dj-size-note) a:hover, html body .entry-content:has(.dj-size-note) a:hover { color: #5C161E !important; } /* The same links inside the product page's Size Guide tab. */ html body.single-product .dj-sg a, html body.single-product .dj-sg .dj-sg-vid a, html body.single-product .dj-sg .dj-sg-help a { color: #7B1E28 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html body.single-product .dj-sg a:hover { color: #5C161E !important; } /* ============================================================ v5.7 — Mobile: card price one step smaller 17px was set for desktop (v4.7) to compensate for Times New Roman reading smaller than the Georgia it replaced. On a phone the cards are far narrower, so the same 17px dominates the caption and outweighs the product name. Live price 17px -> 15px below 768px (16px was still reading heavy on a phone). The struck-out original moves 14px -> 13px with it, so the step between the two stays the same rather than the discount creeping up on the live price. Desktop is untouched. Covers every card: home carousels (Best Sellers, New Arrivals) and the category / collection / shop grids. ============================================================ */ @media (max-width: 767px) { html body .wd-product .price, html body .wd-product .price bdi, html body .wd-product .price ins, html body .wd-product .price ins bdi, html body .wd-product .price .woocommerce-Price-amount, html body .wd-products .wd-product .price, html body.home .wd-product .price, html body.home .elementor-element-88a5374.elementor-element .wd-products .wd-product .price, html body.home .elementor-element-8150b32.elementor-element .wd-products .wd-product .price, html body.home .elementor-element-9c01e07.elementor-element .wd-products .wd-product .price, html body.woocommerce.archive .wd-product .price, html body.woocommerce.archive .wd-product .price bdi, html body.single-product .related .wd-product .price, html body.single-product .up-sells .wd-product .price { font-size: 15px !important; } /* Struck-out original keeps its step below the live price. */ html body .wd-product .price del, html body .wd-product .price del bdi, html body .wd-product .price del .woocommerce-Price-amount, html body.woocommerce.archive .wd-product .price del .woocommerce-Price-amount { font-size: 13px !important; } } /* ============================================================ v5.8 — Mobile: hide the size pills on product cards On a phone the card is ~163px wide, so a row of size pills takes a full line of the caption for information the customer cannot act on until they open the product anyway. Desktop keeps them — there is room, and they are useful there. Scoped to category listings only, per the follow-up: the home carousels and the related-products strip are left alone. The negative title margin from v5.4 has to be undone at the same time: it exists to pull the name up across the flex gap TOWARDS the pills. With the pills gone that -12px would drag the name up into the photo instead. ============================================================ */ @media (max-width: 767px) { /* Category / collection / shop listings only — body.woocommerce.archive. The home carousels and the product page's related strip keep their pills. */ html body.woocommerce.archive .wd-product .dj-attr-wrap.dj-card-pills { display: none !important; } /* v5.4's -12px was measured against a pill row that is no longer there. */ html body.woocommerce.archive .wd-product:has(.dj-card-pills) .wd-entities-title { margin-top: 0 !important; } } /* ============================================================ v5.9 — Product card labels: stop them stacking on top of each other Measured on an out-of-stock card: .product-labels display:flex; flex-direction:column; gap:6px (79x24) .onsale position from our own rules, 0x0, transparent .out-of-stock static flex item, 79x24 The container already lays labels out as a column, but our earlier badge styling made the circular ones `position: absolute; top:14px; left:14px`. An absolutely positioned element is OUT of the flex flow, so the column has no idea it is there — the circle and the "Sold out" pill both end up pinned near the top-left corner, one drawn over the other. That is the overlap. Fix: let every label be a normal flex item and let the container do the stacking it was already configured to do. The old `top: 70px` nudge on nth-child(2) was a workaround for the same problem and is removed, since it would now push the second label away from the first. ============================================================ */ /* The container: an explicit column with room for the round badges. */ html body .products .product .product-labels, html body .wd-product .product-labels { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; width: auto !important; height: auto !important; z-index: 6 !important; pointer-events: none !important; /* labels must not block the product link */ } /* Every label back into the flow, so the column can space them. */ html body .products .product .product-labels > *, html body .wd-product .product-labels > * { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; flex: 0 0 auto !important; } /* The round badges keep their shape, just no longer positioned by hand. */ html body .wd-product .product-labels .wd-featured, html body .wd-product .product-labels .featured, html body .wd-product .product-labels .wd-hot, html body .wd-product .product-labels .hot, html body .wd-product .product-labels .wd-new, html body .wd-product .product-labels .new { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.1 !important; padding: 0 !important; } /* "Sold out": one consistent pill everywhere — the carousels were rendering it differently from the category grid because only the grid had a style. */ html body .wd-product .product-labels .out-of-stock, html body .products .product .product-labels .out-of-stock, html body.home .wd-product .product-labels .out-of-stock { /* The theme sizes labels as 48x48 circles. "Sold out" is two words, so it has to size to its text or the words spill outside the shape — which is what turned it into a dark square with the text hanging off the side. Width and height must be released explicitly; padding alone loses to the theme's fixed dimensions. */ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; background: #FFFFFF !important; /* the original white pill — it read well */ color: #2B2118 !important; border: none !important; border-radius: 14px !important; padding: 5px 11px !important; font-size: 12px !important; /* 11px read too small, 13px too heavy */ font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; line-height: 1.2 !important; box-shadow: 0 1px 4px rgba(43, 33, 24, .18) !important; } /* The transparent 0x0 "-20%" ghost still took a slot in the column. If the discount badge is not wanted on jewellery cards, remove it properly. */ html body .products .product .product-labels .onsale, html body .wd-product .product-labels .onsale { display: none !important; } /* ============================================================ v6.1 — Below 1025px: force the gallery and summary to genuinely stack Reported repeatedly: the size pills and Add to cart draw ON TOP of the video slide. Measured here at 732px and 535px, the columns stack correctly every time (gallery ends 1101, summary starts 1121) — so the cause is not the video tile's height, which is what the previous attempts assumed. What that leaves is the GRID. The row is a 12-column grid and both children carry explicit spans (7 and 5, set for the wider photo). If those spans stay applied at a narrow width — because the theme's own stacking rule loses to them, or a cached stylesheet is missing the media query — the two columns sit SIDE BY SIDE in a 535px row. The summary is then level with the gallery, and since it paints above (z-index 2), it lands on top of the video. That matches the screenshots exactly. Rather than nudge the pills, this makes stacking structural: below 1025px the row becomes a single-column flex, so the two can never share a row whatever the spans say. ============================================================ */ @media (max-width: 1024px) { html body.single-product .product-image-summary-inner { display: flex !important; flex-direction: column !important; gap: 24px !important; } html body.single-product .product-image-summary-inner > .product-images, html body.single-product .product-image-summary-inner > .summary { grid-column: auto !important; /* drop the 7/5 desktop spans */ width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } /* Gallery first, summary after — the order the page reads in. */ html body.single-product .product-image-summary-inner > .product-images { order: 1 !important; } html body.single-product .product-image-summary-inner > .summary { order: 2 !important; } }