/* Akvarium theme custom styles */

/* WordPress/WooCommerce core accessibility helper — hides text visually
   while keeping it for screen readers (used for the search field label,
   skip link, pagination, and WooCommerce's "Original price was..." /
   rating text). Since this theme dequeues every non-theme stylesheet
   (see akvarium_dequeue_other_styles below), core's own copy of this
   rule never reaches the page, so it has to be re-declared here —
   otherwise all of that hidden text renders as visible garbage. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Site-wide grid gutter — calibrated to ~70px on both sides at desktop (~1920px) width */
.av-container {
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 768px) {
    .av-container {
        padding-left: 70px;
        padding-right: 70px;
    }
}

* {
    transition: 0.3s ease;
}
html {
    font-family: var(--font-primary);
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    color: var(--text-blue);
}
body,
button,
input,
select,
textarea {
    font-family: inherit;
}
strong,
b {
    font-weight: 600;
}
.av-header-nav__link {
    font-size: 22px;
}
.av-header-logo,
.av-footer-logo {
    margin: 0;
}
.av-header-logo {
    margin-top: -30px;
}
.av-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-white);
    color: var(--text-blue);
    transition: background-color 0.2s ease;
}
#av-header {
    padding: 8px 0;
}
#av-header .av-icon-btn:hover {
    background-color: var(--bg-blue);
}
#av-header .av-icon-btn:hover img {
    filter: brightness(0) invert(1);
}
#av-mobile-menu-toggle.av-icon-btn {
    width: 36px;
    height: 36px;
}
/* Mobile menu — hamburger toggle (three bars morphing into an X) + the
   full-screen slide-in panel it opens. Plain CSS transitions driven by an
   .is-open class toggle (see the mobile-menu module in assets/js/akvarium.js)
   rather than a JS animation timeline. */
.av-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 1300; /* stays above .av-mobile-menu (1200) so it's still clickable/visible while open */
}
.av-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--text-blue);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
#av-header .av-hamburger:hover span {
    background-color: #ffffff;
}
.av-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.av-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.av-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* Panel — fixed over the whole viewport; kept in the DOM (not display:none)
   so the slide-in/out transitions can actually play. */
.av-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
}
.av-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}
.av-mobile-menu__bg {
    position: absolute;
    inset: 0;
    background-color: var(--bg-blue);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.av-mobile-menu.is-open .av-mobile-menu__bg {
    transform: translateX(0);
}
.av-mobile-menu__panel {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 96px 32px 32px;
}
.av-mobile-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-mobile-menu__list li {
    margin: 0 0 20px;
    opacity: 0;
    transform: translateX(40px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
/* Stagger — each link starts its transition a little later than the one
   before it, so they cascade in rather than arriving all at once. */
.av-mobile-menu__list li:nth-child(1) { transition-delay: 0.05s; }
.av-mobile-menu__list li:nth-child(2) { transition-delay: 0.1s; }
.av-mobile-menu__list li:nth-child(3) { transition-delay: 0.15s; }
.av-mobile-menu__list li:nth-child(4) { transition-delay: 0.2s; }
.av-mobile-menu__list li:nth-child(5) { transition-delay: 0.25s; }
.av-mobile-menu__list li:nth-child(6) { transition-delay: 0.3s; }
.av-mobile-menu.is-open .av-mobile-menu__list li {
    opacity: 1;
    transform: translateX(0);
}
.av-mobile-menu__list .av-header-nav__link,
.av-mobile-menu__list .av-header-nav__link--disabled {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
}
.av-mobile-menu__extra {
    opacity: 0;
    transform: translateX(40px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, opacity 0.4s ease 0.3s;
}
.av-mobile-menu.is-open .av-mobile-menu__extra {
    opacity: 1;
    transform: translateX(0);
}
/* Body scroll lock while the panel is open (toggled by the JS module). */
body.av-menu-open {
    overflow: hidden;
}
.av-icon-btn .wp-block-image {
    margin: 0;
    display: flex;
}
.av-icon-btn img {
    display: block;
    width: 28px;
    height: 28px;
}
.av-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--bg-green);
    color: var(--text-blue);
    font-size: 11px;
    font-weight: 600;
    /* Badges sit on top of the header cart link / card button — clicks must
       fall through to the control underneath. */
    pointer-events: none;
    z-index: 1;
}
/* Empty cart (or product not in cart) — badge markup stays for the JS
   counters in akvarium.js to update, but nothing is shown. */
.av-cart-count[data-av-cart-count="0"],
.av-cart-count[data-av-card-count="0"] {
    display: none;
}
/* "Added to cart" feedback — triggered from akvarium.js (bumpCartIcon /
   bumpElement) every time a badge's count actually goes up, never on the
   initial server-rendered paint. The ring color hardcodes --bg-green's rgb
   (AAD464 = 170,212,100) since box-shadow can't take a var() with alpha. */
.av-bump {
    animation: av-cart-bump 0.4s ease;
}
.av-cart-link.av-bump::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(170, 212, 100, 0.65);
    animation: av-cart-ring 0.5s ease-out;
    pointer-events: none;
}
@keyframes av-cart-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.28); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
@keyframes av-cart-ring {
    0% { box-shadow: 0 0 0 0 rgba(170, 212, 100, 0.65); }
    100% { box-shadow: 0 0 0 16px rgba(170, 212, 100, 0); }
}
/* Quick press feedback on the button that was actually clicked (card cart
   icon or single-product add-to-cart), independent of whether the AJAX
   response has come back yet — see the fly-to-cart module in akvarium.js. */
.av-btn-pop {
    animation: av-btn-pop 0.35s ease;
}
@keyframes av-btn-pop {
    0% { transform: scale(1); }
    35% { transform: scale(0.86); }
    100% { transform: scale(1); }
}
/* Fly-to-cart dot — a small ghost that travels from the clicked button to
   the header cart icon on click, purely optimistic/cosmetic. --fly-dx/--fly-dy
   (the travel distance) are set inline by akvarium.js from the two elements'
   bounding rects. */
.av-fly-dot {
    position: fixed;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background-color: var(--bg-green);
    box-shadow: 0 2px 6px rgba(15, 44, 82, 0.35);
    pointer-events: none;
    z-index: 1100;
    opacity: 0;
}
.av-fly-dot--go {
    animation: av-fly-to-cart 0.7s cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
}
@keyframes av-fly-to-cart {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    40% {
        opacity: 1;
        transform: translate(calc(var(--fly-dx) * 0.5), calc(var(--fly-dy) * 0.5 - 70px)) scale(0.85);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fly-dx), var(--fly-dy)) scale(0.2);
    }
}
.av-footer .av-icon-btn {
    width: 28px;
    height: 28px;
    background-color: transparent;
}
.av-header-logo img,
.av-footer-logo img {
    display: block;
    width: 235px;
    height: auto;
}
/* 235px logo + the 36px mobile burger button leaves almost no slack on a
   320px-wide phone; shrink the header's copy (footer's logo has no such
   neighbor and can stay full-size). */
@media (max-width: 359px) {
    .av-header-logo img {
        width: 180px;
    }
}

/* Header/footer search block (core/search, buttonPosition: button-inside) */
.av-header-search {
    width: 260px;
}
.av-header-search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-white);
    border-radius: 999px;
    border: none;
    overflow: hidden;
}
.av-header-search .wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 6px 10px 20px;
    font-size: 16px;
    color: var(--text-blue);
}
.av-header-search .wp-block-search__input::placeholder {
    color: var(--text-blue-medium);
}
.av-header-search .wp-block-search__button.wp-element-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: transparent !important;
    color: var(--text-blue) !important;
    box-shadow: none;
    border: none;
    text-transform: none;
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.av-header-search .wp-block-search__button svg.search-icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
}
/* Desktop header row: 3-column grid (logo | menu | search+icons) so the menu
   sits at the true horizontal center of the header, not at the center of the
   leftover space between the unequal logo and actions blocks. Below lg the
   row keeps its flex justify-between layout (logo + burger only). */
@media (min-width: 1024px) {
    #av-header .av-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    #av-header .av-header-logo {
        justify-self: start;
    }
    #av-header .av-header-nav {
        justify-self: center;
    }
    #av-header .av-header-actions {
        justify-self: end;
    }
}

/* Hero section */
.av-hero {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-blue);
    color: var(--text-white);
}
.av-hero__inner {
    margin: auto 0;
    position: relative;
    z-index: 1;
    width: 100%;
}
.av-hero__content {
    padding-top: 72px;
    padding-bottom: 72px;
}
/* All five hero patterns (homepage, page-hero, category-hero, contacts-hero,
   blog-hero) share .av-hero/.av-hero__content — on a phone the 60vh floor
   plus 72px top/bottom padding made the section noticeably tall relative to
   its actual content. 56px top still clears the absolutely-positioned
   .av-page-hero__breadcrumbs (top:16px, ~20px tall) used by every variant
   except the homepage hero. */
@media (max-width: 767px) {
    .av-hero {
        min-height: 380px;
    }
    .av-hero__content {
        padding-top: 56px;
        padding-bottom: 40px;
    }
}
/* .av-hero--compact — page-hero/category-hero/contacts-hero/blog-hero (every
   secondary-page hero except the homepage one) hold nothing but breadcrumbs
   and a single heading, no subtitle/button, so the 380px floor above was
   mostly empty space on a phone. Cuts it down to roughly what the heading
   actually needs; 64px top still clears the breadcrumbs. */
@media (max-width: 767px) {
    .av-hero--compact {
        min-height: 0;
    }
    .av-hero--compact .av-hero__content {
        padding-top: 64px;
        padding-bottom: 32px;
    }
}
/* Page Hero — shared compact hero used on secondary/major pages (Catalog,
   etc.). Centered text + breadcrumbs, with pet imagery anchored left/right
   instead of the homepage hero's stacked-right layout. */
.av-page-hero__content {
    width: 100%;
    text-align: center;
}
.av-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 16px;
}
.av-page-hero__breadcrumbs {
    position: absolute;
    top: 16px;
    left: 24px;
    right: auto;
    justify-content: flex-start;
    margin: 0;
    z-index: 2;
}
@media (min-width: 768px) {
    .av-page-hero__breadcrumbs {
        left: 70px;
    }
}
.av-breadcrumbs__link {
    color: var(--text-white);
    opacity: 0.7;
    text-decoration: none;
}
.av-breadcrumbs__link:hover {
    opacity: 1;
    text-decoration: underline;
}
.av-breadcrumbs__sep {
    color: var(--text-white);
    opacity: 0.5;
}
.av-breadcrumbs__current {
    color: var(--text-white);
    opacity: 0.7;
}
/* Plain variant — used outside the colored hero (e.g. leaf category pages
   that show only breadcrumbs, no hero banner) where white text would be
   invisible against the page's normal light background. */
.av-breadcrumbs--plain {
    justify-content: flex-start;
}
.av-breadcrumbs--plain .av-breadcrumbs__link,
.av-breadcrumbs--plain .av-breadcrumbs__current {
    color: var(--text-blue);
}
.av-breadcrumbs--plain .av-breadcrumbs__sep {
    color: var(--text-blue);
}
.av-page-hero__image {
    position: absolute;
    bottom: -120px;
    margin: 0;
    z-index: 2;
}
.av-page-hero__image img {
    display: block;
    transform: scale(0.8);
    min-width: 600px;
}
.av-page-hero__image--left {
    left: 25px;
}
.av-page-hero__image--left img {
    transform-origin: bottom left;
}
.av-page-hero__image--right {
    right: 25px;
}
.av-page-hero__image--right img {
    transform-origin: bottom right;
}
@media (max-width: 1023px) {
    .av-page-hero__image {
        display: none;
    }
}
/* Blog Hero — own image size/position classes, kept separate from
   .av-page-hero__image so the blog hero's artwork can be tuned without
   affecting Catalog/category hero pages that share that class. */
.av-blog-hero__image {
    position: absolute;
    bottom: -65px;
    margin: 0;
    z-index: 2;
}
.av-blog-hero__image img {
    display: block;
}
.av-blog-hero__image--left {
    left: -60px;
}
.av-blog-hero__image--right {
    right: -60px;
}
@media (max-width: 1023px) {
    .av-blog-hero__image {
        display: none;
    }
}
/* Contacts Hero — own image size/position classes (dog-4/cat-4), kept
   separate from .av-page-hero__image / .av-blog-hero__image so the
   Contacts artwork can be positioned independently of the other heroes. */
.av-contacts-hero__image {
    position: absolute;
    transform: scale(0.9);
    bottom: -250px;
    margin: 0;
    z-index: 2;
}
.av-contacts-hero__image img {
    display: block;
}
.av-contacts-hero__image--left {
    left: -60px;
}
.av-contacts-hero__image--right {
    right: -60px;
}
@media (max-width: 1023px) {
    .av-contacts-hero__image {
        display: none;
    }
}
/* About Hero — dog-5/cat-5 artwork. Each image is a fully independent class
   (not a shared base + --left/--right modifier like the other hero
   variants) so either one can be repositioned/resized on its own; starts
   from the same defaults as .av-page-hero__image since this is a
   newly-introduced image pair with no prior tuning to match. */
