.aqv3-grid /* управляет сеткой и размерами оболочек (ширина, количество в ряд, отступы). */
{
    display: grid;  /* включает CSS-сетку для размещения карточек в виде плитки */
    gap: 8px;   /* расстояние (промежуток) между карточками по горизонтали и вертикали */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));   /* создаёт столько колонок, сколько поместится в строку - из-за auto-fill;
     каждая колонка минимум 240px шириной, но может расширяться до равной доли (1fr) чтобы заполнить всю строку */
}

.aqv3-card /* управляет внешним видом каждой карточки (фон, рамка, скругления, позиционирование контента. */
{
    position: relative;    /* позволяет позиционировать внутренние элементы (например, блок с ABV внизу) */
    border: 1px solid #d2c7b5;    /* тонкая серая рамка вокруг карточки */
    border-radius: 12px;    /* скруглённые углы карточки (12 пикселей) */
    overflow: hidden;    /* скрывает всё, что выходит за границы (например, изображение или тень) */
    background: #f5f1e7;     /* белый фон карточки */
    transition: transform .15s ease, box-shadow .15s ease; /* Добавить hover-эффект Чтобы карточка ощущалась кликабельной*/
}

.aqv3-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.aqv3-inner /* это “внутренняя обёртка” всей карточки (обычно ссылка <a>). 
Она задаёт правильное поведение ссылки и оставляет место для нижнего блока (ABV, объём и т.п.). */
{
    display: grid;                                  /* включаем CSS-grid внутри карточки, теперь элементы можно раскладывать по «ячейкам» */
    grid-template-columns: 10% 30% 60%;             /* делим карточку на 3 вертикальных сектора: 10% — левый узкий столбец, 30% — центральный сектор, 60% — правый большой сектор (например под текст) */
    /* grid-template-rows: auto;             30% 40% 30%; - делим карточку на 3 горизонтальных сектора: 30% — верхняя зона, 40% — средняя зона, 30% — нижняя зона. */
    
    text-decoration: none;    /* убирает стандартное подчёркивание у ссылок */
    color: inherit;    /* наследует цвет текста от родителя (обычно чёрный или заданный темой) */
    padding-bottom: 44px;     /* добавляет отступ снизу внутри карточки — место под блок с ABV/объёмом, чтобы тот не налезал на текст */
}

/* КАРТИНКА (пара бутылок или fallback) занимает левую + центральную колонку и всю высоту сетки */
.aq-imgpair,
.aqv3-thumb {
    grid-column: 1 / 3;     /* 1–2 колонки */
    /*grid-row: auto;        строки 1–3 (span трёх строк) */
    justify-self: center;         /* по горизонтали в ячейке — по центру */
    align-self: end;         /* по вертикали — к верху */
}

/* === ОБЁРТКА ВОКРУГ ИЗОБРАЖЕНИЯ (aqv3-thumb) ===
   Эта оболочка создаёт "окно" фиксированных пропорций для картинки.
   Благодаря этому все карточки в сетке будут одинаковой высоты,
   даже если исходные изображения имеют разные размеры (вертикальные, горизонтальные и т.п.)
*/
.aqv3-thumb {
    aspect-ratio: 2 / 5;   /* 🔹 Задаёт соотношение сторон блока.
                              Формат "ширина / высота".
                              Пример:
                              1/1  — квадрат (высота = ширина),
                              3/4  — немного выше ширины,
                              4/5  — чуть более вытянуто вверх.
                              Все элементы с одинаковым aspect-ratio будут одинаковой высоты при одинаковой ширине. */
    
    overflow: hidden;      /* 🔹 Обрезает всё, что выходит за рамки блока.
                              Нужно, чтобы картинка, которая чуть больше контейнера (из-за object-fit: cover),
                              не вылезала наружу и не портила закругления или тень карточки. */
    grid-column: 1 / 3;                                     /* две колонки */
    /*grid-row: auto;                                    занимает строки 1–3 */
    justify-self: center;
    align-self: end;
}

