/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* =========================================================
   FeelIt — Design system overrides
   ========================================================= */

/* --- Variables — warm palette only, no pure dark. --- */
:root {
    --fi-green:      #87af4d;
    --fi-magenta:    #ff00a3;
    --fi-cream:      #fcf8f3;
    --fi-blush:      #f8cbc9;
    --fi-sand:       #efe1cc;
    --fi-terracotta: #c47a55;
    --fi-warm-deep:  #3a2920; /* warm chocolate, used where pure dark used to be */
    --fi-dark:       #3a2920; /* legacy alias — kept for any leftover refs */
    --fi-mid:        #6e5a4c;
}

/* =========================================================
   FINDING-001 + 004: Active tab — contrast fix + weight
   Avada uses aria-selected (no .active class).
   Was #747474 on #87af4d = 1.89:1 contrast (WCAG fail).
   ========================================================= */
.fusion-tabs .tab-link[aria-selected="true"] {
    background-color: var(--fi-green) !important;
    color: var(--fi-dark) !important;
    font-weight: 600 !important;
}

/* =========================================================
   FINDING-002: Inactive tabs — visible affordance
   Was rgba(95,90,87,0.06) = basically invisible.
   ========================================================= */
.fusion-tabs .tab-link[aria-selected="false"] {
    background-color: rgba(95, 90, 87, 0.10) !important;
    color: var(--fi-mid) !important;
    font-weight: 400 !important;
}

.fusion-tabs .tab-link[aria-selected="false"]:hover {
    background-color: rgba(95, 90, 87, 0.18) !important;
    color: var(--fi-dark) !important;
}

/* =========================================================
   FINDING-005: WooCommerce price color — off-brand red fix
   Was rgb(149,80,77). Override to brand green.
   ========================================================= */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce .price .woocommerce-Price-amount,
.fusion-carousel-meta .price,
.fusion-carousel-meta .price .amount,
.fusion-carousel-meta .woocommerce-Price-amount,
.fusion-carousel-meta .woocommerce-Price-currencySymbol {
    color: var(--fi-green) !important;
}

/* Product card meta — category as label + bumped price */
.fusion-carousel-meta a[rel="tag"] {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--fi-mid) !important;
    margin-bottom: 6px !important;
}
.fusion-carousel-meta a[rel="tag"]:hover {
    color: var(--fi-dark) !important;
}
.fusion-carousel-meta .fusion-carousel-price .price,
.fusion-carousel-meta .price .amount {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* =========================================================
   Global square corners — matches product image style
   Zeroes border-radius across buttons, tabs, cards, boxes, images.
   ========================================================= */
.fusion-tabs .tab-link,
.fusion-button,
.fusion-button-default,
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .price,
.fusion-image-wrapper,
.fusion-image-wrapper img,
.fusion-carousel-item-wrapper img,
.fusion-image-element img,
.fusion-imageframe,
.imageframe-align-center img,
.fusion-column-wrapper,
.fusion-column-inner-bg,
.fusion-content-boxes-1,
.content-box-column,
.fusion-builder-column-inner,
.fusion-flex-container,
.awb-color-box,
.fusion-text input,
.fusion-text textarea,
.fusion-form-input-wrapper input,
.fusion-form-input-wrapper textarea,
.fusion-form-input-wrapper select,
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select,
.fusion-news-slider-carousel-image,
.fusion-classic-product-image-wrapper,
.fusion-classic-product-image-wrapper img,
.swiper-slide img,
.fusion-flexslider .slides img,
img {
    border-radius: 0 !important;
}

/* Brand/about section — heading at top, paragraph + button pinned to bottom
   Column is flex-column; pushing the paragraph with margin-top:auto lets the
   heading stay at top while paragraph + button hug the section bottom.
   24px between paragraph and button. */
.fusion-builder-row-5 .fusion-content-layout-column {
    justify-content: flex-start !important;
}
.fusion-builder-row-5 .fusion-content-layout-column .fusion-text {
    margin-top: auto !important;
}
.fusion-builder-row-5 .fusion-button-wrapper {
    margin-top: 24px !important;
}
.fusion-builder-row-5 .fusion-button {
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* =========================================================
   Top bar — keep the promo message, drop the search + socials.
   Search moves into the header icon group (see functions.php).
   Socials live in the footer.
   ========================================================= */
.fusion-builder-row-1 .fusion-search-form,
.fusion-builder-row-1 .fusion-social-networks,
.fusion-builder-row-1 .fusion-social-links,
.fusion-builder-row-1 [class*="search-form"],
.fusion-builder-row-1 [class*="social-networks"],
.fusion-builder-row-1 [class*="social-links"] {
    display: none !important;
}

/* Header search icon + dropdown injected into the cart icon UL.
   See feelit_header_search_inject_js in functions.php. */
.fi-header-search {
    position: relative;
}
.fi-header-search-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0 10px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}
.fi-header-search-toggle:hover {
    color: var(--fi-green);
}
.fi-header-search-toggle .glyphicon {
    font-size: 18px;
}
.fi-header-search-svg {
    width: 20px;
    height: 20px;
    display: block;
}
.fi-header-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 320px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
    display: none;
    z-index: 1000;
}
.fi-header-search-panel.is-open {
    display: block;
}
.fi-header-search-panel form {
    display: flex;
    gap: 8px;
    margin: 0;
}
.fi-header-search-panel input[type="search"] {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    color: var(--fi-dark);
    font-size: 14px;
}
.fi-header-search-panel input[type="search"]:focus {
    outline: none;
    border-color: var(--fi-green);
}
.fi-header-search-panel button[type="submit"] {
    height: 40px;
    padding: 0 16px;
    background: var(--fi-green);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* Tab spacing — 12px gap between pills */
.fusion-tabs .nav-tabs {
    display: flex !important;
    gap: 12px !important;
}
.fusion-tabs .nav-tabs li {
    margin: 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
}
.fusion-tabs .nav-tabs .tab-link {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* =========================================================
   Homepage card carousels — Бестселлери / Sport / Category / Color.
   Each section = full-width container, inner max-width, horizontal
   scroll-snap track with arrow navigation.
   ========================================================= */
.fi-carousel {
    width: 100%;
    padding: 60px 0;
    background: #fff;
}
.fi-carousel + .fi-carousel {
    padding-top: 0;
}
.fi-carousel__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.fi-carousel__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.fi-carousel__heading {
    flex: 1 1 auto;
    min-width: 0;
}
.fi-carousel__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--fi-dark);
    text-transform: none;
    line-height: 1.2;
}
.fi-carousel__title-accent {
    font-weight: 600;
    transition: color 0.25s ease;
}
.fi-carousel__subtitle {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--fi-mid);
    letter-spacing: 0.1px;
}

/* Bestsellers: full-width section + centered heading + arrows on the sides. */
.fi-carousel--bestsellers .fi-carousel__inner {
    max-width: none;
    padding: 0 40px;
}
.fi-carousel--bestsellers .fi-carousel__header {
    position: relative;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.fi-carousel--bestsellers .fi-carousel__heading {
    flex: 0 1 auto;
}
.fi-carousel--bestsellers .fi-carousel__nav {
    display: contents;
}
.fi-carousel--bestsellers .fi-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.fi-carousel--bestsellers .fi-carousel__btn--prev {
    left: 0;
    right: auto;
}
.fi-carousel--bestsellers .fi-carousel__btn--next {
    right: 0;
    left: auto;
}
/* Bigger cards on wide screens — 4 across the whole viewport, more breathing room. */
.fi-carousel--bestsellers .fi-card {
    flex-basis: calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
}
.fi-carousel--bestsellers .fi-carousel__track {
    gap: 24px;
}
@media (min-width: 1600px) {
    .fi-carousel--bestsellers .fi-carousel__inner { padding: 0 56px; }
    .fi-carousel--bestsellers .fi-carousel__track { gap: 28px; }
}
@media (max-width: 1024px) {
    .fi-carousel--bestsellers .fi-carousel__inner { padding: 0 32px; }
    .fi-carousel--bestsellers .fi-card {
        flex-basis: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}
@media (max-width: 768px) {
    .fi-carousel--bestsellers .fi-carousel__inner { padding: 0 20px; }
    .fi-carousel--bestsellers .fi-card {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 480px) {
    .fi-carousel--bestsellers .fi-card {
        flex-basis: 76%;
        max-width: 76%;
    }
}
.fi-carousel__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.fi-carousel__btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(43, 43, 43, 0.15);
    color: var(--fi-dark);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fi-carousel__btn:hover {
    border-color: var(--fi-dark);
}
.fi-carousel__btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.fi-carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.fi-carousel__track::-webkit-scrollbar { display: none; }

/* --- Card (shared) --- */
.fi-card {
    flex: 0 0 calc((100% - 60px) / 4);  /* 4 cards visible, 20px gaps */
    max-width: calc((100% - 60px) / 4);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--fi-dark);
    transition: transform 0.2s ease;
}
.fi-card__image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba(95, 90, 87, 0.06);
    margin-bottom: 14px;
}
.fi-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
/* Card lift + image zoom only on real pointer devices ≥ 761px.
   On touch / small viewports the sticky :hover after a tap caused
   the card to jiggle (translateY + scale) when the user just meant
   to scroll the carousel or navigate to the product. */
@media (hover: hover) and (min-width: 761px) {
    .fi-card:hover {
        transform: translateY(-2px);
    }
    .fi-card:hover .fi-card__image img {
        transform: scale(1.03);
    }
}

/* Belt-and-suspenders: kill ALL hover transforms / opacity flips on
   touch devices and small viewports, across our `.fi-card` carousels
   AND Avada's WooCommerce carousels (related / upsell / cross-sell
   on PDP). This catches any third-party `:hover` rules we don't own. */
@media (hover: none), (max-width: 760px) {
    .fi-card,
    .fi-card *,
    .fusion-carousel-item-wrapper,
    .fusion-carousel-item-wrapper *,
    .fusion-product-wrapper,
    .fusion-product-wrapper * {
        transition-property: none !important;
    }
    .fi-card:hover,
    .fi-card *:hover,
    .fi-card:focus,
    .fi-card *:focus,
    .fusion-carousel-item-wrapper:hover,
    .fusion-carousel-item-wrapper *:hover,
    .fusion-product-wrapper:hover,
    .fusion-product-wrapper *:hover {
        transform: none !important;
    }
    /* Hover-image overlay must stay invisible on touch — sticky :hover
       after a tap was flipping it on. */
    .fi-card--has-hover-image .fi-card__img--hover {
        opacity: 0 !important;
    }
    .fi-card--has-hover-image .fi-card__img--primary {
        opacity: 1 !important;
    }
}
/* Two-image stack: primary shows, hover image fades in on card:hover.
   The :hover crossfade is GATED on `data-hover-ready` — set by inline
   JS (see feelit_card_hover_decode_js in functions.php) once each
   card's hover image is downloaded AND decoded. Without that attribute
   present, :hover does nothing — so while the hover image is still
   downloading or its first decode hasn't happened, sweeping the cursor
   across cards can't trigger an opacity transition that would expose
   the gray .fi-card__image background underneath. The attribute is
   typically set within a few hundred ms of page load on a normal
   connection. */
.fi-card__image img.fi-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.4s ease;
    pointer-events: none;
}
.fi-card__image img.fi-card__img--primary {
    transition: opacity 0.35s ease, transform 0.4s ease;
}
/* Hover crossfade gated on:
   - `data-hover-ready` (image is decoded — see fi-card-hover-decode-js)
   - `hover: hover` media (real pointer device)
   - `min-width: 761px` so iPad/phone layouts skip it entirely.
   On touch+small devices the "sticky :hover" after a tap conflicted
   with horizontal scroll-snap — every swipe-tap triggered a flip,
   making the carousel feel laggy. Desktop keeps the crossfade. */
@media (hover: hover) and (min-width: 761px) {
    .fi-card--has-hover-image[data-hover-ready]:hover .fi-card__img--primary {
        opacity: 0;
    }
    .fi-card--has-hover-image[data-hover-ready]:hover .fi-card__img--hover {
        opacity: 1;
    }
}
.fi-card__image-fallback {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(135deg, rgba(135,175,77,0.15), rgba(248,203,201,0.2));
}
.fi-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fi-card__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fi-mid);
}
.fi-card__title {
    margin: 0;
    font-size: 16px;
    /* !important to beat Avada's `fusion-responsive-typography-calculated`
       sibling class which sets a higher weight inline-cascade. */
    font-weight: 400 !important;
    letter-spacing: 0.2px;
    color: var(--fi-dark);
    line-height: 1.35;
}
.fi-card__price {
    font-size: 15px;
    font-weight: 600;
    color: var(--fi-green);
    letter-spacing: 0.3px;
}
.fi-card__extra {
    margin-top: 6px;
}

/* =========================================================
   About section — editorial, generous whitespace, tight type.
   ========================================================= */