.av-about-hero__dog-image {
    position: absolute;
    bottom: -20px;
    margin: 0;
    z-index: 2;
}
.av-about-hero__dog-image img {
    display: block;
    transform: scale(0.9);
    transform-origin: bottom left;
    min-width: 600px;
}
.av-about-hero__cat-image {
    position: absolute;
    right: 25px;
    bottom: -120px;
    margin: 0;
    z-index: 2;
}
.av-about-hero__cat-image img {
    display: block;
    transform: scale(0.8);
    transform-origin: bottom right;
    min-width: 600px;
}
@media (max-width: 1023px) {
    .av-about-hero__dog-image,
    .av-about-hero__cat-image {
        display: none;
    }
}
/* Contacts page — map embed (URL comes from Customizer → Contacts Page). */
.av-contacts-map__frame {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    border-radius: 24px;
}
/* Contacts page — "Контактная информация" section: info cards + socials on
   the left, "Напишите нам" form card on the right. */
.av-contacts-info__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.av-contacts-info__left {
    display: flex;
    gap: 24px;
}
.av-contacts-info__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 60%;
    min-width: 0;
}
.av-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 20px;
    background-color: var(--bg-gray-light);
}
.av-contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-green);
    color: var(--text-blue);
}
.av-contact-card__icon svg {
    width: 22px;
    height: 22px;
}
.av-contact-card__label {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: #9a9a9a;
}
.av-contact-card__line {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-blue);
}
.av-contact-card__line a {
    color: inherit;
    text-decoration: none;
}
.av-contact-card__line a:hover {
    text-decoration: underline;
}
.av-contacts-info__socials {
    align-self: flex-end;
    flex-shrink: 0;
    padding-bottom: 8px;
}
.av-contacts-info__socials-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4a5b74;
}
.av-contacts-info__socials-row {
    display: flex;
    gap: 8px;
}
.av-contacts-info__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e3e3e3;
    background-color: #ffffff;
}
.av-contacts-info__social svg {
    width: 16px;
    height: 16px;
}
.av-contacts-form {
    padding: 32px;
    border-radius: 20px;
    background-color: var(--bg-gray-light);
}
.av-contacts-form__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-blue);
}
.av-contacts-form__subtitle {
    margin: 0 0 24px;
    font-size: 16px;
    color: var(--text-blue);
}
.av-contacts-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.av-contacts-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}
.av-contacts-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.av-contacts-form__label {
    font-size: 20px;
    color: var(--bg-blue);
}
.av-contacts-form__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 20px;
    color: var(--bg-blue);
    box-sizing: border-box;
}
.av-contacts-form__input::placeholder {
    color: var(--bg-blue);
}
.av-contacts-form__input:focus {
    outline: none;
    border-color: var(--bg-blue);
}
.av-contacts-form__textarea {
    min-height: 120px;
    resize: vertical;
}
.av-contacts-form__submit {
    margin-top: 8px;
}
.av-contacts-form__submit .wp-block-button__link {
    min-width: 0;
    cursor: pointer;
}
@media (max-width: 1023px) {
    .av-contacts-info__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .av-contacts-info__left {
        flex-direction: column;
    }
    .av-contacts-info__socials {
        align-self: flex-start;
        padding-bottom: 0;
    }
}
@media (max-width: 639px) {
    .av-contacts-form {
        padding: 24px 20px;
    }
    .av-contacts-form__row {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Primary "hero-scale" section titles — Hero and Why-Us headings share
   this look. No color here: Hero/Why-Us both inherit white from their own
   colored-background container, while other future usages set color at
   their own usage site instead of hardcoding one here. */
.av-h2_title {
    margin: 0 0 16px;
    /* Fluid instead of a flat 64px — at 375px that was 3-4 lines of
       uppercase text crowding whatever follows (hero CTA, section grid). */
    font-size: clamp(26px, 5.9vw + 4px, 64px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.15;
}
.av-h2_title__accent-green {
    color: var(--text-green);
}
.av-h2_title__accent-blue {
    color: var(--text-blue);
}

/* Secondary section titles — Ad-Card headings use this look (demoted to
   h3). No color here either; see the .av-ad-card scoped override below. */
.av-h3_title {
    margin: 0 0 12px;
    font-size: clamp(20px, 3.1vw + 8px, 40px);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.av-h3_title__accent-green {
    color: var(--text-green);
}
.av-h3_title__accent-blue {
    color: var(--text-blue);
}
.av-subtitle {
    margin: 0 0 28px;
    font-size: clamp(15px, 2vw + 7.5px, 28px);
    color: var(--text-white);
}
.av-hero__image {
    position: absolute;
    bottom: -110px;
    height: auto;
    margin: 0;
}
.av-hero__image img {
    display: block;
    width: 100%;
    height: auto;
}
.av-hero__image--dog {
    right: 485px;
    width: 500px;
    z-index: 2;
}
.av-hero__image--cat {
    right: 25px;
    width: 640px;
    z-index: 3;
}
@media (max-width: 1023px) {
    .av-hero__image {
        display: none;
    }
}

/* Suppliers marquee — continuously scrolled by JS (initMarquee in
   assets/js/akvarium.js), not a CSS keyframe animation. A keyframe loop
   assumes the duplicated track is exactly double width; any rounding
   mismatch there (fonts/images loading, subpixel layout) makes the loop
   point visibly snap. JS re-measures the real track width every frame
   instead, so the reset is always seamless. Not enqueued in the editor,
   so the track simply sits still there — no override needed. */
.av-suppliers {
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
}
.av-suppliers__track {
    will-change: transform;
}
.av-suppliers__logo {
    flex-shrink: 0;
}
.av-suppliers__logo img {
    object-fit: contain;
}
/* Shared "pill + icon" button (Buttons block → style "Akvarium Pill").
   Two independent modifier classes decide color and width, same principle
   as .av-h4_title's color modifiers:
   - .av-btn--solid → blue fill / white text / white icon circle
     (default, no modifier: white fill / blue text / blue icon circle)
   - .av-btn--full  → stretches to fill its container, 420px floor */
.wp-block-button.is-style-av-pill .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    padding: 6px 6px 6px 24px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background-color: #ffffff;
    color: #175fb3;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 21px;
    box-sizing: border-box;
}
.wp-block-button.is-style-av-pill .wp-block-button__link::after {
    content: "";
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #175fb3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 54px 54px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Hover — the white pill flips to the solid/blue look, and vice versa. */
.wp-block-button.is-style-av-pill .wp-block-button__link:hover {
    background-color: var(--bg-blue);
    color: #ffffff;
}
.wp-block-button.is-style-av-pill .wp-block-button__link:hover::after {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-av-pill.av-btn--solid .wp-block-button__link {
    border-color: var(--bg-blue);
    background-color: var(--bg-blue);
    color: var(--text-white);
}
.wp-block-button.is-style-av-pill.av-btn--solid .wp-block-button__link::after {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-av-pill.av-btn--solid .wp-block-button__link:hover {
    background-color: #ffffff;
    color: #175fb3;
}
.wp-block-button.is-style-av-pill.av-btn--solid .wp-block-button__link:hover::after {
    background-color: #175fb3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wp-block-button.av-btn--full {
    width: 100%;
}
.wp-block-button.av-btn--full .wp-block-button__link {
    width: 100%;
    min-width: 420px;
    box-sizing: border-box;
}
/* The 420px floor assumes a wide banner/column; below that a full-width
   button (ad-card.php, ad-cards-row.php, instagram.php's CTA) forces the
   whole card/row wider than the viewport — visibly overflowing its card on
   a phone. .av-sale-promo gets its own unconditional min-width:0 further
   down since it's always a narrow column; these three stay full-width
   floored on desktop, only losing the floor once the viewport can no longer
   fit it. Selector must repeat .wp-block-button.av-btn--full (not just
   ".av-ad-card .wp-block-button__link") to match the base rule's own
   3-class specificity above — a shorter, "obviously more specific by being
   nested" selector still loses to an equal-or-higher-specificity rule
   regardless of source order, which is exactly why this override silently
   did nothing before. */
@media (max-width: 767px) {
    .av-ad-card .wp-block-button.av-btn--full .wp-block-button__link,
    .av-instagram-cta .wp-block-button.av-btn--full .wp-block-button__link {
        min-width: 0;
    }
}
.wp-block-button .av-btn-centred {
    justify-content: center!important;
}

/* Blog "Load More" button (templates/index.html) — a core/query-pagination-next
   block styled to match the pill CTA above, since it doesn't render the
   core/button markup those selectors target. assets/js/akvarium.js
   intercepts clicks and fetches+appends the next page instead of navigating,
   and removes this button once a fetched page has no further "next" link. */
.wp-block-query-pagination-next.av-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    padding: 6px 6px 6px 24px;
    border: 1px solid var(--bg-blue);
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: var(--text-white);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 21px;
    text-decoration: none;
    cursor: pointer;
}
.wp-block-query-pagination-next.av-load-more::after {
    content: "";
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 54px 54px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wp-block-query-pagination-next.av-load-more:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
}
.wp-block-query-pagination-next.av-load-more:hover::after {
    background-color: var(--bg-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wp-block-query-pagination-next.av-load-more--loading {
    pointer-events: none;
    opacity: .6;
}
/* Ad banner cards — capped to the source artwork's native size (884×394) */
.av-ad-card {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 884px;
    max-height: 394px;
    aspect-ratio: 884 / 394;
    padding: 32px;
    box-sizing: border-box;
    border-radius: 30px;
}
.av-ad-card__eyebrow {
    max-width: 100%;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
}
/* Ad-Card heading uses the shared .av-h3_title look; only color and the
   card-specific max-width live here. */
.av-ad-card .av-h3_title {
    color: #ffffff;
    max-width: 490px;
}
.av-ad-card__text {
    max-width: 320px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
}
/* Pin the CTA to the card's bottom edge regardless of how much
   eyebrow/title/text precedes it (the two cards in ad-cards-row.php
   often have differently-sized copy). */
.av-ad-card .wp-block-buttons {
    margin-top: auto;
}
/* The 884x394 aspect-ratio only leaves enough room for the eyebrow/title/
   text/button once the card is close to its own 884px max-width — below
   ~767px the same ratio shrinks the card's height faster than its text can
   shrink, crushing/overflowing the content. Let height follow the content
   instead, and scale the type/padding down to match. */
@media (max-width: 767px) {
    .av-ad-card {
        aspect-ratio: auto;
        min-height: 220px;
        padding: 20px;
    }
    .av-ad-card .av-h3_title {
        font-size: 20px;
    }
    .av-ad-card__text {
        font-size: 15px;
    }
    .av-ad-card__eyebrow {
        font-size: 14px;
    }
}
/* Why Us section */
.av-why-us {
    margin-top: 80px;
    margin-bottom: 80px;
}
.av-why-us__content {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-right: 48px;
    color: #ffffff;
}
/* .av-container supplies the left gutter here, so the badge/heading/features
   line up with the rest of the page's content (hero, ad cards, etc.) instead
   of using their own fixed 48px offset. */
/* Badges — Why-Us and Blog/Reviews share this look; a modifier class
   decides which background/text color pairing is used. */
.av-h4_title {
    display: inline-block;
    width: fit-content;
    margin: 0 0 16px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.av-h4_title--green {
    background-color: var(--bg-green);
    color: var(--text-blue);
}
.av-h4_title--blue {
    background-color: var(--bg-blue);
    color: var(--text-white);
}
.av-why-us__features {
    gap: 24px;
}
.av-why-us__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background-color: var(--bg-green);
    color: var(--text-blue);
}
.av-why-us__feature-icon img {
    display: block;
    width: 28px;
    height: 28px;
}
.av-why-us__feature-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.av-why-us__feature-text {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .8);
}
.av-why-us__image {
    margin: 0;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 1023px) {
    .av-why-us__image {
        min-height: 320px;
    }
}
@media (min-width: 1024px) {
    .av-why-us__content,
    .av-why-us__image {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
/* About Story (patterns/about-story.php) — photo + badge/heading/text/
   checklist/logo/stats intro block for the "О нас" page. */
.av-about-story__image {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
}
.av-about-story__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.av-about-story__content {
    min-width: 0;
}
/* Filled pill badge — unlike the plain-text .av-h4_title badges used
   elsewhere, this one needs a solid background, so it gets its own class
   rather than an .av-h4_title modifier. */
.av-about-story__badge {
    display: inline-block;
    margin: 0 0 16px;
    padding: 8px 20px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.av-about-story__text {
    margin: 16px 0 24px;
    color: var(--text-blue-medium);
    font-size: 16px;
    line-height: 1.7;
}
.av-about-story__list {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.av-about-story__list li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 28px;
    color: var(--text-blue);
    font-weight: 500;
}
.av-about-story__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--bg-blue);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.av-about-story__logo {
    margin: 0 0 32px;
}
.av-about-story__logo img {
    display: block;
    width: 160px;
    height: auto;
}
.av-about-story__stats {
    margin: 0;
}
.av-about-story__stat-value {
    margin: 0;
    color: var(--text-blue);
    font-size: 32px;
    font-weight: 700;
}
.av-about-story__stat-label {
    margin: 0;
    color: var(--text-blue-medium);
    font-size: 14px;
}
@media (min-width: 1024px) {
    .av-about-story__image,
    .av-about-story__content {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 767px) {
    .av-about-story__badge {
        font-size: 12px;
        padding: 6px 16px;
    }
    .av-about-story__text {
        font-size: 14px;
    }
    .av-about-story__stat-value {
        font-size: 26px;
    }
}
.av-footer_visual__rounds,
.av-footer_visual__green-one,
.av-footer_visual__green-two,
.av-footer_visual__green-three,
.av-footer_visual__image-99,
.av-footer_visual__image-100,
.av-footer_visual__image-101,
.av-footer_visual__image-102-a,
.av-footer_visual__image-102-b {
    margin: 0;
}
.av-footer_visual__rounds {
    position: absolute;
    top: -60px;
}
.av-footer {
    position: relative;
    margin-top: 45vh ;
}
/* The 45vh gap exists to host the floating blob/paw decorations below —
   all positioned with fixed desktop px offsets (see .av-footer_visual__*
   further down) that land nowhere near the footer content on a narrow
   viewport, same reason .av-hero__image/.av-page-hero__image/
   .av-blog-hero__image are hidden below 1024px elsewhere in this file. */
@media (max-width: 1023px) {
    .av-footer {
        margin-top: 48px;
    }
    .av-footer_visual__rounds,
    .av-footer_visual__green-one,
    .av-footer_visual__green-two,
    .av-footer_visual__green-three,
    .av-footer_visual__image-99,
    .av-footer_visual__image-100,
    .av-footer_visual__image-101,
    .av-footer_visual__image-102-a,
    .av-footer_visual__image-102-b {
        display: none;
    }
}
/* Less "air" on mobile — footer.php's spacing is all Tailwind utility
   classes (py-10, gap-10, mt-16, gap-6) sized for the lg:flex-row desktop
   layout; stacked into a single flex-col column on mobile those same gaps
   compound into a lot of empty space between the logo, the three nav-link
   columns and the social/legal row. Selectors repeat .av-footer so a single
   class beats Tailwind's own bare .py-10/.gap-10/etc rule regardless of
   which stylesheet the browser loaded last. */
@media (max-width: 767px) {
    .av-footer.py-10 {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .av-footer .gap-10 {
        gap: 24px;
    }
    .av-footer .mt-16 {
        margin-top: 32px;
    }
    .av-footer .gap-6 {
        gap: 16px;
    }
}
.av-footer .wp-block-list li,
.av-footer .wp-block-list a {
    font-size: 18px;
}
.av-footer_visual__green-one {
    top: -170px;
    left: 220px;
    z-index: -3;
}
.av-footer_visual__green-two {
    top: -150px;
    left: 41%;
    z-index: -3;
}
.av-footer_visual__green-three {
    top: -175px;
    right: 10%;
    z-index: -3;
}
.av-footer_visual__image-99,
.av-footer_visual__image-100,
.av-footer_visual__image-101,
.av-footer_visual__image-102-a,
.av-footer_visual__image-102-b {
    z-index: -2;
}
.av-footer_visual__image-99 {
    top: -283px;
    left: 68%;
}
.av-footer_visual__image-100 {
    top: -280px;
    left: 44%;
}
.av-footer_visual__image-101 {
    top: -275px;
    left: 10%;
}
.av-footer_visual__image-102-a {
    top: -100px;
    left: 35%;
}
.av-footer_visual__image-102-b {
    top: -100px;
    left: 63%;
}

/* Blog section (homepage teaser + archive listing) */

/* Blog cards */
.av-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--bg-gray-light);
}
.av-blog-card__image {
    display: block;
    margin: 0;
    aspect-ratio: 4 / 3;
    background-color: var(--bg-gray-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.av-blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}
.av-blog-card__category {
    display: inline-block;
    width: fit-content;
    margin: 0 0 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: var(--bg-green);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.av-blog-card__category a {
    color: var(--text-white);
    text-decoration: none;
}
.av-blog-card__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.av-blog-card__title a {
    color: var(--text-blue);
    text-decoration: none;
}
.av-blog-card__excerpt {
    margin: 0 0 20px;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wp-block-post-excerpt__excerpt {
    font-size: 18px;
}
.av-blog-card__link {
    margin-top: auto;
    color: var(--text-blue);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: .02em;
}

/* Single post (article) */
.av-single-post__header {
    margin: 0 0 32px;
}
.av-single-post__category {
    display: inline-block;
    width: fit-content;
    margin: 0 0 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.av-single-post__category a {
    color: var(--text-white);
    text-decoration: none;
}
.av-blog__title {
    margin: 16px 0 24px;
    font-size: 36px;
    line-height: 1.25;
    color: var(--text-blue);
}
.av-single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    color: var(--text-blue);
}
.av-single-post__meta .wp-block-post-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.av-single-post__meta .wp-block-post-author__avatar img {
    display: block;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}
.av-single-post__meta .wp-block-post-author__name {
    margin: 0;
    font-weight: 600;
    color: var(--text-blue);
}
.av-single-post__meta-sep {
    color: var(--bg-gray-light);
}
.av-single-post__date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.av-single-post__date svg {
    flex-shrink: 0;
    color: var(--text-blue-medium);
}
.av-single-post__share {
    display: flex;
    align-items: center;
    gap: 10px;
}
.av-single-post__share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--bg-gray-light);
    background: none;
    color: var(--text-blue);
    cursor: pointer;
    padding: 0;
}
.av-single-post__share-btn:hover {
    background-color: var(--bg-blue);
    color: var(--text-white);
    border-color: var(--bg-blue);
}
.av-single-post__image {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}
.av-single-post__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.av-single-post__content {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-blue);
}
.av-single-post__content > * {
    margin-top: 0;
    margin-bottom: 24px;
}
.av-single-post__content h1,
.av-single-post__content h2,
.av-single-post__content h3,
.av-single-post__content h4 {
    color: var(--text-blue);
    font-weight: 600;
    line-height: 1.25;
}
.av-single-post__content h2 {
    font-size: 28px;
}
.av-single-post__content h3 {
    font-size: 22px;
}
.av-single-post__content a {
    color: var(--text-blue);
}
.av-single-post__content img {
    border-radius: 20px;
    height: auto;
    max-width: 100%;
}
.av-single-post__content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-single-post__content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}
.av-single-post__content ul li:last-child {
    margin-bottom: 0;
}
.av-single-post__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-blue);
}
.av-single-post__content ol {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
    color: var(--text-blue);
}
.av-single-post__content ol li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.av-single-post__content ol li:last-child {
    margin-bottom: 0;
}
.av-single-post__content blockquote {
    margin: 0;
    padding: 16px 24px;
    border-left: 4px solid var(--bg-blue);
    background-color: var(--bg-gray-light);
    font-style: italic;
}
.av-single-post__content blockquote p {
    margin: 0 0 8px;
}
.av-single-post__content blockquote p:last-child {
    margin-bottom: 0;
}
.av-single-post__content blockquote cite {
    display: block;
    color: var(--text-blue-medium);
    font-size: 14px;
    font-style: normal;
}

/* Single post: two-column layout with sidebar */
.av-single-post__layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.av-single-post__main {
    min-width: 0;
    flex: 1;
}
@media (min-width: 1024px) {
    .av-single-post__layout {
        flex-direction: row;
        align-items: flex-start;
    }
    .av-post-sidebar {
        position: sticky;
        top: 24px;
        width: 340px;
        flex-shrink: 0;
    }
}

/* Single post sidebar */
.av-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.av-post-sidebar__heading {
    margin: 0 0 20px;
    color: var(--text-blue);
    font-size: 22px;
    font-weight: 700;
}
.av-post-sidebar__related,
.av-post-sidebar__categories {
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-post-sidebar__related-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--text-gray-light);
}
.av-post-sidebar__related-item:first-child {
    padding-top: 0;
}
.av-post-sidebar__related-thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-gray-light);
}
.av-post-sidebar__related-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.av-post-sidebar__related-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.av-post-sidebar__related-category {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: var(--text-white);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.av-post-sidebar__related-title {
    color: var(--text-blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.av-post-sidebar__related-title:hover {
    text-decoration: underline;
}
.av-post-sidebar__related-date {
    color: var(--text-blue-medium);
    font-size: 13px;
}
.av-post-sidebar__category-item {
    border-bottom: 1px solid var(--text-gray-light);
}
.av-post-sidebar__category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    color: var(--text-blue);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
.av-post-sidebar__category-link:hover .av-post-sidebar__category-name {
    text-decoration: underline;
}
.av-post-sidebar__category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 10px;
    background-color: var(--bg-green);
    color: var(--text-white);
    font-size: 14px;
    font-weight: 700;
}

/* Reviews section */
.av-reviews-header {
    margin-left: auto;
    margin-right: auto;
}
.av-reviews-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}
.av-review-card {
    flex: 1 1 0;
    min-width: 280px;
    box-sizing: border-box; /* without this, min-width + 40px padding needs 360px, overflowing a 375px phone's ~327px content width */
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: 24px;
    background-color: var(--bg-gray-light);
}
@media (max-width: 639px) {
    .av-review-card {
        min-width: 260px;
        padding: 24px;
    }
}
.av-review-card__stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
}
.av-review-card__star {
    margin: 0;
}
.av-review-card__star img {
    display: block;
    width: 28px;
    height: 28px;
}
.av-review-card__text {
    margin: 0 0 32px;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1.6;
}
.av-review-card__author {
    margin-top: auto;
}
.av-review-card__avatar {
    margin: 0;
    flex-shrink: 0;
}
.av-review-card__avatar img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.av-review-card__name {
    margin: 0;
    color: var(--text-blue);
    font-size: 18px;
    font-weight: 600;
}
.av-review-card__date {
    margin: 0;
    color: #9A9A9A;
    font-size: 16px;
}

/* Instagram section */
.av-instagram-header {
    margin-left: auto;
    margin-right: auto;
}
.av-instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 639px) {
    .av-instagram-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.av-instagram-grid__item {
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.av-instagram-grid__item a {
    display: block;
    width: 100%;
    height: 100%;
}
.av-instagram-grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Popular products section — built on WooCommerce Blocks
   (woocommerce/product-image, /product-button, /product-rating,
   /product-price). WC Blocks' own stylesheet is stripped by
   akvarium_dequeue_other_styles(), so the star-rating visualisation and
   the icon-only cart button are reproduced here in plain CSS instead of
   relying on WooCommerce's bundled wc-blocks-style.css. */
.av-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-gray-light);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 16px;
}
.av-product-card:hover {
    border-color: var(--text-blue);
    background-color: var(--bg-blue-light);
}
.av-product-card__image-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 0 12px;
}
.av-product-card .wc-block-components-product-image {
    margin: 0;
}
.av-product-card .wc-block-components-product-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.av-product-card:hover .wc-block-components-product-image img {
    transform: scale(1.06);
}
.av-product-card .wc-block-components-product-sale-badge {
    display: none;
}
.av-product-card__cart {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
    width: 40px;
    height: 40px;
}
.av-product-card__cart .wp-block-button__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: #ffffff;
    color: transparent;
    font-size: 0;
    transition: background-color 0.2s ease;
}
/* Icon drawn as a mask (not a plain background-image) so its color can be
   flipped to white on hover independently of the circle's own background
   color — a background-image can't be recolored that way since the SVG's
   own fill/stroke is baked into the file. */
