/*
 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-logo img[src$=".svg"] {
	height: auto;
	width: 100%;
	max-width: inherit;
}

/* =============================================
   STEPIN Mobile Menu Styles
   ============================================= */

/* Flex column for CSS order reordering */
.mobile-nav .wd-nav-mobile.mobile-pages-menu {
    display: flex;
    flex-direction: column;
}

/* Order: main(1) → built-in Woodmart(2) → info(3) */
.wd-nav-mobile li.stepin-menu-main { order: 1; }

.wd-nav-mobile li.menu-item-wishlist,
.wd-nav-mobile li.menu-item-compare,
.wd-nav-mobile li.menu-item-account { order: 2; }

.wd-nav-mobile li.stepin-menu-info { order: 3; }

/* Main nav — larger, bolder */
.wd-nav-mobile li.stepin-menu-main > a {
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    color: #1a1a1a;
}

/* Separator: main → built-in */
.wd-nav-mobile li.menu-item-wishlist {
    margin-top: 6px;
    border-top: 1px solid #e8e8e8;
    padding-top: 6px;
}

/* Separator: built-in → info (first info item in DOM) */
.wd-nav-mobile li.stepin-menu-info:first-of-type {
    margin-top: 6px;
    border-top: 1px solid #e8e8e8;
    padding-top: 6px;
}

/* Info pages — smaller, lighter */
.wd-nav-mobile li.stepin-menu-info > a {
    font-size: 13px;
    font-weight: 400;
    padding: 9px 20px;
    color: #555;
}

.wd-nav-mobile li.stepin-menu-info > a:hover {
    color: #1a1a1a;
}

/* =============================================
   Always show slider/carousel navigation arrows
   ============================================= */

/* Desktop: disable hover-to-show, always visible */
.wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow {
    opacity: 1 !important;
    pointer-events: unset !important;
    transform: translateY(0) !important;
}

/* Mobile: show arrows and position them inside the container */
@media (max-width: 1024px) {
    /* Unhide arrows that Woodmart hides on mobile */
    .wd-carousel-dis-mb :is(.wd-nav-arrows, .wd-nav-pagin-wrap) {
        display: flex !important;
    }

    .wd-carousel-dis-mb .wd-nav-arrows .wd-btn-arrow {
        opacity: 1 !important;
        pointer-events: unset !important;
        transform: translateY(0) !important;
    }

    /* Move arrows inside visible area (they're outside by default) */
    .wd-nav-arrows.wd-pos-sep .wd-prev {
        inset-inline-end: auto !important;
        inset-inline-start: 0 !important;
    }

    .wd-nav-arrows.wd-pos-sep .wd-next {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    /* Ensure parent doesn't clip them */
    .wd-carousel-container,
    .wd-products-element {
        overflow: visible !important;
    }

    /* Smaller arrows on mobile */
    .wd-nav-arrows.wd-pos-sep .wd-btn-arrow {
        --wd-arrow-size: 36px;
        --wd-arrow-icon-size: 14px;
    }
}

/* =============================================
   Product Benefits Block (above add-to-cart)
   ============================================= */
.stepin-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
    padding: 0;
}

.stepin-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: left;
}

.stepin-benefit-icon {
    flex-shrink: 0;
    color: #0088cc;
}

.stepin-benefit-icon svg {
    display: block;
}

.stepin-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stepin-benefit-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.stepin-benefit-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.3;
}

/* Hide benefits inside sticky add-to-cart bar and mini forms */
.wd-sticky-btn .stepin-benefits,
.wd-sticky-footer .stepin-benefits,
.cart-widget-side .stepin-benefits,
.quick-shop-wrapper .stepin-benefits,
.wd-quick-shop .stepin-benefits,
.product-quick-view .stepin-benefits {
    display: none !important;
}

/* Compact benefits display inside product loop cards (catalog) */
.products .stepin-benefits,
ul.products .stepin-benefits,
.wd-products .stepin-benefits,
.wd-products-element .stepin-benefits {
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 8px 0;
    width: 100%;
}

