/* styles */

.zn_badge_coming_soon.kl-font-alt {
  font-family: Montserrat;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  color: black;
  background: white;
  border: 1px solid black;
  text-transform: uppercase;
  margin-left: 4px;
}

/* WooCommerce: приховуємо кнопку ручного оновлення кошика (авто-update через JS) */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
    display: none;
}
.header__wrapper {
    display: flex;
    flex-direction: column;
}


#common-home {
    position: relative;
    overflow: hidden;
    max-height: 400px;
}

#common-home.open {
    max-height: max-content;
    overflow: visible;
}

#common-home:after {
    z-index: 2;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: linear-gradient(to bottom, transparent 0%, #fff 100%);
}

#common-home.open:after {
    content: '';
    display: none;
}

.zn-buttonWrapper span {
    cursor: pointer;
}

.awooc-custom-order-button.button.alt.no-stock-no-price:not(.no-margin), .awooc-custom-order-button.button.alt.show-add-to-card {
  margin-left: 1%;
  color: black !important;
  background-color: white !important;
  border: 1px solid black !important;
  height: 51px !important;
  padding: 16px 26px !important;
  border-radius: 8px;
  width:43%;
}
.additional_label,
.material_label {
    position: absolute;
    left: 0;
    top: 5px;
    padding: 6px;

    background: #C51212;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;

    z-index: 1;
}

.additional_label + .material_label {
    top: 40px;
}

.additional_label:after {
    position: absolute;
    bottom: -3px;
    content: "";
    background-color: #cd2122;
    left: 5px;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 2px;

    z-index: 1;
}

.single-product .additional_label,
.single-product .material_label {
    left: 15px;
    padding: 6px;
}

/* Compact swipeable product gallery thumbnails under the main image */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    margin: 18px 0 0;
    padding: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow: hidden;
}

/* Before Slick init: use auto width for FlexSlider's native layout */
.single-product .woocommerce-product-gallery .flex-control-thumbs:not(.slick-initialized) li,
.single-product .woocommerce div.product div.images .flex-control-thumbs:not(.slick-initialized) li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 6px !important;
    float: none !important;
    clear: none !important;
    list-style: none;
}

/* After Slick init: let Slick manage slide width, only override FlexSlider's floats */
.single-product .woocommerce-product-gallery .flex-control-thumbs.slick-initialized li,
.single-product .woocommerce div.product div.images .flex-control-thumbs.slick-initialized li {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 6px !important;
    float: none !important;
    clear: none !important;
    list-style: none;
    /* Резервуємо місце до завантаження зображення */
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1;
    transform: translateY(-1px);
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-list {
    margin: 0 22px;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-track {
    display: flex;
}

/* FlexSlider main gallery arrows — always visible, no jump */
.single-product .woocommerce-product-gallery .flex-direction-nav a {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-arrow {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-arrow.prev {
    left: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-arrow.next {
    right: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs .slick-disabled {
    opacity: 0.3;
    pointer-events: none;
}

@media (max-width: 1199px) {
    .single-product .woocommerce-product-gallery .flex-control-thumbs .slick-list {
        margin: 0 18px;
    }
}

@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery .flex-control-thumbs {
        margin-top: 14px;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li,
    .single-product .woocommerce div.product div.images .flex-control-thumbs li {
        padding: 0 4px !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs .slick-list {
        margin: 0 16px;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs .slick-arrow {
        width: 18px;
        height: 18px;
    }
}





.recommended__slider .slick-list {
    padding: 0 0 30px;
}

.recommended__slider .slick-slide {
    margin: 0 20px;
}

.recommended__slider .slick-slide:hover {
    box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}

.recommended__slider .slick-slide h3 {
    min-height: 48px;
    padding: 0 15px;
    font-size: 12px;
    line-height: 1.47;
    font-weight: bold;
}

.recommended__slider .slick-slide:hover .kw-details-title {
    color: #000000;
}

.recommended__slider .slick-slide .price {
    display: block;
    margin-bottom: 1rem;
    color: #282828;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.recommended__slider .prev,
.recommended__slider .next {
    position: absolute;
    top: 40%;
    cursor: pointer;
}

.recommended__slider .prev polyline,
.recommended__slider .prev polyline {
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    stroke: #141414;
}

.recommended__slider .prev:hover polyline,
.recommended__slider .next:hover polyline {
    stroke-width: 35;
}

.recommended__slider .prev {
    left: -10px;
}

.recommended__slider .next {
    right: -10px;
}

.recommended__slider .prev svg,
.recommended__slider .next svg {
    width: 25px;
}

.recommended__slider .slick-slide .add_to_cart_button,
.recommended__slider .slick-slide .add_to_cart_button:hover {
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #9edbd7 !important;
    color: white;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid #000 !important;
}



/* cross sales */
.zn-wc-pages-style2 .woocommerce .cart-collaterals .cross-sells ul.products li,
.woocommerce-page .cart-collaterals .cross-sells ul.products li {
    width: 100%;
}

#cross-sells__slider .product a.button.add_to_cart_button {
    font-size: 12px !important;
	padding: 10px;
	text-align: center;
	background: #9edbd7;
	color: white;
}

#cross-sells__slider .kw-details-title {
    font-size: 12px !important;
}

#cross-sells__slider .price {
    font-size: 14px;
}

#cross-sells__slider .prev,
#cross-sells__slider .next {
    position: absolute;
    top: 40%;
    cursor: pointer;
    z-index: 1;
}

#cross-sells__slider .prev polyline {
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    stroke: #141414;
}

#cross-sells__slider .next:hover polyline {
    stroke-width: 35;
}

#cross-sells__slider .prev {
    left: -25px;
}

#cross-sells__slider .next {
    right: -25px;
}

#cross-sells__slider .prev svg,
#cross-sells__slider .next svg {
    width: 25px;
}

/* Курований слайдер товарів у кошику (Swiper, повні картки) */
.qw-cart-upsell {
    position: relative;
}
.qw-cart-upsell ul.products {
    display: block;
    margin: 0;
    padding: 0;
}
.qw-cart-upsell__viewport {
    position: relative;
}
.qw-cart-upsell .swiper-container {
    position: relative;
    padding-bottom: 10px;
}
/* висота за вмістом (запобігаємо колапсу висоти до ініціалізації) */
.qw-cart-upsell .swiper-wrapper,
.qw-cart-upsell .swiper-slide {
    height: auto;
}
.qw-cart-upsell .swiper-slide li.product,
.qw-cart-upsell .swiper-slide .product-list-item {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Анти-FOUC: до ініціалізації Swiper показуємо слайди рядком (як після init),
   щоб товари не стрибали зі стовпчика в карусель */
.qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow: hidden;
}
.qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
}
@media (max-width: 1024px) {
    .qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
        gap: 16px;
    }
    .qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-slide {
        flex: 0 0 calc((100% - 32px) / 3);
        max-width: calc((100% - 32px) / 3);
    }
}
@media (max-width: 768px) {
    .qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
        gap: 14px;
    }
    .qw-cart-upsell .swiper-container:not(.swiper-container-initialized) .swiper-slide {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* Кнопка "в кошик" у курованому слайдері кошика: невелика, чорний фон /
   білі літери, заокруглені кути (як "Proceed to checkout"), розташована ПІД
   кружечками кольору. Тема (zn_dynamic.css) глобально ховає стандартну петльову
   кнопку (display:none!important у layout style2, бо показує власні SVG-іконки) —
   вмикаємо назад із вищою специфічністю (li.product + 2 класи). Кружечки виводить
   show_color_circles (.circle-full); flex-order ставить кнопку після них.
   display:flex тут з !important, бо kl-woocommerce.css форсує .product-list-item
   у display:block зі специфічнішим селектором. */
.qw-cart-upsell li.product .product-list-item {
    display: flex !important;
    flex-direction: column !important;
}
.qw-cart-upsell li.product .woocommerce-LoopProduct-link { order: 1; }
.qw-cart-upsell li.product .circle-full { order: 2; }
.qw-cart-upsell li.product .button.add_to_cart_button {
    order: 3;
    display: inline-block !important;
    align-self: flex-start;
    width: auto;
    margin-top: 10px;
    padding: 7px 16px;
    background: #000 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.3;
    text-align: center;
    border: 0;
    border-radius: 8px;
}
.qw-cart-upsell li.product .button.add_to_cart_button:hover {
    background: #222 !important;
    color: #fff !important;
}
.qw-cart-upsell .kw-details-title {
    font-size: 12px !important;
}
.qw-cart-upsell .price {
    font-size: 14px;
}

/* стрілки навігації — поза картками, щоб не наїжджали на товари.
   Приховані до ініціалізації Swiper (щоб не блимали), а коли всі товари
   вміщаються (напр. 4 на ПК) — Swiper тримає .swiper-button-lock (display:none),
   тож стрілки не з'являться взагалі. */
.qw-cart-upsell .swiper-button-prev,
.qw-cart-upsell .swiper-button-next {
    top: 40%;
    color: #000;
    opacity: 0;
    transition: opacity .2s ease;
}
.qw-cart-upsell.qw-ready .swiper-button-prev,
.qw-cart-upsell.qw-ready .swiper-button-next {
    opacity: 1;
}
.qw-cart-upsell .swiper-button-prev::after,
.qw-cart-upsell .swiper-button-next::after {
    font-size: 22px;
    font-weight: 700;
}
.qw-cart-upsell .swiper-button-prev {
    left: -26px;
}
.qw-cart-upsell .swiper-button-next {
    right: -26px;
}
/* на мобайлі стрілок немає — гортаємо пальцем */
@media (max-width: 768px) {
    .qw-cart-upsell .swiper-button-prev,
    .qw-cart-upsell .swiper-button-next {
        display: none;
    }
}

/* filter */
#content .filter--style-premmerce {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

#content .filter--style-premmerce .filter__item {
    /*display: flex;*/
    width: max-content;
    margin-right: 1rem;
    padding: 0;
    white-space: nowrap;
    border: none;
}

#content .filter--style-premmerce .filter__header {
    cursor: pointer;
}

#content .filter--style-premmerce .filter__header + .filter__inner {
    position: absolute;
    display: none !important;
    min-width: 240px;
    /*max-height: 240px;*/
    padding: 20px 20px 9px;
    background: #ffffff;
    font-size: 13px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
    /*transition: all ease-out .5s;*/

    z-index: 2;
}

#content .filter--style-premmerce .filter__header.open + .filter__inner {
    display: block !important;
}

.filter__checkgroup {
    display: flex;
    justify-content: space-between;
}

.filter__checkgroup-count {
    top: 0;
}

.filter__handle-ico--plus {
    height: 16px;
}

.filter__icon-minus,
.filter__icon-plus {
    width: 16px;
    height: 16px;
    position: relative;
}

.filter__header .filter__icon-plus,
.filter__header .filter__icon-minus {
    background: url("./img/filter_arrow.svg") center center no-repeat;
}

.filter__header.open .filter__icon-plus,
.filter__header.open .filter__icon-minus {
    background: url("./img/filter_arrow.svg") center center no-repeat;
    transform: rotate(-180deg);
}

.filter__icon-minus:before, .filter__icon-plus:before,
.filter__icon-minus:after, .filter__icon-plus:after {
    content: '';
    display: none;
}

.pc-active-filter__list-item {
    display: flex;
    margin: 1rem 0;
    padding: 0;
    background-color: #9edbd7;
    width: max-content;
    margin-right: 1rem;
}

.pc-active-filter__item-delete {
    margin-left: 1rem;
}

.pc-active-filter__item-link {
    color: #ffffff;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.pc-active-filter__item-link:hover {
    color: #ffffff;
}

.pc-active-filter__list {
    display: flex;
}

.pc-active-filter__item-delete {
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 12px;
    border: 1px solid #fff;
    float: right;
    color: #fff;
    font-weight: bold;
}

/* filter price */
.filter__item .filter__header {
    position: relative;
    padding-right: 20px;
}

.filter__item .filter__header:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 3px;
    display: block;
    width: 16px;
    height: 16px;
    background: url("./img/filter_arrow.svg") center right no-repeat;
}

.filter__item .filter__header.open:after {
    background: url("./img/filter_arrow.svg") center center no-repeat;
    transform: rotate(-180deg);
}

.filter__handle {
    display: none;
}

/* ── Home Slider — фіксована висота щоб не стрибало ── */

/* Swiper контейнери */
.home_slider_pc,
#home_slider_pc {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #111;
    position: relative;
}

.home_slider_mobile,
#home_slider_mobilee {
    aspect-ratio: 428 / 640;
    width: 100%;
    overflow: hidden;
    background: #111;
    position: relative;
}

.home_slider_pc .swiper-wrapper,
.home_slider_mobile .swiper-wrapper {
    height: 100%;
}