.av-product-card__cart .wp-block-button__link::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-color: var(--text-blue);
    -webkit-mask-image: url("../../img/icons/cart.svg");
    mask-image: url("../../img/icons/cart.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.2s ease;
}
.av-product-card__cart .wp-block-button__link:hover {
    background-color: var(--bg-blue);
}
.av-product-card__cart .wp-block-button__link:hover::before {
    background-color: #ffffff;
}
/* The product-button block reveals a "Просмотр корзины" link once an item is
   added — pointless on the icon-only card button (the per-product badge
   already signals the add, and the header cart icon leads to the cart), and
   it spilled out below the 40px circle. */
.av-product-card__cart .added_to_cart {
    display: none;
}
.av-product-card__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.av-product-card__title a {
    color: var(--text-blue);
    text-decoration: none;
}
.av-product-card .wc-block-components-product-rating {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}
/* Lays the stars and the "(N)" review count out on one line — the stars
   div is block-level, so without this the count wraps underneath. */
.wc-block-components-product-rating__container {
    display: flex;
    align-items: center;
}
.wc-block-components-product-rating__stars,
.star-rating {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 70px;
    height: 12px;
}
.wc-block-components-product-rating__stars::before,
.star-rating::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 12px;
    background-repeat: repeat-x;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-4.6667 0 32.6667 28' fill='none'%3E%3Cpath d='M12.069 5.46852L13.4468 2.67647C13.4979 2.57316 13.5769 2.48621 13.6748 2.42541C13.7727 2.36461 13.8857 2.3324 14.0009 2.3324C14.1162 2.3324 14.2291 2.36461 14.327 2.42541C14.425 2.48621 14.5039 2.57316 14.5551 2.67647L17.25 8.13574C17.4273 8.49524 17.6893 8.80627 18.0134 9.04204C18.3376 9.27781 18.7142 9.43126 19.1108 9.48918L25.1376 10.3713C25.2518 10.3878 25.3591 10.436 25.4473 10.5103C25.5356 10.5847 25.6012 10.6822 25.6369 10.792C25.6726 10.9017 25.6769 11.0193 25.6492 11.1313C25.6216 11.2434 25.5632 11.3454 25.4806 11.426L21.7042 15.1036M20.9361 20.9366L21.4377 23.8593C21.4579 23.9735 21.4456 24.091 21.4021 24.1985C21.3587 24.3059 21.286 24.3991 21.1922 24.4672C21.0984 24.5353 20.9874 24.5757 20.8718 24.5837C20.7561 24.5918 20.6406 24.5672 20.5383 24.5127L15.1508 21.6798C14.7958 21.4932 14.4009 21.3957 13.9999 21.3957C13.5989 21.3957 13.2039 21.4932 12.849 21.6798L7.46265 24.5127C7.36037 24.5668 7.24495 24.5912 7.12951 24.583C7.01408 24.5748 6.90327 24.5343 6.80968 24.4663C6.71608 24.3982 6.64347 24.3052 6.6001 24.1979C6.55673 24.0906 6.54434 23.9733 6.56434 23.8593L7.59214 17.8633C7.66024 17.4675 7.63092 17.061 7.50673 16.679C7.38253 16.297 7.1672 15.9511 6.87933 15.671L2.52079 11.4275C2.43749 11.347 2.37845 11.2448 2.35042 11.1324C2.32238 11.02 2.32647 10.902 2.36222 10.7918C2.39797 10.6816 2.46394 10.5837 2.55261 10.5092C2.64129 10.4347 2.74911 10.3866 2.86378 10.3704L8.88944 9.48949C9.04595 9.455 9.20156 9.41648 9.35609 9.37398M2.33431 2.3324L25.667 25.6676' stroke='%23E7F0F7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wc-block-components-product-rating__stars span,
