/* ---- Brand palette (single source of truth) ---------------------------------
   Everything that used the hard-coded shop green / navy now reads these.
   Defaults below reproduce the original look exactly; the palette preview
   classes at the bottom of this file override them. */
:root {
    --af-green: #57b53a;
    --af-green-rgb: 87, 181, 58;
    --af-green-dark: #4aa22f;
    --af-green-deeper: #3d7a26;
    --af-green-tint: #e6f3df;
    --af-ink: #2c364a;
}

/* These links are excluded at generation time (functions.php nav filter),
   not hidden via CSS - see the wp_get_nav_menu_items filter. */
.preview_desc {
    display: none !important;
}

/* Shop/cart/checkout functionality on apifarm.app is only available to
   logged-in users - anonymous visitors stay on the read-only catalog. */
body:not(.apifarm-app-shop-access) .mini-cart-box,
body:not(.apifarm-app-shop-access) .search-cart3,
body:not(.apifarm-app-shop-access) a.nav-item.cart,
body:not(.apifarm-app-shop-access) .cart-items,
body:not(.apifarm-app-shop-access) .woocommerce-cart-form,
body:not(.apifarm-app-shop-access) .cart-collaterals,
body:not(.apifarm-app-shop-access) .woocommerce-checkout,
body:not(.apifarm-app-shop-access) .addcart-link,
body:not(.apifarm-app-shop-access) button[name="add-to-cart"],
body:not(.apifarm-app-shop-access) .single_add_to_cart_button,
body:not(.apifarm-app-shop-access) form.cart,
body:not(.apifarm-app-shop-access) .checkout-button,
body:not(.apifarm-app-shop-access) .button.checkout,
body:not(.apifarm-app-shop-access) .woocommerce-mini-cart,
body:not(.apifarm-app-shop-access) .list-inline-block.wrap-qty-extra,
body:not(.apifarm-app-shop-access) .wrap-qty-extra,
body:not(.apifarm-app-shop-access) .fly_btn_container,
body:not(.apifarm-app-shop-access) [href*="/cart/"],
body:not(.apifarm-app-shop-access) [href*="/checkout/"],
body:not(.apifarm-app-shop-access) [href*="add-to-cart"] {
    display: none !important;
}

.detail-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.product-detail > .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.product-detail > .row > [class*="col-"] {
    float: none !important;
}

.product-detail .detail-info {
    min-height: 100% !important;
}

.detail-info h2.title30.font-bold {
    margin-bottom: 15px;
}

.app-header-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
}

.app-header-phone {
    color: #1f1f1f;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}

.app-callback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 18px;
    border-radius: 3px;
    background: #70a83b;
    color: #fff !important;
    line-height: 1;
    white-space: nowrap;
}

.app-callback-btn:hover,
.app-callback-btn:focus {
    background: #5f9430;
    color: #fff !important;
}