/* === Контейнер двух бутылок ===
*/
.aq-imgpair {
  display: grid;                         /* CSS-сетка для удобной раскладки двух колонок под бутылки */
  grid-template-columns: 1fr 1fr;        /* две равные колонки: левая под mini, правая под big */
  gap: 12px;                             /* зазор между колонками и строками (если они появятся) */
  align-items: end;                      /* выравнивает содержимое колонок по нижней линии (бутылки стоят «на одном полу») */
  justify-items: center;                 /* ← по центру каждой колонки */
  padding: 12px;                         /* внутренние отступы вокруг пары бутылок, чтобы не липли к краям карточки */
  grid-column: 2 / 3;         /* бутылки во 2-й столбец */
/*grid-row: auto;        бутылки в отдельную строку */
}

/* если в паре только одна бутылка – чуть сдвигать её вправо */
.aq-imgpair>.aq-bottle:only-child {
    transform: translateX(10%);
}

/* === Контейнер одной бутылки. Этот блок управляет тем, как именно выглядят бутылки внутри карточки:
мы задаём им фиксированную высоту на компьютере, чтобы все бутылки казались одинаковыми по размеру,
но при этом не «растягивали» картинку по ширине и не ломали пропорции. ===
*/
.aq-bottle {
  display: flex;               /* включает флекс-контейнер для вертикального выравнивания подписей и картинки */
  flex-direction: column;      /* располагает картинку и подпись столбиком: сверху вниз */
  align-items: center;         /* центрирует по горизонтали (картинка и подпись по центру своей колонки) */
  justify-content: flex-end;   /* «прижимает» содержимое к низу ячейки (поддерживает общий низ с соседней колонкой) */
  }

/* Само изображение бутылки (взяли класс, который мы положили через card-data.php). Этот блок управляет тем, как именно выглядят бутылки внутри карточки:
мы задаём им фиксированную высоту на компьютере, чтобы все бутылки казались одинаковыми по размеру,
но при этом не «растягивали» картинку по ширине и не ломали пропорции. */
.aq-bottle-img {
  display: block;        /* Делает картинку блочным элементом: убирает странные пробелы/отступы как у inline-элемента, 
                         проще управлять размерами и центровкой,не будет лишнего «воздуха» снизу (как у <img> по умолчанию) */
  height: 220px;         /* Жёстко задаёт высоту картинки на десктопе — 220 пикселей. Благодаря этому все бутылки будут одинаковой высоты, 
                        даже если исходные файлы разные. Можно потом поднять/опустить (например, 200 / 240 / 260px) — это основной «регулятор размера» на ПК. */
  width: auto;           /* Ширина подстраивается пропорционально исходному изображению, чтобы не растягивать его по горизонтали.
                         При фиксированной высоте это сохраняет правильные пропорции. */
  object-fit: contain;   /* Говорит браузеру: «впиши картинку внутрь отведённого прямоугольника так, чтобы целиком поместилась и не обрезалась»,
                          при этом будут сохранены пропорции, возможны пустые поля по бокам, если нужно. */
  }

/* Фолбэк миниатюры. Этот стиль нужен на случай, если у записи нет ни мини, ни большой бутылки,
и мы показываем обычную постовую миниатюру (featured image) как запасной вариант.
Этот блок гарантирует, что она нормально впишется в карточку и не сломает сетку. */
.aq-fallback-thumb img 
{ 
    width: 100%;             /* Картинка растягивается по ширине контейнера на всю доступную ширину, без вылезания за края.*/
    height: auto;            /* Высота считается автоматически, по пропорциям исходной картинки. Не даст её «сплющить».*/
    display: block;          /* Как и раньше: убираем inline-артефакты, лишние промежутки, проще работает в сетке.*/
    }