.star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    overflow: hidden;
    display: block;
    /* This span's own text ("Rated 5 out of 5 based on N ratings") is
       WooCommerce's accessibility label for the star graphic below —
       not wrapped in .screen-reader-text, so hide it directly instead
       of relying on the (fragile) overflow-clipping alone. */
    font-size: 0;
    color: transparent;
}
.wc-block-components-product-rating__stars span::before,
.star-rating span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 12px;
    background-repeat: repeat-x;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='-2 0 14 12' fill='none'%3E%3Cpath d='M5.86064 1.03949C5.81867 1.06555 5.78482 1.10281 5.76291 1.14708L4.60841 3.48658C4.53226 3.64072 4.4198 3.77404 4.2807 3.87507C4.14161 3.97611 3.98004 4.04183 3.80991 4.06658L1.22741 4.44408C1.17826 4.45103 1.13205 4.47164 1.09405 4.50357C1.05605 4.5355 1.02777 4.57746 1.01245 4.62468C0.99713 4.67189 0.995377 4.72246 1.00739 4.77062C1.01941 4.81878 1.04471 4.8626 1.08041 4.89708L2.94841 6.71558C3.07172 6.83566 3.16396 6.98393 3.21718 7.1476C3.2704 7.31128 3.28301 7.48545 3.25391 7.65508L2.81341 10.2246C2.80484 10.2734 2.81015 10.3237 2.82874 10.3697C2.84733 10.4157 2.87845 10.4555 2.91856 10.4847C2.95867 10.5139 3.00616 10.5312 3.05564 10.5347C3.10511 10.5382 3.15458 10.5278 3.19841 10.5046L5.50691 9.29058C5.65905 9.21069 5.82832 9.16896 6.00016 9.16896C6.172 9.16896 6.34127 9.21069 6.49341 9.29058L8.80241 10.5046C8.84626 10.5279 8.89579 10.5385 8.94534 10.535C8.9949 10.5316 9.04249 10.5143 9.08268 10.4851C9.12288 10.4559 9.15405 10.416 9.17266 10.3699C9.19127 10.3239 9.19655 10.2735 9.18791 10.2246L8.74691 7.65458C8.71794 7.48503 8.73061 7.31097 8.78383 7.1474C8.83705 6.98382 8.92922 6.83563 9.05241 6.71558L10.9204 4.89658C10.9558 4.86206 10.9809 4.81831 10.9927 4.7703C11.0045 4.72228 11.0027 4.67191 10.9874 4.62488C10.9721 4.57785 10.944 4.53604 10.9062 4.50418C10.8683 4.47232 10.8224 4.45167 10.7734 4.44458L8.19041 4.06658C8.02047 4.04164 7.85913 3.97583 7.72022 3.87481C7.58132 3.77378 7.469 3.64056 7.39291 3.48658L6.23791 1.14708C6.216 1.10281 6.18215 1.06555 6.14019 1.03949C6.09822 1.01344 6.04981 0.999634 6.00041 0.999634C5.95102 0.999634 5.9026 1.01344 5.86064 1.03949Z' stroke='%23FFC107' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wc-block-components-product-rating__reviews_count {
    margin-left: 4px;
    font-size: 16px;
    color: #9A9A9A;
}
/* Single product page — bigger stars than the compact product-card
   version above, reusing the exact same SVG (just scaled up) so there's
   still only one star-rating implementation site-wide. */
.av-product-single .wc-block-components-product-rating__stars,
.av-product-single .star-rating {
    width: 105px;
    height: 18px;
}
.av-product-single .wc-block-components-product-rating__stars::before,
.av-product-single .star-rating::before,
.av-product-single .wc-block-components-product-rating__stars span::before,
.av-product-single .star-rating span::before {
    width: 105px;
    height: 18px;
    background-size: 21px 18px;
}
.av-product-single .wc-block-components-product-rating__stars span,
.av-product-single .star-rating span {
    height: 18px;
}
.av-product-card .wp-block-woocommerce-product-price {
    margin-top: auto;
}
.av-product-card .wc-block-components-product-price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
}
.av-product-card .wc-block-components-product-price ins {
    color: var(--text-blue);
    font-size: 18px;
    text-decoration: none;
}
.av-product-card .wc-block-components-product-price ins .woocommerce-Price-amount.amount {
    font-weight: 600;
}
.av-product-card .wc-block-components-product-price del {
    color: var(--text-blue);
    font-weight: 400;
    font-size: 16px;
}

/* Sale products section — random on-sale picks in a swipeable carousel,
   plus a promo card. Layout is plain CSS (flex/grid), not the block's
   own "layout"/"displayLayout" attributes, for the same reason as
   elsewhere in this file: this theme dequeues every non-theme
   stylesheet, so the block-generated layout CSS never reaches the page. */
.av-sale__carousel-col {
    flex: 2 1 0;
    min-width: 0;
}
.av-sale__promo-col {
    flex: 1 1 0;
    min-width: 0;
}
.av-carousel {
    position: relative;
}
.av-carousel__track {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.av-carousel__track::-webkit-scrollbar {
    display: none;
}
.av-carousel__track > li {
    flex: 0 0 calc(50% - 12px);
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .av-carousel__track > li {
        flex-basis: calc(33.333% - 16px);
    }
}
@media (min-width: 1280px) {
    .av-carousel__track > li {
        flex-basis: calc(25% - 18px);
    }
}
.av-carousel__arrow {
    position: absolute;
    top: 45%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background-color: var(--bg-green);
    color: var(--text-blue);
    cursor: pointer;
}
.av-carousel__arrow--prev {
    left: -17px;
}
.av-carousel__arrow--next {
    right: -17px;
}
.av-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}
.av-carousel__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #D8D8D8;
    cursor: pointer;
}
.av-carousel__dots button.is-active {
    width: 20px;
    border-radius: 4px;
    background-color: var(--bg-green);
}
.av-sale-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
    padding: 32px;
    border-radius: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* .av-btn--full's 420px floor assumes a wide banner (ad-card); this
   card is a narrow ~1/3-width sidebar column, so that floor forces the
   whole row wider than the viewport on anything but very wide screens
   — hence the page-wide horizontal overflow/blank space on the right.
   Let the button just fill this narrower column instead. Selector repeats
   .wp-block-button.av-btn--full to match the base rule's 3-class
   specificity (akvarium.css, ~line 910) — without it this override loses
   regardless of source order and the button keeps overflowing. */
.av-sale-promo .wp-block-button.av-btn--full .wp-block-button__link {
    min-width: 0;
}

/* Category slider — reuses the .av-carousel arrow/dot/scroll mechanism
   from sale-products.php, but the track holds plain divs (.av-category-card)
   instead of a WooCommerce <li> post-template, so it needs its own
   flex-basis/scroll-snap rule (the ">li" rule elsewhere only matches
   product cards). */
.av-category-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.av-category-track::-webkit-scrollbar {
    display: none;
}
.av-category-track > .av-category-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .av-category-track > .av-category-card {
        flex-basis: calc(33.333% - 16px);
    }
}
@media (min-width: 1280px) {
    .av-category-track > .av-category-card {
        flex-basis: calc(25% - 18px);
    }
}
.av-category-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 24px;
    border: 2px solid var(--text-blue);
    border-radius: 20px;
    background-color: #ffffff;
    text-decoration: none;
    overflow: hidden;
}
.av-category-card__link:hover {
    background-color: var(--bg-blue-light);
}
.av-category-card__paw {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
.av-category-card__paw--tl {
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.23' clip-path='url(%23clip0_36185_19835)'%3E%3Cpath d='M42.0595 23.8827C41.9611 22.8252 41.5208 21.9463 40.7854 21.3416L40.7755 21.3338C40.4394 21.0627 40.0555 20.8572 39.6436 20.7277L39.5983 20.7134C37.6611 20.1344 35.1758 21.1521 33.4148 23.2466C32.1249 24.7775 31.4429 26.6465 31.5904 28.2464C31.6879 29.3044 32.1296 30.1838 32.8685 30.7896L32.8766 30.796C33.2126 31.0671 33.5966 31.2726 34.0084 31.4021C35.9549 32.016 38.4607 31.0047 40.2502 28.8842C41.5302 27.3525 42.2075 25.4836 42.0595 23.8827ZM31.0771 31.848C30.1758 30.8291 29.3241 29.8655 28.9956 28.5136C28.0927 24.7735 27.5471 22.5158 24.5481 21.5699C21.5491 20.624 19.8041 22.1593 16.9146 24.7033C15.868 25.623 14.6152 25.9236 13.2881 26.2428C11.7666 26.6081 10.1946 26.9855 9.13121 28.3684C8.73169 28.8618 8.4305 29.4273 8.24397 30.0341C7.44141 32.5788 8.77031 35.2742 11.2052 36.0422C12.4616 36.4384 13.9359 36.4248 15.4962 36.4103C16.9964 36.3963 18.5472 36.3819 19.7633 36.7654C20.9793 37.149 22.2378 38.0494 23.4535 38.92C24.7211 39.8233 25.9145 40.6783 27.1744 41.0757C29.6058 41.8425 32.2371 40.3961 33.0397 37.8515C33.2328 37.2462 33.3081 36.6096 33.2616 35.9759C33.1845 34.2317 32.113 33.0198 31.0771 31.848ZM17.8299 16.7155C18.3389 18.038 19.2242 18.9569 20.3228 19.3034C20.4728 19.3506 20.626 19.3867 20.7813 19.4114C23.1788 19.7971 25.4883 17.4515 26.0408 14.0662C26.274 12.6432 26.1501 11.2103 25.6963 10.0337C25.188 8.71385 24.3011 7.79519 23.2032 7.44894C23.0533 7.40167 22.9 7.36556 22.7447 7.34089C20.3472 6.95517 18.0378 9.30077 17.4852 12.6861C17.2519 14.1067 17.3763 15.5382 17.8299 16.7155ZM28.8724 21.9633C29.0137 22.0322 29.16 22.0906 29.3099 22.1379C30.4092 22.4846 31.6608 22.2396 32.8364 21.4485C33.8826 20.7442 34.803 19.6423 35.4302 18.3444C36.9195 15.256 36.3736 12.0098 34.1891 10.9489C34.0478 10.88 33.9015 10.8216 33.7516 10.7743C32.6533 10.4295 31.3998 10.673 30.2263 11.4625C29.1795 12.1658 28.2559 13.2683 27.6308 14.5692C26.1416 17.6576 26.6874 20.9037 28.8724 21.9633ZM12.4334 24.3483L12.4444 24.3479C13.3958 24.2752 14.2612 23.8088 14.9471 22.9987C15.9867 21.7701 16.5004 19.8504 16.3237 17.8568C16.0786 15.0978 14.6074 12.8314 12.663 12.2182C12.2515 12.0877 11.8191 12.0358 11.3883 12.0651L11.3773 12.0656C10.429 12.1361 9.56266 12.6053 8.87678 13.4155C7.83715 14.644 7.32349 16.5638 7.50021 18.5573C7.74521 21.3163 9.21644 23.5827 11.1608 24.196C11.5717 24.326 12.0034 24.3776 12.4334 24.3483Z' fill='%23175FB3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_36185_19835'%3E%3Crect width='38' height='38' fill='white' transform='translate(11.4302) rotate(17.5051)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.av-category-card__paw--br {
    bottom: 8px;
    right: 8px;
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.23' clip-path='url(%23clip0_36185_19837)'%3E%3Cpath d='M38.3533 13.6146C37.7567 12.736 36.9468 12.1787 36.0109 12.004L35.9984 12.002C35.5733 11.9269 35.1378 11.9322 34.7146 12.0176L34.6681 12.027C32.6919 12.4549 31.0066 14.5458 30.4753 17.2301C30.0846 19.1935 30.3894 21.1596 31.2908 22.4895C31.8868 23.3691 32.6982 23.926 33.6377 24.1L33.6479 24.1017C34.0731 24.1769 34.5085 24.1716 34.9317 24.0861C36.9328 23.6842 38.6392 21.5891 39.1828 18.8682C39.5645 16.9089 39.2557 14.9452 38.3533 13.6146ZM32.5797 25.8916C31.2986 25.4342 30.0875 25.0015 29.1473 23.9761C26.5512 21.1363 24.9837 19.4224 21.9006 20.0415C18.8175 20.6607 18.0303 22.8476 16.7276 26.4703C16.255 27.781 15.3029 28.649 14.2946 29.5691C13.1385 30.6234 11.9439 31.7127 11.6801 33.4371C11.5683 34.0621 11.5775 34.7027 11.7071 35.3242C12.2324 37.9402 14.6973 39.6594 17.2005 39.1567C18.4921 38.8973 19.7767 38.1737 21.1362 37.4079C22.4433 36.6715 23.7946 35.9103 25.0447 35.6592C26.2948 35.4082 27.8316 35.5893 29.3165 35.765C30.8627 35.9442 32.3206 36.117 33.6158 35.8569C36.1153 35.3549 37.7217 32.8181 37.1963 30.2021C37.0733 29.5788 36.832 28.9849 36.4854 28.4524C35.5759 26.9621 34.0525 26.4179 32.5797 25.8916ZM13.6737 19.0329C14.7578 19.9454 15.9767 20.3228 17.106 20.096C17.2602 20.065 17.4118 20.0227 17.5598 19.9693C19.8456 19.1499 20.7361 15.9809 19.5859 12.7493C19.1034 11.3905 18.3032 10.1954 17.3378 9.38401C16.2556 8.47341 15.0354 8.09696 13.9068 8.32362C13.7526 8.35462 13.6009 8.39697 13.453 8.45033C11.1672 9.26974 10.2767 12.4387 11.4269 15.6703C11.9083 17.0271 12.7082 18.2207 13.6737 19.0329ZM25.8776 18.2988C26.0347 18.2909 26.1909 18.2714 26.3451 18.2405C27.4752 18.0136 28.4531 17.1949 29.1008 15.9346C29.6772 14.8128 29.9513 13.4035 29.8742 11.964C29.6877 8.54039 27.6428 5.9609 25.2175 6.08612C25.0605 6.09402 24.9042 6.1135 24.75 6.14443C23.6217 6.37254 22.6415 7.19091 21.9948 8.44873C21.4175 9.56997 21.1408 10.9813 21.2213 12.4224C21.4077 15.846 23.4526 18.4255 25.8776 18.2988ZM12.6317 28.3224L12.6412 28.3168C13.4393 27.7939 13.972 26.9677 14.1817 25.9271C14.4992 24.3493 14.0224 22.4201 12.9054 20.7595C11.3591 18.4614 8.97663 17.1866 6.97776 17.5881C6.55434 17.6725 6.15058 17.8357 5.7875 18.0694L5.77805 18.075C4.98155 18.5946 4.44933 19.4236 4.2397 20.4642C3.92219 22.042 4.39897 23.9713 5.51598 25.6319C7.06231 27.93 9.44475 29.2047 11.4436 28.8033C11.8663 28.7188 12.2693 28.5557 12.6317 28.3224Z' fill='%23175FB3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_36185_19837'%3E%3Crect width='38' height='38' fill='white' transform='translate(0 7.48224) rotate(-11.3558)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.av-category-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 195px;
    margin: 0 0 40px;
}
.av-category-card__photo {
    width: 80%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.av-category-card__link:hover .av-category-card__photo {
    transform: scale(1.06);
}
/* Subcategory cards only (.av-subcategory-card) — green organic blob behind
   the subject photo. Scoped to this modifier class specifically so the
   plain category-slider cards (homepage/catalog) stay blob-free. */
.av-subcategory-card .av-category-card__visual {
    position: relative;
}
.av-subcategory-card__blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    background-color: var(--bg-green);
    border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%;
    transform: translate(-50%, -50%);
    z-index: 0;
}
.av-subcategory-card .av-category-card__photo {
    position: relative;
    z-index: 1;
}
/* Category archive toolbar (results count + sorting) — the WooCommerce
   blocks (product-results-count/catalog-sorting) rely on core's block
   library CSS for their flex layout, which this theme dequeues entirely
   (see akvarium_dequeue_other_styles), so the row layout and the native
   <select>'s look need to be rebuilt here from scratch. */
.av-category-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 0 24px;
}
/* Result count + sorting pill don't both fit on one nowrap line at phone
   widths (the block's own layout attribute forces nowrap, see comment
   above) — stack them instead of letting the row overflow. */
@media (max-width: 639px) {
    .av-category-toolbar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }
}
.woocommerce-result-count {
    margin: 0;
    color: var(--text-blue);
    font-size: 16px;
}
.wc-block-catalog-sorting {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wc-block-catalog-sorting::before {
    content: "Сортировка:";
    color: var(--text-blue);
    font-size: 16px;
    white-space: nowrap;
}
.wc-block-catalog-sorting .orderby {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 36px 10px 20px;
    border: 2px solid var(--text-blue);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23175FB3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Category archive filters sidebar (Brand, Price, Package weight, Reset).
   The checkboxes, price number inputs and the draggable price range slider
   all work client-side (see initPriceFilter in assets/js/akvarium.js); none
   of it is wired to the actual product query yet. */
.av-filters {
    flex-shrink: 0;
    width: 100%;
}
@media (min-width: 1024px) {
    .av-filters {
        width: 260px;
    }
}
/* Filters toggle — below 1024px the sidebar is collapsed into a dropdown
   behind this button (assets/js/akvarium.js toggles .is-open on both the
   button and #av-filters-panel); at 1024px+ the sidebar is always visible
   so the button itself is hidden via the lg:hidden Tailwind class already
   on it in the markup. */
.av-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 16px;
    padding: 14px 20px;
    border: 2px solid var(--text-blue);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
.av-filters-toggle svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.av-filters-toggle.is-open svg {
    transform: rotate(180deg);
}
@media (max-width: 1023px) {
    .av-filters {
        display: none;
        margin: 0 0 24px;
        padding: 20px;
        border-radius: 16px;
        background-color: var(--bg-gray-light);
        box-sizing: border-box;
    }
    .av-filters.is-open {
        display: block;
    }
}
.av-filters__title {
    margin: 0 0 16px;
    color: var(--text-blue);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.av-filters__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.av-filters__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-blue);
    font-size: 16px;
    cursor: pointer;
}
.av-filters__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--text-blue);
    cursor: pointer;
}
.av-filters__divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid var(--bg-gray-light);
}
.av-filters__price-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.av-filters__price-input {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--text-blue);
    border-radius: 10px;
    color: var(--text-blue);
    font-size: 16px;
}
.av-filters__slider {
    position: relative;
    height: 18px;
}
.av-filters__slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--bg-gray-light);
    border-radius: 999px;
    transform: translateY(-50%);
}
.av-filters__slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 35%;
    height: 3px;
    background-color: var(--text-blue);
    border-radius: 999px;
    transform: translateY(-50%);
}
/* Classic overlapping dual-range technique: two full-width <input
   type="range"> stacked on the same track, each with pointer-events
   disabled everywhere except its own thumb, so both handles stay
   independently draggable without JS-driven pointer math. */