@media (max-width: 991px) {
    .app-header-contact {
        min-height: 56px;
        gap: 8px;
        float: right !important;
    }
    .app-header-phone {
        font-size: 14px;
    }
    .app-callback-btn {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .app-header-contact {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        margin-top: 6px;
    }
}


.app-callback-modal .wrapper-inner {
    max-width: 430px;
}

.app-callback-modal .form-group {
    margin-bottom: 16px;
}

.app-callback-modal .contact.form-control {
    width: 100%;
}

/* --- Mobile header + product CTA fixes --- */

/* Give the mobile horizontal menu bar a real background/spacing so it reads
   as part of the header instead of floating unstyled text above it. */
@media (max-width: 998px) {
    .mobile_horizontal_menu {
        background: #f7f9f5;
        border-bottom: 1px solid #e6ebe2;
    }
    .mobile_horizontal_menu ul {
        padding: 10px 15px;
    }
    .mobile_horizontal_menu ul li {
        padding: 4px 11px;
    }
    .mobile_horizontal_menu ul .current-menu-item a {
        font-weight: 700;
    }
}

/* The parent theme hides the product-card "Подробнее" button below 998px
   (main.css line ~1968), leaving cards with no visible call-to-action on
   mobile. Restore it here, centered, since the cart button stays hidden
   in catalog-only mode. */
@media (max-width: 998px) {
    .product-extra-link {
        display: flex !important;
        justify-content: center;
    }
    .button.green.additional {
        display: inline-flex !important;
        margin-top: 8px;
    }
}

/* --- Header layout: replace float-based pull-left/pull-right with flex so
   logo / nav / phone+button stay balanced and vertically centered at every
   viewport width, instead of drifting apart on wide screens. --- */
.col-menu-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.col-menu-header .logo.logo3 {
    float: none !important;
    margin-bottom: 0 !important;
}

.main-nav.main-nav3 {
    float: none !important;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.col-menu-header .app-header-contact {
    float: none !important;
}

/* Desktop: stack the phone number and callback button instead of a row,
   shrinking the button so the pair still fits the header's height. */
@media (min-width: 992px) {
    .app-header-contact {
        flex-direction: column;
        /* align-items: flex-end; */
        justify-content: center;
        gap: 0px;
        /* min-height: 0; */
        margin-right: 15px;
    }
}

/* --- Callback button: use the site's real button language (pill shape,
   brand green, dark-navy hover) instead of a mismatched flat rectangle. --- */
.app-callback-btn {
    border-radius: 18px;
    background: var(--af-green,#57b53a);
    border: 1px solid var(--af-green,#57b53a);
    padding: 0 25px;
}

.app-callback-btn:hover,
.app-callback-btn:focus {
    background: var(--af-ink,#2c364a);
    border-color: var(--af-ink,#2c364a);
    color: #fff !important;
}

/* .pull-left utility (main.css) adds margin-right:20px to anything with that
   class, including the nav - scoped override so the nav sits flush in its
   centered flex slot without the extra gap. */
.main-nav.main-nav3.pull-left {
    margin-right: 0;
}

/* Sticky header (added on scroll via .fixed-ontop) shrinks to padding:10px 0
   in main.css - remove it so the sticky bar has no vertical padding. */
.fixed-ontop header .main-header3 {
    padding: 0;
}

/* Callback modal success/info message - inherits an oversized line-height
   from elsewhere, looks off in the small modal box. */
.alert.alert-info.text-center {
    line-height: normal;
}

/* Base header padding (main.css: 25px 0) is heavy relative to the 82px logo -
   tighten it up for a more compact header. */
.main-header3 {
    padding: 0;
}

/* Newsletter subscribe row: main.css hardcodes .inner-newsletter p to
   width:150px, which was fine for a short caption but wraps this longer
   sentence one word per line. Widen it and left-align for readability. */
.inner-newsletter p {
    width: 260px;
    text-align: left;
}

@media (max-width: 767px) {
    .inner-newsletter p {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
}

/* Newsletter subtext: normal line-height (was inheriting an oversized one)
   and breathing room before the email input below it. */
.inner-newsletter p {
    line-height: normal;
    margin-bottom: 15px;
}

/* Mobile header overflow: on narrow phones (<=375px, e.g. iPhone SE/6/7/8)
   the phone number + callback button don't reliably wrap onto their own row
   and run off the right edge instead. Force the wrap and shrink the button
   so the whole header row stays inside the viewport. */
@media (max-width: 400px) {
    .col-menu-header {
        flex-wrap: wrap !important;
    }
    .app-header-contact {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        flex-basis: 100% !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 4px !important;
    }
    .app-header-phone {
        font-size: 13px !important;
    }
    .app-callback-btn {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* Mobile header: the desktop nav/cart that used to balance the logo on
   either side are hidden below 998px, so space-between leaves the logo
   stranded on the left. Center it on its own line instead. */
@media (max-width: 998px) {
    .col-menu-header {
        justify-content: center !important;
    }
    .main-header3 {
        padding: 15px 0 0 !important;
    }
}

.mobile_horizontal_menu ul {
    justify-content: center;
}


.app-login-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d9e5d2;
    border-radius: 50%;
    color: var(--af-ink,#2c364a) !important;
    background: #fff;
    transition: all .2s ease;
}

.app-login-open:hover,
.app-login-open:focus {
    color: #fff !important;
    background: var(--af-green,#57b53a);
    border-color: var(--af-green,#57b53a);
}

.app-login-modal .wrapper-inner {
    max-width: 430px;
}

.app-login-modal .form-group {
    margin-bottom: 16px;
}

.app-login-modal .form-control {
    width: 100%;
}

/* The parent theme only sets height:45px for [type=text/email/tel] inside
   .form-group, missing [type=password] - without this the password field
   falls back to Bootstrap's 38px calc-height, mismatching the text input. */
.app-login-modal input[type="password"].form-control {
    height: 45px;
    padding: 0 15px;
}

@media (max-width: 400px) {
    .app-login-open {
        width: 34px;
        height: 34px;
    }
}


.main-nav3 li a[href="#login"],
.mobile_horizontal_menu li a[href="#login"],
.main-nav3 li a[href*="/login/"],
.mobile_horizontal_menu li a[href*="/login/"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.app-menu-login-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* The whole "added to cart" popup should read as one clickable link to the
   cart, not just the small image/title links inside it. */
.cart-notice {
    cursor: pointer;
}

.cart-notice__close {
    cursor: pointer;
}

/* All modal inputs/textareas share one consistent border. */
.app-login-modal .form-control,
.app-login-modal textarea,
.app-callback-modal .form-control,
.app-callback-modal textarea,
.modal-newsletter .form-control,
.modal-newsletter textarea {
    border: 1px solid #333;
}

/* Catalog search box is shown to everyone; the tag chips row
   (.products_types_tags) stays hidden for accounts without shop access. */
body:not(.apifarm-app-shop-access) .catalog-filters .products_types_tags,
body:not(.apifarm-app-shop-access) .catalog-filters .price-range {
    display: none !important;
}

.af-city-change {
    color: #70a83b;
    text-decoration: underline;
    cursor: pointer;
}

.app-city-title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.af-city-search {
    height: 45px !important;
    padding: 0 15px !important;
}

/* The parent theme's global .form-group input[type=...] rule adds a 30px
   margin-bottom meant for stacked form fields - wastes space here, where
   the locate link/toggle/map need to sit right under the search box.
   Scoped to just the picker's own inputs so no other form on the site
   (checkout, contact, login...) loses that spacing. */
.af-delivery-root .form-group input[type="text"] {
    margin-bottom: 0;
}

.af-city-list {
    margin-top: 10px;
    border-top: 1px solid #e6ebe2;
}

.af-city-row,
.afrc-row {
    padding: 14px 8px;
    font-size: 18px;
    line-height: 1.3;
    border-bottom: 1px solid #e6ebe2;
    cursor: pointer;
}

.af-city-region {
    display: block;
    font-size: 14px;
    color: #888;
}

.af-city-row:hover,
.af-city-row:active,
.afrc-row:hover,
.afrc-row:active {
    background: #f2f6ee;
    color: var(--af-green,#57b53a);
}

.af-city-empty {
    padding: 14px 8px;
    font-size: 16px;
    color: #888;
    text-align: center;
}

/* Desktop: keep the product image pinned to the top of the screen while the
   longer detail-info column (price/description/etc) keeps scrolling past it. */
@media (min-width: 992px) {
    .product-detail > .row {
        align-items: flex-start !important;
    }

    .product-detail .gallery-coll {
        position: sticky;
        top: calc(var(--app-header-offset, 90px) + 15px);
    }
}

/* .wrap has overflow:auto in the parent theme (likely old float-clearfix),
   which silently breaks position:sticky for every descendant (any ancestor
   overflow other than visible clips/reframes sticky positioning) - this is
   what was blocking the sticky product-gallery image above. */
.wrap {
    overflow: visible;
}

/* /login/ (WooCommerce My Account, form-login.php/form-lost-password.php in
   the parent theme) ships with zero theme styling in WooCommerce's default
   markup - bare browser-default inputs and an unstyled button. Card the
   forms and match the button/input language used elsewhere on the site
   (callback modal, city picker). */
.woocommerce-form-login,
.woocommerce-ResetPassword,
.woocommerce-form-register {
    box-sizing: border-box;
    max-width: 420px;
    margin: 24px auto 40px;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid #e6ebe2;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.woocommerce-form-login .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 18px;
}

.woocommerce-form-login label,
.woocommerce-ResetPassword label,
.woocommerce-form-register label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.woocommerce-form-login .required,
.woocommerce-ResetPassword .required,
.woocommerce-form-register .required {
    color: #c0392b;
}

.woocommerce-form-login .input-text,
.woocommerce-ResetPassword .input-text,
.woocommerce-form-register .input-text {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 15px;
}

/* Sessions are forced to persist ~10 years regardless of this checkbox
   (see mu-plugins/openclaw-persistent-login.php), so it no longer does
   anything - hide it rather than leave a misleading control. */
.woocommerce-form-login__rememberme {
    display: none !important;
}

/* The remember-me + submit row is the only <p class="form-row"> without the
   extra woocommerce-form-row/form-row-wide classes the field rows carry -
   used here instead of :has() for older-browser compatibility. */
.woocommerce-form-login p.form-row:not(.woocommerce-form-row) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 0;
}

.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-ResetPassword .woocommerce-Button.button,
.woocommerce-form-register .woocommerce-Button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border: none;
    border-radius: 18px;
    background: var(--af-green,#57b53a);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-ResetPassword .woocommerce-Button.button:hover,
.woocommerce-form-register .woocommerce-Button.button:hover {
    background: var(--af-ink,#2c364a);
}

.woocommerce-LostPassword {
    margin-top: 18px;
    font-size: 14px;
}

.woocommerce-LostPassword a {
    color: var(--af-green,#57b53a);
    text-decoration: underline;
}

/* Footer menu duplicate - the getMenu() output is styled for a horizontal
   header nav by default, restyle as a simple vertical footer list. */
.footer-menu-dup ul {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
}

.footer-menu-dup ul li {
    margin-bottom: 8px;
}

.footer-menu-dup ul li a {
    color: #333;
    opacity: 0.85;
}

.footer-menu-dup ul li a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* My Account inner pages (/login/ dashboard, orders, edit-account,
   payment-methods) - same "bare WooCommerce defaults, zero theme styling"
   problem the login form had. Card the content column (nav sidebar is
   already styled in main.css) and reuse the same input/button language
   as the login form. */
.woocommerce-MyAccount-content {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6ebe2;
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.woocommerce-MyAccount-content p {
    margin: 0 0 14px;
    line-height: 1.6;
}

.woocommerce-MyAccount-content a {
    color: var(--af-green,#57b53a);
    text-decoration: underline;
}

.woocommerce-MyAccount-content .form-row {
    margin-bottom: 18px;
}

.woocommerce-MyAccount-content label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.woocommerce-MyAccount-content .required {
    color: #c0392b;
}

.woocommerce-MyAccount-content .input-text {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 420px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 15px;
}

.woocommerce-MyAccount-content fieldset {
    border: none;
    padding: 0;
    margin: 24px 0 0;
}

.woocommerce-MyAccount-content fieldset legend {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    padding: 0;
}

.woocommerce-MyAccount-content .woocommerce-Button.button,
.woocommerce-MyAccount-content button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border: none;
    border-radius: 18px;
    background: var(--af-green,#57b53a);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

.woocommerce-MyAccount-content .woocommerce-Button.button:hover,
.woocommerce-MyAccount-content button.button:hover {
    background: var(--af-ink,#2c364a);
}

.woocommerce-MyAccount-content .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e6ebe2;
    text-align: left;
    font-size: 14px;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th {
    color: #888;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button {
    min-height: 32px;
    padding: 0 16px;
    font-size: 13px;
}

.woocommerce-MyAccount-content .woocommerce-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    background: #f2f6ee;
    border-radius: 6px;
    border: 1px solid #e2ebda;
    margin: 0;
}

@media (max-width: 767px) {
    .woocommerce-MyAccount-content {
        padding: 20px 16px;
    }
}

/* Addresses tab (my-address.php: billing/shipping cards + form-edit-address.php).
   WooCommerce's own generic .u-columns/.u-column1/.u-column2 grid isn't
   styled anywhere in this Bootstrap-based theme, so it renders unstyled. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
}

.woocommerce-MyAccount-content .woocommerce-Address {
    flex: 1 1 280px;
    padding: 20px;
    background: #f9faf8;
    border: 1px solid #e6ebe2;
    border-radius: 6px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 16px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
    color: var(--af-green,#57b53a);
    text-decoration: underline;
    font-size: 14px;
    white-space: nowrap;
}

.woocommerce-MyAccount-content address {
    font-style: normal;
    line-height: 1.6;
    color: #333;
}

.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row {
    max-width: 420px;
}

/* Delivery address book (My Account) and checkout address picker. */
.app-address-book__list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.app-address-card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 15px;
    width: 280px;
    max-width: 100%;
    position: relative;
}

.app-address-card__badge {
    display: inline-block;
    background: var(--af-green,#57b53a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.app-address-card__name {
    font-weight: 700;
}

.app-address-card__line {
    color: #666;
    font-size: 14px;
    margin-top: 2px;
}

.app-address-card__actions {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}

.app-address-card__actions a {
    color: var(--af-green,#57b53a);
}

.app-address-delete {
    color: #d9534f !important;
}

.app-address-form {
    max-width: 420px;
    margin-top: 15px;
}

.app-address-form .form-group {
    margin-bottom: 12px;
}

.app-address-form textarea.form-control {
    min-height: 80px;
    padding: 10px 15px;
}

.app-address-form-cancel {
    margin-left: 10px;
    background: #f1f1f1;
}

.app-checkout-address-picker {
    margin-bottom: 20px;
}

.app-checkout-address-picker__item {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
    cursor: pointer;
}

.app-checkout-address-picker__item input {
    margin-right: 8px;
}

.app-checkout-address-picker__item:has(input:checked) {
    border-color: var(--af-green,#57b53a);
    background: rgba(var(--af-green-rgb,87,181,58), 0.05);
}

/* Show/hide toggle button injected next to every password field. */
/* WooCommerce's own woocommerce.js wraps every .woocommerce-Input[type=password]
   field (e.g. the native /login/ page's #password) in its own .password-input
   span and appends a competing .show-password-input button - redundant with
   and visually/click-conflicting with our .app-password-toggle above, which
   already covers every password field on the site (including this one). Hide
   WC's native one rather than trying to prevent it from running. */
.show-password-input {
    display: none !important;
}

.app-password-wrapper {
    position: relative;
    display: block;
}

.app-password-wrapper input.app-pw-toggled {
    padding-right: 42px !important;
    float: none !important;
    width: 100%;
    box-sizing: border-box;
}

.app-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #999;
}

.app-password-toggle:hover {
    color: var(--af-green,#57b53a);
}

.app-password-toggle .icon-eye-off {
    display: none;
}

.app-password-toggle.is-visible .icon-eye {
    display: none;
}

.app-password-toggle.is-visible .icon-eye-off {
    display: block;
}

/* Coupon remove button: WooCommerce's default markup is just an
   aria-labelled "[Remove]" text link, invisible until :hover under this
   theme's link reset - give it an always-visible "x" affordance instead. */
.woocommerce-remove-coupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50%;
    background: #d9534f;
    font-size: 0;
    line-height: 1;
    text-decoration: none !important;
    vertical-align: middle;
}

.woocommerce-remove-coupon::before {
    content: "\00d7";
    font-size: 14px;
    color: #fff;
}

.woocommerce-remove-coupon:hover {
    background: #c9302c;
}

/* Make an applied coupon's discount line obviously stand out in the cart
   and checkout totals table. */
tr.cart-discount th,
tr.cart-discount td {
    background: #eef8ec;
    color: #2f8a1d;
    font-weight: 600;
}

tr.cart-discount .amount {
    color: #2f8a1d;
}

/* The actual "Отменить" (remove coupon) button used on this site is
   .unsetcoupon (see the parent theme's woocommerce/cart/cart-coupons.php) -
   the .button base class it uses sets color:#fff with no background of its
   own (only .bg-color adds one, and this link doesn't have that class), so
   the white text is invisible until :hover fills in a dark background.
   Give it its own always-visible fill. */
.unsetcoupon.button {
    background: #d9534f;
    border-color: #d9534f;
}

.unsetcoupon.button:hover {
    background: #c9302c;
    border-color: #c9302c;
}

/* "Быстрая доставка" city/ПВЗ picker (.af-delivery-root) - this list had no
   styling at all before (checked both themes' CSS), regardless of whether
   it shows cities or pickup points.
   No max-height/overflow here anymore - the two had created a short inner
   scroll box nested inside the much taller floating .af-city-panel card
   (full-screen picker redesign), clipping the last card/button at the inner
   box's edge well above where the actual panel ended. The panel itself is
   now the only scroll container. */
.af-city-list {
    margin-top: 10px;
}

.af-city-row,
.afrc-row,
.af-pvz-row {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.af-city-row:hover,
.afrc-row:hover,
.af-pvz-row:hover {
    background: #f7f9f5;
}

.af-city-region {
    color: #999;
    font-size: 13px;
}

.af-pvz-address {
    font-weight: 600;
}

.af-pvz-schedule {
    color: #999;
    font-size: 13px;
    margin-top: 2px;
}

.af-pvz-back {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--af-green,#57b53a);
}

.af-city-empty {
    padding: 10px 12px;
    color: #999;
}

/* Map-based address picker: the map is a true full-bleed background filling
   the entire viewport (like a real map app, same as when this was a
   modal), and the search/list panel floats on top of it as its own card
   (left side, its own scroll/shadow) rather than sitting in a side-by-side
   column that shrinks the map. Lives on its own page now
   (page-delivery-address.php, .af-delivery-root) - the site's own
   header/footer/bottom nav are hidden via .af-delivery-fullscreen (added
   to <body> only on this page) rather than this template skipping
   get_header()/get_footer(), so wp_head()/wp_footer() still fire and the
   enqueued CSS/JS actually load. */
body.af-delivery-fullscreen #header,
body.af-delivery-fullscreen footer,
body.af-delivery-fullscreen .mobile-bottom-nav,
body.af-delivery-fullscreen .fly_btn_container {
    display: none !important;
}

body.af-delivery-fullscreen {
    overflow: hidden;
}

.af-delivery-root {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
}

.af-delivery-back {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--af-green,#57b53a);
}

.af-city-map-pane {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #f2f6ee;
}

.af-city-map {
    position: absolute;
    inset: 0;
}

.af-city-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 2;
}

/* Mobile "Карта"/"Список" toggle (Самовывоз only) - hidden on desktop,
   where the map is always visible as the full-bleed background. On mobile
   there's no room for both at once, so js/delivery-picker.js moves the
   .af-city-map-pane element itself in and out of .af-pvz-panel's own flow
   depending on which is selected (see layoutMapForViewport()), rather than
   this being pure CSS. */
.af-pvz-view-toggle {
    display: none;
}

/* "Фильтры": trigger button inside the left panel + a floating card to the
   right of it (bottom sheet on mobile). Filters by pickup-point subtype
   (see pvzPointType() in delivery-picker.js) - purely client-side. */
.af-pvz-filters-toggle {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 460px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 0;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}

.af-delivery-root.af-mode-nonpvz .af-pvz-filters-toggle {
    display: none;
}

.af-pvz-filters-card {
    display: none;
    position: absolute;
    z-index: 20;
    top: 20px;
    left: 460px;
    width: 300px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 20px;
}

.af-pvz-filters-card.open {
    display: block;
}

.af-pvz-filters-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.af-pvz-filters-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
}

.af-pvz-filters-reset {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--af-green,#57b53a);
    font-weight: 600;
    cursor: pointer;
}

.af-pvz-filter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    margin: 0;
    cursor: pointer;
}

.af-pvz-filter-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.af-pvz-filter-label {
    font-size: 16px;
}

.af-pvz-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.af-pvz-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.af-pvz-switch i {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #ececec;
    transition: background 0.15s;
}

.af-pvz-switch i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #b5b5b5;
    transition: transform 0.15s, background 0.15s;
}

.af-pvz-switch input:checked + i::after {
    background: var(--af-green,#57b53a);
    transform: translateX(22px);
}

.af-pvz-filters-close {
    font: inherit;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: #f3f3f3;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .af-pvz-filters-toggle {
        top: 10px;
        left: 10px;
        padding: 10px 14px;
    }

    .af-pvz-filters-card {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        max-height: 80%;
        border-radius: 16px 16px 0 0;
        z-index: 200;
    }
}

@media (max-width: 767px) {
    /* Default (not reparented into a panel yet): stay hidden, same as
       before this toggle existed. */
    .af-delivery-root > .af-city-map-pane {
        display: none;
    }

    .af-pvz-view-toggle {
        display: flex;
        gap: 8px;
        margin: 0 0 10px;
        flex-shrink: 0;
    }

    .af-pvz-view-btn {
        padding: 8px 18px;
        border-radius: 20px;
        border: 1px solid #e6ebe2;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
    }

    .af-pvz-view-btn.active {
        background: var(--af-green,#57b53a);
        border-color: var(--af-green,#57b53a);
        color: #fff;
    }

    /* Once moved inside .af-pvz-panel/.af-courier-panel, the map stops
       being an absolute full-bleed background and becomes a normal block
       in the panel's own flow - edge-to-edge (the -20px cancels the
       panel's own padding) rather than inset/rounded. flex:1 1 auto (not a
       fixed vh) so it fills whatever's actually left over after the
       search/locate/toggle controls above it, instead of a guessed height
       that wastes space those controls don't use. */
    .af-pvz-panel .af-city-map-pane,
    .af-courier-panel .af-city-map-pane {
        position: relative;
        inset: auto;
        flex: 1 1 auto;
        min-height: 200px;
        margin: 0 -20px 16px;
        border-radius: 0;
        overflow: hidden;
        display: none;
    }

    /* Курьером/Почта: no border/gap on any side - edge-to-edge left/right
       (inherited above) and flush down to the address/apartment/confirm
       block right below it too. */
    .af-courier-panel .af-city-map-pane {
        margin-bottom: 0;
    }

    .af-pvz-panel.af-mobile-view-map .af-city-map-pane {
        display: block;
    }

    .af-pvz-panel.af-mobile-view-map .af-city-list {
        display: none;
    }

    /* The list area isn't just left blank in "Карта" view - a short hint
       explains what to do with the map instead. */
    .af-pvz-map-hint {
        display: none;
        margin: 0;
        padding: 14px 0;
        color: #888;
        text-align: center;
        font-size: 14px;
    }

    .af-pvz-panel.af-mobile-view-map .af-pvz-map-hint {
        display: block;
    }

    /* Курьером/Почта has no Список/Карта toggle - the map (crosshair pin
       for picking an address) is simply always shown, same as desktop. */
    .af-courier-panel.af-mobile-has-map .af-city-map-pane {
        display: block;
    }

    /* Everything else in the courier panel keeps its natural size - only
       the map (flex: 1 1 auto above) absorbs any extra/missing space. */
    .af-courier-panel.af-mobile-has-map > *:not(.af-city-map-pane) {
        flex-shrink: 0;
    }
}

.af-pvz-map-hint {
    display: none;
}

/* Blocks interaction with the whole picker (map + search panel) until the
   Yandex Maps API has actually finished loading - above the panel (10)
   and map (1) so nothing underneath is clickable in the meantime. */
.af-city-map-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 15;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}

.af-city-map-loading.active {
    display: flex;
}

.af-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e6ebe2;
    border-top-color: var(--af-green,#57b53a);
    border-radius: 50%;
    animation: af-spin 0.8s linear infinite;
}

@keyframes af-spin {
    to {
        transform: rotate(360deg);
    }
}

.af-city-panel {
    position: relative;
    z-index: 10;
    width: 420px;
    max-width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Title/tabs stay put; only the active sub-panel's own content area below
   them scrolls (the ПВЗ card list, mainly - the "Курьером"/"Почта" forms
   are short and rarely need it, but get the same treatment for free). */
.af-delivery-root .app-city-title,
.af-delivery-tabs {
    flex-shrink: 0;
}

.af-pvz-panel,
.af-courier-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.af-pvz-panel .af-city-search-wrap,
.af-courier-panel .af-courier-search-wrap,
.af-pvz-panel > .af-locate-btn {
    flex-shrink: 0;
    margin-bottom: 8px;
}

.af-city-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.af-courier-panel {
    overflow-y: auto;
}

@media (max-width: 767px) {
    .af-city-panel {
        width: auto;
        max-width: none;
        /* Full height (not auto) so the map block below, flex:1 1 auto,
           has an actual remaining-space amount to grow into instead of
           collapsing to nothing - see .af-pvz-panel .af-city-map-pane. */
        height: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.af-delivery-root .app-city-title {
    margin-bottom: 12px;
}

.af-delivery-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.af-delivery-tab {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e6ebe2;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
}

.af-delivery-tab.active {
    background: var(--af-green,#57b53a);
    border-color: var(--af-green,#57b53a);
    color: #fff;
}

.af-courier-search-wrap,
.af-city-search-wrap {
    position: relative;
}

.af-city-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #e6ebe2;
    border-top: none;
    z-index: 5;
    max-height: 240px;
    overflow-y: auto;
}

.af-courier-suggest-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.af-courier-suggest-item:hover {
    background: #f7f9f5;
}

.af-locate-btn {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    border: none;
    background: none;
    color: var(--af-green,#57b53a);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

.af-courier-heading {
    margin: 0 0 12px;
    font-weight: 600;
}

.af-courier-address {
    margin-bottom: 16px;
    font-size: 15px;
}

.af-courier-confirm {
    width: 100%;
    margin-top: 8px;
}

.af-courier-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ПВЗ cards - restyled from the old plain-text clickable rows into a real
   card per point (title/address/schedule/payment + an explicit "Забрать
   здесь" button), matching the leomax.ru reference look. Overrides the
   padding/border on the older, plainer .af-pvz-row rule earlier in this
   file rather than replacing it, so nothing else that still shares that
   class name loses its base styling. */
.af-pvz-row {
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e6ebe2;
    border-radius: 8px;
    cursor: default;
}

.af-pvz-row-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.af-pvz-address {
    color: #333;
}

.af-pvz-payment {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 13px;
    margin-top: 4px;
}

.af-pvz-select-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
}

/* Map balloon (opens on a pickup-point marker click) - same card content as
   the sidebar row, with its own "Забрать здесь" confirm button. */
.af-balloon {
    padding: 4px 2px;
    min-width: 220px;
}

.af-balloon-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.af-balloon-address {
    color: #333;
    margin-bottom: 4px;
}

.af-balloon-schedule,
.af-balloon-payment {
    color: #888;
    font-size: 13px;
    margin-bottom: 4px;
}

.af-balloon-select {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* The card/shadow/pointer chrome that Yandex's native balloon used to
   provide for free - .af-balloon above is just the inner content, built
   and positioned manually now (see showMapPopup() in delivery-picker.js). */
.af-map-popup {
    display: none;
    position: absolute;
    transform: translate(-50%, -100%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    padding: 12px 14px;
    width: 240px;
    z-index: 20;
}

.af-map-popup.active {
    display: block;
}

.af-map-popup::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #fff;
}

/* Flipped below the marker instead (see showMapPopup() - used when there
   isn't room above within the visible map area) - anchor point and pointer
   triangle both swap to the opposite side. */
.af-map-popup.below {
    transform: translate(-50%, 0);
}

.af-map-popup.below::after {
    bottom: auto;
    top: -8px;
    border-top-color: transparent;
    border-bottom-color: #fff;
}

/* Highlights the pickup point already saved as the user's default address
   when they reopen the picker to change it (see selectedPlaceId in the
   footer.php script) - the button also switches to a disabled-looking
   "Выбрано" label instead of "Забрать здесь" for that one card. */
.af-pvz-row.is-selected {
    border-color: var(--af-green,#57b53a);
    border-width: 2px;
    background: #f7fdf5;
}

.af-pvz-row.is-selected .af-pvz-select-btn {
    background: var(--af-green-tint,#e6f3df);
    color: var(--af-green-deeper,#3d7a26);
    border-color: #c3e0b4;
    cursor: default;
}

/* WooCommerce's own My Account styles (.woocommerce a.button/button.button)
   repaint any .button with a gray background + dark text at higher
   specificity than our theme's plain .button/.bg-color classes - this
   beats it back without !important by just adding one more class to the
   selector (3 classes > WooCommerce's 2 classes + tag). */
.app-address-book .button.app-address-pick-map {
    color: #fff;
    background: var(--af-green,#57b53a);
    border-color: var(--af-green,#57b53a);
    display: inline-block;
    margin-top: 12px;
}

.af-suggest-region {
	margin-left: 6px;
	font-size: 12px;
	color: var(--af-green,#57b53a);
	white-space: nowrap;
}

/* ---- Unified buttons for the map picker module ----------------------------
   One element (<button class="af-btn ...">), one shape: pill, site font,
   15px/600, 44px tall. Modifiers: --primary (green fill: select/confirm),
   --secondary (white + light border: tabs, view toggle, Фильтры, Закрыть),
   --block (full width). Text links (locate/reset/back) are separate. */
.af-delivery-root .af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #e6ebe2;
    border-radius: 24px;
    background: #fff;
    color: #2b2b2b;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.af-delivery-root .af-btn--block {
    display: flex;
    width: 100%;
}

.af-delivery-root .af-btn--secondary:hover {
    border-color: var(--af-green,#57b53a);
}

.af-delivery-root .af-btn--primary,
.af-delivery-root .af-btn--secondary.active {
    background: var(--af-green,#57b53a);
    border-color: var(--af-green,#57b53a);
    color: #fff;
}

.af-delivery-root .af-btn--primary:not(:disabled):hover {
    background: var(--af-green-dark,#4aa22f);
    border-color: var(--af-green-dark,#4aa22f);
}

.af-delivery-root .af-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.af-delivery-root .af-pvz-row.is-selected .af-btn--primary {
    background: var(--af-green-tint,#e6f3df);
    border-color: #c3e0b4;
    color: var(--af-green-deeper,#3d7a26);
}

.af-delivery-root .af-courier-confirm {
    margin-top: 8px;
    flex-shrink: 0;
}

.af-delivery-root button.af-locate-btn,
.af-delivery-root button.af-pvz-filters-reset,
.af-delivery-root a.af-delivery-back {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--af-green,#57b53a);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
}

.af-delivery-root a.af-delivery-back {
    text-decoration: none;
}

/* ---- Compact pickup-point cards (sidebar list + map popup) ----------------
   Markup comes from buildPointInfoHtml() in delivery-picker.js. */
.af-delivery-root .af-pvz-row {
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e6ebe2;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.af-delivery-root .af-pvz-row:hover {
    background: #fff;
    border-color: var(--af-green,#57b53a);
    box-shadow: 0 4px 14px rgba(var(--af-green-rgb,87,181,58), 0.15);
}

.af-delivery-root .af-pvz-row.is-selected {
    border-color: var(--af-green,#57b53a);
    background: #f4fbf1;
}

.af-pt-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.af-pt-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.af-pt-text {
    min-width: 0;
}

.af-pt-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.af-pt-address {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.3;
    color: #444;
}

.af-pt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 14px;
    margin-top: 5px;
    font-size: 13px;
    color: #7a7a7a;
}

.af-pt-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.af-pt-meta svg {
    color: var(--af-green,#57b53a);
    flex-shrink: 0;
}

.af-delivery-root .af-pvz-select-btn,
.af-delivery-root .af-balloon-select {
    margin-top: 12px;
}

/* locate link with its icon */
.af-delivery-root button.af-locate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.af-delivery-root button.af-locate-btn span {
    text-decoration: underline;
}

.af-pt-meta .af-pt-price {
    color: #2b2b2b;
    font-weight: 700;
}

/* Loading placeholder for the delivery cost until SDT answers (see
   loadCostsForPoints() in delivery-picker.js). */
.af-pt-price--loading {
    display: inline-block;
    width: 84px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, #ececec 25%, #f6f6f6 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: af-pt-shimmer 1.2s linear infinite;
}

@keyframes af-pt-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Mobile: selected-point info lives in the zone under the map instead of a
   floating popup (see showMapPopup() in delivery-picker.js). */
.af-pvz-sheet {
    display: none;
}

@media (max-width: 767px) {
    .af-map-popup {
        display: none !important;
    }

    /* Space is tight: no title, no hint line - the map takes everything down
       to the bottom edge, and the selected point's info slides up over the
       bottom of the map as a sheet. */
    .af-delivery-root .app-city-title,
    .af-courier-heading,
    .af-pvz-map-hint,
    .af-pvz-panel.af-mobile-view-map .af-pvz-map-hint {
        display: none;
    }

    .af-pvz-panel {
        position: relative;
    }

    .af-courier-panel.af-mobile-has-map .af-city-map-pane {
        margin-bottom: 12px;
    }

    .af-pvz-panel.af-mobile-view-map .af-city-map-pane {
        margin-bottom: -20px;
    }

    .af-pvz-panel.af-mobile-view-map .af-pvz-sheet.active {
        display: block;
        position: absolute;
        left: -20px;
        right: -20px;
        bottom: -20px;
        z-index: 6;
        padding: 16px 20px 20px;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
    }
}

/* Квартира input + "Подтвердить адрес" share one row. */
.af-courier-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
}

.af-courier-actions .af-courier-apartment {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.af-delivery-root .af-courier-actions .af-courier-confirm {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* .af-courier-panel scrolls (overflow-y:auto), which clips children's
       negative margins at its own edge - so the map couldn't reach the
       screen sides. Let the panel itself span the full width and put the
       20px back as padding; the map's -20px margin then fits inside it. */
    .af-courier-panel.af-mobile-has-map {
        margin: 0 -20px;
        padding: 0 20px;
    }
}

/* Квартира is the main field of this row, the button just a compact action. */
.af-delivery-root .af-courier-actions input.af-courier-apartment {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
}

.af-delivery-root .af-courier-actions .af-courier-confirm {
    flex: 0 0 auto;
    padding: 0 16px;
}

/* Old `.af-courier-confirm { width: 100% }` made the button swallow the row
   and squeeze the apartment field to nothing - size both explicitly. */
.af-delivery-root .af-courier-actions {
    width: 100%;
    box-sizing: border-box;
}

.af-delivery-root .af-courier-actions .af-courier-confirm {
    width: auto;
    flex: 0 0 auto;
}

.af-delivery-root .af-courier-actions input.af-courier-apartment {
    flex: 1 1 0;
    width: 0;
}

/* One size for every text input in the picker (Самовывоз / Курьером / Почта,
   incl. Квартира) - previously Самовывоз's was 18px, the rest ~16px. */
.af-delivery-root input.af-city-search,
.af-delivery-root input.af-courier-search,
.af-delivery-root input.af-courier-apartment {
    font-size: 16px !important;
    height: 45px;
}

/* Top tabs: always fit the panel width - equal columns that may shrink
   below their text's natural width, with the font/padding scaling down on
   narrow screens instead of overflowing. */
.af-delivery-root .af-delivery-tabs {
    gap: 6px;
    min-width: 0;
}

.af-delivery-root button.af-delivery-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: clamp(12px, 3.7vw, 15px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Product buttons that stay inside their box ----------------------------
   Theme .button is inline-flex with 25px side padding and no wrapping, so
   three controls in a row (qty + "В корзину" + "Купить в один клик") or two
   in a narrow slider card ("В корзину" + "Подробнее") overflow on phones. */

/* Cards (catalog grid + "Другая продукция" slider): buttons stack, full
   width, never wider than the card. */
.item-product .product-extra-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 10px 0 0;
}

.item-product .product-extra-link > a,
.item-product .product-extra-link > div,
.item-product .product-extra-link > div > a {
    margin: 0;
}

.item-product .product-extra-link a.button {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 14px !important;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    font-size: 14px;
    white-space: normal;
    text-align: center;
}

/* Product page buy row (qty + В корзину on one line, "Купить в один клик"
   centered on its own line below) wherever the three don't fit side by side. */
@media (max-width: 1199px) {
    .wrap-qty-extra {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px 0;
    }

    /* !important: the product page wrapper also carries .item-product, whose
       .product-extra-link rule (display:flex, for catalog cards) would
       otherwise keep the two buttons glued together as one grid item. */
    ul.wrap-qty-extra > li,
    ul.wrap-qty-extra > li > .product-extra-link {
        display: contents !important;
    }

    .wrap-qty-extra .detail-qty {
        width: 120px;
        height: 44px;
        line-height: 44px;
        margin: 0;
    }

    .wrap-qty-extra .detail-qty a {
        height: 44px;
    }

    .wrap-qty-extra .product-extra-link a.button {
        box-sizing: border-box;
        width: auto;
        min-height: 44px;
        margin: 0;
        padding: 0 22px !important;
        justify-content: center;
        align-items: center;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

    .wrap-qty-extra .product-extra-link a.order-one-click {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* "Другая продукция": no short description in the cards. */
.product-slider .product-card-description {
    display: none;
}

/* ---- Catalog grid: every card in a row is the same height -------------------
   Bootstrap floats leave rows ragged when titles/prices/buttons differ
   ("Сообщить о поступлении" vs "В корзину" + "Подробнее"). The row becomes a
   wrapping flex container, each column stretches, and the buttons sit at the
   card's bottom edge. */
.row.product-items {
    display: flex;
    flex-wrap: wrap;
}

.row.product-items::before,
.row.product-items::after {
    display: none;
}

.row.product-items > [class*="col-"] {
    float: none;
    display: flex;
    flex-direction: column;
}

/* flex:1 (not height:100%) so the card fills the column but still leaves its
   own margin-bottom - that margin is the gap between rows. */
.row.product-items .item-product {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.row.product-items .item-product .product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Buttons follow the content at a constant gap (no margin-top:auto): pushing
   them to the card bottom opened a big hole above the single
   "Сообщить о поступлении" button whenever its neighbour had two buttons. */
.row.product-items .item-product .product-info .product-extra-link {
    margin-top: 10px;
}

/* ---- Mobile bottom nav: line icons, muted when idle, green when current ---- */
.mobile-bottom-nav .nav-item {
    color: #7a8190;
    gap: 3px;
    transition: color 0.15s;
}

.mobile-bottom-nav .icon {
    width: 26px;
    height: 26px;
    margin-bottom: 0;
}

.mobile-bottom-nav .nav-item svg,
.mobile-bottom-nav .nav-item.active svg {
    color: currentColor;
}

.mobile-bottom-nav .label {
    font-size: 12px;
    font-weight: 500;
    color: currentColor;
}

.mobile-bottom-nav .nav-item.active {
    color: var(--af-green,#57b53a);
}

.mobile-bottom-nav .nav-item.active .label {
    font-weight: 700;
}

.mobile-bottom-nav .badge {
    top: 2px;
    right: calc(50% - 26px);
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

/* Theme default was 18px under the short description - too much air, but
   none at all glued it to the buttons. */
.product-card-description {
    margin-bottom: 8px;
}

/* "Изменить" in the product page's delivery line: an accent link, not plain text. */
.product-delivery a {
    margin-left: 6px;
    color: var(--af-green,#57b53a);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.product-delivery a:hover {
    color: var(--af-green-deeper,#3d7a26);
}

/* ---- Maintenance notice strip --------------------------------------------- */
.af-notice {
    position: relative;
    background: linear-gradient(90deg, var(--af-green-tint,#e9f6e2) 0%, #f6fbf3 55%, #fff 100%);
    border-bottom: 1px solid #d6ecca;
    animation: af-notice-in 0.4s ease-out both;
}

.af-notice__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 52px;
}

.af-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--af-green,#57b53a);
    color: #fff;
}

.af-notice__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #3b4a36;
}

.af-notice__title {
    display: block;
    font-size: 15px;
    color: #243320;
}

.af-notice__call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 24px;
    background: var(--af-green,#57b53a);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(var(--af-green-rgb,87,181,58), 0.35);
    transition: background 0.15s;
}

.af-notice__call:hover,
.af-notice__call:focus {
    background: var(--af-green-dark,#4aa22f);
    color: #fff;
}

.af-notice__call-label {
    display: none;
}

.af-notice__close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7a66;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.af-notice__close:hover {
    background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 767px) {
    .af-notice__inner {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding-right: 52px;
    }

    .af-notice__text {
        flex: 1 1 calc(100% - 48px);
    }

    .af-notice__body {
        display: block;
        margin-top: 2px;
        font-size: 13px;
    }

    .af-notice__call {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }

    .af-notice__call-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }

    .af-notice__call-label {
        display: block;
    }

    .af-notice__call-num {
        font-size: 12px;
        font-weight: 500;
        opacity: 0.9;
    }
}

@keyframes af-notice-in {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .af-notice { animation: none; }
}

/* Notice strip: everything centred, close button in the top-right corner. */
.af-notice__inner {
    justify-content: center;
    padding-right: 15px;
}

.af-notice__text {
    flex: 0 1 auto;
    max-width: 720px;
}

.af-notice__close {
    top: 8px;
    right: 12px;
    transform: none;
}

@media (max-width: 767px) {
    /* icon stays beside the text (as on desktop); the call button sits full
       width on its own row below. Right padding leaves room for the close
       button in the corner. */
    .af-notice__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 12px;
        padding-top: 12px;
        padding-right: 44px;
        text-align: left;
    }

    .af-notice__icon {
        width: 36px;
        height: 36px;
    }

    .af-notice__text {
        flex: 1 1 calc(100% - 60px);
        max-width: none;
    }

    .af-notice__call {
        flex: 1 1 100%;
        width: auto;
    }
}

/* ==== Home: single-screen hero ============================================
   One full-viewport screen (header floats transparent over it on desktop), a
   parallax/fade scroll animation driven from header.php's inline script
   (--af-hero-h = space left under the notice strip / above the phone bottom
   bar; 100svh until JS runs). */
.logo .logo-light {
    display: none;
}

.af-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--af-hero-h, 100svh);
    min-height: 460px;
    overflow: hidden;
    color: #fff;
    background: #2b3a2a;
}

.af-hero__bg {
    position: absolute;
    inset: -2% 0;
    will-change: transform;
    transform-origin: 70% 40%;
}

.af-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 40%;
}

.af-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 30, 14, 0.66) 0%, rgba(12, 30, 14, 0.38) 38%, rgba(12, 30, 14, 0) 66%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.32) 100%);
}

.af-hero__content {
    position: relative;
    z-index: 2;
    padding-top: 90px;
    will-change: transform, opacity;
}

.af-hero__title {
    margin: 0;
    font-size: clamp(52px, 9.4vw, 150px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.af-hero__sub {
    margin: 16px 0 34px;
    max-width: 640px;
    font-size: clamp(17px, 2.1vw, 30px);
    font-weight: 300;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.af-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 34px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 30px;
    background: rgba(var(--af-green-rgb,87,181,58), 0.92);
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s;
}

.af-hero__cta:hover,
.af-hero__cta:focus {
    background: var(--af-green-dark,#4aa22f);
    color: #fff;
    transform: translateY(-2px);
}

.af-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.af-hero__scroll:hover,
.af-hero__scroll:focus {
    color: #fff;
}

.af-hero__scroll-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: af-hero-bob 1.8s ease-in-out infinite;
}

/* entrance */
.af-hero__title,
.af-hero__sub,
.af-hero__cta,
.af-hero__scroll {
    animation: af-hero-rise 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.af-hero__sub { animation-delay: 0.12s; }
.af-hero__cta { animation-delay: 0.24s; }
.af-hero__scroll { animation: af-hero-fade 1s ease-out 0.7s both; }

@keyframes af-hero-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

@keyframes af-hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes af-hero-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .af-hero__title,
    .af-hero__sub,
    .af-hero__cta,
    .af-hero__scroll,
    .af-hero__scroll-ring {
        animation: none;
    }
}

/* Desktop: the header floats over the hero, transparent until the page is
   scrolled a little (then it's the theme's normal solid sticky bar). */
@media (min-width: 767px) {
    body.home:not(.fixed-ontop) header#header {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 60;
    }

    body.home.fixed-ontop section#content {
        margin-top: 0;
    }

    body.home:not(.af-solid) #header .main-header3 {
        background: transparent !important;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    body.home.af-solid #header .main-header3 {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    body.home:not(.af-solid) .logo .logo-dark {
        display: none;
    }

    body.home:not(.af-solid) .logo .logo-light {
        display: block;
    }

    body.home:not(.af-solid) .main-nav3 ul li a,
    body.home:not(.af-solid) .app-header-phone {
        color: #fff;
    }

    body.home:not(.af-solid) .main-nav3 ul li.current-menu-item > a,
    body.home:not(.af-solid) .main-nav3 ul li.current_page_item > a {
        border-color: rgba(255, 255, 255, 0.85);
        color: #fff;
    }

    body.home:not(.af-solid) .mini-cart-link svg {
        filter: brightness(0) invert(1);
    }
}

@media (max-width: 766px) {
    .af-hero__content {
        padding-top: 24px;
        padding-bottom: 70px;
    }

    .af-hero__bg img {
        object-position: 78% center;
    }

    .af-hero__shade {
        background:
            linear-gradient(180deg, rgba(12, 30, 14, 0.5) 0%, rgba(12, 30, 14, 0.18) 45%, rgba(12, 30, 14, 0.5) 100%);
    }

    .af-hero__cta {
        height: 52px;
        padding: 0 26px;
        font-size: 17px;
    }

    .af-hero__scroll {
        bottom: 18px;
    }
}

.af-hero__scroll {
    bottom: calc(26px + var(--af-cookie-h, 0px));
}

@media (max-width: 766px) {
    .af-hero__scroll {
        bottom: calc(18px + var(--af-cookie-h, 0px));
    }
}

/* ---- Hero buttons in the photo's palette (soft sage green + frosted glass),
   instead of the shop's saturated var(--af-green,#57b53a) that looked pasted on. ---------- */
.af-hero__cta {
    background: linear-gradient(135deg, rgba(102, 160, 84, 0.95), rgba(66, 118, 58, 0.95));
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 28px rgba(10, 30, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.af-hero__cta:hover,
.af-hero__cta:focus {
    background: linear-gradient(135deg, rgba(118, 176, 98, 1), rgba(78, 134, 68, 1));
}

@media (min-width: 767px) {
    body.home:not(.af-solid) .app-callback-btn {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.75) !important;
        color: #fff !important;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: background 0.2s;
    }

    body.home:not(.af-solid) .app-callback-btn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
}

/* ---- Palette candidates (temporary preview) -----------------------------------
   Open any page with ?pal=a | b | c to try one (remembered in the browser),
   ?pal=off to go back. A small inline script in <head> sets the class on <html>
   (see functions.php) - client-side on purpose, so the page cache is unaffected. */
html.pal-a {
    /* A - same green, just deeper and less neon */
    --af-green: #4c9a3a;
    --af-green-rgb: 76, 154, 58;
    --af-green-dark: #3f8330;
    --af-green-deeper: #2f6a24;
    --af-green-tint: #e8f3e2;
    --af-ink: #2f4a2c;
}

html.pal-b {
    /* B - sage / meadow, picks up the photo's foliage and cardigan */
    --af-green: #5b8f4a;
    --af-green-rgb: 91, 143, 74;
    --af-green-dark: #4a7a3b;
    --af-green-deeper: #365f2d;
    --af-green-tint: #eaf1e5;
    --af-ink: #2b3d29;
}

html.pal-c {
    /* C - deep forest, the most distinct from today */
    --af-green: #3f7a47;
    --af-green-rgb: 63, 122, 71;
    --af-green-dark: #336539;
    --af-green-deeper: #274e2d;
    --af-green-tint: #e6efe7;
    --af-ink: #22372a;
}

/* Main menu: regular weight (the theme's 600 read too heavy against the new hero). */
.main-nav > ul > li > a,
.main-nav.main-nav3 > ul > li > a {
    font-weight: 400;
}

/* ---- Hero: the three service points replace the big title ------------------- */
.af-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.af-hero {
    height: auto;
    min-height: var(--af-hero-h, 100svh);
}

.af-hero__content {
    padding-top: 110px;
    padding-bottom: 70px;
}

.af-hero__sub {
    max-width: 780px;
    margin: 0 0 28px;
    font-size: clamp(28px, 3.7vw, 54px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.005em;
}

.af-hero__benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.af-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(10, 30, 12, 0.18);
    animation: af-hero-rise 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.af-benefit:nth-child(1) { animation-delay: 0.18s; }
.af-benefit:nth-child(2) { animation-delay: 0.28s; }
.af-benefit:nth-child(3) { animation-delay: 0.38s; }

.af-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.af-benefit__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.af-benefit__text strong {
    font-size: 17px;
    font-weight: 600;
}

.af-benefit__text span {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.95;
}

.af-hero__cta { animation-delay: 0.5s; }

@media (max-width: 766px) {
    .af-hero__content {
        padding-top: 22px;
        padding-bottom: 76px;
    }

    .af-hero__sub {
        margin-bottom: 18px;
        font-size: 28px;
    }

    .af-hero__benefits {
        gap: 9px;
        margin-bottom: 22px;
    }

    .af-benefit {
        gap: 12px;
        padding: 10px 14px;
        border-radius: 15px;
    }

    .af-benefit__icon {
        width: 40px;
        height: 40px;
    }

    .af-benefit__icon svg {
        width: 22px;
        height: 22px;
    }

    .af-benefit__text strong {
        font-size: 15px;
    }

    .af-benefit__text span {
        font-size: 12.5px;
    }

    .af-hero__scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-benefit { animation: none; }
}

/* Slightly darker glass so the text stays crisp over the bottles in the photo. */
.af-benefit {
    background: rgba(18, 38, 20, 0.34);
    border-color: rgba(255, 255, 255, 0.28);
}

/* ==== Home page below the hero, in the hero's language =========================
   Sage-and-cream palette scoped to the home page for now (body.home): the brand
   variables below re-colour every button/link there at once, other pages keep
   the current colours until a site-wide palette is chosen. */
body.home {
    --af-green: #5b8f4a;
    --af-green-rgb: 91, 143, 74;
    --af-green-dark: #4a7a3b;
    --af-green-deeper: #365f2d;
    --af-green-tint: #eaf1e5;
    --af-ink: #2b3d29;
    --hm-forest: #2f4d33;
    --hm-mist: #f3f6ef;
    --hm-cream: #faf7ef;
    --hm-line: #dde7d6;
    --hm-amber: #f0cf87;
}

body.home .title-box1 {
    margin: 0 0 44px;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 300 !important;
    letter-spacing: 0.01em;
    color: var(--hm-forest);
}

body.home .product-bestsale {
    padding: 84px 0 92px;
    background: linear-gradient(180deg, var(--hm-mist) 0%, #fff 100%);
}

/* product cards */
body.home .item-product.item-product-grid {
    padding: 14px 14px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.home .item-product.item-product-grid:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(47, 77, 51, 0.13);
}

body.home .item-product .product-thumb {
    border-radius: 18px;
    background: var(--hm-cream);
}

body.home .item-product .product-title a,
body.home .item-product-featured .product-title a {
    color: var(--hm-forest);
}

body.home .product-price ins,
body.home .product-price .color {
    color: var(--af-green-dark);
}

body.home .percent-sale {
    border-radius: 10px;
    background: var(--hm-amber);
    color: #4a3a12;
    font-weight: 600;
}

/* "Мы рекомендуем" */
body.home .featured-product {
    margin-bottom: 0;
    padding: 92px 0 96px;
    background: linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%) !important;
    background-image: none !important;
}

body.home .item-product-featured .product-thumb.border {
    border: 1px solid var(--hm-line) !important;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(47, 77, 51, 0.1);
}

body.home .item-product-featured .product-title {
    font-size: 30px;
    font-weight: 300;
}

body.home .item-product-featured .desc {
    color: #4a5a45;
}

/* reviews */
body.home .blockquote {
    position: relative;
    margin-bottom: 26px;
    padding: 46px 30px 24px;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(47, 77, 51, 0.05);
    font-size: 16px;
    line-height: 1.55;
    color: #33432f;
}

body.home .blockquote::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 24px;
    font-size: 64px;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--af-green);
    opacity: 0.3;
}

body.home .blockquote .title {
    color: var(--af-green-dark);
    font-size: 15px;
    font-weight: 600;
}

/* newsletter band */
body.home .newsletter-box.bg-color {
    padding: 68px 0;
    background: linear-gradient(135deg, #2f4d33 0%, #406b44 100%) !important;
}

body.home .newsletter-box .email-form input[type=text] {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}

body.home .newsletter-box .email-form input[type=text]::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

/* footer */
body.home .footer-top3 {
    border-top: 0;
    background: var(--hm-mist);
}

body.home .footer-box3 .title30 {
    font-weight: 300;
    color: var(--hm-forest);
}

body.home footer a:hover {
    color: var(--af-green-dark);
}

@media (max-width: 766px) {
    body.home .product-bestsale {
        padding: 52px 0 60px;
    }

    body.home .title-box1 {
        margin-bottom: 30px;
    }

    body.home .blockquote {
        padding: 44px 22px 20px;
    }
}

/* ==== Home page sections (hm-*) ==================================================
   One rhythm for the whole page: every section has the same vertical padding, a
   centred head (eyebrow / light title / lead), 1170px container, 22-32px radii. */
.hm-section {
    padding: clamp(44px, 5vw, 76px) 0;
}

.hm-section--mist {
    background: var(--hm-mist, #f3f6ef);
}

.hm-head {
    max-width: 720px;
    margin: 0 auto clamp(24px, 3vw, 40px);
    text-align: center;
}

.hm-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--af-green-tint, #eaf1e5);
    color: var(--af-green-dark, #4a7a3b);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hm-eyebrow--light {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.hm-title {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: var(--hm-forest, #2f4d33);
}

.hm-title--light {
    color: #fff;
}

.hm-lead {
    margin: 14px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: #5b6a55;
}

.hm-more {
    margin-top: 32px;
    text-align: center;
}

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border: 1.5px solid transparent;
    border-radius: 30px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.hm-btn:hover,
.hm-btn:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

.hm-btn--ghost {
    background: #fff;
    border-color: var(--af-green, #5b8f4a);
    color: var(--af-green-dark, #4a7a3b);
}

.hm-btn--ghost:hover,
.hm-btn--ghost:focus {
    background: var(--af-green, #5b8f4a);
    color: #fff;
}

.hm-btn--light {
    background: #fff;
    color: var(--hm-forest, #2f4d33);
}

.hm-btn--light:hover,
.hm-btn--light:focus {
    background: var(--hm-cream, #faf7ef);
    color: var(--hm-forest, #2f4d33);
}

/* popular products */
body.home .hm-popular {
    padding: clamp(44px, 5vw, 76px) 0;
    background: linear-gradient(180deg, var(--hm-mist, #f3f6ef) 0%, #fff 75%);
}

/* about */
.hm-about__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.hm-about__text p {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.65;
    color: #44533f;
}

.hm-about__text .hm-title {
    margin-top: 0;
}

.hm-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.hm-facts li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--hm-line, #dde7d6);
    border-radius: 18px;
    background: var(--hm-mist, #f3f6ef);
}

.hm-facts strong {
    font-size: 20px;
    font-weight: 600;
    color: var(--hm-forest, #2f4d33);
}

.hm-facts span {
    font-size: 14px;
    line-height: 1.35;
    color: #5b6a55;
}

.hm-about__text .hm-note {
    margin-top: 22px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a8774;
}

.hm-about__media {
    position: relative;
}

.hm-about__media::before {
    content: "";
    position: absolute;
    inset: 22px -18px -18px 22px;
    border-radius: 36px;
    background: var(--af-green-tint, #eaf1e5);
    z-index: 0;
}

.hm-about__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(47, 77, 51, 0.18);
}

/* steps */
.hm-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-step {
    position: relative;
    padding: 30px 24px 26px;
    border: 1px solid var(--hm-line, #dde7d6);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.05);
}

.hm-step__num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    color: var(--af-green-tint, #eaf1e5);
    -webkit-text-stroke: 1px var(--hm-line, #dde7d6);
}

.hm-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--af-green-tint, #eaf1e5);
    color: var(--af-green-dark, #4a7a3b);
}

.hm-step h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--hm-forest, #2f4d33);
}

.hm-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5b6a55;
}

/* reviews */
.hm-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hm-review {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 46px 26px 24px;
    border: 1px solid var(--hm-line, #dde7d6);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(47, 77, 51, 0.05);
}

.hm-review[hidden] {
    display: none;
}

.hm-review::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 22px;
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
    color: var(--af-green, #5b8f4a);
    opacity: 0.3;
}

.hm-review blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #33432f;
}

.hm-review figcaption {
    font-size: 14px;
    font-weight: 600;
    color: var(--af-green-dark, #4a7a3b);
}

/* invite friends */
.hm-invite {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(32px, 5vw, 64px);
    border-radius: 32px;
    background: linear-gradient(135deg, #2f4d33 0%, #406b44 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(47, 77, 51, 0.25);
}

.hm-invite__text p {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.hm-invite__box {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hm-invite__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.hm-invite__field {
    display: flex;
    gap: 10px;
}

.hm-invite__field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 15px;
}

.hm-invite__share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hm-invite__share a {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.hm-invite__share a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* FAQ */
.hm-faq {
    background: var(--hm-mist, #f3f6ef);
}

.hm-faq__wrap {
    max-width: 860px;
}

.hm-faq__item {
    margin-bottom: 12px;
    border: 1px solid var(--hm-line, #dde7d6);
    border-radius: 18px;
    background: #fff;
}

.hm-faq__item summary {
    position: relative;
    padding: 20px 60px 20px 24px;
    font-size: 17px;
    font-weight: 600;
    color: var(--hm-forest, #2f4d33);
    cursor: pointer;
    list-style: none;
}

.hm-faq__item summary::-webkit-details-marker {
    display: none;
}

.hm-faq__item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: var(--af-green-tint, #eaf1e5);
    color: var(--af-green-dark, #4a7a3b);
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    transition: transform 0.2s;
}

.hm-faq__item[open] summary::after {
    transform: rotate(45deg);
}

.hm-faq__item p {
    margin: 0;
    padding: 0 24px 22px;
    font-size: 16px;
    line-height: 1.6;
    color: #4a5a45;
}

/* contact band */
.hm-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(30px, 4.5vw, 56px);
    border-radius: 32px;
    background: linear-gradient(135deg, #2f4d33 0%, #406b44 100%);
    color: #fff;
}

.hm-contact p {
    margin: 12px 0 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.hm-contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.hm-contact__phone {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.hm-contact__phone:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .hm-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-about__grid,
    .hm-invite {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hm-steps,
    .hm-reviews__grid {
        grid-template-columns: 1fr;
    }

    .hm-facts {
        grid-template-columns: 1fr;
    }

    .hm-lead {
        font-size: 16px;
    }

    .hm-about__text p {
        font-size: 16px;
    }

    .hm-about__media::before {
        inset: 14px -8px -8px 14px;
    }

    .hm-invite__field {
        flex-direction: column;
    }

    .hm-contact {
        flex-direction: column;
        align-items: flex-start;
    }

    .hm-contact__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .hm-contact__actions .hm-btn {
        width: 100%;
    }
}

/* ==== Header: frosted glass once it sticks -----------------------------------
   Fades in smoothly and stays slightly translucent (the page shows through,
   blurred) on every page, instead of snapping to an opaque white bar. */
#header .main-header3 {
    transition: background-color 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease,
        backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease, padding 0.3s ease;
}

body.fixed-ontop #header .main-header3,
body.home.af-solid #header .main-header3 {
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 24px rgba(30, 50, 30, 0.1);
}

/* ==== Footer (ft-*) ============================================================ */
.ft {
    padding: clamp(40px, 5vw, 72px) 0 28px;
    background: linear-gradient(180deg, #223a27 0%, #1b2f1f 100%);
    color: rgba(255, 255, 255, 0.78);
}

.ft a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.ft a:hover,
.ft a:focus {
    color: #fff;
    text-decoration: none;
}

.ft-subscribe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
    margin-bottom: clamp(36px, 5vw, 60px);
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ft-subscribe h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 300;
    line-height: 1.15;
    color: #fff;
}

.ft-subscribe p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

.ft-subscribe__row {
    display: flex;
    gap: 10px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.12);
}

.ft-subscribe__row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    outline: none;
}

.ft-subscribe__row input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.ft-subscribe__row .hm-btn {
    min-height: 48px;
    padding: 0 26px;
}

.ft-subscribe__consent {
    display: flex;
    gap: 10px;
    margin: 14px 4px 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.ft-subscribe__consent input {
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: #8fbf7c;
}

.ft-subscribe__consent a {
    text-decoration: underline;
}

.ft-hp {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
}

.ft-subscribe__msg {
    min-height: 20px;
    margin: 10px 4px 0;
    font-size: 14px;
}

.ft-subscribe__msg.is-ok {
    color: #b8e3a8;
}

.ft-subscribe__msg.is-error {
    color: #ffc9b8;
}

.ft-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ft-col h3 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

.ft-logo img {
    display: block;
    width: auto;
    height: 44px;
    margin-bottom: 16px;
}

.ft-col--brand p {
    max-width: 320px;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
}

.ft-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ft-social a {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-size: 14px;
    transition: background 0.2s;
}

.ft-social a:hover {
    background: rgba(255, 255, 255, 0.14);
}

.ft-list,
.ft-col--menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-list li,
.ft-col--menu ul li {
    display: block;
    margin: 0 0 10px;
    float: none;
    font-size: 15px;
    line-height: 1.45;
}

.ft-col--menu ul li a {
    padding: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
}

.ft-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 12px;
    background: rgba(143, 191, 124, 0.22);
    color: #b8e3a8;
    font-size: 12px;
}

.ft-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 32px;
    padding-top: 22px;
    font-size: 13px;
}

.ft-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.ft-note {
    max-width: 560px;
}

@media (max-width: 991px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ft-subscribe {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ft-grid {
        grid-template-columns: 1fr;
    }

    .ft-subscribe__row {
        flex-direction: column;
        padding: 10px;
        border-radius: 26px;
    }

    .ft-subscribe__row input {
        height: 46px;
        text-align: center;
    }

    .ft-subscribe__row .hm-btn {
        width: 100%;
    }
}

/* ==== Site-wide palette (sage, was home-only) and unified buttons =============
   Every page now uses the home palette; buttons share the hero/home look:
   pill, solid sage green, lift on hover. Specific components (map picker,
   hero, .hm-btn, quantity steppers) keep their own rules. */
:root {
    --af-green: #5b8f4a;
    --af-green-rgb: 91, 143, 74;
    --af-green-dark: #4a7a3b;
    --af-green-deeper: #365f2d;
    --af-green-tint: #eaf1e5;
    --af-ink: #2b3d29;
    --hm-forest: #2f4d33;
    --hm-mist: #f3f6ef;
    --hm-cream: #faf7ef;
    --hm-line: #dde7d6;
    --hm-amber: #f0cf87;
}

.button,
a.button,
button.button,
.btn-primary,
body .shop-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-proceed-to-checkout a.checkout-button,
input[type="submit"],
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    height: auto;
    padding: 0 26px;
    border: 1.5px solid var(--af-green);
    border-radius: 30px;
    background: var(--af-green);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(var(--af-green-rgb), 0.28);
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.button:hover,
.button:focus,
a.button:hover,
button.button:hover,
.btn-primary:hover,
body .shop-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn):hover {
    background: var(--af-green-dark);
    border-color: var(--af-green-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--af-green-rgb), 0.34);
    text-decoration: none;
}

/* secondary / outline buttons stay light */
.button.alt-outline,
.woocommerce a.button.wc-forward.outline,
.unsetcoupon.button {
    background: #fff;
    color: var(--af-green-dark) !important;
    box-shadow: none;
}

/* compact buttons on product cards keep their size */
.item-product .product-extra-link a.button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
}

/* disabled */
.button:disabled,
.button.disabled,
.single_add_to_cart_button.disabled,
input[type="submit"]:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* header call-back button follows the same pill language */
.app-callback-btn {
    border-radius: 30px;
}

/* ==== Catalog page in the home language ======================================
   Template: apifarm-app/woocommerce/loop/loop-start.php (replaces the ECG
   animation with a title block and a pill search). */
body.woocommerce-shop #content {
    background: linear-gradient(180deg, var(--hm-mist) 0, #fff 420px);
}

.cat-head {
    max-width: 760px;
    margin: 8px auto 28px;
    text-align: center;
}

.cat-head__title {
    margin: 0 0 10px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 300;
    letter-spacing: 0.01em;
    color: var(--hm-forest);
}

.cat-head__sub {
    margin: 0 auto 22px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.5;
    color: #5b6a55;
}

.cat-search {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}

.cat-search__ico {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: var(--af-green);
    pointer-events: none;
}

.cat-search #productSearch {
    width: 100%;
    height: 54px;
    padding: 0 22px 0 52px;
    border: 1.5px solid var(--hm-line);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(47, 77, 51, 0.07);
    font-size: 16px;
    color: var(--hm-forest);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cat-search #productSearch:focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 8px 24px rgba(var(--af-green-rgb), 0.18);
}

/* category chips (staff / shop-access users) */
.catalog-filters {
    margin-bottom: 26px;
}

.catalog-filters .products_types_tags .form-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.catalog-filters .product_type_tag {
    margin: 0;
    padding: 8px 16px;
    border: 1.5px solid var(--hm-line);
    border-radius: 30px;
    background: #fff;
    color: var(--hm-forest);
    font-size: 14px;
    line-height: 1.2;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.catalog-filters .product_type_tag:hover,
.catalog-filters .product_type_tag.active {
    border-color: var(--af-green);
    background: var(--af-green);
    color: #fff;
}

@media (max-width: 768px) {
    .products_types_tags {
        display: block;
    }

    .catalog-filters .products_types_tags .form-group {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .catalog-filters .product_type_tag {
        flex: 0 0 auto;
    }
}

/* cards */
body.woocommerce-shop .item-product.item-product-grid {
    margin-bottom: 8px;
    padding: 14px 14px 20px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.woocommerce-shop .item-product.item-product-grid:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(47, 77, 51, 0.13);
}

body.woocommerce-shop .item-product .product-thumb {
    border-radius: 18px;
    background: var(--hm-cream);
    overflow: hidden;
}

body.woocommerce-shop .item-product .product-title {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 500;
}

body.woocommerce-shop .item-product .product-title a {
    color: var(--hm-forest);
}

body.woocommerce-shop .item-product .product-title a:hover {
    color: var(--af-green-dark);
}

body.woocommerce-shop .product-price ins,
body.woocommerce-shop .product-price .color {
    color: var(--af-green-dark);
}

body.woocommerce-shop .percent-sale {
    border-radius: 10px;
    background: var(--hm-amber);
    color: #4a3a12;
    font-weight: 600;
}

body.woocommerce-shop .woocommerce-breadcrumb {
    margin-bottom: 4px;
    font-size: 14px;
    color: #7a8a74;
}

body.woocommerce-shop .woocommerce-breadcrumb a {
    color: var(--af-green-dark);
}

/* ==== About / Contacts (.pg) in the home language ============================ */
.pg {
    padding: 0;
}

.pg-hero {
    padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4vw, 56px);
    background: linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%);
    text-align: center;
}

.pg-hero__title {
    margin: 0 0 12px;
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 300;
    letter-spacing: 0.01em;
    color: var(--hm-forest);
}

.pg-hero__sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.55;
    color: #4a5a45;
}

.pg-sec {
    padding: clamp(36px, 5vw, 64px) 0;
}

.pg-sec--tint {
    background: linear-gradient(180deg, var(--hm-mist) 0%, #fff 100%);
}

.pg-facts,
.pg-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pg-cards {
    grid-template-columns: repeat(3, 1fr);
}

.pg-fact,
.pg-card {
    padding: 26px 24px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
}

.pg-fact__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
}

.pg-fact h3,
.pg-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--hm-forest);
}

.pg-fact p,
.pg-card p {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.5;
    color: #5b6a55;
}

.pg-card a {
    font-size: 18px;
    font-weight: 500;
    color: var(--hm-forest);
}

.pg-card a:hover {
    color: var(--af-green-dark);
}

.pg-badge {
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    vertical-align: middle;
}

.pg-prose {
    max-width: 780px;
    margin: 0 auto;
}

.pg-prose p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.7;
    color: #33432f;
}

.pg-note {
    max-width: 780px;
    margin: 8px auto 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--hm-line);
    font-size: 14px;
    color: #5b6a55;
}

.pg-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.button.pg-btn-ghost {
    background: #fff;
    color: var(--af-green-dark) !important;
    box-shadow: none;
}

.button.pg-btn-ghost:hover {
    background: var(--af-green);
    color: #fff !important;
}

.pg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.pg-panel {
    padding: 30px;
    border: 1px solid var(--hm-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(47, 77, 51, 0.08);
    float: none;
    width: auto;
}

.pg-panel__title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 300;
    color: var(--hm-forest);
    text-transform: none;
}

.pg-panel--map {
    padding: 0;
    overflow: hidden;
    min-height: 380px;
}

.pg-panel--map .gmap_canvas,
.pg-panel--map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

.pg .form-contact input[type=text],
.pg .form-contact textarea {
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1.5px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pg .form-contact input[type=text] {
    height: 52px;
}

.pg .form-contact input:focus,
.pg .form-contact textarea:focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 0 0 3px rgba(var(--af-green-rgb), 0.15);
}

.pg .form-contact textarea {
    min-height: 140px;
    resize: vertical;
}

.pg .personal-data {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a8a74;
}

.pg .personal-data a {
    color: var(--af-green-dark);
}

@media (max-width: 991px) {
    .pg-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .pg-cards {
        grid-template-columns: 1fr;
    }

    .pg-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .pg-facts {
        grid-template-columns: 1fr;
    }

    .pg-panel {
        padding: 22px 18px;
    }
}

/* ==== Product page in the home language ====================================== */
body.single-product #content {
    background: linear-gradient(180deg, var(--hm-mist) 0, #fff 520px);
}

body.single-product .product-detail {
    margin: 10px 0 36px;
    padding: clamp(14px, 2.4vw, 30px);
    border: 1px solid var(--hm-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(47, 77, 51, 0.08);
}

body.single-product .detail-gallery .mid {
    border-radius: 22px;
    background: var(--hm-cream);
    overflow: hidden;
}

body.single-product .detail-gallery .mid img {
    display: block;
    width: 100%;
    border-radius: 22px;
}

body.single-product .detail-info {
    padding: 4px 6px;
}

body.single-product .detail-info .name-bl h2,
body.single-product .detail-info .title30 {
    margin: 0 0 6px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 300 !important;
    letter-spacing: 0.01em;
    color: var(--hm-forest);
}

body.single-product .detail-info .product-price ins {
    font-size: 34px;
    font-weight: 600;
    text-decoration: none;
    color: var(--af-green-dark);
}

body.single-product .detail-info .product-price del {
    color: #9aa593;
}

body.single-product .percent-sale {
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--hm-amber);
    color: #4a3a12;
    font-weight: 600;
}

body.single-product .price-profit {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-weight: 600;
}

body.single-product .price-profit::before {
    display: none;
}

body.single-product .product-delivery {
    margin: 4px 0 14px;
    color: #5b6a55;
}

/* quantity stepper as a pill */
body.single-product .detail-qty {
    border: 1.5px solid var(--hm-line);
    border-radius: 30px;
    background: #fff;
    color: var(--hm-forest);
}

body.single-product .detail-qty a {
    border-radius: 30px;
}

body.single-product .detail-qty svg {
    fill: var(--af-green-dark);
}

/* "Купить в один клик" / "Сообщить о поступлении" = secondary outline */
body.single-product .product-extra-link a.order-one-click.button,
body.single-product .product-extra-link a.button.green {
    background: #fff;
    border-color: var(--af-green);
    color: var(--af-green-dark) !important;
    box-shadow: none;
}

body.single-product .product-extra-link a.order-one-click.button:hover,
body.single-product .product-extra-link a.button.green:hover {
    background: var(--af-green);
    color: #fff !important;
}

/* description: small labels + readable body */
body.single-product .detail-description {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--hm-line);
}

body.single-product .detail-description p {
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #33432f;
}

body.single-product .detail-description p strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--af-green-dark);
}
/* related products */
body.single-product .related-product-slider {
    margin-top: 12px;
    padding-bottom: 40px;
}

body.single-product .related-product-slider .title-box1 {
    margin-bottom: 28px;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 300 !important;
    color: var(--hm-forest);
}

body.single-product .related-product-slider .item-product.item-product-grid {
    padding: 14px 14px 20px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
}

body.single-product .related-product-slider .product-thumb {
    border-radius: 18px;
    background: var(--hm-cream);
    overflow: hidden;
}

body.single-product .related-product-slider .product-title a {
    color: var(--hm-forest);
}

body.single-product .detail-description p br {
    display: none;
}

body.woocommerce-shop .item-product.item-product-grid {
    margin-bottom: 18px;
}

/* ==== Cart, checkout, account, delivery in the home language ================== */
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content,
body.page-template-page-delivery-and-payment-php #content {
    background: linear-gradient(180deg, var(--hm-mist) 0, #fff 420px);
}

.content-cart-checkout > .title-box1,
.my-account-block > .title-box1,
.delivery-page > .title-box1 {
    margin: 8px 0 28px;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 300 !important;
    letter-spacing: 0.01em;
    color: var(--hm-forest);
}

/* cart lines as cards */
.content-cart-checkout .table-responsive {
    border: 0;
}

.content-cart-checkout table.shop_table.cart {
    border-collapse: separate;
    border-spacing: 0 12px;
    border: 0;
    background: transparent;
}

.content-cart-checkout table.shop_table.cart td {
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--hm-line);
    border-bottom: 1px solid var(--hm-line);
    background: #fff;
    vertical-align: middle;
}

.content-cart-checkout table.shop_table.cart td:first-child {
    border-left: 1px solid var(--hm-line);
    border-radius: 20px 0 0 20px;
}

.content-cart-checkout table.shop_table.cart td.product-remove,
.content-cart-checkout table.shop_table.cart td:last-child {
    border-right: 1px solid var(--hm-line);
    border-radius: 0 20px 20px 0;
}

.content-cart-checkout table.shop_table.cart td.clear {
    display: none;
}

.content-cart-checkout .product-thumbnail img {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    background: var(--hm-cream);
    object-fit: cover;
}

.content-cart-checkout .product-name a {
    font-size: 17px;
    font-weight: 500;
    color: var(--hm-forest);
}

.content-cart-checkout .product-subtotal .amount,
.content-cart-checkout .product-price .amount {
    font-weight: 600;
    color: var(--af-green-dark);
}

.content-cart-checkout a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hm-mist);
    color: #7a8a74;
    transition: background 0.2s, color 0.2s;
}

.content-cart-checkout a.remove:hover {
    background: #f6dede;
    color: #b3392f;
}

.content-cart-checkout a.remove svg {
    fill: currentColor;
}

/* totals + order form */
.content-cart-checkout .cart_totals {
    padding: 26px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
}

.content-cart-checkout .cart_totals > h2 {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 300;
    color: var(--hm-forest);
    text-transform: none;
}

.content-cart-checkout .cart_totals table,
.content-cart-checkout .cart_totals th,
.content-cart-checkout .cart_totals td {
    border-color: var(--hm-line);
}

.content-cart-checkout .cart_totals input[type="text"],
.content-cart-checkout .cart_totals input[type="tel"],
.content-cart-checkout .cart_totals input[type="email"] {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    border: 1.5px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    font-size: 16px;
}

.content-cart-checkout .cart_totals input:focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 0 0 3px rgba(var(--af-green-rgb), 0.15);
}

.content-cart-checkout #shipping_method label,
.content-cart-checkout .cart_totals label[for^="payment_method"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid var(--hm-line);
    border-radius: 18px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.content-cart-checkout #shipping_method label:hover {
    border-color: var(--af-green);
    background: var(--hm-mist);
}

.content-cart-checkout #shipping_method svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    fill: var(--af-green-dark);
}

.content-cart-checkout input[type="radio"],
.content-cart-checkout input[type="checkbox"] {
    accent-color: var(--af-green);
}

.content-cart-checkout .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    min-height: 54px;
    font-size: 17px;
}

/* checkout */
body.woocommerce-checkout .woocommerce form.checkout,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    border-radius: 24px;
}

body.woocommerce-checkout .woocommerce input.input-text,
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--hm-line);
    border-radius: 16px;
    background: #fff;
}

body.woocommerce-checkout .woocommerce input.input-text:focus,
body.woocommerce-checkout .woocommerce textarea:focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 0 0 3px rgba(var(--af-green-rgb), 0.15);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout #payment {
    border-color: var(--hm-line);
    border-radius: 20px;
    background: #fff;
}

/* account */
.woocommerce-MyAccount-navigation ul {
    padding: 10px;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.06);
}

.woocommerce-MyAccount-navigation-link a {
    border-radius: 14px;
    color: var(--hm-forest);
    transition: background 0.2s, color 0.2s;
}

.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--hm-mist);
    color: var(--af-green-dark);
}

.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-weight: 600;
}

.woocommerce-MyAccount-content {
    padding: 26px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.06);
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--hm-line);
    border-radius: 16px;
    background: #fff;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content textarea:focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 0 0 3px rgba(var(--af-green-rgb), 0.15);
}

.woocommerce-MyAccount-content table.shop_table {
    border-color: var(--hm-line);
    border-radius: 16px;
    overflow: hidden;
}

/* delivery & payment page */
.delivery-page .row {
    margin-bottom: 24px;
    padding: 24px 12px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.06);
}

.delivery-page .row svg {
    max-width: 72px;
    fill: var(--af-green);
}

.delivery-page p,
.delivery-page li {
    line-height: 1.65;
    color: #33432f;
}

@media (max-width: 767px) {
    .content-cart-checkout .cart_totals,
    .woocommerce-MyAccount-content {
        padding: 18px 16px;
    }
}

/* ---- Cart lines: one grid per item (replaces the table-cell cards above) ------ */
.content-cart-checkout table.shop_table.cart,
.content-cart-checkout table.shop_table.cart tbody {
    display: block !important;
    width: 100%;
    border: 0 !important;
    background: transparent;
}

.content-cart-checkout table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) auto auto auto 36px;
    grid-template-areas: "thumb name price qty sub remove";
    align-items: center;
    column-gap: 18px;
    margin: 0 0 14px !important;
    padding: 14px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(47, 77, 51, 0.06);
}

.content-cart-checkout table.shop_table.cart tr.cart_item > td {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left;
}

.content-cart-checkout tr.cart_item td.clear { display: none !important; }
.content-cart-checkout tr.cart_item td.product-thumbnail { grid-area: thumb; }
.content-cart-checkout tr.cart_item td.product-name { grid-area: name; }
.content-cart-checkout tr.cart_item td.product-price { grid-area: price; white-space: nowrap; }
.content-cart-checkout tr.cart_item td.product-quantity { grid-area: qty; }
.content-cart-checkout tr.cart_item td.product-subtotal { grid-area: sub; white-space: nowrap; min-width: 90px; text-align: right; font-size: 18px; }
.content-cart-checkout tr.cart_item td.product-remove { grid-area: remove; text-align: right; }
.content-cart-checkout tr.cart_item .product-remove a.remove { position: static !important; }

/* picture fills its square exactly */
.content-cart-checkout .product-thumbnail a,
.content-cart-checkout .product-thumbnail a.loading {
    display: block;
    width: 96px !important;
    height: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: var(--hm-cream) !important;
    animation: none !important;
    overflow: hidden;
}

.content-cart-checkout .product-thumbnail a img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    padding: 4px;
    border-radius: 0;
    object-fit: contain;
    background: transparent;
}

.content-cart-checkout tr.cart_item .product-price del { display: block; font-size: 13px; }
.content-cart-checkout tr.cart_item .percent-sale { display: none; }

@media (max-width: 767px) {
    .content-cart-checkout table.shop_table.cart tr.cart_item {
        grid-template-columns: 76px minmax(0, 1fr) 34px;
        grid-template-areas:
            "thumb name remove"
            "thumb qty  qty"
            "thumb sub  sub";
        row-gap: 8px;
        column-gap: 14px;
        padding: 12px;
        align-items: start;
    }

    .content-cart-checkout .product-thumbnail a,
    .content-cart-checkout .product-thumbnail a.loading {
        width: 76px !important;
        height: 76px;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-price { display: none !important; }
    .content-cart-checkout tr.cart_item td.product-subtotal { text-align: left; font-size: 17px; min-width: 0; }
    .content-cart-checkout .product-name a { font-size: 16px; line-height: 1.3; }
    .content-cart-checkout .cart_totals,
    .content-cart-checkout .cart-collaterals { width: 100% !important; float: none !important; }
}

/* totals and order form: two columns on desktop, stacked below */
@media (min-width: 992px) {
    .content-cart-checkout > .row { display: flex; align-items: flex-start; gap: 0; }
    .content-cart-checkout > .row > .cart-collaterals { float: none; }
}

@media (max-width: 991px) {
    .content-cart-checkout > .row > .cart-collaterals {
        float: none !important;
        width: 100% !important;
        margin-bottom: 16px;
    }
}

/* breadcrumbs: breathing room under the header on every page */
#content > .container > .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    margin: 0;
    padding: 18px 0 10px;
    font-size: 14px;
    color: #7a8a74;
}

.woocommerce-breadcrumb a {
    color: var(--af-green-dark);
}

@media (max-width: 767px) {
    .woocommerce-breadcrumb {
        padding: 14px 0 6px;
    }
}

/* Cart badge over the transparent hero header: inverted (white pill, green number) */
@media (min-width: 767px) {
    body.home:not(.af-solid) .mini-cart-number {
        background: #fff !important;
        color: var(--af-green-dark) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }
}

.mini-cart-number {
    transition: background 0.25s, color 0.25s;
}

/* ---- Home: tighter gaps between sections ------------------------------------- */
.hm-section {
    padding: clamp(32px, 3.6vw, 52px) 0;
}

body.home .hm-popular {
    padding-top: clamp(32px, 3.6vw, 52px);
    padding-bottom: clamp(8px, 1.5vw, 20px);
}

.hm-more {
    margin-top: 24px;
}

/* ---- My account: clean layout ------------------------------------------------- */
.my-account-block > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 0;
}

.my-account-block > .row > [class*="col-"]:first-child {
    width: 260px;
    max-width: 100%;
    float: none;
    flex: 0 0 260px;
}

.my-account-block > .row > [class*="col-"]:last-child {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 24px;
}

.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.06);
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0;
    background: transparent !important;
}

.woocommerce-MyAccount-navigation-link a,
.woocommerce-MyAccount-navigation-link:first-child a {
    display: block;
    padding: 12px 18px;
    border: 0 !important;
    border-radius: 14px;
    font-size: 15.5px;
    color: var(--hm-forest);
}

.woocommerce-MyAccount-navigation-link a::before {
    display: none;
}

.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--hm-mist);
    color: var(--af-green-dark);
}

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a:hover {
    background: var(--af-green-tint);
    color: var(--af-green-deeper) !important;
    font-weight: 600;
}

.woocommerce-MyAccount-content {
    padding: clamp(18px, 2.4vw, 30px);
}

/* address book */
.app-address-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.app-address-head__title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 300;
    color: var(--hm-forest);
}

.app-address-head__sub {
    margin: 0;
    font-size: 14.5px;
    color: #5b6a55;
}

.app-address-head .button.app-address-pick-map {
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0;
}

.app-address-book__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin: 0;
}

.app-address-book__empty {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1.5px dashed var(--hm-line);
    border-radius: 20px;
    text-align: center;
    color: #5b6a55;
}

.app-address-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    padding: 18px 20px;
    border: 1.5px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.app-address-card:hover {
    box-shadow: 0 10px 26px rgba(47, 77, 51, 0.08);
}

.app-address-card.is-default {
    border-color: var(--af-green);
    background: linear-gradient(180deg, var(--hm-mist) 0, #fff 70%);
}

.app-address-card__badge {
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-address-card__addr {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hm-forest);
}

.app-address-card__hours,
.app-address-card__who,
.app-address-card__comment {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6b7a65;
}

.app-address-card__who {
    word-break: break-word;
}

.app-address-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hm-line);
}

.app-address-card__actions a {
    padding: 6px 14px;
    border: 1.5px solid var(--hm-line);
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    color: var(--af-green-dark);
    transition: background 0.2s, border-color 0.2s;
}

.app-address-card__actions a:hover {
    border-color: var(--af-green);
    background: var(--af-green-tint);
}

.app-address-card__actions a.app-address-delete {
    margin-left: auto;
    border-color: transparent;
    color: #b3392f !important;
}

.app-address-card__actions a.app-address-delete:hover {
    background: #fbeaea;
    border-color: #f1caca;
}

@media (max-width: 991px) {
    .my-account-block > .row > [class*="col-"]:first-child {
        width: 100%;
        flex: 0 0 100%;
    }

    .my-account-block > .row > [class*="col-"]:last-child {
        flex: 0 0 100%;
        padding-left: 15px;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 6px;
        border-radius: 30px;
        scrollbar-width: none;
    }

    .woocommerce-MyAccount-navigation-link a,
    .woocommerce-MyAccount-navigation-link:first-child a {
        padding: 10px 18px;
        border-radius: 30px;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    .app-address-book__list {
        grid-template-columns: 1fr;
    }

    .app-address-head .button.app-address-pick-map {
        width: 100%;
    }
}

/* ---- Phones: keep the hero cheap to scroll (no zoom, no blur layers) ---------- */
@media (max-width: 766px) {
    .af-hero__bg,
    .af-hero__bg img,
    .af-hero__content {
        will-change: auto;
        transform: none !important;
    }

    .af-hero__content {
        opacity: 1 !important;
    }

    .af-benefit,
    .af-hero__cta {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .af-benefit {
        background: rgba(18, 38, 20, 0.5);
    }

    .af-hero__scroll {
        opacity: 1 !important;
    }
}

/* ---- Cart v3: compact lines on the left, sticky summary + order form on the right ---- */
.content-cart-checkout table.shop_table.cart tr.cart_item {
    grid-template-columns: 76px minmax(0, 1fr) auto auto 34px;
    grid-template-areas:
        "thumb name  qty sub remove"
        "thumb price qty sub remove";
    column-gap: 16px;
    row-gap: 2px;
    margin-bottom: 12px !important;
    padding: 12px 16px;
    border-radius: 20px;
}

.content-cart-checkout .product-thumbnail a,
.content-cart-checkout .product-thumbnail a.loading {
    width: 76px !important;
    height: 76px;
}

.content-cart-checkout tr.cart_item td.product-name { align-self: end; }
.content-cart-checkout tr.cart_item td.product-price { align-self: start; font-size: 14px; color: #6b7a65; }
.content-cart-checkout tr.cart_item td.product-price del { display: inline; margin-right: 6px; font-size: 13px; }
.content-cart-checkout tr.cart_item td.product-price .amount { font-size: 14px; font-weight: 500; color: #6b7a65; }
.content-cart-checkout tr.cart_item td.product-subtotal { min-width: 96px; font-size: 18px; }

.content-cart-checkout .alert-delivery {
    margin: 0 0 16px;
    padding: 12px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
    font-size: 15px;
}

.content-cart-checkout .alert-delivery.alert-warning {
    background: var(--hm-cream);
    color: #6a5a2a;
}

/* coupon: one tidy line */
.content-cart-checkout .coupon-bl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0 !important;
}

.content-cart-checkout .coupon-bl > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
}

.content-cart-checkout .coupon-bl > .col-md-4,
.content-cart-checkout .coupon-bl > .col-md-8 {
    flex: 1 1 220px;
}

.content-cart-checkout .coupon-bl input.coupon {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 1.5px solid var(--hm-line);
    border-radius: 30px;
}

.content-cart-checkout .coupon-bl .form-group,
.content-cart-checkout .coupon-bl .button {
    margin-bottom: 0 !important;
}

.content-cart-checkout > .container {
    width: auto;
    padding: 0;
}

@media (min-width: 992px) {
    .content-cart-checkout.woocommerce {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        column-gap: 32px;
        align-items: start;
    }

    .content-cart-checkout > * {
        grid-column: 1;
    }

    .content-cart-checkout > .title-box1 {
        grid-column: 1 / -1;
    }

    .content-cart-checkout > .row {
        grid-column: 2;
        grid-row: 2 / span 6;
        position: sticky;
        top: 96px;
        display: block;
        margin: 0;
    }

    .content-cart-checkout > .row > .cart-collaterals {
        display: block;
        width: 100% !important;
        float: none;
        margin: 0 0 16px;
        padding: 0;
    }
}

@media (max-width: 767px) {
    .content-cart-checkout table.shop_table.cart tr.cart_item {
        grid-template-columns: 64px minmax(0, 1fr) 34px;
        grid-template-areas:
            "thumb name  remove"
            "thumb price price"
            "thumb qty   sub";
        row-gap: 6px;
        padding: 12px;
        align-items: center;
    }

    .content-cart-checkout .product-thumbnail a,
    .content-cart-checkout .product-thumbnail a.loading {
        width: 64px !important;
        height: 64px;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-price {
        display: block !important;
    }

    .content-cart-checkout tr.cart_item td.product-subtotal {
        text-align: right;
        min-width: 0;
    }
}

@media (min-width: 992px) {
    .content-cart-checkout > .row > .cart-collaterals {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .content-cart-checkout > .row {
        flex-direction: column;
        max-width: 100%;
    }

    .content-cart-checkout .cart_totals table {
        width: 100%;
    }

    .content-cart-checkout .cart_totals td,
    .content-cart-checkout .cart_totals th {
        white-space: nowrap;
    }

    .content-cart-checkout .cart_totals > h2 {
        padding: 0;
        background: transparent;
    }
}

/* cart: align everything to the same left edge, plain headings in the summary */
.content-cart-checkout form,
.content-cart-checkout .table-responsive {
    margin: 0;
    padding: 0;
}

.content-cart-checkout .table-responsive {
    overflow: visible;
}

.content-cart-checkout > .container {
    margin: 0;
    max-width: none;
}

.content-cart-checkout .coupon-bl {
    justify-content: flex-start;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.content-cart-checkout .cart_totals > h2 {
    border: 0 !important;
    margin-left: 0;
}

/* ---- Cart v4: summary column that fits, no table borders / overflow ----------- */
@media (min-width: 992px) {
    .content-cart-checkout.woocommerce {
        grid-template-columns: minmax(0, 1fr) 420px;
    }

    .content-cart-checkout > .row {
        min-width: 0;
        width: 100%;
    }

    .content-cart-checkout .cart_totals td,
    .content-cart-checkout .cart_totals th {
        white-space: normal;
    }
}

.content-cart-checkout .cart-collaterals,
.content-cart-checkout .cart_totals,
.content-cart-checkout .cart_totals .table-responsive {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

/* totals table: clean rows */
.content-cart-checkout .cart_totals table.table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

.content-cart-checkout .cart_totals table.table th,
.content-cart-checkout .cart_totals table.table td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--hm-line);
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    color: #33432f;
    vertical-align: middle;
}

.content-cart-checkout .cart_totals table.table td {
    text-align: right;
    white-space: nowrap;
}

.content-cart-checkout .cart_totals table.table tr:last-child th,
.content-cart-checkout .cart_totals table.table tr:last-child td {
    border-bottom: 0;
}

.content-cart-checkout .cart_totals tr.order-total th,
.content-cart-checkout .cart_totals tr.order-total td {
    padding: 14px 16px;
    border: 0;
    background: var(--af-green-tint);
    font-size: 18px;
    font-weight: 600;
    color: var(--af-green-deeper);
}

.content-cart-checkout .cart_totals tr.order-total th {
    border-radius: 14px 0 0 14px;
}

.content-cart-checkout .cart_totals tr.order-total td {
    border-radius: 0 14px 14px 0;
}

/* order form: stacked blocks instead of a bordered table */
.content-cart-checkout .form-order .cart_totals table,
.content-cart-checkout .form-order .cart_totals tbody,
.content-cart-checkout .form-order .cart_totals tr,
.content-cart-checkout .form-order .cart_totals td {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
}

.content-cart-checkout .form-order .cart_totals tr {
    margin-bottom: 12px;
}

.content-cart-checkout .form-order .cart_totals ul.list-none,
.content-cart-checkout .form-order .cart_totals ul.list-none li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-cart-checkout .form-order .cart_totals .form-group {
    margin: 0;
}

.content-cart-checkout .form-order .cart_totals input[type="text"],
.content-cart-checkout .form-order .cart_totals input[type="tel"],
.content-cart-checkout .form-order .cart_totals input[type="email"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 50px;
}

/* payment options: wrapping, compact tiles */
.content-cart-checkout .form-order #shipping_method li + li {
    margin-top: 10px;
}

.content-cart-checkout .form-order #shipping_method label {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    border-radius: 16px;
}

.content-cart-checkout .form-order #shipping_method label input {
    flex: 0 0 auto;
    margin: 0;
}

.content-cart-checkout .form-order #shipping_method label span {
    min-width: 0;
}

.content-cart-checkout .form-order #shipping_method label svg {
    width: 24px;
    height: 24px;
}

.content-cart-checkout .form-order .wc-proceed-to-checkout {
    margin-top: 6px;
}

.content-cart-checkout .form-order .personal-data {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #7a8a74;
}

/* cart v4 fixes: kill leftover table borders / indents, left-align the form */
.content-cart-checkout .cart_totals_ajax table.table,
.content-cart-checkout .cart_totals_ajax table.table th,
.content-cart-checkout .cart_totals_ajax table.table td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

.content-cart-checkout .cart_totals_ajax table.table {
    border: 0 !important;
}

.content-cart-checkout .cart_totals_ajax table.table tr:last-child th,
.content-cart-checkout .cart_totals_ajax table.table tr:last-child td {
    border-bottom: 0 !important;
}

.content-cart-checkout .form-order .cart_totals td,
.content-cart-checkout .form-order .cart_totals td * {
    text-align: left !important;
}

.content-cart-checkout .form-order .cart_totals td {
    padding: 0 !important;
}

.content-cart-checkout .form-order .cart_totals ul.list-none {
    padding: 0 !important;
    margin: 0 !important;
}

.content-cart-checkout .form-order .cart_totals tr {
    margin-bottom: 10px;
    padding: 0 !important;
}

.content-cart-checkout .form-order .cart_totals tr.total {
    margin-top: 6px;
    margin-bottom: 0;
}

.content-cart-checkout .coupon-bl input.coupon {
    text-align: left;
}

/* payment tiles: tight spacing, identical icon boxes */
.content-cart-checkout #shipping_method li {
    padding: 0 !important;
    margin: 0 !important;
}

.content-cart-checkout #shipping_method li + li {
    margin-top: 8px !important;
}

.content-cart-checkout #shipping_method li label {
    padding: 12px 14px !important;
    gap: 12px;
}

.content-cart-checkout #shipping_method li label svg,
.content-cart-checkout #shipping_method .label_payment_method_card svg {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px;
    margin: 0 !important;
}

.content-cart-checkout #shipping_method li input[type="radio"] {
    flex: 0 0 auto;
    margin: 0 !important;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

.content-cart-checkout #shipping_method li input[type="radio"]:checked + svg {
    fill: var(--af-green-deeper);
}

/* ==== Unified form controls (same look as the cart) ============================
   Components with their own design (map picker .af-*, qty steppers, range,
   checkboxes/radios) are left alone. */
input[type="text"]:not([class*="af-"]):not(.qty):not(.input-qty),
input[type="email"]:not([class*="af-"]),
input[type="tel"]:not([class*="af-"]),
input[type="password"]:not([class*="af-"]),
input[type="search"]:not([class*="af-"]),
input[type="number"]:not([class*="af-"]):not(.qty),
input[type="url"]:not([class*="af-"]),
select:not([class*="af-"]),
textarea:not([class*="af-"]) {
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 18px;
    border: 1.5px solid var(--hm-line);
    border-radius: 18px;
    background-color: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.3;
    color: var(--hm-forest);
    transition: border-color 0.2s, box-shadow 0.2s;
}

textarea:not([class*="af-"]) {
    min-height: 120px;
    border-radius: 18px;
}

input[type="text"]:not([class*="af-"]):not(.qty):focus,
input[type="email"]:not([class*="af-"]):focus,
input[type="tel"]:not([class*="af-"]):focus,
input[type="password"]:not([class*="af-"]):focus,
input[type="search"]:not([class*="af-"]):focus,
input[type="number"]:not([class*="af-"]):focus,
input[type="url"]:not([class*="af-"]):focus,
select:not([class*="af-"]):focus,
textarea:not([class*="af-"]):focus {
    outline: none;
    border-color: var(--af-green);
    box-shadow: 0 0 0 3px rgba(var(--af-green-rgb), 0.15);
}

input::placeholder,
textarea::placeholder {
    color: #8a9885;
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--hm-mist);
    color: #8a9885;
    cursor: not-allowed;
}

input.is-invalid,
input.error,
textarea.is-invalid,
textarea.error {
    border-color: #d9534f !important;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--af-green);
}

/* ==== Popups (login, callback) ==================================================
   Same slide-in sheet as before, content as a clean card. */
.product-info-request-bl {
    background: linear-gradient(180deg, var(--hm-mist) 0%, #fff 70%);
    padding: clamp(72px, 14vh, 140px) 16px 40px;
    overflow-y: auto;
}

.product-info-request-bl .wrapper-inner {
    max-width: 440px;
    padding: 30px 28px 28px;
    border: 1px solid var(--hm-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(47, 77, 51, 0.12);
}

.app-modal-title {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 300;
    color: var(--hm-forest);
    text-align: center;
}

.product-info-request-bl .product-info-request-message {
    margin-bottom: 14px;
}

.product-info-request-bl .product-info-request-message .alert {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.4;
}

.product-info-request-bl .alert-success {
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
}

.product-info-request-bl .alert-warning {
    background: #fbf0d9;
    color: #6a5320;
}

.product-info-request-bl .alert-info {
    background: var(--hm-mist);
    color: #4a5a45;
}

.product-info-request-bl .form-group {
    margin-bottom: 12px;
}

.product-info-request-bl .form-group input {
    width: 100%;
}

.product-info-request-bl form .button,
.product-info-request-bl form button[type="submit"] {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
}

/* after a successful submit / login: fields and button disappear, only the message stays */
.product-info-request-bl form.is-done .form-group,
.product-info-request-bl form.is-done button,
.product-info-request-bl form.is-done .app-modal-title {
    display: none;
}

.product-info-request-bl .close-product-info-request::before,
.product-info-request-bl .close-product-info-request::after {
    background: var(--hm-forest);
}

/* ==== Page background: one soft gradient on the wrapper, no hard edge ============
   The tint used to live on #content, so it was cut off where the (short) content
   ended and a white band sat between it and the footer. Now it is painted by
   .wrap and fades fully to white. */
body.woocommerce-shop #content,
body.single-product #content,
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content,
body.page-template-page-delivery-and-payment-php #content {
    background: none !important;
}

body.woocommerce-shop .wrap,
body.single-product .wrap,
body.woocommerce-cart .wrap,
body.woocommerce-checkout .wrap,
body.woocommerce-account .wrap,
body.page-template-page-delivery-and-payment-php .wrap {
    background: linear-gradient(180deg, var(--hm-mist) 0, #fff 480px);
}

/* empty cart: one centred card */
.list-service1 .item-service1.table {
    display: flex !important;
    align-items: center;
    gap: 22px;
    max-width: 640px;
    margin: 36px auto 48px;
    padding: 26px 30px;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(47, 77, 51, 0.08);
}

.list-service1 .item-service1 .service-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--af-green-tint);
}

.list-service1 .item-service1 .service-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--af-green-dark);
}

.list-service1 .item-service1 .service-info {
    min-width: 0;
    padding: 0;
}

.list-service1 .item-service1 .service-info h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 400;
}

.list-service1 .item-service1 .service-info h3 a {
    color: var(--hm-forest);
}

.list-service1 .item-service1 .service-info .desc {
    margin: 0;
    font-size: 15.5px;
    color: #5b6a55;
}

.list-service1 .item-service1 .service-info .desc a.color {
    font-weight: 600;
    color: var(--af-green-dark);
}

@media (max-width: 520px) {
    .list-service1 .item-service1.table {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
    }
}

/* ==== Motion ======================================================================
   Scroll reveals + hover polish. Only opacity / translate / transform; the js-motion
   class (set in <head> by script, never under prefers-reduced-motion) gates the
   hidden start state so no-JS visitors always see everything. Script: js/af-motion.js */
.af-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--af-green), var(--af-green-dark));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

.js-motion [data-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, translate;
}

.js-motion [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    will-change: auto;
}

/* cards keep their own hover transform/shadow transitions alongside the reveal */
.js-motion .item-product[data-reveal] {
    transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1),
        transform 0.25s ease, box-shadow 0.25s ease;
    transition-delay: var(--rd, 0ms), var(--rd, 0ms), 0ms, 0ms;
}

.js-motion .hm-about__media[data-reveal] { translate: 36px 0; }
.js-motion .hm-about__text[data-reveal] { translate: -36px 0; }
.js-motion .hm-about__media[data-reveal].is-in,
.js-motion .hm-about__text[data-reveal].is-in { translate: 0 0; }

/* ---- hover polish (pointer devices only) ------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* product images: slow zoom inside the rounded frame */
    .item-product .product-thumb {
        overflow: hidden;
    }

    .item-product .product-thumb img {
        transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
    }

    .item-product:hover .product-thumb img {
        transform: scale(1.06);
    }

    /* buttons: soft light sweep + arrow nudge */
    .hm-btn,
    .af-hero__cta,
    .checkout-button,
    .button.bg-color {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .hm-btn::after,
    .af-hero__cta::after,
    .checkout-button::after,
    .button.bg-color::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
        translate: -120% 0;
        transition: translate 0.7s ease;
        pointer-events: none;
    }

    .hm-btn:hover::after,
    .af-hero__cta:hover::after,
    .checkout-button:hover::after,
    .button.bg-color:hover::after {
        translate: 120% 0;
    }

    .hm-btn svg,
    .af-hero__cta svg {
        transition: translate 0.25s ease;
    }

    .hm-btn:hover svg,
    .af-hero__cta:hover svg {
        translate: 4px 0;
    }

    /* icon tiles pop */
    .hm-step__ico,
    .pg-fact__ico,
    .af-benefit__ico,
    .list-service1 .service-icon {
        transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.25s;
    }

    .hm-step:hover .hm-step__ico,
    .pg-fact:hover .pg-fact__ico,
    .af-benefit:hover .af-benefit__ico,
    .list-service1 .item-service1:hover .service-icon {
        transform: translateY(-3px) scale(1.08) rotate(-4deg);
    }

    /* surface cards lift */
    .hm-step,
    .blockquote,
    .pg-fact,
    .pg-card,
    .hm-faq__item,
    .app-address-card,
    .af-benefit {
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
    }

    .hm-step:hover,
    .blockquote:hover,
    .pg-fact:hover,
    .pg-card:hover,
    .af-benefit:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px rgba(47, 77, 51, 0.13);
    }

    .hm-faq__item:hover {
        border-color: var(--af-green);
    }

    /* nav + footer links: underline grows from the left */
    .ft-col a,
    .ft-bottom a {
        background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
        transition: background-size 0.3s ease, color 0.2s;
    }

    .ft-col a:hover,
    .ft-bottom a:hover {
        background-size: 100% 1px;
    }

    .main-nav > ul > li > a {
        transition: color 0.2s, border-color 0.25s, background 0.25s;
    }

    /* about photo: gentle zoom of the picture inside its frame */
    .hm-about__media {
        overflow: visible;
    }

    .hm-about__media img {
        transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.4s ease;
    }

    .hm-about__media:hover img {
        transform: scale(1.015);
        box-shadow: 0 30px 70px rgba(47, 77, 51, 0.22);
    }

    /* cart rows */
    .content-cart-checkout tr.cart_item {
        transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .content-cart-checkout tr.cart_item:hover {
        border-color: var(--af-green);
        box-shadow: 0 12px 30px rgba(47, 77, 51, 0.12);
    }
}

