/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

.wd-skip-links {
    display: none !important;
}

/* Uniform category thumbnails */
.wd-cat-thumb.category-image-wrap {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    display: block !important;
}

.wd-cat-thumb.category-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Force uniform category thumbnail size */
a.wd-cat-image.category-image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}
a.wd-cat-image.category-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

.wd-cat-thumb.category-image-wrapp {
    min-height: 200px !important;
}

/* Hide ex VAT price in WPC Composite product component selection list */
.wooco_component_product_selection_list_item_desc .ss-ex-vat {
    display: none !important;
}

/* Hide ex VAT price in related products carousel */
.wd-carousel .ss-ex-vat,
.wd-carousel .wrap-price .ss-ex-vat {
}

/* Related products / carousel entity titles */
h3.wd-entities-title,
h3.wd-entities-title a {
}

/* Related products carousel - entity titles */
h3.wd-entities-title,
h3.wd-entities-title a {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}
/* Hide ex VAT price in carousel */
.wd-carousel .ss-ex-vat {
    display: none !important;
}

/* Hide ex VAT in accessories grid */
.ss-accessories-grid .ss-acc-price .ss-ex-vat,
.ss-accessories-grid .ss-acc-price br ~ span,
.ss-accessories-grid .ss-acc-price br {
    display: none !important;
}

/* Tighten the vertical gap between the "inc VAT" line and the "ex VAT" line.
   The two lines are separated by a <br>, so the gap is driven by the CONTAINER'S
   line-height. Tightening line-height on the price wrappers closes it. */
.ss-ex-vat {
    display: inline-block;
    margin-top: 1px;
    line-height: 1.1;
}
/* The <br> gap comes from these wrappers' line-height — pull it in. */
.price,
.ss-pg-price,
.ss-acc-price,
.wrap-price,
span:has(> .ss-ex-vat) {
    line-height: 1.15 !important;
}

/* ---------------------------------------------------------------------------
   Main navigation links — CVP-style but white, in our Roboto font.
   Title Case (not all-caps), medium weight 500, pure white, comfy spacing.
   Nav container is .wd-nav-main (NOT .woodmart-nav); links are .woodmart-nav-link.
   --------------------------------------------------------------------------- */
.wd-nav-main > li > a.woodmart-nav-link,
.wd-nav-main .item-level-0 > a.woodmart-nav-link {
    font-family: Roboto, sans-serif !important;
    font-weight: 400 !important;          /* regular — lighter, refined */
    font-size: 14px !important;
    color: #ffffff !important;
    text-transform: none !important;      /* Title Case, drop the shouty all-caps */
    letter-spacing: 0 !important;
}
.wd-nav-main > li > a.woodmart-nav-link .nav-link-text,
.wd-nav-main .item-level-0 > a .nav-link-text {
    text-transform: none !important;
    color: #ffffff !important;
}
/* Comfortable spacing between the top items. */
.wd-nav-main.wd-gap-s > li {
    margin: 0 6px !important;
}
/* Remove the divider lines between menu items. WoodMart draws them as
   .wd-style-separated > li:not(:last-child)::after { border-right: ... }. */
.wd-nav-main.wd-style-separated > li:not(:last-child)::after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}
/* Crisp on hover / active — full white, subtle fade. */
.wd-nav-main > li > a.woodmart-nav-link:hover,
.wd-nav-main > li.current-menu-item > a.woodmart-nav-link {
    color: #ffffff !important;
    opacity: 0.85;
}
/* Dropdown chevron next to each item — make it pure white (WoodMart draws it
   as a font-icon ::after at rgba(255,255,255,.6), which looks grey). */
.wd-nav-main > li.menu-item-has-children > a::after {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   SS Category Cards widget — gradient cards with product image bottom-right.
   Here (not inline) so the layout loads reliably and beats Elementor's
   container CSS. Scoped tight with high specificity + !important on layout.
   --------------------------------------------------------------------------- */
.ss-cc-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
}
.ss-cc-grid > .ss-cc-card {
    width: auto !important;
    margin: 0 !important;
    flex: none !important;
    float: none !important;
}
.ss-cc-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 280px !important;
    border-radius: 16px;
    overflow: hidden !important;
    padding: 22px 22px 20px !important;
    text-decoration: none !important;
    isolation: isolate;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.ss-cc-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0,0,0,.28); }