.av-filters__range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.av-filters__range::-webkit-slider-runnable-track {
    background: transparent;
}
.av-filters__range::-moz-range-track {
    background: transparent;
    border: none;
}
.av-filters__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border: 3px solid var(--text-blue);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}
.av-filters__range::-moz-range-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border: 3px solid var(--text-blue);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}
.av-filters__reset {
    display: inline-block;
    color: var(--text-blue);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: .02em;
}
.av-category-card__name {
    color: var(--text-blue);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 20px;
}

/* Single product page — everything from here down replaces WooCommerce's
   own (stripped, see akvarium_dequeue_other_styles) default styling for
   the classic template parts the single-product blocks render internally
   (gallery, star ratings, price, quantity input, tabs). */
.av-product-single {
    background-color: #ffffff;
}
.av-product-single__gallery-col {
    position: relative;

    flex: 0 0 auto;
    width: 100%;
}
.av-product-single__info-col {
    flex: 1 1 0%;
    min-width: 0;
}
@media (min-width: 1024px) {
    .av-product-single__gallery-col {
        width: 50%;
    }
}
.av-product-single__gallery-col .onsale {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 15px 20px;
    border-radius: 999px;
    background-color: #e83232;
    color: #ffffff;
    font-weight: 600;
    font-size: 24px;
}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
    margin: 0;
}
/* No lightbox/zoom (see akvarium_disable_gallery_lightbox in functions.php)
   — the image itself shouldn't act as a link to the raw full-size file. */
.woocommerce-product-gallery__image > a {
    pointer-events: none;
    cursor: default;
}
.woocommerce-product-gallery img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    margin: 0 auto;
}
/* Only one slide shows at a time — flexslider (which used to convert this
   into an actual slider + thumbnail nav) is intentionally dequeued (see
   akvarium_disable_gallery_lightbox in functions.php), so assets/js/akvarium.js
   builds the .flex-control-thumbs nav itself and toggles this class instead. */
.woocommerce-product-gallery__image {
    display: none;
}
.woocommerce-product-gallery__image.av-gallery-slide--active {
    display: block;
}
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li {
    width: 72px;
}
.woocommerce-product-gallery .flex-control-thumbs img {
    border: 2px solid var(--bg-gray-light);
    border-radius: 8px;
    cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    border-color: var(--text-blue);
}
.av-product-single__title.wp-block-post-title {
    margin: 0 0 12px;
    font-size: 34px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-blue);
    line-height: 1.15;
}
.av-product-single__meta-row {
    align-items: center;
    gap: 16px;
    margin: 0 0 20px;
}

.wc-block-components-product-rating__reviews_count,
.woocommerce-review-link {
    color: var(--text-blue-medium);
    font-size: 16px;
    text-decoration: none;
}
.wc-block-components-product-sku {
    color: var(--text-blue-medium);
    font-size: 16px;
}
.wc-block-components-product-sku__value {
    color: var(--text-blue);
    font-weight: 500;
}

.av-weight-options {
    margin: 0 0 20px;
}
.av-weight-options__label {
    margin: 0 0 10px;
    color: var(--text-blue);
    font-weight: 600;
}
.av-weight-options__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.av-weight-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 16px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue-medium);
    font-size: 16px;
    font-weight: 500;
}
.av-weight-pill--active {
    border-color: var(--bg-blue);
    background-color: var(--bg-blue);
    color: #ffffff;
}

.av-product-single .wc-block-components-product-price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 20px;
}
.av-product-single .wc-block-components-product-price ins {
    text-decoration: none;
    color: var(--text-blue);
    font-size: 32px;
    font-weight: 600;
}
.av-product-single .wc-block-components-product-price del {
    color: var(--text-blue-medium);
    font-size: 18px;
    opacity: 1;
}

.wp-block-add-to-cart-form .cart {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* Empty trailing flex item — claims 30% of the row's remaining space (after
   .av-qty-group) so the button below only grows into the other 70%, instead
   of stretching across the whole row. */
.wp-block-add-to-cart-form .cart::after {
    content: "";
    flex: 3 1 0%;
}
.av-qty-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px;
    background-color: var(--bg-gray-light);
    border-radius: 20px;
}
.quantity {
    display: flex;
    align-items: center;
    background: transparent;
}
.av-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
.quantity input.qty {
    width: 32px;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--text-blue);
    font-weight: 600;
    -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.single_add_to_cart_button.wp-element-button {
    display: inline-flex;
    flex: 7 1 0%;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 6px 6px 6px 28px;
    border: none;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 18px;
    cursor: pointer;
}
.single_add_to_cart_button.wp-element-button::after {
    content: "";
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.single_add_to_cart_button.wp-element-button:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
    box-shadow: inset 0 0 0 1px var(--bg-blue);
}
.single_add_to_cart_button.wp-element-button:hover::after {
    background-color: var(--bg-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Description / attributes / reviews tabs */
.wp-block-woocommerce-product-details {
    margin-top: 32px;
}
.woocommerce-tabs .tabs.wc-tabs {
    display: flex;
    gap: 32px;
    margin: 0 0 24px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--bg-gray-light);
    list-style: none;
}
.woocommerce-tabs .tabs.wc-tabs li {
    margin: 0;
}
/* Three tab labels + 32px gaps don't fit a phone-width row; scroll instead
   of relying on the page's overflow-x:hidden to silently clip the last tab. */
@media (max-width: 639px) {
    .woocommerce-tabs .tabs.wc-tabs {
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .woocommerce-tabs .tabs.wc-tabs li {
        flex-shrink: 0;
    }
}
.woocommerce-tabs .tabs.wc-tabs li a {
    color: var(--text-blue-medium);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-tabs .tabs.wc-tabs li.active a {
    color: var(--text-blue);
    text-decoration: underline;
}
.woocommerce-tabs .panel h2 {
    font-size: 20px;
    color: var(--text-blue);
    margin: 0 0 12px;
}
.woocommerce-tabs .panel p {
    color: var(--text-blue);
    line-height: 1.6;
}
.woocommerce-product-attributes {
    border-collapse: collapse;
    width: 100%;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-gray-light);
    text-align: left;
}
.woocommerce-product-attributes th {
    width: 200px;
    color: var(--text-blue);
    font-weight: 600;
}

/* Reviews tab — rating summary row + review cards (see
   woocommerce/single-product-reviews.php for the markup this styles). Stars
   reuse the site-wide .star-rating implementation (defined further up),
   which .av-product-single already scales up to 90x18 — plenty visible at
   both the summary row and the per-review size used here. */
.av-product-reviews__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
}
.av-product-reviews__score {
    font-size: 48px;
    font-weight: 600;
    color: var(--text-blue);
    line-height: 1;
}
.av-product-reviews__count {
    color: var(--text-blue-medium);
    font-size: 16px;
}
.av-product-reviews__cta {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-blue);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
}
#reviews .commentlist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#reviews .comment_container {
    border: 1px solid var(--bg-gray-light);
    border-radius: 16px;
    padding: 20px;
}
#reviews .comment-text {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 8px;
}
#reviews .comment-text .meta {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
#reviews .woocommerce-review__author {
    color: var(--text-blue);
    font-weight: 600;
}
#reviews .woocommerce-review__dash {
    display: none;
}
#reviews .woocommerce-review__published-date {
    display: block;
    margin-top: 2px;
    color: var(--text-blue-medium);
    font-size: 16px;
}
#reviews .comment-text .star-rating {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}
#reviews .comment-text .description {
    grid-column: 1 / -1;
    grid-row: 2;
}
#reviews .comment-text .description p {
    margin: 0;
    color: var(--text-blue);
    line-height: 1.6;
}
/* "Написать отзыв" popup (#review_form_wrapper, see
   woocommerce/single-product-reviews.php). Generic [data-modal] /
   [data-modal-open] / [data-modal-close] open/close wiring lives in
   akvarium.js and is reusable by any future popup, not just this one. */