.home_slider_pc .swiper-slide,
.home_slider_mobile .swiper-slide {
    height: 100%;
}

/* PC посилання + медіа — завжди 16:9 */
a.pccc {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

/* Mobile посилання + медіа — завжди 428:640 */
a.mobile {
    display: block;
    width: 100%;
    aspect-ratio: 428 / 640;
    overflow: hidden;
    background: #111;
}

/* Медіа всередині заповнює контейнер */
a.pccc img,
a.pccc video.videopc,
a.mobile img,
a.mobile video.videomob {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home_slider_mobile {
    display: none;
}

#home_slider_pc .prev,
#home_slider_mobile .prev,
#home_slider_pc .next,
#home_slider_mobile .next {
    position: absolute;
    top: 40%;
    cursor: pointer;
    z-index: 1;
}

#home_slider_pc .prev svg,
#home_slider_mobile .prev svg,
#home_slider_pc .next svg,
#home_slider_mobile .next svg {
    width: 35px;
}

#home_slider_pc .prev polyline,
#home_slider_mobile .prev polyline,
#home_slider_pc .next polyline,
#home_slider_mobile .next polyline {
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    stroke: #141414;
}

#home_slider_pc .prev:hover polyline,
#home_slider_mobile .prev:hover polyline,
#home_slider_pc .next:hover polyline,
#home_slider_mobile .next:hover polyline {
    stroke-width: 35;
}

#home_slider_pc .prev,
#home_slider_mobile .prev {
    left: 25px;
}

#home_slider_pc .next,
#home_slider_mobile .next {
    right: 25px;
}


/* one click */
#buyoneclick_form_order h2 {
    font-size: 24px;
    line-height: 1.2;
}

#formOrderOneClick .buyvalide {
    padding-left: 30px !important;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: none;
}


#formOrderOneClick .buyvalide:focus-visible {
    outline: none;
}

#buyoneclick_form_order input[type="text"] {
    background: url("./img/user.png") center left no-repeat;
    -webkit-background-size: 20px;
    background-size: 20px;
}

#buyoneclick_form_order input[type="tel"] {
    background: url("./img/phone.png") center left no-repeat;
    -webkit-background-size: 20px;
    background-size: 20px;
}

#formOrderOneClick textarea {
    background: url("./img/comments.png") center left no-repeat;
    -webkit-background-size: 20px;
    background-size: 20px;
}


.closeFilter,
.closeFilter:focus {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border: none;
    top: 15px;
    right: 15px;
    background: url(./img/close.svg) no-repeat center center;
    z-index: 2;
}

.closeSort, .closeSort:focus {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border: none;
    top: 15px;
    left: 15px;
    background: url(./img/close.svg) no-repeat center center;
    z-index: 2;
}

.sort_wrapper .form_wrap {
    position: absolute;
    min-width: 300px;
    background: #fff;
    right: -4px;
    top: 35px;
    padding: 10px 10px 0;
    box-shadow: 0px 0px 10px -3px #000;
    display: none;

    z-index: 1;
}

.sort_wrapper .form_wrap.open {
    display: block;
}

.sort_wrapper .widgettitle {
    font-weight: normal;
}

.sort_wrapper .widgettitle:after {
    border-bottom: 1px solid #9edbd7;
}

.filter__header.open + .filter__inner > .filter__inner {
    display: block !important;
}

.filter__slider-control-column {
    position: relative;
    padding: 0 10px 0 30px;
}

.filter__slider-control-column:first-of-type:before {
    content: 'Від';
    position: absolute;
    top: 5px;
    left: 5px;
}

.filter__slider-control-column:last-of-type:before {
    content: 'До';
    position: absolute;
    top: 5px;
    left: 10px;
}

/*.variations_form.cart {*/
/*	display: flex;*/
/*    width: 100%;*/
/*    flex-direction: column-reverse;*/
/*}*/

/*.woocommerce div.product form.cart table.quantity {*/
/*	border-top: 1px solid #000;*/
/*}*/

.woocommerce div.product form.cart .single_variation_wrap .single_variation {
    margin-bottom: 0;
}

.woocommerce-variation-add-to-cart {
    margin-top: 0;
}

.single-product .variations_form.cart {
    --qwo-swatch-border: #cfd4dc;
}

.quanity {
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.quanity tr td.value {
    text-align: right;
    padding-right: 11px;
}

.woocommerce div.product form.cart .variations {
    border-bottom: 1px solid #000 !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}

.single-product .woocommerce div.product form.cart .variations tbody,
.single-product .woocommerce div.product form.cart .variations tr {
    display: block;
    width: 100%;
}

.single-product .woocommerce div.product form.cart .variations tr + tr {
    margin-top: 18px;
}

.single-product .woocommerce div.product form.cart .variations th.label,
.single-product .woocommerce div.product form.cart .variations td.value {
    display: block;
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
    line-height: normal;
    text-align: left;
}

.single-product .woocommerce div.product form.cart .variations th.label {
    margin-bottom: 10px;
}

.single-product .woocommerce div.product form.cart .variations td.value.woo-variation-items-wrapper {
    position: relative;
    display: block;
    float: none;
    margin-bottom: 0;
}

.woocommerce div.product form.cart .variations select {
    width: max-content !important;
    text-align: right;
    padding-right: 25px;
    background-image: url(./img/arrow-down.svg) !important;
    direction: rtl;
}


.woocommerce div.product form.cart .reset_variations {
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
    position: absolute;
    left: 20px;
}

/* Desktop */
@media (min-width: 769px) {
    .woocommerce div.product form.cart .variations td,
    .woocommerce div.product form.cart .variations th {
        display: inline-block;
    }

    .single-product .woocommerce div.product form.cart .variations td {
        position: relative;
        display: block;
        flex-direction: initial;
        align-items: initial;
        float: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .woocommerce div.product form.cart .variations td {
        align-items: flex-start !important;
        width: max-content !important;
        display: inline-block !important;
    }

    .button_size {
        top: 10px;
    }
}

.single-product .woocommerce div.product form.cart .variations label {
    display: block;
    margin: 0;
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.single-product .woo-variation-swatches .variable-items-wrapper,
.single-product .woo-variation-swatches .woo-selected-variation-item-name {
    display: none !important;
}

.single-product .woo-variation-swatches select.woo-variation-raw-select,
.single-product .woo-variation-swatches select[id^="pa_"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-height: 48px;
    margin: 0;
    padding: 0 44px 0 16px;
    border: 1px solid #cfd4dc;
    border-radius: 12px;
    background-color: #ffffff;
    background-image: url(./img/arrow-down.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px auto !important;
    color: #111111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    direction: ltr;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.single-product .woo-variation-swatches select.woo-variation-raw-select:hover,
.single-product .woo-variation-swatches select.woo-variation-raw-select:focus,
.single-product .woo-variation-swatches select[id^="pa_"]:hover,
.single-product .woo-variation-swatches select[id^="pa_"]:focus {
    border-color: #111111;
    outline: 0;
    box-shadow: none;
}

.single-product .woocommerce div.product form.cart .reset_variations {
    position: static;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    color: #70757d;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}


.qty_select_cust {
    width: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(./img/arrow-down.svg) !important;
}
.qty_select_cust:focus-visible {
	outline: none;
}

.sort_wrapper {
    position: relative;
    display: none;
    float: right;
    width: calc(50% + 5px);
    font-size: 19px;
    line-height: 30px;
    font-weight: 700;
    color: #000;
    border-radius: 3px;
    text-align: center;
    -webkit-background-size: 18px;
    background-size: 18px;
    border: 4px solid #9edbd7;
    margin: 10px -10px;
}

.sort__button {
    display: block;
}

.woocommerce-ordering ul {
    padding: 0;
    text-align: center;
    list-style: none;
}

.woocommerce-ordering a {
    color: #0a0a0a;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-family: Montserrat;
    font-weight: 400;
    border-bottom: 1px solid #c7c7c7;
    display: block;
    padding: 5px 0;
}

.filter__inner--js-hidden {
	max-height: 400px;
    overflow: auto;
}


/* responsive */
@media (max-width: 991px) {
    .woocommerce .zn-cartpage-style2 .cart-collaterals .cart_totals,
    .woocommerce .zn-cartpage-style2 .cart-collaterals .cross-sells {
        width: 100% !important;
    }

    .filter__inner {
        display: none;
    }

    .filter__header + .filter__inner,
    .filter__header + .filter__inner > .filter__inner,
    .filter__header + .filter__inner--js-hidden {
        /*height: 0;*/
    }

    .filter__header.open + .filter__inner,
    .filter__header.open + .filter__inner--js-hidden {
        /*height: max-content;*/
    }

    .filter__checkgroup-aside {
        margin-right: 7px;
    }

    .filter__range-slider {
        display: none;
    }
    .sort_wrapper {
        display: block;
    }
}

@media (min-width: 768px) {
    .site-header.style9 {
        height: 130px;
        order: 1;
    }
}

@media screen and (min-width: 0px) and (max-width: 996px) {
    .vp-filter-btn-wrapper {
        margin-bottom: 2rem;
    }

    .vp-filter-wrapper .filter.filter--style-premmerce {
        height: 100%;
        overflow: auto;
    }

    .filter--style-premmerce .filter__item:first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    .site-header.style9 {
        order: 0;
    }

    #home_slider_mobile {
        display: block;
        max-height: auto;
    }

    #home_slider_pc {
        display: none;
    }

    .single-product.woocommerce div.product form.cart .variations label {
        width: max-content !important;
    }

    .woocommerce div.product form.cart .reset_variations {
        top: 50%;
        transform: translateY(-50%);
    }
	
	
	.woocommerce div.product form.cart .variations select {
		direction: rtl;
	}
}


.recommended__slider2 .slick-list {
    padding: 0 0 30px;
}

.recommended__slider2 .slick-slide {
    margin: 0 20px;
}

.recommended__slider2 .slick-slide:hover {
    box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}

.recommended__slider2 .slick-slide h3 {
    min-height: 48px;
    padding: 0 15px;
    font-size: 12px;
    line-height: 1.47;
    font-weight: bold;
}

.recommended__slider2 .slick-slide:hover .kw-details-title {
    color: #000000;
}

.recommended__slider2 .slick-slide .price {
    display: block;
    margin-bottom: 1rem;
    color: #282828;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.recommended__slider2 .prev,
.recommended__slider2 .next {
    position: absolute;
    top: 40%;
    cursor: pointer;
}

.recommended__slider2 .prev polyline,
.recommended__slider2 .prev polyline {
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    stroke: #141414;
}

.recommended__slider2 .prev:hover polyline,
.recommended__slider2 .next:hover polyline {
    stroke-width: 35;
}

.recommended__slider2 .prev {
    left: -10px;
}

.recommended__slider2 .next {
    right: -10px;
}

.recommended__slider2 .prev svg,
.recommended__slider2 .next svg {
    width: 25px;
}

.recommended__slider2 .slick-slide .add_to_cart_button,
.recommended__slider2 .slick-slide .add_to_cart_button:hover {
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #9edbd7 !important;
    color: white;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid #000 !important;
}









@media (max-width: 767px){
	

	
.eluidb6acd4ea {
    margin-top: 40px;
    margin-bottom: 25px;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
}


.cart__mobile {
	display: none !important;
}

@media (max-width: 991px) {
	#wfspb-main-content #wfspb-main-content {
		margin: 0 !important;
	}
	
	.woocommerce div.product form.cart .single_variation_wrap .variations_button div.quantity {
		display: flex;
		justify-content: space-between;
	}
	
	.cart__mobile {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
	}
	
	.cart__mobile .product-quantity {
		display: none;
	}
	
	.woocommerce-cart .zn-cartpage-style2 table.cart tr {
		position: relative;
	}
	
	td.product-thumbnail {
		padding: 0 !important;
	}
	
	td.product-thumbnail:before {
		content: '';
		display: none;
	}
	
	table.cart tbody td.product-subtotal,
/* 	table.cart tbody td.product-quantity, */
	table.cart tbody td.product-price {
		display: none !important;
	}
	
	table.cart tbody .product-remove {
		position: absolute;
		top: 10px;
		right: 11px;
		padding: 0 !important;
	}
	
	table.cart tbody td.product-name {
		text-align: left !important;
		width: calc(100% - 91px);
		padding: 15px 15px 15px 13px !important;
	}

	table.cart tbody td.product-name a {
		display: block;
		width: calc(100% - 20px);
	}
	
	table.cart tbody .product-name .variation {
		display: flex;
	}
	
	.woocommerce .quantity .qty,
	.woocommerce-cart .zn-cartpage-style2 table.cart td.product-thumbnail img {
		border: none;
	}
	
	.woocommerce-cart .zn-cartpage-style2 table.cart td.product-thumbnail {
		margin-left: 15px;
	}
	
	.woocommerce-cart .zn-cartpage-style2 table.cart td.product-thumbnail img {
		margin-top: 15px;
	}
	
	.cart-collaterals .cart-subtotal th,
	.order-total th {
		display: inline-block !important;
	}
	
	.cart-collaterals .cart-subtotal td,
	.order-total td {
		width: 63%;
	}
	
	.woocommerce table.shop_table td {
		border: none;
	}
	
	.woocommerce .woocommerce-message .button.wc-forward {
		width: 100% !important;
	}
	
	.woocommerce-cart #page_wrapper .zn-cartpage-style2 table.cart td.actions {
		width: 100%;
	}
}

/* ============================================================================
   Проста сторінка товару: кількість + "Add to cart" в один компактний рядок,
   як на варіативних (де qty+кнопку тримає .woocommerce-variation-add-to-cart).
   Без цього form.cart = display:block і поле кількості розтягується на всю
   ширину колонки ("поплила"). Ширину/висоту поля тема задає з !important,
   тому тут теж !important. Scoped :not(.variations_form) — щоб не зачепити
   варіативні/групові товари, у яких розкладка вже коректна.
   ============================================================================ */
.single-product form.cart:not(.variations_form) {
    /* Єдина мета цих правил — покласти кількість і кнопку В ОДИН РЯД
       (у темі вони падали одне під одне на мобільному). ВИГЛЯД навмисно
       не чіпаємо: поле і кнопка мають виглядати ІДЕНТИЧНО варіативним
       товарам, де стилі задає сама тема. Тому — жодних рамок, радіусів,
       шрифтів і кольорів тут. */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}
/* Клірфікс-псевдоелементи теми (display:table) у флекс-контейнері стають
   повноцінними флекс-елементами й з'їдають два зайві gap-проміжки — через це
   кнопці бракувало місця. Вони порожні, тож просто вимикаємо. */
.woocommerce div.product form.cart:not(.variations_form)::before,
.woocommerce div.product form.cart:not(.variations_form)::after {
    display: none !important;
}
.single-product form.cart:not(.variations_form) .quantity {
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
}
/* Тема стилізує поле кількості ЛИШЕ всередині .woocommerce-variation-add-to-cart,
   тому на простих товарах воно падало в дефолт (192×42, радіус 3px). Копіюємо
   точні значення варіативного еталона — щоб виглядало ідентично.
   Нативний спінер лишаємо: на варіативних він теж є (appearance:auto). */
.single-product form.cart:not(.variations_form) .quantity .qty {
    width: 61px !important;
    height: 52px !important;
    box-sizing: border-box !important;
    padding: 2px !important;
    border: 1px solid #D2D6DB !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: center !important;
    color: #111;
    background: #fff !important;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
.single-product form.cart:not(.variations_form) .single_add_to_cart_button {
    margin: 0 !important;
    /* як у варіативних: природна ширина, стискається лише за потреби */
    flex: 0 1 auto;
    min-width: 0;
}

/* ============================================================
   QW checkout processing feedback (2026-07-22, claude)
   Стандартний оверлей WooCommerce — білий 60% без спінера,
   на білій темі невидимий. Робимо стан обробки видимим.
   ============================================================ */
.woocommerce-checkout .blockUI.blockOverlay,
.woocommerce-cart .blockUI.blockOverlay,
#order_review .blockUI.blockOverlay {
    /* мʼякий теплий frosted замість темного тінту — не затемнює, виглядає преміально */
    background: rgba(246, 246, 244, 0.78) !important;
    opacity: 1 !important; /* blockUI ставить inline opacity → фіксуємо, щоб тінт був стабільний */
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    transition: background .2s ease;
}
/* дефолтний темний loader.gif WooCommerce на ::before — глушимо, лишаємо лише наше кільце */
.woocommerce-checkout .blockUI.blockOverlay::before,
.woocommerce-cart .blockUI.blockOverlay::before,
#order_review .blockUI.blockOverlay::before {
    display: none !important;
    background: none !important;
    content: none !important;
}
.woocommerce-checkout .blockUI.blockOverlay::after,
.woocommerce-cart .blockUI.blockOverlay::after,
#order_review .blockUI.blockOverlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    /* елегантне тонке кільце: світлий теплий трек + темний рухомий сегмент */
    border: 3px solid #E4E2DD;
    border-top-color: #111;
    animation: qw-spin 0.7s linear infinite;
}
@keyframes qw-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .woocommerce-checkout .blockUI.blockOverlay::after,
    .woocommerce-cart .blockUI.blockOverlay::after,
    #order_review .blockUI.blockOverlay::after {
        animation-duration: 1.6s;
    }
}
form.checkout.processing #place_order {
    opacity: 0.55;
    pointer-events: none;
}