/* press feedback everywhere */
.button:active,
.hm-btn:active,
.af-hero__cta:active,
.checkout-button:active {
    transform: translateY(0) scale(0.98);
}

/* cart badge pops when the count changes (class toggled by cart scripts or by us) */
@keyframes af-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.mini-cart-number.af-pop {
    animation: af-pop 0.45s ease;
}

/* contacts: Yandex map + route button */
.pg-panel--map .gmap_canvas {
    position: relative;
}

.pg-map-route {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    min-height: 42px;
    padding: 0 20px;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .af-progress,
    .js-motion [data-reveal],
    .item-product .product-thumb img,
    .hm-btn::after,
    .af-hero__cta::after {
        transition: none !important;
        animation: none !important;
    }

    .js-motion [data-reveal] {
        opacity: 1;
        translate: 0 0;
    }
}


/* ==== Hero-style buttons everywhere ================================================
   Same recipe as the home hero CTA (.af-hero__cta): translucent sage pill, thin light
   border, 500 weight, icon on the left. The shadow is tinted green instead of black so
   it also reads on light pages. */
.button,
a.button,
button.button,
.btn-primary,
body .shop-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-proceed-to-checkout a.checkout-button,
input[type="submit"],
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn) {
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(var(--af-green-rgb), 0.94);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(var(--af-green-rgb), 0.34);
}