.av-review-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.av-review-modal.is-open {
    display: flex;
}
.av-review-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(23, 95, 179, 0.4);
}
.av-review-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-white);
    border-radius: 24px;
    padding: 32px;
    box-sizing: border-box;
}
.av-review-modal__dialog .stars {
    display: none;
}
body.av-modal-open {
    overflow: hidden;
}
.av-review-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--bg-green);
    color: var(--text-white);
    padding: 0;
    cursor: pointer;
}
.av-review-modal__title {
    margin: 0 40px 24px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-blue);
}
.av-review-modal__field,
#review_form .comment-form-comment,
#review_form .comment-form-author,
#review_form .comment-form-email {
    margin: 0 0 20px;
}
.av-review-modal__field > label,
#review_form .comment-form-rating label,
#review_form .comment-form-comment label,
#review_form .comment-form-author label,
#review_form .comment-form-email label {
    display: block;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-blue);
}
.av-review-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 479px) {
    .av-review-modal__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 12px;
    background: var(--bg-gray-light);
    padding: 14px 16px;
    font-size: 16px;
    color: var(--text-blue);
}
#review_form textarea {
    resize: vertical;
    min-height: 96px;
}
#review_form textarea::placeholder,
#review_form input::placeholder {
    color: #9AACC4;
}
.av-star-input {
    display: flex;
    align-items: center;
    gap: 9px;
}
.av-star-input__star {
    background: none;
    border: none;
    padding: 0;
    color: #E0E0E0;
    cursor: pointer;
}
.av-star-input__star svg {
    display: block;
}
.av-star-input__star.is-filled,
.av-star-input__star.is-hover {
    color: var(--bg-amber);
}
#review_form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    font-size: 16px;
    color: var(--text-blue);
}
/* Custom-drawn instead of accent-color: Chrome on Windows doesn't
   consistently fill the box with the accent color (renders a white box with
   a colored check instead of a colored box with a white check), so draw the
   green fill + white checkmark ourselves for a result that's the same on
   every browser/OS. */
#review_form .comment-form-cookies-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--bg-green);
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
}
#review_form .comment-form-cookies-consent input[type="checkbox"]:checked {
    background-color: var(--bg-green);
}
#review_form .comment-form-cookies-consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#review_form .form-submit {
    margin: 0;
}
.woocommerce-product-gallery__trigger {
    display: none;
}
/* Inert (unlinked) header nav items — generic support for the 'disabled'
   flag in header.php's $av_nav_items. */
.av-header-nav__link--disabled {
    cursor: default;
}
.woocommerce-product-gallery__image {
    border: 2px solid var(--text-blue);
    border-radius: 24px;
    padding: 32px;
    box-sizing: border-box;
}
@media (max-width: 639px) {
    .woocommerce-product-gallery__image {
        border-radius: 16px;
        padding: 12px;
    }
}

/* WooCommerce notices — wc_print_notices() actually renders the WC
   Blocks-flavored .wc-block-components-notice-banner markup here (confirmed
   live on the cart page's "Cart updated." message), not the classic
   .woocommerce-message/.woocommerce-error markup its bundled templates/
   notices/*.php ship — same swap already noted for the empty-cart message
   below. WC Blocks' own stylesheet is dequeued (akvarium_dequeue_other_styles),
   so it renders as bare text + an unstyled tick SVG. Restyled here to match
   the "added to cart" toast (.av-cart-toast, further down) for a consistent
   look wherever it appears (cart page, product page, archive). Checkout and
   the empty-cart message keep their own more specific overrides elsewhere
   since they sit in a different layout. */
.wc-block-components-notice-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 14px 20px;
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: 0 8px 24px rgba(15, 44, 82, 0.18);
    color: var(--text-blue);
    font-size: 15px;
    line-height: 1.4;
    list-style: none;
    animation: av-toast-in 0.25s ease-out;
}
.wc-block-components-notice-banner svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--bg-green);
    fill: var(--text-white);
}
.wc-block-components-notice-banner.is-error {
    color: #c22525;
}
.wc-block-components-notice-banner.is-error svg {
    background-color: #c22525;
}
.wc-block-components-notice-banner.is-info svg {
    background-color: var(--bg-blue);
}
.wc-block-components-notice-banner__content {
    flex: 1 1 auto;
}
.wc-block-components-notice-banner__content p,
.wc-block-components-notice-banner__content ul {
    margin: 0;
}
.wc-block-components-notice-banner__content ul {
    padding: 0 0 0 18px;
    list-style: disc;
}
.wc-block-components-notice-banner__content li {
    margin: 4px 0;
}
/* Inline action link WooCommerce appends to the message text ("Просмотр
   корзины" after an add, "Перейти в магазин" on an empty-cart-style error). */
.wc-block-components-notice-banner__content .wp-element-button {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
}
.wc-block-components-notice-banner__content .wp-element-button:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
    box-shadow: inset 0 0 0 1px var(--bg-blue);
}

/* Cart page (patterns/cart.php → [woocommerce_cart]) — the classic cart
   shortcode's table markup restyled from scratch: the items table becomes one
   bordered white card with divider rows, the totals table (see the
   woocommerce/cart/cart-totals.php override) becomes the gray receipt-style
   summary card below it, full width. All selectors are scoped under .av-cart
   so nothing leaks into other WooCommerce screens. */
.av-cart__title.av-h3_title {
    margin: 24px 0;
}
/* The shortcode's own .woocommerce wrapper holds three siblings — notices,
   the cart form and .cart-collaterals — stacked in one column: items card
   first, then the summary card. */
.av-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.av-cart .woocommerce-notices-wrapper:empty {
    display: none;
}
.av-cart .woocommerce-notices-wrapper > :last-child {
    margin-bottom: 0;
}

/* Items table → one white card, rows separated by dividers */
.av-cart .woocommerce-cart-form table.cart,
.av-cart .woocommerce-cart-form table.cart tbody {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.av-cart .woocommerce-cart-form table.cart thead {
    display: none;
}
.av-cart .woocommerce-cart-form table.cart {
    padding: 4px 24px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 24px;
    background-color: var(--bg-white);
}
.av-cart tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-areas:
        "thumb name subtotal"
        "thumb qty  remove";
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bg-gray-light);
}
.av-cart .product-remove {
    grid-area: remove;
    justify-self: end;
    align-self: end;
}
.av-cart .product-thumbnail {
    grid-area: thumb;
}
.av-cart .product-name {
    grid-area: name;
    align-self: end;
}
/* Unit price cell — dropped from the row: the right-hand price block already
   shows the line total (with the crossed-out regular price for sale items,
   see akvarium_cart_item_subtotal_with_regular in functions.php). */
.av-cart .product-price {
    display: none;
}
.av-cart .product-quantity {
    grid-area: qty;
    justify-self: start;
    align-self: start;
}
.av-cart .product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    align-self: start;
}
.av-cart .product-thumbnail a {
    display: block;
}
.av-cart .product-thumbnail img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--bg-gray-light);
    border-radius: 16px;
}
.av-cart .product-name a {
    color: var(--text-blue);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.av-cart .product-name a:hover {
    text-decoration: underline;
}
/* Shared item-line fragments, printed by the woocommerce_cart_item_name /
   woocommerce_cart_item_subtotal filters in functions.php — used by both the
   cart rows and the checkout order items, hence not scoped to .av-cart. */
.av-cart-item__sku {
    display: block;
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--text-blue-medium);
}
del.av-cart-item__was {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-blue-medium);
    text-align: right;
}
.av-cart-item__now {
    display: block;
    text-align: right;
}
/* Variation/item meta (dl.variation) under the product name */
.av-cart .product-name .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-blue-medium);
}
.av-cart .product-name .variation dd {
    margin: 0;
}
/* The shared .av-qty-group pill (styled further up for the product page)
   is bulky at the product page's 14px padding — compact it inside rows. */
.av-cart .av-qty-group {
    padding: 8px 10px;
    border-radius: 16px;
}
.av-cart .product-subtotal {
    color: var(--text-blue);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.av-cart a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 50%;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}
.av-cart a.remove:hover {
    background-color: #e83232;
    border-color: #e83232;
    color: #ffffff;
}
@media (max-width: 767px) {
    .av-cart .woocommerce-cart-form table.cart {
        padding: 4px 16px;
    }
    .av-cart tr.woocommerce-cart-form__cart-item {
        grid-template-columns: 80px minmax(0, 1fr) auto;
        column-gap: 12px;
        padding: 16px 0;
    }
    .av-cart .product-thumbnail img {
        width: 80px;
        height: 80px;
    }
}

/* Actions row (coupon + update button) — the last row inside the items card,
   below the divider left by the final item row. */
.av-cart .woocommerce-cart-form tr:not(.woocommerce-cart-form__cart-item) {
    display: block;
}
.av-cart td.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
}
.av-cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}
.av-cart td.actions .coupon .input-text {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 320px;
    padding: 12px 20px;
    border: 2px solid var(--bg-gray-light);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-size: 16px;
}
.av-cart td.actions .coupon .input-text::placeholder {
    color: var(--text-blue-medium);
}
.av-cart td.actions .coupon .input-text:focus {
    outline: none;
    border-color: var(--bg-blue);
}
.av-cart td.actions .button {
    padding: 12px 24px;
    border: 2px solid var(--text-blue);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
.av-cart td.actions .button:hover {
    background-color: var(--bg-blue);
    border-color: var(--bg-blue);
    color: #ffffff;
}
.av-cart td.actions .button:disabled {
    opacity: 0.4;
    cursor: default;
}
/* With JS on (html.av-cart-js, see akvarium.js), quantity changes submit the
   form automatically, so the update button is pure noise — hidden. Without
   JS the class never appears and the button keeps working as a plain POST. */
.av-cart-js .av-cart td.actions .button[name="update_cart"] {
    display: none;
}

/* Totals — gray receipt-style summary card (same card language as
   .av-review-card): one line per item (see the cart-totals.php override),
   then coupons/shipping, then the "К оплате" total. */
.av-cart .cart_totals {
    padding: 16px 32px 32px;
    border-radius: 24px;
    background-color: var(--bg-gray-light);
}
.av-summary-line__qty {
    color: var(--text-blue-medium);
    white-space: nowrap;
}
.av-cart .cart_totals table.shop_table,
.av-cart .cart_totals table.shop_table tbody {
    display: block;
    width: 100%;
}
.av-cart .cart_totals tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(23, 95, 179, 0.12);
}
.av-cart .cart_totals th,
.av-cart .cart_totals td {
    padding: 0;
    color: var(--text-blue);
}
.av-cart .cart_totals th {
    font-weight: 400;
    text-align: left;
}
.av-cart .cart_totals td {
    text-align: right;
}
.av-cart .cart_totals tr.order-total {
    border-bottom: none;
}
.av-cart .cart_totals tr.order-total th {
    font-size: 18px;
    font-weight: 600;
}
.av-cart .cart_totals tr.order-total td {
    font-size: 24px;
    font-weight: 600;
}
.av-cart .cart_totals .woocommerce-remove-coupon,
.av-cart .cart_totals .shipping-calculator-button {
    color: var(--text-blue);
    font-size: 14px;
    text-decoration: underline;
}
/* Shipping methods list + destination note inside the shipping row */
.av-cart .cart_totals ul#shipping_method {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-cart .cart_totals ul#shipping_method li {
    margin: 0;
}
.av-cart .cart_totals ul#shipping_method input[type="radio"] {
    margin: 0 6px 0 0;
    accent-color: var(--bg-blue);
}
.av-cart .cart_totals .woocommerce-shipping-destination {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-blue-medium);
}
.av-cart .shipping-calculator-form {
    margin: 12px 0 0;
    text-align: left;
}
.av-cart .shipping-calculator-form .form-row {
    margin: 0 0 10px;
}
.av-cart .shipping-calculator-form input,
.av-cart .shipping-calculator-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-size: 16px;
}
.av-cart .shipping-calculator-form .button {
    padding: 10px 24px;
    border: 2px solid var(--text-blue);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
/* "Оформить заказ" — same pill-with-arrow-circle CTA as the single product
   page's add-to-cart button. */
.av-cart .wc-proceed-to-checkout {
    margin-top: 24px;
}
.av-cart a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 28px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
}
.av-cart a.checkout-button::after {
    content: "";
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.av-cart a.checkout-button:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
    box-shadow: inset 0 0 0 1px var(--bg-blue);
}
.av-cart a.checkout-button:hover::after {
    background-color: var(--bg-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Empty cart — wc_empty_cart_message() wraps the message in
   .wc-empty-cart-message with a .wc-block-components-notice-banner inside
   (WC Blocks-flavored markup even on the classic shortcode); restyled here
   as a centered card with the "return to shop" pill below, banner icon
   dropped. */
.av-cart .wc-empty-cart-message .wc-block-components-notice-banner {
    display: block;
    margin: 0;
    padding: 48px 24px;
    border-radius: 24px;
    background-color: var(--bg-gray-light);
    color: var(--text-blue);
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}
.av-cart .wc-empty-cart-message .wc-block-components-notice-banner svg {
    display: none;
}
.av-cart .return-to-shop {
    margin: 0;
    text-align: center;
}
.av-cart .return-to-shop .button {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
}
.av-cart .return-to-shop .button:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
    box-shadow: inset 0 0 0 2px var(--bg-blue);
}

/* Checkout page (patterns/checkout.php → [woocommerce_checkout]) — the form
   markup comes from the woocommerce/checkout/* overrides: order items + gray
   summary card on the left, the customer form on the right. Scoped under
   .av-checkout so nothing leaks into other WooCommerce screens. */
.av-checkout__title.av-h3_title {
    margin: 24px 0;
}
.av-checkout form.checkout.av-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
    .av-checkout form.checkout.av-checkout__layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 48px;
    }
}