.aqv3-meta /* «контейнер» для текстовой части карточки (название, производитель, возможно страна). */
{
    grid-column: 3 / 4;       /* правая колонка грида aqv3-inner */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;                 /* расстояние между строками текста */
    padding: 10px 12px 0;     /* верх/бока, снизу можно 0 */
}

.aqv3-title /* стили названия аквавита, главный текст. */
{
    font-family: 'Playfair Display', Georgia, serif;      /* задаёт шрифт с засечками — сначала 'Playfair Display' (если подключён), 
                                                           если его нет — Georgia (системный аналог), если и её нет — любой шрифт с засечками (serif) */
    font-weight: 700;                                     /* делает шрифт жирным — придаёт названию вес и выразительность */
    color: #684C2F;                                     /* цвет текста */
    /*grid-column: 3 / 4;                                   Третья колонка */
    /*grid-row: auto;                                      Первая строка (верхний сектор) */
    align-self: start;                                     /*  прижать к верху сектора */ 
    justify-self: center;                                 /* выравнивание по горизонтали или start, end или center */
    text-align: left;                                   /* выравнивает текста по left;/ center;/ right; */
    margin: 6px 0 3px;                                      /* убирает отступ сверху (0) и добавляет 6px снизу между названием и производителем */
    font-size: clamp(18px, 2.1vw, 21px);
    line-height: 1.25;                                    /* задаёт расстояние между строками, высота строки — делает текст чуть плотнее и аккуратнее */
}

.aqv3-producer /* стили для названия дистиллерии, второстепенный текст, поэтому меньше и чуть прозрачнее. */
{
    /*grid-column: 3 / 4;         Третья колонка */
    /*grid-row: auto;           Вторая строка */
    align-self: start;        /*  прижать к верху сектора */
    justify-content: flex-start;        /* выравнивание по горизонтали или start, end или center */
    /*text-align: center;          текст внутри тоже по центру. выравнивает текста по left;/ center;/ right; */
    margin-top: 0;            /* расстояние от title */  
    font-size: 15px;            /* размер шрифта производителя — меньше, чем у заголовка */
    opacity: .8;              /* лёгкая прозрачность (80%) — чтобы визуально не конкурировал с заголовком */
}

/* === БЛОК АДРЕСА (третья строка, третий столбец) === */
.aqv3-address {
    /*grid-column: 3 / 4;       Помещаем адрес в ТРЕТИЙ столбец CSS-сетки aqv3-inner. Колонка 3 — это правая текстовая зона (title / producer / address). */
    /*grid-row: auto;         Отправляем блок в ТРЕТЬЮ строку сетки. Т.е. внизу текстового столбца, под названием и производителем. */

    display: grid;        /* внутренний грид */
    grid-template-columns: 24px 1fr; /* флаг фиксированный / текст — всё остальное */

    align-self: start;       /* По вертикали прижимаем блок к ВЕРХУ своей строки (строки №3). Если адрес будет в 2 строки, он начнётся сверху, не будет «плавать». */
    justify-content: flex-start;    /* По горизонтали — по центру ТРЕТЬЕЙ колонки.Держит адрес по центру колонны (как title и producer). */
    align-items: center;     /* Выравниваем флаг и текст по центру по вертикали. Если флаг чуть выше или ниже — они встанут идеально ровно. */
    gap: 6px;                /* Расстояние между флагом и текстом. */
    font-size: 15px;         /* Размер текста адреса. Делает его менее заметным, чем заголовок. */
    opacity: 0.9;            /* Чуть меньшая контрастность — адрес второстепенный элемент. */
}

.aqv3-address-text {
    text-align: left;   /* или center, если надо */
    line-height: 1.3;
    font-size: clamp(13px, 1.8vw, 15px);
}

/* === ФЛАЖОК === */
.aqv3-address-flag {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 26px;
    height: 20px;            /* Размер «ячейки» для флага. Для emoji размер ограничивается line-height, SVG или IMG идеально впишутся. */
    line-height: 1;          /* Убираем лишние вертикальные отступы, которые дают emoji/иконки. */
}
.aqv3-address-flag img,
.aqv3-flag {
    width: 26px;   /* подгони размер */
    height: auto;
    display: block;
}

