/* ============================================================
   WooCommerce-каталог под дизайн витрины.
   Layout/сайдбар/карточки — из catalog.css (.vk-cat-*). Здесь — только сброс дефолтов Woo,
   тулбар с сортировкой, пагинация, фолбэк-фото. Одиночный товар — .vk-woo (базово).
   ============================================================ */

.vk-catalog{padding-top:0}

/* Хлебные крошки — образ skotovody.com: 13px, приглушённый, отступы сверху/снизу 1:1 (20px) */
.vk-breadcrumbs{padding:20px var(--pad);font:400 13px var(--ff-sans);color:var(--ink-55)}
.vk-breadcrumbs a{color:var(--ink-55);text-decoration:none;transition:color .15s}
.vk-breadcrumbs a:hover{color:var(--terracotta-ink)}
.vk-catalog .vk-cat-head{padding-top:12px}      /* верх даёт крошка → заголовок ближе */
.vk-woo{padding-top:20px}
.vk-woo .vk-breadcrumbs{padding-left:0;padding-right:0}

/* Сброс дефолтной сетки/флоатов Woo — грид даёт .vk-cat-grid (catalog.css, 3 кол.) */
.woocommerce ul.products.vk-cat-grid{margin:24px 0 0!important;padding:0!important;list-style:none}
.woocommerce ul.products.vk-cat-grid::before,
.woocommerce ul.products.vk-cat-grid::after{content:none!important;display:none!important}
.woocommerce ul.products.vk-cat-grid li.product{
  width:auto!important;margin:0!important;padding:0!important;float:none!important;clear:none!important;list-style:none
}
.woocommerce ul.products.vk-cat-grid li.product::before{content:none!important}
.woocommerce ul.products.vk-cat-grid li.product a{text-decoration:none}

/* Фолбэк-фото товара (когда есть картинка).
   Фон img — БЕЛЫЙ: при object-fit:contain лэттербокс вокруг пак-шота должен совпадать
   с белым фоном самих снимков; var(--surface-2) давал бежевый лэттербокс (замер 2026-07-19). */
.vk-shop-card__img{width:100%;height:100%;object-fit:contain;padding:16px;background:#fff}
/* Та же ловушка <picture> от оптимизатора изображений, что в каталоге: обёртка
   инлайновая и не даёт картинке высоту контейнера. */
.vk-shop-card__media picture,.vk-cat-card__media picture{position:absolute;inset:0;display:block}
.vk-cat-card .vk-cat-price .woocommerce-Price-amount{font:inherit;color:inherit;background:none}

/* Верхний тулбар: чипы-ссылки (поверхность ‖ тип) переиспользуют .vk-cat-toolbar/.vk-chip
   из catalog.css/main.css. Здесь — выравнивание, ссылки без подчёркивания, сортировка справа. */
.vk-cat-toolbar{align-items:center}
.vk-cat-toolbar .vk-chip{text-decoration:none}
.vk-cat-sort-wrap{margin-left:auto;display:inline-flex;align-items:center}
.vk-cat-sort-wrap .woocommerce-ordering{margin:0}
.vk-cat-sort-wrap select,.vk-woo .woocommerce-ordering select{
  font:500 13.5px var(--ff-sans);border:1px solid var(--line-25);border-radius:9px;
  padding:9px 34px 9px 14px;background:transparent;color:var(--graphite);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%232E3438' stroke-width='1.6'%3E%3Cpath d='M3 6 L8 11 L13 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center
}
.vk-cat-sort-wrap select:hover{border-color:var(--terracotta-ink)}
.vk-cat-grid.products{padding-left:0;padding-right:0}
.vk-cat-main .vk-cat-grid{padding:0;margin-top:0!important}

/* Сброс фильтров + пустое состояние */
.vk-cat-reset{font:500 13px var(--ff-sans);color:var(--terracotta-ink);display:inline-block}
.vk-cat-reset:hover{color:var(--terracotta)}
.vk-cat-empty{padding:24px 0;font:400 15px var(--ff-sans);color:var(--ink-6)}
.vk-cat-empty a{color:var(--terracotta-ink)}

/* Пагинация под витрину */
.woocommerce nav.woocommerce-pagination{margin-top:36px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{display:inline-flex;gap:6px;border:0!important;list-style:none;padding:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li{border:0!important;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-grid!important;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--line-25)!important;border-radius:9px;color:var(--graphite)!important;
  font:500 14px var(--ff-sans);background:transparent!important;text-decoration:none
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--graphite)!important;color:#fff!important;border-color:var(--graphite)!important
}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--graphite)!important}

/* Заголовок архива «Материалы» уже задан .vk-cat-h1 (catalog.css). Одиночный товар — базовый Woo. */
.vk-woo{padding:44px var(--pad) 80px}
.vk-woo .vk-page__wrap{max-width:1100px;margin:0 auto}

@media (max-width:600px){
  /* Сортировка уезжает влево к кнопке «Фильтры» (эталон-мобайл, как .vk-cat-sort) */
  .vk-cat-sort-wrap{order:-1;margin-left:0;flex:none}
}

/* ===== «Цена по запросу»: кнопка на карточке + модалка заявки ===== */
.vk-cat-buy--por{display:block}
.vk-por-btn{width:100%;border:0;cursor:pointer;font:600 14px var(--ff-sans)}
.vk-cat-buy--por .vk-por-btn{padding:12px}
.vk-por-label{font:600 16px var(--ff-sans);color:var(--terracotta-ink)}

.vk-por-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.vk-por-modal[hidden]{display:none}
.vk-por-modal__backdrop{position:absolute;inset:0;background:rgba(46,52,56,.55)}
.vk-por-modal__box{
  position:relative;z-index:1;width:min(400px,100%);background:var(--surface);border-radius:16px;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:11px;box-shadow:0 24px 60px rgba(46,52,56,.35)
}
.vk-por-modal__x{
  position:absolute;top:12px;right:14px;border:0;background:transparent;cursor:pointer;
  font:400 24px/1 var(--ff-sans);color:var(--ink-45)
}
.vk-por-modal__x:hover{color:var(--graphite)}
.vk-por-modal__title{font:500 24px var(--ff-serif);color:var(--graphite)}
.vk-por-modal__prod{font:500 14px var(--ff-sans);color:var(--terracotta-ink);margin-bottom:4px}
.vk-por-modal__box input{
  font:400 16px var(--ff-sans);color:var(--graphite);background:var(--surface-2);
  border:1.5px solid var(--line-14);border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box
}
.vk-por-modal__box input:focus{outline:none;border-color:var(--terracotta)}
.vk-por-modal__submit{width:100%;border:0;cursor:pointer;margin-top:4px;padding:13px}
.vk-por-modal__submit:disabled{opacity:.6;cursor:default}
.vk-por-modal__msg{font:500 13.5px var(--ff-sans);text-align:center;padding-top:2px}
.vk-por-modal__msg.is-ok{color:#3d7a4e}
.vk-por-modal__msg.is-err{color:#b3402f}