/* Reviews and delivery-and-payment pages are removed from apifarm.app
   entirely, for everyone. */
.preview_desc,
[href*="/reviews/"],
[href*="/delivery-and-payment/"] {
    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) .woocommerce-notices-wrapper,
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: 38px;
    padding: 0 18px;
    border-radius: 3px;
    background: #70a83b;
    color: #fff !important;
    font-weight: 700;
    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;
}

/* --- 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: #57b53a;
    border: 1px solid #57b53a;
    padding: 0 25px;
}

.app-callback-btn:hover,
.app-callback-btn:focus {
    background: #2c364a;
    border-color: #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: #2c364a !important;
    background: #fff;
    transition: all .2s ease;
}

.app-login-open:hover,
.app-login-open:focus {
    color: #fff !important;
    background: #57b53a;
    border-color: #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*="/my-account/"],
.mobile_horizontal_menu li a[href*="/my-account/"] {
    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;
}

/* The catalog search/tag/price filter panel (inherited from the parent
   theme's woocommerce/loop/loop-start.php) is shop functionality - only
   shown to accounts with shop access, same as prices and purchase buttons. */
body:not(.apifarm-app-shop-access) .catalog-filters {
    display: none !important;
}