.button:hover,
.button:focus,
a.button:hover,
button.button:hover,
.btn-primary:hover,
body .shop-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn):hover {
    background: var(--af-green-dark);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 30px rgba(var(--af-green-rgb), 0.42);
}

/* outline variants keep a light fill, same pill geometry */
.button.green,
.order-one-click.button,
.button.pg-btn-ghost,
.unsetcoupon.button,
.hm-btn--ghost {
    border: 1.5px solid var(--af-green);
    background: #fff;
    color: var(--af-green-dark) !important;
    box-shadow: none;
}

.button.green:hover,
.order-one-click.button:hover,
.button.pg-btn-ghost:hover,
.unsetcoupon.button:hover {
    background: var(--af-green);
    border-color: var(--af-green);
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(var(--af-green-rgb), 0.34);
}

/* compact: buttons inside product cards and dense rows */
.item-product .product-extra-link a.button,
.app-address-card__actions a.button {
    min-height: 44px;
    padding: 0 18px !important;
    font-size: 15px;
}

.cookie-popup .button {
    min-height: 46px;
    padding: 0 26px;
    font-size: 15px;
}

/* icons (CSS masks, inherit the button colour) */
.addcart-link::before,
.checkout-button::before,
.item-product .product-extra-link a.button:not(.addcart-link)::before,
.order-one-click.button::before,
.single_add_to_cart_button::before,
a.button.pg-cta-cat::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: currentColor;
}