/* === ТЕКСТ АДРЕСА === */
.aqv3-address-text {
    /* Здесь специальных стилей почти не надо.
       Оставляем так — можно при желании добавить ограничения по строкам. */

    /* white-space: nowrap;  ← можно включить, если хочешь ЖЁСТКО в одну строку */
}

/* === СТРОКА ВЫДЕРЖКИ (БОЧКА + SUBTYPE + СРОК) === */
.aqv3-aging {
    /*grid-column: 3 / 4;        Помещаем блок в третий столбец сетки .aqv3-inner. */
    /*grid-row: auto;            Четвёртая строка сетки: */
    display: inline-flex;      /* Внутри блока включаем inline-flex: контент ведёт себя как «строчный» элемент (не ломает сетку), бочка-иконка и текст идут в одну строку, удобно управлять выравниванием и gap. */
    align-items: center;       /* По вертикали выравниваем иконку бочки и текст по центру. Если иконка чуть выше/ниже текста — всё равно встанут по одной линии. */
    justify-content: flex-start;   /* По горизонтали выравниваем по левому краю содержимое по центру третьего столбца, чтобы строка выдержки визуально совпадала с title / producer / address по центру. */
    gap: 4px;                  /* Расстояние между иконкой бочки, subtype и временем выдержки. Делает строчку воздуха, чтобы элементы не слипались. */
    font-size: 13px;           /* Размер текста выдержки — чуть меньше заголовка и производителя, чтобы визуально не спорить с основным текстом, а быть второстепенной инфой. */
    opacity: 0.9;              /* Лёгкое снижение контрастности — подчёркиваем, что это вспомогательная строчка. */
    margin-top: 4px;           /* Немного отступа сверху — чтобы не прилипать к адресу. Если визуально будет слишком близко или далеко — эту цифру можно поменять. */
    /*margin-left: 6px;*/
}

/* === ИКОНКА БОЧКИ В СТРОКЕ ВЫДЕРЖКИ === */
.aqv3-aging-ico {
    width: 28px;               /* Ширина иконки бочки (в пикселях). 18px — аккуратный размер, чтобы бочка не доминировала над текстом. */
    height: 28px;              /* Высота иконки — делаем квадрат, т.к. сама картинка обычно в квадратном холсте. Если исходный PNG не квадратный — браузер подожмёт его пропорционально. */
    display: block;            /* Убираем вокруг картинки «inline-артефакты»: лишние промежутки, влияние line-height. Так она будет вести себя как нормальный блок. */
}

/* === ТЕКСТ SUBTYPE (НАПРИМЕР "Ex-Rye Whiskey") === */
.aqv3-aging-subtype {
font-weight: 500;          /* Делаем subtype чуть более жирным, чтобы он выглядел как важный тег/ярлык, но не таким жирным, как основной заголовок. */
font-size: 13px;             /* сделаем чуть крупнее */
font-style: italic;            /* курсив */
color: #684C2F;            /* твой коричневый */
}

/* === ТЕКСТ ВРЕМЕНИ ВЫДЕРЖКИ (ТИПА "18m" или "2y 6m") === */
.aqv3-aging-time {
font-weight: 500;        /* Делаем subtype чуть более жирным, чтобы он выглядел как важный тег/ярлык, но не таким жирным, как основной заголовок. */
font-size: 13px;        /* сделаем чуть крупнее */
font-style: italic;        /* курсив */
color: #684C2F;        /* твой коричневый */
}

/* МАЛЕНЬКАЯ ТОЧКА-МАРКЕР МЕЖДУ SUBTYPE И ВРЕМЕНЕМ (•) */
.aqv3-aging-dot {
    font-size: 20px;           /* Размер точки — примерно размер времени выдержки, чтобы она не выглядела тяжёлой или слишком маленькой. */
    opacity: 0.7;              /* Чуть менее контрастная, чем текст — просто разделитель, а не акцент. */
    transform: translateY(-1px);    /* Очень лёгкий визуальный «подъём» точки на 1px,чтобы она красиво центрировалась относительно текста (особенно в разных шрифтах). */
    color: #684C2F;          /* твой коричневый */
}