/* ============================================================
   QW wholesale notice — компактний дропдаун (2026-07-22, claude)
   Замінює великий cream-банер на кошику/my-account.
   ============================================================ */
.qwo-wsn {
    width: 100%;
    margin: 0 0 16px;
    border: 1px solid #ffe1b3;
    background: #fff7e6;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
}
.qwo-wsn__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    line-height: 1.4;
    color: #2b2b2b;
    -webkit-user-select: none;
    user-select: none;
}
.qwo-wsn__summary::-webkit-details-marker { display: none; }
.qwo-wsn__summary::marker { content: ""; }
.qwo-wsn__summary strong { font-weight: 700; }
.qwo-wsn__chevron {
    margin-left: auto;
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid #b98a3e;
    border-bottom: 2px solid #b98a3e;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}
.qwo-wsn[open] .qwo-wsn__chevron { transform: rotate(225deg); }
.qwo-wsn__body {
    padding: 2px 14px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #2b2b2b;
}
.qwo-wsn__body p { margin: 0 0 6px; }
.qwo-wsn__body a { text-decoration: underline; color: inherit; }
@media (prefers-reduced-motion: reduce) {
    .qwo-wsn__chevron { transition: none; }
}

/* ============================================================

/* ============================================================
   QW V4 · КОШИК + ЧЕКАУТ за фінальним мокапом власника
   (QUEEN-cart-checkout.html, 2026-07-23, claude).
   Замінює шари V2/V2-polish/V3/V3.1/V3.2 одним узгодженим.

   Токени мокапа:
     ink #111 · soft #F6F6F4 · paper #FAFAF9 · line #E8E8E5
     muted #71716D · faint #9C9C97 · ok #2E7D4F
     радіус 2px · ease cubic-bezier(.16,1,.3,1) · Montserrat

   Скоупи: body.qw-cart-v2 / body.qw-checkout-v2. MQ: 991 / 640.
   Розмітка сайдбара кошика — woocommerce/cart/cart-totals.php,
   колонок чекаута — woocommerce/checkout/form-checkout.php.
   ============================================================ */

/* ---- 0 · Спільне: заголовок сторінки, сповіщення ---- */
body.qw-cart-v2 .kl-blog-page-title,
body.qw-checkout-v2 .kl-blog-page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(30px, 4.4vw, 50px) !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.04 !important;
    color: #111;
    margin: 0 0 clamp(26px, 4vw, 44px);
    text-align: left !important;
}
body.qw-cart-v2 .kl-blog-page-title .qw-count {
    font-size: .36em;
    font-weight: 600;
    letter-spacing: .1em;
    color: #9C9C97;
    margin-left: 7px;
}
body.qw-cart-v2 .woocommerce-message,
body.qw-cart-v2 .woocommerce-info,
body.qw-cart-v2 .woocommerce-error,
body.qw-checkout-v2 .woocommerce-message,
body.qw-checkout-v2 .woocommerce-info,
body.qw-checkout-v2 .woocommerce-error {
    position: relative;
    background: #FAFAF9 !important;
    border: 1px solid #E8E8E5 !important;
    border-left: 2px solid #111 !important;
    border-radius: 2px;
    color: #111 !important;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    padding: 13px 16px 13px 42px !important;
    margin-bottom: 18px !important;
    box-shadow: none;
}
/* іконка: один колір (чорний), по центру зліва — замість невидимого
   білого гліфа теми */
body.qw-cart-v2 .woocommerce-message::before,
body.qw-cart-v2 .woocommerce-info::before,
body.qw-cart-v2 .woocommerce-error::before,
body.qw-checkout-v2 .woocommerce-message::before,
body.qw-checkout-v2 .woocommerce-info::before,
body.qw-checkout-v2 .woocommerce-error::before {
    content: "✓" !important;
    font-family: inherit !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: auto !important;
    height: auto !important;
    color: #111 !important;
    background: none !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1 !important;
    display: block !important;
}
body.qw-cart-v2 .woocommerce-error::before,
body.qw-checkout-v2 .woocommerce-error::before,
body.qw-cart-v2 .woocommerce-info::before,
body.qw-checkout-v2 .woocommerce-info::before { content: "!" !important; }
/* кнопка «View cart» усередині сповіщення: компактний чорний лінк
   (тема давала білий текст із падінгом 17px/35px — невидимий) */
body.qw-cart-v2 .woocommerce-message .button.wc-forward,
body.qw-checkout-v2 .woocommerce-message .button.wc-forward {
    float: right;
    display: inline-block;
    background: none !important;
    border: none !important;
    color: #111 !important;
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    line-height: 1.5 !important;
    height: auto !important;
}
body.qw-checkout-v2 .woocommerce-NoticeGroup .woocommerce-error li { margin: 2px 0; }

/* числа без стрибків */
body.qw-cart-v2 .woocommerce-Price-amount,
body.qw-checkout-v2 .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* #page_wrapper теми має overflow:hidden — це створює clip-контейнер і
   ВИМИКАЄ position:sticky панелей. clip кліпає так само (офф-канвас меню
   лишається схованим), але не є scroll-контейнером → sticky працює.
   ВАЖЛИВО: hidden давав ще й BFC (утримував margin-collapse дітей) —
   clip BFC не створює, тому додаємо display:flow-root, інакше верхній
   маржин контенту провалюється і над хедером зʼявляється сірий відступ. */
@supports (overflow: clip) {
    body.qw-cart-v2 #page_wrapper,
    body.qw-checkout-v2 #page_wrapper {
        overflow: clip !important;
        display: flow-root;
    }
}

/* ============================================================
   CART · body.qw-cart-v2
   ============================================================ */

/* ---- 1 · Сітка: товари | панель; апсели в лівій колонці ---- */
@media (min-width: 992px) {
    body.qw-cart-v2 .zn-cartpage-style2,
    body.qw-cart-v2 .zn_content > .woocommerce > .zn-cartpage-style2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 0 clamp(32px, 4vw, 64px);
        align-items: start;
    }
    body.qw-cart-v2 .woocommerce-notices-wrapper,
    body.qw-cart-v2 .zn-cartpage-style2 > .qwo-wsn,
    body.qw-cart-v2 .zn-cartpage-style2 > details { grid-column: 1 / -1; }
    body.qw-cart-v2 form.woocommerce-cart-form { grid-column: 1; grid-row: 2; min-width: 0; }
    body.qw-cart-v2 .qw-ups { grid-column: 1; grid-row: 3; }
    body.qw-cart-v2 .cart-collaterals {
        grid-column: 2;
        grid-row: 2 / span 2;
        position: sticky;
        top: 96px; /* під fixed-хедером (70px) */
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* ---- 2 · Таблиця товарів ---- */
body.qw-cart-v2 .woocommerce-cart-form .shop_table { border: none; border-collapse: collapse; width: 100%; }
body.qw-cart-v2 .woocommerce-cart-form .shop_table th {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71716D;
    font-weight: 600;
    padding: 0 0 13px;
    border: none;
    border-bottom: 1px solid #111;
    background: none !important;
    text-align: left;
    vertical-align: bottom;
}
body.qw-cart-v2 .woocommerce-cart-form .shop_table th.product-quantity { text-align: center; }
body.qw-cart-v2 .woocommerce-cart-form .shop_table th.product-subtotal { text-align: right; }
body.qw-cart-v2 .woocommerce-cart-form .shop_table td {
    border: none;
    border-bottom: 1px solid #E8E8E5;
    padding: 24px 0;
    background: none;
    vertical-align: top;
}
body.qw-cart-v2 .woocommerce-cart-form .shop_table td + td { padding-left: 16px; }

/* колонка з × прихована — «Прибрати» текстом у комірці товару */
body.qw-cart-v2 .woocommerce-cart-form th.product-remove,
body.qw-cart-v2 .woocommerce-cart-form td.product-remove { display: none; }

body.qw-cart-v2 .product-thumbnail { width: 110px; }
body.qw-cart-v2 .product-thumbnail a,
body.qw-cart-v2 .product-thumbnail .kw-prodimage { display: block; width: 92px; line-height: 0; }
body.qw-cart-v2 .product-thumbnail img,
body.qw-cart-v2 .product-thumbnail .kw-prodimage-img {
    width: 92px !important;
    /* пропорція оригіналу 878×1229 — бокс точно під неї, тому кадр не ріжеться */
    aspect-ratio: 878 / 1229;
    height: auto !important;
    max-width: 92px !important;
    object-fit: cover;
    object-position: top center;
    background: #F6F6F4;
    border: none;
    border-radius: 2px;
    display: block;
}
/* вторинне (hover) зображення теми в мініатюрі кошика — ховаємо */
body.qw-cart-v2 .kw-prodimage-img-secondary { display: none !important; }

body.qw-cart-v2 .woocommerce-cart-form td.product-name { padding-top: 26px; }
body.qw-cart-v2 .woocommerce-cart-form td.product-name > a {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.4;
    text-decoration: none;
}
body.qw-cart-v2 .woocommerce-cart-form td.product-name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.qw-cart-v2 .woocommerce-cart-form .shop_table .variation {
    margin: 6px 0 0;
    font-size: 12px;
    color: #71716D;
    line-height: 1.4;
    font-weight: 500;
}
body.qw-cart-v2 .woocommerce-cart-form .shop_table .variation dt,
body.qw-cart-v2 .woocommerce-cart-form .shop_table .variation dd { display: inline; margin: 0; font-weight: 500; }
body.qw-cart-v2 .woocommerce-cart-form .shop_table .variation dd p { display: inline; margin: 0; }
/* смітник на десктопі — ЗАВЖДИ на своєму рядку під назвою (навіть без варіації):
   display:flex робить його блоковим → падає під інлайн-назву, а не встає поруч */
body.qw-cart-v2 .qw-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-top: 12px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    color: #9C9C97 !important;
    background: #fff;
    text-decoration: none !important;
    transition: color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1), background .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-cart-v2 .qw-item-remove svg { display: block; }
