/*
 * Theme-switch variables for seasonal/promo redesigns (e.g. GTA campaign).
 * Defaults below reproduce the current look 1:1 — changing nothing visually.
 * A redesign theme overrides only these custom properties (e.g. in a
 * separate stylesheet toggled from admin), never the shared --kmnd-* tokens,
 * so the rest of the site stays untouched.
 */
:root {
    --header-catalog-btn-bg: #23459B;
    --header-consultation-btn-bg: #D51034;
    --header-configurator-btn-bg: #F0F0F0;
    --header-configurator-border-grad: linear-gradient(45deg, red, #1CD9FF, #6BFF1C);
    --footer-bg-image: url('../../img/bg-footer.jpg');

    /* Header icons — both stops equal to the current flat fill, so by default
       the "gradient" renders as a solid color, identical to today. */
    --icon-wishlist-c1: #303030;
    --icon-wishlist-c2: #303030;
    --icon-compare-c1: #303030;
    --icon-compare-c2: #303030;
    --icon-cart-c1: #303030;
    --icon-cart-c2: #303030;
    --icon-search-c1: #2D2D2D;
    --icon-search-c2: #2D2D2D;

    /* "Забирай заказ в шоурумах" block on the main page */
    --locations-bg-image: url('../../img/bg-locations.webp');
    --location-badge-border-grad: linear-gradient(135deg, #02227A, #02227A);
    --icon-location-c1: #02227A;
    --icon-location-c2: #02227A;

    /* Header catalog dropdown — active/hovered category row fill */
    --menu-item-active-bg: #0B0B0B;

    /* Product "buy/cart" button (product_card.twig + product.twig share this one class) */
    --product-buy-btn-bg: #01c070;
    --product-buy-btn-bg-hover: #00bc52;

    /* Special/discounted price text (catalog card, list view, PDP) */
    --price-special-color: #D51034;

    /* "В наявності" / in-stock status badge (PDP) */
    --status-instock-bg: #DAEDE5;
    --status-instock-color: #068650;

    /* Unclassed links inside .product-block accordion sections — covers both
   "детальніше" (payment/description rich text) and warehouse pickup
   address links (Доставка block) */
    --product-block-link-color: #10AF0E;

    /* Base .btn hover state — global-style.css hardcodes this separately
       from .btn's resting background (var(--kmnd-body-background-accent)),
       so it needs its own override var. */
    --btn-hover-bg: #00bc52;


    /* Акції page — countdown "time left" badge */
    --offer-time-bg: #B3ECD4;
    --offer-time-color: #01C070;

    /* Footer menu — parent links with a submenu */
    --footer-menu-parent-color: #5E5E5E;

    /* Preheader dropdown-arrow icon on hover — color is baked into a data-URI
       SVG string, var() can't target just the fill inside it, so the whole
       background value is swapped per campaign instead. */
    --preheader-menu-arrow-hover-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' fill='none' viewBox='0 0 7 5'%3E%3Cpath fill='%23D51034' d='M3.773 4.444 6.888 1.33A.38.38 0 0 0 7 1.059a.38.38 0 0 0-.112-.272l-.23-.229a.383.383 0 0 0-.54 0L3.5 3.174.883.555a.38.38 0 0 0-.542 0l-.23.23a.38.38 0 0 0-.111.27c0 .103.04.2.112.271L3.23 4.444a.38.38 0 0 0 .271.112c.103 0 .2-.04.272-.112Z'/%3E%3C/svg%3E") no-repeat center/contain;

    --account-item-name-hover-bg: #FF123D;
}

/*
 * Only the resting (non-hover/active/focus) background is overridden here —
 * :hover/:active/:focus keep using the original .btn_tertiary / .btn_secondary /
 * .btn_fourth rules in global-style.css untouched, so hover feedback doesn't change.
 */
.header__catalog-btn.btn.btn_tertiary {
    background: var(--header-catalog-btn-bg);
    border-color: var(--header-catalog-btn-bg);
}

.header__consultation-btn.btn.btn_secondary {
    background: var(--header-consultation-btn-bg);
    border-color: var(--header-consultation-btn-bg);
}

.header__collections-link.btn.btn_fourth {
    background: var(--header-configurator-btn-bg);
    border-color: var(--header-configurator-btn-bg);
}

.header__row .header__collections-link.btn.btn_fourth::before {
    background: var(--header-configurator-border-grad);
}

footer.footer.bg-cover {
    background-image: var(--footer-bg-image);
}

.locations__section.bg-cover {
    background-image: var(--locations-bg-image);
}

.header__menu-inner > nav > ul > li.active > a {
    background: var(--menu-item-active-bg);
}

.product__button-buy {
    background-color: var(--product-buy-btn-bg);
    border-color: var(--product-buy-btn-bg);
}

.product__button-buy:hover {
    background-color: var(--product-buy-btn-bg-hover);
}

.item__price-element--special + .item__price-element--default,
.catalog__col--full .item-list__price span.price--default:not(:only-child),
.product__special-price {
    color: var(--price-special-color);
}

/*
 * Small square cart-icon button on product cards — separate class from
 * .product__button-buy (text "Купити" button), defined in global-style.css.
 */
.item__btn {
    background: var(--product-buy-btn-bg);
}

.item__btn:hover, .item__btn:active, .item__btn:focus {
    background: var(--product-buy-btn-bg-hover);
}

/* "-X%" discount pill next to the struck-through old price */
.catalog__col--full .item-list__price span.price--old span:last-child,
.product__price--old span:last-child,
.products-more-item__price--old span:last-child,
.item__price-element--special span:last-child {
    background: var(--price-special-color);
}

.product__status {
    background: var(--status-instock-bg);
    color: var(--status-instock-color);
}

/*
 * The checkmark svg's fill is a presentation attribute set inline in
 * product.twig (fill="#068650") — an attribute-value selector always beats
 * it regardless of specificity, same trick used for the multisearch icon
 * below.
 */
.product__status svg path[fill="#068650"] {
    fill: var(--status-instock-color);
}

/* Доставка block — delivery term/date text next to each shipping option */
.product-delivery-element__text p:last-child span:first-child {
    color: var(--product-buy-btn-bg);
}

/* Unclassed rich-text links (детальніше, warehouse pickup addresses) */
.product-block a:not([class]) {
    color: var(--product-block-link-color);
}

/* "Супутні товари" slider prev/next buttons */
.products-more-button {
    border-color: var(--product-buy-btn-bg);
}

/* "Супутні товари" — decorative outline behind each item card */
.products-more-item::before {
    border-color: var(--product-buy-btn-bg);
}

.products-more-button svg path[fill="#01C070"] {
    fill: var(--product-buy-btn-bg);
}

/* "Новинки/Хіт продажів", "Переглянуті", "Нещодавно куплені", "Передзамовлення" slider arrows */
.arrivals__heading-arrow svg path[fill="#01C070"],
.arrivals__slider-btn svg path[fill="#01C070"] {
    fill: var(--product-buy-btn-bg);
}

/*
 * On hover the button background switches to --kmnd-body-background-accent
 * and style.css already turns the arrow white (:hover svg path { fill:
 * var(--kmnd-body-color-primary-inverted) }) for contrast — but that rule
 * has the exact same specificity as the one above and loses to it on source
 * order alone, leaving the arrow in the accent color on an accent-colored
 * background (invisible). Re-assert white with higher specificity.
 */
.arrivals__heading-arrow:hover svg path[fill="#01C070"],
.arrivals__slider-btn:hover svg path[fill="#01C070"] {
    fill: var(--kmnd-body-color-primary-inverted);
}

/* "Аналоги" card — cart button + active-variant icon */
.analog-card__action--cart {
    background: var(--product-buy-btn-bg);
    border-color: var(--product-buy-btn-bg);
}

.analog-card__action--active path {
    fill: var(--product-buy-btn-bg);
}

/* Configurator bottom bar — "add to cart" button */
.configurator-bottom__button {
    background-color: var(--product-buy-btn-bg) !important;
}

.configurator-help__button {
    background-color: var(--product-buy-btn-bg) !important;
}

/*
 * Configurator top links (instruction / ready builds / instagram) — each
 * icon's circle background is a presentation attribute (fill="#01C070")
 * inline in the svg; the inner glyph stays fill="white" on purpose (it's
 * the icon itself on top of the circle), only the circle recolors here.
 */
.configurator-top__item svg path[fill="#01C070"] {
    fill: var(--product-buy-btn-bg);
}

.btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
}

/*
 * .product__button-trade carries both "btn" and "product__button-trade"
 * classes — the generic .btn:hover rule above has the same specificity as
 * style.css's own .product__button-trade:hover (white bg / blue text
 * invert) and, loading later, was winning and painting this button's hover
 * purple instead of white. Restore the button's own white hover background
 * with higher specificity.
 */
.product__button-trade.btn:hover {
    background-color: #fff;
}

.offer__time {
    background: var(--offer-time-bg);
}

.offer__time p:nth-of-type(2) {
    color: var(--offer-time-color);
}

/* Catalog filters — "custom link" value (e.g. show-all toggle) */
.catalog__filters .ocf-filter-list .ocf-value-list .ocf-value-list-body .ocf-value.ocf-custom-link {
    color: var(--product-buy-btn-bg);
}

/* Product stickers — "Хіт продажів" / "Передзамовлення" (red group) and the
   generic "Акція"/promotion sticker (currently the same red, --kmnd-body-
   background-neutral, by coincidence) — same red as the special-price text,
   reusing that var instead of a new color-named one */
.bg-sticker-bestseller,
.bg-sticker-ends,
.item__label.bg-neutral {
    background-color: var(--price-special-color);
}

/* Product stickers — "Акція"/markdown badges (green group) — same green as
   the buy button, reusing that var */
.bg-sticker-special,
.bg-sticker-markdown {
    background-color: var(--product-buy-btn-bg);
}

.footer__menu li.menu-item-has-children > a {
    color: var(--footer-menu-parent-color);
}

.us-account-item-name {
    background-color: var(--price-special-color);
}

.us-account-item-name:hover {
    background-color: var(--account-item-name-hover-bg);
}

.us-account-list .us-account-link.active,
.us-account-list .us-account-link:hover {
    color: var(--price-special-color);
}

.us-account-list .us-account-link:hover svg .icon-path-fill {
    fill: var(--price-special-color);
}

.us-account-list .us-account-link:hover svg .icon-path-stroke {
    stroke: var(--price-special-color);
}

.preheader__menu > nav > ul > li > a:hover {
    color: var(--price-special-color);
}

.preheader__address-item:hover {
    color: var(--price-special-color);
}

.preheader__account:hover,
.preheader__account:hover svg path {
    color: var(--price-special-color);
    fill: var(--price-special-color);
}

.preheader__menu > nav > ul > li > a:hover:after {
    background: var(--preheader-menu-arrow-hover-bg);
}

.preheader__menu > nav > ul > li > .sub-menu > li > a:hover {
    color: var(--price-special-color);
}

.preheader__lang a:hover {
    color: var(--price-special-color);
}

.header__menu-inner > nav > ul > li > .sub-menu > li > a:hover {
    color: var(--price-special-color);
}

.header__menu-inner > nav > ul > li > .sub-menu > li > .sub-menu > li > a:hover {
    color: var(--price-special-color);
}

.breadcrumbs__item a:hover {
    color: var(--price-special-color);
}

.header__consultation-list a:hover .header__consultation-text {
    color: var(--price-special-color);
}

.btn-auth-google {
    color: var(--price-special-color);
    border: var(--price-special-color);
}
.btn-auth-google:hover {
    color: #FFFFFF;
    background-color: var(--price-special-color);
    border-color: var(--price-special-color);
}

.btn-auth-email {
    color: var(--product-buy-btn-bg);
    border: 1px solid var(--product-buy-btn-bg);
}
.btn-auth-email:hover {
    color: #FFFFFF;
    background-color: var(--product-buy-btn-bg);
    border-color: var(--product-buy-btn-bg);
}

.blog__categories-item_current a {
    color: var(--product-buy-btn-bg);
}

.blog__categories-item_current {
    border-left: solid 2px var(--product-buy-btn-bg);
}

.acc-add-build-to-cart {
    background-color: var(--product-buy-btn-bg);
    border-color: var(--product-buy-btn-bg);
}

/*
 * Gradient-border trick: figure keeps a transparent 1px border, the inner
 * fill (padding-box layer) matches the card background so nothing visually
 * changes, and the border-box layer paints the border itself. :hover keeps
 * overriding border-color directly (global-style.css / style.css), which
 * paints solid over this and is untouched on purpose.
 */
.locations__item figure {
    border: solid 1px transparent;
    background: linear-gradient(var(--kmnd-body-background-primary), var(--kmnd-body-background-primary)) padding-box,
    var(--location-badge-border-grad) border-box;
}