.addcart-link::before, .single_add_to_cart_button::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8h12l1 12H5L6 8Z%22/%3E%3Cpath d=%22M9 8V6a3 3 0 0 1 6 0v2%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8h12l1 12H5L6 8Z%22/%3E%3Cpath d=%22M9 8V6a3 3 0 0 1 6 0v2%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.checkout-button::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.500 3 3 5-6%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8 12.500 3 3 5-6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.item-product .product-extra-link a.button:not(.addcart-link):not(.order-one-click)::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m13 6 6 6-6 6%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m13 6 6 6-6 6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.order-one-click.button::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 3 5 14h6l-1 7 8-11h-6l1-7Z%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 3 5 14h6l-1 7 8-11h-6l1-7Z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
a.button.pg-cta-cat::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21v-8%22/%3E%3Cpath d=%22M12 13C12 8 8.5 5 4 5c0 5 3 8 8 8Z%22/%3E%3Cpath d=%22M12 15c0-4 3-7 8-7 0 4.500-3 7-8 7Z%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21v-8%22/%3E%3Cpath d=%22M12 13C12 8 8.5 5 4 5c0 5 3 8 8 8Z%22/%3E%3Cpath d=%22M12 15c0-4 3-7 8-7 0 4.500-3 7-8 7Z%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.addcart-link.loading::before {
    display: none;
}