body.qw-cart-v2 .qw-item-remove:hover {
    color: #fff !important;
    border-color: #111;
    background: #111;
}

/* ціна/кількість/тотал — спільний padding-top + line-height=висоті степера (40px),
   щоб вертикальні центри тексту й степера збіглися рівно (десктоп) */
body.qw-cart-v2 .woocommerce-cart-form td.product-price { font-size: 13.5px; font-weight: 600; color: #111; padding-top: 22px; line-height: 40px; }
body.qw-cart-v2 .woocommerce-cart-form td.product-price del { color: #9C9C97; font-weight: 500; font-size: 12px; }
body.qw-cart-v2 .woocommerce-cart-form td.product-price ins { text-decoration: none; }

/* тема ставить td.product-quantity{z-index:9999} → степер налазив поверх
   фіксованого хедера (z-index:999) при скролі. Знімаємо стекінг-контекст. */
body.qw-cart-v2 .woocommerce-cart-form td.product-quantity { position: static !important; z-index: auto !important; }
body.qw-cart-v2 .woocommerce-cart-form td.product-quantity { text-align: center; padding-top: 22px; }
body.qw-cart-v2 .woocommerce-cart-form td.product-subtotal {
    text-align: right;
    font-size: 14.5px;
    font-weight: 700;
    color: #111;
    padding-top: 22px;
    line-height: 40px;
}

/* ─── степер кількості (сегментований, преміум) ─── */
.qw-step {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid #D9D6D0;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.qw-step:focus-within { border-color: #111; box-shadow: 0 0 0 3px rgba(17, 17, 17, .07); }
.qw-step-b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    border: none;
    background: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: #111;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .18s ease, color .18s ease;
}
.qw-step-b:hover { background: #F6F6F4; }
.qw-step-b:active { background: #ECEAE6; }
.qw-step-b:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
.qw-step-b:disabled { color: #C9C6C0; cursor: default; background: #fff; }
.qw-step input.qty {
    width: 40px !important;
    height: 100%;
    border: none !important;
    border-left: 1px solid #E8E8E5 !important;
    border-right: 1px solid #E8E8E5 !important;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    background: #fff;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.qw-step input.qty:focus { outline: none; }
.qw-step input.qty::-webkit-outer-spin-button,
.qw-step input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── оптимістичний UI: стан «перераховую» на фінальній сумі поки сервер доганяє ───
   суму рядка й «Товари» ми оновлюємо миттєво (детерміновано), а фінал «До сплати»
   і стікі-суму делікатно пульсуємо, доки прийде точне значення з сервера */
@keyframes qwRecalcPulse { 0%, 100% { opacity: .3; } 50% { opacity: .65; } }
body.qw-cart-v2 .cart_totals.qw-recalc .qw-due-value,
body.qw-cart-v2 .qw-cart-sticky.qw-recalc b {
    animation: qwRecalcPulse .9s ease-in-out infinite;
}

/* рядок actions: живуть лише nonce + приховані купон/update */
body.qw-cart-v2 .woocommerce-cart-form td.actions {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
body.qw-cart-v2 .woocommerce-cart-form td.actions .coupon { display: none !important; }
body.qw-cart-v2 button[name="update_cart"] { display: none !important; }

/* «← Продовжити покупки» */
body.qw-cart-v2 .qw-cart-continue {
    display: inline-block;
    margin-top: 24px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #111;
    padding-bottom: 3px;
    transition: color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-cart-v2 .qw-cart-continue:hover { color: #71716D !important; border-color: #71716D; }

/* ---- 3 · Панель підсумку (чорна рамка, мокап) ---- */
body.qw-cart-v2 .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    border: 1px solid #111;
    border-radius: 2px;
    background: #fff;
    padding: clamp(20px, 2.2vw, 28px);
    box-sizing: border-box;
}
body.qw-cart-v2 .cart_totals h2 { display: none; }

/* прогрес безкоштовної доставки — на своєму місці, зверху панелі */
.qw-fsb { margin: 0 0 20px; }
.qw-fsb-t { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #111; }
.qw-fsb-t b { font-weight: 700; }
.qw-fsb-t .woocommerce-Price-amount,
.qw-fsb-t .woocommerce-Price-amount * { font-size: inherit !important; font-weight: 700; }
.qw-fsb-t .woocommerce-Price-amount { white-space: nowrap; }
.qw-fsb-track { height: 2px; background: #E8E8E5; position: relative; overflow: hidden; margin-top: 10px; }
.qw-fsb-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: #111; transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.qw-fsb--done .qw-fsb-t { color: #2E7D4F; }
.qw-fsb--done .qw-fsb-fill { background: #2E7D4F; }

/* блок «Доставка» */
body.qw-cart-v2 .qw-ship-block { border-top: 1px solid #E8E8E5; padding: 18px 0 20px; }
.qw-caps-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #71716D;
    font-weight: 600;
}
.qw-caps-row .qw-geo-note {
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 500;
    color: #9C9C97;
}
.qw-country-wrap { position: relative; display: block; margin-bottom: 12px; }
.qw-country-wrap select.qw-country {
    width: 100%;
    height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    /* <select> не успадковує шрифт від body — без цього браузер малює
       системним sans-serif, і поле випадало зі стилю сторінки */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}
.qw-country-wrap select.qw-country:hover,
.qw-country-wrap select.qw-country:focus { outline: none; border-color: #111; }
.qw-country-wrap::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.3px solid #111;
    border-bottom: 1.3px solid #111;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* методи-картки (кошик + крок 02 чекаута) */
.qw-methods { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.qw-method {
    position: relative;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: #fff;
    margin: 0 !important;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1), background .3s cubic-bezier(.16, 1, .3, 1);
}
.qw-method:hover { border-color: #111; }
.qw-method:has(input.shipping_method:checked) { border-color: #111; background: #FAFAF9; }
.qw-method input.shipping_method[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 15px;
    /* Було top:15px — жорстка відстань від верху. Щойно назва методу
       переносилась у два рядки (мобільний), кружок «з'їжджав» і стояв не
       по центру. Тепер центрування справжнє й не залежить від висоти рядка. */
    top: 50%;
    transform: translateY(-50%);
    /* !important: у кошику тема додає радіо margin-top:3px, який зсував
       уже відцентрований кружок донизу */
    margin: 0 !important;
    width: 17px;
    height: 17px;
    border: 1px solid #111;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.qw-method input.shipping_method[type="radio"]:checked {
    background: #111;
    box-shadow: inset 0 0 0 4px #FAFAF9; /* чіткіше за radial-gradient */
}
.qw-method label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 14px 12px 44px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #111;
    line-height: 1.35;
    text-align: left;
}
.qw-method--single { border-color: #111; background: #FAFAF9; }
.qw-method--single label { padding-left: 44px; cursor: default; }
.qw-method--single::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #111;
    box-shadow: inset 0 0 0 4px #FAFAF9;
}
.qw-method .qw-m-name { min-width: 0; }
/* бейдж «Найкращий вибір» на Nova Post — тонкий монохромний чип у стилі бренду */
.qw-m-best {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid #111;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    background: #fff;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}
.qw-method .qw-m-cost { white-space: nowrap; font-weight: 700; margin-left: auto; }
.qw-method .qw-m-cost .woocommerce-Price-amount { font-weight: 700; }
.qw-free { color: #2E7D4F; font-weight: 700; }
.qw-ship-note { font-size: 12px; color: #71716D; margin: 4px 0 0; line-height: 1.5; }
.qw-ship-hint { font-size: 11px; color: #9C9C97; margin: 10px 0 0; font-weight: 500; }

/* прихований нативний калькулятор — транспорт для селекта країни */
.qw-calc-hidden { display: none !important; }

/* купон-лінк */
.qw-coupon-toggle {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid #E8E8E5;
    padding: 15px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #111;
    cursor: pointer;
}
.qw-coupon-toggle .qw-plus {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.qw-coupon-toggle.is-open .qw-plus { transform: rotate(45deg); }
.qw-coupon-panel { display: none; padding: 2px 0 18px; gap: 8px; }
.qw-coupon-panel .qw-coupon-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: transparent;
    font-size: 13px;
    letter-spacing: .05em;
    color: #111;
    box-sizing: border-box;
}
.qw-coupon-panel .qw-coupon-input:focus { outline: none; border-color: #111; }
.qw-coupon-panel .qw-coupon-apply {
    height: 44px;
    padding: 0 18px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s cubic-bezier(.16, 1, .3, 1);
}
.qw-coupon-panel .qw-coupon-apply:hover { background: #2B2B2B; }

/* підсумки */
.qw-totals-rows {
    border-top: 1px solid #E8E8E5;
    padding: 18px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.qw-trow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.qw-trow .qw-t-label { color: #71716D; font-weight: 500; min-width: 0; }
.qw-trow .qw-t-value { font-weight: 600; color: #111; white-space: nowrap; }
.qw-trow.cart-discount .qw-t-value .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #9C9C97 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.qw-trow.cart-discount .qw-t-value .woocommerce-remove-coupon:hover { color: #111 !important; }

.qw-due {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid #111;
    margin-top: 14px;
    padding-top: 17px;
}
.qw-due .qw-due-label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #111;
}
.qw-due .qw-due-value,
.qw-due .qw-due-value strong,
.qw-due .qw-due-value .woocommerce-Price-amount { font-size: 22px; font-weight: 800; color: #111; white-space: nowrap; }
.qw-due .qw-due-value small { font-size: 11px; font-weight: 500; color: #9C9C97; }

/* CTA + ghost + бейджі + траст */
body.qw-cart-v2 .wc-proceed-to-checkout { padding: 20px 0 0 !important; margin: 0 !important; }
body.qw-cart-v2 .wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #111 !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none;
    transition: background .35s cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}
body.qw-cart-v2 .wc-proceed-to-checkout a.checkout-button:hover { background: #2B2B2B !important; border-color: #2B2B2B !important; }
.qw-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    margin-top: 10px;
    background: transparent;
    color: #111 !important;
    border: 1px solid #111;
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}
.qw-btn-ghost:hover { background: #111; color: #fff !important; }
.qw-cart-badges {
    display: flex;
    gap: 7px;
    margin-top: 18px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.qw-cart-badges .qw-pay {
    height: 24px;
    width: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.qw-pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
}
.qw-pay-chip img { height: 12px; width: auto; display: block; }
.qw-cart-trust {
    margin-top: 13px;
    font-size: 10.5px;
    color: #9C9C97;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    text-align: center;
}
.qw-cart-trust svg { flex: none; stroke: #9C9C97; }

/* ---- 4 · Апсели «Доповни образ» — слайдер: 3 картки видно, стрілки/свайп далі ---- */
.qw-ups { margin-top: clamp(32px, 5vw, 52px); min-width: 0; }
.qw-ups-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}
.qw-ups-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111;
    margin: 0;
}
.qw-ups-nav { display: flex; gap: 8px; }
.qw-ups-nav[hidden] { display: none; }
.qw-ups-nav button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #111;
    border-radius: 2px;
    color: #111;
    padding: 0;
    cursor: pointer;
    transition: background .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1);
}
.qw-ups-nav button:hover { background: #111; color: #fff; }
.qw-ups-nav button:disabled { border-color: #E8E8E5; color: #9C9C97; pointer-events: none; background: none; }
.qw-ups-nav .qw-ups-flip { display: flex; transform: rotate(180deg); }
.qw-ups-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.qw-ups-row::-webkit-scrollbar { display: none; }
.qw-ups-card { flex: 0 0 calc((100% - 24px) / 3); scroll-snap-align: start; }
.qw-ups-card {
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1);
    min-width: 0;
}
.qw-ups-card:hover { border-color: #111; }
.qw-ups-thumb {
    display: block;
    /* пропорція оригіналу 878×1229 — квадрат 1/1 різав кадр */
    aspect-ratio: 878 / 1229;
    background: #F6F6F4;
    border-radius: 2px;
    overflow: hidden;
    line-height: 0;
}
.qw-ups-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.qw-ups-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.45;
    color: #111 !important;
    text-decoration: none !important;
}
.qw-ups-name:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.qw-ups-price { font-size: 13px; font-weight: 700; color: #111; }
.qw-ups-price del { color: #9C9C97; font-weight: 500; font-size: 11.5px; }
.qw-ups-price ins { text-decoration: none; }
.qw-ups-add {
    margin-top: auto;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: 1px solid #111 !important;
    border-radius: 2px;
    font-size: 10.5px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none !important;
    padding: 0 10px !important;
    cursor: pointer;
    transition: background .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}
.qw-ups-add:hover { background: #111 !important; color: #fff !important; }
.qw-ups-add.loading { opacity: .55; pointer-events: none; }
.qw-ups-add.is-done {
    border-color: #E8E8E5 !important;
    color: #9C9C97 !important;
    pointer-events: none;
    cursor: default;
}
.qw-ups .added_to_cart { display: none !important; } /* «View cart», який Woo додає після кнопки */

/* ---- 5 · Sticky-бар (мобільний) ---- */
.qw-cart-sticky {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #111;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 14px;
}
.qw-cart-sticky-sum span {
    display: block;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #71716D;
    font-weight: 600;
}
.qw-cart-sticky-sum b { font-size: 17px; font-weight: 800; white-space: nowrap; color: #111; }
.qw-cart-sticky-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: #111;
    color: #fff !important;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
    text-decoration: none !important;
}

/* ---- 6 · Мобільний кошик (≤991) ---- */
@media (max-width: 991px) {
    body.qw-cart-v2 { padding-bottom: 84px; overflow-x: clip; }
    body.qw-cart-v2 .qw-cart-sticky { display: flex; }
    body.qw-cart-v2 .qw-cart-sticky.qw-sticky-off { display: none; }
    /* чат KeyCRM піднімаємо над sticky-баром, інакше він закриває суму */
    body.qw-cart-v2 #keycrm-social-buttons { bottom: 92px !important; }

    body.qw-cart-v2 .cart-collaterals { width: 100% !important; float: none !important; margin: 28px 0 0 !important; }
    body.qw-cart-v2 .cart-collaterals .cart_totals { max-width: 100% !important; }

    /* ─── таблиця → «товарна картка» на реальних комірках ───
       Розкладка за фідбеком власника:
         [ фото ]  назва ................. ×   (× угорі, біля назви)
         [ фото ]  ціна за од.  ($50)
         [ фото ]  розмір (SIZE: M)
         [ фото ]  [− 2 +] ............. $100  (степер зліва, тотал навпроти)
       Селектори-плейсери мають повну специфічність (…tbody tr.cart_item td.X),
       щоб перебити генеричне правило комірки і будь-що з теми. */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table { display: block; width: 100%; }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table thead { display: none; }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody { display: block; }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr { display: block; }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr);
        /* row1 = висота назви+ціни (min-content), row2 = решта (1fr) → мета-ряд
           притиснутий одразу під ціну; зайва висота фото йде вниз під мета-ряд */
        grid-template-rows: min-content 1fr;
        column-gap: 14px;
        row-gap: 0;
        align-items: start;
        padding: 22px 0;
        border-bottom: 1px solid #E8E8E5;
        position: relative;
    }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td {
        display: block !important; /* тема ховає price/subtotal на мобільному */
        border: none !important;
        padding: 0 !important;
        background: none !important;
        text-align: left !important; /* smallscreen.css ядра ставить right !important */
        width: auto;
        min-width: 0;
    }
    body.qw-cart-v2 .woocommerce-cart-form .shop_table td::before { display: none !important; content: none !important; }

    /* фото — ліва колонка, спан на всі ряди контенту */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-thumbnail { grid-column: 1; grid-row: 1 / -1; align-self: start; width: auto; }
    body.qw-cart-v2 .product-thumbnail a,
    body.qw-cart-v2 .product-thumbnail .kw-prodimage { width: 84px; }
    body.qw-cart-v2 .product-thumbnail img,
    body.qw-cart-v2 .product-thumbnail .kw-prodimage-img {
        width: 84px !important;
        aspect-ratio: 878 / 1229;
        height: auto !important;
        max-width: 84px !important;
        margin-top: 0 !important; /* тема давала img margin-top — прибираємо на мобільному */
    }

    /* контентна колонка (col2): назва(11px) → ціна за од. → розмір; смітник absolute */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-name { grid-column: 2; grid-row: 1; align-self: start; padding-right: 46px !important; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name > a { font-size: 11px; line-height: 1.35; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .qw-unit-price {
        display: block;
        margin-top: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #111;
    }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .qw-unit-price del { color: #9C9C97; font-weight: 500; font-size: 12px; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .qw-unit-price ins { text-decoration: none; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .variation { margin-top: 6px; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .qw-item-remove { display: none !important; }

    /* окрему комірку ціни ховаємо — ціна за од. вже в назві (.qw-unit-price) */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-price { display: none !important; }

    /* смітник — absolute угорі-праворуч, по верху заголовка */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-remove {
        position: absolute;
        top: 22px;
        right: 0;
        display: flex !important;
        align-items: flex-start;
        margin: 0 !important;
    }
    body.qw-cart-v2 td.product-remove .remove {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 36px;
        height: 36px;
        border: 1px solid #E8E8E5 !important;
        border-radius: 2px;
        background: #fff !important;
        color: #71716D !important;
        line-height: 1;
        text-decoration: none !important;
        transform: none !important;
        transition: color .2s, border-color .2s, background .2s;
    }
    body.qw-cart-v2 td.product-remove .remove:hover {
        color: #fff !important;
        border-color: #111 !important;
        background: #111 !important;
    }
    /* тема домальовує × псевдоелементами поверх нашого SVG — глушимо (3 крапки) */
    body.qw-cart-v2 td.product-remove .remove::before,
    body.qw-cart-v2 td.product-remove .remove::after { content: none !important; display: none !important; }

    /* ─── нижній мета-ряд: SIZE · степер · тотал — усе в ОДИН рядок ───
       комірка кількості = флекс-контейнер; JS кладе сюди клон розміру
       (.qw-m-var) зліва та клон загальної суми (.qw-m-sub) справа */
    /* грід 1fr | auto | 1fr → степер рівно по центру ряду незалежно від
       ширини варіації/суми; без варіації col1 порожня, степер лишається в центрі */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-quantity {
        grid-column: 2;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 10px;
        margin: 12px 0 0 0 !important; /* тема давала margin-left:89px → зануляємо, інакше степер вилазить */
    }
    body.qw-cart-v2 .qw-m-var {
        grid-column: 1;
        justify-self: start;
        font-size: 12px;
        font-weight: 500;
        color: #71716D;
        line-height: 1.3;
        white-space: nowrap;
    }
    body.qw-cart-v2 .qw-m-var dt,
    body.qw-cart-v2 .qw-m-var dd { display: inline; margin: 0; font-weight: 500; }
    body.qw-cart-v2 .qw-m-var dd p { display: inline; margin: 0; }
    body.qw-cart-v2 .qw-m-sub {
        grid-column: 3;
        justify-self: end;
        font-size: 15px;
        font-weight: 700;
        color: #111;
        white-space: nowrap;
    }
    /* справжню комірку тоталу й розмір у назві ховаємо — показуємо клони в мета-ряду */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item td.product-subtotal { display: none !important; }
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .variation { display: none !important; }

    /* screen-reader-label усередині .quantity займав ~97px інлайн-простору
       і зсував степер — прибиваємо в 0 (лишаємо для скрін-рідерів) */
    body.qw-cart-v2 .woocommerce-cart-form td.product-quantity .quantity .screen-reader-text {
        position: absolute !important;
        width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
    }
    body.qw-cart-v2 .woocommerce-cart-form td.product-quantity .quantity { grid-column: 2; justify-self: center; display: inline-flex; }

    /* менший степер на мобільному */
    body.qw-cart-v2 .qw-step { height: 38px; }
    body.qw-cart-v2 .qw-step-b { width: 34px; font-size: 16px; }
    body.qw-cart-v2 .qw-step input.qty { width: 36px !important; }

    /* апсели — той самий слайдер, ширші картки під палець */
    .qw-ups-row { gap: 10px; padding-bottom: 4px; }
    .qw-ups-card { flex: 0 0 46%; }
}

/* .qw-unit-price та клони мета-ряду — лише мобільна картка; на десктопі ховаємо */
@media (min-width: 992px) {
    body.qw-cart-v2 .woocommerce-cart-form td.product-name .qw-unit-price { display: none; }
    body.qw-cart-v2 .qw-m-var,
    body.qw-cart-v2 .qw-m-sub { display: none !important; }
}

@media (max-width: 640px) {
    /* та сама 2-колонкова картка, лише вужче фото */
    body.qw-cart-v2 .woocommerce-cart-form .shop_table tbody tr.cart_item { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; }
    body.qw-cart-v2 .product-thumbnail a,
    body.qw-cart-v2 .product-thumbnail .kw-prodimage { width: 76px; }
    body.qw-cart-v2 .product-thumbnail img,
    body.qw-cart-v2 .product-thumbnail .kw-prodimage-img {
        width: 76px !important;
        aspect-ratio: 878 / 1229;
        height: auto !important;
        max-width: 76px !important;
    }
    body.qw-cart-v2 .cart-collaterals .cart_totals { padding: 18px 16px; }
    .qw-due .qw-due-value,
    .qw-due .qw-due-value strong,
    .qw-due .qw-due-value .woocommerce-Price-amount { font-size: 20px; }
    body.qw-cart-v2 .wc-proceed-to-checkout a.checkout-button,
    .qw-btn-ghost { height: 52px; font-size: 11.5px; }
    .qw-ups-card { flex: 0 0 62%; }
}

/* ============================================================
   CHECKOUT · body.qw-checkout-v2
   ============================================================ */

@keyframes qwFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 1 · Сітка: поля | панель ---- */
.qw-co-grid { display: block; }
@media (min-width: 992px) {
    .qw-co-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: clamp(28px, 4vw, 72px);
        align-items: start;
    }
    .qw-co-main { min-width: 0; }
    .qw-co-side { position: sticky; top: 96px; } /* під fixed-хедером (70px) */
}
@media (min-width: 992px) and (max-width: 1200px) {
    .qw-co-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* ядро Woo флоатить col2-set і колонки — глушимо повністю, інакше
   блок оплати втискається у нульову ширину поруч із флоатом */
body.qw-checkout-v2 #customer_details.col2-set { float: none !important; width: 100% !important; }
body.qw-checkout-v2 #customer_details.col2-set::after { content: ""; display: block; clear: both; }
body.qw-checkout-v2 #customer_details .col-1,
body.qw-checkout-v2 #customer_details .col-2 { float: none !important; width: 100% !important; margin: 0; padding: 0; }
body.qw-checkout-v2 .qw-co-paywrap { clear: both; float: none !important; width: 100% !important; }

/* ---- 2 · Логін/купон: Woo-банери приховані, лінки переїжджають
   у мікро-лінки під email (JS microLinks; мокап .micro-links) ---- */
body.qw-checkout-v2 .woocommerce-form-login-toggle,
body.qw-checkout-v2 .woocommerce-form-coupon-toggle { display: none !important; }

/* логін-лінк у самому верху форми (над кроком 01), праворуч */
body.qw-checkout-v2 .qw-co-topbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
}
body.qw-checkout-v2 .qw-co-topbar .qw-co-login {
    font-size: 12px;
    font-weight: 700;
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: color .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .qw-co-topbar .qw-co-login:hover { color: #71716D !important; }
@media (max-width: 991px) {
    body.qw-checkout-v2 .qw-co-topbar { justify-content: flex-start; }
}

/* Woo-форма купона (жила над form.checkout) повністю прихована */
body.qw-checkout-v2 form.checkout_coupon { display: none !important; }

/* ─── КУПОН-КАРТКА (акордеон) перед секцією оплати ─── */
body.qw-checkout-v2 .qw-co-coupon-card {
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: #fff;
    margin: 0 0 24px;
    overflow: hidden;
    transition: border-color .2s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .qw-co-coupon-card.is-open { border-color: #111; }
body.qw-checkout-v2 .qw-cc-toggle {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 16px 18px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
body.qw-checkout-v2 .qw-cc-icon { display: inline-flex; flex: none; color: #111; }
body.qw-checkout-v2 .qw-cc-icon svg { display: block; }
body.qw-checkout-v2 .qw-cc-label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111;
}
body.qw-checkout-v2 .qw-cc-chev {
    flex: none;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .qw-co-coupon-card.is-open .qw-cc-chev { transform: rotate(-135deg) translate(-1px, -1px); }
body.qw-checkout-v2 .qw-cc-body {
    display: none; /* JS ставить flex при відкритті */
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 18px;
}
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 46px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #111;
    background: #fff;
    transition: border-color .2s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-input:focus { outline: none; border-color: #111; }
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-input::placeholder { color: #9C9C97; }
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-apply {
    height: 46px;
    padding: 0 22px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-apply:hover { background: #2B2B2B; }
body.qw-checkout-v2 .qw-cc-body .qw-co-coupon-apply:disabled { opacity: .5; pointer-events: none; }
/* повідомлення прямо в картці (без коробки-нотіса ядра) */
body.qw-checkout-v2 .qw-cc-msg { flex: 0 0 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
body.qw-checkout-v2 .qw-cc-msg .woocommerce-error,
body.qw-checkout-v2 .qw-cc-msg .woocommerce-message,
body.qw-checkout-v2 .qw-cc-msg ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    color: #71716D !important;
    font-size: 12px;
}
body.qw-checkout-v2 .qw-cc-msg .woocommerce-error::before,
body.qw-checkout-v2 .qw-cc-msg .woocommerce-message::before { display: none !important; }
body.qw-checkout-v2 .qw-cc-msg.is-error { color: #71716D; }
/* застосовано — акцент на рамці й іконці */
body.qw-checkout-v2 .qw-co-coupon-card.is-applied { border-color: #2E7D4F; }
body.qw-checkout-v2 .qw-co-coupon-card.is-applied .qw-cc-icon { color: #2E7D4F; }

/* купон-форма — inline-група */
body.qw-checkout-v2 form.checkout_coupon {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0 0 12px;
    padding: 0;
    max-width: 440px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    animation: qwFade .22s ease;
}
body.qw-checkout-v2 form.checkout_coupon p.form-row { margin: 0; padding: 0; width: auto; float: none; }
body.qw-checkout-v2 form.checkout_coupon .form-row-first { flex: 1 1 auto; min-width: 0; }
body.qw-checkout-v2 form.checkout_coupon .form-row-last { flex: 0 0 auto; }
body.qw-checkout-v2 form.checkout_coupon .clear { display: none; }
body.qw-checkout-v2 form.checkout_coupon .input-text { width: 100%; }
body.qw-checkout-v2 form.checkout_coupon button[name="apply_coupon"] {
    height: 48px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 form.checkout_coupon button[name="apply_coupon"]:hover { background: #2B2B2B; }

/* логін-форма — картка */
body.qw-checkout-v2 form.woocommerce-form-login {
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: #fff;
    padding: 20px 20px 16px;
    margin: 0 0 12px;
    max-width: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    animation: qwFade .22s ease;
}
body.qw-checkout-v2 form.woocommerce-form-login > p:first-child {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    font-size: 12.5px;
    color: #71716D;
    line-height: 1.5;
}
body.qw-checkout-v2 form.woocommerce-form-login .form-row { float: none; width: auto; margin: 0 0 12px; padding: 0; }
body.qw-checkout-v2 form.woocommerce-form-login .form-row-first { grid-column: 1; }
body.qw-checkout-v2 form.woocommerce-form-login .form-row-last { grid-column: 2; }
body.qw-checkout-v2 form.woocommerce-form-login .clear { display: none; }
body.qw-checkout-v2 form.woocommerce-form-login .password-input { display: block; position: relative; }
body.qw-checkout-v2 form.woocommerce-form-login .password-input .input-text { padding-right: 44px; }
body.qw-checkout-v2 form.woocommerce-form-login .show-password-input { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
body.qw-checkout-v2 form.woocommerce-form-login .form-row:has(button[name="login"]) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 6px;
}
body.qw-checkout-v2 form.woocommerce-form-login .woocommerce-form-login__rememberme {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.qw-checkout-v2 form.woocommerce-form-login button[name="login"] {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 2px;
    height: 44px;
    padding: 0 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
body.qw-checkout-v2 form.woocommerce-form-login .lost_password { grid-column: 1 / -1; margin: 0; font-size: 12px; }
body.qw-checkout-v2 form.woocommerce-form-login .lost_password a { color: #71716D; }

/* ---- 3 · Кроки і поля ---- */
body.qw-checkout-v2 .woocommerce-billing-fields > h3,
body.qw-checkout-v2 .woocommerce-additional-fields > h3 { display: none !important; }

body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}
body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row {
    float: none;
    width: auto;
    margin: 0 0 14px !important;
    padding: 0;
}
body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row-first { grid-column: 1; }
body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row-last { grid-column: 2; }
body.qw-checkout-v2 .woocommerce-input-wrapper { display: block; }

/* заголовки кроків 01–04 (рядки-псевдополя сортуються разом із полями) */
body.qw-checkout-v2 .qw-co-hrow { grid-column: 1 / -1; margin: 0 0 8px !important; }
body.qw-checkout-v2 .qw-co-hrow .qw-co-hint { margin: 6px 0 0; }
.qw-co-h {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-top: 1px solid #111;
    padding-top: 28px;
    margin: 30px 0 6px;
}
#qw-h-contact { border-top: none; padding-top: 0; margin-top: 0; }
.qw-co-step { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #9C9C97; }
.qw-co-h-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.3;
}
.qw-co-hint {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #71716D;
    font-weight: 500;
    margin: 0 0 14px;
    max-width: 56ch;
}

/* лейбли + інпути */
body.qw-checkout-v2 form.checkout .form-row > label:not(.woocommerce-form__label-for-checkbox),
body.qw-checkout-v2 form.woocommerce-form-login .form-row > label:not(.woocommerce-form__label-for-checkbox) {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #71716D;
    margin: 0 0 7px;
}
body.qw-checkout-v2 .required,
body.qw-checkout-v2 abbr.required { color: #111 !important; border: none; text-decoration: none; }
body.qw-checkout-v2 .optional { color: #9C9C97; text-transform: none; letter-spacing: .02em; }

body.qw-checkout-v2 form.checkout .input-text,
body.qw-checkout-v2 form.woocommerce-form-login .input-text,
body.qw-checkout-v2 form.checkout_coupon .input-text {
    box-sizing: border-box;
    width: 100%;
    height: 48px !important;
    border: 1px solid #E8E8E5 !important;
    border-radius: 2px !important;
    padding: 0 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #111;
    background: #fff;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 form.checkout textarea.input-text { height: auto !important; min-height: 92px; padding: 12px 13px; line-height: 1.55; resize: vertical; }
body.qw-checkout-v2 .input-text::placeholder { color: #9C9C97; }
body.qw-checkout-v2 form.checkout .input-text:focus,
body.qw-checkout-v2 form.woocommerce-form-login .input-text:focus,
body.qw-checkout-v2 form.checkout_coupon .input-text:focus {
    border-color: #111 !important;
    outline: none;
    box-shadow: none;
}
body.qw-checkout-v2 .qw-email-first .input-text { border-color: #111 !important; }
body.qw-checkout-v2 .qw-email-first .description,
body.qw-checkout-v2 .qw-email-first span.description {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #9C9C97;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

/* селекти + select2 */
body.qw-checkout-v2 form.checkout select:not(.select2-hidden-accessible) {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    background: #fff;
}
body.qw-checkout-v2 .select2-container { width: 100% !important; }
body.qw-checkout-v2 .select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1px solid #E8E8E5 !important;
    border-radius: 2px !important;
    background: #fff;
}
/* Тема давала цьому span padding:7px 0 → разом із line-height виходило 60px:
   текст з'їжджав донизу, а поле здавалося зависоким. Прибиваємо висоту рівно
   до внутрішнього простору контейнера (48px − 2px рамки = 46px) і центруємо. */
body.qw-checkout-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    box-sizing: border-box;
    height: 46px !important;
    line-height: 46px !important; /* вертикальне центрування вибраної країни */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 13px;
    padding-right: 32px;
    margin: 0 !important;
    color: #111;
    font-size: 14px;
    font-weight: 500;
}
body.qw-checkout-v2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 10px; top: 0 !important; }
body.qw-checkout-v2 .select2-container--default.select2-container--focus .select2-selection--single,
body.qw-checkout-v2 .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #111 !important;
    box-shadow: none;
}
body.qw-checkout-v2 .select2-dropdown { border-color: #E8E8E5; border-radius: 2px; }
body.qw-checkout-v2 .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #111; }

body.qw-checkout-v2 .woocommerce-form__label-for-checkbox {
    font-size: 13px;
    font-weight: 500;
    color: #3A3835;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
body.qw-checkout-v2 #createaccount,
body.qw-checkout-v2 #terms,
body.qw-checkout-v2 .woocommerce-form__label-for-checkbox input { accent-color: #111; }

/* state прибраний з форми (locale-фільтр робить його необовʼязковим) */
body.qw-checkout-v2 #billing_state_field { display: none !important; }

/* email тепер form-row-first (50%) поруч із телефоном — full-width max прибрано */

/* ---- 4 · Крок 02: країна ліворуч, методи праворуч (одним рядком) ---- */
body.qw-checkout-v2 .qw-ship-field {
    grid-column: 2;
    margin: 0 0 14px !important;
}
/* лейбл над методами — у стилі «COUNTRY / REGION» ліворуч */
body.qw-checkout-v2 .qw-ship-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #71716D;
    margin: 0 0 7px;
}
#qw-co-ship .qw-methods { margin: 0 !important; }
@media (max-width: 640px) {
    body.qw-checkout-v2 .qw-ship-field { grid-column: 1; }
}

/* ---- 5 · Додаткові поля / коментар / віджет НП ---- */
body.qw-checkout-v2 .woocommerce-additional-fields { margin-top: 26px; }
body.qw-checkout-v2 #wcus-billing-fields h1,
body.qw-checkout-v2 #wcus-billing-fields h2,
body.qw-checkout-v2 #wcus-billing-fields h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111;
    margin: 8px 0 12px !important;
    line-height: 1.3;
}
body.qw-checkout-v2 #wcus-billing-fields select,
body.qw-checkout-v2 #wcus-billing-fields input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    background: #fff;
    margin-bottom: 10px;
}
/* кастомні zen-ui селекти плагіна wc-ukr-shipping — до 48px і токенів
   (плагін ставить padding 9px 28px 9px 12px !important + бордер #DDD) */
body.qw-checkout-v2 .zen-ui-select__value {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 32px 0 13px !important;
    background: #fff;
    border: 1px solid #E8E8E5 !important;
    border-radius: 2px !important;
    font-size: 14px;
    font-weight: 500;
    color: #111;
}
body.qw-checkout-v2 .woocommerce-additional-fields .form-row { margin: 10px 0 0 !important; }
.qw-comment-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 11.5px;
    color: #71716D;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .3s cubic-bezier(.16, 1, .3, 1);
}
.qw-comment-toggle:hover { color: #111; }

/* ---- 6 · Крок 04: оплата + кнопка ---- */
.qw-co-paywrap { margin-top: 30px; }
.qw-co-paywrap .qw-co-h--pay { margin-bottom: 14px; }
body.qw-checkout-v2 #payment.woocommerce-checkout-payment {
    background: none !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
body.qw-checkout-v2 .wc_payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
body.qw-checkout-v2 .wc_payment_methods li.wc_payment_method {
    position: relative;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    background: #fff;
    margin: 0 !important;
    padding: 0;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1), background .3s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 .wc_payment_methods li.wc_payment_method:hover { border-color: #111; }
body.qw-checkout-v2 .wc_payment_methods li.wc_payment_method:has(input.input-radio:checked) {
    border-color: #111;
    background: #FAFAF9;
}
body.qw-checkout-v2 .wc_payment_methods > li > input.input-radio {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 15px;
    top: 17px;
    margin: 0;
    width: 17px;
    height: 17px;
    border: 1px solid #111;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
body.qw-checkout-v2 .wc_payment_methods > li > input.input-radio:checked {
    background: #111;
    box-shadow: inset 0 0 0 4px #FAFAF9;
}
body.qw-checkout-v2 .wc_payment_methods > li > label {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 14px 13px 44px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #111;
    line-height: 1.4;
}
body.qw-checkout-v2 .qw-gw-icons { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
body.qw-checkout-v2 .qw-gw-icons .qw-pay,
body.qw-checkout-v2 .qw-gw-icons > img {
    height: 20px;
    width: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
body.qw-checkout-v2 .qw-gw-icons .qw-pay-chip { height: 20px; padding: 0 6px; }
body.qw-checkout-v2 .qw-gw-icons .qw-pay-chip img { height: 10px; }
body.qw-checkout-v2 .wc_payment_methods .payment_box {
    background: none !important;
    box-shadow: none;
    margin: 0 !important;
    padding: 0 16px 14px 44px !important;
    border: none;
    border-radius: 0;
    font-size: 11.5px;
    color: #71716D;
    line-height: 1.55;
    font-weight: 500;
}
body.qw-checkout-v2 .wc_payment_methods .payment_box::before { display: none !important; }
body.qw-checkout-v2 .wc_payment_methods .payment_box p { margin: 0; }

/* Опис-бокс методу оплати: WooCommerce анімує inline height (slideDown/slideUp) —
   висота смикається (0→33px), а при перемиканні старий і новий бокси їдуть одночасно
   → «дивна» стрибка. Нейтралізуємо inline-слайд і керуємо показом суто через CSS:
   миттєво, без стрибка висоти, з делікатним fade-in обраного боксу. */
body.qw-checkout-v2 .wc_payment_methods .payment_box {
    display: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.qw-checkout-v2 .wc_payment_methods li.wc_payment_method:has( input.input-radio:checked ) .payment_box {
    display: block !important;
    animation: qwPayBox .2s ease both;
}
@keyframes qwPayBox {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.qw-checkout-v2 .wc_payment_methods .payment_box { animation: none !important; }
}

body.qw-checkout-v2 .place-order { padding: 0; margin: 0; }
body.qw-checkout-v2 .woocommerce-terms-and-conditions-wrapper { margin: 18px 0 0; font-size: 12.5px; color: #71716D; }
body.qw-checkout-v2 .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
body.qw-checkout-v2 .woocommerce-terms-and-conditions-wrapper a { color: #111; text-decoration: underline; text-underline-offset: 2px; }
body.qw-checkout-v2 #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    background: #111 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 0 !important;
    border: 1px solid #111;
    border-radius: 2px;
    margin: 18px 0 0;
    cursor: pointer;
    transition: background .35s cubic-bezier(.16, 1, .3, 1);
}
body.qw-checkout-v2 #place_order:hover { background: #2B2B2B !important; border-color: #2B2B2B; }
.qw-legal {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #71716D;
    text-align: center;
    font-weight: 500;
}
.qw-legal a { color: #111; text-underline-offset: 2px; }

/* ---- 7 · Панель підсумку ---- */
.qw-co-panel {
    border: 1px solid #111;
    border-radius: 2px;
    background: #fff;
    padding: clamp(20px, 2.2vw, 28px);
    box-sizing: border-box;
}
body.qw-checkout-v2 .qw-fsb-wrap { display: block; margin: 0 0 22px; max-width: 100%; overflow: hidden; float: none; width: auto; background: none; border: none; padding: 0; }
body.qw-checkout-v2 .qw-fsb-wrap .qw-fsb { margin: 0; }
body.qw-checkout-v2 #order_review_heading {
    display: block;
    float: none;
    width: auto;
    background: none;
    border: none !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111;
    margin: 0 0 8px !important;
    padding: 0 !important;
}
body.qw-checkout-v2 #order_review { float: none; width: auto; background: none; border: none; padding: 0; margin: 0; }

/* Форма логіну, купон-тогли й поле нотаток на чекауті: раніше їх ховав JS
   після завантаження — на телефоні вони блимали видимими і зсували сторінку
   (особливо з delay_js у WP Rocket). Ховаємо статично з першого кадру;
   відкриття працює як і було: slideToggle ставить inline display, який
   перекриває ці правила. На my-account (сторінка логіну) не впливає —
   селектори скоуплені під body.qw-checkout-v2. */
body.qw-checkout-v2 .woocommerce-form-login-toggle,
body.qw-checkout-v2 .woocommerce-form-coupon-toggle,
body.qw-checkout-v2 form.checkout_coupon { display: none; }
/* Поле нотаток згорнуте ПОСТІЙНО (не лише до готовності JS, як клас .qw-pre —
   він знімається і поле розкривалось саме). Логін-форма такого правила не
   потребує: у неї є власний inline display:none від WooCommerce.
   Без !important — щоб slideToggle від кнопки «+ Додати нотатку» перекривав. */
body.qw-checkout-v2 #order_comments_field { display: none; }

/* таблиця замовлення */
body.qw-checkout-v2 .woocommerce-checkout-review-order-table { border: none !important; width: 100%; margin: 0; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table thead { display: none; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tbody td {
    border: none !important;
    border-bottom: 1px solid #E8E8E5 !important;
    padding: 15px 0 !important;
    background: none !important;
    vertical-align: top;
    font-size: 12.5px;
}
/* Колонка назви отримує 74% ширини (перевірено інʼєкцією наживо: назва
   53px → 173px, ціна 205px → 85px). Тема через tfoot віддавала ціновій
   колонці 205px із 326, і назва падала по одному слову в рядок. */
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tbody td.product-name { width: 74% !important; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tbody td.product-total {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    padding-left: 10px !important;
}
body.qw-checkout-v2 .qw-rev-item { display: flex; align-items: center; gap: 14px; }
body.qw-checkout-v2 .qw-rev-thumb { position: relative; flex: none; display: block; line-height: 0; }
body.qw-checkout-v2 .qw-rev-item img {
    width: 54px;
    aspect-ratio: 878 / 1229;
    height: auto;
    object-fit: cover;
    object-position: top center;
    border-radius: 2px;
    background: #F6F6F4;
    border: none;
    display: block;
}
body.qw-checkout-v2 .qw-qty-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
body.qw-checkout-v2 .qw-rev-name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #111;
}
body.qw-checkout-v2 .qw-rev-meta { flex: 1; min-width: 0; }
body.qw-checkout-v2 .qw-rev-name { display: block; }
body.qw-checkout-v2 .qw-rev-attrs {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #71716D;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
/* атрибути тепер плоскі всередині .qw-rev-meta — dl «провисав» під мініатюрою */
body.qw-checkout-v2 .woocommerce-checkout-review-order-table td.product-name > dl.variation { display: none; }
body.qw-checkout-v2 .qw-q-hide {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* підсумкові рядки */
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tfoot th,
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tfoot td {
    border: none !important;
    padding: 11px 0 !important;
    background: none !important;
    font-size: 13px;
    vertical-align: top;
}
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: #71716D; text-align: left; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 600; color: #111; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th { padding-top: 16px !important; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total th,
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total td {
    border-top: 1px solid #111 !important;
    padding-top: 16px !important;
}
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total th {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111;
    font-weight: 800;
}
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total td,
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total td strong,
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total td .woocommerce-Price-amount { font-size: 20px !important; font-weight: 800 !important; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .order-total td small { font-size: 10.5px; font-weight: 500; color: #9C9C97; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    color: #9C9C97 !important;
}

/* рядок доставки в панелі: лише обраний метод, без радіо */
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods li { display: none; margin: 0; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods li:has(input.shipping_method:checked),
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods li:has(input.shipping_method[type="hidden"]) { display: block; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods input.shipping_method { display: none; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #111;
    display: flex !important;
    /* значення рядка вирівнюємо по ПРАВОМУ краю, як усі суми в панелі.
       Було space-between + text-align:left → при одному елементі (назва без
       ціни) він притискався вліво й не збігався з рештою колонки. */
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    text-align: right;
    line-height: 1.4;
    cursor: default;
}
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .woocommerce-Price-amount { white-space: nowrap; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .woocommerce-Price-amount { font-weight: 700; }
body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-destination { display: none; }

/* мобільний paybar: розклад суми перед Pay + trust під кнопкою (desktop — приховані) */
.qw-paybar-totals,
.qw-paybar-trust { display: none; }
@media (max-width: 991px) {
    .qw-paybar-totals { display: block; margin: 26px 0 0; }
    .qw-paybar-totals .qw-pb-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        font-size: 13px;
        padding: 5px 0;
    }
    .qw-paybar-totals .qw-pb-row span { color: #71716D; font-weight: 500; }
    .qw-paybar-totals .qw-pb-row b { font-weight: 600; color: #111; white-space: nowrap; }
    .qw-paybar-totals .qw-pb-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border-top: 1px solid #111;
        margin-top: 10px;
        padding-top: 14px;
    }
    .qw-paybar-totals .qw-pb-total span {
        font-size: 12px;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 800;
        color: #111;
    }
    .qw-paybar-totals .qw-pb-total b { font-size: 20px; font-weight: 800; color: #111; white-space: nowrap; }
    .qw-paybar-trust {
        display: flex;
        margin: 14px 0 0;
        font-size: 10.5px;
        color: #9C9C97;
        font-weight: 500;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex-wrap: wrap;
        text-align: center;
    }
    .qw-paybar-trust svg { flex: none; stroke: #9C9C97; }
}

/* фолбек для браузерів без :has(): показуємо весь список методів у панелі */
@supports not selector(li:has(input)) {
    body.qw-checkout-v2 .woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods li { display: block; }
}

/* Pay-кнопка в панелі (десктоп): .place-order переносить JS placeOrderPlacement */
@media (min-width: 992px) {
    body.qw-checkout-v2 .qw-co-panel .place-order { margin-top: 6px !important; padding: 0 !important; }
    body.qw-checkout-v2 .qw-co-panel .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; font-size: 12px; }
}

/* траст унизу панелі */
.qw-panel-trust {
    margin: 15px 0 0;
    font-size: 10.5px;
    color: #9C9C97;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    text-align: center;
}
.qw-panel-trust svg { flex: none; stroke: #9C9C97; }

/* акордеон панелі — лише мобільний */
.qw-os-toggle { display: none; }

/* ---- 8 · Мобільний чекаут (≤991) ---- */
@media (max-width: 991px) {
    .qw-co-grid { display: flex; flex-direction: column; }
    .qw-co-side { order: -1; position: static; width: 100%; margin-bottom: 24px; }
    .qw-co-main { width: 100%; }

    .qw-os-toggle {
        display: flex;
        width: 100%;
        background: none;
        border: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        cursor: pointer;
    }
    .qw-os-toggle .qw-os-t {
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-weight: 700;
        color: #71716D;
        text-align: left;
    }
    .qw-os-toggle .qw-os-v { display: flex; align-items: center; gap: 8px; }
    .qw-os-toggle .qw-os-total { font-size: 14px; font-weight: 800; color: #111; white-space: nowrap; }
    .qw-os-toggle .qw-chev {
        width: 8px;
        height: 8px;
        border-right: 1.4px solid #111;
        border-bottom: 1.4px solid #111;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    }
    .qw-co-panel.is-open .qw-os-toggle .qw-chev { transform: rotate(-135deg) translateY(-2px); }
    .qw-co-panel .qw-os-body { display: none; padding-top: 16px; }
    .qw-co-panel.is-open .qw-os-body { display: block; }
}

@media (max-width: 640px) {
    .qw-co-panel { padding: 16px; }
    body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
    body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row-first,
    body.qw-checkout-v2 .woocommerce-billing-fields__field-wrapper .form-row-last { grid-column: 1; }
    body.qw-checkout-v2 #place_order { height: 52px; font-size: 11.5px !important; }
}

/* ============================================================
   QW — попап «Додано в кошик» (2026-07-28, claude)
   Монохром #111, Montserrat, кути 2px, лінії #E8E8E5 — як уся V4.
   Десктоп: картка по центру. Мобільний: bottom-sheet.
   ============================================================ */
.qw-atc-lock { overflow: hidden; }
.qw-atc {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.qw-atc[hidden] { display: none; }
.qw-atc-veil {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}
.qw-atc.is-open .qw-atc-veil { opacity: 1; }
.qw-atc-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #E8E8E5;
    border-radius: 2px;
    padding: 26px 26px 22px;
    box-shadow: 0 24px 60px rgba(17, 17, 17, .16);
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity .24s cubic-bezier(.16, 1, .3, 1), transform .24s cubic-bezier(.16, 1, .3, 1);
}
.qw-atc.is-open .qw-atc-box { opacity: 1; transform: none; }

.qw-atc-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #9C9C97;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease;
}
.qw-atc-x:hover { color: #111; }

.qw-atc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.qw-atc-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: #2E7D4F;
    color: #fff;
}
.qw-atc-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.3;
}

.qw-atc-item { display: flex; gap: 14px; align-items: flex-start; }
.qw-atc-thumb { flex: none; width: 74px; line-height: 0; display: block; }
.qw-atc-thumb img {
    width: 74px;
    aspect-ratio: 878 / 1229;
    height: auto;
    object-fit: cover;
    object-position: top center;
    background: #F6F6F4;
    border-radius: 2px;
    display: block;
}
.qw-atc-info { min-width: 0; display: flex; flex-direction: column; padding-top: 2px; }
.qw-atc-name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.4;
}
.qw-atc-meta { margin-top: 6px; font-size: 12px; font-weight: 500; color: #71716D; line-height: 1.4; }
.qw-atc-price { margin-top: 8px; font-size: 15px; font-weight: 700; color: #111; }

/* прогрес безкоштовної доставки */
.qw-atc-prog { margin-top: 20px; }
.qw-atc-prog-bar { height: 3px; background: #ECEAE6; border-radius: 2px; overflow: hidden; }
.qw-atc-prog-bar i { display: block; height: 100%; width: 0; background: #111; transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.qw-atc-prog-text { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: #71716D; }
.qw-atc-prog.is-done .qw-atc-prog-bar i { background: #2E7D4F; }
.qw-atc-prog.is-done .qw-atc-prog-text { color: #2E7D4F; }

.qw-atc-sum { margin-top: 20px; padding-top: 16px; border-top: 1px solid #E8E8E5; }
.qw-atc-srow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qw-atc-srow + .qw-atc-srow { margin-top: 8px; }
.qw-atc-slabel, .qw-atc-tlabel {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #71716D;
}
.qw-atc-count { font-size: 13px; font-weight: 700; color: #111; }
.qw-atc-srow--total .qw-atc-tlabel { color: #111; }
.qw-atc-total { font-size: 19px; font-weight: 700; color: #111; letter-spacing: -.01em; }

.qw-atc-acts { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.qw-atc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: 1px solid #111;
    border-radius: 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1);
    font-family: inherit;
}
.qw-atc-btn--go { background: #111; color: #fff !important; }
.qw-atc-btn--go:hover { background: #2B2B2B; }
.qw-atc-btn--ghost { background: #fff; color: #111; }
.qw-atc-btn--ghost:hover { background: #111; color: #fff; }

@media (max-width: 640px) {
    .qw-atc { align-items: flex-end; padding: 0; }
    .qw-atc-box {
        max-width: 100%;
        border-radius: 2px 2px 0 0;
        border-bottom: none;
        padding: 22px 18px 18px;
        transform: translateY(100%);
    }
    .qw-atc.is-open .qw-atc-box { transform: none; }
    .qw-atc-total { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .qw-atc-veil, .qw-atc-box, .qw-atc-prog-bar i { transition: none !important; }
}

/* ============================================================
   Символ валюти — ЄДИНЕ правило на весь сайт (2026-07-29, claude)
   Тема задавала символу різні розміри в різних місцях (у ціні товару він
   успадковував 18px від «p.price bdi», у кошику — 16px), через що знак
   виглядав неоднаково й «підстрибував» відносно цифр.
   Тепер символ ЗАВЖДИ рівно такий, як число поруч: той самий кегль,
   базова лінія, товщина й міжлітерний інтервал — у кошику, чекауті,
   на товарі, у каталозі та в попапі.
   ============================================================ */
.woocommerce-Price-currencySymbol {
    font-size: 1em !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    position: static !important;
    top: auto !important;
}

/* ============================================================
   Перемикач валют у шапці (2026-07-29, claude)
   Проблеми, які лікуємо (усе задавалось у zn_dynamic.css, що вантажиться
   ПІСЛЯ app.css, тому перебиваємо вищою специфічністю):
     1) padding-top:4px !important зсував знак відносно стрілки;
     2) стрілка ::after була position:absolute; right:2px — у блоці 45px
        завширшки вона опинялась аж за 40px від знака, майже біля «EN»;
     3) висота блока 14px проти 24px у мовного перемикача — через це вони
        стояли на різній висоті, і на різних сторінках по-різному.
   Рішення: інлайн-флекс, стрілка стає звичайним сусіднім елементом
   через gap, висота однакова з мовним перемикачем.
   ============================================================ */
body .wcml-dropdown a.wcml-cs-item-toggle,
body .wcml-dropdown .wcml-cs-item-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 24px !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1 !important;
    /* Знак валюти стояв вище за «EN» — і сам символ, і стрілка.
       Причина не в гліфі, а в різних боксах: тут inline-flex центрує текст
       у 24px, а .toplang-flag-code — inline-block із line-height:20px усередині
       24px (line-height тут нічого не міняє: флекс центрує бокс, а не рядок).
       margin-top у флекс-ряду з align-items:center дає приблизно половину
       свого значення: бокс росте на 2px, а ряд його перецентровує.
       Виміряно: базова лінія «€» була на 1.05px ВИЩЕ за «EN» — з 2px стає
       рівно та сама (Δ 0.05px), причому бокс лишається на цілих пікселях. */
    margin-top: 2px !important;
}
body .wcml-dropdown a.wcml-cs-item-toggle::after {
    /* стрілка — сусідній елемент одразу після знака, а не притиснута до краю */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
    flex: none !important;
}
/* контейнер не має розтягувати перемикач */
body .wcml-dropdown .wcml-cs-active-currency {
    width: auto !important;
    min-width: 0 !important;
    line-height: 1 !important;
}
/* На головній блоку валюти діставався margin-top:5px, а на товарі — 0.
   Через це перемикач стояв на різній висоті залежно від сторінки.
   Зануляємо й даємо флекс-батьку самому центрувати. */
body .wcml-dropdown {
    margin: 0 !important;
    line-height: 1 !important;
}
body .wcml-dropdown > ul,
body .wcml-dropdown .wcml-cs-active-currency {
    margin: 0 !important;
    padding: 0 !important;
}
/* Блок валюти тримав фіксовані 35px (zn_dynamic.css: width:35px !important)
   при вмісті 28px — 7px мертвого місця праворуч. Через них відступ «€ → EN»
   читався як 19px проти 12px у решти шапки. Тепер блок по вмісту. */
body .wcml-dropdown {
    width: auto !important;
}
body .wcml-dropdown > ul,
body .wcml-dropdown .wcml-cs-active-currency,
body .wcml-dropdown .wcml-cs-submenu {
    width: auto !important;
}
body .wcml-dropdown .wcml-cs-submenu {
    min-width: 100% !important;
}

/* ============================================================
   Шапка на мобільному: щільніші відступи між елементами
   (прохання власника, 2026-07-29)
   ============================================================ */
@media (max-width: 767px) {
    /* .my_profile — єдиний елемент ряду БЕЗ класу .sh-component, тому саме
       на ньому лишався старий відступ 12px і посеред шапки була дірка
       (6 / 12 / 6). Додано сюди ж, щоб усі проміжки були рівні. */
    body .site-header-main-right .sh-component,
    body .site-header-main-right .my_profile {
        margin-left: 8px !important;
    }
}

/* ============================================================
   Іконка кошика в шапці (2026-07-29, claude)
   Проблеми:
     1) kl-woocommerce.css давав іконці position:relative; top:2px —
        сумка стояла на 2px нижче за «€», «EN», лупу й акаунт
        (їхні бокси cy=35, у кошика cy=37);
     2) лічильник (::after з data-count) у zn_dynamic.css мав
        top:-13px; left:4px — при висоті 15px він перекривався з іконкою
        лише на 2px, тобто висів окремою «кулькою» НАД сумкою,
        а на мобільному ще й вилазив за верхній край шапки й обрізався.
   Рішення: занулити зсув іконки + посадити лічильник у правий верхній
   кут самої іконки (класичний бейдж), щоб він тримався сумки на всіх
   ширинах. zn_dynamic.css вантажиться ПІСЛЯ app.css, тому специфічність
   вища (body + 3 класи) плюс !important.
   ============================================================ */
body .kl-cart-button .svg-cart.kl-cart-icon {
    top: 0 !important;
}
body .kl-cart-button .svg-cart.kl-cart-icon::after {
    top: -6px !important;
    left: auto !important;
    right: -6px !important;
}

/* ============================================================
   Кошик: клікабельна назва товару (2026-08-01, claude)

   Знайдено через Clarity: dead-кліки на /cart/ з мітками назв
   товарів («Adjustable High Support F…», «Mesh Flared Pants – CANDY»).
   Назва була справжнім посиланням і нічим не перекривалась — просто
   рядок 240×15 у комірці 353×160, тобто 6% площі. Проба сіткою
   240 точок по комірці: у посилання влучало 6% на ПК і 39% на
   мобільному, решта — у голий <td>, тобто «нікуди».

   Рішення — stretched-link: псевдоелемент посилання розтягуємо на
   всю комірку. Клік будь-де в блоці товару веде на товар.
   Смітник усередині комірки і мобільний хрестик (він абсолютний і
   лежить ПОВЕРХ комірки назви) піднімаємо над накладкою, інакше
   вони перестануть натискатись.

   Після правки проба дає 98% на ПК і 95% на мобільному; смітник,
   хрестик, степер кількості та посилання з мініатюри — усі
   лишаються доступні (перевірено реальними кліками, у т.ч. на
   варіативному товарі: URL зберігає ?attribute_pa_size).
   ============================================================ */
.woocommerce-cart-form td.product-name {
    position: relative;
}
.woocommerce-cart-form td.product-name > a:not(.qw-item-remove)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.woocommerce-cart-form td.product-name .qw-item-remove {
    position: relative;
    z-index: 2;
}
.woocommerce-cart-form td.product-remove {
    z-index: 3;
}
.woocommerce-cart-form td.product-remove a {
    position: relative;
    z-index: 3;
}

/* ============================================================
   Чекаут: сповіщення про незаповнені поля (2026-08-07, claude)

   Було: текст помилок не видно — білий на майже білому тлі.
   Причина не в самому блоці: WooCommerce загортає кожне
   повідомлення у ПОСИЛАННЯ на проблемне поле —

     <li><a href="#billing_email"><strong>Billing Email address</strong>
         is a required field.</a></li>

   У .woocommerce-error і <li> колір темний (#111), а от <a> усередині
   успадковував білий від теми (вона малює сповіщення на темному тлі).
   Тому «!» зліва було видно — це ::before самого <ul>, — а текст ні.

   Робимо посилання чорними й лишаємо підкреслення: воно тут доречне,
   бо клік справді веде до поля з помилкою.
   ============================================================ */
.woocommerce-error a,
.woocommerce-error a:link,
.woocommerce-error a:visited,
.woocommerce-error a strong,
.woocommerce-error strong,
.woocommerce-info a,
.woocommerce-info a:link,
.woocommerce-info a:visited,
.woocommerce-info strong,
.woocommerce-message a,
.woocommerce-message a:link,
.woocommerce-message a:visited,
.woocommerce-message strong {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}
.woocommerce-error a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.woocommerce-error a:hover,
.woocommerce-error a:focus,
.woocommerce-error a:hover strong,
.woocommerce-error a:focus strong {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* ============================================================
   Спосіб оплати Stripe: напис і картки, які він приймає
   (2026-08-10, claude)

   Через PHP-фільтр woocommerce_gateway_icon іконки сюди не поставити:
   сервер віддає їх правильно, але JS плагіна після ініціалізації
   перезаписує ВМІСТ лейбла назвою з wc_stripe_upe_params і зносить
   будь-яку розмітку всередині (перевірено рендером без JS).
   Псевдоелемент JS стерти не може — тому малюємо фоном.

   Файли лежать у темі, а не в плагіні, щоб не зникли при його оновленні.
   ============================================================ */
body .woocommerce-checkout ul.wc_payment_methods li label[for="payment_method_stripe"] {
    /* решта методів у верхньому регістрі; тут лишаємо фірмове написання.
       Тема задає uppercase із високою вагою, тому селектор довгий. */
    text-transform: none !important;
}

/* Рядки способів оплати мали різну висоту: контейнер іконок у hutko 20px
   (там «чипи» Apple/Google Pay із заданою висотою), а в Stripe і PayPal 18px
   — прості <img> давали на 2px менше, і лейбли виходили 46 проти 44.
   Задаємо єдину висоту, щоб усі рядки збігались. (2026-08-10, claude) */
body.qw-checkout-v2 .qw-gw-icons {
    min-height: 20px;
}