/* === ПЛАВАЮЩАЯ ПАНЕЛЬ ВНИЗУ КАРТОЧКИ (ABV + volume) === */
.aqv3-meta-bottom {
    /* Абсолютное позиционирование в правом нижнем углу карточки */
    grid-column: 3 / 4;        /* Помещаем блок в третий столбец сетки .aqv3-inner. */
    /*grid-row: auto;           Четвёртая строка сетки: */
    position: absolute;
    right: 8px;     /* отступ от правого края карточки */
    bottom: 8px;    /* отступ от нижнего края карточки */
    z-index: 2;     /* чтобы плашка была поверх картинок */

    /* Внешний вид */
    background: rgba(255, 255, 255, 0.95); /* белая полупрозрачная подложка */
    border: 1px solid #ddd;                /* тонкая рамка — аккуратный вид */
    border-radius: 14px;                   /* сильное скругление плашки */

    /* Внутренние отступы и расположение контента */
    padding: 6px 14px;   /* вертикальный / горизонтальный padding */
    display: flex;       /* располагаем элементы в строку */
    align-items: center; /* вертикальное выравнивание по центру */
    gap: 10px;           /* расстояние между 40% и 700 ml */

    /* Общий стиль текста внутри */
    font-size: 15px;     /* крупнее стандартного текста */
    font-weight: 600;    /* немного жирнее для акцента */
    color: #4A3A2A;      /* тёплый коричневый цвет */
}

/* === ОТДЕЛЬНЫЕ ЗНАЧЕНИЯ (40% и 500 / 700 ml) === */
.aqv3-spec {
    font-size: 15px;      /* крупный текст */
    font-weight: 600;     /* акцентированный стиль */
    color: #4A3A2A;       /* тот же цвет, что и у всей плашки */
}

/* === РАЗДЕЛИТЕЛЬ "|" === */
.aqv3-sep {
    color: #999;          /* серый — менее заметный */
    font-weight: 400;     /* обычный текст, не жирный */
    font-size: 14px;      /* чуть меньше, чтобы не перетягивал внимание */
    margin: 0 3px;        /* маленькие отступы слева/справа */
}

/**********************************************
 * Столбик с иконками в ПЕРВОЙ (10%) колонке
 * карточки .aqv3-card--grid
 **********************************************/
.aqv3-card--grid .aqv3-badges{
  /* Привязка к гриду карточки */
  grid-column: 1;        /* использовать 1-ю колонку (те самые 10%) */
/*grid-row: auto;      тянуться от первой строки до последней (по всей высоте) */

  /* Вертикальный столбик иконок */
  display: flex;         /* включаем flex-контейнер */
  flex-direction: column;/* иконки идут друг под другом, сверху вниз */
  margin-top: 6px; 
  margin-left: 6px;
  gap: 6px;              /* расстояние между иконками */
  align-items: center; /* выравнивание по левому краю внутри колонки */
}

/**********************************************
 * Сами иконки (картинки) — компактный размер
 **********************************************/
.aqv3-card--grid .aqv3-badge img{
  width: 32px;           /* ширина иконки (можешь сделать 16/18/24 по вкусу) */
  height: 32px;          /* высота иконки */
  object-fit: contain;   /* картинка аккуратно вписывается в квадрат */
  display: block;        /* убираем нижний «текстовый» зазор у img */
}