@media (max-width: 767px) {
    .button,
    a.button,
    button.button {
        min-height: 50px;
        padding: 0 24px;
        font-size: 16px;
    }
}

/* Product cards: the "Подробнее" button is hidden - the picture and the title already
   link to the product page. */
.item-product .product-extra-link a.button.additional,
.item-product .button.green.additional {
    display: none !important;
}

/* ==== Buttons: sage gradient, ONE hover motion (lift) ============================
   The light sweep and the arrow nudge are gone - hover = lift + deeper gradient. */
:root {
    --af-grad: linear-gradient(135deg, #78ad63 0%, var(--af-green) 48%, var(--af-green-dark) 100%);
    --af-grad-hover: linear-gradient(135deg, var(--af-green) 0%, var(--af-green-dark) 52%, var(--af-green-deeper) 100%);
}

.button,
a.button,
button.button,
.btn-primary,
body .shop-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.wc-proceed-to-checkout a.checkout-button,
input[type="submit"],
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn),
.af-hero__cta {
    background: var(--af-grad);
}

.button:hover,
.button:focus,
a.button:hover,
button.button:hover,
.btn-primary:hover,
body .shop-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.af-btn):not(.ft-subscribe__btn):hover,
.af-hero__cta:hover,
.af-hero__cta:focus {
    background: var(--af-grad-hover);
}

/* outline variants keep their light fill (override the gradient above) */
.button.green,
.order-one-click.button,
.button.pg-btn-ghost,
.unsetcoupon.button {
    background: #fff;
}

.button.green:hover,
.order-one-click.button:hover,
.button.pg-btn-ghost:hover {
    background: var(--af-grad);
}

/* remove the second hover animation (sweep + arrow nudge) */
.hm-btn::after,
.af-hero__cta::after,
.checkout-button::after,
.button.bg-color::after {
    display: none !important;
    content: none !important;
}

.hm-btn:hover svg,
.af-hero__cta:hover svg {
    translate: none;
}

/* Footer subscribe: the field is a full pill like its button (the site-wide input
   radius would otherwise win on specificity). */
.ft-subscribe__row input[type="email"],
.ft-subscribe__row input[type="text"] {
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background-color: #fff;
}

.ft-subscribe__row input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.ft-subscribe__row input[type="email"],
.ft-subscribe__row input[type="text"] {
    color: var(--hm-forest);
}

.ft-subscribe__row input::placeholder {
    color: #8a9885;
}

/* ---- Header "Обратный звонок": same pill as the other buttons ------------------- */
a.app-callback-btn.app-callback-open {
    min-height: 40px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: var(--af-grad);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 18px rgba(var(--af-green-rgb), 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

a.app-callback-btn.app-callback-open:hover,
a.app-callback-btn.app-callback-open:focus {
    background: var(--af-grad-hover);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 24px rgba(var(--af-green-rgb), 0.4);
    transform: translateY(-2px);
}

/* over the transparent hero the glass look stays, same geometry */
@media (min-width: 767px) {
    body.home:not(.af-solid) a.app-callback-btn.app-callback-open {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.75) !important;
        box-shadow: none;
    }

    body.home:not(.af-solid) a.app-callback-btn.app-callback-open:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
}

@media (max-width: 991px) {
    a.app-callback-btn.app-callback-open {
        min-height: 36px;
        padding: 0 16px !important;
        font-size: 13.5px !important;
    }
}

/* ==== Contacts map (Leaflet, light tiles, site colours) ============================ */
.pg-panel--map .af-map {
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: var(--hm-mist);
}

.pg-panel--map .leaflet-container {
    font-family: inherit;
    background: var(--hm-mist);
}

.pg-panel--map .leaflet-tile-pane {
    filter: sepia(0.18) hue-rotate(48deg) saturate(1.15) brightness(1.02);
}

.af-pin {
    background: none;
    border: 0;
    filter: drop-shadow(0 8px 10px rgba(47, 77, 51, 0.35));
}

.leaflet-popup.af-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(47, 77, 51, 0.22);
    color: var(--hm-forest);
}

.leaflet-popup.af-popup .leaflet-popup-content {
    margin: 14px 18px;
    font-size: 14px;
    line-height: 1.4;
}

.leaflet-popup.af-popup .leaflet-popup-content strong {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--af-green-dark);
}

.leaflet-popup.af-popup .leaflet-popup-content span {
    color: #5b6a55;
}

.leaflet-popup.af-popup .leaflet-popup-tip {
    background: #fff;
}

.pg-panel--map .leaflet-bar {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(47, 77, 51, 0.18);
}

.pg-panel--map .leaflet-bar a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: var(--hm-forest);
}

.pg-panel--map .leaflet-bar a:hover {
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
}

.pg-panel--map .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    font-size: 10px;
}

.pg-panel--map .leaflet-control-attribution a {
    color: var(--af-green-dark);
}

/* Header call-back button: sits 2px higher permanently (the old hover position) and
   does not move at all on hover. */
a.app-callback-btn.app-callback-open,
a.app-callback-btn.app-callback-open:hover,
a.app-callback-btn.app-callback-open:focus,
a.app-callback-btn.app-callback-open:active {
    transform: translateY(-2px) !important;
    transition: background 0.2s, box-shadow 0.2s;
}

/* OSM tiles recoloured towards the site palette; route button above the map layers */
.pg-panel--map .leaflet-tile-pane {
    filter: grayscale(0.55) sepia(0.2) hue-rotate(55deg) saturate(1.25) brightness(1.04) contrast(0.95);
}

.pg-panel--map .gmap_canvas {
    height: 100%;
    min-height: 380px;
}

.pg-panel--map .pg-map-route {
    z-index: 1000;
}

/* ==== Cart: loading indication instead of the grey block =========================== */
@keyframes af-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes af-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes af-spin {
    to { transform: rotate(360deg); }
}

/* The totals table is hidden by the cart script while it recalculates; show tidy
   skeleton rows (sage tint + a light sweep) in its place. Replaces the old grey
   block that came from the generic "div.loading" skeleton. */
.cart_totals .table-responsive.loading {
    position: relative;
    min-height: 214px;
    overflow: hidden;
    border-radius: 16px;
    background: none !important;
    animation: none !important;
}

.cart_totals .table-responsive.loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--hm-mist) 0 0) 0 0 / 100% 38px no-repeat,
        linear-gradient(var(--hm-mist) 0 0) 0 52px / 100% 38px no-repeat,
        linear-gradient(var(--hm-mist) 0 0) 0 104px / 100% 38px no-repeat,
        linear-gradient(var(--af-green-tint) 0 0) 0 160px / 100% 50px no-repeat;
    border-radius: 14px;
}

.cart_totals .table-responsive.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.75) 50%, transparent 75%);
    animation: af-shimmer 1.3s ease-in-out infinite;
}

/* no divider under "Доставка": the "Всего к оплате" plate follows directly */
.content-cart-checkout .cart_totals_ajax table.table tr.shipping th,
.content-cart-checkout .cart_totals_ajax table.table tr.shipping td {
    padding-bottom: 14px;
    border-bottom: 0 !important;
}

/* while anything in the cart recalculates: numbers pulse, delivery banner and the
   coupon button show activity */
body.af-cart-busy .content-cart-checkout .product-subtotal .amount,
body.af-cart-busy .content-cart-checkout .cart_totals td strong,
body.af-cart-busy .content-cart-checkout .alert-delivery {
    animation: af-pulse 0.9s ease-in-out infinite;
}

body.af-cart-busy .content-cart-checkout .alert-delivery {
    position: relative;
    overflow: hidden;
}

body.af-cart-busy .content-cart-checkout .alert-delivery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.65) 50%, transparent 75%);
    animation: af-shimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

body.af-cart-busy .content-cart-checkout .coupon-bl input.coupon {
    opacity: 0.6;
    pointer-events: none;
}

body.af-coupon-busy .content-cart-checkout .setcoupon,
body.af-coupon-busy .content-cart-checkout .unsetcoupon {
    pointer-events: none;
    opacity: 0.85;
}

body.af-coupon-busy .content-cart-checkout .setcoupon::before,
body.af-coupon-busy .content-cart-checkout .unsetcoupon::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    background: none;
    -webkit-mask: none;
    mask: none;
    animation: af-spin 0.7s linear infinite;
}

body.af-coupon-busy .content-cart-checkout .unsetcoupon::before {
    border-color: rgba(47, 77, 51, 0.25);
    border-top-color: var(--af-green-dark);
}

@media (prefers-reduced-motion: reduce) {
    .cart_totals .table-responsive.loading::after,
    body.af-cart-busy .content-cart-checkout .alert-delivery::after {
        animation: none !important;
    }

    body.af-cart-busy .content-cart-checkout .product-subtotal .amount,
    body.af-cart-busy .content-cart-checkout .cart_totals td strong,
    body.af-cart-busy .content-cart-checkout .alert-delivery {
        animation: none !important;
    }
}

/* Totals: no hairline above the "Всего к оплате" plate (row borders, not just cells) */
.content-cart-checkout .cart_totals_ajax table.table tr {
    border: 0 !important;
}

/* Contacts map popup: logo + address + phone + email */
.leaflet-popup.af-popup .leaflet-popup-content {
    margin: 16px 18px 14px;
}

.af-pop__logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 0 12px;
}

.af-pop__row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #33432f;
}

.af-pop__row svg {
    flex: 0 0 16px;
    margin-top: 2px;
    color: var(--af-green-dark);
}

.af-pop__row a {
    color: var(--hm-forest);
    font-weight: 500;
    text-decoration: none;
}

.af-pop__row a:hover {
    color: var(--af-green-dark);
}

.leaflet-popup.af-popup .af-pop__row span {
    color: #33432f;
}

.leaflet-container .af-pop__row a,
.leaflet-container .af-pop__row a:visited {
    color: var(--hm-forest);
}

.leaflet-container .af-pop__row a:hover {
    color: var(--af-green-dark);
}

/* ---- Button states: shape never changes ------------------------------------------
   1) the theme's ".button:focus" rule reset padding / radius / line-height after a click,
      so the pill turned into a different shape - restate the geometry for :focus/:active.
   2) outline "ghost" buttons (Весь каталог, Показать ещё) kept their dark-green text on the
      green hover fill - text now turns white on hover. */
.button:focus,
a.button:focus,
button.button:focus,
.button:active {
    padding: 0 30px;
    border-radius: 30px;
    line-height: 1.2;
    font-size: 17px;
}

@media (max-width: 767px) {
    .button:focus,
    a.button:focus,
    button.button:focus,
    .button:active {
        padding: 0 24px;
        font-size: 16px;
    }
}

.item-product .product-extra-link a.button:focus {
    padding: 0 18px !important;
    font-size: 15px;
}

.cookie-popup .button:focus {
    padding: 0 26px;
    font-size: 15px;
}

.hm-btn--ghost:hover,
.hm-btn--ghost:focus,
.hm-btn--ghost:active {
    background: var(--af-grad-hover);
    border-color: var(--af-green-dark);
    color: #fff !important;
}

.hm-btn--ghost:hover svg,
.hm-btn--ghost:focus svg {
    color: #fff;
}

.hm-btn:focus,
.hm-btn:active {
    border-radius: 30px;
}

.button.pg-btn-ghost:focus,
.button.green:focus,
.order-one-click.button:focus {
    background: #fff;
    color: var(--af-green-dark) !important;
}

.button.pg-btn-ghost:hover,
.button.green:hover,
.order-one-click.button:hover {
    background: var(--af-grad-hover);
    color: #fff !important;
}

/* ==== Product page v2 (home language) ================================================ */
body.single-product .product-detail {
    padding: clamp(18px, 2.6vw, 34px);
}

body.single-product .product-detail > .row {
    align-items: flex-start !important;
}

/* gallery: soft stage, image contained, sticks while the info scrolls */
body.single-product .gallery-coll {
    position: sticky;
    top: calc(var(--app-header-offset, 96px) + 16px);
}

body.single-product .detail-gallery .mid,
body.single-product .detail-gallery .mid.loading {
    padding: clamp(12px, 2vw, 26px);
    border-radius: 26px;
    background: radial-gradient(circle at 50% 40%, #fff 0, var(--hm-cream) 62%, #f3eedd 100%) !important;
    animation: none !important;
    box-shadow: inset 0 0 0 1px var(--hm-line);
}

body.single-product .detail-gallery .mid img {
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 18px 24px rgba(47, 77, 51, 0.18));
}

/* title block: no half-width column */
body.single-product .name-bl.row {
    margin: 0;
}

body.single-product .name-bl .col-md-7 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
}

body.single-product .detail-info {
    padding: 2px 4px 0 clamp(0px, 1.4vw, 18px);
}

body.single-product .detail-info .name-bl h2,
body.single-product .detail-info .title30 {
    margin: 0 0 14px;
    line-height: 1.1;
}

/* feature chips */
.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pd-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 14px 7px 11px;
    border-radius: 30px;
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
    font-size: 13.5px;
    line-height: 1.2;
}

.pd-chips svg {
    flex: 0 0 auto;
    color: var(--af-green-dark);
}

/* price as a card (shop users) */
body.single-product .detail-info .product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 16px;
    padding: 18px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--hm-mist) 0%, #fff 100%);
}