.ss-cc-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ss-cc-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(150deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 45%);
    pointer-events: none;
}
.ss-cc-prod {
    position: absolute !important; right: -14px; bottom: -14px; z-index: 1;
    width: 56%; max-width: 220px; aspect-ratio: 1 / 1;
    pointer-events: none;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    margin: 0 !important;
}
.ss-cc-card:hover .ss-cc-prod { transform: translate(-6px,-6px) scale(1.05) rotate(-2deg); }
.ss-cc-prod img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: bottom right; }
.ss-cc-content {
    position: relative !important; z-index: 2 !important;
    display: flex !important; flex-direction: column !important;
    gap: 10px; max-width: 72%;
}
.ss-cc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; color: #fff; }
.ss-cc-name { font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #fff; margin: 0; line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.ss-cc-kids { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ss-cc-kids li { margin: 0; }
.ss-cc-kids li a { font-size: 13px; color: rgba(255,255,255,.82); text-decoration: none; line-height: 1.5; transition: color .15s; }
.ss-cc-kids li a:hover { color: #fff; }
.ss-cc-more { font-size: 12px; color: #fff; font-weight: 700; opacity: .9; margin-top: 2px; }
.ss-cc-badge {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(0,0,0,.42); color: #fff; padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(4px);
}
.ss-cc-cta {
    position: absolute; left: 22px; bottom: 18px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ss-cc-arw { transition: transform .25s; }
.ss-cc-card:hover .ss-cc-arw { transform: translateX(4px); }
/* Responsive columns — override the inline grid at breakpoints. */
@media (max-width: 1100px) { .ss-cc-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 620px)  { .ss-cc-grid { grid-template-columns: 1fr !important; } }

/* ---------------------------------------------------------------------------
   Shop/category product cards — show the star rating BEFORE the price.
   The title/price/rating/add-to-cart live inside .product-element-bottom
   (NOT directly under .product-wrapper). Source order there is:
     .wd-product-header (title) → .wrap-price → .ruk_rating_snippet
     (reviews.io stars) → .wd-product-footer.
   Make that block a flex column and reorder so rating sits above price.
   --------------------------------------------------------------------------- */
.wd-product .product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
}
.wd-product .product-element-bottom > .wd-product-header  { order: 1; }
.wd-product .product-element-bottom > .ruk_rating_snippet { order: 2; margin-top: 2px; }
.wd-product .product-element-bottom > .wrap-price         { order: 3; }
.wd-product .product-element-bottom > .wd-product-footer  { order: 4; }

/* LCP plan: ensure mobile logo container has physical dimensions instantly */
.whb-mobile-header .wd-logo img {
    width: 100% !important;
    max-width: 180px;
    height: auto !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ex-VAT line on single product: the Elementor price-widget typography forces all
   .amount spans to a fixed 22px/18px, overriding the ss-ex-vat 0.7em wrapper.
   Let the ex-VAT amount inherit so it renders small under the main price. */
.wd-single-price .price .ss-ex-vat .amount { font-size: inherit !important; }

/* Kill the ~15px page-level horizontal overflow (an uncompensated 100vw element)
   that renders a horizontal scrollbar as a white strip under the footer.
   clip (not hidden): no new scroll container, sticky/fixed unaffected.
   Pre-existing issue — confirmed present on the old server too. */
html, body { overflow-x: clip; }




/* Reserve the brand-logo box on single product so it cannot shift the summary column. */
.single-product .wd-product-brands img { width: 60px; height: 30px; object-fit: contain; }

/* Reviews.io Polaris injects an empty modal container at the end of <body> with a
   20px bottom margin, which paints as a white strip under the footer on pages where
   the reviews widget loads (product pages). Zero it out. */
body > .ElementsWidget,
[id^="reviews-io-polaris-modal-widget"],
[id^="reviews-io-polaris-modal-widget"] > .ElementsWidget { margin-bottom: 0 !important; }

/* PDP wallet buttons: Apple Pay + Google Pay side by side (each is a separate
   StripeElement block). flex-wrap + min-width auto-stacks them on very narrow
   screens; a lone button naturally fills the row. PDP mount only. */
html body.single-product #ss-stripe-mount-target #wc-stripe-express-checkout-element {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
}
html body.single-product #ss-stripe-mount-target #wc-stripe-express-checkout-element > .StripeElement {
  flex: 1 1 0;
  min-width: 150px;
}