/* Left column — order items card (same card language as the cart's items
   table) + receipt-style summary card below. */
.av-checkout .woocommerce-checkout-review-order-table {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.av-order-items {
    padding: 4px 24px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 24px;
    background-color: var(--bg-white);
}
.av-order-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bg-gray-light);
}
.av-order-item:last-child {
    border-bottom: none;
}
.av-order-item__thumb img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--bg-gray-light);
    border-radius: 16px;
}
.av-order-item__name a {
    color: var(--text-blue);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.av-order-item__name a:hover {
    text-decoration: underline;
}
/* Variation/item meta (dl.variation) under the item name */
.av-order-item__meta .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-blue-medium);
}
.av-order-item__meta .variation dd {
    margin: 0;
}
.av-order-item__meta .av-qty-group {
    display: inline-flex;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 16px;
}
.av-order-item__single-qty {
    display: inline-block;
    margin-top: 12px;
    color: var(--text-blue-medium);
    font-size: 15px;
}
.av-order-item__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 12px;
}
.av-order-item__price {
    color: var(--text-blue);
    font-size: 20px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.av-order-item__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bg-gray-light);
    border-radius: 50%;
    background-color: var(--bg-white);
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.av-order-item__remove:hover {
    background-color: #e83232;
    border-color: #e83232;
    color: #ffffff;
}
@media (max-width: 767px) {
    .av-order-items {
        padding: 4px 16px;
    }
    .av-order-item {
        grid-template-columns: 80px minmax(0, 1fr) auto;
        column-gap: 12px;
        padding: 16px 0;
    }
    .av-order-item__thumb img {
        width: 80px;
        height: 80px;
    }
}

/* Summary — same gray receipt card as the cart page's .cart_totals */
.av-order-summary {
    padding: 8px 32px 16px;
    border-radius: 24px;
    background-color: var(--bg-gray-light);
}
.av-order-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(23, 95, 179, 0.12);
    color: var(--text-blue);
}
.av-order-summary__row:last-child {
    border-bottom: none;
}
.av-order-summary__value {
    text-align: right;
}
.av-order-summary__row.order-total .av-order-summary__label {
    font-size: 18px;
    font-weight: 600;
}
.av-order-summary__row.order-total .av-order-summary__value {
    font-size: 24px;
    font-weight: 600;
}
.av-order-summary .woocommerce-remove-coupon {
    color: var(--text-blue);
    font-size: 14px;
    text-decoration: underline;
}

/* Right column — titled form sections */
.av-checkout__section-title {
    margin: 28px 0 14px;
    color: var(--text-blue);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.av-checkout .woocommerce-billing-fields > .av-checkout__section-title:first-child {
    margin-top: 0;
}
.av-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.av-checkout .woocommerce-billing-fields__field-wrapper.av-checkout__fields--contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
    .av-checkout .woocommerce-billing-fields__field-wrapper,
    .av-checkout .woocommerce-billing-fields__field-wrapper.av-checkout__fields--contact {
        grid-template-columns: minmax(0, 1fr);
    }
}
.av-checkout .form-row {
    margin: 0;
    padding: 0;
}
/* Labels stay for screen readers; the visible hint is the placeholder. */
.av-checkout .woocommerce-billing-fields .form-row > label,
.av-checkout .woocommerce-additional-fields .form-row > label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.av-checkout .form-row .input-text,
.av-checkout .form-row select,
.av-checkout .form-row textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 12px;
    background-color: var(--bg-gray-light);
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--text-blue);
}
.av-checkout .form-row .input-text::placeholder,
.av-checkout .form-row textarea::placeholder {
    color: #9AACC4;
}
.av-checkout .form-row .input-text:focus,
.av-checkout .form-row select:focus,
.av-checkout .form-row textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--bg-blue-medium);
}
.av-checkout .form-row.woocommerce-invalid .input-text,
.av-checkout .form-row.woocommerce-invalid select {
    box-shadow: inset 0 0 0 1px #e83232;
}
.av-checkout .form-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.av-checkout .form-row textarea {
    min-height: 120px;
    resize: vertical;
}
/* Single allowed country (Казахстан) — WC renders billing_country as static
   <strong> text + a hidden input; draw it as the same pill as the inputs. */
.av-checkout #billing_country_field .woocommerce-input-wrapper > strong {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--bg-gray-light);
    color: var(--text-blue);
    font-size: 16px;
    font-weight: 400;
}

/* "Доставка" — shipping method radios (fragment-refreshed on address change,
   see akvarium_checkout_delivery_fragment in functions.php) */
.av-checkout .av-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--bg-gray-light);
    color: var(--text-blue);
    font-size: 16px;
    cursor: pointer;
}
.av-checkout .av-choice input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--bg-blue);
}
.av-checkout__delivery-note {
    margin: 0 0 12px;
    color: var(--text-blue-medium);
    font-size: 15px;
}

/* "Способ оплаты" — gateway list; input renders as a sibling before the
   label (checkout/payment-method.php), so the <li> is the gray pill. */
.av-checkout ul.wc_payment_methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-checkout li.wc_payment_method {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--bg-gray-light);
    color: var(--text-blue);
    font-size: 16px;
}
.av-checkout li.wc_payment_method > input.input-radio {
    margin: 0 10px 0 0;
    accent-color: var(--bg-blue);
    vertical-align: middle;
}
.av-checkout li.wc_payment_method > label {
    display: inline;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}
.av-checkout li.wc_payment_method > label img {
    display: inline-block;
    max-height: 24px;
    margin-left: 8px;
    vertical-align: middle;
}
.av-checkout .payment_box {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: var(--bg-white);
    font-size: 14px;
}
.av-checkout .payment_box p {
    margin: 0;
}
.av-checkout .payment_box p + p {
    margin-top: 8px;
}
/* Card inputs inside the "Оплата картой" payment box (payment_fields() of
   Akvarium_Gateway_Card): number and holder full width, expiry + CVC side by
   side. Inputs pick up the shared .form-row .input-text pill styling. */
.av-checkout .av-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.av-checkout .av-card-fields .form-row + .form-row {
    margin-top: 0; /* overrides the .payment_box p + p spacing — the grid gap rules */
}
.av-checkout .av-card-fields__row--wide {
    grid-column: 1 / -1;
}
.av-checkout .payment_box .av-card-fields .input-text {
    background-color: var(--bg-white);
    box-shadow: inset 0 0 0 1px rgba(23, 95, 179, 0.18);
}
.av-checkout .payment_box .av-card-fields .input-text:focus {
    box-shadow: inset 0 0 0 1px var(--bg-blue-medium);
}
/* WC Blocks-flavored notice banners ("no payment methods available", coupon
   applied/invalid, checkout validation errors) — restyled to match the
   theme's notices, since WooCommerce's own banner CSS is dequeued. */
.av-checkout .wc-block-components-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--bg-blue-light);
    color: var(--text-blue);
    font-size: 15px;
}
.av-checkout .wc-block-components-notice-banner svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.av-checkout .wc-block-components-notice-banner.is-error {
    background-color: #fdeaea;
    color: #a52424;
}
.av-checkout .wc-block-components-notice-banner.is-success {
    background-color: #e9f6e9;
    color: #2f6b2f;
}
.av-checkout .wc-block-components-notice-banner p {
    margin: 0;
}
.av-checkout .wc-block-components-notice-banner ul {
    margin: 8px 0 0;
    padding: 0 0 0 18px;
    list-style: disc;
}
.av-checkout .wc-block-components-notice-banner li {
    margin: 4px 0;
}
/* Checkout validation errors — checkout.js injects
   .woocommerce-NoticeGroup-checkout as the first child of the
   .av-checkout__layout grid, which would otherwise claim the first grid cell
   and wreck the two-column layout. Rendered as a fixed toast instead: floats
   over the page (never displaces anything), slides in, and gets a close
   button from the checkout-notices module in akvarium.js. */
.av-checkout .woocommerce-NoticeGroup-checkout {
    position: fixed;
    top: 84px;
    right: 16px;
    z-index: 1000;
    width: min(440px, calc(100vw - 32px));
    animation: av-toast-in 0.25s ease-out;
}
.av-checkout .woocommerce-NoticeGroup-checkout .wc-block-components-notice-banner {
    box-shadow: 0 8px 24px rgba(15, 44, 82, 0.18);
    padding-right: 40px; /* room for the close button */
}
.av-notice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.av-notice-close:hover {
    background-color: rgba(0, 0, 0, 0.08);
}
@keyframes av-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Coupon apply result ("Купон успешно добавлен." / "Неверный купон.") —
   checkout.js inserts the banner right above the coupon form; keep it
   compact and spaced like the toggle pill below. */
.av-checkout > .wc-block-components-notice-banner,
.av-checkout .woocommerce-notices-wrapper .wc-block-components-notice-banner {
    margin-bottom: 16px;
}
/* The place-order row inside the payment box only carries the nonce and the
   noscript fallback now — the real submit is .av-checkout__submit below. */
.av-checkout #payment .place-order {
    margin: 0;
    padding: 0;
}

/* Consent checkbox — same custom-drawn green box as the review form (see the
   #review_form .comment-form-cookies-consent note on Chrome/Windows). */
.av-checkout__consent {
    margin: 24px 0 16px;
}
.av-checkout__consent label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-blue);
    font-size: 15px;
    cursor: pointer;
}
.av-checkout__consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--bg-green);
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
}
.av-checkout__consent input[type="checkbox"]:checked {
    background-color: var(--bg-green);
}
.av-checkout__consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* "Подтвердить оформление" — same pill-with-arrow-circle CTA as the cart's
   checkout button, as a real submit <button>. */
.av-checkout__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 28px;
    border: none;
    border-radius: 999px;
    background-color: var(--bg-blue);
    color: #ffffff;
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
}
.av-checkout__submit::after {
    content: "";
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='%23175FB3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.av-checkout__submit:hover {
    background-color: #ffffff;
    color: var(--bg-blue);
    box-shadow: inset 0 0 0 1px var(--bg-blue);
}
.av-checkout__submit:hover::after {
    background-color: var(--bg-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M35 19 19 35M19 19v16h16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "Есть купон?" toggle + form above the checkout grid. The toggle is a
   wc_print_notice() info banner — restyled from the default full-width alert
   into a compact pill so it reads as a quiet option, not a warning. */
.av-checkout .woocommerce-form-coupon-toggle {
    margin: 0 0 24px;
}
.av-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--bg-gray-light);
    color: var(--text-blue);
}
.av-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner svg {
    width: 18px;
    height: 18px;
}
.av-checkout .woocommerce-form-coupon-toggle .showcoupon {
    color: var(--bg-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.av-checkout .woocommerce-form-coupon-toggle .showcoupon:hover {
    text-decoration: none;
}
.av-checkout form.checkout_coupon {
    margin: 0 0 24px;
    padding: 20px 24px;
    border: 1px solid var(--bg-gray-light);
    border-radius: 16px;
}
.av-checkout form.checkout_coupon p {
    margin: 0 0 12px;
    color: var(--text-blue);
}
.av-checkout form.checkout_coupon .form-row {
    display: inline-block;
    margin: 0 12px 0 0;
    vertical-align: middle;
}
.av-checkout form.checkout_coupon .input-text {
    box-sizing: border-box;
    min-width: 220px;
    padding: 12px 20px;
    border: 2px solid var(--bg-gray-light);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-size: 16px;
}
.av-checkout form.checkout_coupon .input-text::placeholder {
    color: var(--text-blue-medium);
}
.av-checkout form.checkout_coupon .button {
    padding: 12px 24px;
    border: 2px solid var(--text-blue);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--text-blue);
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
.av-checkout form.checkout_coupon .button:hover {
    background-color: var(--bg-blue);
    border-color: var(--bg-blue);
    color: #ffffff;
}
.woocommerce-shipping-destination {
    display: none;
}
/* "Added to cart" toast (assets/js/akvarium.js, live cart counters module) —
   stacks in the top-right corner on every page, reuses the av-toast-in
   slide-in animation and .av-notice-close button already established for
   checkout error notices above. */
.av-cart-toasts {
    position: fixed;
    top: 84px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.av-cart-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden; /* clips the progress bar to the rounded corners */
    padding: 14px 40px 14px 16px;
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: 0 8px 24px rgba(15, 44, 82, 0.18);
    color: var(--text-blue);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
    animation: av-toast-in 0.25s ease-out;
}
/* Auto-dismiss countdown — duration must stay in sync with the 3500ms
   setTimeout in showAddedToCartToast() (akvarium.js). */
.av-cart-toast::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: var(--bg-green);
    animation: av-toast-progress 3.5s linear forwards;
}
.av-cart-toast.av-toast-out::after {
    animation-play-state: paused;
}
/* Closing state — dismissToast() (akvarium.js) adds this instead of removing
   the toast outright, so it always leaves the same way it arrived. */
.av-cart-toast.av-toast-out {
    animation: av-toast-out 0.25s ease-in forwards;
}
.av-cart-toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--bg-green);
    color: var(--text-white);
    font-size: 13px;
    animation: av-toast-icon-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.av-cart-toast .av-notice-close {
    color: var(--text-blue-medium);
}
@keyframes av-toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}
@keyframes av-toast-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
}
@keyframes av-toast-icon-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Sitewide mobile type scale — every other font-size in this file (hero/
   section titles are handled separately above via clamp() on .av-h2_title/
   .av-h3_title/.av-subtitle) is a flat px value with no mobile treatment at
   all. Trims each by ~2px below 767px, floored at 12px so nothing already
   small becomes illegible; values already at/under 12px are left alone.
   Mechanically generated from every unconditional font-size declaration in
   this file — if a selector's base font-size above changes, its number here
   needs a matching update (or just re-derive: max(base - 2, 12)). */