.fi-about {
    width: 100%;
    padding: 160px 0;
    background: var(--fi-cream, #fcf8f3);
    position: relative;
    overflow: hidden;
}
.fi-about__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 96px;
    align-items: center;
}
.fi-about__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgba(95, 90, 87, 0.08);
}
.fi-about__media img,
.fi-about__media-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Parallax intentionally removed — the image is now rock-still on
       all viewports. The 110% height + translateY trick is gone too,
       so the photo fills its 100% box exactly. */
}
.fi-about__media-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(135,175,77,0.15), rgba(248,203,201,0.25));
    display: block;
}
.fi-about__body {
    max-width: 520px;
}
.fi-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fi-dark, #2b2b2b);
    margin-bottom: 28px;
}
.fi-about__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}
.fi-about__title {
    margin: 0 0 32px;
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 1;
    font-weight: 500;
    color: var(--fi-dark, #2b2b2b);
    letter-spacing: -1.5px;
}
.fi-about__text {
    margin: 0 0 48px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--fi-mid, #5f5a57);
    font-weight: 400;
}
.fi-about__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fi-dark, #2b2b2b) !important;
    padding: 18px 0 8px;
    border-bottom: 1px solid var(--fi-dark, #2b2b2b);
    text-decoration: none !important;
    background: transparent;
    transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.fi-about__btn::after {
    content: "→";
    transition: transform 0.3s ease;
}
.fi-about__btn:hover {
    gap: 22px;
}
.fi-about__btn:hover::after {
    transform: translateX(4px);
}
@media (max-width: 1024px) {
    .fi-about { padding: 110px 0; }
    .fi-about__inner { padding: 0 32px; gap: 64px; }
}
@media (max-width: 900px) {
    .fi-about { padding: 80px 0; }
    .fi-about__inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
    .fi-about__title { font-size: clamp(36px, 8vw, 52px); }
    .fi-about__text { font-size: 16px; }
}

/* =========================================================
   Testimonials — compact 3×2 grid; quote marks tint per card;
   hover reveals the related product as a card overlay.
   ========================================================= */
.fi-testimonials {
    width: 100%;
    padding: 130px 0;
    background: #fff;
}
.fi-testimonials__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 48px;
}
.fi-testimonials__header {
    text-align: center;
    margin-bottom: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.fi-testimonials__title {
    margin: 0;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--fi-dark, #2b2b2b);
}
.fi-testimonials__subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fi-mid, #5f5a57);
    max-width: 56ch;
}
.fi-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(43, 43, 43, 0.1);
    border-left: 1px solid rgba(43, 43, 43, 0.1);
}
.fi-testimonial {
    position: relative;
    background: #fff;
    border-right: 1px solid rgba(43, 43, 43, 0.1);
    border-bottom: 1px solid rgba(43, 43, 43, 0.1);
    overflow: hidden;
    min-height: 320px;
}
.fi-testimonial__face {
    position: relative;
    z-index: 1;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 100%;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.fi-testimonial__mark {
    width: 44px;
    height: auto;
    flex: 0 0 auto;
    /* Brand-uniform accent #eae199 across every testimonial card.
       Overrides the per-card `--fi-testimonial-accent` var the
       testimonials shortcode rotates from a palette. */
    color: #eae199 !important;
}
.fi-testimonial__quote {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--fi-dark, #2b2b2b);
    font-weight: 400;
    letter-spacing: -0.1px;
    flex: 1 1 auto;
}
.fi-testimonial__quote p { margin: 0 0 0.5em; }
.fi-testimonial__quote p:last-child { margin: 0; }
.fi-testimonial__person {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(43, 43, 43, 0.08);
}
.fi-testimonial__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fi-dark, #2b2b2b);
    letter-spacing: 0.2px;
}
.fi-testimonial__role {
    font-size: 11px;
    color: var(--fi-mid, #5f5a57);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Product reveal --- */
.fi-testimonial__product {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--fi-dark, #2b2b2b);
    background: var(--fi-cream, #fcf8f3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.fi-testimonial__product-image {
    flex: 1 1 auto;
    overflow: hidden;
    background: rgba(95, 90, 87, 0.06);
    min-height: 0;
}
.fi-testimonial__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.6s ease;
}
.fi-testimonial__product-meta {
    flex: 0 0 auto;
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border-top: 1px solid rgba(43, 43, 43, 0.08);
}
.fi-testimonial__product-cat {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fi-mid, #5f5a57);
}
.fi-testimonial__product-title {
    margin: 2px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--fi-dark, #2b2b2b);
}
.fi-testimonial__product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--fi-green, #87af4d);
}
.fi-testimonial__product-price .amount,
.fi-testimonial__product-price .woocommerce-Price-amount,
.fi-testimonial__product-price .woocommerce-Price-currencySymbol {
    color: inherit !important;
    font: inherit !important;
}
.fi-testimonial__product-cta {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fi-dark, #2b2b2b);
}
.fi-testimonial__product-cta span { display: inline-block; transition: transform 0.25s ease; margin-left: 6px; }

@media (hover: hover) {
    .fi-testimonial--has-product:hover .fi-testimonial__face {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }
    .fi-testimonial--has-product:hover .fi-testimonial__product {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .fi-testimonial--has-product:hover .fi-testimonial__product-image img {
        transform: scale(1.06);
    }
    .fi-testimonial--has-product:hover .fi-testimonial__product-cta span {
        transform: translateX(4px);
    }
}

@media (max-width: 1024px) {
    .fi-testimonials { padding: 100px 0; }
    .fi-testimonials__inner { padding: 0 32px; }
    .fi-testimonial__face { padding: 30px 28px 26px; }
}
@media (max-width: 900px) {
    .fi-testimonials { padding: 70px 0; }
    .fi-testimonials__inner { padding: 0 24px; }
    .fi-testimonials__header { margin-bottom: 40px; }
    .fi-testimonials__grid { grid-template-columns: 1fr; }
    .fi-testimonial { min-height: 260px; }
    .fi-testimonial__face { padding: 28px 24px; }
    .fi-testimonial__quote { font-size: 16px; }

    /* Collapse to 2 cards by default; "Показати всі" reveals the rest. */
    .fi-testimonials:not(.is-expanded) .fi-testimonials__grid > .fi-testimonial:nth-child(n+3) {
        display: none;
    }
}

/* "Show all reviews" button — only relevant on the 1-column mobile layout. */
.fi-testimonials__more {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 28px auto 0;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid rgba(58, 41, 32, 0.18);
    color: var(--fi-warm-deep, #3a2920);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fi-testimonials__more:hover {
    background: var(--fi-warm-deep, #3a2920);
    border-color: var(--fi-warm-deep, #3a2920);
    color: #fff;
}
.fi-testimonials__more-icon {
    transition: transform 0.25s ease;
}
.fi-testimonials.is-expanded .fi-testimonials__more-icon {
    transform: rotate(180deg);
}
@media (max-width: 900px) {
    .fi-testimonials__more { display: flex; }
}

/* =========================================================
   Subscribe — editorial split: full-bleed image + form panel.
   Image on the left with a floating "−10%" offer chip;
   right side hosts the cream content panel with form + perks.
   ========================================================= */
.fi-subscribe {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--fi-cream, #fcf8f3);
    color: var(--fi-dark, #2b2b2b);
    min-height: 640px;
    overflow: hidden;
}
.fi-subscribe__media {
    position: relative;
    overflow: hidden;
    background: rgba(95, 90, 87, 0.08);
}
.fi-subscribe__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fi-subscribe:hover .fi-subscribe__media img { transform: scale(1.05); }
.fi-subscribe__media-placeholder {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(135,175,77,0.25), rgba(248,203,201,0.35));
}
.fi-subscribe__offer {
    position: absolute;
    top: 48px;
    left: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--fi-terracotta, #c47a55);
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.5px;
    box-shadow: 0 12px 36px rgba(58, 41, 32, 0.22);
    transform: rotate(-8deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fi-subscribe:hover .fi-subscribe__offer {
    transform: rotate(-12deg) scale(1.04);
}

.fi-subscribe__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 64px;
}
.fi-subscribe__content {
    width: 100%;
    max-width: 480px;
}
.fi-subscribe__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fi-mid, #5f5a57);
    margin-bottom: 24px;
}
.fi-subscribe__eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}
.fi-subscribe__title {
    margin: 0 0 18px;
    font-size: clamp(40px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.4px;
    color: var(--fi-dark, #2b2b2b);
}
.fi-subscribe__subtitle {
    margin: 0 0 36px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fi-mid, #5f5a57);
    max-width: 44ch;
}
.fi-subscribe__subtitle strong {
    color: var(--fi-dark, #2b2b2b);
    font-weight: 600;
}

.fi-subscribe__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.fi-subscribe__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.fi-subscribe__input,
.fi-subscribe__input:hover {
    border: 1px solid rgba(58, 41, 32, 0.14) !important;
    background: #fff !important;
    background-color: #fff !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    width: 100% !important;
    height: 64px !important;
    line-height: 62px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-family: inherit;
    outline: none !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 64px !important;
    letter-spacing: 0.2px;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fi-subscribe__input:focus {
    border-color: var(--fi-warm-deep, #3a2920) !important;
    box-shadow: 0 6px 24px rgba(58, 41, 32, 0.08) !important;
}
.fi-subscribe__input::placeholder {
    color: rgba(110, 90, 76, 0.55);
    opacity: 1;
    line-height: 62px;
}
/* Some Avada base styles set min-height on text inputs — neutralize. */
input[type="email"].fi-subscribe__input {
    min-height: 0 !important;
}
.fi-subscribe__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--fi-terracotta, #c47a55);
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 28px;
    width: 100%;
    height: 64px;
    cursor: pointer;
    transition: background 0.25s ease;
}
.fi-subscribe__btn:hover {
    background: var(--fi-warm-deep, #3a2920);
}
.fi-subscribe__btn svg { transition: transform 0.25s ease; }
.fi-subscribe__btn:hover svg { transform: translateX(4px); }
.fi-subscribe__btn:disabled { opacity: 0.5; cursor: wait; }

.fi-subscribe__honeypot {
    position: absolute !important;
    left: -5000px !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
}
.fi-subscribe__status {
    margin: 14px 0 0;
    font-size: 13px;
    letter-spacing: 0.2px;
    min-height: 18px;
    color: var(--fi-mid, #6e5a4c);
}
.fi-subscribe__status.is-success { color: var(--fi-green, #87af4d); }
.fi-subscribe__status.is-error   { color: #c44; }

.fi-subscribe__perks {
    list-style: none;
    margin: 36px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid rgba(58, 41, 32, 0.12);
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 12px;
}
.fi-subscribe__perks li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--fi-warm-deep, #3a2920);
}
.fi-subscribe__perks svg {
    color: var(--fi-terracotta, #c47a55);
    flex: 0 0 auto;
}

.fi-subscribe__legal {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.3px;
    color: rgba(110, 90, 76, 0.6);
    max-width: 52ch;
}

@media (max-width: 1100px) {
    .fi-subscribe { min-height: 560px; }
    .fi-subscribe__panel { padding: 72px 48px; }
    .fi-subscribe__offer { width: 104px; height: 104px; font-size: 26px; top: 32px; left: 32px; }
}
@media (max-width: 820px) {
    .fi-subscribe { grid-template-columns: 1fr; min-height: 0; }
    .fi-subscribe__media { aspect-ratio: 4 / 3; }
    .fi-subscribe__panel { padding: 60px 24px; }
    .fi-subscribe__input { height: 56px !important; line-height: 54px !important; max-height: 56px !important; }
    .fi-subscribe__btn { height: 56px; }
    .fi-subscribe__perks { gap: 14px 22px; }
}

/* =========================================================
   Sport megamenu — fixed-position panel with 5 image tiles.
   Hidden by default, slides in below the header on МАГАЗИН hover.
   ========================================================= */
.fi-megamenu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--fi-cream, #fcf8f3);
    box-shadow: 0 18px 40px rgba(58, 41, 32, 0.06);
    border-top: 1px solid rgba(58, 41, 32, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s;
    pointer-events: none;
}
.fi-megamenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    pointer-events: auto;
}
.fi-megamenu__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 32px 32px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.fi-megamenu__tile {
    --fi-i: 0;
    text-decoration: none !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0s;
}
.fi-megamenu.is-open .fi-megamenu__tile {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(120ms + var(--fi-i) * 70ms);
}
.fi-megamenu__image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgba(95, 90, 87, 0.06);
}
.fi-megamenu__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fi-megamenu__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
@media (hover: hover) {
    /* Image swap only when the tile actually has a hover image. Without
       this gate, tiles with no hover image fade to blank on hover. */
    .fi-megamenu__tile--has-hover:hover .fi-megamenu__img--primary { opacity: 0; }
    .fi-megamenu__tile--has-hover:hover .fi-megamenu__img--hover   { opacity: 1; }
    /* Universal hover affordance — gentle zoom + a touch of warmth. */
    .fi-megamenu__tile:hover .fi-megamenu__img { transform: scale(1.06); filter: brightness(1.04) saturate(1.05); }
}
.fi-megamenu__image-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(135,175,77,0.18), rgba(248,203,201,0.32));
}
.fi-megamenu__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}
.fi-megamenu__label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--fi-warm-deep, #3a2920);
}
.fi-megamenu__arrow {
    color: var(--fi-mid, #6e5a4c);
    flex: 0 0 auto;
    transition: color 0.25s ease, transform 0.25s ease;
}
.fi-megamenu__tile:hover .fi-megamenu__arrow {
    color: var(--fi-terracotta, #c47a55);
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .fi-megamenu__inner { padding: 22px 24px 26px; gap: 12px; }
    .fi-megamenu__label { font-size: 13px; }
}
@media (max-width: 760px) {
    .fi-megamenu { display: none; } /* Mobile keeps the regular menu — no hover. */
}

/* =========================================================
   Custom premium footer (hides Avada Theme Builder footer).
   ========================================================= */
.fusion-tb-footer {
    display: none !important;
}
.fi-footer {
    width: 100%;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(248, 203, 201, 0.55), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(196, 122, 85, 0.18), transparent 55%),
        var(--fi-sand, #efe1cc);
    color: rgba(58, 41, 32, 0.8);
    font-size: 14px;
}
.fi-footer__top {
    padding: 100px 0 56px;
}
.fi-footer__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 48px;
}
.fi-footer__top .fi-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.fi-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 360px;
}
.fi-footer__logo {
    display: inline-block;
    color: #fff;
    text-decoration: none;
}
.fi-footer__logo .custom-logo,
.fi-footer__logo-img {
    max-width: 160px;
    height: auto;
    width: auto;
    display: block;
}
.fi-footer__wordmark {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--fi-dark, #2b2b2b);
}
.fi-footer__statement {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(43, 43, 43, 0.78);
}
.fi-footer__social {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    gap: 12px;
}
.fi-footer__social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(43, 43, 43, 0.3);
    color: var(--fi-dark, #2b2b2b);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.fi-footer__social a:hover {
    background: var(--fi-dark, #2b2b2b);
    border-color: var(--fi-dark, #2b2b2b);
    color: #fff;
    transform: translateY(-2px);
}
.fi-footer__col-title {
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fi-dark, #2b2b2b);
}
.fi-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fi-footer__list li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}
.fi-footer__list a,
.fi-footer__list span {
    color: rgba(43, 43, 43, 0.78);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}
.fi-footer__list a:hover {
    color: var(--fi-dark, #2b2b2b);
    padding-left: 4px;
}
.fi-footer__list--contact li { letter-spacing: 0.2px; }

/* --- Product tags — sit under the link columns, not the brand --- */
.fi-footer__tags {
    grid-column: 2 / -1;
    margin-top: 28px;
    padding-top: 36px;
    border-top: 1px solid rgba(43, 43, 43, 0.18);
}
.fi-footer__tags .fi-footer__col-title {
    margin-bottom: 18px;
}
.fi-footer__tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fi-footer__tag-list li { margin: 0; }
.fi-footer__tag {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(43, 43, 43, 0.25);
    color: var(--fi-dark, #2b2b2b);
    text-decoration: none !important;
    font-size: 12px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border-radius: 0;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fi-footer__tag:hover {
    background: var(--fi-dark, #2b2b2b);
    border-color: var(--fi-dark, #2b2b2b);
    color: #fff;
    transform: translateY(-1px);
}

.fi-footer__bottom {
    padding: 28px 0;
    border-top: 1px solid rgba(43, 43, 43, 0.18);
}
.fi-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.fi-footer__copy {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(43, 43, 43, 0.7);
}
.fi-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}
.fi-footer__legal li {
    margin: 0;
}
.fi-footer__legal a {
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(43, 43, 43, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.fi-footer__legal a:hover {
    color: var(--fi-dark, #2b2b2b);
}

@media (max-width: 1024px) {
    .fi-footer__top { padding: 70px 0 60px; }
    .fi-footer__inner { padding: 0 32px; }
    .fi-footer__top .fi-footer__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
    .fi-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 600px) {
    .fi-footer__top { padding: 56px 0 48px; }
    .fi-footer__inner { padding: 0 24px; }
    .fi-footer__top .fi-footer__inner { grid-template-columns: 1fr; gap: 40px; }
    .fi-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* --- Promo video — full-bleed ultrawide band, warm bg --- */
.fi-promo-video {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--fi-cream, #fcf8f3);
    display: block;
}
.fi-promo-video__el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fi-promo-video__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: var(--fi-mid, #6e5a4c);
    background: linear-gradient(135deg, var(--fi-cream, #fcf8f3) 0%, var(--fi-sand, #efe1cc) 100%);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}
.fi-promo-video__placeholder code {
    background: rgba(58, 41, 32, 0.08);
    padding: 2px 8px;
    font-size: 12px;
    color: var(--fi-warm-deep, #3a2920);
}

/* --- Color card: swatch inside image, bottom-left --- */
.fi-card--color .fi-card__image {
    position: relative;
}
.fi-card__color-dot {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: block;
    z-index: 2;
}
.fi-card__color-dot--empty {
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 4px, #e6e6e6 4px, #e6e6e6 8px);
}

/* --- Responsive breakpoints --- */
@media (max-width: 1024px) {
    .fi-card {
        flex-basis: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}
@media (max-width: 768px) {
    .fi-carousel { padding: 40px 0; }
    .fi-carousel__title { font-size: 22px; }
    .fi-carousel__header { margin-bottom: 20px; }
    .fi-card {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 480px) {
    .fi-card {
        flex-basis: 72%;
        max-width: 72%;
    }
    .fi-carousel__inner { padding: 0 16px; }
}

/* =========================================================
   Mobile drawer + hamburger toggle.
   - Hamburger replaces the inline main nav at ≤900px.
   - Search and Cart icons stay in the header.
   - Account icon moves into the drawer on mobile.
   - Drawer is fully WP-managed via the "feelit-mobile-drawer"
     menu location, with a graceful clone-from-main-menu fallback.
   ========================================================= */
.fi-mobnav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--fi-warm-deep, #3a2920);
    cursor: pointer;
}
.fi-mobnav-toggle:hover { color: var(--fi-terracotta, #c47a55); }
body.fi-no-scroll { overflow: hidden; }
/* Hide the hamburger while the drawer is open — Avada's header sits in
   its own stacking context, so the toggle would visually punch through. */
body.fi-no-scroll .fi-mobnav-toggle { visibility: hidden; }

@media (max-width: 900px) {
    /* Hide the inline main nav and the account dropdown on mobile —
       they move into the drawer. Search + cart stay in place.
       Also hide Avada's native mobile toggle; we render our own. */
    .fusion-tb-header .awb-menu_row #menu-feel-it-main-menu,
    .fusion-tb-header nav.awb-menu .menu-feel-it-main-menu-container,
    .fusion-tb-header #menu-item-20018,
    .fusion-tb-header .awb-menu__m-toggle {
        display: none !important;
    }
    .fi-mobnav-toggle { display: inline-flex; }
}

.fi-drawer {
    position: fixed;
    inset: 0;
    z-index: 10500; /* above Avada's sticky header */
}
.fi-drawer[hidden] { display: none; }
.fi-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 41, 32, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fi-drawer.is-open .fi-drawer__backdrop { opacity: 1; }
.fi-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 88vw);
    height: 100%;
    background: var(--fi-cream, #fcf8f3);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 40px rgba(58, 41, 32, 0.12);
}
.fi-drawer.is-open .fi-drawer__panel { transform: translateX(0); }
.fi-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
}
.fi-drawer__brand {
    color: var(--fi-warm-deep, #3a2920);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-decoration: none;
}
.fi-drawer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--fi-warm-deep, #3a2920);
    cursor: pointer;
}
.fi-drawer__close:hover { color: var(--fi-terracotta, #c47a55); }
.fi-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 0 24px;
}
.fi-drawer__nav { padding: 4px 0; }
.fi-drawer__list,
.fi-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fi-drawer__sub {
    max-height: 0;
    overflow: hidden;
    background: rgba(58, 41, 32, 0.03);
    transition: max-height 0.28s ease;
}
.fi-drawer__item.is-open > .fi-drawer__sub { max-height: 1200px; }
.fi-drawer__item {
    position: relative;
    border-bottom: 1px solid rgba(58, 41, 32, 0.06);
}
.fi-drawer__sub .fi-drawer__item { border-bottom: 0; }
.fi-drawer__link {
    display: block;
    padding: 16px 56px 16px 22px;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
.fi-drawer__link:hover { color: var(--fi-terracotta, #c47a55); }
.fi-drawer__sub .fi-drawer__link {
    padding: 12px 22px 12px 36px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--fi-mid, #6e5a4c);
}

/* Shop submenu — group headers and "Всі товари" emphasis. */
.fi-drawer__group-title {
    list-style: none;
    padding: 14px 22px 6px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fi-mid, #6e5a4c);
    opacity: 0.7;
}
.fi-drawer__sub .fi-drawer__link--all {
    font-weight: 600;
    color: var(--fi-warm-deep, #3a2920);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    padding-left: 22px;
}
.fi-drawer__chev {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--fi-mid, #6e5a4c);
    cursor: pointer;
    transition: transform 0.25s ease, color 0.2s ease;
}
.fi-drawer__chev:hover { color: var(--fi-warm-deep, #3a2920); }
.fi-drawer__item.is-open > .fi-drawer__chev { transform: rotate(180deg); color: var(--fi-warm-deep, #3a2920); }
.fi-drawer__account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 22px 0;
    padding: 14px 18px;
    background: var(--fi-warm-deep, #3a2920);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}
.fi-drawer__account:hover {
    background: var(--fi-terracotta, #c47a55);
    color: #fff;
}
.fi-drawer__account svg { flex: 0 0 auto; }

/* =========================================================
   Mobile-only refinements (≤760px). Tasks:
   1) Hero slider: dots flow below the image, not over it.
   2) Bestsellers: arrows stop overlapping the subtitle.
   3) "Обирай" carousels: prefix on line 1, accent on line 2.
   4) Carousel arrows align with the bottom of the subtitle.
   5) About section: tighter, more deliberate paddings.
   6) Subscribe panel: tighter, more deliberate paddings.
   7) Footer: cleaner stacked mobile layout.
   ========================================================= */

/* (1) Hero slider — dots below the slide on mobile.
   Avada sets an inline height on .fusion-slider-container that locks
   the container's box at slide height, so dots flowing below get
   overlapped by the next section. Override to auto-height + padding
   on mobile, and lift overflow on .tfs-slider so dots aren't clipped.
   .flex-viewport still clips horizontally so slide transitions work. */
@media (max-width: 760px) {
    /* Container + inner wrappers: drop the inline heights so the slider
       can grow to a portrait mobile-friendly height. .tfs-slider also
       needs overflow visible so the dots below the slide aren't clipped. */
    .fusion-slider-container,
    .fusion-slider-container .tfs-slider,
    .fusion-slider-container .flex-viewport,
    .fusion-slider-container .slides > li,
    .fusion-slider-container .slides > li .background-image {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    .fusion-slider-container { padding-bottom: 14px; }
    .fusion-slider-container .tfs-slider { overflow: visible !important; }
    /* Hero is taller on mobile while staying full-width. Mobile assets
       are 1584×2048 (≈3:4 portrait); aspect-ratio matches them so the
       slide box grows naturally with the viewport. */
    .fusion-slider-container .flex-viewport,
    .fusion-slider-container .slides > li,
    .fusion-slider-container .slides > li .background-image {
        aspect-ratio: 1584 / 2048;
    }
    /* Replace the desktop slide art with the mobile-only WebPs.
       Scoped to .fusion-slider-sc-feelitslide-home so other sliders
       (e.g. .fusion-slider-sc-feelitslide-home-mobile) aren't affected.

       The slider has 4 real slides — 3 images + 1 video — and FlexSlider
       wraps that with two clones for its loop transition, giving 6 li:
         nth-child(1) = clone of last (video clone, no .background-image)
         nth-child(2) = slide 1   → hero-1.webp
         nth-child(3) = slide 2   → hero-2.webp
         nth-child(4) = slide 3   → hero-3.webp
         nth-child(5) = slide 4 (video, no .background-image)
         nth-child(6) = clone of first → MUST also be hero-1.webp,
                        otherwise the transition from video → slide 1
                        flashes the original desktop background. */
    .fusion-slider-sc-feelitslide-home .slides > li:nth-child(2) .background-image,
    .fusion-slider-sc-feelitslide-home .slides > li:nth-child(6) .background-image {
        background-image: url(/wp-content/uploads/2026/04/feel-it-mobile-hero-1.webp) !important;
    }
    .fusion-slider-sc-feelitslide-home .slides > li:nth-child(3) .background-image {
        background-image: url(/wp-content/uploads/2026/04/feel-it-mobile-hero-2.webp) !important;
    }
    .fusion-slider-sc-feelitslide-home .slides > li:nth-child(4) .background-image {
        background-image: url(/wp-content/uploads/2026/04/feel-it-mobile-hero-3.webp) !important;
    }
    .fusion-slider-container .slides > li .background-image {
        background-size: cover !important;
        background-position: center center !important;
    }

    .fusion-slider-container .flex-control-nav {
        position: static !important;
        bottom: auto !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center;
    }
    .fusion-slider-container .flex-control-nav li { display: inline-block; margin: 0 5px; }
    /* Dots are now on the light background; restyle so the active state
       reads clearly. Inactive = outlined warm-deep, active = filled. */
    .fusion-slider-container .flex-control-paging li a {
        background: transparent !important;
        border: 1px solid var(--fi-warm-deep, #3a2920) !important;
        opacity: 0.45 !important;
        transition: opacity 0.2s ease, background 0.2s ease;
    }
    .fusion-slider-container .flex-control-paging li a.flex-active,
    .fusion-slider-container .flex-control-paging li a:hover {
        background: var(--fi-warm-deep, #3a2920) !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   Hero slider — tablet range (761–1675px).

   The mobile-only rule above (≤760px) swaps in the portrait
   1584×2048 assets and uses aspect-ratio for a tall hero.
   On viewports ≥1676px the desktop assets (1676×800 landscape)
   fit edge-to-edge with no crop.

   The gap in between — iPad portrait (820×1180), iPad
   landscape (1180×820), small laptops — was rendering the
   landscape assets in a fixed 800px-tall box with
   `background-size: cover`. Cover always fills the box and
   crops the longer axis, so on every tablet width the side
   art ("ВІДЧУЙ РУХ" / "ВІДЧУЙ СЕБЕ" / lime feel-it logo)
   was being chopped off — at iPad portrait roughly 51% of
   the image width was clipped. Landscape tablets also lost
   the bottom of the slider below the fold because the 800px
   slider exceeded the visible content area after header.

   Fix: same shape as the mobile rule but using the desktop
   image's 1676/800 aspect ratio. Letting the slider grow
   width-driven means cover scales the image to exactly fill
   a container with the matching aspect — no crop on either
   axis, no fixed-height bottom overflow. The slider ends up
   shorter than 800px on these widths, which is the explicit
   spec ("if it will be shorter than full height it doesnt
   matter"). Same FlexSlider DOM as the ≤760px rule.
   ========================================================= */
@media (min-width: 761px) and (max-width: 1675px) {
    .fusion-slider-sc-feelitslide-home,
    .fusion-slider-sc-feelitslide-home .tfs-slider,
    .fusion-slider-sc-feelitslide-home .flex-viewport,
    .fusion-slider-sc-feelitslide-home .slides > li,
    .fusion-slider-sc-feelitslide-home .slides > li .background-image {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    .fusion-slider-sc-feelitslide-home .flex-viewport,
    .fusion-slider-sc-feelitslide-home .slides > li,
    .fusion-slider-sc-feelitslide-home .slides > li .background-image {
        aspect-ratio: 1676 / 800;
    }
    .fusion-slider-sc-feelitslide-home .slides > li .background-image {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* (3) "Обирай" carousels — break the heading into two lines on mobile.
   The prefix span sits inline by default; on mobile we force the
   accent span to its own line. Bestsellers has no prefix span and
   keeps its centered heading style. */
@media (max-width: 760px) {
    .fi-carousel__title-accent { display: block; }
}

/* (2 + 4) Carousel header/arrows on mobile.
   For non-bestsellers carousels the layout already aligns arrows
   to the bottom of the heading — we just keep them inline at
   subtitle level. For bestsellers we undo the absolute positioning
   that was overlapping the subtitle and let the arrows row sit
   below the centered heading. */
@media (max-width: 760px) {
    .fi-carousel__header {
        margin-bottom: 24px;
        gap: 16px;
    }
    .fi-carousel__btn { width: 36px; height: 36px; }

    /* Bestsellers: hide the arrows on mobile — users swipe the carousel
       horizontally instead. Keeps the centered heading clean. */
    .fi-carousel--bestsellers .fi-carousel__nav { display: none; }
    .fi-carousel--bestsellers .fi-carousel__header {
        flex-direction: column;
        align-items: center;
    }
    .fi-carousel__subtitle { font-size: 14px; }
}

/* (5) About — better breathing room on small screens. */
@media (max-width: 760px) {
    .fi-about { padding: 64px 0; }
    .fi-about__inner { gap: 36px; padding: 0 22px; }
    .fi-about__media { aspect-ratio: 4 / 4.5; }
    .fi-about__eyebrow { margin-bottom: 18px; letter-spacing: 2.5px; }
    .fi-about__title { margin: 0 0 22px; letter-spacing: -1px; }
    .fi-about__text { margin: 0 0 30px; line-height: 1.65; }
    .fi-about__btn { padding: 14px 0 6px; }
}

/* (6) Subscribe — calmer paddings on mobile, tighter type. */
@media (max-width: 760px) {
    .fi-subscribe__media { aspect-ratio: 5 / 4; }
    .fi-subscribe__panel { padding: 44px 22px 48px; }
    .fi-subscribe__offer { width: 84px; height: 84px; font-size: 22px; top: 20px; left: 20px; }
    .fi-subscribe__eyebrow { margin-bottom: 16px; }
    .fi-subscribe__title { margin: 0 0 14px; letter-spacing: -1px; }
    .fi-subscribe__subtitle { margin: 0 0 24px; font-size: 15px; }
    .fi-subscribe__perks { gap: 10px 18px; margin-top: 18px; }
    .fi-subscribe__legal { margin-top: 16px; font-size: 11px; }
}

/* (7) Footer — proper mobile layout: tight, well-spaced, readable. */
@media (max-width: 760px) {
    .fi-footer__top { padding: 48px 0 36px; }
    .fi-footer__inner { padding: 0 22px; }
    .fi-footer__top .fi-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .fi-footer__brand { gap: 16px; }
    .fi-footer__statement { font-size: 13px; line-height: 1.6; }
    .fi-footer__social { gap: 10px; margin-top: 4px; }
    .fi-footer__social a { width: 36px; height: 36px; }
    .fi-footer__col-title { margin-bottom: 14px; font-size: 11px; }
    .fi-footer__list { gap: 10px; }
    .fi-footer__list li { font-size: 14px; }
    /* Tags: collapse top spacing, full width below the columns. */
    .fi-footer__tags {
        grid-column: 1 / -1;
        margin-top: 4px;
        padding-top: 28px;
    }
    .fi-footer__tag { height: 30px; padding: 0 12px; font-size: 11px; }
    .fi-footer__tag-list { gap: 6px; }
    /* Bottom strip: stack copy + legal links cleanly. */
    .fi-footer__bottom { padding: 20px 0; }
    .fi-footer__bottom-inner { gap: 12px; align-items: flex-start; flex-direction: column; }
    .fi-footer__legal { gap: 18px; flex-wrap: wrap; }
    .fi-footer__copy, .fi-footer__legal a { font-size: 11px; }
}

/* =========================================================
   Breadcrumbs — force dark, visible text on every page-title bar.
   The titlebar sits on a light gradient, so the default Avada
   colors (often near-white or low-contrast) disappear.
   ========================================================= */
.fusion-page-title-bar .fusion-breadcrumbs,
.fusion-page-title-bar .fusion-breadcrumbs li,
.fusion-page-title-bar .fusion-breadcrumbs a,
.fusion-page-title-bar .fusion-breadcrumbs span,
.fusion-page-title-bar .fusion-breadcrumbs .fusion-breadcrumb-prefix,
.fusion-page-title-bar .fusion-breadcrumbs [aria-current="page"],
.fusion-breadcrumbs,
.fusion-breadcrumbs li,
.fusion-breadcrumbs a,
.fusion-breadcrumbs span {
    color: var(--fi-warm-deep, #3a2920) !important;
    opacity: 1 !important;
}
.fusion-page-title-bar .fusion-breadcrumbs .awb-breadcrumb-sep:after,
.fusion-page-title-bar .fusion-breadcrumbs .awb-breadcrumb-sep-icon i:not(.awb-breadcrumb-home-icon),
.fusion-breadcrumbs .awb-breadcrumb-sep:after {
    color: rgba(58, 41, 32, 0.55) !important;
}
.fusion-page-title-bar .fusion-breadcrumbs a:hover,
.fusion-breadcrumbs a:hover {
    color: var(--fi-terracotta, #c47a55) !important;
}

/* =========================================================
   Scroll-to-top — pull button into the bottom-right corner on
   mobile (default Avada leaves a 75px side gap that floats it
   awkwardly toward the middle of small screens).
   ========================================================= */
/* z-index hierarchy on this site:
   .fi-drawer (mobile menu) = 10500
   .fi-megamenu              = ~10000
   header (sticky)           = ~10100
   #toTop                    = stays well below all of them
   so it never floats over the mobile menu. */
#toTop,
.to-top-container #toTop,
.to-top-floating #toTop {
    z-index: 1000 !important;
}
body.fi-no-scroll #toTop,
body.fi-megamenu-open #toTop {
    display: none !important;
}

@media (max-width: 760px) {
    #toTop,
    .to-top-floating #toTop,
    .to-top-right #toTop {
        right: 16px !important;
        bottom: 16px !important;
        height: 40px;
        width: 40px;
    }
    .to-top-right.awb-to-top-scroll-progress #toTop {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* iOS Safari workaround — `overflow: hidden` on body doesn't
   reliably stop background scroll while the drawer is open.
   Pinning the body to its current scroll position via
   `position: fixed` + a JS-set `top: -Ypx` does. The JS
   below in functions.php sets the offset on open and clears
   on close, restoring the scroll position. */
body.fi-no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* =========================================================
   Carousel cursors — kill the custom drag/grab cursor
   (and the SVG circle-with-arrows variant some Avada
   carousels render on hover). Browsers should fall back to
   default; on links the underlying anchor still gets
   pointer cursor automatically.
   ========================================================= */
.fi-carousel,
.fi-carousel__track,
.fi-carousel__viewport,
.fi-carousel__inner,
.fi-card,
.fusion-carousel,
.fusion-carousel-holder,
.fusion-carousel-positioner,
.fusion-flexslider,
.flexslider,
.flex-viewport,
.flex-direction-nav,
.flex-control-nav,
.swiper,
.swiper-container,
.swiper-wrapper,
.swiper-slide,
.swiper-slide.swiper-slide-active,
.awb-swiper,
.awb-swiper-container,
.awb-carousel-container,
.cross-sells .products,
.related.products,
.upsells.products,
.fusion-woo-related-tb,
.fusion-woo-upsells-tb,
.products.product-images-thumb {
    cursor: default !important;
}
.fi-carousel a,
.fusion-carousel a,
.swiper-slide a,
.cross-sells a,
.related.products a,
.upsells.products a,
.fi-card a {
    cursor: pointer !important;
}
/* Photoswipe gallery zoom — also a "grab" cursor on PDP
   image gallery. Keep zoom-in instead. */
.pswp__container,
.pswp__zoom-wrap,
.pswp__img {
    cursor: zoom-in !important;
}
.pswp.pswp--zoomed-in .pswp__container,
.pswp.pswp--zoomed-in .pswp__zoom-wrap {
    cursor: zoom-out !important;
}

/* =========================================================
   PDP — kill the leftover off-brand red (rgb(149, 80, 77))
   on the active product tab + price wrapper. The existing
   FINDING-005 fix only covered card prices in archives; on
   single product pages the active tab and the .price wrapper
   still bled red. Snap them back to the brand palette.
   ========================================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover,
.wc-tabs li.active a {
    color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.summary p.price,
.summary span.price {
    color: var(--fi-green, #87af4d) !important;
}

/* =========================================================
   Contacts — bring the Avada Form Builder fields and submit
   button to a consistent, accessible scale. Submit was 32px
   tall (looks weak vs 38px inputs); inputs were tight with
   sharp 0-radius corners. Push to 44/48px touch target,
   match border tokens, add focus ring.
   ========================================================= */
.fusion-form .fusion-form-input,
.fusion-form input[type="text"].fusion-form-input,
.fusion-form input[type="email"].fusion-form-input,
.fusion-form input[type="tel"].fusion-form-input,
.fusion-form input[type="number"].fusion-form-input,
.fusion-form-form-wrapper input[type="text"],
.fusion-form-form-wrapper input[type="email"],
.fusion-form-form-wrapper input[type="tel"] {
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(58, 41, 32, 0.18) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fusion-form textarea.fusion-form-input,
.fusion-form-form-wrapper textarea {
    min-height: 140px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(58, 41, 32, 0.18) !important;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fusion-form .fusion-form-input:focus,
.fusion-form textarea:focus,
.fusion-form-form-wrapper input:focus,
.fusion-form-form-wrapper textarea:focus {
    border-color: var(--fi-green, #87af4d) !important;
    box-shadow: 0 0 0 3px rgba(135, 175, 77, 0.18);
    outline: none;
}
.fusion-form .form-form-submit,
.fusion-form button.form-form-submit,
.fusion-form-form-wrapper button[type="submit"].fusion-button {
    height: 48px !important;
    min-width: 200px;
    padding: 0 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    line-height: 48px !important;
    border-radius: 2px !important;
}

/* =========================================================
   Cart — empty + populated polish.
   - Empty state: bigger return-to-shop CTA, more breathing
     room around the icon + heading.
   - Populated table: replace stripe-style WC defaults with
     soft hairline rows on the brand background.
   - Cart-totals card: lift it onto the sand surface, give
     the green checkout button real presence.
   - Cross-sells: neutralize the residual off-brand red on
     prices and tighten card meta typography.
   ========================================================= */
.woocommerce-page .wc-empty-cart-message,
.woocommerce .wc-empty-cart-message {
    text-align: center;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 16px;
    margin: 24px 0 32px;
}
.woocommerce .return-to-shop {
    text-align: center;
    margin: 0 0 48px;
}
.woocommerce .return-to-shop .button,
.woocommerce .return-to-shop .fusion-button,
.woocommerce-cart .empty .return-to-shop .fusion-button.button-flat,
/* Avada Page Builder "Повернутись до магазину" button on the
   built cart page lives in .post-content, not .return-to-shop. */
.woocommerce-cart .post-content .fusion-button.button-flat {
    height: 52px !important;
    min-width: 240px;
    padding: 0 36px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    line-height: 52px !important;
    border-radius: 2px !important;
}

/* Cart table — brand hairlines, no stripe, tidy spacing. */
.woocommerce table.cart,
.woocommerce table.shop_table.cart {
    border: 1px solid rgba(58, 41, 32, 0.08) !important;
    border-radius: 2px !important;
    border-collapse: separate !important;
    background: #fff;
}
.woocommerce table.cart th,
.woocommerce table.shop_table.cart th {
    background: var(--fi-cream, #fcf8f3) !important;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 18px 16px !important;
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
}
.woocommerce table.cart td,
.woocommerce table.shop_table.cart td {
    padding: 22px 16px !important;
    border-top: 1px solid rgba(58, 41, 32, 0.06) !important;
    color: var(--fi-warm-deep, #3a2920);
    vertical-align: middle;
}
.woocommerce table.cart td.product-name a,
.woocommerce table.shop_table.cart td.product-name a {
    color: var(--fi-warm-deep, #3a2920);
    font-weight: 500;
    text-decoration: none;
}
.woocommerce table.cart td.product-name a:hover {
    color: var(--fi-green, #87af4d);
}
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal,
.woocommerce table.cart td.product-price .amount,
.woocommerce table.cart td.product-subtotal .amount {
    color: var(--fi-green, #87af4d);
    font-weight: 600;
    white-space: nowrap;
}
/* Totals card amounts shouldn't break onto two lines either. */
.woocommerce-cart .fusion-woo-cart-totals-wrapper .amount,
.woocommerce-cart .cart_totals .amount {
    white-space: nowrap;
}
.woocommerce table.cart td.product-remove a.remove,
.woocommerce table.cart .product-remove a {
    color: rgba(58, 41, 32, 0.45) !important;
    font-size: 22px !important;
    background: transparent !important;
    transition: color 0.2s ease;
}
.woocommerce table.cart td.product-remove a.remove:hover {
    color: var(--fi-terracotta, #c47a55) !important;
}
.woocommerce .quantity .qty {
    height: 40px;
    width: 64px;
    border: 1px solid rgba(58, 41, 32, 0.18);
    border-radius: 2px;
    text-align: center;
}
.woocommerce .actions .button,
.woocommerce .actions .fusion-button {
    border-radius: 2px !important;
}

/* Cart totals card — lift it onto a clean white surface.
   Avada's theme builder wraps it in a fusion-column-wrapper
   that ships with a muddy mid-gray background; force it to
   the brand cream so totals + buttons read cleanly.
   Side-rail column is narrow (~250px) so padding/typography
   stay tight to keep the total amount on one line. */
.woocommerce-cart .fusion-woo-cart-totals-wrapper {
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 2px;
    padding: 18px 16px 22px;
    color: var(--fi-warm-deep, #3a2920);
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper h2,
.woocommerce-cart .cart_totals h2 {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
    color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table th,
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table td {
    padding: 10px 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border: 0 !important;
    border-top: 1px solid rgba(58, 41, 32, 0.06) !important;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table tr:first-child th,
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table tr:first-child td {
    border-top: 0 !important;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table th {
    width: 50%;
    color: var(--fi-warm-deep, #3a2920);
    font-weight: 500;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper table.shop_table td {
    text-align: right;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper .order-total .amount {
    font-size: 18px !important;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper > .fusion-column-wrapper,
.woocommerce-cart .fusion-woo-cart-totals-tb,
.woocommerce-cart .fusion-woo-cart-totals-tb-1,
.woocommerce-cart .cart-collaterals .fusion-column-wrapper:has(.cart_totals),
.woocommerce-cart .cart-collaterals .fusion-column-wrapper:has(.fusion-woo-cart-totals-wrapper) {
    background: transparent !important;
}
/* Direct parent that paints rgb(95,90,87) — neutralize. */
.woocommerce-cart .fusion-builder-column .fusion-column-wrapper[style*="rgb(95"],
.woocommerce-cart .fusion-builder-column .fusion-column-wrapper[style*="background-color: rgb(95"] {
    background-color: transparent !important;
}
/* The cart-totals card sits inside its own page-builder column.
   That column ships with a muddy gray-brown background from the
   builder template; force the whole right-rail wrapper that
   contains the totals to a clean cream surface so the white
   inner card doesn't look like a sticker on a dirty backdrop. */
.woocommerce-cart .fusion-column-wrapper:has(> .fusion-woo-cart-totals-wrapper),
.woocommerce-cart .fusion-builder-column:has(.fusion-woo-cart-totals-wrapper) > .fusion-column-wrapper {
    background-color: var(--fi-cream, #fcf8f3) !important;
    background-image: none !important;
    border-radius: 2px;
}
/* Right-rail headings (e.g. "Разом у кошику: 6 товарів",
   "Маєте купон?") were white because Avada assumed a dark
   bg. Recolor for the cream surface. The marker class
   `fi-cart-rail` is added by JS in functions.php so we don't
   accidentally repaint headings elsewhere. */
.fi-cart-rail h1,
.fi-cart-rail h2,
.fi-cart-rail h3,
.fi-cart-rail h4,
.fi-cart-rail h5,
.fi-cart-rail h6,
.fi-cart-rail .fusion-title-heading,
.fi-cart-rail p:not(.amount) {
    color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 2px;
    padding: 28px 28px 32px;
}
/* Force readable text inside totals regardless of wrapper bg. */
.woocommerce-cart .fusion-woo-cart-totals-wrapper,
.woocommerce-cart .fusion-woo-cart-totals-wrapper *:not(a):not(.amount):not(button) {
    color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper .amount {
    color: var(--fi-warm-deep, #3a2920) !important;
    font-weight: 600;
}
.woocommerce-cart .fusion-woo-cart-totals-wrapper .order-total .amount {
    color: var(--fi-green, #87af4d) !important;
    font-size: 22px;
    font-weight: 700;
}
.woocommerce .cart_totals h2 {
    margin: 0 0 18px;
    font-size: 20px;
    color: var(--fi-warm-deep, #3a2920);
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
    padding-bottom: 14px;
}
.woocommerce .cart_totals table.shop_table {
    border: 0;
    background: transparent;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    border-top: 1px solid rgba(58, 41, 32, 0.06);
    padding: 14px 0 !important;
    background: transparent !important;
    font-size: 14px;
}
.woocommerce .cart_totals .order-total .amount {
    color: var(--fi-green, #87af4d);
    font-size: 22px;
    font-weight: 700;
}
.woocommerce .wc-proceed-to-checkout {
    padding-top: 8px;
}
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button.alt {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 36px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    border-radius: 2px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avada Page Builder cart "Оформити замовлення" link inherits
   a peach `button-custom` color from the builder template
   (driven by --button_gradient_top_color / _bottom_color CSS
   custom properties on the inline style attribute). Override
   both the resolved background AND the source variables so
   the button reliably renders brand green in every render
   path (fresh load, cached load, AJAX update). */
.woocommerce-cart a.fusion-button[href*="checkout"],
.woocommerce-cart a.fusion-button.button-custom[href*="checkout"],
.woocommerce-cart a.fusion-button.checkout-button {
    min-height: 52px !important;
    width: 100%;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    border-radius: 2px !important;
    background-color: var(--fi-green, #87af4d) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    margin-bottom: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Beat Avada's per-button CSS variables. */
    --button_gradient_top_color: var(--fi-green, #87af4d) !important;
    --button_gradient_bottom_color: var(--fi-green, #87af4d) !important;
    --button_gradient_top_color_hover: var(--fi-warm-deep, #3a2920) !important;
    --button_gradient_bottom_color_hover: var(--fi-warm-deep, #3a2920) !important;
    --button_accent_color: #ffffff !important;
    --button_accent_hover_color: #ffffff !important;
    --button_border_hover_color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce-cart a.fusion-button[href*="checkout"]:hover {
    background-color: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
}
/* Update-cart action — keep it visible but secondary. */
.woocommerce-cart .fusion-update-cart,
.woocommerce-cart a.fusion-button.fusion-update-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px !important;
    line-height: 44px !important;
    width: 100% !important;
    padding: 0 24px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    border: 1px solid rgba(58, 41, 32, 0.18) !important;
    margin-bottom: 10px;
}
.woocommerce-cart a.fusion-button.fusion-update-cart:hover {
    background: var(--fi-cream, #fcf8f3) !important;
    border-color: var(--fi-warm-deep, #3a2920) !important;
}
/* If both the form button and the duplicated theme-builder
   anchor are rendered, hide the duplicate so we get one CTA. */
.woocommerce-cart .fusion-woo-cart-totals-wrapper button[name="update_cart"] {
    display: none !important;
}

/* =========================================================
   Shop page — 2026 filter UX.
   Desktop: keep inline left sidebar (one-look browsing).
   Mobile/Tablet: hide the sidebar and surface a sticky
   toolbar with "Filters" + "Sort" buttons that open a
   slide-in drawer. Products are visible immediately on
   page load — no scroll past filter list.
   ========================================================= */
/* Hide the "Search…" input that sits at the top of the shop
   filter sidebar (and gets cloned into the mobile filter
   drawer). The header already has a global search; in the
   filter context it was redundant and visually competed with
   the categories list. Applied at every screensize, both in
   the original sidebar and in the cloned drawer body. */
.fusion-builder-column-6 .widget_search,
.fusion-builder-column-6 .widget_product_search,
.fusion-builder-column-6 form.searchform,
.fusion-builder-column-6 form.woocommerce-product-search,
.fusion-builder-column-6 form[role="search"],
.fi-filter-drawer__cloned .widget_search,
.fi-filter-drawer__cloned .widget_product_search,
.fi-filter-drawer__cloned form.searchform,
.fi-filter-drawer__cloned form.woocommerce-product-search,
.fi-filter-drawer__cloned form[role="search"],
.fi-filter-drawer__body .widget_search,
.fi-filter-drawer__body .widget_product_search,
.fi-filter-drawer__body form.searchform,
.fi-filter-drawer__body form.woocommerce-product-search,
.fi-filter-drawer__body form[role="search"] {
    display: none !important;
}

@media (max-width: 900px) {
    .post-type-archive-product .fusion-layout-column.fusion-builder-column-6,
    .tax-product_cat .fusion-layout-column.fusion-builder-column-6,
    .tax-pa_color .fusion-layout-column.fusion-builder-column-6,
    .tax-sport .fusion-layout-column.fusion-builder-column-6,
    .woocommerce-shop .fusion-layout-column.fusion-builder-column-6 {
        display: none !important;
    }
    /* Make the products column take full width. */
    .post-type-archive-product .fusion-layout-column.fusion_builder_column_3_4,
    .tax-product_cat .fusion-layout-column.fusion_builder_column_3_4,
    .woocommerce-shop .fusion-layout-column.fusion_builder_column_3_4 {
        width: 100% !important;
        --awb-width-large: 100% !important;
        flex: 0 0 100% !important;
    }
}

.fi-shop-toolbar {
    display: none;
    position: sticky;
    top: 56px; /* below the sticky header */
    z-index: 80;
    background: var(--fi-cream, #fcf8f3);
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
    padding: 12px 16px;
    margin: 0 -16px 16px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 900px) {
    .fi-shop-toolbar { display: flex; }
}
.fi-shop-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.18);
    border-radius: 2px;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex: 1;
    min-width: 0;
}
.fi-shop-toolbar__btn:hover,
.fi-shop-toolbar__btn:focus-visible {
    background: var(--fi-warm-deep, #3a2920);
    border-color: var(--fi-warm-deep, #3a2920);
    color: #fff;
    outline: none;
}
.fi-shop-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--fi-green, #87af4d);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}
.fi-shop-toolbar__btn[hidden] { display: none; }

/* Avada renders a duplicate "Clear All" chip in English next to
   active filters (`.awb-clear-all-filters`). We already ship our
   own localized "Очистити фільтри" button + the mobile drawer's
   "Скинути" — kill the Avada one to avoid 3 reset UIs in a row. */
.awb-clear-all-filters,
ul.chosen-filters .awb-clear-all-filters,
.chosen.awb-clear-all-filters {
    display: none !important;
}

/* Filter drawer — slide in from the right. */
.fi-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 10400;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}
.fi-filter-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}
.fi-filter-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 41, 32, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fi-filter-drawer.is-open .fi-filter-drawer__backdrop { opacity: 1; }
.fi-filter-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--fi-cream, #fcf8f3);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.fi-filter-drawer.is-open .fi-filter-drawer__panel {
    transform: translateX(0);
}
.fi-filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
}
.fi-filter-drawer__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fi-warm-deep, #3a2920);
}
.fi-filter-drawer__close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--fi-warm-deep, #3a2920);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    border-radius: 2px;
}
.fi-filter-drawer__close:hover { background: rgba(58, 41, 32, 0.08); }
.fi-filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}
.fi-filter-drawer__body .awb-woo-filters,
.fi-filter-drawer__body .widget {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 24px;
}
.fi-filter-drawer__body .widget-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fi-warm-deep, #3a2920);
    margin: 0 0 12px;
}
.fi-filter-drawer__body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fi-filter-drawer__body li {
    margin: 0;
    border-bottom: 1px solid rgba(58, 41, 32, 0.06);
}
.fi-filter-drawer__body li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: var(--fi-warm-deep, #3a2920);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.fi-filter-drawer__body li a:hover {
    color: var(--fi-green, #87af4d);
    padding-left: 4px;
}
.fi-filter-drawer__body li .count {
    color: var(--fi-mid, #6e5a4c);
    font-size: 12px;
}
.fi-filter-drawer__foot {
    padding: 16px 20px;
    border-top: 1px solid rgba(58, 41, 32, 0.08);
    background: #fff;
    display: flex;
    gap: 12px;
}
.fi-filter-drawer__foot .fi-filter-drawer__reset,
.fi-filter-drawer__foot .fi-filter-drawer__apply {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fi-filter-drawer__reset {
    background: transparent;
    color: var(--fi-warm-deep, #3a2920);
    border: 1px solid rgba(58, 41, 32, 0.2) !important;
}
.fi-filter-drawer__apply {
    background: var(--fi-green, #87af4d);
    color: #fff;
}
.fi-filter-drawer__apply:hover { background: var(--fi-warm-deep, #3a2920); }

/* Hide the Avada-built "Інформація про доставку" heading +
   shipping calculator block on the cart. Nova Post handles
   city/street at checkout; no in-cart shipping calc. */
.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart form.woocommerce-shipping-calculator,
.woocommerce-cart .avada-shipping-calculator-form,
.woocommerce-cart [class*="shipping-calculator"],
.woocommerce-cart .fusion-title:has(+ .woocommerce-shipping-calculator),
.woocommerce-cart h1:has(+ form.woocommerce-shipping-calculator),
.woocommerce-cart h2:has(+ form.woocommerce-shipping-calculator),
.woocommerce-cart h3:has(+ form.woocommerce-shipping-calculator),
.woocommerce-cart h4:has(+ form.woocommerce-shipping-calculator),
.woocommerce-cart h5:has(+ form.woocommerce-shipping-calculator),
.woocommerce-cart .fi-shipping-calc-block,
.fi-shipping-calc-block {
    display: none !important;
}

/* Coupon row — match input styling to the rest of the brand. */
.woocommerce-cart .coupon input[type="text"],
.woocommerce-cart #coupon_code,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-shipping-calculator input[type="text"],
.woocommerce-shipping-calculator select,
.woocommerce-shipping-calculator .select2-selection {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(58, 41, 32, 0.18) !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 42px !important;
}
.woocommerce-shipping-calculator .select2-selection__rendered {
    line-height: 42px !important;
}
.woocommerce-shipping-calculator .select2-selection__arrow {
    height: 42px !important;
}

/* Shipping calculator "Оновити" button — was 32px tall and
   only ~107px wide, leaving an awkward gap next to the
   38px postal input. Match the input height and fill the
   column so the row reads as a balanced two-cell grid. */
.woocommerce-shipping-calculator .fusion-shipping-update-totals,
.woocommerce-shipping-calculator p.fusion-shipping-update-totals {
    display: flex;
    align-items: stretch;
}
.woocommerce-shipping-calculator button[name="calc_shipping"],
.woocommerce-shipping-calculator .fusion-shipping-update-totals .fusion-button {
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 24px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    background-color: var(--fi-green, #87af4d) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    --button_gradient_top_color: var(--fi-green, #87af4d) !important;
    --button_gradient_bottom_color: var(--fi-green, #87af4d) !important;
    --button_gradient_top_color_hover: var(--fi-warm-deep, #3a2920) !important;
    --button_gradient_bottom_color_hover: var(--fi-warm-deep, #3a2920) !important;
    --button_padding-top: 0px !important;
    --button_padding-bottom: 0px !important;
    --button_padding-left: 24px !important;
    --button_padding-right: 24px !important;
}
.woocommerce-shipping-calculator button[name="calc_shipping"]:hover {
    background-color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce form .form-row textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
}
.woocommerce-cart #coupon_code:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--fi-green, #87af4d);
    box-shadow: 0 0 0 3px rgba(135, 175, 77, 0.18);
    outline: none;
}

/* Cross-sells / related — bulletproof off-brand red kill,
   plus consistent meta typography with the shop archive. */
.cross-sells ul.products li.product .price,
.cross-sells ul.products li.product .price .amount,
.cross-sells ul.products li.product .price .woocommerce-Price-amount,
.cross-sells ul.products li.product .price .woocommerce-Price-currencySymbol,
.cross-sells .price,
.cross-sells .price .amount {
    color: var(--fi-green, #87af4d) !important;
}
.cross-sells > h2,
.cross-sells h2 {
    font-size: 22px !important;
    color: var(--fi-warm-deep, #3a2920);
    font-weight: 600;
    margin: 56px 0 24px;
    letter-spacing: -0.2px;
}

/* =========================================================
   Product card actions — unify every place a card appears
   (shop archive, PDP "Доповніть образ" upsells, PDP "related",
   cart "Можливо, вас зацікавить" cross-sells, the homepage
   Avada-built fusion-woo-products-tb carousel).
   - "Оберіть опції" / "Додати в кошик"  → primary brand pill
   - "Швидкий перегляд"                  → secondary outlined
   - "Детальніше"                        → hidden (the image
     and title already link to the PDP — three CTAs per
     card was the original noise)
   ========================================================= */
.fusion-woo-related-tb,
.fusion-woo-upsells-tb,
.fusion-woo-products-tb,
.cross-sells,
.related.products,
.upsells.products,
ul.products {
    --fi-card-action-h: 42px;
}
.fusion-woo-related-tb .product .show_details_button,
.fusion-woo-upsells-tb .product .show_details_button,
.fusion-woo-products-tb .product .show_details_button,
.cross-sells .product .show_details_button,
.related.products .product .show_details_button,
.upsells.products .product .show_details_button,
ul.products .product .show_details_button {
    display: none !important;
}

/* The card actions live inside `.fusion-carousel-meta` or
   inline in the loop; both render via the same anchors. */
.fusion-woo-related-tb .product .add_to_cart_button,
.fusion-woo-upsells-tb .product .add_to_cart_button,
.fusion-woo-products-tb .product .add_to_cart_button,
.cross-sells .product .add_to_cart_button,
.related.products .product .add_to_cart_button,
.upsells.products .product .add_to_cart_button,
ul.products .product .add_to_cart_button,
.fusion-woo-related-tb .product a.button.product_type_variable,
.fusion-woo-related-tb .product a.button.product_type_simple,
.fusion-woo-related-tb .product a.button.product_type_external,
.fusion-woo-related-tb .product a.button.product_type_grouped,
.cross-sells .product a.button.product_type_variable,
.cross-sells .product a.button.product_type_simple,
.related.products .product a.button.product_type_variable,
.related.products .product a.button.product_type_simple,
.upsells.products .product a.button.product_type_variable,
.upsells.products .product a.button.product_type_simple {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--fi-card-action-h, 42px) !important;
    padding: 0 16px !important;
    margin-top: 12px !important;
    background-color: var(--fi-green, #87af4d) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fusion-woo-related-tb .product .add_to_cart_button:hover,
.fusion-woo-upsells-tb .product .add_to_cart_button:hover,
.fusion-woo-products-tb .product .add_to_cart_button:hover,
.cross-sells .product .add_to_cart_button:hover,
.related.products .product .add_to_cart_button:hover,
.upsells.products .product .add_to_cart_button:hover,
ul.products .product .add_to_cart_button:hover {
    background-color: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
}
/* Hide the leading icon-font glyph (the cog ⚙) that Avada
   inlines before the "Оберіть опції" / "Додати в кошик" text;
   it crowds the button and clashes with the brand. */
.fusion-woo-related-tb .product .add_to_cart_button:before,
.fusion-woo-upsells-tb .product .add_to_cart_button:before,
.fusion-woo-products-tb .product .add_to_cart_button:before,
.cross-sells .product .add_to_cart_button:before,
.related.products .product .add_to_cart_button:before,
.upsells.products .product .add_to_cart_button:before,
ul.products .product .add_to_cart_button:before {
    display: none !important;
    content: none !important;
}

/* Quick-view link below the primary button. Outlined,
   secondary visual weight. */
.fusion-woo-related-tb .product .fusion-quick-view,
.fusion-woo-upsells-tb .product .fusion-quick-view,
.fusion-woo-products-tb .product .fusion-quick-view,
.cross-sells .product .fusion-quick-view,
.related.products .product .fusion-quick-view,
.upsells.products .product .fusion-quick-view,
ul.products .product .fusion-quick-view {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px !important;
    padding: 0 12px !important;
    margin-top: 8px !important;
    background: transparent !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    border: 1px solid rgba(58, 41, 32, 0.2) !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fusion-woo-related-tb .product .fusion-quick-view:hover,
.fusion-woo-upsells-tb .product .fusion-quick-view:hover,
.fusion-woo-products-tb .product .fusion-quick-view:hover,
.cross-sells .product .fusion-quick-view:hover,
.related.products .product .fusion-quick-view:hover,
.upsells.products .product .fusion-quick-view:hover,
ul.products .product .fusion-quick-view:hover {
    background: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
    border-color: var(--fi-warm-deep, #3a2920) !important;
}
.fusion-woo-related-tb .product .fusion-quick-view:before,
.cross-sells .product .fusion-quick-view:before,
.related.products .product .fusion-quick-view:before,
.upsells.products .product .fusion-quick-view:before,
.fusion-woo-products-tb .product .fusion-quick-view:before {
    display: none !important;
    content: none !important;
}

/* Mobile adjustments — keep buttons readable on small cards. */
@media (max-width: 600px) {
    .fusion-woo-related-tb,
    .fusion-woo-upsells-tb,
    .fusion-woo-products-tb,
    .cross-sells,
    .related.products,
    .upsells.products,
    ul.products {
        --fi-card-action-h: 40px;
    }
    .fusion-woo-related-tb .product .add_to_cart_button,
    .cross-sells .product .add_to_cart_button,
    .related.products .product .add_to_cart_button {
        font-size: 11px !important;
        letter-spacing: 0.6px !important;
        padding: 0 10px !important;
    }
    .fusion-woo-related-tb .product .fusion-quick-view,
    .cross-sells .product .fusion-quick-view,
    .related.products .product .fusion-quick-view {
        height: 34px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   Desktop product card polish — applies to every place a
   product card appears (shop archive, "Вам може сподобатись"
   upsells carousel, related, cross-sells, Avada theme-builder
   product carousels).

   Goals:
   - Title left-aligned, reserved at 2 lines so prices line up
     across cards even when the name wraps to one line only.
   - Price left-aligned, sitting at the same Y on every card.
   - Action row is a balanced two-button flex grid (equal
     widths, equal heights, no float misalignment).
   ========================================================= */
@media (min-width: 761px) {

    /* Card content: left-align everything below the image. */
    .fusion-woo-related-tb .product .fusion-product-content,
    .fusion-woo-upsells-tb .product .fusion-product-content,
    .fusion-woo-products-tb .product .fusion-product-content,
    .cross-sells .product .fusion-product-content,
    .related.products .product .fusion-product-content,
    .upsells.products .product .fusion-product-content,
    ul.products .product .fusion-product-content,
    .fusion-woo-related-tb .product .product-details-container,
    .fusion-woo-upsells-tb .product .product-details-container,
    .fusion-woo-products-tb .product .product-details-container,
    .cross-sells .product .product-details-container,
    .related.products .product .product-details-container,
    .upsells.products .product .product-details-container,
    ul.products .product .product-details-container {
        text-align: left !important;
    }

    /* Reserve two lines for the title regardless of length so the
       price + buttons rows align across the whole carousel. */
    .fusion-woo-related-tb .product .product-title,
    .fusion-woo-upsells-tb .product .product-title,
    .fusion-woo-products-tb .product .product-title,
    .cross-sells .product .product-title,
    .related.products .product .product-title,
    .upsells.products .product .product-title,
    ul.products .product .product-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.35 !important;
        min-height: calc(2 * 1.35em) !important;
        max-height: calc(2 * 1.35em);
        text-align: left !important;
        margin: 0 0 6px !important;
    }
    .fusion-woo-related-tb .product .product-title a,
    .fusion-woo-upsells-tb .product .product-title a,
    .fusion-woo-products-tb .product .product-title a,
    .cross-sells .product .product-title a,
    .related.products .product .product-title a,
    .upsells.products .product .product-title a,
    ul.products .product .product-title a {
        text-align: left !important;
    }

    /* Price + rating row — left-aligned, fixed bottom margin
       so the action row starts at a predictable Y. Flex with
       a generous gap so the star rating doesn't crowd the price. */
    .fusion-woo-related-tb .product .fusion-price-rating,
    .fusion-woo-upsells-tb .product .fusion-price-rating,
    .fusion-woo-products-tb .product .fusion-price-rating,
    .cross-sells .product .fusion-price-rating,
    .related.products .product .fusion-price-rating,
    .upsells.products .product .fusion-price-rating,
    ul.products .product .fusion-price-rating {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        margin: 0 0 14px !important;
    }
    .fusion-woo-related-tb .product .fusion-price-rating .price,
    .fusion-woo-upsells-tb .product .fusion-price-rating .price,
    .fusion-woo-products-tb .product .fusion-price-rating .price,
    .cross-sells .product .fusion-price-rating .price,
    .related.products .product .fusion-price-rating .price,
    .upsells.products .product .fusion-price-rating .price,
    ul.products .product .fusion-price-rating .price {
        text-align: left !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* Smaller star rating in card view. WooCommerce sizes
       .star-rating via font-size (1.4em-ish default); knock it
       down so the stars read as a quiet quality cue, not a
       second headline competing with the price. */
    .fusion-woo-related-tb .product .fusion-price-rating .star-rating,
    .fusion-woo-upsells-tb .product .fusion-price-rating .star-rating,
    .fusion-woo-products-tb .product .fusion-price-rating .star-rating,
    .cross-sells .product .fusion-price-rating .star-rating,
    .related.products .product .fusion-price-rating .star-rating,
    .upsells.products .product .fusion-price-rating .star-rating,
    ul.products .product .fusion-price-rating .star-rating {
        font-size: 11px !important;
        margin: 0 !important;
    }

    /* Action row — flex grid, equal columns, equal heights. */
    .fusion-woo-related-tb .product .product-buttons,
    .fusion-woo-upsells-tb .product .product-buttons,
    .fusion-woo-products-tb .product .product-buttons,
    .cross-sells .product .product-buttons,
    .related.products .product .product-buttons,
    .upsells.products .product .product-buttons,
    ul.products .product .product-buttons {
        padding: 0 !important;
        border: 0 !important;
    }
    /* Action row — CSS Grid, two equal columns. Grid is more
       robust than flex here: even if some other rule with high
       specificity sets `display: inline-flex` or width on the
       buttons, the grid track sizing wins. The two visible
       anchors land in the two columns; .show_details_button
       stays display:none from the rule further up so it doesn't
       claim a track. */
    .fusion-woo-related-tb .product .product-buttons-container.clearfix,
    .fusion-woo-upsells-tb .product .product-buttons-container.clearfix,
    .fusion-woo-products-tb .product .product-buttons-container.clearfix,
    .cross-sells .product .product-buttons-container.clearfix,
    .related.products .product .product-buttons-container.clearfix,
    .upsells.products .product .product-buttons-container.clearfix,
    ul.products .product .product-buttons-container.clearfix,
    .fusion-woo-related-tb .product .product-buttons-container,
    .fusion-woo-upsells-tb .product .product-buttons-container,
    .fusion-woo-products-tb .product .product-buttons-container,
    .cross-sells .product .product-buttons-container,
    .related.products .product .product-buttons-container,
    .upsells.products .product .product-buttons-container,
    ul.products .product .product-buttons-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 42px !important;
        grid-auto-rows: 0 !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* The .clearfix class adds ::before/::after pseudo-elements
       (display: table / clear: both) that grid treats as real
       grid items — they were claiming cells under our two buttons
       and producing a phantom empty row. Suppress them. */
    .fusion-woo-related-tb .product .product-buttons-container::before,
    .fusion-woo-upsells-tb .product .product-buttons-container::before,
    .fusion-woo-products-tb .product .product-buttons-container::before,
    .cross-sells .product .product-buttons-container::before,
    .related.products .product .product-buttons-container::before,
    .upsells.products .product .product-buttons-container::before,
    ul.products .product .product-buttons-container::before,
    .fusion-woo-related-tb .product .product-buttons-container::after,
    .fusion-woo-upsells-tb .product .product-buttons-container::after,
    .fusion-woo-products-tb .product .product-buttons-container::after,
    .cross-sells .product .product-buttons-container::after,
    .related.products .product .product-buttons-container::after,
    .upsells.products .product .product-buttons-container::after,
    ul.products .product .product-buttons-container::after {
        display: none !important;
        content: none !important;
    }

    /* Primary CTA pinned to grid column 1, row 1.
       fusion-quick-view pinned to column 2, row 1.
       Explicit cell placement is the only way to ignore the noise
       siblings (screen-reader-text span, show_details_button) that
       sit between the two visible buttons in the source — without
       this, source-order grid placement was sending the second
       visible button to row 2 because .screen-reader-text was
       claiming the col 2 row 1 cell on this theme. */
    .fusion-woo-related-tb .product .product-buttons-container > a.add_to_cart_button,
    .fusion-woo-upsells-tb .product .product-buttons-container > a.add_to_cart_button,
    .fusion-woo-products-tb .product .product-buttons-container > a.add_to_cart_button,
    .cross-sells .product .product-buttons-container > a.add_to_cart_button,
    .related.products .product .product-buttons-container > a.add_to_cart_button,
    .upsells.products .product .product-buttons-container > a.add_to_cart_button,
    ul.products .product .product-buttons-container > a.add_to_cart_button,
    .fusion-woo-related-tb .product .product-buttons-container > a.button.product_type_variable,
    .fusion-woo-upsells-tb .product .product-buttons-container > a.button.product_type_variable,
    .fusion-woo-products-tb .product .product-buttons-container > a.button.product_type_variable,
    .cross-sells .product .product-buttons-container > a.button.product_type_variable,
    .related.products .product .product-buttons-container > a.button.product_type_variable,
    .upsells.products .product .product-buttons-container > a.button.product_type_variable,
    ul.products .product .product-buttons-container > a.button.product_type_variable,
    .fusion-woo-related-tb .product .product-buttons-container > a.button.product_type_simple,
    .fusion-woo-upsells-tb .product .product-buttons-container > a.button.product_type_simple,
    .fusion-woo-products-tb .product .product-buttons-container > a.button.product_type_simple,
    .cross-sells .product .product-buttons-container > a.button.product_type_simple,
    .related.products .product .product-buttons-container > a.button.product_type_simple,
    .upsells.products .product .product-buttons-container > a.button.product_type_simple,
    ul.products .product .product-buttons-container > a.button.product_type_simple {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 42px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }
    .fusion-woo-related-tb .product .product-buttons-container > a.fusion-quick-view,
    .fusion-woo-upsells-tb .product .product-buttons-container > a.fusion-quick-view,
    .fusion-woo-products-tb .product .product-buttons-container > a.fusion-quick-view,
    .cross-sells .product .product-buttons-container > a.fusion-quick-view,
    .related.products .product .product-buttons-container > a.fusion-quick-view,
    .upsells.products .product .product-buttons-container > a.fusion-quick-view,
    ul.products .product .product-buttons-container > a.fusion-quick-view {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 42px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        justify-self: stretch !important;
    }

    /* Hide all non-primary, non-quick-view children from the grid.
       Avada's source order is:
         add_to_cart_button → screen-reader-text → show_details_button → fusion-quick-view
       Without these defenses, .screen-reader-text (a sr-only span
       that some sites style without position: absolute) would grab
       col 2 row 1 and push fusion-quick-view to row 2. */
    .fusion-woo-related-tb .product .product-buttons-container > .screen-reader-text,
    .fusion-woo-upsells-tb .product .product-buttons-container > .screen-reader-text,
    .fusion-woo-products-tb .product .product-buttons-container > .screen-reader-text,
    .cross-sells .product .product-buttons-container > .screen-reader-text,
    .related.products .product .product-buttons-container > .screen-reader-text,
    .upsells.products .product .product-buttons-container > .screen-reader-text,
    ul.products .product .product-buttons-container > .screen-reader-text,
    .fusion-woo-related-tb .product .product-buttons-container > a.show_details_button,
    .fusion-woo-upsells-tb .product .product-buttons-container > a.show_details_button,
    .fusion-woo-products-tb .product .product-buttons-container > a.show_details_button,
    .cross-sells .product .product-buttons-container > a.show_details_button,
    .related.products .product .product-buttons-container > a.show_details_button,
    .upsells.products .product .product-buttons-container > a.show_details_button,
    ul.products .product .product-buttons-container > a.show_details_button {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   PDP gallery — lock the main image slot to 500 × 750 (2:3
   portrait) so every slide reserves the same space.

   Source images on this site are uploaded at 500x750. Without
   an explicit aspect-ratio on the slide, FlexSlider's
   `smoothHeight` animates the gallery height between slides
   based on each slide's natural height — and a video slide
   (which has no intrinsic size before metadata loads) was
   collapsing the gallery, briefly mis-sizing the surrounding
   layout. Locking each slide to 2:3 makes smoothHeight a
   no-op, gives photos and the video the same footprint, and
   matches the design on both desktop and mobile.
   ========================================================= */
/* Cap the actual image slot to the source's native 500×750 on
   desktop. Constraining the outer `.woocommerce-product-gallery`
   doesn't work cleanly: the gallery includes the thumbnail strip
   (~60px), so capping the outer to 500 shrinks the image to ~440.
   And capping the INNER `.woocommerce-product-gallery__image`
   directly breaks FlexSlider, which computes slide spacing from
   the viewport width.
   Solution: cap `.flex-viewport` (FlexSlider's inner window). The
   slider still uses this width for slide math, so spacing stays
   consistent — and the inner image fills it via the aspect-ratio
   rule below, hitting 500×750 exactly. The thumbnail strip lives
   outside the viewport and isn't affected. */
@media (min-width: 761px) {
    body.single-product .woocommerce-product-gallery .flex-viewport {
        max-width: 500px !important;
    }
}
.single-product .woocommerce-product-gallery__image {
    aspect-ratio: 500 / 750;
    overflow: hidden;
    position: relative;
}
.single-product .woocommerce-product-gallery__image > a:not(.avada-product-gallery-lightbox-trigger) {
    display: block;
    width: 100%;
    height: 100%;
}
.single-product .woocommerce-product-gallery__image > a > img,
.single-product .woocommerce-product-gallery__image > img,
.single-product .woocommerce-product-gallery__image .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Lightbox trigger is an empty overlay — pin it to the slot
   so its bounding box doesn't push slide height. */
.single-product .woocommerce-product-gallery__image > a.avada-product-gallery-lightbox-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================
   "Доповніть образ" / fusion_post_cards product carousel —
   reserve the 2:3 (500×750) image slot.

   Same bug class as the PDP gallery above: Avada lazy-loads
   the image with a transparent SVG placeholder in `srcset`
   and the real URL in `data-srcset`. The Swiper carousel
   initializes BEFORE the swap; on mobile (especially under
   adblock or slow connections) the slide height is computed
   while the placeholder reports near-zero painted size, the
   slide bakes a tiny height, and the negative-margin cart-
   icon row collapses on top of a thin colored strip — the
   exact failure mode shown in user-reported mobile screenshots.

   Locking the image slot to 500/750 makes the slot reserve
   its full height upfront, regardless of when the lazy image
   resolves. Scoped to `.swiper-slide.product` so non-product
   fusion_post_cards usages (blog cards, etc.) are unaffected.
   ========================================================= */
.fusion-post-cards .swiper-slide.product .fusion-post-card-image,
.fusion-post-cards .swiper-slide.product .fusion-post-card-image .woocommerce-product-gallery__image,
.fusion-post-cards .swiper-slide.product .fusion-post-card-image .fusion-image-wrapper {
    aspect-ratio: 500 / 750;
    position: relative;
}
.fusion-post-cards .swiper-slide.product .fusion-post-card-image .woocommerce-product-gallery__image,
.fusion-post-cards .swiper-slide.product .fusion-post-card-image .fusion-image-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.fusion-post-cards .swiper-slide.product .fusion-post-card-image .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100%;
}
.fusion-post-cards .swiper-slide.product .fusion-post-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================================================
   Review form star rating input — replace WooCommerce's
   default rendering (the WooCommerce icon font is missing
   on this site, so the picker was just showing the link
   labels "1 з 5 зірок", "2 з 5 зірок", etc.). Modern, clean
   row of clickable star glyphs with hover preview and
   click-to-persist. Brand terracotta as the active color.
   Uses :has() for "stars before the hovered star" — fully
   supported in evergreen browsers.
   ========================================================= */
#commentform .comment-form-rating p.stars,
.comment-form-rating p.stars,
form.comment-form p.stars,
p.stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}
#commentform .comment-form-rating p.stars > span,
.comment-form-rating p.stars > span,
form.comment-form p.stars > span,
p.stars > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    direction: ltr !important;
}
#commentform .comment-form-rating p.stars a,
.comment-form-rating p.stars a,
form.comment-form p.stars a,
p.stars a {
    /* Hide the WP-emitted text label ("1 з 5 зірок", etc.). */
    color: transparent !important;
    text-shadow: none !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 9999em !important;
}
#commentform .comment-form-rating p.stars a::before,
.comment-form-rating p.stars a::before,
form.comment-form p.stars a::before,
p.stars a::before {
    content: '\2605'; /* ★ */
    font-family: 'Apple Color Emoji', 'Segoe UI Symbol', 'Noto Sans Symbols', Arial, sans-serif !important;
    color: rgba(58, 41, 32, 0.18) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0 !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    pointer-events: none;
}
#commentform .comment-form-rating p.stars a:focus-visible,
.comment-form-rating p.stars a:focus-visible,
form.comment-form p.stars a:focus-visible,
p.stars a:focus-visible {
    outline: 2px solid var(--fi-terracotta, #c47a55);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Persisted state — WC's JS adds .active to the chosen star
   and .selected to the parent <p>. Highlight the active star
   AND every star before it. */
#commentform .comment-form-rating p.stars a.active::before,
.comment-form-rating p.stars a.active::before,
form.comment-form p.stars a.active::before,
p.stars a.active::before,
#commentform .comment-form-rating p.stars a:has(~ a.active)::before,
.comment-form-rating p.stars a:has(~ a.active)::before,
form.comment-form p.stars a:has(~ a.active)::before,
p.stars a:has(~ a.active)::before {
    color: var(--fi-terracotta, #c47a55) !important;
}

/* Hover preview — clear all stars first, then paint the
   hovered star and every preceding sibling. Overrides the
   .active state so the user can re-rate before committing. */
#commentform .comment-form-rating p.stars:hover a::before,
.comment-form-rating p.stars:hover a::before,
form.comment-form p.stars:hover a::before,
p.stars:hover a::before {
    color: rgba(58, 41, 32, 0.18) !important;
}
#commentform .comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:hover::before,
form.comment-form p.stars a:hover::before,
p.stars a:hover::before,
#commentform .comment-form-rating p.stars a:has(~ a:hover)::before,
.comment-form-rating p.stars a:has(~ a:hover)::before,
form.comment-form p.stars a:has(~ a:hover)::before,
p.stars a:has(~ a:hover)::before {
    color: var(--fi-terracotta, #c47a55) !important;
    transform: scale(1.06);
}

/* =========================================================
   Account / "Мій обліковий запис".
   - Center the login + register forms in a card so the page
     doesn't feel like a single thin form on a wide white band.
   - Match input + submit button styling with contacts/cart.
   - Tidy the dashboard navigation pills when logged in.
   ========================================================= */
.woocommerce-account .woocommerce {
    max-width: 1160px;
    margin: 0 auto;
}
.woocommerce-account .u-columns,
.woocommerce-account .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 100% !important;
    max-width: none !important;
}
.woocommerce-account .u-columns > .u-column1,
.woocommerce-account .u-columns > .u-column2,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 2px;
    padding: 36px 36px 40px;
}
.woocommerce-account .u-columns h2,
.woocommerce-account .col2-set h2 {
    margin: 0 0 24px;
    font-size: 22px;
    color: var(--fi-warm-deep, #3a2920);
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
    padding-bottom: 16px;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    padding: 0;
    border: 0;
}
.woocommerce-account .woocommerce-form-login p,
.woocommerce-account .woocommerce-form-register p {
    margin: 0 0 16px;
}
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 13px;
}
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"] {
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(58, 41, 32, 0.18) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce-account input:focus,
.woocommerce-account textarea:focus {
    border-color: var(--fi-green, #87af4d) !important;
    box-shadow: 0 0 0 3px rgba(135, 175, 77, 0.18);
    outline: none;
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.fusion-button.button-flat,
.woocommerce-account button[type="submit"].button {
    height: 48px !important;
    min-width: 180px;
    padding: 0 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    line-height: 48px !important;
    border-radius: 2px !important;
    background-color: var(--fi-green, #87af4d) !important;
    color: #fff !important;
    border: 0;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account button.fusion-button.button-flat:hover {
    background-color: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a {
    color: var(--fi-mid, #6e5a4c);
    text-decoration: none;
    border-bottom: 1px solid rgba(58, 41, 32, 0.2);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.woocommerce-account .lost_password a:hover {
    color: var(--fi-green, #87af4d);
    border-color: var(--fi-green, #87af4d);
}

/* Account dashboard navigation — clean pills. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 2px;
    padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid rgba(58, 41, 32, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 14px 18px;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--fi-cream, #fcf8f3);
    color: var(--fi-green, #87af4d);
    padding-left: 22px;
}
.woocommerce-account .woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 2px;
    padding: 32px 36px 36px;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: var(--fi-warm-deep, #3a2920);
}

/* Dashboard table (orders, addresses) — same hairline style. */
.woocommerce-account table.shop_table,
.woocommerce-account .woocommerce-orders-table {
    border: 1px solid rgba(58, 41, 32, 0.08) !important;
    border-radius: 2px;
    background: #fff;
}
.woocommerce-account table.shop_table th {
    background: var(--fi-cream, #fcf8f3) !important;
    color: var(--fi-warm-deep, #3a2920);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px !important;
}
.woocommerce-account table.shop_table td {
    padding: 16px !important;
    border-top: 1px solid rgba(58, 41, 32, 0.06) !important;
    color: var(--fi-warm-deep, #3a2920);
}

/* Mobile — stack the login/register cards. */
@media (max-width: 760px) {
    .woocommerce-account .u-columns,
    .woocommerce-account .col2-set {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .woocommerce-account .u-columns > .u-column1,
    .woocommerce-account .u-columns > .u-column2,
    .woocommerce-account .col2-set .col-1,
    .woocommerce-account .col2-set .col-2 {
        padding: 24px 20px 28px;
    }
}

/* =========================================================
   WooCommerce notice banners (success / info / error).
   Replace the washed-out 85% green band with a solid brand
   surface, give the action link a real outlined-button look,
   and bring the check icon back (the SVG ships at 0×0).
   ========================================================= */
.woocommerce-notices-wrapper .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 18px 24px !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 24px rgba(58, 41, 32, 0.08);
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 24px;
}
.wc-block-components-notice-banner.is-success {
    background: var(--fi-green, #87af4d) !important;
    color: #fff !important;
}
.wc-block-components-notice-banner.is-info {
    background: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
}
.wc-block-components-notice-banner.is-error {
    background: var(--fi-terracotta, #c47a55) !important;
    color: #fff !important;
}

/* Hide the WooCommerce-block leading SVG (it's display:none
   by default in the block CSS anyway) and instead promote
   the Avada icon-font <i> to a circular check badge. */
.wc-block-components-notice-banner > svg { display: none !important; }
.wc-block-components-notice-banner .fusion-woo-notices-tb-icon,
.wc-block-components-notice-banner i.icon-classic-shop-check-circle-solid {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    line-height: 1;
}

.wc-block-components-notice-banner__content {
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}
.wc-block-components-notice-banner .wc-notices-text {
    flex: 1 1 auto;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* "Переглянути кошик" + similar CTA links inside the banner
   become a proper outlined pill that sits on the colored
   surface without competing with the message. */
/* Button inside the notice banner: solid white pill with
   warm-deep text — gives full contrast on green/dark/terra
   notice bgs and beats any WC default color rule. */
.wc-block-components-notice-banner a.button,
.wc-block-components-notice-banner a.wc-forward,
.wc-block-components-notice-banner a.fusion-button,
.wc-block-components-notice-banner a.woocommerce-Button,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a,
body .woocommerce-account .wc-block-components-notice-banner a,
body .woocommerce-account .wc-block-components-notice-banner a.button,
body .woocommerce-account .wc-block-components-notice-banner a.woocommerce-Button {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px !important;
    padding: 0 18px !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wc-block-components-notice-banner a.button:hover,
.wc-block-components-notice-banner a.wc-forward:hover,
.wc-block-components-notice-banner a.fusion-button:hover,
.wc-block-components-notice-banner a.woocommerce-Button:hover,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a:hover,
body .woocommerce-account .wc-block-components-notice-banner a:hover {
    background: var(--fi-green, #87af4d) !important;
    background-color: var(--fi-green, #87af4d) !important;
    color: #fff !important;
}

/* Legacy classic WooCommerce notices (.woocommerce-message,
   .woocommerce-info, .woocommerce-error) — same treatment so
   non-block contexts (PDP add-to-cart, login errors) match. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 18px 24px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 24px rgba(58, 41, 32, 0.08);
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: var(--fi-warm-deep, #3a2920) !important;
}
.woocommerce-message {
    background: var(--fi-green, #87af4d) !important;
}
.woocommerce-error {
    background: var(--fi-terracotta, #c47a55) !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.woocommerce-message a.button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.button,
.woocommerce-info a.wc-forward,
.woocommerce-error a.button {
    margin-left: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 2px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 38px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
    background: #fff !important;
    color: var(--fi-warm-deep, #3a2920) !important;
}
@media (max-width: 600px) {
    .wc-block-components-notice-banner,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        flex-wrap: wrap;
        padding: 16px 18px !important;
    }
    .wc-block-components-notice-banner__content {
        gap: 12px;
    }
    .wc-block-components-notice-banner a.button,
    .wc-block-components-notice-banner a.wc-forward,
    .woocommerce-message a.button,
    .woocommerce-info a.button,
    .woocommerce-error a.button {
        margin-left: 0 !important;
        width: 100%;
    }
}
/* =========================================================
 * Клієнту page side nav — flush anchor list (no gaps).
 * ========================================================= */
.client-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.client-nav__title {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(58, 41, 32, 0.5);
}
.client-nav a {
    display: block;
    margin: 0;
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--fi-warm-deep, #3a2920);
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.1);
    border-bottom: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.client-nav a:first-of-type { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.client-nav a:last-of-type  { border-bottom: 1px solid rgba(58, 41, 32, 0.1); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.client-nav a:hover {
    background: var(--fi-sand, #efe1cc);
    color: var(--fi-warm-deep, #3a2920);
}
.client-nav a.is-active {
    background: var(--fi-warm-deep, #3a2920);
    color: #fff;
    border-color: var(--fi-warm-deep, #3a2920);
}

/* =========================================================
   FIX 1 — Product card image: consistent 2:3 aspect ratio.
   All product photos are 500×750. Avada's swiper equalises
   slide heights, stretching shorter-image cards and leaving
   cream empty space above the photo. Force the image link
   to a fixed portrait ratio and cover-fill it so all cards
   look the same without cropping the subject.
   ========================================================= */
a.product-images {
    display: block !important;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    position: relative !important;
    flex-shrink: 0;
}
.featured-image.crossfade-images {
    display: block !important;
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    white-space: normal !important;
}
.featured-image.crossfade-images img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: cover !important;
    object-position: top center !important;
}

/* =========================================================
   FIX 2 — Product card bottom: tighter meta + buttons on
   mobile; hide quick-view (CSS only — Nastya can restore
   it from theme settings later if needed).
   ========================================================= */
@media (max-width: 760px) {
    /* Hide quick-view button entirely on mobile — high-specificity selectors needed */
    .fusion-woo-related-tb .product .fusion-quick-view,
    .fusion-woo-upsells-tb .product .fusion-quick-view,
    .fusion-woo-products-tb .product .fusion-quick-view,
    .cross-sells .product .fusion-quick-view,
    .related.products .product .fusion-quick-view,
    .upsells.products .product .fusion-quick-view,
    ul.products .product .fusion-quick-view {
        display: none !important;
    }

    /* ── Product card bottom: remove excess padding, dividers, min-heights ── */

    /* Remove Avada's height-equalisation min-height — leaves dead space below price */
    ul.products .product .product-details-container,
    ul.products .product-details-container {
        min-height: 0 !important;
        padding: 8px 12px 6px !important;
    }

    /* Kill the separator element and all its margin — sep-none should be display:none
       but still carries margin-top/bottom (14px + 15px = 29px) even when hidden */
    ul.products .product .fusion-content-sep,
    ul.products .product .product-buttons .fusion-content-sep {
        display: none !important;
        margin: 0 !important;
    }

    /* Remove Avada's 15px padding-top on the button area, kill the border that
       draws the divider line (border-color comes from --timeline_color) */
    ul.products .product .product-buttons {
        padding: 0 !important;
        border: none !important;
    }
    ul.products .product .product-buttons-container {
        padding: 10px 12px 12px !important;
        border: none !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Title & price — compact */
    ul.products .product .product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
    }
    ul.products .product .fusion-price-rating {
        margin: 0 !important;
    }
    ul.products .product .fusion-price-rating .price {
        font-size: 13px !important;
    }

    /* Main CTA button — full-width, consistent height */
    ul.products .product .product-buttons-container .add_to_cart_button,
    ul.products .product .product-buttons-container .button.product_type_variable,
    ul.products .product .product-buttons-container .button.product_type_simple {
        width: 100% !important;
        text-align: center !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove icon pseudo-elements that add left padding on mobile */
    ul.products .product .product-buttons a:before {
        display: none !important;
        content: none !important;
    }
    ul.products .product .product-buttons a {
        padding-left: 0 !important;
    }
}

/* =========================================================
   FIX 3 — Cart notice button: guarantee visible dark text
   on the white button regardless of Avada/WC specificity.
   Also cover the classic .woocommerce-message variant where
   the button should be white-bordered on the green surface.
   ========================================================= */
/* Block notice (wc-block-components-notice-banner): white bg → dark text */
body .woocommerce-notices-wrapper .wc-block-components-notice-banner a,
body .woocommerce-notices-wrapper .wc-block-components-notice-banner a.button,
body .woocommerce-notices-wrapper .wc-block-components-notice-banner a.wc-forward,
body .wc-block-components-notice-banner a,
body .wc-block-components-notice-banner a.button,
body .wc-block-components-notice-banner a.wc-forward,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content a {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    -webkit-text-fill-color: var(--fi-warm-deep, #3a2920) !important;
    border: 0 !important;
    text-decoration: none !important;
}
body .woocommerce-notices-wrapper .wc-block-components-notice-banner a:hover,
body .wc-block-components-notice-banner a:hover {
    background: var(--fi-sand, #efe1cc) !important;
    background-color: var(--fi-sand, #efe1cc) !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    -webkit-text-fill-color: var(--fi-warm-deep, #3a2920) !important;
}
/* Classic notice (.woocommerce-message): transparent outlined on green */
body .woocommerce-notices-wrapper .woocommerce-message a.button,
body .woocommerce-notices-wrapper .woocommerce-message a.wc-forward,
body .woocommerce-message a.button,
body .woocommerce-message a.wc-forward {
    background: transparent !important;
    background-color: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}
body .woocommerce-message a.button:hover,
body .woocommerce-message a.wc-forward:hover {
    background: #fff !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    -webkit-text-fill-color: var(--fi-warm-deep, #3a2920) !important;
}

/* =========================================================
   FIX 4 — Search page: better layout on mobile and
   desktop; Ukrainian strings come from search.php override.
   ========================================================= */
.search-page-search-form {
    max-width: 680px;
    margin: 32px auto 40px !important;
    padding: 0 20px;
    text-align: center;
}
.search-page-search-form h1,
.search-page-search-form h2 {
    font-size: clamp(22px, 5vw, 34px) !important;
    font-weight: 600 !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    margin: 0 0 12px !important;
}
.search-page-search-form p {
    font-size: 15px;
    color: var(--fi-mid, #6e5a4c);
    margin: 0 0 24px !important;
    line-height: 1.6;
}
.search-page-search-form .searchform,
.search-page-search-form form[role="search"] {
    display: flex;
    gap: 0;
    border: 1.5px solid rgba(58, 41, 32, 0.18);
    border-radius: 2px;
    overflow: hidden;
}
.search-page-search-form input[type="search"] {
    flex: 1 1 auto;
    height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    font-size: 15px !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.search-page-search-form button[type="submit"],
.search-page-search-form input[type="submit"] {
    flex: 0 0 auto;
    height: 48px !important;
    padding: 0 20px !important;
    background: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
}
/* Results list */
.search-results .post-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 404 / no-results */
.error404 .search-page-search-form,
.search-no-results .search-page-search-form {
    margin-top: 48px !important;
}
@media (max-width: 600px) {
    .search-page-search-form {
        margin: 20px auto 28px !important;
    }
    .search-page-search-form input[type="search"] {
        height: 44px !important;
    }
    .search-page-search-form button[type="submit"],
    .search-page-search-form input[type="submit"] {
        height: 44px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   FIX 5 — Anchor scroll offset: sticky header is ~64px on
   mobile and ~70px on desktop. Adding scroll-margin-top to
   every target element (both injected sections and Avada
   fusion-menu-anchor divs) gives ~24px breathing room above
   the section heading after the header is accounted for.
   ========================================================= */
.fi-klientu-section,
.fusion-menu-anchor,
[id="delivery-payment"],
[id="returns-summary"],
[id="size-chart"],
[id="confidentiality"],
[id="returns"],
[id="offer"] {
    /* CSS fallback — JS overwrites with exact measured header height + 20px */
    scroll-margin-top: 100px;
}
@media (max-width: 760px) {
    .fi-klientu-section,
    .fusion-menu-anchor,
    [id="delivery-payment"],
    [id="returns-summary"],
    [id="size-chart"],
    [id="confidentiality"],
    [id="returns"],
    [id="offer"] {
        scroll-margin-top: 96px;
    }
}

/* =========================================================
   FIX 6 — Client-nav (Клієнту page policy navigation):
   - Desktop: vertical pill list stays but with sticky
     positioning so it travels with the reader.
   - Mobile: collapse to a horizontal scrollable chip row
     above the main content.
   ========================================================= */
/* Desktop sticky.
   Two layers stick on /klientu/:
   1) The Fusion column itself has `awb-sticky awb-sticky-large` (added
      manually in the page builder) which Avada renders as
      `position: sticky; top: var(--awb-sticky-offset, 0)`.
      With no offset set, the whole column slides UNDER our fixed header
      (.fusion-tb-header has z-index 10100). Push the column down to
      live just below the header by feeding it the same live header
      height var that feelit_klientu_nav_js measures.
   2) The inner `.client-nav` was given its own position: sticky as a
      fallback for pages where the column isn't sticky. Keep it for
      defence-in-depth — when the column already sticks at the right
      offset, this just no-ops. */
@media (min-width: 761px) {
    /* `.sticky-nav-col` is the custom class added in the page-builder.
       The page-id selector covers /klientu/ even when the custom class
       isn't applied (e.g. older DBs or after a builder reset). */
    .sticky-nav-col,
    body.page-id-20678 .awb-sticky {
        --awb-sticky-offset: calc(var(--fi-sticky-header-h, 88px) + 8px);
    }
    .client-nav {
        position: sticky;
        top: calc(var(--fi-sticky-header-h, 80px) + 8px);
    }
}
/* Mobile horizontal scroll — sticky chip row.
   Sticks the chip row just below the fixed header so the user can
   jump between sections from anywhere on the page. The horizontal
   `overflow-x: auto` on the same element doesn't conflict with
   `position: sticky`; sticky reads its scroll context from the
   nearest scrolling ancestor on the *block* axis (the page), not
   from any inline-axis overflow on `self`.
   The wrapper (.fusion-text containing .client-nav) sometimes has
   its own margin/padding — we override below to make sure the chip
   row visually pins flush against the header without a gap. */
@media (max-width: 760px) {
    .client-nav {
        position: sticky;
        top: var(--fi-sticky-header-h, 80px);
        z-index: 50;
        flex-direction: row !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px !important;
        /* Full-bleed: extend the bg to the viewport edges, regardless of
           how much padding the Avada column wrapper inherits. The
           `100vw + (-50vw + 50%)` math centers a viewport-wide box on
           our parent column's center. The inner padding restores chip
           positioning so the leftmost chip doesn't kiss the screen edge. */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding: 8px 16px !important;
        background: var(--awb-color1, #ffffff);
        box-shadow: 0 2px 6px rgba(58, 41, 32, 0.06);
        box-sizing: border-box;
    }
    .client-nav::-webkit-scrollbar { display: none; }
    .client-nav__title { display: none !important; }
    .client-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 14px !important;
        border: 1px solid rgba(58, 41, 32, 0.15) !important;
        border-radius: 20px !important;
        font-size: 13px !important;
    }
    .client-nav a:first-of-type,
    .client-nav a:last-of-type {
        border-radius: 20px !important;
        border: 1px solid rgba(58, 41, 32, 0.15) !important;
    }
    .client-nav a.is-active {
        border-color: var(--fi-warm-deep, #3a2920) !important;
        background: var(--fi-warm-deep, #3a2920) !important;
        color: #fff !important;
    }
    /* Ensure the parent wrappers don't clip the sticky child. */
    body.page-id-20678 .fusion-builder-column-7,
    body.page-id-20678 .fusion-builder-column-7 .fusion-column-wrapper,
    body.page-id-20678 .fusion-text-2 {
        overflow: visible !important;
    }
    /* The nav lives inside .fusion-text-2, whose content-box height
       equals just the nav height — i.e. the sticky travel distance is
       zero, so the chip row scrolls away with the page. `display:
       contents` removes .fusion-text-2 from the layout box tree (its
       children become children of .fusion-column-wrapper for layout),
       which extends the sticky range to the full content column. */
    body.page-id-20678 .fusion-text-2 {
        display: contents;
    }
}

/* =========================================================
 * Hide "Швидкий перегляд" (Quick View) button on mobile.
 * Must use the same high-specificity selectors as the show
 * rules above (ul.products .product .fusion-quick-view has
 * specificity 0,3,0) so that display:none wins.
 * ========================================================= */
@media (max-width: 900px) {
    .fusion-woo-related-tb .product .fusion-quick-view,
    .fusion-woo-upsells-tb .product .fusion-quick-view,
    .fusion-woo-products-tb .product .fusion-quick-view,
    .cross-sells .product .fusion-quick-view,
    .related.products .product .fusion-quick-view,
    .upsells.products .product .fusion-quick-view,
    ul.products .product .fusion-quick-view { display: none !important; }
}

/* =========================================================
 * Cart table — compact mobile row layout
 * Avada's responsive table makes product-thumbnail img
 * 100% wide. Override to a 90px fixed-width left column
 * so the row looks like a card, not a photo album.
 * ========================================================= */
@media (max-width: 760px) {
    /* Hide header row on mobile — redundant with data-title labels */
    .woocommerce table.shop_table.cart thead {
        display: none !important;
    }

    /* Each cart row = flex row */
    .woocommerce-cart-form table.shop_table.cart tbody tr.cart_item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 14px !important;
        border-bottom: 1px solid rgba(58, 41, 32, 0.08) !important;
        border-top: none !important;
        gap: 0 !important;
        position: relative !important;
    }

    /* Thumbnail: 90 × 90 fixed, left */
    .woocommerce-cart-form table.shop_table.cart td.product-thumbnail {
        flex: 0 0 90px !important;
        width: 90px !important;
        padding: 0 !important;
        border: none !important;
    }
    .woocommerce-cart-form table.shop_table.cart td.product-thumbnail a {
        display: block !important;
    }
    .woocommerce-cart-form table.shop_table.cart td.product-thumbnail img {
        width: 90px !important;
        max-width: 90px !important;
        height: 90px !important;
        object-fit: cover !important;
        border-radius: 2px !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Product name: fills remaining width right of image */
    .woocommerce-cart-form table.shop_table.cart td.product-name {
        flex: 1 1 0 !important;
        padding: 0 30px 0 12px !important; /* right padding for remove button */
        border: none !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    /* Price shown inline under name — hide the standalone price cell */
    .woocommerce-cart-form table.shop_table.cart td.product-price {
        display: none !important;
    }

    /* Quantity: left of subtotal, aligned under name */
    .woocommerce-cart-form table.shop_table.cart td.product-quantity {
        flex: 0 0 auto !important;
        padding: 10px 0 0 102px !important; /* 90px img + 12px gap */
        border: none !important;
    }

    /* Subtotal: right side, same row as quantity */
    .woocommerce-cart-form table.shop_table.cart td.product-subtotal {
        flex: 1 1 0 !important;
        padding: 10px 0 0 8px !important;
        border: none !important;
        text-align: right !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    .woocommerce-cart-form table.shop_table.cart td.product-subtotal::before {
        display: none !important; /* hide "data-title: Разом" label */
    }

    /* Remove button: absolute top-right of the row */
    .woocommerce-cart-form table.shop_table.cart td.product-remove {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        flex: none !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
    .woocommerce-cart-form table.shop_table.cart td.product-remove::before {
        display: none !important;
    }

    /* Product name shows price inline (append .amount from product-name td's
       variation data or variation description) — WC puts price in .product-price
       td on desktop; on mobile show a price below the product name via
       data stored in the td's data-title. Since we hide td.product-price,
       inject it visually under the name using the quantity row. */

    /* Actions row (Update cart button): full width */
    .woocommerce-cart-form table.shop_table.cart tr.actions {
        display: block !important;
        padding: 14px !important;
        border-top: 1px solid rgba(58, 41, 32, 0.08) !important;
    }
    .woocommerce-cart-form table.shop_table.cart tr.actions td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }
}

/* =========================================================
 * Cross-sells / upsells product cards on cart page —
 * force same compact bottom fix as the shop grid.
 * Uses higher specificity than the shop grid rules.
 * ========================================================= */
@media (max-width: 760px) {
    .cross-sells ul.products .product .product-details-container,
    .upsells.products .product .product-details-container {
        min-height: 0 !important;
        padding: 8px 12px 6px !important;
    }
    .cross-sells ul.products .product .fusion-content-sep,
    .cross-sells ul.products .product .product-buttons .fusion-content-sep,
    .upsells.products .product .fusion-content-sep,
    .upsells.products .product .product-buttons .fusion-content-sep {
        display: none !important;
        margin: 0 !important;
    }
    .cross-sells ul.products .product .product-buttons,
    .upsells.products .product .product-buttons {
        padding: 0 !important;
        border: none !important;
    }
    .cross-sells ul.products .product .product-buttons-container,
    .upsells.products .product .product-buttons-container {
        padding: 10px 12px 12px !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .cross-sells ul.products .product .product-buttons-container .add_to_cart_button,
    .cross-sells ul.products .product .product-buttons-container .button.product_type_variable,
    .cross-sells ul.products .product .product-buttons-container .button.product_type_simple,
    .upsells.products .product .product-buttons-container .add_to_cart_button,
    .upsells.products .product .product-buttons-container .button.product_type_variable,
    .upsells.products .product .product-buttons-container .button.product_type_simple {
        width: 100% !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
 * Checkout page — mobile & validation fixes
 * ========================================================= */

/* 1. Avada injects .woocommerce-invalid:after { content: 'Please enter correct
 *    details for this required field.' } in English — override with Ukrainian. */
.woocommerce-invalid:after {
    content: 'Введіть коректні дані для цього обовʼязкового поля.' !important;
}

/* 2. The checkout validation error list is a <ul class="woocommerce-error">.
 *    Our generic .woocommerce-error rule above applies display:flex which
 *    renders all <li> items side-by-side and adds an ::before icon on the ul.
 *    Override for the <ul> case: vertical stack, no stray icon. */
ul.woocommerce-error {
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    gap: 0 !important;
    padding: 14px 20px 14px 44px !important;
    list-style: disc !important;
    color: #fff !important;
    background: var(--fi-terracotta, #c47a55) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 24px rgba(58, 41, 32, 0.08) !important;
    margin-bottom: 20px !important;
}
ul.woocommerce-error::before {
    display: none !important;
}
ul.woocommerce-error li {
    display: list-item !important;
    background: transparent !important;
    border: none !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    list-style: disc !important;
}
ul.woocommerce-error li a,
.fusion-woo-notices-tb ul.woocommerce-error li a {
    /* Avada's .fusion-woo-notices-tb sets --awb-background-color:#fff which
       leaks onto <a> elements inside the list as white pill-shaped boxes.
       Strip all box styling; render as plain inline text. */
    display: inline !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
ul.woocommerce-error li a:hover,
.fusion-woo-notices-tb ul.woocommerce-error li a:hover {
    text-decoration: underline !important;
    text-decoration-color: rgba(255,255,255,0.7) !important;
}

/* Hide the Avada WooCommerce Notices TB floating icon —
   it positions as a separate floated element and breaks the layout. */
.fusion-woo-notices-tb .fusion-woo-notices-tb-icon {
    display: none !important;
}

/* 3. Checkout form — mobile layout tightening */
@media (max-width: 760px) {
    /* Billing/shipping section headings */
    .woocommerce-checkout .woocommerce-billing-fields h3,
    .woocommerce-checkout .woocommerce-shipping-fields h3,
    .woocommerce-checkout #order_review_heading {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }

    /* Form rows — reduce gaps */
    .woocommerce-checkout .form-row {
        margin-bottom: 10px !important;
    }
    .woocommerce-checkout .form-row label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row .select2-container .select2-selection {
        font-size: 14px !important;
        height: 42px !important;
        padding: 0 12px !important;
    }

    /* Order review table on checkout */
    .woocommerce-checkout #order_review table.shop_table th,
    .woocommerce-checkout #order_review table.shop_table td {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    /* Place order button */
    .woocommerce-checkout #place_order,
    .woocommerce #payment #place_order {
        width: 100% !important;
        font-size: 14px !important;
        height: 48px !important;
        line-height: 48px !important;
        padding: 0 !important;
    }

    /* Payment methods list */
    .woocommerce-checkout #payment .payment_methods li {
        padding: 10px 12px !important;
    }
    .woocommerce-checkout #payment .payment_box {
        padding: 10px 12px !important;
    }
}

/* =========================================================
 * 4. Checkout polish — applies on every viewport.
 *
 * - Hide the country field. PHP filter
 *   feelit_hide_country_field() (functions.php) converts the
 *   country select to <input type="hidden">, but we still need
 *   to suppress its surrounding <p class="form-row"> + <label>.
 * - Shrink the section heading ("Реквізити доставки" /
 *   "Billing details" — whichever WC translation surfaces). The
 *   stock h3 is comically large on the modernised classic
 *   template; 16px reads as a section label, not a banner.
 * - Tighten the address-2 reveal toggle ("+ Add будинок, офіс…")
 *   so it reads as a hint, not a section heading.
 * ========================================================= */

/* Hide country field at form-row + label level. */
.woocommerce-checkout .feelit-hidden-field,
.woocommerce-checkout p.form-row.feelit-hidden-field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
    display: none !important;
}

/* Shrink the address-section headings on every viewport.
 * Mobile rule above already does 16px; this pulls desktop in
 * line so the heading reads as a section label. */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout #order_review_heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Address-2 reveal trigger ("+ Add..."). Some Fusion themes
 * render this as an h3-equivalent — knock it down to a hint. */
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > h3,
.woocommerce-checkout .form-row .woocommerce-input-wrapper + a,
.woocommerce-checkout .address_2_toggle,
.woocommerce-checkout button.address_2_toggle {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #777 !important;
}

/* Section headings — address ("Адреса доставки") and payment
 * ("Спосіб оплати") share one style for visual parity.
 *
 * - The address heading is rendered by the wc-ukr-shipping Vue
 *   bundle as <h3> inside .wcus-checkout-fields /
 *   .wcus-checkout-np-fields with no class of its own.
 * - The payment heading is emitted from functions.php on the
 *   awb_before_woocommerce_checkout_payment action with the
 *   explicit class .feelit-section-heading.
 *
 * 12px padding-top gives breathing room from whatever sits
 * above (email field above the address heading, payment-method
 * <ul> above its sibling — though the payment heading lives
 * BEFORE that <ul> visually). */
.woocommerce-checkout .wcus-checkout-fields > h3,
.woocommerce-checkout .wcus-checkout-np-fields > h3,
.woocommerce-checkout .feelit-section-heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 12px !important;
    padding-top: 12px !important;
}

/* 12px gap between the payment-method block (Mono radio) and
 * the privacy-policy paragraph that sits above the place-order
 * button. Default WC markup wraps the privacy text in
 *   <div class="form-row place-order">
 *     <div class="woocommerce-terms-and-conditions-wrapper">
 *       <div class="woocommerce-privacy-policy-text"><p>…</p></div>
 *     </div>
 *     <button id="place_order">…</button>
 *   </div>
 * Each layer pulls in default Avada / WC margins (~30px+) which
 * stacks into a chasm. Reset every layer, then state the gap once. */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment .wc_payment_methods {
    margin-bottom: 0 !important;
}
.woocommerce-checkout #payment .form-row.place-order {
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin: 12px 0 !important;
    padding: 0 !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout p.woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Place-order button — slightly chunkier on desktop so it pulls
 * weight against the privacy paragraph above it. The mobile rule
 * (full-width 48px) still wins on phones. */
.woocommerce-checkout #place_order,
form.checkout #place_order,
button#place_order {
    padding: 14px 36px !important;
    font-size: 15px !important;
    min-height: 52px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
}

/* =========================================================
 * 6. Order-review (right column) — compact density.
 *
 * Goal: fit 4 products + subtotal / discount / total in one
 * laptop viewport without scrolling.
 *
 * IMPORTANT: Avada / Fusion's [fusion_tb_woo_checkout_order_review]
 * shortcode does NOT wrap the table in <div id="order_review">.
 * It calls woocommerce_order_review() directly inside its own
 * <div class="fusion-woo-checkout-order-review-tb …">. So every
 * selector here keys off either that Fusion wrapper class or off
 * the table's class .woocommerce-checkout-review-order-table —
 * both reach the right tree on classic + Fusion layouts.
 * ========================================================= */
/* Fusion injects per-instance CSS variables on the wrapper:
 *   --awb-cell-padding-top:    25px;
 *   --awb-cell-padding-bottom: 25px;
 *   --awb-footer-padding-right: 100px;
 *   --awb-header-padding-bottom: 0.75em;
 * The class rule `.fusion-woo-checkout-order-review-tb tbody tr td`
 * resolves padding from those vars BEFORE our class-level !important
 * win, so we override the vars themselves at the wrapper. Tighter
 * cell padding + a 100px row height is the headline number. */
.woocommerce-checkout .fusion-woo-checkout-order-review-tb {
    --awb-cell-padding-top:      8px !important;
    --awb-cell-padding-bottom:   8px !important;
    --awb-cell-padding-left:     0   !important;
    --awb-cell-padding-right:    0   !important;
    --awb-header-padding-top:    0   !important;
    --awb-header-padding-bottom: 8px !important;
    --awb-header-padding-left:   0   !important;
    --awb-header-padding-right:  0   !important;
    --awb-footer-padding-top:    6px !important;
    --awb-footer-padding-bottom: 6px !important;
    --awb-footer-padding-right:  0   !important;
    --awb-footer-padding-left:   0   !important;
}

.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
    border-collapse: collapse !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table thead th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table thead th {
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tbody tr.cart_item,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item {
    height: 100px !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tbody tr.cart_item td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item td {
    padding: 8px 0 !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Avada's review-order.php wraps name + thumbnail in
 * .fusion-product-name-wrapper. Flex it so the thumbnail sits
 * inline with the text instead of dominating the column. */
.woocommerce-checkout table.shop_table .fusion-product-name-wrapper,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .fusion-product-name-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}
/* Thumbnail: pin height to 84px, let width follow natural
 * aspect ratio so portrait product photos render undistorted
 * and uncropped. Wrapper is shrink-to-fit so the column width
 * is whatever the (height-constrained) image needs — typically
 * ~63px for 3:4 portrait shots. */
.woocommerce-checkout table.shop_table .fusion-product-name-wrapper .product-thumbnail,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-thumbnail {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 84px !important;
    margin: 0 !important;
    display: block !important;
}
.woocommerce-checkout table.shop_table .fusion-product-name-wrapper .product-thumbnail a,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-thumbnail a {
    display: block !important;
    line-height: 0 !important;
}
.woocommerce-checkout table.shop_table .fusion-product-name-wrapper .product-thumbnail img,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-thumbnail img {
    display: block !important;
    height: 84px !important;
    width: auto !important;
    max-width: 84px !important;
    max-height: 84px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}
.woocommerce-checkout table.shop_table .fusion-product-name-wrapper .product-info,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.woocommerce-checkout table.shop_table .product-quantity,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-quantity {
    font-weight: 500 !important;
    color: #555 !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb tr.cart_item td.product-total,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.cart_item td.product-total,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb tr.cart_item td.product-total .amount,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tr.cart_item td.product-total .amount {
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Variable-product attribute lines (size, color) — render as
 * a thin secondary line, not a stacked dl block. */
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info dl,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info .wc-item-meta,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info .variation,
.woocommerce-checkout table.shop_table .product-info dl,
.woocommerce-checkout table.shop_table .product-info .wc-item-meta,
.woocommerce-checkout table.shop_table .product-info .variation {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #666 !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info .wc-item-meta li,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info dl dt,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info dl dd,
.woocommerce-checkout table.shop_table .product-info .wc-item-meta li,
.woocommerce-checkout table.shop_table .product-info dl dt,
.woocommerce-checkout table.shop_table .product-info dl dd {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb .product-info dl dt::after,
.woocommerce-checkout table.shop_table .product-info dl dt::after {
    content: ": ";
}

/* Coupon "remove" link rendered as a small round × button.
 * Replaces the default WC "[Видалити]" text link. Markup is
 * emitted from functions.php by the woocommerce_cart_totals_coupon_html
 * filter as <a class="woocommerce-remove-coupon feelit-coupon-remove">×</a>. */
.woocommerce-checkout a.woocommerce-remove-coupon.feelit-coupon-remove,
.woocommerce-cart  a.woocommerce-remove-coupon.feelit-coupon-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-left: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #e5e5e5 !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 0 !important;
    vertical-align: middle !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-checkout a.woocommerce-remove-coupon.feelit-coupon-remove:hover,
.woocommerce-cart  a.woocommerce-remove-coupon.feelit-coupon-remove:hover {
    background: #c0392b !important;
    color: #fff !important;
}

/* Footer rows (Проміжний підсумок / Знижка / Доставка / Total) */
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot th,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot td {
    padding: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot tr.order-total th,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot tr.order-total td,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding-top: 12px !important;
    font-size: 15px !important;
}
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot tr.order-total td strong .amount,
.woocommerce-checkout .fusion-woo-checkout-order-review-tb table.shop_table tfoot tr.order-total td .amount,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td strong .amount,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* =========================================================
 * 5. Checkout — mobile UX additions (tighten + reorder).
 *
 * Combined with the page-content reorder (payment block now
 * lives in the LEFT column under billing), this puts the
 * place-order button visually adjacent to the address fields
 * on phones. Order summary moves to the bottom on mobile so
 * the user doesn't have to scroll past a tall product table
 * to reach payment.
 * ========================================================= */
@media (max-width: 760px) {
    /* Stack the two Fusion columns and force the order:
     * billing → payment → order review.
     *
     * SCOPE: only the checkout-page content row, NOT Avada's
     * header/footer rows (which also use .fusion-row). The
     * earlier broad selector forced the header into a column,
     * which made the hamburger / logo / search / cart icons
     * stack vertically on mobile.
     *
     * Targeting via .fusion-builder-container restricts us to
     * Page Builder rows inside post content. */
    .woocommerce-checkout .fusion-builder-container .fusion-builder-row,
    .woocommerce-checkout .fusion-builder-container .fusion-row {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Order-review column always last on mobile. */
    .woocommerce-checkout .fusion-builder-container .fusion-builder-column:has(> .fusion-column-wrapper [id^="order_review"]),
    .woocommerce-checkout .fusion-builder-container .fusion-builder-column:has(.shop_table) {
        order: 99 !important;
        margin-bottom: 24px !important;
    }

    /* Privacy-policy paragraph above the place-order button is
     * decorative — clip excess top margin on phones. */
    .woocommerce-checkout .woocommerce-privacy-policy-text {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 12px 0 16px !important;
    }

    /* Section spacing — let billing breathe from payment. */
    .woocommerce-checkout #payment {
        margin-top: 24px !important;
    }

    /* "Підтвердити замовлення" — full-width pill, comfortable
     * tap target. The earlier rule sets 48px; that's fine. */
    .woocommerce-checkout #place_order {
        margin-top: 8px !important;
    }

    /* Payment-method radio rows — bigger touch targets. */
    .woocommerce-checkout #payment ul.payment_methods li label {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

/* =========================================================
 * 7. Thank-you / order-received page polish.
 *
 * After Monopay redirects the customer to /checkout/order-received/{id}/
 * WC renders templates/checkout/thankyou.php on the checkout page
 * (id 16586). Output is bare-bones by default: a green-ish notice
 * paragraph plus a flat <ul> of order details. We brand it as a
 * card-style success page and tighten the order-overview list.
 *
 * Body class .woocommerce-order-received scopes everything so we
 * don't leak styles to the regular checkout form.
 * ========================================================= */
body.woocommerce-order-received .woocommerce-order {
    max-width: 720px;
    margin: 32px auto 64px;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid rgba(58, 41, 32, 0.08);
    border-radius: 4px;
    text-align: left;
}
body.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received,
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 8px !important;
    margin: 0 0 18px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--fi-warm-deep, #3a2920) !important;
}
body.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received::before,
body.woocommerce-order-received p.woocommerce-thankyou-order-received::before {
    content: "✓ ";
    color: #87af4d;
    font-weight: 700;
}

body.woocommerce-order-received ul.woocommerce-order-overview {
    list-style: none;
    margin: 0 0 24px !important;
    padding: 18px 20px !important;
    background: #faf7f1;
    border-radius: 3px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}
@media (max-width: 760px) {
    body.woocommerce-order-received ul.woocommerce-order-overview {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #555 !important;
    text-transform: none !important;
    border: 0 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fi-warm-deep, #3a2920);
}

/* Order details table (the order_details / customer-details that
 * Avada's view_order action prints via the woocommerce_thankyou hook). */
body.woocommerce-order-received table.shop_table.order_details,
body.woocommerce-order-received table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 14px;
}
body.woocommerce-order-received table.shop_table.order_details th,
body.woocommerce-order-received table.shop_table.order_details td,
body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(58, 41, 32, 0.08);
    text-align: left;
}
body.woocommerce-order-received table.shop_table.order_details tfoot th {
    text-align: right;
}
body.woocommerce-order-received table.shop_table.order_details tfoot tr.order-total td .amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--fi-warm-deep, #3a2920);
}

/* The "Please log in to view this order" notice for guests —
 * tone it down so it doesn't dominate the success message. */
body.woocommerce-order-received .wc-block-components-notice-banner {
    margin: 16px 0 24px !important;
    padding: 12px 14px !important;
    background: #f0eee9 !important;
    border: 1px solid rgba(58, 41, 32, 0.08) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
}
body.woocommerce-order-received .wc-block-components-notice-banner svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--fi-warm-deep, #3a2920) !important;
}

/* =========================================================
 * 8. Mobile cart — extra polish on top of the existing
 * @media (max-width: 760px) block above. The base structure
 * (90×90 image, flex rows, hidden header) is already in place;
 * this round adds smaller paddings, narrower qty input, full-width
 * coupon stack, tighter totals card, prominent checkout CTA.
 * ========================================================= */
@media (max-width: 760px) {
    /* Cart-collateral container — full width, no extra side gutter. */
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 16px 0 !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals {
        padding: 18px 16px 22px !important;
        border-radius: 3px !important;
    }

    /* Cart totals table — tighter type, cleaner rows. */
    .woocommerce-cart .cart_totals table.shop_table th,
    .woocommerce-cart .cart_totals table.shop_table td {
        padding: 10px 6px !important;
        font-size: 13px !important;
    }
    .woocommerce-cart .cart_totals tfoot tr.order-total td .amount,
    .woocommerce-cart .cart_totals .order-total .amount {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* Coupon row — full-width input + stacked apply button. */
    .woocommerce-cart .coupon,
    .woocommerce-cart form.checkout_coupon,
    .woocommerce-cart .cart .actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .woocommerce-cart #coupon_code {
        width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
    }
    .woocommerce-cart .coupon button[name="apply_coupon"],
    .woocommerce-cart button[name="apply_coupon"] {
        width: 100% !important;
        height: 46px !important;
        font-size: 13px !important;
    }

    /* Quantity stepper — narrower so it doesn't push price off-screen. */
    .woocommerce-cart-form table.shop_table.cart td.product-quantity .qty,
    .woocommerce-cart-form table.shop_table.cart td.product-quantity input[type="number"] {
        width: 64px !important;
        height: 38px !important;
        padding: 0 6px !important;
        font-size: 14px !important;
    }

    /* Proceed to checkout button — full-width, generous tap target. */
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
    .woocommerce-cart .wc-proceed-to-checkout a.button.alt,
    .woocommerce-cart a.fusion-button[href*="checkout"],
    .woocommerce-cart a.fusion-button.checkout-button {
        width: 100% !important;
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 !important;
        font-size: 14px !important;
        letter-spacing: 0.6px !important;
    }

    /* Update-cart button row — match width / sizing for consistency. */
    .woocommerce-cart-form table.shop_table.cart tr.actions {
        padding: 12px !important;
    }
    .woocommerce-cart-form table.shop_table.cart tr.actions button[name="update_cart"] {
        width: 100% !important;
        height: 44px !important;
        font-size: 13px !important;
    }

    /* Tighten the breadcrumb on mobile cart/checkout — it eats space. */
    body.woocommerce-cart .fusion-breadcrumbs,
    body.woocommerce-checkout .fusion-breadcrumbs {
        font-size: 12px !important;
        padding: 8px 0 !important;
    }
}

/* =========================================================
 * Mobile hero — disabled. Earlier iterations rendered a separate
 * portrait slider here, but the simpler setup is to use the same
 * full-width `feelitslide-home` slider on every viewport and
 * swap just the video source on mobile (handled in
 * fi-mobile-slider-video-js, functions.php).
 * ========================================================= */
.fi-mobile-hero { display: none !important; }

/* =========================================================
 * Show the existing Avada hero slider on mobile (≤640px).
 *
 * Avada attaches `fusion-no-small-visibility` to its outer
 * fullwidth row + slider container, which hides the slider via
 * an inline <style> at max-width:640px. We override only the
 * row that wraps OUR hero so we don't accidentally unhide
 * other below-the-fold content that's intentionally hidden.
 *
 * The slider JS already scales height to viewport width via
 * data-typo_factor — no manual height overrides needed.
 * ========================================================= */
@media screen and (max-width: 640px) {
    .fusion-fullwidth.fusion-no-small-visibility:has(.fusion-slider-sc-feelitslide-home) {
        display: block !important;
    }
    .fusion-fullwidth:has(.fusion-slider-sc-feelitslide-home) .fusion-layout-column.fusion-no-small-visibility,
    .fusion-fullwidth:has(.fusion-slider-sc-feelitslide-home) .fusion-layout-column {
        display: block !important;
    }
    .fusion-slider-sc-feelitslide-home.fusion-no-small-visibility,
    .fusion-slider-sc-feelitslide-home {
        display: block !important;
    }
}

/* =========================================================
 * Mobile fixes (size guide table, related-products card,
 * privacy notice). Each is scoped to small viewports only.
 * ========================================================= */
@media (max-width: 760px) {

    /* (#4) PDP size-guide table overflows narrow screens — make
       its accordion panel a horizontal-scroll surface so the user
       can swipe to see the full table. */
    .single-product .fusion-accordian .panel-body.toggle-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .single-product .fusion-accordian .panel-body.toggle-content > table {
        min-width: 520px; /* matches the 4-size grid + label column */
    }

    /* (#5) "Вам може сподобатись" / related products on mobile.
       The Avada Woo carousel renders each card as a flexbox column
       with the price + button stuck on a single line. Make the button
       full card width with breathing room and float the price up. */
    .related .fusion-carousel-item-wrapper .fusion-product-wrapper,
    .upsells .fusion-carousel-item-wrapper .fusion-product-wrapper,
    .cross-sells .fusion-carousel-item-wrapper .fusion-product-wrapper {
        padding: 0 4px;
    }
    .related .fusion-product-wrapper .fusion-product-content,
    .upsells .fusion-product-wrapper .fusion-product-content,
    .cross-sells .fusion-product-wrapper .fusion-product-content {
        padding: 12px 4px 4px;
    }
    .related .fusion-product-wrapper .price,
    .upsells .fusion-product-wrapper .price,
    .cross-sells .fusion-product-wrapper .price {
        display: block !important;
        font-size: 16px !important;
        margin: 6px 0 14px !important;
        text-align: left !important;
    }
    .related .fusion-product-wrapper a.button,
    .related .fusion-product-wrapper .add_to_cart_button,
    .related .fusion-product-wrapper .product_type_variable,
    .upsells .fusion-product-wrapper a.button,
    .upsells .fusion-product-wrapper .add_to_cart_button,
    .upsells .fusion-product-wrapper .product_type_variable,
    .cross-sells .fusion-product-wrapper a.button,
    .cross-sells .fusion-product-wrapper .add_to_cart_button,
    .cross-sells .fusion-product-wrapper .product_type_variable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        margin: 4px 0 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        letter-spacing: 0.04em !important;
        line-height: 1.2 !important;
    }

    /* (#5b) Equal-height cards in the upsells / related carousel.
       Make every slide stretch to the height of the tallest sibling,
       reserve 3 lines for the title (so short and long names sit on
       the same baseline), and push the action button to the bottom
       of the card. Result: clean horizontal alignment of the price
       and CTA across all visible cards. */
    .fusion-woo-related-tb .swiper-wrapper,
    .fusion-woo-upsells-tb .swiper-wrapper,
    .fusion-woo-products-tb .swiper-wrapper,
    .related .swiper-wrapper,
    .upsells .swiper-wrapper,
    .cross-sells .swiper-wrapper {
        align-items: stretch !important;
    }
    .fusion-woo-related-tb .product.swiper-slide,
    .fusion-woo-upsells-tb .product.swiper-slide,
    .fusion-woo-products-tb .product.swiper-slide,
    .related .product.swiper-slide,
    .upsells .product.swiper-slide,
    .cross-sells .product.swiper-slide {
        height: auto !important;
        display: flex !important;
    }
    .fusion-woo-related-tb .swiper-slide .fusion-carousel-item-wrapper,
    .fusion-woo-upsells-tb .swiper-slide .fusion-carousel-item-wrapper,
    .fusion-woo-products-tb .swiper-slide .fusion-carousel-item-wrapper,
    .related .swiper-slide .fusion-carousel-item-wrapper,
    .upsells .swiper-slide .fusion-carousel-item-wrapper,
    .cross-sells .swiper-slide .fusion-carousel-item-wrapper {
        width: 100% !important;
        height: auto !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .fusion-woo-related-tb .fusion-product-wrapper,
    .fusion-woo-upsells-tb .fusion-product-wrapper,
    .fusion-woo-products-tb .fusion-product-wrapper,
    .related .fusion-product-wrapper,
    .upsells .fusion-product-wrapper,
    .cross-sells .fusion-product-wrapper {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Content area below the image grows to fill remaining height,
       so margin-top:auto on .product-buttons can pin the CTA to
       the bottom of the card. */
    .fusion-woo-related-tb .fusion-product-wrapper .fusion-product-content,
    .fusion-woo-upsells-tb .fusion-product-wrapper .fusion-product-content,
    .fusion-woo-products-tb .fusion-product-wrapper .fusion-product-content,
    .related .fusion-product-wrapper .fusion-product-content,
    .upsells .fusion-product-wrapper .fusion-product-content,
    .cross-sells .fusion-product-wrapper .fusion-product-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }
    /* Reserve 3 lines for the product title — same idea as the
       desktop 2-line clamp, but mobile names tend to wrap further. */
    .fusion-woo-related-tb .fusion-product-wrapper .product-title,
    .fusion-woo-upsells-tb .fusion-product-wrapper .product-title,
    .fusion-woo-products-tb .fusion-product-wrapper .product-title,
    .related .fusion-product-wrapper .product-title,
    .upsells .fusion-product-wrapper .product-title,
    .cross-sells .fusion-product-wrapper .product-title {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.35 !important;
        min-height: calc(3 * 1.35em) !important;
        max-height: calc(3 * 1.35em);
        margin: 0 0 6px !important;
        text-align: left !important;
    }
    /* Push the action area to the bottom of the card. */
    .fusion-woo-related-tb .fusion-product-wrapper .product-buttons,
    .fusion-woo-upsells-tb .fusion-product-wrapper .product-buttons,
    .fusion-woo-products-tb .fusion-product-wrapper .product-buttons,
    .related .fusion-product-wrapper .product-buttons,
    .upsells .fusion-product-wrapper .product-buttons,
    .cross-sells .fusion-product-wrapper .product-buttons {
        margin-top: auto !important;
        padding-top: 8px !important;
    }
    /* Tighten the natural spacing between price and CTA so the
       button isn't sitting in a void above the auto-gap. */
    .fusion-woo-related-tb .fusion-product-wrapper .price,
    .fusion-woo-upsells-tb .fusion-product-wrapper .price,
    .fusion-woo-products-tb .fusion-product-wrapper .price,
    .related .fusion-product-wrapper .price,
    .upsells .fusion-product-wrapper .price,
    .cross-sells .fusion-product-wrapper .price {
        margin: 4px 0 6px !important;
    }
    .fusion-woo-related-tb .fusion-product-wrapper .fusion-content-sep,
    .fusion-woo-upsells-tb .fusion-product-wrapper .fusion-content-sep,
    .fusion-woo-products-tb .fusion-product-wrapper .fusion-content-sep,
    .related .fusion-product-wrapper .fusion-content-sep,
    .upsells .fusion-product-wrapper .fusion-content-sep,
    .cross-sells .fusion-product-wrapper .fusion-content-sep {
        display: none !important;
        margin: 0 !important;
    }

    /* (#6a moved out of .woocommerce-checkout scope — see global rule
       below the @media block. The selector now covers the register
       form's privacy notice on /my-account/ too.) */

    /* /my-account/ login + register on mobile.
       Default (no-JS / fallback) layout: stacked columns with a divider
       and a clear heading on each. JS upgrades to a tab UI by adding
       `.fi-tabbed` to .u-columns and a tab-bar before it; rules further
       below kick in once the upgrade has happened. */
    .woocommerce-account .u-columns,
    .woocommerce-account .u-columns--2 {
        display: block !important;
    }
    .woocommerce-account .u-columns .col-1,
    .woocommerce-account .u-columns .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 32px !important;
    }
    .woocommerce-account .u-columns:not(.fi-tabbed) .col-2 {
        margin-top: 32px !important;
        padding-top: 32px !important;
        border-top: 1px solid rgba(58, 41, 32, 0.12);
    }
    .woocommerce-account .u-columns:not(.fi-tabbed) h2 {
        font-size: 22px !important;
        margin: 0 0 16px !important;
        color: var(--fi-warm-deep, #3a2920);
    }
    .woocommerce-account form.register .button,
    .woocommerce-account form.login .button {
        display: block;
        width: 100%;
        padding: 14px 16px;
        margin: 20px 0 !important;
        text-align: center;
        box-sizing: border-box;
    }
    /* Spacing between submit button, "remember me" checkbox, and the
       lost-password link on the login form. The DOM order is checkbox
       → button → lost-password, but the visual rendering can vary by
       theme; margins applied symmetrically (top + bottom on each
       element) keep ~20px of breathing room regardless of order. */
    .woocommerce-account .woocommerce-form-login__rememberme {
        display: inline-block;
        margin: 12px 0 !important;
    }
    .woocommerce-account .woocommerce-form-login .lost_password,
    .woocommerce-account .woocommerce-LostPassword {
        margin: 16px 0 0 !important;
    }
    /* Tighten the form-row holding rememberme + button so the gap reads
       as element-to-element, not as a wide empty <p> margin. */
    .woocommerce-account .woocommerce-form-login p.form-row {
        margin: 0 0 16px !important;
    }

    /* Tab UI — applied only when JS has wrapped the two columns. */
    .woocommerce-account .fi-account-tabs {
        display: flex;
        gap: 0;
        margin: 0 0 24px;
        border-bottom: 1px solid rgba(58, 41, 32, 0.12);
        background: transparent;
    }
    .woocommerce-account .fi-account-tab {
        flex: 1;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 500;
        font-family: inherit;
        color: rgba(58, 41, 32, 0.55);
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease;
        margin: 0;
        text-align: center;
    }
    .woocommerce-account .fi-account-tab.is-active {
        color: var(--fi-warm-deep, #3a2920);
        border-bottom-color: var(--fi-terracotta, #c47a55);
    }
    .woocommerce-account .u-columns.fi-tabbed .col-1,
    .woocommerce-account .u-columns.fi-tabbed .col-2 {
        margin: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    .woocommerce-account .u-columns.fi-tabbed.fi-tab-login    .col-2,
    .woocommerce-account .u-columns.fi-tabbed.fi-tab-register .col-1 {
        display: none !important;
    }
    /* Hide the per-form H2 once the tab bar above takes over as heading. */
    .woocommerce-account .u-columns.fi-tabbed .col-1 > h2,
    .woocommerce-account .u-columns.fi-tabbed .col-2 > h2 {
        display: none !important;
    }
}

/* =========================================================
 * Privacy notice subtext — applies to BOTH the checkout's
 * .woocommerce-privacy-policy-text AND the register form's copy
 * on /my-account/. No parent scope so the rule kicks in wherever
 * WC outputs the privacy text. Outside of the @media block so
 * desktop is small-and-muted too. */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(58, 41, 32, 0.55) !important;
    margin: 12px 0 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.woocommerce-privacy-policy-text a {
    color: rgba(58, 41, 32, 0.7) !important;
    text-decoration: underline;
}

/* =========================================================
 * Desktop spacing for "Втратили свій пароль?" under the
 * УВІЙТИ button on /my-account/. Mobile already has 16 px via
 * the rule inside @media (max-width: 760px); on desktop the
 * link sits flush against the button by default. */
.woocommerce-account .woocommerce-form-login .lost_password,
.woocommerce-account .woocommerce-LostPassword {
    margin-top: 24px !important;
}

/* =========================================================
 * Search results — hide date on each post card.
 *
 * Avada renders the date inside the post-card archive layout as a
 * fusion-title with the `title-heading-tag` modifier (used when an
 * Avada Title element's HTML tag is set to <p>). The whole element
 * is wrapped by .fusion-title with separator dividers + spacers.
 * Hide the wrapper so dividers/spacers disappear too — :has() is
 * supported by every modern browser we target. */
.search-results .post-card .fusion-title:has(.fusion-title-heading.title-heading-tag) {
    display: none !important;
}

/* =========================================================
 * Top marketing banner — pinned to the viewport top across every
 * viewport. Avada's typewriter (clipIn) animation runs untouched.
 *
 * Originally tried `position: sticky`, but Avada's `#boxed-wrapper`
 * has `overflow-x: clip` (carousels rely on it to keep extra slides
 * from widening the page), and any non-`visible` overflow on an
 * ancestor breaks `position: sticky`. Lifting that clip caused
 * horizontal overflow / a right-side gap from the carousel slides.
 *
 * `position: fixed` doesn't care about ancestor overflow and
 * doesn't widen the page either, so it pins reliably without any
 * layout side-effects. The drawback is that `fixed` removes the
 * header from flow, so we add `body { padding-top }` to reserve
 * the space below it. The padding value is set in JS (footer)
 * because the header height varies between viewports / when the
 * Avada admin bar is shown — a CSS variable would be brittle.
 * ========================================================= */
.fusion-tb-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10100 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
 * SHOP LOOP — size shortcut chips + "Купити" button
 * Both divs sit inside .fusion-product-wrapper, after
 * .fusion-product-content closes, so they're unaffected by
 * Avada's .hide-buttons class.
 * ========================================================= */

/* Drop the gap below the price on shop cards. Avada's
   `ul.products .product .fusion-price-rating` rule uses !important,
   so we have to match it to win. */
ul.products .product .fusion-product-wrapper .fusion-price-rating {
    margin-bottom: 0 !important;
}

/* Lighter title weight on shop archive + carousel cards (was 600).
   Carousel selector needs 3 classes to beat Avada's `.related.products h3`. */
ul.products .product .fusion-product-wrapper .product-title,
.fusion-woo-products-tb .product .product-title {
    font-weight: 500;
}

/* Shrink the top gap on mobile shop archives so the spacing above the
   filters bar matches the 16px gap between the filters bar and the
   first product (was 50px from <main>'s default padding-top). */
@media (max-width: 760px) {
    body.woocommerce.archive main#main {
        padding-top: 16px;
    }
}

/* Mobile home hero — Avada's `[fusion_builder_row]` cascades
   gutter-compensation margins (-7.5px on the row, +7.48px on the
   column wrapper) which leaves the inner slider container offset
   ~7.5px to the right: a thin gap on the left, the right edge
   cropped past 100vw.
   The parent column-wrapper's content-box on a 375px viewport is
   already 390px wide (the +7.48px margin on each side widens the
   margin-box past 100vw). Auto-centering the 375-wide slider
   inside that 390 content-box puts it 7.5px from the left.
   Cancel that by zeroing the slider's margins so its left edge
   aligns with the parent's content-box edge (which starts at
   the viewport edge), then clamp width to 100vw so it never
   overshoots on the right. */
@media (max-width: 760px) {
    body.home .fusion-slider-container.full-width-slider {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
    }
}

/* On the search results page hide our extra chip row + Купити
   button — Avada's archive Купити/Швидкий перегляд row already
   covers the purchase action there. */
body.search-results .fi-card-sizes,
body.search-results .fi-card-buy {
    display: none;
}

/* Drop the awb-icons glyph that Avada injects before
   the "Швидкий перегляд" text link — text-only label looks cleaner.
   Scoped to NOT match `.fb-icon-element` because the "Доповніть образ"
   carousel uses the fusion-quick-view class on circular Font Awesome
   icon buttons (fa-search), and ::before is the icon glyph there —
   killing it leaves an empty grey circle on the left button. */
.fusion-quick-view:not(.fb-icon-element)::before {
    content: none !important;
}

/* Search results page: full-width content area to match shop/home.
   Default Avada search uses the regular page template which caps
   `.post-content` at 680px, so the product grid was visibly narrower
   than every other page. */
body.search-results .post-content {
    max-width: none;
}

/* "Можливо, вам також сподобається" divider injected between exact
   title matches and looser matches on the search results grid.
   Avada renders the grid as a flex/grid container; this element
   spans the full row by claiming all columns. */
.fi-search-also {
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    margin: 24px 0 16px;
    padding: 18px 0 14px;
    border-top: 1px solid rgba(58, 41, 32, 0.12);
}
.fi-search-also h2,
.fi-search-also.fi-search-also h2 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    text-transform: none !important;
}
.fi-search-also p {
    margin: 0;
    font-size: 13px;
    color: var(--fi-mid, #6e5a4c);
    line-height: 1.45;
}

/* =========================================================
 * Brand-aligned message styling — Avada form responses,
 * WooCommerce notices, and generic Fusion alerts. Stock
 * styling (light teal on white error text, lavender success
 * border) is unreadable; this replaces it with a readable
 * accent-bar pattern using brand palette.
 * ========================================================= */
.fusion-alert.fusion-form-response,
.fusion-alert.alert,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-Reviews-title + .woocommerce-info,
.wc-block-components-notice-banner {
    border: 0 !important;
    border-left: 4px solid var(--fi-warm-deep, #3a2920) !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
    background: #f7f1ea !important;
    color: var(--fi-warm-deep, #3a2920) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: 0 1px 2px rgba(58, 41, 32, 0.04);
}

/* Inner content alignment — kill any forced centering. */
.fusion-alert.fusion-form-response .fusion-alert-content-wrapper,
.fusion-alert.fusion-form-response .fusion-alert-content {
    text-align: left !important;
    color: inherit !important;
    font-size: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Success — sage green */
.fusion-alert.fusion-form-response-success,
.fusion-alert.alert-success,
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
    background: #eef5e7 !important;
    border-left-color: #5a8c3e !important;
    color: #2f4a25 !important;
}
.fusion-alert.fusion-form-response-success .alert-icon,
.fusion-alert.alert-success .alert-icon,
.woocommerce-message::before {
    color: #5a8c3e !important;
}

/* Error — warm terracotta-red */
.fusion-alert.fusion-form-response-error,
.fusion-alert.alert-danger,
.fusion-alert.alert-error,
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    background: #fbeae3 !important;
    border-left-color: #c44a26 !important;
    color: #7a2912 !important;
}
.fusion-alert.fusion-form-response-error .alert-icon,
.fusion-alert.alert-danger .alert-icon,
.woocommerce-error::before {
    color: #c44a26 !important;
}

/* Info / cart messages — warm neutral */
.fusion-alert.alert-info,
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
    background: #f3ece2 !important;
    border-left-color: var(--fi-warm-deep, #3a2920) !important;
    color: var(--fi-warm-deep, #3a2920) !important;
}

/* Close (×) button on dismissible alerts */
.fusion-alert .close,
.fusion-alert .toggle-alert {
    color: inherit !important;
    opacity: 0.6;
    font-size: 18px !important;
    line-height: 1 !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
}
.fusion-alert .close:hover,
.fusion-alert .toggle-alert:hover {
    opacity: 1;
}

/* WooCommerce notices: keep their built-in icon column readable. */
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
    background: var(--fi-warm-deep, #3a2920) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    padding: 8px 16px !important;
    border-radius: 4px !important;
}

/* "Вам може сподобатись" carousel (Avada Theme Builder
   fusion-woo-products-tb): hide both our chip row and our extra
   Купити button — Avada's renamed add-to-cart button in the
   2-button row already covers the purchase action there. */
.fusion-woo-products-tb .fi-card-sizes,
.fusion-woo-products-tb .fi-card-buy {
    display: none;
}

/* Size chips */
.fi-card-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 14px 0;
}
.fi-size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--fi-green);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--fi-dark) !important;
    background: transparent;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.fi-size-chip:hover {
    background: var(--fi-green);
    color: #fff !important;
}

/* "Купити" button */
.fi-card-buy {
    padding: 10px 14px 14px;
}
.fi-btn-buy {
    display: block;
    width: 100%;
    padding: 10px 0;
    /* Soft cream-yellow accent #eae199. White text on it is
       unreadable, so flip the label to the warm-deep brown
       brand color for proper contrast. */
    background: #eae199;
    color: var(--fi-warm-deep, #3a2920) !important;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity .15s;
}
.fi-btn-buy:hover {
    opacity: .88;
}

/* =========================================================
 * PDP — button-style variation selector (variable.php)
 * ========================================================= */

/* Wrapper for all attribute groups */
.fi-variations-wrap {
    margin-bottom: 16px;
}

/* One attribute group (e.g. "Розмір") */
.fi-var-group {
    margin-bottom: 16px;
}

/* Hidden select — kept for WooCommerce JS, never visible */
.fi-var-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Label row: attribute name + currently selected value */
.fi-var-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fi-dark);
}
.fi-var-selected-value {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fi-mid);
}

/* Button grid */
.fi-var-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual size button */
.fi-var-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #d8d0c8;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--fi-dark);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1;
}
/* Hover + selected — match the КУПИТИ palette
 * (cream #eae199 fill, warm-mid #827B47 text). Active state
 * gets a darker brown border so it stays visually distinct
 * from a hover-but-not-yet-clicked button. */
.fi-var-btn:hover:not(:disabled) {
    border-color: #eae199;
    background: #eae199;
    color: #827B47;
}
.fi-var-btn--active,
.fi-var-btn.fi-var-btn--active {
    border-color: #827B47 !important;
    background: #eae199 !important;
    color: #827B47 !important;
}

/* Out-of-stock state */
.fi-var-btn--oos,
.fi-var-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: #d8d0c8;
}

/* =========================================================
 * "Очистити фільтри" button on the shop archive — re-skin
 * to the brand cream/brown КУПИТИ palette instead of Avada
 * default green. The class .fi-clear-filters-btn was added
 * to the [fusion_button] shortcode in the Archives Content
 * theme-builder section (post 20252).
 *
 * Idle:  cream fill #eae199, warm-mid text #827B47
 * Hover: warm-deep brown #3a2920 fill, white text
 *
 * Multiple selectors target every layer Fusion paints to
 * make sure no CSS-variable cascade leaks the green theme
 * default through (icon span, .fusion-button-text, etc).
 * ========================================================= */
.fusion-button.fi-clear-filters-btn,
a.fusion-button.fi-clear-filters-btn,
.fusion-button-default.fi-clear-filters-btn {
    background: #eae199 !important;
    background-color: #eae199 !important;
    background-image: none !important;
    border-color: #eae199 !important;
    color: #827B47 !important;
    --button_gradient_top_color:           #eae199 !important;
    --button_gradient_bottom_color:        #eae199 !important;
    --button_gradient_top_color_hover:     #3a2920 !important;
    --button_gradient_bottom_color_hover:  #3a2920 !important;
    --button_accent_color:                 #827B47 !important;
    --button_accent_hover_color:           #ffffff !important;
    --button_border_color:                 #eae199 !important;
    --button_border_hover_color:           #3a2920 !important;
}
.fusion-button.fi-clear-filters-btn .fusion-button-text,
a.fusion-button.fi-clear-filters-btn .fusion-button-text,
.fusion-button.fi-clear-filters-btn i,
a.fusion-button.fi-clear-filters-btn i {
    color: #827B47 !important;
}
.fusion-button.fi-clear-filters-btn:hover,
a.fusion-button.fi-clear-filters-btn:hover,
.fusion-button.fi-clear-filters-btn:focus,
a.fusion-button.fi-clear-filters-btn:focus {
    background: #3a2920 !important;
    background-color: #3a2920 !important;
    border-color: #3a2920 !important;
    color: #ffffff !important;
}
.fusion-button.fi-clear-filters-btn:hover .fusion-button-text,
a.fusion-button.fi-clear-filters-btn:hover .fusion-button-text,
.fusion-button.fi-clear-filters-btn:hover i,
a.fusion-button.fi-clear-filters-btn:hover i,
.fusion-button.fi-clear-filters-btn:focus .fusion-button-text,
a.fusion-button.fi-clear-filters-btn:focus .fusion-button-text {
    color: #ffffff !important;
}

/* =========================================================
 * Top-bar promo strip — HIDDEN (all viewports), 2026-09-08.
 * The strip is row 1 of the Avada header layout section
 * (`.fusion-tb-header .fusion-builder-row-1`): socials + the
 * rotating "БЕЗКОШТОВНА ДОСТАВКА…" title + search. Socials and
 * search were already hidden further up; this removes the whole
 * row so no empty band remains. Header height is measured live
 * (fi-fixed-header-spacer + stickyH in functions.php), so body
 * padding / anchor offsets adapt automatically. To bring the
 * strip back, delete this block only.
 * ========================================================= */
.fusion-tb-header > .fusion-fullwidth.fusion-builder-row-1 {
    display: none !important;
}
/* Separate rule on purpose: an unsupported :has() would invalidate a
   whole selector list, taking the primary rule above down with it. */
.fusion-tb-header .fusion-fullwidth.fusion-builder-row-1:has(.fusion-title-rotating) {
    display: none !important;
}

/* =========================================================
 * Top-bar promo strip — "БЕЗКОШТОВНА ДОСТАВКА ЗАМОВЛЕНЬ ВІД 3000 ГРН"
 * Avada renders this with a `fusion-title-rotating` element whose
 * default state is `visibility: hidden; opacity: 0` — JS animates
 * it in. On desktop the animation has been failing (single-string
 * rotator never fires the in-effect), leaving the strip blank.
 * Force the static end-state so the message is always visible
 * regardless of the rotator JS, scoped to the header row only.
 * ========================================================= */
.fusion-builder-row-1 .fusion-title-rotating .fusion-animated-texts {
    visibility: visible !important;
}
.fusion-builder-row-1 .fusion-title-rotating .fusion-animated-texts-wrapper {
    width: auto !important;
}
.fusion-builder-row-1 .fusion-title-rotating .fusion-animated-text {
    opacity: 1 !important;
    position: relative !important;
}

/* =========================================================
 * Mobile shop archive — drop the duplicate "Купити" button
 * Avada's `.product-buttons` row sits right below the price
 * with its own "Купити" / "Швидкий перегляд" pair. Below that,
 * our custom .fi-card-sizes (size chips) + .fi-card-buy
 * (wider Купити) row gives the shopper a faster path: pick a
 * size and tap a single full-width CTA.
 *
 * On mobile the duplicate is pure noise. Hide Avada's whole
 * .product-buttons row on shop archives ≤760px so only the
 * size chips + wide Купити remain. Quick-view was already
 * hidden ≤900px (further up in this file) so this just
 * removes the leftover small green "Купити" pill.
 * ========================================================= */
@media (max-width: 760px) {
    body.woocommerce.archive ul.products .product .product-buttons,
    body.woocommerce-page ul.products .product .product-buttons {
        display: none !important;
    }
}

/* =========================================================
 * Cart coupon percentage line — small caption below the
 * UAH discount amount (e.g. "−1 480,00 ₴" / "−20%").
 * Generated by feelit_append_coupon_percent in functions.php.
 * ========================================================= */
.fi-coupon-percent {
    display: block;
    margin-top: 2px;
    font-size: 0.78em;
    line-height: 1.2;
    color: var(--fi-warm-deep, #3a2920);
    opacity: 0.65;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* =========================================================
 * Checkout — air between the privacy-policy paragraph and
 * the "Підтвердити замовлення" submit button. Default WC
 * markup stacks them with no gap, which makes the button
 * look glued to the consent text.
 * ========================================================= */
.woocommerce-checkout .woocommerce-privacy-policy-text,
form.checkout .woocommerce-privacy-policy-text {
    margin-bottom: 16px;
}
.woocommerce-checkout .form-row.place-order,
form.checkout .form-row.place-order,
.woocommerce-checkout #place_order,
form.checkout #place_order {
    margin-top: 16px !important;
}

/* =========================================================
 * About-section display font helper — wrap a span in
 *   <span class="fi-font-display">FEEL IT</span>
 * inside the [feelit_about] body to give specific words a
 * different typographic treatment without touching the rest
 * of the paragraph. Tweak the font-family / weight here in
 * one place when the brand wordmark style changes.
 * ========================================================= */
.fi-about__text .fi-font-display,
.fi-font-display {
    font-family: var(--awb-typography3-font-family, var(--h2_typography-font-family, inherit));
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* The body is now a rich block (was a single <p>); space
   stacked paragraphs and inline images sensibly. */
.fi-about__text {
    font-size: inherit;
}
.fi-about__text p {
    margin: 0 0 0.85em;
}
.fi-about__text p:last-child {
    margin-bottom: 0;
}
.fi-about__text img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* =========================================================
 * Quick View modal — cap the modal width so an oversized
 * hero image doesn't leave a blank gutter on the right.
 * Avada's JS sizes the modal as `image_width + 500px`; we
 * cap it to a sane max so the summary fills cleanly.
 * (Size selector / qty / buy controls intentionally LEFT
 * IN the modal — the user wants the modal to be a real
 * mini-PDP, not just a preview.)
 * ========================================================= */
.fusion-woocommerce-quick-view-container.complete {
    max-width: min(100vw - 20px, 1100px) !important;
}
.fusion-woocommerce-quick-view-container .fusion-wqv-content > .product {
    width: 100%;
}
.fusion-woocommerce-quick-view-container .product .summary.entry-summary {
    flex: 1 1 auto !important;
}

/* =========================================================
 * Add-to-cart toast — make the leading check icon brand-
 * green and visible. Avada wraps WC's notice in
 * `.fusion-woo-notices-tb`; the actual leading check is
 * a Font Awesome `<i class="fusion-woo-notices-tb-icon">`
 * whose color comes from `--awb-success-icon-color` (which
 * itself falls back to `--awb-icon-color = inherit`). On
 * a cream/light banner background that resolves to a near-
 * invisible color. Override the CSS vars + a direct color
 * rule so the check is brand green regardless of which
 * cascade wins.
 *
 * Also keep the bare `.wc-block-components-notice-banner`
 * selectors as a safety net for contexts where Avada's
 * wrapper isn't present.
 * ========================================================= */
.fusion-woo-notices-tb {
    --awb-success-icon-color: var(--fi-green, #87af4d) !important;
    --awb-icon-color:         var(--fi-green, #87af4d) !important;
}
.fusion-woo-notices-tb .wc-block-components-notice-banner.is-success .fusion-woo-notices-tb-icon,
.fusion-woo-notices-tb .woocommerce-message .fusion-woo-notices-tb-icon,
.woocommerce-message .fusion-woo-notices-tb-icon {
    color: var(--fi-green, #87af4d) !important;
    opacity: 1 !important;
}

/* Bare WC block-notice fallback (no Avada wrapper) */
.wc-block-components-notice-banner.is-success {
    border-color: var(--fi-green, #87af4d) !important;
}
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon,
.wc-block-components-notice-banner.is-success svg {
    color: var(--fi-green, #87af4d) !important;
    fill: var(--fi-green, #87af4d) !important;
}
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon path,
.wc-block-components-notice-banner.is-success svg path {
    fill: var(--fi-green, #87af4d) !important;
    stroke: var(--fi-green, #87af4d) !important;
}
/* Mobile drawer brand — site logo as image (replaces text). */
.fi-drawer__logo {
    display: block;
    max-height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.fi-drawer__brand {
    display: inline-flex;
    align-items: center;
}

/* Update the .fi-btn-buy text color (the soft cream background
   was set earlier; user wants the label in #827B47 to match the
   global brand-button palette below). */
.fi-btn-buy {
    color: #827B47 !important;
}

/* =========================================================
 * Brand button color flip — every main CTA goes from bright
 * green (#87af4d) → soft cream-yellow (#eae199) with brand
 * warm-mid text (#827B47). This block lives at the end of
 * the stylesheet so it beats the per-surface rules above
 * that each set `var(--fi-green)` for background. Hover
 * states stay handled by the original rules (warm-deep
 * brown + white text), which use `:hover` and therefore win
 * specificity-wise without us needing to redeclare them.
 * Rules cover: PDP "КУПИТИ", shop-archive add-to-cart,
 * cart "Оформити замовлення", checkout "Підтвердити
 * замовлення" (block + classic), account login/register
 * submit, calc-shipping, mobile filter apply.
 * ========================================================= */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.fusion-woo-cart-1 .single_add_to_cart_button,
ul.products .product .add_to_cart_button,
ul.products .product a.button.product_type_variable,
ul.products .product a.button.product_type_simple,
.fusion-woo-related-tb .product .add_to_cart_button,
.fusion-woo-upsells-tb .product .add_to_cart_button,
.fusion-woo-products-tb .product .add_to_cart_button,
.cross-sells .product .add_to_cart_button,
.related.products .product .add_to_cart_button,
.upsells.products .product .add_to_cart_button,
.woocommerce-cart a.fusion-button[href*="checkout"],
.woocommerce-cart a.fusion-button.button-custom[href*="checkout"],
.woocommerce-cart a.fusion-button.checkout-button,
form.checkout #place_order,
.woocommerce-checkout #place_order,
button#place_order,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.fusion-button.button-flat,
.woocommerce-account button[type="submit"].button,
.woocommerce-shipping-calculator button[name="calc_shipping"],
.fi-filter-drawer__apply {
    background: #eae199 !important;
    background-color: #eae199 !important;
    background-image: none !important;
    color: #827B47 !important;
    /* Beat Avada's per-button CSS-variable inline cascade. */
    --button_gradient_top_color: #eae199 !important;
    --button_gradient_bottom_color: #eae199 !important;
    --button_accent_color: #827B47 !important;
}


/* ============================================================
 * BRAND BUY-BUTTON OVERRIDE  (2026-05-12)
 *
 * Replace the older `--fi-green` buy-button (rule ~line 2926)
 * with brand cream-yellow `--fi-buy-button` (#eae199) + warm-deep
 * text. Single CSS variable so future re-coloring is one line.
 * Appended at end of file so it wins the cascade vs the rule
 * above without needing higher specificity.
 *
 * Scope: shop loop card КУПИТИ, related, upsells, cross-sells.
 * Does NOT touch the cart "Оформити замовлення" or shipping-
 * calculator buttons (separate rules, separate decision).
 * ============================================================ */

:root {
  --fi-buy-button:       #eae199; /* cream-yellow */
  --fi-buy-button-text:  #3a2920; /* warm-deep brown */
}

.fusion-woo-related-tb .product .add_to_cart_button,
.fusion-woo-upsells-tb .product .add_to_cart_button,
.fusion-woo-products-tb .product .add_to_cart_button,
.cross-sells .product .add_to_cart_button,
.related.products .product .add_to_cart_button,
.upsells.products .product .add_to_cart_button,
ul.products .product .add_to_cart_button,
.fusion-woo-related-tb .product a.button.product_type_variable,
.fusion-woo-related-tb .product a.button.product_type_simple,
.fusion-woo-related-tb .product a.button.product_type_external,
.fusion-woo-related-tb .product a.button.product_type_grouped,
.cross-sells .product a.button.product_type_variable,
.cross-sells .product a.button.product_type_simple,
.related.products .product a.button.product_type_variable,
.related.products .product a.button.product_type_simple,
.upsells.products .product a.button.product_type_variable,
.upsells.products .product a.button.product_type_simple {
  background-color: var(--fi-buy-button, #eae199) !important;
  color:            var(--fi-buy-button-text, #3a2920) !important;
}

.fusion-woo-related-tb .product .add_to_cart_button:hover,
.fusion-woo-upsells-tb .product .add_to_cart_button:hover,
.fusion-woo-products-tb .product .add_to_cart_button:hover,
.cross-sells .product .add_to_cart_button:hover,
.related.products .product .add_to_cart_button:hover,
.upsells.products .product .add_to_cart_button:hover,
ul.products .product .add_to_cart_button:hover {
  background-color: var(--fi-warm-deep, #3a2920) !important;
  color:            var(--fi-buy-button, #eae199) !important;
}
/* === END BRAND BUY-BUTTON OVERRIDE === */

/* === FEELIT-PROMO-VIDEO-V2-CSS  (toggles desktop/mobile <video>) === */
.fi-promo-video__el--mobile { display: none; }
@media (max-width: 768px) {
    .fi-promo-video--has-mobile {
        aspect-ratio: var(--fi-promo-video-ratio-mobile, 792 / 1024) !important;
    }
    .fi-promo-video--has-mobile .fi-promo-video__el--desktop { display: none; }
    .fi-promo-video--has-mobile .fi-promo-video__el--mobile  { display: block; }
}
/* === END FEELIT-PROMO-VIDEO-V2-CSS === */

/* === FEELIT-PINK-LOGO-INLINE  (inline pink Feel-It wordmark in .fi-about copy) === */
.fi-about__text .fi-about__inline-logo {
    display: inline-block;
    height: 2.6em;
    width: auto;
    vertical-align: middle;
    margin: -0.2em 0.18em 0;
}
/* === END FEELIT-PINK-LOGO-INLINE === */

/* === FEELIT-ABOUT-INLINE-IMG-FALLBACK ===
 * Catch-all sizing for any image dropped into the About-section body
 * via «Add Media» (or otherwise without the fi-about__inline-logo class).
 * Without this, a regular WP-uploaded image would render full-width inside
 * the paragraph and break the layout. */
.fi-about__text p img:not(.fi-about__inline-logo) {
    display: inline-block;
    max-height: 2.6em;
    width: auto !important;
    vertical-align: middle;
    margin: -0.2em 0.18em 0;
}
/* === END FEELIT-ABOUT-INLINE-IMG-FALLBACK === */