.products .stepin-benefit,
ul.products .stepin-benefit,
.wd-products .stepin-benefit,
.wd-products-element .stepin-benefit {
    padding: 6px 10px;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.products .stepin-benefit-icon svg,
ul.products .stepin-benefit-icon svg,
.wd-products .stepin-benefit-icon svg,
.wd-products-element .stepin-benefit-icon svg {
    width: 20px;
    height: 20px;
}

.products .stepin-benefit-title,
ul.products .stepin-benefit-title,
.wd-products .stepin-benefit-title,
.wd-products-element .stepin-benefit-title {
    font-size: 12px;
}

.products .stepin-benefit-desc,
ul.products .stepin-benefit-desc,
.wd-products .stepin-benefit-desc,
.wd-products-element .stepin-benefit-desc {
    font-size: 11px;
}

@media (max-width: 768px) {
    .stepin-benefits {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 16px 0;
    }

    .stepin-benefit {
        padding: 12px;
    }
}

/* =============================================
   Move scroll-to-top button to the left
   ============================================= */
.scrollToTop {
    right: auto !important;
    left: 20px;
}

@media (max-width: 1024px) {
    .scrollToTop {
        left: 12px;
    }
}

/* ---- Widget: messengers + hours ---- */
.mobile-nav .widgetarea-mobile {
    padding: 0;
    border-top: 1px solid #e8e8e8;
    margin-top: 0;
}

.stepin-mob-bottom {
    padding: 0;
}

.stepin-mob-section {
    padding: 8px 20px;
}

/* Messengers label */
.stepin-mob-messengers-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stepin-mob-messengers .wd-social-icons {
    display: flex;
    gap: 8px;
}

/* Working hours — full width, compact */
.stepin-mob-hours {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #555;
    padding: 10px 20px;
    background: #f9f9f9;
    border-top: 1px solid #e8e8e8;
}

.stepin-mob-hours svg {
    flex-shrink: 0;
    color: #888;
}

.stepin-mob-hours b {
    color: #1a1a1a;
    font-weight: 600;
}

/* =============================================
   Fix product price wrapping in catalog grid
   ============================================= */
.wd-product .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.wd-product .price del {
    order: 1;
}

.wd-product .price ins {
    order: 2;
    display: block;
    width: 100%;
}

/* =============================================
   Size selector for simple products
   ============================================= */
.stepin-size-selector {
    margin: 0 0 20px;
}

.stepin-size-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.stepin-size-chosen {
    font-weight: 400;
    color: #555;
    margin-left: 6px;
}

.stepin-size-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stepin-size-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.stepin-size-swatch:hover {
    border-color: #12203b;
}

.stepin-size-swatch.stepin-size-active {
    background: #12203b;
    color: #fff;
    border-color: #12203b;
}

.stepin-size-swatch.stepin-size-unavailable {
    color: #aaa;
    border-color: #eee;
    background: #fafafa;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.stepin-size-swatch.stepin-size-unavailable:hover {
    border-color: #eee;
}

/* =============================================
   Stock status in-stock color
   ============================================= */
p.stock.in-stock,
p.stock.available-on-backorder,
p.stock.wd-style-default.in-stock,
p.stock.wd-style-default.in-stock:before,
.wd-loop-prod-stock-status .in-stock {
    color: #00a848 !important;
}

p.stock.wd-style-bordered.in-stock span {
    border-color: #00a848 !important;
    color: #00a848 !important;
}

p.stock.wd-style-bordered.in-stock span:before,
p.stock.wd-style-with-bg.in-stock span:before {
    background-color: #00a848 !important;
}

p.stock.wd-style-with-bg.in-stock span {
    background-color: rgba(0, 168, 72, 0.1) !important;
    color: #00a848 !important;
}

/* =============================================
   Bolder and larger product price
   ============================================= */
.price,
.wd-product .price,
.product .price,
.woocommerce-Price-amount,
.price .amount {
    font-weight: 700 !important;
}

/* Catalog loop price */
.wd-product .price {
    font-size: 18px !important;
}

/* Single product page price */
.product .summary .price,
.single-product .summary .price,
.product-wrapper .summary .price,
.product .summary .price .amount {
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* =============================================
   Hide billing country field (always UA)
   ============================================= */
.stepin-hidden-field,
#billing_country_field {
    display: none !important;
}

/* =============================================
   WC Ukr Shipping — Checkout fields in Woodmart style
   ============================================= */

/* Select fields (zen-ui-select) */
.zen-ui-select__value {
    padding: 10px 14px !important;
    border: 1px solid #12203b !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #fff !important;
    transition: border-color 0.2s !important;
    min-height: auto !important;
    line-height: 1.5 !important;
}

.zen-ui-select__value:hover,
.zen-ui-select__value:focus {
    border-color: #333 !important;
}

/* Dropdown */
.zen-ui-select__dropdown {
    border-radius: 30px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    margin-top: 4px !important;
    overflow: hidden;
}

.zen-ui-select__options {
    border: none !important;
    padding: 4px 0 !important;
}

.zen-ui-select__option {
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: background 0.15s !important;
}

.zen-ui-select__option--current {
    background: #f0f5ff !important;
    font-weight: 500 !important;
}

.zen-ui-select__option:not(.zen-ui-select__option--disabled):not(.zen-ui-select__option--current):hover {
    background: #f5f5f5 !important;
}

/* Search input in dropdown */
.zen-ui-select__search {
    padding: 8px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.zen-ui-select__search-input {
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    outline: none !important;
}

.zen-ui-select__search-input:focus {
    border-color: #333 !important;
}

/* Arrow icon */
.zen-ui-select__value > svg {
    fill: #666 !important;
}

/* Placeholder text */
.zen-ui-select__value-text {
    font-size: 14px !important;
}

/* Shipping type radios (У відділення / Адресна доставка / Поштомат) */
.wc-ukr-shipping-np-fields label {
    font-size: 14px !important;
    color: #333 !important;
}

/* Overall spacing */
.wc-ukr-shipping-np-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wc-ukr-shipping-np-fields .form-row {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Clean widget defaults */
.mobile-menu-widget.widget_custom_html {
    margin: 0;
    padding: 0;
}

.mobile-menu-widget .widget-title {
    display: none;
}