@media (max-width: 767px) {
    .av-header-nav__link { font-size: 20px; }
    .av-header-search .wp-block-search__input { font-size: 14px; }
    .av-breadcrumbs { font-size: 14px; }
    .av-contact-card__label { font-size: 14px; }
    .av-contact-card__line { font-size: 18px; }
    .av-contacts-info__socials-label { font-size: 12px; }
    .av-contacts-form__title { font-size: 22px; }
    .av-contacts-form__subtitle { font-size: 14px; }
    .av-contacts-form__label { font-size: 18px; }
    .av-contacts-form__input { font-size: 18px; }
    .av-h4_title { font-size: 14px; }
    .av-why-us__feature-title { font-size: 16px; }
    .av-why-us__feature-text { font-size: 14px; }
    .av-footer .wp-block-list li,
    .av-footer .wp-block-list a { font-size: 16px; }
    .av-blog-card__category { font-size: 14px; }
    .av-blog-card__title { font-size: 18px; }
    .av-blog-card__excerpt { font-size: 16px; }
    .wp-block-post-excerpt__excerpt { font-size: 16px; }
    .av-blog-card__link { font-size: 18px; }
    .av-single-post__category { font-size: 14px; }
    .av-blog__title { font-size: 34px; }
    .av-single-post__meta { font-size: 14px; }
    .av-single-post__content { font-size: 14px; }
    .av-single-post__content h2 { font-size: 26px; }
    .av-single-post__content h3 { font-size: 20px; }
    .av-single-post__content blockquote cite { font-size: 12px; }
    .av-post-sidebar__heading { font-size: 20px; }
    .av-post-sidebar__related-title { font-size: 13px; }
    .av-post-sidebar__related-date { font-size: 12px; }
    .av-post-sidebar__category-link { font-size: 14px; }
    .av-post-sidebar__category-count { font-size: 12px; }
    .av-review-card__text { font-size: 16px; }
    .av-review-card__name { font-size: 16px; }
    .av-review-card__date { font-size: 14px; }
    .av-product-card__title { font-size: 16px; }
    .wc-block-components-product-rating__reviews_count { font-size: 14px; }
    .av-product-card .wc-block-components-product-price { font-size: 14px; }
    .av-product-card .wc-block-components-product-price ins { font-size: 16px; }
    .av-product-card .wc-block-components-product-price del { font-size: 14px; }
    .woocommerce-result-count { font-size: 14px; }
    .wc-block-catalog-sorting::before { font-size: 14px; }
    .wc-block-catalog-sorting .orderby { font-size: 14px; }
    .av-filters__title { font-size: 14px; }
    .av-filters__checkbox { font-size: 14px; }
    .av-filters__price-input { font-size: 14px; }
    .av-category-card__name { font-size: 18px; }
    .av-product-single__gallery-col .onsale { font-size: 22px; }
    .av-product-single__title.wp-block-post-title { font-size: 32px; }
    .wc-block-components-product-rating__reviews_count,
    .woocommerce-review-link { font-size: 14px; }
    .wc-block-components-product-sku { font-size: 14px; }
    .av-weight-pill { font-size: 14px; }
    .av-product-single .wc-block-components-product-price ins { font-size: 30px; }
    .av-product-single .wc-block-components-product-price del { font-size: 16px; }
    .av-qty-btn { font-size: 18px; }
    .woocommerce-tabs .panel h2 { font-size: 18px; }
    .av-product-reviews__score { font-size: 46px; }
    .av-product-reviews__count { font-size: 14px; }
    .av-product-reviews__cta { font-size: 14px; }
    #reviews .woocommerce-review__published-date { font-size: 14px; }
    .av-review-modal__title { font-size: 20px; }
    .av-review-modal__field > label,
    #review_form .comment-form-rating label,
    #review_form .comment-form-comment label,
    #review_form .comment-form-author label,
    #review_form .comment-form-email label { font-size: 14px; }
    #review_form textarea,
    #review_form input[type="text"],
    #review_form input[type="email"] { font-size: 14px; }
    #review_form .comment-form-cookies-consent { font-size: 14px; }
    .wc-block-components-notice-banner { font-size: 13px; }
    .wc-block-components-notice-banner__content .wp-element-button { font-size: 12px; }
    .av-cart .product-name a { font-size: 16px; }
    .av-cart-item__sku { font-size: 12px; }
    del.av-cart-item__was { font-size: 12px; }
    .av-cart .product-name .variation { font-size: 12px; }
    .av-cart .product-subtotal { font-size: 18px; }
    .av-cart a.remove { font-size: 16px; }
    .av-cart td.actions .coupon .input-text { font-size: 14px; }
    .av-cart td.actions .button { font-size: 14px; }
    .av-cart .cart_totals tr.order-total th { font-size: 16px; }
    .av-cart .cart_totals tr.order-total td { font-size: 22px; }
    .av-cart .cart_totals .woocommerce-remove-coupon,
    .av-cart .cart_totals .shipping-calculator-button { font-size: 12px; }
    .av-cart .cart_totals .woocommerce-shipping-destination { font-size: 12px; }
    .av-cart .shipping-calculator-form input,
    .av-cart .shipping-calculator-form select { font-size: 14px; }
    .av-cart .shipping-calculator-form .button { font-size: 12px; }
    .av-cart .wc-empty-cart-message .wc-block-components-notice-banner { font-size: 20px; }
    .av-cart .return-to-shop .button { font-size: 14px; }
    .av-order-item__name a { font-size: 16px; }
    .av-order-item__meta .variation { font-size: 12px; }
    .av-order-item__single-qty { font-size: 13px; }
    .av-order-item__price { font-size: 18px; }
    .av-order-item__remove { font-size: 16px; }
    .av-order-summary__row.order-total .av-order-summary__label { font-size: 16px; }
    .av-order-summary__row.order-total .av-order-summary__value { font-size: 22px; }
    .av-order-summary .woocommerce-remove-coupon { font-size: 12px; }
    .av-checkout__section-title { font-size: 16px; }
    .av-checkout .form-row .input-text,
    .av-checkout .form-row select,
    .av-checkout .form-row textarea { font-size: 14px; }
    .av-checkout #billing_country_field .woocommerce-input-wrapper > strong { font-size: 14px; }
    .av-checkout .av-choice { font-size: 14px; }
    .av-checkout__delivery-note { font-size: 13px; }
    .av-checkout li.wc_payment_method { font-size: 14px; }
    .av-checkout .payment_box { font-size: 12px; }
    .av-checkout .wc-block-components-notice-banner { font-size: 13px; }
    .av-notice-close { font-size: 16px; }
    .av-checkout__consent label { font-size: 13px; }
    .av-checkout form.checkout_coupon .input-text { font-size: 14px; }
    .av-checkout form.checkout_coupon .button { font-size: 14px; }
    .av-cart-toast { font-size: 12px; }
    .av-cart-toast__icon { font-size: 12px; }
}

/* Mobile button sizing — the pill CTAs (hero/section buttons, "Load more",
   product add-to-cart, checkout submit, cart's checkout-button) all carry a
   large icon circle plus a wide gap pushing it to the pill's edge, sized for
   a wide desktop button — on a 375px phone that reads as a huge, chunky
   control (this hits the ad-card/sale-promo/popular-products CTAs hardest,
   since those cards are already tight on mobile). Shrinks the box itself
   (font-size/padding/gap/icon-circle) directly, one rule per button variant. */
@media (max-width: 767px) {
    .wp-block-button.is-style-av-pill .wp-block-button__link,
    .wp-block-query-pagination-next.av-load-more {
        gap: 14px;
        padding: 5px 5px 5px 14px;
        font-size: 15px;
    }
    .wp-block-button.is-style-av-pill .wp-block-button__link::after,
    .wp-block-query-pagination-next.av-load-more::after {
        width: 30px;
        height: 30px;
        background-size: 30px 30px;
    }
    .single_add_to_cart_button.wp-element-button {
        gap: 12px;
        padding: 5px 5px 5px 14px;
        font-size: 14px;
    }
    .single_add_to_cart_button.wp-element-button::after {
        width: 28px;
        height: 28px;
        background-size: 28px 28px;
    }
    .av-checkout__submit,
    .av-cart a.checkout-button {
        gap: 10px;
        padding: 5px 5px 5px 14px;
        font-size: 14px;
    }
    .av-checkout__submit::after,
    .av-cart a.checkout-button::after {
        width: 28px;
        height: 28px;
        background-size: 28px 28px;
    }
    .av-qty-btn {
        width: 32px;
        height: 32px;
    }
    .av-product-card__cart .wp-block-button__link {
        width: 36px;
        height: 36px;
    }
    .av-product-card__cart .wp-block-button__link::before {
        width: 24px;
        height: 24px;
    }
}

/* Center + percentage-width the same pill CTAs on mobile, instead of letting
   them hug their own content (popular-products' "Перейти в каталог") or
   stretch edge-to-edge (av-btn--full on ad-card/sale-promo/instagram,
   "Load more"). .wp-block-buttons/.wp-block-button are forced to 100% first
   so the 90% below has a well-defined width to resolve against either way —
   every button-block group in this theme holds exactly one button, so
   widening the wrapper doesn't affect anything else. */
@media (max-width: 767px) {
    .wp-block-buttons,
    .wp-block-button {
        width: 100%;
    }
    .wp-block-button.is-style-av-pill .wp-block-button__link,
    .wp-block-query-pagination-next.av-load-more,
    .av-checkout__submit,
    .av-cart a.checkout-button {
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    /* The add-to-cart button normally shares a row with the quantity
       stepper (.wp-block-add-to-cart-form .cart, above) via a flex "::after"
       spacer that only makes sense in a wide desktop row — stack them so
       the button can be centered on its own line instead. */
    .wp-block-add-to-cart-form .cart {
        flex-direction: column;
        align-items: center;
    }
    .wp-block-add-to-cart-form .cart::after {
        display: none;
    }
    .single_add_to_cart_button.wp-element-button {
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
}

/* Popular products ("Бестселлеры" on the homepage, "Похожие товары" on a
   product page, etc.) — patterns/popular-products.php now wraps its grid in
   the same .av-carousel/.av-carousel__track markup and arrow/dot controls as
   sale-products.php and category-slider.php, reusing their JS (akvarium.js
   just looks for .av-carousel__track/[data-carousel-*] inside .av-carousel,
   tag-agnostic) and their shared track/arrow/dot CSS below — so on mobile
   this is already a real swipeable, two-cards-per-view slider with prev/next
   arrows and dots, no extra rules needed here. It only needs to stop being a
   slider and go back to the plain grid-cols-3/-6 Tailwind grid once that
   grid actually kicks in (Tailwind's own sm: breakpoint, 640px) —
   .av-popular-carousel scopes that restoration + hides the now-pointless
   controls without touching the shared carousel classes used elsewhere. */
@media (min-width: 640px) {
    .av-popular-carousel .av-carousel__track {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }
    .av-popular-carousel .av-carousel__arrow,
    .av-popular-carousel .av-carousel__dots {
        display: none;
    }
}

/* Blog ("Наш блог" homepage teaser, patterns/blog-news.php) — same idea as
   the popular-products carousel above: the post-template's own items are
   <li> (core Post Template block), so the shared .av-carousel__track > li
   rule would apply, but that rule's 50%/33%/25% ramp doesn't match this
   grid's own sm:grid-cols-2/lg:grid-cols-4 columns — override the mobile
   tier to one full card per view instead, then hand back to the plain grid
   once sm: (640px) kicks in, same restoration/hide-controls pattern as
   .av-popular-carousel. */
.av-blog-carousel .av-carousel__track > li {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .av-blog-carousel .av-carousel__track {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }
    .av-blog-carousel .av-carousel__arrow,
    .av-blog-carousel .av-carousel__dots {
        display: none;
    }
}

/* Reviews ("Что говорят наши клиенты", patterns/reviews.php) — the review
   cards are plain divs, not <li>, wrapped in .av-reviews-list (its own
   flex-wrap/justify-center layout, .av-review-card{flex:1 1 0;min-width:280px}
   — no Tailwind grid-cols breakpoints to hand back to here), so this needs
   its own flex-basis override on mobile and its own restoration of the
   original wrap layout once cards actually have room to wrap (768px, this
   theme's usual tablet line). The pattern's own markup no longer carries
   Tailwind's flex-wrap/justify-center utility classes (moved into the
   min-width:768px block below) — those are unconditional classes that would
   otherwise force flex-wrap:wrap at every width, breaking the one-card-at-
   a-time horizontal scroll this is meant to produce on mobile. */
.av-reviews-carousel .av-carousel__track {
    flex-wrap: nowrap;
}
.av-reviews-carousel .av-carousel__track > .av-review-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .av-reviews-carousel .av-carousel__track {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        scroll-snap-type: none;
    }
    .av-reviews-carousel .av-carousel__track > .av-review-card {
        flex: 1 1 0;
    }
    .av-reviews-carousel .av-carousel__arrow,
    .av-reviews-carousel .av-carousel__dots {
        display: none;
    }
}