/* ===== Load More button ===== */
.aqv3-load-btn{
  display:inline-block;
  font-size:16px;
  font-weight:600;
  line-height:1;
  padding:14px 30px;
  border-radius:9999px;
  background:#111;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.aqv3-load-btn:hover:not([disabled]){
  background:#333;
  transform:translateY(-2px);
}
.aqv3-load-btn[disabled]{
  opacity:.6;
  cursor:default;
}
@media (max-width:768px){
  .aqv3-load-btn{
    font-size:18px;
    width:90%;
    padding:18px;
    border-radius:16px;
  }
}

@media (max-width: 768px) {
    /* всё, что внутри этих фигурных скобок, применяется, если ширина экрана ≤ 768 пикселей (то есть на планшетах и смартфонах) */

    .aqv3-grid     {
        gap: 12px;        /* уменьшает расстояние между карточками (чтобы сетка была плотнее и всё помещалось на экране) */
        min-height: 160px;
    }

    .aqv3-title    {
        font-size: 16px;   /* делает название аквавита чуть меньше, чтобы не ломало вёрстку */
    }

    .aqv3-meta-bottom    {
        right: 6px;         /* чуть ближе к краю справа (меньше отступ) */
        bottom: 6px;        /* ближе к нижнему краю карточки */
        font-size: 12px;        /* уменьшает текст (например, "40% • 700 ml") */
    }
}
/* 💻 Для экранов шире 900px — ровно 3 карточки в ряд */
@media (min-width: 900px) {
  .aqv3-grid {
    grid-template-columns: repeat(3, 1fr);  /* три равные колонки */
  }
  
}

/* 📱 Для планшетов (600–899px) — 2 карточки в ряд */
@media (min-width: 600px) and (max-width: 899px) {
  .aqv3-grid {
    grid-template-columns: repeat(2, 1fr);  /* две карточки */
     }
}

/* ====== ВРЕМЕННОЕ ВЫРАВНИВАНИЕ ПОД /aquavits/ ====== */
body.page-id-620 .aqv3-grid,
body.postid-620 .aqv3-grid {
  /* ⬅️ заменим XXXX на ID страницы превью (ниже объясню, как узнать) */
  max-width: 1100px;        /* ограничиваем общую ширину сетки, как на странице каталога */
  margin-left: 300px;       /* имитируем левую колонку с фильтром (~300px) */
  margin-right: auto;
  padding: 0 16px;          /* добавим немного внутреннего воздуха */
}
/* ===== Lightbox ===== */
.aq-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
}
.aq-lightbox.open{ display:flex; }

/* Десктоп: как было */
.aq-lightbox img{
  max-width:92vw;
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.aq-lightbox .close{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:#111; color:#fff;
  border: 2px solid #fff;               /* ← добавили */
  border-radius:12px;
  font-size:26px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.35); /* ← добавили */
  transition:background .25s ease, transform .25s ease;
}
.aq-lightbox .close:hover{
  background:#333;
  transform:translateY(-2px);
}
.aq-lightbox .close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Мобилка: фото во всю высоту экрана */
@media (max-width:1200px){
  .aq-lightbox{ padding:0 !important; }
  .aq-lightbox img{
    height:96vh !important;      /* почти во весь экран по высоте */
    width:auto !important;
    max-width:98vw !important;    /* не выходить за ширину */
    object-fit:contain !important;
  }
  .aq-lightbox .close{
    top:10px !important;
    right:10px !important;
    font-size:22px !important;   /* как в базовом правиле */
    line-height:1 !important;
  }
}

/* ===== Desktop: одинаковый размер фото в лайтбоксе ===== */
@media (min-width:1201px){
  .aq-lightbox{ padding:0 24px; }
  .aq-lightbox img{
    height:82vh !important;
    max-height:82vh !important;
    width:auto !important;
    max-width:72vw !important;
    object-fit:contain !important;
  }
}

/* блокируем прокрутку фона, пока открыт лайтбокс */
body.aq-no-scroll{ overflow:hidden; }

/* Подсветка карточки после возврата из лайтбокса */
.aqv3-card--focus {
  outline: 3px solid #ffd34d;
  outline-offset: 2px;
  transition: outline-color .8s ease;
}