body.single-product .detail-info .product-price > * {
    margin: 0;
}

body.single-product .price-profit-bl {
    flex: 0 0 100%;
}

/* description: three soft cards instead of a text wall */
body.single-product .detail-description {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

body.single-product .detail-description > p {
    margin: 0;
    padding: 16px 20px 16px 22px;
    border: 1px solid var(--hm-line);
    border-left: 4px solid var(--af-green);
    border-radius: 18px;
    background: #fff;
    font-size: 15.5px;
    line-height: 1.6;
}

body.single-product .detail-description > p strong {
    margin-bottom: 5px;
}

/* hover: card lifts a hair (single motion) */
@media (hover: hover) and (pointer: fine) {
    body.single-product .detail-description > p {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    body.single-product .detail-description > p:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(47, 77, 51, 0.1);
    }
}

@media (max-width: 767px) {
    body.single-product .gallery-coll {
        position: static;
    }

    body.single-product .detail-info {
        padding: 6px 0 0;
    }

    body.single-product .detail-info .product-price {
        padding: 14px 16px;
    }
}

/* ==== Map popup polish ================================================================ */
.leaflet-popup.af-popup .leaflet-popup-content-wrapper {
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(47, 77, 51, 0.26), 0 0 0 1px rgba(47, 77, 51, 0.06);
}

.leaflet-popup.af-popup .leaflet-popup-content {
    width: auto !important;
    margin: 0;
    padding: 20px 22px 18px;
}

.af-pop__logo {
    width: 128px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hm-line);
    box-sizing: content-box;
}

.af-pop__row {
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 14px;
}

.af-pop__row svg {
    flex: 0 0 30px;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 7px;
    border-radius: 50%;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
}

.af-pop__row span {
    line-height: 1.35;
}

.leaflet-popup.af-popup .leaflet-popup-tip {
    box-shadow: 0 8px 14px rgba(47, 77, 51, 0.12);
}

/* product photos have a white backdrop: multiply it into the cream stage so no white square shows */
body.single-product .detail-gallery .mid img {
    mix-blend-mode: multiply;
    filter: none;
}

.leaflet-popup.af-popup .leaflet-popup-content {
    width: 292px !important;
    max-width: calc(100vw - 80px);
    box-sizing: border-box;
}

/* ==== About: image placeholders inside the text (swap for real photos later) ========
   To replace one: put <img src="..." alt="..."> inside .pg-ph (before the figcaption)
   and add class "has-img" to the figure. */
.pg-ph {
    position: relative;
    margin: 30px 0;
}

.pg-ph__art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.85) 0, transparent 46%),
        linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%);
    box-shadow: 0 12px 34px rgba(47, 77, 51, 0.08);
    color: var(--af-green);
}

.pg-ph--wide {
    margin: 36px -60px;
}

.pg-ph figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: #7a8a74;
    text-align: center;
}

.pg-ph.has-img .pg-ph__art {
    display: none;
}

.pg-ph.has-img img {
    display: block;
    width: 100%;
    border-radius: 26px;
    box-shadow: 0 12px 34px rgba(47, 77, 51, 0.1);
}

.pg-ph-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px -60px;
}

.pg-ph-pair .pg-ph {
    margin: 0;
}

.pg-ph-pair .pg-ph__art {
    aspect-ratio: 4 / 3;
}

@media (max-width: 991px) {
    .pg-ph--wide,
    .pg-ph-pair {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 520px) {
    .pg-ph-pair {
        grid-template-columns: 1fr;
    }

    .pg-ph__art {
        aspect-ratio: 16 / 10;
    }
}

/* ==== Product page v3: same cards / chips / prices as the catalog and the home page ==== */
body.single-product .detail-gallery .mid,
body.single-product .detail-gallery .mid.loading {
    padding: 0;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(47, 77, 51, 0.08);
    overflow: hidden;
}

/* the photo is shown exactly as shot - no blending, filters or tint */
body.single-product .detail-gallery .mid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: none;
    border-radius: 0;
}

/* price: plain, like the cards (no framed box) */
body.single-product .detail-info .product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 4px 0 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

body.single-product .detail-info .product-price del {
    font-size: 18px;
    color: #9aa593;
}

body.single-product .detail-info .product-price ins {
    font-size: 36px;
    font-weight: 600;
    color: var(--af-green-dark);
}

/* description blocks: the same card as the home steps / facts, labels as eyebrow chips */
body.single-product .detail-description {
    gap: 14px;
}

body.single-product .detail-description > p {
    padding: 22px 24px;
    border: 1px solid var(--hm-line);
    border-left: 1px solid var(--hm-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
}

body.single-product .detail-description > p strong {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.single-product .detail-description > p:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(47, 77, 51, 0.13);
}

/* chips: same tint family as the eyebrow label */
.pd-chips li {
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-weight: 500;
}

/* about photos keep their frame proportions */
.pg-ph.has-img img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.pg-ph--wide.has-img img {
    aspect-ratio: 21 / 9;
}

@media (max-width: 520px) {
    .pg-ph--wide.has-img img {
        aspect-ratio: 16 / 10;
    }
}

/* ==== Product page v4: buy block, delivery line, labels ============================== */
/* delivery line: soft sage card with a truck icon (was a bright mint bar) */
body.single-product .product-delivery {
    position: relative;
    margin: 0 0 18px;
    padding: 14px 18px 14px 56px;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
    font-size: 15px;
    line-height: 1.4;
}

body.single-product .product-delivery::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: var(--af-green-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.single-product .product-delivery a {
    color: var(--af-green-dark);
    text-underline-offset: 3px;
}

/* buy block: no dashed rules, one tidy row */
body.single-product .wrap-qty-extra {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

body.single-product .wrap-qty-extra > li {
    margin: 0;
}

@media (min-width: 1200px) {
    body.single-product .wrap-qty-extra {
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    body.single-product .wrap-qty-extra .detail-qty {
        width: 142px;
        height: 52px;
        line-height: 52px;
        margin: 0;
    }

    body.single-product .wrap-qty-extra .detail-qty a {
        height: 52px;
    }

    body.single-product .wrap-qty-extra .product-extra-link {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    body.single-product .wrap-qty-extra .product-extra-link a.button {
        margin: 0;
        min-height: 52px;
        padding: 0 28px !important;
        font-size: 17px;
    }
}

@media (max-width: 1199px) {
    body.single-product .wrap-qty-extra {
        padding: 4px 0 0;
    }
}

/* description labels: a block-level chip above the text, never inline with it */
body.single-product .detail-description > p strong {
    display: block;
    width: fit-content;
    margin: 0 0 12px;
}

/* ==== Page heroes with a photo background (About, Contacts) ========================= */
.pg-hero--img {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(280px, 33vw, 430px);
    padding: clamp(44px, 6vw, 84px) 0;
    background:
        linear-gradient(180deg, rgba(22, 42, 27, 0.58) 0%, rgba(22, 42, 27, 0.34) 52%, rgba(22, 42, 27, 0.54) 100%),
        var(--pg-hero-img) center / cover no-repeat;
    color: #fff;
}

.pg-hero--img .container {
    width: 100%;
}

.pg-hero--img .pg-hero__title {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

.pg-hero--img .pg-hero__sub {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .pg-hero--img {
        min-height: 250px;
    }
}

/* ==== Product page v5: discount badge, delivery card colour, notify icon =========== */
/* discount badge: the theme pinned it to 45x32px with a -3px nudge, which looked broken */
body.single-product .percent-sale,
.item-product .percent-sale {
    position: static;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 58px;
    height: 34px;
    margin: 0;
    padding: 0 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7e0a4 0%, #f0cf87 100%);
    color: #5a430f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(240, 207, 135, 0.45);
}

body.single-product .detail-info .product-price {
    align-items: center;
}

/* delivery card: warm cream (not the same green as the chips / labels) */
body.single-product .product-delivery {
    border-color: #eadfbf;
    background: var(--hm-cream);
    color: var(--hm-forest);
}

body.single-product .product-delivery::before {
    background: #b0802a;
}

body.single-product .product-delivery a {
    color: #8a6217;
}

body.single-product .product-delivery a:hover {
    color: #5a430f;
}

/* "Сообщить о поступлении": bell instead of the lightning bolt */
.order-one-click.button[data-notify]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2 7 2 7H4s2-1 2-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2 7 2 7H4s2-1 2-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Card prices: bold, like the product page */
.item-product .product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin-top: 6px;
}

.item-product .product-price > * {
    margin: 0;
}

.item-product .product-price ins,
.item-product .product-price .color {
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    color: var(--af-green-dark);
}

.item-product .product-price del {
    font-size: 14px;
    font-weight: 400;
    color: #9aa593;
}

.item-product .percent-sale {
    height: 28px;
    min-width: 48px;
    padding: 0 10px;
    font-size: 13px;
}

/* ==== Home: "Наши линейки", banner, quality ========================================= */
.hm-lines__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hm-line {
    display: block;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.07);
    color: var(--hm-forest);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-line:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(47, 77, 51, 0.13);
    color: var(--hm-forest);
}

.hm-line__stage {
    position: relative;
    display: block;
    height: 230px;
    background:
        radial-gradient(circle at 50% 30%, #fff 0, transparent 62%),
        linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%);
}

.hm-line__img {
    position: absolute;
    bottom: 12px;
    width: 52%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(47, 77, 51, 0.22));
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-line__img--1 { left: 6%;  transform: rotate(-7deg); z-index: 1; }
.hm-line__img--2 { left: 24%; transform: scale(1.12);   z-index: 3; }
.hm-line__img--3 { right: 6%; transform: rotate(7deg);  z-index: 2; }

.hm-line:hover .hm-line__img--1 { transform: rotate(-11deg) translateX(-8px); }
.hm-line:hover .hm-line__img--3 { transform: rotate(11deg) translateX(8px); }

.hm-line__body {
    display: flex;
    align-items: center;
    gap: 4px 12px;
    flex-wrap: wrap;
    padding: 18px 22px 20px;
}

.hm-line__title {
    font-size: 22px;
    font-weight: 500;
}

.hm-line__meta {
    font-size: 14px;
    color: #6b7a65;
}

.hm-line__arrow {
    margin-left: auto;
    color: var(--af-green-dark);
}

/* banner with a landscape and three numbers */
.hm-banner {
    padding: clamp(56px, 7vw, 96px) 0;
    background:
        linear-gradient(180deg, rgba(22, 42, 27, 0.62) 0%, rgba(22, 42, 27, 0.5) 100%),
        var(--hm-banner-img) center / cover no-repeat;
    color: #fff;
}

.hm-banner__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.hm-banner__stat strong {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hm-banner__stat span {
    display: block;
    max-width: 240px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

/* quality: text + certificate */
.hm-quality__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.hm-quality__text p {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.65;
    color: #33432f;
}

.hm-quality__list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.hm-quality__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    font-size: 15.5px;
    line-height: 1.4;
}

.hm-quality__list svg {
    flex: 0 0 22px;
    color: var(--af-green-dark);
}

.hm-cert {
    display: block;
    max-width: 380px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(47, 77, 51, 0.12);
    color: var(--hm-forest);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-cert:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 56px rgba(47, 77, 51, 0.18);
    color: var(--hm-forest);
}

.hm-cert img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.hm-cert__cap {
    display: block;
    padding: 12px 6px 2px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #6b7a65;
}

@media (max-width: 991px) {
    .hm-lines__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    .hm-quality__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hm-banner__stats {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* "Сообщить о поступлении": warm amber, clearly different from the green buy buttons */
.order-one-click.button[data-notify],
.item-product .product-extra-link a.button[data-notify],
body.single-product .product-extra-link a.order-one-click.button[data-notify],
.product-extra-link-notify a.button {
    border: 1.5px solid #e6d29c;
    background: linear-gradient(135deg, #fcf4dc 0%, #f7e7b8 100%);
    color: #7a5712 !important;
    box-shadow: none;
}

.order-one-click.button[data-notify]:hover,
.item-product .product-extra-link a.button[data-notify]:hover,
body.single-product .product-extra-link a.order-one-click.button[data-notify]:hover,
.product-extra-link-notify a.button:hover {
    border-color: #e0c27a;
    background: linear-gradient(135deg, #f7e0a4 0%, #f0cf87 100%);
    color: #5a430f !important;
    box-shadow: 0 10px 24px rgba(240, 207, 135, 0.5);
}

.order-one-click.button[data-notify]:focus,
.product-extra-link-notify a.button:focus {
    background: linear-gradient(135deg, #fcf4dc 0%, #f7e7b8 100%);
    color: #7a5712 !important;
}

/* line tiles: the pack photos are white squares - present them as rounded photo cards */
.hm-line__stage {
    height: 240px;
}

.hm-line__img {
    bottom: 22px;
    width: 40%;
    border-radius: 18px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 14px 28px rgba(47, 77, 51, 0.18), 0 0 0 1px rgba(47, 77, 51, 0.05);
    filter: none;
}

.hm-line__img--1 { left: 8%;  transform: rotate(-8deg) translateY(6px); }
.hm-line__img--2 { left: 30%; transform: scale(1.1); }
.hm-line__img--3 { right: 8%; transform: rotate(8deg) translateY(6px); }

/* ==== Lines: natural backgrounds + smooth hover ====================================== */
.hm-line__stage {
    background:
        linear-gradient(180deg, rgba(250, 247, 239, 0.12) 0%, rgba(250, 247, 239, 0.5) 100%),
        var(--hm-line-bg, none) center / cover no-repeat,
        linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%);
}

.hm-line:nth-child(1) .hm-line__stage { --hm-line-bg: url("../images/about/herbs.webp"); }
.hm-line:nth-child(2) .hm-line__stage { --hm-line-bg: url("../images/about/hero-about.webp"); }
.hm-line:nth-child(3) .hm-line__stage { --hm-line-bg: url("../images/about/hero-contacts.webp"); }

/* one calm easing for everything on the tile; individual transform properties so rotate /
   translate / scale animate independently instead of snapping between transform lists */
.hm-line {
    transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
        opacity 0.7s ease, translate 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-line:hover {
    transform: translateY(-4px);
}

.hm-line__img {
    transform: none;
    transition: rotate 0.7s cubic-bezier(0.22, 0.8, 0.3, 1), translate 0.7s cubic-bezier(0.22, 0.8, 0.3, 1),
        scale 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-line__img--1 { rotate: -8deg; translate: 0 6px; scale: 1; }
.hm-line__img--2 { rotate: 0deg;  translate: 0 0;   scale: 1.1; }
.hm-line__img--3 { rotate: 8deg;  translate: 0 6px; scale: 1; }

.hm-line:hover .hm-line__img--1 { transform: none; rotate: -11deg; translate: -8px 4px; }
.hm-line:hover .hm-line__img--2 { transform: none; rotate: 0deg;   translate: 0 -4px;  scale: 1.13; }
.hm-line:hover .hm-line__img--3 { transform: none; rotate: 11deg;  translate: 8px 4px; }

@media (prefers-reduced-motion: reduce) {
    .hm-line,
    .hm-line__img {
        transition: none !important;
    }
}

/* Lines: back to the soft sage/cream stage (no photo backgrounds) */
.hm-line .hm-line__stage {
    background:
        radial-gradient(circle at 50% 30%, #fff 0, transparent 62%),
        linear-gradient(135deg, #e7eee0 0%, #f6f1e3 100%);
}

/* ==== Reviews head: lead text + arch portrait (decorative, not attributed) ======= */
.hm-reviews__top {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    margin-bottom: clamp(28px, 4vw, 48px);
    padding: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 56px);
    border: 1px solid var(--hm-line);
    border-radius: 32px;
    background:
        radial-gradient(circle at 92% 20%, rgba(255, 255, 255, 0.9) 0, transparent 40%),
        linear-gradient(135deg, #eaf1e5 0%, #f7f2e4 100%);
}

.hm-reviews__lead .hm-title {
    margin: 0;
}

.hm-reviews__lead p {
    margin: 14px 0 0;
    font-size: 17px;
    color: #4a5a45;
}

.hm-reviews__face {
    position: relative;
    justify-self: end;
    width: 260px;
    margin: 0;
}

.hm-reviews__face::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    border-radius: 140px 140px 30px 30px;
    background: var(--af-green);
    opacity: 0.18;
}

.hm-reviews__face img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 140px 140px 30px 30px;
    box-shadow: 0 22px 50px rgba(47, 77, 51, 0.22);
}

.hm-reviews__quote {
    position: absolute;
    left: -14px;
    bottom: 28px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--af-grad);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 77, 51, 0.3);
}

@media (max-width: 767px) {
    .hm-reviews__top {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 20px 28px;
    }

    .hm-reviews__face {
        justify-self: center;
        width: 200px;
    }

    .hm-reviews__quote {
        left: -8px;
    }
}

/* ==== Product page: documents ======================================================== */
.pd-docs {
    margin-top: 26px;
}

.pd-docs__title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 300;
    color: var(--hm-forest);
}

.pd-docs__grid {
    display: grid;
    gap: 10px;
}

.pd-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    color: var(--hm-forest);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(47, 77, 51, 0.06);
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s;
}

.pd-doc:hover {
    transform: translateY(-3px);
    border-color: var(--af-green);
    box-shadow: 0 14px 30px rgba(47, 77, 51, 0.12);
    color: var(--hm-forest);
}

.pd-doc__ico {
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
}

.pd-doc__txt {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-doc__txt strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pd-doc__txt em {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.35;
    color: #6b7a65;
    word-break: break-word;
}

.pd-doc__go {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* reviews head: wide group photo instead of the arch portrait */
.hm-reviews__top {
    grid-template-columns: 1fr minmax(0, 480px);
}

.hm-reviews__face {
    width: 100%;
    max-width: 480px;
}

.hm-reviews__face::before {
    inset: 14px -12px -14px 12px;
    border-radius: 30px;
}

.hm-reviews__face img {
    aspect-ratio: 3 / 2;
    border-radius: 28px;
}

@media (max-width: 767px) {
    .hm-reviews__face {
        width: 100%;
        max-width: 420px;
    }
}

/* reviews head: three separate photos */
.hm-reviews__top {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 56px);
    align-items: center;
}

.hm-faces {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 20px);
    align-items: start;
}

.hm-face {
    position: relative;
    margin: 0;
}

.hm-face img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 26px;
    border: 3px solid #fff;
    box-shadow: 0 18px 40px rgba(47, 77, 51, 0.2);
}

/* gentle stagger on desktop: the middle photo sits lower, the outer ones lift a little */
@media (min-width: 768px) {
    .hm-face:nth-child(2) {
        margin-top: 34px;
    }

    .hm-face:nth-child(1) img {
        transform: rotate(-2deg);
    }

    .hm-face:nth-child(3) img {
        transform: rotate(2deg);
    }

    .hm-face img {
        transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
    }

    .hm-face:hover img {
        transform: translateY(-6px) rotate(0deg);
        box-shadow: 0 26px 52px rgba(47, 77, 51, 0.26);
    }
}

@media (max-width: 767px) {
    .hm-reviews__top {
        grid-template-columns: 1fr;
    }

    .hm-faces {
        gap: 8px;
    }

    .hm-face img {
        border-radius: 16px;
        border-width: 2px;
    }
}

/* FAQ section: soft landscape behind the cards (cream veil keeps the text readable) */
.hm-faq {
    background:
        linear-gradient(180deg, rgba(250, 247, 239, 0.93) 0%, rgba(243, 246, 239, 0.86) 55%, rgba(250, 247, 239, 0.94) 100%),
        url("../images/about/hero-contacts.webp") center / cover no-repeat;
}

.hm-faq__item {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hm-face img {
    aspect-ratio: 4 / 5;
}

.hm-face__quote {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--af-grad);
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 77, 51, 0.3);
}

@media (max-width: 767px) {
    .hm-face__quote {
        width: 32px;
        height: 32px;
        left: 8px;
        bottom: 8px;
        border-width: 2px;
    }

    .hm-face__quote svg {
        width: 14px;
        height: 14px;
    }
}

/* ==== Product page: manager-only original description (visually separate, plain styles) ==== */
.pd-mgr {
    margin-top: 34px;
    padding: 0;
    border: 2px dashed #d9b96a;
    border-radius: 22px;
    background: #fffaf0;
    overflow: hidden;
}

.pd-mgr__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 14px 22px;
    border-bottom: 1px dashed #e4cf9c;
    background: #fbf1d6;
}

.pd-mgr__badge {
    padding: 4px 12px;
    border-radius: 20px;
    background: #7a5712;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-mgr__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #5a430f;
}

.pd-mgr__body {
    padding: 18px 22px 22px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a3d1c;
}

/* reset: nothing inside inherits the card / chip styles of the public description */
.pd-mgr__body p {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.pd-mgr__body p:empty {
    display: none;
}

.pd-mgr__body strong,
.pd-mgr__body b {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #3b2f10;
}

.pd-mgr__body ul,
.pd-mgr__body ol {
    margin: 0 0 12px 20px;
    padding: 0;
}

.pd-mgr__body ul {
    list-style: disc;
}

.pd-mgr__body ol {
    list-style: decimal;
}

.pd-mgr__body li {
    margin: 0 0 5px;
    padding: 0;
}

.pd-mgr__body *:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .pd-mgr__head,
    .pd-mgr__body {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* "Остались вопросы?": phone as a glass pill with a round icon */
.hm-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 26px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.hm-contact__phone:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.hm-contact__phone-ico {
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--af-green-dark);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hm-contact__phone-txt {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}

.hm-contact__phone-txt small {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
}

.hm-contact__phone-txt strong {
    margin-top: 2px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .hm-contact__phone {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Phone plate and the light buttons of the contact band: identical look in every state
   (the theme's a:focus / a:active / a:visited colours must not leak in). */
.hm-contact__phone,
.hm-contact__phone:visited,
.hm-contact__phone:focus,
.hm-contact__phone:active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.38);
    outline: none;
    text-decoration: none;
}

.hm-contact__phone:hover,
.hm-contact__phone:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

.hm-contact__phone:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.hm-contact__phone .hm-contact__phone-txt small {
    color: rgba(255, 255, 255, 0.82) !important;
}

.hm-contact__phone .hm-contact__phone-ico,
.hm-contact__phone:focus .hm-contact__phone-ico,
.hm-contact__phone:active .hm-contact__phone-ico {
    background: #fff;
    color: var(--af-green-dark) !important;
}

.hm-btn--light,
.hm-btn--light:visited,
.hm-btn--light:focus,
.hm-btn--light:active {
    background: #fff;
    color: var(--hm-forest) !important;
    border-color: transparent;
    outline: none;
}

.hm-btn--light:hover {
    background: var(--hm-cream);
    color: var(--hm-forest) !important;
}

.hm-btn--light:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ==== Cart on phones - final layout (wins over the earlier iterations) ================ */
@media (max-width: 767px) {
    .content-cart-checkout table.shop_table.cart tr.cart_item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb name  remove"
            "thumb price price"
            "thumb qty   sub";
        column-gap: 14px;
        row-gap: 6px;
        padding: 14px;
        align-items: center;
        overflow: hidden;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-thumbnail {
        grid-row: 1 / span 3;
        align-self: start;
    }

    .content-cart-checkout .product-thumbnail a,
    .content-cart-checkout .product-thumbnail a.loading {
        width: 72px !important;
        height: 72px;
    }

    .content-cart-checkout .product-thumbnail a img {
        padding: 4px;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-name {
        align-self: start;
        min-width: 0;
    }

    .content-cart-checkout .product-name a {
        display: block;
        font-size: 16px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-price {
        display: block !important;
        align-self: start;
        font-size: 13.5px;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-quantity {
        min-width: 0;
    }

    .content-cart-checkout tr.cart_item .detail-qty {
        width: 112px;
        height: 40px;
        line-height: 40px;
    }

    .content-cart-checkout tr.cart_item .detail-qty a {
        height: 40px;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-subtotal {
        justify-self: end;
        min-width: 0;
        font-size: 17px;
        text-align: right;
        white-space: nowrap;
    }

    .content-cart-checkout table.shop_table.cart tr.cart_item > td.product-remove {
        align-self: start;
        justify-self: end;
    }

    .content-cart-checkout .alert-delivery {
        font-size: 14.5px;
        padding: 12px 16px;
    }
}

/* cart headings and stepper: no grey legacy fills */
.content-cart-checkout .cart_totals > h2 {
    margin: 0 0 14px;
    padding: 0;
    border: 0 !important;
    background: none !important;
    font-size: 24px;
}

.content-cart-checkout tr.cart_item .detail-qty {
    border: 1.5px solid var(--hm-line);
    border-radius: 30px;
    background: #fff;
}

.content-cart-checkout tr.cart_item .detail-qty .qty-val {
    color: var(--hm-forest);
}

/* ==== Product page: customer reviews ================================================== */
.pd-reviews {
    margin-top: 30px;
}

.pd-reviews__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.pd-reviews__title {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    color: var(--hm-forest);
}

.pd-reviews__src {
    font-size: 13.5px;
    color: var(--af-green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-reviews__list {
    display: grid;
    gap: 12px;
}

.pd-review {
    margin: 0;
    padding: 18px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(47, 77, 51, 0.06);
}

.pd-review[hidden] {
    display: none;
}

.pd-review__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pd-review__stars {
    font-size: 15px;
    letter-spacing: 2px;
    color: #e0a93a;
}

.pd-review__date {
    font-size: 12.5px;
    color: #8a9885;
    text-transform: capitalize;
}

.pd-review blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #33432f;
}

.pd-review figcaption {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--af-green-dark);
}

.pd-reviews__more {
    margin-top: 14px;
}

/* home: real reviews with product name + source */
.hm-review--wb figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hm-review--wb figcaption a {
    color: var(--af-green-dark);
    font-weight: 600;
    text-decoration: none;
}

.hm-review--wb figcaption a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hm-review--wb figcaption span {
    font-size: 12.5px;
    font-weight: 400;
    color: #8a9885;
}

/* ==== Reviews: write form + moderation badges ========================================= */
.pd-rform {
    margin: 0 0 16px;
}

.pd-rform[hidden],
.pd-rform__body[hidden],
.pd-rform__open[hidden] {
    display: none;
}

.pd-rform__body {
    padding: 20px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--hm-mist) 0%, #fff 100%);
}

.pd-rform__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
    margin-bottom: 10px;
}

.pd-rform__stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pd-rform__stars label {
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    color: #d8d8c9;
    transition: color 0.15s ease, transform 0.15s ease;
}

.pd-rform__stars input:checked ~ label,
.pd-rform__stars label:hover,
.pd-rform__stars label:hover ~ label {
    color: #e0a93a;
}

.pd-rform__stars label:hover {
    transform: scale(1.12);
}

.pd-rform textarea {
    width: 100%;
    resize: vertical;
}

.pd-rform__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pd-rform__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 12px;
}

.pd-rform__hint {
    flex: 1 1 220px;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7a65;
}

.pd-rform__msg {
    margin-top: 10px;
    font-size: 14px;
}

.pd-rform__msg.is-ok {
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--af-green-tint);
    color: var(--af-green-deeper);
}

.pd-rform__msg.is-err {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fbf0d9;
    color: #6a5320;
}

.pd-review.is-mine {
    border-color: var(--af-green);
}

.pd-review__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.pd-review__badge--wait {
    background: #fbf0d9;
    color: #7a5712;
}

.pd-review__badge--ok {
    background: var(--af-green-tint);
    color: var(--af-green-dark);
}

.pd-review__badge--no {
    background: #f6dede;
    color: #8f2f26;
}

/* review form: button hides once the form is open, name field, spacing */
.pd-rform__open[hidden] {
    display: none !important;
}

.pd-rform {
    margin: 18px 0 20px;
}

.pd-rform__open {
    margin-bottom: 0;
}

.pd-rform__body {
    margin-top: 0;
}

.pd-rform__name {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 0 12px;
}

.pd-reviews__head {
    margin-bottom: 4px;
}

/* ==== Home reviews: one card design (product photo + name), batches fade in ============== */
.hm-review--card {
    padding: 22px 24px 20px;
    gap: 14px;
    justify-content: flex-start;
}

.hm-review--card::before {
    display: none;
}

.hm-review__prod {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.hm-review__thumb {
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--hm-cream);
    color: var(--af-green-dark);
    box-shadow: inset 0 0 0 1px var(--hm-line);
}

.hm-review__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hm-review__title {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--af-green-dark);
}

a.hm-review__prod:hover .hm-review__title {
    color: var(--hm-forest);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hm-review--card blockquote {
    flex: 1 1 auto;
}

.hm-review--card figcaption {
    padding-top: 12px;
    border-top: 1px solid var(--hm-line);
    font-size: 13px;
    font-weight: 500;
    color: #6b7a65;
}

.hm-review.is-new {
    animation: af-review-in 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes af-review-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hm-review.is-new { animation: none; }
}

/* ==== Home reviews v2: stars on top, big quote, avatar + product chip at the bottom ======= */
.hm-reviews__grid {
    align-items: start;
}

.hm-review--card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 26px 22px;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(47, 77, 51, 0.06);
    transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hm-review--card::after {
    content: "\201D";
    position: absolute;
    top: -6px;
    right: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 120px;
    line-height: 1;
    color: var(--af-green);
    opacity: 0.1;
    pointer-events: none;
}

.hm-reviews__grid > .hm-review--card:nth-child(3n + 2) {
    background: linear-gradient(160deg, var(--hm-mist) 0%, #fff 70%);
}

.hm-reviews__grid > .hm-review--card:nth-child(3n + 3) {
    background: linear-gradient(160deg, #fbf7ea 0%, #fff 70%);
}

@media (hover: hover) and (pointer: fine) {
    .hm-review--card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 44px rgba(47, 77, 51, 0.12);
    }
}

.hm-review__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 20px;
}

.hm-review__stars {
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
    color: #e0a93a;
}

.hm-review__stars i {
    font-style: normal;
    color: #e6e1cd;
}

.hm-review__date {
    font-size: 12.5px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #8a9885;
}

.hm-review--card blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: #2f3f2b;
}

.hm-review__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--hm-line);
}

.hm-review__who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hm-review__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--af-grad);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(var(--af-green-rgb), 0.3);
}

.hm-review__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--hm-forest);
}

