/* ── Варіації ──────────────────────────────────────────────────────── */
.psk-var-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
    padding-left: 1px;
    max-width: calc(100% - 120px);
}
.psk-var-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
}
.psk-var-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.psk-var-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.psk-var-btn {
    padding: 2px 14px !important;
    border-radius: 16px !important;
	border: 1.5px solid #Fff !important;
	color: #964100 !important;
    background: #FFF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
   
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    font-family: Comfortaa;
    line-height: 1.4;
}
.psk-var-btn:hover,
.psk-var-btn.active {
	border: 1.5px solid #FEE5B5 !important;
	color: #964100 !important;
    background: #FFF6E6 !important;
}

.psk-var-btn.psk-var-btn--swatch {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1.5px solid #e2d7c8 !important;
    background: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psk-var-btn.psk-var-btn--swatch:hover,
.psk-var-btn.psk-var-btn--swatch.active {
    border-color: #af5a00 !important;
    background: #fff !important;
}

.psk-var-swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.psk-var-btn--swatch.psk-var-btn--extra {
    display: none !important;
}

.psk-var-group.is-expanded .psk-var-btn--swatch.psk-var-btn--extra {
    display: inline-flex !important;
}

.psk-var-more {
    appearance: none;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #e2d7c8;
    background: #fff;
    color: #964100;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    padding: 0 4px;
    cursor: pointer;
}

.psk-var-label { display: none; }

/* Elementor product-card typography can force uppercase later */
.woocommerce .e-loop-item .elementor-widget-woocommerce-product-price .price,
.woocommerce .e-loop-item .elementor-widget-woocommerce-product-price .woocommerce-Price-amount,
.woocommerce .e-loop-item .elementor-widget-woocommerce-product-price .woocommerce-Price-amount bdi,
.woocommerce .e-loop-item .elementor-widget-woocommerce-product-price .woocommerce-Price-currencySymbol {
    text-transform: none !important;
}

/* Simple loop: price moved into bottom column (see relocateSimpleLoopPriceToBottom in pv.js) */
.e-loop-item .elementor-element-7c14f8f.e-con > .elementor-widget-woocommerce-product-price {
    width: 100%;
    max-width: calc(100% - 120px);
    margin-bottom: 10px;
}

/* Price moved JS-side below .psk-var-wrap — match variation column width */
.elementor-widget-woocommerce-product-add-to-cart .psk-var-wrap + .elementor-widget-woocommerce-product-price {
    width: 100%;
    max-width: calc(100% - 120px);
    margin-bottom: 12px;
}

/* Hide total price in product card (loop/slider) */
.e-loop-item #product_total_price,
.e-loop-item .total-price-qty.variable_products {
    display: none !important;
}

/* ── Лічильник — повністю повторює стиль qib ───────────────────────── */
.psk-qib-wrapper.qib-button-wrapper {
    border: 1px solid #af5a00;
    border-radius: 120px;
    height: 46px;
    margin: 0 0 0 1px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    background: transparent;
    width: fit-content;
    margin-bottom: 0;
}
.psk-qib-wrapper .qib-button {
    border: 0;
    background-color: transparent !important;
    padding: 0;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
    cursor: pointer;
    font-size: 0;
    flex-shrink: 0;
}
.psk-qib-wrapper .qib-button.minus {
    background-image: url("/wp-content/uploads/2026/03/slider-previous-arrow.svg");
}
.psk-qib-wrapper .qib-button.plus {
    background-image: url("/wp-content/uploads/2026/03/slider-next-arrow.svg");
}
.psk-qty-input {
	color: #af5a00 !important;
    font-family: 'Comfortaa' !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    border: none !important;
    height: 44px !important;
    line-height: 44px !important;
    width: 30px !important;
    padding: 0 !important;
    background-color: transparent !important;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    box-shadow: none !important;
    outline: none !important;
}
.psk-qty-btn { flex-basis:24px !important; }
.psk-qty-input::-webkit-inner-spin-button,
.psk-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Out-of-stock loop products: same disabled palette as .psk-disabled */
.woocommerce .e-loop-item.outofstock a.button {
    background: #c5c0bd !important;
    color: #2e2826 !important;
    border-color: #c5c0bd !important;
}
.woocommerce .e-loop-item.outofstock a.button:hover,
.woocommerce .e-loop-item.outofstock a.button:focus {
    background: #c5c0bd !important;
    color: #2e2826 !important;
    border-color: #c5c0bd !important;
}

/* No Woo gear / check on disabled or OOS card buttons */
.woocommerce .e-loop-item a.add_to_cart_button.psk-disabled::before,
.woocommerce .e-loop-item a.add_to_cart_button.psk-disabled::after,
.woocommerce .e-loop-item.outofstock a.button::before,
.woocommerce .e-loop-item.outofstock a.button::after {
    display: none !important;
    content: none !important;
}

/* ── Add to cart loading ─────────────────────────────────────────────── */
a.add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.add_to_cart_button.added:hover::after {
    color:#fff !important;
}
/* ── Add to cart "added" – WooCommerce check icon (variable product in loop) ─── */
.e-loop-item a.add_to_cart_button.product_type_variable.added::after {
    font-family: WooCommerce;
    content: "\e017";
    color: #964100 !important;
    margin-left: 0.5em;
    display: inline-block;
}
.e-loop-item a.add_to_cart_button.product_type_variable.added {
    pointer-events: auto;
}

.e-loop-add-to-cart-form a.button.added::after,
.e-loop-add-to-cart-form a.button.added:hover::after,
.e-loop-add-to-cart-form a.button.added:focus::after {
    color: #964100 !important;
}

/* ── Недоступно ────────────────────────────────────────────────────── */
a.add_to_cart_button.psk-disabled {
    background: #c5c0bd !important;
    color: #2e2826 !important;
    border-color: #c5c0bd !important;
    cursor: not-allowed;
    pointer-events: none;
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.woocommerce .e-loop-item.outofstock .psk-qib-wrapper {
    display: none !important;
}

/* Injected when Elementor omits the cart link for OOS variable products */
.e-loop-item a.add_to_cart_button.psk-atc-placeholder {
    box-sizing: border-box;
}

/* Simple product “hidden” add-to-cart control in Elementor product loops */
.woocommerce .e-loop-item a.button.product_type_simple.hidden-button,
.woocommerce .e-loop-item button.button.product_type_simple.hidden-button {
    max-width: calc(100% - 100px);
}