.hm-review__prod {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    max-width: 100%;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--hm-line);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

a.hm-review__prod:hover {
    border-color: var(--af-green);
    background: #fff;
}

.hm-review__thumb {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--hm-cream);
    color: var(--af-green-dark);
}

.hm-review__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-review__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--af-green-dark);
}

a.hm-review__prod:hover .hm-review__title {
    text-decoration: none;
    color: var(--hm-forest);
}

/* ==== Home reviews v3: even rows, clamped text, calmer footer ============================ */
.hm-reviews__grid {
    align-items: stretch;
}

.hm-review--card {
    gap: 14px;
    padding: 26px 28px 24px;
}

/* quote mark: smaller, well inside the corner */
.hm-review--card::after {
    top: 10px;
    right: 28px;
    font-size: 78px;
    opacity: 0.12;
}

/* long texts: six lines, "Читать полностью" opens the rest */
.hm-review--card blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.62;
}

.hm-review--card.is-open blockquote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.hm-review__more {
    align-self: flex-start;
    margin: -4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--af-green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hm-review__more:hover {
    color: var(--hm-forest);
}

/* footer: author on one line, product as a plain row (no bordered pill) */
.hm-review__foot {
    gap: 14px;
    padding-top: 16px;
}

.hm-review__prod {
    align-self: stretch;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

a.hm-review__prod:hover {
    border: 0;
    background: none;
}

.hm-review__thumb {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--hm-line);
}

.hm-review__title {
    flex: 1 1 auto;
    font-size: 12.5px;
    letter-spacing: 0.05em;
}

.hm-review__go {
    flex: 0 0 auto;
    color: var(--af-green-dark);
    opacity: 0.55;
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease;
}

a.hm-review__prod:hover .hm-review__go {
    opacity: 1;
    transform: translateX(4px);
}

/* never render empty blocks as cards */
.detail-description > p:empty,
.detail-description p:empty,
.pd-mgr__body p:empty,
.hm-review blockquote:empty {
    display: none !important;
}

/* ==== "Added to cart" toast: clear title + explicit button to the cart ===================== */
.cart-notice {
    padding: 18px 20px 16px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(47, 77, 51, 0.2);
}

.cart-notice__text {
    padding-top: 2px;
    padding-right: 34px;
}

.cart-notice__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hm-forest);
}

.cart-notice__check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--af-grad);
    -webkit-mask: none;
    position: relative;
}

.cart-notice__check::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cart-notice__desc {
    font-size: 14px;
    line-height: 1.3;
}

.cart-notice__desc a {
    color: #4a5a45;
    text-decoration: none;
}

.cart-notice__close {
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hm-mist);
    position: absolute;
}

.cart-notice__close::before,
.cart-notice__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.6px;
    background: var(--hm-forest);
}

.cart-notice__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cart-notice__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.cart-notice .cart-notice__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: var(--af-grad);
    color: #fff !important;
    font-size: 15.5px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(var(--af-green-rgb), 0.3);
    transition: background 0.2s, transform 0.2s;
}

.cart-notice .cart-notice__cta:hover {
    background: var(--af-grad-hover);
    color: #fff !important;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    #cart-notice-container {
        top: auto;
        right: 12px;
        bottom: 76px;
        left: 12px;
    }

    .cart-notice {
        width: 100%;
        max-width: none;
    }
}

/* toast: one-line title, tight line spacing */
.cart-notice {
    width: 372px;
}

.cart-notice__content {
    gap: 14px;
    align-items: center;
}

.cart-notice__text {
    min-width: 0;
    padding: 0 30px 0 0;
}

.cart-notice__title {
    margin: 0 0 3px;
    font-size: 15.5px;
    line-height: 1.25;
    white-space: nowrap;
}

.cart-notice__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.25;
}

.cart-notice__desc a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cart-notice__image {
    flex: 0 0 56px;
    width: 56px;
}

.cart-notice__close {
    top: 12px;
    right: 12px;
}

/* toast layout v2: status line on top, then the product (photo + name), then the button */
.cart-notice__title {
    margin: 0 0 14px;
    padding-right: 36px;
    font-size: 16px;
}

.cart-notice__content {
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: var(--hm-mist);
}

.cart-notice__image {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.cart-notice__image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cart-notice__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-notice__text {
    padding: 0;
}

.cart-notice__desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.cart-notice__desc a {
    color: var(--hm-forest);
}

.cart-notice .cart-notice__cta {
    margin-top: 12px;
}

.cart-notice__close {
    top: 14px;
    right: 14px;
}

/* ==== Manager roulette ================================================================ */
.rl-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: var(--af-grad);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 10px 26px rgba(var(--af-green-rgb), 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rl-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--af-green-rgb), 0.5);
}

@media (max-width: 768px) {
    .rl-fab {
        bottom: 74px;
        left: 12px;
    }
}

body.rl-lock {
    overflow: hidden;
}

.rl-modal[hidden] {
    display: none;
}

.rl-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rl-modal__bg {
    position: absolute;
    inset: 0;
    background: rgba(22, 42, 27, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.rl-modal__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px 24px 24px;
    border-radius: 30px;
    background: linear-gradient(180deg, #fff 0%, var(--hm-mist) 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: rl-in 0.35s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes rl-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.rl-modal__x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--hm-mist);
    cursor: pointer;
}

.rl-modal__x::before,
.rl-modal__x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.6px;
    background: var(--hm-forest);
}

.rl-modal__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.rl-modal__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.rl-modal__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 300;
    color: var(--hm-forest);
}

.rl-modal__sub {
    margin: 0 auto 18px;
    max-width: 320px;
    font-size: 14px;
    line-height: 1.45;
    color: #5b6a55;
}

.rl-wheel {
    position: relative;
    width: min(300px, 78vw);
    margin: 0 auto 20px;
    padding: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 14px 34px rgba(47, 77, 51, 0.22), inset 0 0 0 4px var(--af-green-tint);
}

.rl-wheel__svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
    will-change: transform;
}

.rl-wheel__pin {
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 2;
    width: 26px;
    height: 32px;
    margin-left: -13px;
    background: #d9a53a;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

.rl-spin {
    width: 100%;
    max-width: 260px;
}

.rl-spin:disabled {
    opacity: 0.7;
    cursor: wait;
}

.rl-result {
    margin-top: 16px;
}

.rl-result.is-in {
    padding: 16px 16px 14px;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    animation: rl-in 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.rl-result.is-err {
    padding: 12px 14px;
    border-radius: 14px;
    background: #fbf0d9;
    color: #6a5320;
    font-size: 14px;
}

.rl-result__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--af-green-dark);
}

.rl-result__msg {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #4a5a45;
}

.rl-result__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 8px 8px 14px;
    border: 1.5px dashed var(--af-green);
    border-radius: 14px;
    background: var(--hm-mist);
}

.rl-result__code code {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hm-forest);
    background: none;
}

.rl-copy {
    padding: 7px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--af-green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rl-cart {
    width: 100%;
    margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .rl-modal__card,
    .rl-result.is-in { animation: none; }
}

/* ==== Product sliders: room for borders, shadows and the hover lift ====================== */
/* slick clips its content (overflow:hidden), which cut the top/bottom/side of the cards.
   Vertical + side padding inside the list gives the shadows space; negative margins on the
   slider keep the layout where it was. */
.product-slider.slick-slider {
    margin-top: -14px;
    margin-bottom: -30px;
}

.product-slider .slick-list {
    padding: 14px 8px 30px 8px !important;
}

.product-slider .slick-slide {
    box-sizing: border-box;
}

.product-slider .slick-slide > div {
    padding: 0 3px;
}

@media (max-width: 768px) {
    .product-slider .slick-list {
        padding: 14px 20% 30px 6px !important;
    }

    .product-slider .item-product.item-product-grid {
        margin-bottom: 0 !important;
    }
}

/* the theme's mobile rules strip border / radius from slider cards (!important) - restore the card look */
@media (max-width: 768px) {
    .product-slider .item-product.item-product-grid {
        padding: 12px 12px 18px;
        border: 1px solid var(--hm-line) !important;
        border-radius: 22px !important;
        background: #fff;
        box-shadow: 0 8px 22px rgba(47, 77, 51, 0.09);
    }

    .product-slider .item-product .product-thumb {
        border-radius: 16px;
        background: var(--hm-cream);
        overflow: hidden;
    }

    .product-slider .item-product .product-title {
        margin-top: 10px;
        font-size: 16px;
    }
}

/* reviews: a long text next to short ones gets more lines; if it then fits, no "read more" */
.hm-review--card.is-fit .hm-review__more {
    display: none;
}

/* company name highlighted inside a section title */
.hm-title .hm-brand {
    background: var(--af-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--af-green);
}

/* review date: right of the author, bottom row (clear of the quote mark) */
.hm-review__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hm-review--card .hm-review__date {
    flex: none;
    font-size: 13px;
}

/* ---- Hero video loop (overlays the still image; image stays as fallback) ---- */
.af-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 40%;
}
@media (max-width: 766px) {
    .af-hero__video { object-position: 78% center; }
}
@media (prefers-reduced-motion: reduce) {
    .af-hero__video { display: none; }
}

/* "О компании" facts: tight line spacing in the card title */
.hm-facts strong {
    display: block;
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
}

.hm-facts li {
    gap: 6px;
}

/* ---- About photo video loop (overlays the still; image stays as fallback) ---- */
.hm-about__video {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
}
@media (hover: hover) {
    .hm-about__media .hm-about__video {
        transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .hm-about__media:hover .hm-about__video {
        transform: scale(1.015);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hm-about__video { display: none; }
}

/* ==== Contacts map on Yandex Maps JS API ================================================= */
.pg-panel--map .gmap_canvas {
    position: relative;
}

.pg-panel--map .af-map {
    background: var(--hm-mist);
}

/* the map is tinted towards the site palette (tiles only) */
.pg-panel--map [class*="ground-pane"] {
    filter: grayscale(0.35) sepia(0.15) hue-rotate(55deg) saturate(1.15) brightness(1.03);
}

.af-ypin {
    width: 40px;
    height: 52px;
    filter: drop-shadow(0 8px 10px rgba(47, 77, 51, 0.35));
}

.af-ypin svg {
    display: block;
}

/* the address card sits on the map (no ads, no org balloons from the widget) */
.af-mapcard {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    width: 292px;
    max-width: calc(100% - 32px);
    padding: 18px 20px 16px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(47, 77, 51, 0.24), 0 0 0 1px rgba(47, 77, 51, 0.06);
}

.af-mapcard__logo {
    display: block;
    width: 128px;
    height: auto;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hm-line);
    box-sizing: content-box;
}

.af-mapcard__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.35;
    color: #33432f;
}

.af-mapcard__row svg {
    flex: 0 0 30px;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--af-green-tint);
    color: var(--af-green-dark);
}

.af-mapcard__row a {
    color: var(--hm-forest);
    font-weight: 500;
    text-decoration: none;
}

.af-mapcard__row a:hover {
    color: var(--af-green-dark);
}

@media (max-width: 767px) {
    .pg-panel--map .af-map {
        min-height: 420px;
    }

    .af-mapcard {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* lighter, more natural tint; on phones the card goes below the pin */
.pg-panel--map [class*="ground-pane"] {
    filter: grayscale(0.2) sepia(0.1) hue-rotate(50deg) saturate(1.2);
}

@media (max-width: 767px) {
    .pg-panel--map .af-map {
        min-height: 460px;
    }
}

/* map tint: sage / olive greens of the site instead of the neutral grey-green */
.pg-panel--map [class*="ground-pane"] {
    filter: grayscale(0.55) sepia(0.6) hue-rotate(45deg) saturate(1.45) brightness(0.99) contrast(0.96);
}