/* ==========================================================================
   МОНО МО — Магазин (WooCommerce), главная страница, каталог
   ========================================================================== */

/* ---------- Site header (hamburger + centered logo, on every page) ---------- */
.site-header{
  position:sticky; top:0; z-index:1000; background:rgba(247,243,236,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.site-header .header-inner{
  max-width:1360px; margin:0 auto; height:80px; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; position:relative;
}
.site-header .cs-logo{ position:absolute; left:50%; transform:translateX(-50%); }
/* Линии лежат абсолютно по центру кнопки и разведены на 3.5px в каждую
   сторону. При открытии обе съезжают в одну точку и поворачиваются — крестик
   получается ровным в любой момент анимации. В раскладке flex с gap они
   в промежуточных кадрах расходились и складывались в кривую «галочку». */
.site-header .burger{
  display:block; position:relative; padding:0;
  width:40px; height:40px; background:none; border:none; cursor:pointer; z-index:1200;
}
.site-header .burger span{
  position:absolute; left:50%; top:50%; display:block; width:22px; height:1px;
  margin-left:-11px; background:var(--white);
  transition:transform .45s var(--ease-lux);
}
.site-header .burger span:nth-child(1){ transform:translateY(-3.5px); }
.site-header .burger span:nth-child(2){ transform:translateY(3.5px); }
body.menu-open .site-header .burger span:nth-child(1){ transform:translateY(0) rotate(45deg); }
body.menu-open .site-header .burger span:nth-child(2){ transform:translateY(0) rotate(-45deg); }
.site-header .burger:focus-visible{ outline:1px solid var(--gold-text); outline-offset:3px; }
.header-actions{ display:flex; align-items:center; gap:18px; }
/* На узком экране в каталог ведёт бургер, на широком — ещё и прямая ссылка:
   иначе единственный вход в магазин спрятан за иконкой. */
.header-link{
  display:none; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver); transition:color .3s; white-space:nowrap;
}
.header-link:hover{ color:var(--gold-text); }
@media (min-width:720px){ .header-link{ display:inline-block; } }
body.menu-open .header-link{ opacity:0; pointer-events:none; }
.icon-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--silver); background:transparent; border:none; cursor:pointer; transition:color .3s; text-decoration:none;
}
.icon-btn:hover{ color:var(--gold-text); }

/* Пока меню открыто, шапка должна быть НАД оверлеем, иначе бургер-крестик недоступен */
body.menu-open .site-header{
  z-index:1200; background:transparent; backdrop-filter:none; border-bottom-color:transparent;
}
.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:var(--black);
  clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .7s var(--ease-lux);
  display:flex; flex-direction:column; padding:104px var(--pad) 40px; pointer-events:none;
  /* Пунктов стало девять, и на телефоне они перестали помещаться: последние
     два просто обрезались, а добраться до «Контактов» было нельзя. */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  /* Закрытое меню полноэкранное и прозрачное: без visibility:hidden
     Tab проваливался в шесть невидимых ссылок. */
  visibility:hidden; transition:clip-path .7s var(--ease-lux), visibility 0s .7s;
}
body.menu-open .mobile-menu{ clip-path:circle(150% at calc(100% - 40px) 40px); pointer-events:auto; visibility:visible; transition-delay:0s; }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mm-link{
  font-family:var(--serif); font-size:clamp(22px,5.4vw,30px); color:var(--white);
  padding:clamp(9px,1.6vw,14px) 0; line-height:1.25;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease-lux), transform .5s var(--ease-lux), color .3s;
}
body.menu-open .mm-link{ opacity:1; transform:translateY(0); }
body.menu-open .mm-link:nth-child(1){ transition-delay:.1s; }
body.menu-open .mm-link:nth-child(2){ transition-delay:.16s; }
body.menu-open .mm-link:nth-child(3){ transition-delay:.22s; }
body.menu-open .mm-link:nth-child(4){ transition-delay:.28s; }
/* Пунктов бывает до девяти: «Коллекции», «Новинки», «Распродажа» и «Покупка
   и доставка» появляются, только когда за ними есть содержимое. Без этих строк
   последние ссылки выезжали без задержки и обгоняли предыдущие. */
body.menu-open .mm-link:nth-child(5){ transition-delay:.34s; }
body.menu-open .mm-link:nth-child(6){ transition-delay:.40s; }
body.menu-open .mm-link:nth-child(7){ transition-delay:.46s; }
body.menu-open .mm-link:nth-child(8){ transition-delay:.52s; }
body.menu-open .mm-link:nth-child(9){ transition-delay:.58s; }
body.menu-open .mm-link:nth-child(n+10){ transition-delay:.64s; }
.mm-link:hover{ color:var(--gold-text); }
.mm-footer{
  display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:14px;
  margin-top:auto; padding-top:32px;
}
.mm-footer a:hover{ color:var(--gold-text); }

/* ---------- Hero campaign (homepage) ---------- */
.hero-campaign{
  display:grid; grid-template-columns:1.14fr .86fr; align-items:center; gap:clamp(24px,4.5vw,76px);
  max-width:1720px; margin:0 auto;
  /* слева паддинга нет: кадр упирается в край контейнера и читается крупнее */
  padding:0 var(--pad) var(--section-pad) 0;
}
.hero-campaign-media{ position:relative; height:min(84vh,900px); min-height:420px; }
.hero-campaign-media .hero-main{
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
}
.hero-campaign-media::after{
  content:''; position:absolute; inset:0; border:1px solid var(--border-gold); pointer-events:none;
  margin:14px;
}
.hero-campaign-text{ max-width:460px; }
.hero-campaign-text .eyebrow{
  display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-text); margin-bottom:22px;
}
.hero-campaign-text h1{
  font-size:clamp(34px,4.6vw,58px); line-height:1.14; text-wrap:balance;
}
.hero-campaign-text .sub{
  margin:24px 0 0; font-size:16px; color:var(--silver); max-width:420px; line-height:1.7;
}
.hero-campaign-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
@media (max-width:860px){
  .hero-campaign{ grid-template-columns:1fr; padding:0 0 var(--section-pad); gap:clamp(22px,6vw,40px); }
  .hero-campaign-media{ order:-1; max-width:none; margin:0; height:min(66vh,580px); min-height:340px; }
  .hero-campaign-text{ max-width:none; text-align:center; margin:0 auto; padding:0 var(--pad); }
  .hero-campaign-text .sub{ margin-left:auto; margin-right:auto; }
  .hero-campaign-actions{ justify-content:center; }
}
/* На телефоне кадр занимал две трети экрана, и заголовок с кнопкой «Смотреть
   каталог» оказывались ниже сгиба: первый экран — одна фотография. Ужимаем
   кадр и отступы так, чтобы весь первый блок помещался целиком. */
@media (max-width:600px){
  .hero-campaign-media{ height:min(42vh,340px); min-height:260px; }
  .hero-campaign-text .eyebrow{ margin-bottom:14px; }
  .hero-campaign-text .sub{ margin-top:16px; }
  .hero-campaign-actions{ margin-top:24px; gap:10px; }
}
@media (max-width:420px){
  /* Две кнопки должны уместиться в одну строку — иначе первый экран снова растёт */
  .hero-campaign-actions .btn{ padding:14px 18px; font-size:11px; letter-spacing:.13em; }
}

/* ---------- Category grid (homepage) ---------- */
.cat-grid-section{ padding:0 var(--pad) var(--section-pad); max-width:1360px; margin:0 auto; }
.cat-grid-section .section-head{ text-align:center; max-width:560px; margin:0 auto 48px; }
.cat-grid-section .eyebrow{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-text); margin-bottom:16px; }
.cat-grid-section h2{ font-size:clamp(28px,3.6vw,42px); }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cat-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line);
  display:block;
}
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,.84,.32,1); }
.cat-card:hover img{ transform:scale(1.08); }
.cat-card::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,16,10,.75), rgba(20,16,10,0) 55%);
}
.cat-card-label{
  position:absolute; left:20px; bottom:18px; z-index:2; font-family:'Marcellus', var(--serif);
  font-size:21px; color:#F7F3EC; letter-spacing:.03em;
  transition:transform .4s var(--ease-lux);
}
.cat-card:hover .cat-card-label{ transform:translateY(-30px); }
.cat-card-cta{
  position:absolute; left:20px; bottom:18px; z-index:2; opacity:0; transform:translateY(10px);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#E5C76B;
  transition:opacity .3s var(--ease-lux), transform .4s var(--ease-lux);
}
.cat-card:hover .cat-card-cta{ opacity:1; transform:translateY(0); }
/* На тач-устройствах ховера нет — показываем подпись и ссылку сразу */
@media (hover:none){
  .cat-card-label{ transform:translateY(-30px); }
  .cat-card-cta{ opacity:1; transform:translateY(0); }
}
@media (max-width:900px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---------- Heritage / about section ---------- */
.heritage{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center;
  max-width:1360px; margin:0 auto; padding:0 var(--pad) var(--section-pad);
}
.heritage-media{ aspect-ratio:4/5; overflow:hidden; }
.heritage-media img{ width:100%; height:100%; object-fit:cover; }
.heritage-text h2{ font-size:clamp(26px,3.2vw,40px); margin-bottom:22px; text-wrap:balance; }
.heritage-text p{ color:var(--silver); font-size:15.5px; line-height:1.75; margin-bottom:16px; max-width:460px; }
@media (max-width:860px){ .heritage{ grid-template-columns:1fr; } .heritage-media{ order:-1; max-width:420px; margin:0 auto; } .heritage-text{ text-align:center; } .heritage-text p{ margin-left:auto; margin-right:auto; } }

/* ---------- Process ---------- */
.process{ background:var(--graphite); padding:var(--section-pad) var(--pad); }
.process-head{ max-width:1360px; margin:0 auto 48px; text-align:center; }
.process-head .eyebrow{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-text); margin-bottom:16px; }
.process-track{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.process-step{ text-align:center; }
.process-step .ps-num{ display:block; font-family:var(--serif); font-size:15px; color:var(--gold-text); margin-bottom:10px; }
.process-step h3{ font-size:16px; font-weight:500; margin-bottom:8px; }
.process-step p{ font-size:12.5px; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .process-track{ grid-template-columns:repeat(2,1fr); row-gap:32px; } }

/* ---------- WooCommerce shop / category archive ---------- */
/* ВНИМАНИЕ: WooCommerce вешает класс .woocommerce на <body>, поэтому контейнерные
   правила нельзя писать на голый .woocommerce — иначе они применяются ко всей странице.
   Обёртка WooCommerce при add_theme_support('woocommerce') — #primary.content-area > main.site-main */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area,
/* Страницы вне WooCommerce (/collections/, /delivery/, мастер-классы):
   своих классов на body у них нет, но обёртка, ширина и отступы должны
   совпадать с каталогом — иначе текст прилипает к краю экрана. */
body.monomo-collections #primary.content-area,
body.post-type-archive-monomo_workshop #primary.content-area,
body.single-monomo_workshop #primary.content-area{
  padding:calc(var(--section-pad) * .5) var(--pad) var(--section-pad);
  max-width:1360px; margin:0 auto; width:100%;
}
body.monomo-collections .woocommerce-breadcrumb,
body.post-type-archive-monomo_workshop .woocommerce-breadcrumb,
body.single-monomo_workshop .woocommerce-breadcrumb{
  font-size:12.5px; color:var(--muted); margin:0 0 36px;
}
body.monomo-collections .woocommerce-breadcrumb a,
body.post-type-archive-monomo_workshop .woocommerce-breadcrumb a,
body.single-monomo_workshop .woocommerce-breadcrumb a{ color:var(--muted); }
body.monomo-collections .woocommerce-breadcrumb a:hover,
body.post-type-archive-monomo_workshop .woocommerce-breadcrumb a:hover,
body.single-monomo_workshop .woocommerce-breadcrumb a:hover{ color:var(--gold-text); }
.woocommerce .page-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,48px); color:var(--white);
  text-align:center; margin:0 0 56px; letter-spacing:.03em;
}
/* Служебная строка WooCommerce: «Показаны все (6)» + сортировка */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  font-size:12px; letter-spacing:.06em; color:var(--muted); margin:0 0 28px;
}
.woocommerce .woocommerce-ordering select{
  font-family:var(--sans); font-size:12px; color:var(--white); background:var(--card);
  border:1px solid var(--line-strong); padding:8px 12px;
}
.woocommerce nav.woocommerce-breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:24px; }
.woocommerce nav.woocommerce-breadcrumb a{ color:var(--muted); }
.woocommerce nav.woocommerce-breadcrumb a:hover{ color:var(--gold-text); }

.woocommerce ul.products{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px);
  list-style:none; padding:0; margin:0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; display:none; }
/* Перебиваем float-раскладку WooCommerce: иначе карточка сжимается до 22–30% ячейки.
   Селектор с [class*="columns-"] обязателен: у WooCommerce правило .products.columns-3 li.product
   специфичнее обычного, и без этого оно выигрывает. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  width:100% !important; max-width:none; float:none !important; clear:none; margin:0 !important; padding:0;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); list-style:none;
  transition:border-color .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
}
.woocommerce ul.products li.product:hover{
  border-color:var(--border-gold); box-shadow:0 12px 30px rgba(34,29,23,.07);
}
.woocommerce ul.products li.product a{ display:block; text-decoration:none; }
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; margin:0; background:#f2ece2;
  transition:transform .8s var(--ease-lux);
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.04); }
.woocommerce ul.products li.product > a:first-of-type{ overflow:hidden; }
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif); font-size:clamp(19px,1.5vw,23px); line-height:1.25; color:var(--white);
  font-weight:400; margin:24px 24px 8px; padding:0; overflow-wrap:break-word;
  /* без hyphens: в узкой карточке название рвалось как «Розо-вое сердце» */
  hyphens:manual;
}
.woocommerce ul.products li.product .price{
  margin:0 24px 20px; font-family:var(--sans); font-size:15px; color:var(--gold-text); font-weight:500;
}
/* Старая цена: приглушена и зачёркнута, новая — акцентом. Порядок задаёт
   WooCommerce (<del> перед <ins>), нам остаётся сделать разницу читаемой
   с одного взгляда, не превращая карточку в ценник со скидкой из супермаркета. */
.woocommerce ul.products li.product .price del{
  color:var(--muted); margin-right:10px; font-weight:300; text-decoration:line-through;
  text-decoration-thickness:1px; opacity:.85;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount{ color:inherit; }
.woocommerce ul.products li.product .price ins{
  background:none; text-decoration:none; color:#9C3B32; font-weight:600;
}
/* Фон и скругление обязательны: без них остаётся серо-сиреневая кнопка
   WooCommerce (.button { background:#ebe9eb; border-radius:3px }), которая
   в кремово-золотой вёрстке выглядит как чужой элемент. */
.woocommerce ul.products li.product .monammo-view-btn{
  display:block; margin:auto 24px 24px; padding:13px; text-align:center; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--white);
  background:transparent; border-radius:0; font-family:var(--sans); font-weight:500; line-height:1.2;
  transition:border-color .3s, color .3s, background-color .3s;
}
.woocommerce ul.products li.product .monammo-view-btn:hover,
.woocommerce ul.products li.product:hover .monammo-view-btn{
  background:transparent; border-color:var(--gold-text); color:var(--gold-text);
}
@media (max-width:1000px){ .woocommerce ul.products{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .woocommerce ul.products{ grid-template-columns:1fr; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ margin:20px 20px 8px; }
  .woocommerce ul.products li.product .price{ margin:0 20px 18px; }
  .woocommerce ul.products li.product .monammo-view-btn{ margin:auto 20px 20px; }
}

/* ---------- Single product ---------- */
.woocommerce div.product{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,80px); align-items:start;
}
/* WooCommerce задаёт галерее и описанию width:48% + float — внутри грида это ломает колонки */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary{
  width:100% !important; max-width:none; float:none !important; clear:none; margin:0 !important;
}
.woocommerce div.product .woocommerce-product-gallery{ position:relative; }
.woocommerce div.product .woocommerce-product-gallery__trigger{
  background:var(--card); border:1px solid var(--line); border-radius:0; box-shadow:none;
  width:42px; height:42px; line-height:42px; text-align:center; font-size:15px; top:16px; right:16px;
}
.woocommerce div.product .flex-control-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 0; padding:0; list-style:none;
}
/* Ядро WooCommerce задаёт .woocommerce div.product div.images .flex-control-thumbs li
   с весом 0-4-2 и шириной 25% — без div.images наше правило проигрывало,
   и миниатюры схлопывались до 28 пикселей. */
.woocommerce div.product div.images .flex-control-thumbs li{ width:100%; float:none; margin:0; }
.woocommerce div.product .pd-description{
  color:var(--silver); font-size:15.5px; line-height:1.75; margin:0 0 28px; max-width:460px;
}
.woocommerce div.product .pd-description p{ margin:0 0 12px; }
.woocommerce div.product .woocommerce-product-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:#f2ece2;
}
.woocommerce div.product .product_title{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,42px); color:var(--white); margin:0 0 16px;
}
.woocommerce div.product p.price{
  font-family:var(--sans); font-size:20px; color:var(--gold-text); margin:0 0 24px;
}
.woocommerce div.product p.price del{
  color:var(--muted); margin-right:12px; font-weight:300; font-size:.8em;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.woocommerce div.product p.price del .woocommerce-Price-amount{ color:inherit; }
.woocommerce div.product p.price ins{
  background:none; text-decoration:none; color:#9C3B32; font-weight:600;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--silver); font-size:15px; line-height:1.7; margin-bottom:28px; max-width:440px;
}
.woocommerce div.product .woocommerce-product-details__short-description p{ color:var(--silver); }
.woocommerce div.product table.woocommerce-product-attributes{
  width:100%; border-collapse:collapse; margin:28px 0; font-size:14px;
}
.woocommerce div.product table.woocommerce-product-attributes th{
  text-align:left; color:var(--muted); font-weight:400; padding:10px 0; border-bottom:1px solid var(--line); width:40%;
}
.woocommerce div.product table.woocommerce-product-attributes td{
  color:var(--white); padding:10px 0; border-bottom:1px solid var(--line);
}
/* Категория и артикул: WooCommerce отдаёт их без единого стиля — 16px
   основным цветом вплотную к кнопкам. Приводим к виду подписи. */
.woocommerce div.product .product_meta{
  margin:26px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.woocommerce div.product .pd-assurances + .product_meta{ border-top:none; padding-top:0; margin-top:16px; }
.woocommerce div.product .product_meta > span{ display:block; margin-bottom:6px; }
.woocommerce div.product .product_meta > span:last-child{ margin-bottom:0; }
.woocommerce div.product .product_meta a{ color:var(--silver); border-bottom:1px solid var(--line); }
.woocommerce div.product .product_meta a:hover{ color:var(--gold-text); border-color:var(--gold-text); }

/* ---------- Что верно для каждого изделия ---------- */
/* Характеристик и артикулов у товаров пока нет, и правая колонка обрывалась
   сразу после кнопок. Здесь — только то, что уже сказано на главной. */
.pd-assurances{
  list-style:none; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
  display:grid; gap:14px;
}
.pd-assurances li{ display:block; }
.pd-assurance-title{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:5px;
}
.pd-assurance-text{ display:block; font-size:13.5px; line-height:1.6; color:var(--muted); }

/* ---------- Похожие товары ---------- */
/* .related — такой же элемент грида .product, как галерея и описание, поэтому
   раньше он вставал в левую колонку и карточки сжимались до ~150px. */
.woocommerce div.product .related,
.woocommerce div.product .upsells{
  grid-column:1 / -1; width:100%; margin:clamp(48px,6vw,88px) 0 0;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,32px);
  color:var(--white); text-align:center; margin:0 0 32px; padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--line);
}
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products{ grid-template-columns:1fr; }
}

@media (max-width:820px){ .woocommerce div.product{ grid-template-columns:1fr; } }

/* ---------- Inquiry form (on product page) ---------- */
.pd-inquiry{ margin-top:8px; }
/* Корзины и оплаты на сайте нет — об этом нужно сказать до того, как
   покупатель начнёт её искать. */
.pd-inquiry-lead{ margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--muted); max-width:420px; }
.pd-inquiry-head{ margin-bottom:4px; }
.pd-inquiry-title{ font-size:20px; margin:0 0 4px; }
.pd-inquiry-product{ margin:0 0 10px; font-size:13px; color:var(--gold-text); }
.pd-inquiry-lead-form{ margin:0; }
.pd-inquiry-optional{ text-transform:none; letter-spacing:.02em; color:var(--muted); opacity:.8; }
.pd-inquiry-consent{ margin:2px 0 0; font-size:11.5px; line-height:1.55; color:var(--muted); }
.pd-inquiry-actions[hidden]{ display:none; }
.pd-inquiry-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.pd-inquiry-form[hidden]{ display:none; }
.pd-inquiry-form{ display:flex; flex-direction:column; gap:14px; max-width:380px; margin-top:20px; }
.pd-inquiry-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.pd-inquiry-form input, .pd-inquiry-form textarea{
  background:var(--card); border:1px solid var(--line-strong); color:var(--white);
  font-family:var(--sans); font-size:14px; padding:12px 14px; font-weight:300;
}
.pd-inquiry-form input:focus-visible, .pd-inquiry-form textarea:focus-visible{ outline:2px solid var(--gold-text); outline-offset:2px; border-color:var(--gold-text); }
.pd-inquiry-note{ margin:0; font-size:12px; color:var(--muted); }
.pd-inquiry-note.is-success{ color:var(--gold-text); }

/* ---------- Demo badge ---------- */
.monammo-demo-badge{
  display:inline-block; margin-bottom:14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-strong); padding:4px 10px;
}

/* ---------- Доступность: тач-зоны и запрет зума полей на iOS ---------- */
@media (hover:none){
  .icon-btn{ width:44px; height:44px; }
  .site-header .burger{ width:44px; height:44px; }
}
@media (max-width:600px){
  /* iOS зумит страницу, если размер шрифта в поле меньше 16px */
  .pd-inquiry-form input,
  .pd-inquiry-form textarea,
  .cs-form input{ font-size:16px; }
  .pd-inquiry-actions{ flex-direction:column; }
  .pd-inquiry-actions .btn{ width:100%; }
}

/* Кнопки под формой заявки: отправка и возврат к выбору типа */
.pd-inquiry-submit{ display:flex; gap:12px; flex-wrap:wrap; }

/* Соцсети и мессенджеры в мобильном меню */
.mm-socials{ display:flex; flex-wrap:wrap; gap:18px; margin-top:6px; }
.mm-socials a{ font-size:13px; letter-spacing:.06em; color:var(--muted); }
.mm-socials a:hover{ color:var(--gold-text); }

/* ==========================================================================
   Коллекции
   --------------------------------------------------------------------------
   Категория — что это (браслет, серьги), коллекция — из какой истории.
   Ни одно правило ниже не создаёт видимого элемента само по себе: разметку
   печатает PHP только при наличии коллекций, так что на сайте без них
   не остаётся ни заголовков, ни разделителей.
   ========================================================================== */

/* Карточка коллекции без изображения. Тёмный градиент поверх пустоты читался бы
   как незагрузившееся фото, поэтому — светлая плитка с золотой рамкой внутри,
   как у кадра на главной. Градиент из .cat-card::after заменяем этой рамкой. */
.cat-card-plain{ background:var(--card); }
.cat-card-plain::after{
  inset:14px; background:none; border:1px solid var(--border-gold);
}
/* Подпись отодвинута от края: на кадре она лежит на фотографии, а здесь легла бы
   ровно на нижнюю линию рамки — и в покое, и сдвинутой вверх на ховере. */
.cat-card-plain .cat-card-label,
.cat-card-plain .cat-card-cta{ left:34px; bottom:34px; }
.cat-card-plain .cat-card-label{ color:var(--white); }
.cat-card-plain .cat-card-cta{ color:var(--gold-text); }
.cat-card-plain:hover{ border-color:var(--border-gold); }

/* ---------- Архив коллекции: /collection/<слаг>/ ---------- */
/* Архив метки (/label/<слаг>/) — такой же срез каталога, поэтому шапка у него
   общая с коллекцией: разные правила развели бы две одинаковые по смыслу страницы. */
.woocommerce .collection-header,
.woocommerce .label-header{ text-align:center; margin:0 0 clamp(40px,5vw,56px); }
.woocommerce .collection-header .eyebrow,
.woocommerce .label-header .eyebrow{
  display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:16px;
}
/* .woocommerce .page-title несёт margin-bottom:56px — здесь отступ держит header. */
.woocommerce .collection-header .page-title,
.woocommerce .label-header .page-title{ margin:0; }
.woocommerce .collection-header .term-description,
.woocommerce .label-header .term-description{
  max-width:620px; margin:20px auto 0; color:var(--silver); font-size:15.5px; line-height:1.75;
}
.woocommerce .collection-header .term-description p,
.woocommerce .label-header .term-description p{ margin:0 0 12px; }
.woocommerce .collection-header .term-description p:last-child,
.woocommerce .label-header .term-description p:last-child{ margin-bottom:0; }

/* ---------- Коллекция в карточке листинга ---------- */
/* Между названием и ценой: подпись, а не второй заголовок. Ссылкой не является —
   карточка целиком уже обёрнута в <a> на товар. */
.woocommerce ul.products li.product .pc-collection{
  display:block; margin:0 24px 12px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:400; line-height:1.5;
}
@media (max-width:600px){
  .woocommerce ul.products li.product .pc-collection{ margin:0 20px 10px; }
}

/* ---------- Пустой результат ---------- */
/* Коллекция, у которой товары сняли с публикации. Ядро WooCommerce рисует синюю
   плашку с иконкой из своего шрифта — в кремовой вёрстке это чужой элемент. */
.woocommerce #primary.content-area p.woocommerce-info,
.woocommerce-page #primary.content-area p.woocommerce-info{
  background:var(--card); border:1px solid var(--line); border-left:2px solid var(--gold);
  padding:16px 20px; margin:0; font-size:14px; color:var(--silver); list-style:none;
}
.woocommerce #primary.content-area p.woocommerce-info::before,
.woocommerce-page #primary.content-area p.woocommerce-info::before{ content:none; }

/* Оглавление коллекций: /collections/ */
.collection-index-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.collection-index-head .eyebrow{
  display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:16px;
}
.collection-index-head h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.12; }
.collection-index-lead{ margin:18px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.collection-index-empty{ text-align:center; color:var(--muted); padding:40px 0; }
.collection-index-empty a{ color:var(--gold-text); border-bottom:1px solid var(--border-gold); }

/* ==========================================================================
   Метки товаров: «Новинка» и «Распродажа»
   --------------------------------------------------------------------------
   Бейдж должен считываться с одного взгляда и при этом не спорить с названием
   украшения — поэтому он не в текстовом блоке карточки, а на углу фотографии:
   другой слой, другой размер, пересечься им негде. Если метки нет, в разметке
   нет и обёртки .pl-badges — пустых уголков не остаётся.
   ========================================================================== */

/* Опорная точка для бейджа. Карточка — flex-колонка, абсолютный потомок из
   потока выпадает и на раскладку не влияет. */
.woocommerce ul.products li.product{ position:relative; }

.woocommerce ul.products li.product .pl-badges{
  /* Контейнер повторяет фотографию: она квадратная (aspect-ratio:1/1), поэтому
     квадрат от верхнего края карточки кончается ровно там же, где кончается
     снимок. Полосы прижаты к его низу — и ни одна не лезет на название. */
  position:absolute; top:0; left:0; right:0; aspect-ratio:1/1;
  display:flex; flex-direction:column; justify-content:flex-end;
  z-index:2;
  /* Под полосой — ссылка на товар, которой WooCommerce оборачивает карточку.
     Клик должен проходить насквозь: метка — подпись, а не кнопка. */
  pointer-events:none;
}

/* Полоса во всю ширину снимка. Все метки одной формы и одного размера,
   различает их только цвет: с одного взгляда видно, что это один и тот же тип
   пометки, а не три разных элемента интерфейса. */
.pl-badge{
  display:block; width:100%; padding:9px 0;
  font-family:var(--sans); font-size:11px; font-weight:700; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; text-align:center;
  color:#FFF; border:0; background:var(--gold);
}

/* Золото — новинке, это акцент бренда. Красный — хиту. Распродаже и проценту
   достаётся графит: рядом с красным «хитом» ещё один красный неразличим
   издалека, а тёмная полоса на светлой фотографии читается не хуже. */
.pl-badge-novinki{ background:linear-gradient(180deg,#C09A5E 0%,#A8823F 100%); }
.pl-badge-hit{ background:linear-gradient(180deg,#C7362A 0%,#A82A20 100%); }
.pl-badge-rasprodazha{ background:linear-gradient(180deg,#3A332B 0%,#241F19 100%); }

@media (max-width:600px){
  .pl-badge{ padding:8px 0; font-size:10px; letter-spacing:.18em; }
}

/* ---------- Метка на странице товара ---------- */
/* Первая строка .product_meta, над «Категория:» и «Коллекция:». Мета там набрана
   подписями, поэтому метка остаётся тем же бейджем — только кликабельным. */
.woocommerce div.product .summary .pd-labels{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;
}
/* На карточке товара пометка — заливная, как в каталоге: один и тот же сигнал
   должен выглядеть одинаково в списке и внутри. Здесь она ещё и ссылка. */
.woocommerce div.product .summary .pd-label{
  display:inline-block; padding:6px 11px;
  font-size:10px; font-weight:600; line-height:1;
  letter-spacing:.16em; text-transform:uppercase;
  color:#FFF; background:var(--gold); border:1px solid var(--gold);
  transition:opacity .3s;
}
.woocommerce div.product .summary .pd-label:hover{
  color:#FFF; opacity:.85;
}
.woocommerce div.product .summary .pd-label-rasprodazha,
.woocommerce div.product .summary .pd-label-rasprodazha:hover{
  color:#FFF; background:#9C3B32; border-color:#9C3B32;
}

/* ==========================================================================
   Мастер-классы
   --------------------------------------------------------------------------
   Занятие — не товар, поэтому и карточка другая: не сетка плиток, а список
   строк. У занятия есть дата, и дату надо читать подряд, сверху вниз,
   а не выхватывать из шахматного порядка плиток.
   ========================================================================== */

.ws-list{ display:flex; flex-direction:column; gap:28px; max-width:920px; margin:0 auto; }

.ws-card{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:28px;
  background:var(--card); border:1px solid var(--line); padding:20px;
  transition:border-color .35s var(--ease-lux);
}
.ws-card:hover{ border-color:var(--border-gold); }

/* Занятие без мест не прячем: человек должен видеть, что оно было и что
   такие бывают, — но приглушаем, чтобы оно не спорило с открытыми наборами. */
.ws-card.is-closed{ opacity:.74; }

.ws-card-media{ display:block; overflow:hidden; background:var(--graphite); aspect-ratio:4/3; }
.ws-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-lux); }
.ws-card:hover .ws-card-media img{ transform:scale(1.04); }

.ws-card-body{ display:flex; flex-direction:column; gap:10px; min-width:0; }

.ws-card-when,
.ws-single-when{
  margin:0; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text);
}
.ws-card-when-tba{ color:var(--muted); }

.ws-card-title{ margin:0; font-size:clamp(20px,2.4vw,26px); line-height:1.2; }
.ws-card-title a{ color:var(--white); }
.ws-card-title a:hover{ color:var(--gold-text); }

.ws-card-excerpt{ margin:0; color:var(--silver); font-size:14.5px; line-height:1.65; }

.ws-card-meta{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px;
  color:var(--muted); font-size:13px;
}
.ws-card-meta li{ position:relative; }
.ws-card-meta li + li::before{
  content:''; position:absolute; left:-10px; top:50%; width:3px; height:3px;
  margin-top:-1.5px; border-radius:50%; background:var(--line-strong);
}

.ws-card-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:auto; padding-top:6px; }

.ws-seats{
  font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--muted);
}
/* «Мест нет» — единственное место, где нужен тревожный цвет: это отказ,
   и он должен читаться раньше, чем человек нажмёт кнопку. */
.ws-seats.is-out,
.ws-seats-out{ color:#9C3B32; }

/* Страница занятия ---------------------------------------------------- */

.ws-single{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);
  align-items:start; max-width:1100px; margin:0 auto;
}
.ws-single-media img{ width:100%; height:auto; display:block; }
.ws-single-body{ display:flex; flex-direction:column; gap:14px; }
.ws-single-title{ margin:0; font-size:clamp(28px,3.6vw,42px); line-height:1.12; }

.ws-facts{ margin:6px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.ws-facts > div{ display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:16px; align-items:baseline; }
.ws-facts dt{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.ws-facts dd{ margin:0; color:var(--white); font-size:15px; }

.ws-closed-note{ margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.ws-closed-note a{ color:var(--gold-text); border-bottom:1px solid var(--border-gold); }

.ws-single-text{
  max-width:720px; margin:clamp(40px,6vw,72px) auto 0; color:var(--silver);
  font-size:15.5px; line-height:1.8;
}
.ws-single-text p{ margin:0 0 1.1em; }

/* Блок «не подходит время» — общий для списка и для закрытого набора. */
.ws-suggest{
  max-width:720px; margin:clamp(48px,7vw,88px) auto 0; padding-top:clamp(32px,5vw,56px);
  border-top:1px solid var(--line); text-align:center;
}
.ws-suggest h2{ font-size:clamp(22px,2.6vw,28px); margin:0 0 10px; }
.ws-suggest > p{ margin:0 0 22px; color:var(--muted); font-size:14.5px; line-height:1.7; }
.ws-suggest .pd-inquiry-actions{ justify-content:center; }

@media (max-width:860px){
  .ws-single{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ws-card{ grid-template-columns:1fr; gap:18px; }
  .ws-card-media{ aspect-ratio:16/9; }
  .ws-facts > div{ grid-template-columns:1fr; gap:2px; }
}

/* ==========================================================================
   Информационная страница: «Покупка и доставка»
   ========================================================================== */

.info-blocks{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(28px,4vw,44px); }

.info-block h2{
  margin:0 0 12px; font-size:clamp(20px,2.4vw,26px); line-height:1.25;
}
.info-block p{ margin:0 0 .9em; color:var(--silver); font-size:15.5px; line-height:1.8; }
.info-block p:last-child{ margin-bottom:0; }

/* Ссылки в подвале ---------------------------------------------------- */

.cs-footer-links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.cs-footer-links a{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; color:var(--muted);
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.cs-footer-links a:hover{ color:var(--gold-text); border-bottom-color:var(--border-gold); }

/* Занятие без фотографии: одна колонка по центру — пустая половина экрана
   читается как незагрузившаяся картинка. */
.ws-single.ws-single-noimage{ grid-template-columns:1fr; max-width:680px; }

/* Бейдж скидки. Красный насыщеннее, чем у «Распродажи»: процент — это цифра,
   ради которой человек и зашёл в раздел, он должен читаться первым. */
.pl-badge-discount{
  background:linear-gradient(180deg,#3A332B 0%,#241F19 100%);
  border-color:#241F19; color:#FFF;
  font-variant-numeric:tabular-nums; letter-spacing:.12em;
}
.woocommerce div.product .summary .pd-label-discount,
.woocommerce div.product .summary span.pd-label{
  background:linear-gradient(180deg,#3A332B 0%,#241F19 100%);
  border-color:#241F19; color:#FFF;
  font-variant-numeric:tabular-nums; letter-spacing:.12em;
}

/* ==========================================================================
   Корзина и оформление заказа
   --------------------------------------------------------------------------
   WooCommerce приносит свою вёрстку — серые кнопки, синие ссылки, таблицы
   с рамками. Здесь она приводится к тому же спокойному виду, что и остальной
   сайт: те же шрифты, та же золотая кнопка, те же тонкие линии.
   ========================================================================== */

/* Кнопка корзины в шапке */
.header-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; color:var(--white); transition:color .3s;
}
.header-cart:hover{ color:var(--gold-text); }
.header-cart-count{
  position:absolute; top:2px; right:0; min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1;
  color:#FFF; background:var(--gold); border-radius:9px;
  font-variant-numeric:tabular-nums;
}

/* Кнопка «Заказать» на странице товара */
.woocommerce div.product form.cart{ margin:0 0 18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity input[type="number"]{
  width:72px; padding:13px 10px; font-family:var(--sans); font-size:14px;
  border:1px solid var(--line-strong); background:transparent; color:var(--white);
  text-align:center;
}
.woocommerce div.product form.cart button[type="submit"]{
  padding:15px 34px; font-family:var(--sans); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#FFF; background:var(--gold); border:1px solid var(--gold);
  border-radius:0; cursor:pointer; transition:opacity .3s;
}
.woocommerce div.product form.cart button[type="submit"]:hover{ opacity:.88; }

/* Уведомления WooCommerce («товар добавлен в корзину») */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--white);
  background:var(--card); border:1px solid var(--line); border-left:2px solid var(--gold);
  padding:16px 20px; margin:0 0 24px; list-style:none;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.woocommerce-error{ border-left-color:#9C3B32; }
.woocommerce-message .button,
.woocommerce-info .button{
  margin-left:auto; padding:11px 22px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--white); background:transparent;
  border:1px solid var(--line-strong); border-radius:0; transition:border-color .3s, color .3s;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover{ border-color:var(--gold-text); color:var(--gold-text); }

/* Таблица корзины */
.woocommerce table.shop_table{
  border:none; border-collapse:collapse; width:100%; margin:0 0 32px;
  font-family:var(--sans); font-size:14px; border-radius:0;
}
.woocommerce table.shop_table th{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-weight:500; padding:0 12px 14px; border-bottom:1px solid var(--line-strong); text-align:left;
}
.woocommerce table.shop_table td{
  padding:18px 12px; border-top:1px solid var(--line); color:var(--white); vertical-align:middle;
}
.woocommerce table.shop_table img{ width:72px; height:auto; display:block; }
.woocommerce table.shop_table .product-name a{ color:var(--white); }
.woocommerce table.shop_table .product-name a:hover{ color:var(--gold-text); }
.woocommerce table.shop_table td.actions{ padding:22px 0 0; border-top:1px solid var(--line-strong); }
.woocommerce a.remove{
  color:var(--muted) !important; font-size:20px; line-height:1; text-decoration:none;
}
.woocommerce a.remove:hover{ color:#9C3B32 !important; background:transparent; }

/* Итоги и кнопки корзины */
.woocommerce .cart-collaterals{ display:flex; justify-content:flex-end; }
.woocommerce .cart_totals{ width:100%; max-width:380px; }
.woocommerce .cart_totals h2{ font-size:20px; margin:0 0 18px; }
.woocommerce .cart_totals table.shop_table th{ border-bottom:none; padding:12px 0; }
.woocommerce .cart_totals table.shop_table td{ text-align:right; border-top:none; border-bottom:1px solid var(--line); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 30px; border-radius:0; background:var(--gold); color:#FFF;
  border:1px solid var(--gold); transition:opacity .3s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{ background:var(--gold); color:#FFF; opacity:.88; }

.woocommerce .wc-proceed-to-checkout .checkout-button{ display:block; text-align:center; margin-top:18px; }

/* Форма оформления заказа */
.woocommerce form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(28px,4vw,56px); align-items:start; }
.woocommerce form.checkout h3{ font-size:20px; margin:0 0 20px; }
.woocommerce .woocommerce-billing-fields__field-wrapper,
.woocommerce .woocommerce-shipping-fields__field-wrapper{ display:flex; flex-direction:column; gap:2px; }
.woocommerce form .form-row{ display:flex; flex-direction:column; gap:7px; margin:0 0 16px; padding:0; }
.woocommerce form .form-row label{
  font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.woocommerce form .form-row .required{ color:#9C3B32; text-decoration:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%; padding:13px 14px; font-family:var(--sans); font-size:14.5px;
  color:var(--white); background:var(--card); border:1px solid var(--line-strong);
  border-radius:0; height:auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{ outline:none; border-color:var(--gold-text); }
.woocommerce form .form-row textarea{ min-height:96px; resize:vertical; }

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--card); border:1px solid var(--line); padding:26px 24px; position:sticky; top:96px;
}
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th{ padding:12px 0; }

/* Способ оплаты */
.woocommerce-checkout #payment{ background:transparent; border-radius:0; }
.woocommerce-checkout #payment ul.payment_methods{
  border:none; padding:0; margin:0 0 20px; list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{ margin-bottom:10px; }
.woocommerce-checkout #payment ul.payment_methods label{
  font-family:var(--sans); font-size:14px; color:var(--white); display:inline;
}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(169,129,46,.08); border:none; border-left:2px solid var(--gold);
  color:var(--silver); font-size:13.5px; line-height:1.65; padding:14px 16px; margin:10px 0 0;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment .form-row.place-order{ padding:0; margin:20px 0 0; }
.woocommerce-checkout #payment #place_order{ width:100%; }
.woocommerce-privacy-policy-text{ font-size:12.5px; color:var(--muted); line-height:1.6; }

/* Спасибо за заказ */
.woocommerce ul.order_details{
  list-style:none; margin:0 0 32px; padding:0; display:flex; flex-wrap:wrap; gap:24px 40px;
  border-bottom:1px solid var(--line); padding-bottom:26px;
}
.woocommerce ul.order_details li{
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:none; padding:0; margin:0;
}
.woocommerce ul.order_details li strong{
  display:block; margin-top:7px; font-size:15px; letter-spacing:0; text-transform:none;
  color:var(--white); font-weight:400;
}

/* Корзина и оформление — не страницы WooCommerce по классам, но обёртка нужна та же */
body.woocommerce-cart #primary.content-area,
body.woocommerce-checkout #primary.content-area,
body.woocommerce-order-received #primary.content-area{
  padding:calc(var(--section-pad) * .5) var(--pad) var(--section-pad);
  max-width:1100px; margin:0 auto; width:100%;
}
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,42px);
  text-align:center; margin:0 0 44px;
}

.woocommerce .cart-empty{ text-align:center; font-size:18px; color:var(--muted); }
.woocommerce .return-to-shop{ text-align:center; margin-top:22px; }

@media (max-width:900px){
  .woocommerce form.checkout{ grid-template-columns:1fr; }
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order{ position:static; }
  .woocommerce .cart-collaterals{ justify-content:stretch; }
  .woocommerce .cart_totals{ max-width:none; }
}
@media (max-width:640px){
  .woocommerce table.shop_table thead{ display:none; }
  .woocommerce table.shop_table tr{ display:block; border-top:1px solid var(--line); padding:16px 0; }
  .woocommerce table.shop_table td{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    border:none; padding:6px 0;
  }
  .woocommerce table.shop_table td::before{
    content:attr(data-title); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
  }
  .woocommerce table.shop_table td.product-remove::before{ content:''; }
}

/* --------------------------------------------------------------------------
   Блочная корзина и оформление заказа
   --------------------------------------------------------------------------
   WooCommerce отдаёт эти две страницы новыми блоками, со своей вёрсткой и
   тёмными кнопками по умолчанию. Правила выше написаны под классический
   вариант и на блоки не действуют — поэтому здесь отдельный, но такой же
   по духу набор: те же шрифты, та же золотая кнопка, те же тонкие линии.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  max-width:1100px; margin:0 auto; padding:0 var(--pad) var(--section-pad);
  font-family:var(--sans);
}

/* Заголовки блоков */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title{
  font-family:var(--serif) !important; font-weight:400 !important; color:var(--white) !important;
  letter-spacing:.01em;
}
.wc-block-components-checkout-step__description{ color:var(--muted); font-size:13.5px; }

/* Кнопки блоков: золотая заливка вместо тёмно-серой */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background-color:var(--gold) !important; border:1px solid var(--gold) !important;
  color:#FFF !important; border-radius:0 !important;
  font-family:var(--sans) !important; font-size:11.5px !important; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500; padding:17px 30px !important;
  transition:opacity .3s;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{ opacity:.88; }
.wc-block-components-button.is-link{ color:var(--gold-text) !important; }

/* Названия товаров и цены */
.wc-block-components-product-name{
  font-family:var(--serif) !important; font-size:18px !important; color:var(--white) !important;
}
.wc-block-components-product-name:hover{ color:var(--gold-text) !important; }
.wc-block-components-product-price__value,
.wc-block-components-totals-item__value{ color:var(--white); font-weight:500; }
.wc-block-components-formatted-money-amount{ font-variant-numeric:tabular-nums; }

/* Итог заказа */
.wc-block-components-totals-item__label{ color:var(--muted); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:22px; color:var(--gold-text);
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar > .wc-block-components-totals-wrapper{
  background:var(--card); border:1px solid var(--line);
}

/* Поля формы оформления */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-textarea,
.wc-blocks-components-select__container{
  border:1px solid var(--line-strong) !important; border-radius:0 !important;
  background:var(--card) !important; color:var(--white) !important;
  font-family:var(--sans) !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label{ font-family:var(--sans); color:var(--muted); }

/* Разделители и рамки — тоньше и теплее серых по умолчанию */
.wc-block-cart-items__row,
.wc-block-components-order-summary-item,
.wc-block-components-totals-wrapper{ border-color:var(--line) !important; }

/* Способ оплаты */
.wc-block-components-radio-control__option{ font-family:var(--sans); }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content{
  background:rgba(169,129,46,.08); border-left:2px solid var(--gold);
  color:var(--silver); font-size:13.5px; line-height:1.65;
}

/* Пустая корзина */
.wp-block-woocommerce-empty-cart-block{ text-align:center; }

/* --------------------------------------------------------------------------
   Пустая корзина и блок рекомендаций
   --------------------------------------------------------------------------
   WooCommerce кладёт в пустую корзину крупный грустный смайлик и сетку
   «Новинки магазина» со своей вёрсткой: тёмные круглые кнопки, карточки
   разной высоты. В спокойной кремовой витрине это читается как чужая
   вставка, поэтому смайлик убираем, а карточки приводим к общей сетке.
   -------------------------------------------------------------------------- */

/* Смайлик: сочувствие к пустой корзине здесь лишнее — человеку нужен каталог,
   а не рожица во весь экран. Рисуется он не картинкой, а псевдоэлементом
   заголовка (класс with-empty-cart-icon), поэтому убирается только так. */
.with-empty-cart-icon::before,
.wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-empty-cart-block > svg,
.wc-block-cart__empty-cart__image{ display:none !important; content:none !important; }

.wp-block-woocommerce-empty-cart-block{ text-align:center; padding-top:8px; }
.wp-block-woocommerce-empty-cart-block h2{
  font-family:var(--serif) !important; font-weight:400 !important;
  font-size:clamp(22px,3vw,30px) !important; color:var(--white) !important;
  margin:0 0 10px !important;
}
.wp-block-woocommerce-empty-cart-block hr,
.wp-block-woocommerce-empty-cart-block .wp-block-separator{ display:none; }

/* Сетка товаров из блоков WooCommerce: одинаковые карточки, кнопка внизу. */
.wc-block-grid__products{
  display:grid !important; gap:clamp(16px,2.4vw,28px); margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-grid.has-3-columns .wc-block-grid__products{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }

.wc-block-grid__product{
  display:flex !important; flex-direction:column; align-items:stretch;
  width:auto !important; max-width:none !important; margin:0 !important; padding:0 0 22px !important;
  background:var(--card); border:1px solid var(--line); text-align:left;
  transition:border-color .35s var(--ease-lux);
}
.wc-block-grid__product:hover{ border-color:var(--border-gold); }

/* Одинаковая высота снимков — без этого карточки разъезжаются по сетке. */
.wc-block-grid__product-image{ margin:0 0 18px !important; display:block; overflow:hidden; }
.wc-block-grid__product-image img{
  width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  margin:0 !important; border-radius:0 !important; transition:transform .7s var(--ease-lux);
}
.wc-block-grid__product:hover .wc-block-grid__product-image img{ transform:scale(1.04); }

.wc-block-grid__product-title{
  font-family:var(--serif) !important; font-weight:400 !important;
  font-size:17px !important; line-height:1.3; color:var(--white);
  margin:0 20px 8px !important; padding:0;
}
.wc-block-grid__product-price{
  margin:0 20px 16px !important; font-family:var(--sans); font-size:14.5px;
  color:var(--gold-text); font-weight:500;
}
.wc-block-grid__product-price del{ color:var(--muted); font-weight:300; margin-right:8px; opacity:.85; }
.wc-block-grid__product-price ins{ background:none; text-decoration:none; color:#9C3B32; font-weight:600; }

/* Кнопка прижата к низу: у карточек разной длины названия она была на разной высоте. */
.wc-block-grid__product-add-to-cart{ margin:auto 20px 0 !important; }
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .button{
  display:block; width:100%; text-align:center;
  padding:13px 18px !important; border-radius:0 !important;
  font-family:var(--sans) !important; font-size:11px !important; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500;
  color:var(--white) !important; background:transparent !important;
  border:1px solid var(--line-strong) !important;
  transition:border-color .3s, color .3s;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .button:hover{
  border-color:var(--gold-text) !important; color:var(--gold-text) !important; background:transparent !important;
}
.wc-block-grid__product-add-to-cart .added_to_cart{
  display:block; text-align:center; margin-top:10px; font-size:12px; color:var(--gold-text);
}

/* Заголовок блока рекомендаций */
.wp-block-woocommerce-product-new > h2,
.wc-block-grid__no-products{
  font-family:var(--serif) !important; font-weight:400 !important;
  font-size:clamp(20px,2.6vw,26px) !important; color:var(--white) !important;
  text-align:center; margin:clamp(32px,5vw,52px) 0 clamp(20px,3vw,30px) !important;
}

/* ==========================================================================
   Страница контактов
   --------------------------------------------------------------------------
   Способы связи — крупные плитки, а не строчка мелким шрифтом в подвале.
   Человек, открывший эту страницу, уже решился написать: ему нужно попасть
   пальцем в нужный способ, а не выискивать его глазами.
   ========================================================================== */

.contact-grid{
  display:grid; gap:clamp(12px,1.6vw,18px); max-width:960px; margin:0 auto clamp(40px,6vw,64px);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

.contact-card{
  display:flex; flex-direction:column; gap:7px;
  padding:clamp(20px,2.6vw,28px); background:var(--card); border:1px solid var(--line);
  transition:border-color .35s var(--ease-lux), transform .35s var(--ease-lux);
  /* Вся плитка — одна большая цель для пальца, а не ссылка в одну строку. */
  min-height:132px; justify-content:center;
}
.contact-card:hover{ border-color:var(--border-gold); transform:translateY(-2px); }
.contact-card:focus-visible{ outline:1px solid var(--gold-text); outline-offset:2px; }

.contact-card-label{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.contact-card-value{
  font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); line-height:1.2; color:var(--white);
  /* Длинная почта не должна распирать плитку и ломать сетку. */
  overflow-wrap:anywhere;
}
.contact-card:hover .contact-card-value{ color:var(--gold-text); }
.contact-card-hint{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--muted); }

.contact-blocks{ margin-bottom:clamp(40px,6vw,64px); }

.contact-form-block{
  max-width:720px; margin:0 auto; padding-top:clamp(32px,5vw,48px);
  border-top:1px solid var(--line); text-align:center;
}
.contact-form-block h2{ font-size:clamp(22px,2.6vw,28px); margin:0 0 10px; }
.contact-form-block > p{ margin:0 0 22px; color:var(--muted); font-size:14.5px; line-height:1.7; }
.contact-form-block .pd-inquiry-actions{ justify-content:center; }

.contact-legal{
  max-width:720px; margin:clamp(40px,6vw,64px) auto 0; padding-top:clamp(24px,4vw,36px);
  border-top:1px solid var(--line); text-align:center;
}
.contact-legal h2{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 10px;
}
.contact-legal p{ margin:0; color:var(--silver); font-size:14px; line-height:1.7; }

/* Страница вне WooCommerce — обёртка и отступы те же, что у остальных. */
body.monomo-info-page #primary.content-area{ max-width:1100px; }

/* ==========================================================================
   Цвет метки на странице товара
   --------------------------------------------------------------------------
   В каталоге метка — полоса по низу снимка, здесь — плашка в строке меты.
   Форма разная, потому что места разные; цвет один и тот же, чтобы человек
   узнавал сигнал, переходя из каталога в карточку.
   ========================================================================== */
.woocommerce div.product .summary .pd-label-hit,
.woocommerce div.product .summary .pd-label-hit:hover{
  background:linear-gradient(180deg,#C7362A 0%,#A82A20 100%);
  border-color:#A82A20; color:#FFF;
}
.woocommerce div.product .summary .pd-label-novinki,
.woocommerce div.product .summary .pd-label-novinki:hover{
  background:linear-gradient(180deg,#C09A5E 0%,#A8823F 100%);
  border-color:#A8823F; color:#FFF;
}
.woocommerce div.product .summary .pd-label-rasprodazha,
.woocommerce div.product .summary .pd-label-rasprodazha:hover{
  background:linear-gradient(180deg,#3A332B 0%,#241F19 100%);
  border-color:#241F19; color:#FFF;
}

/* ==========================================================================
   Подарочный сертификат в каталоге
   --------------------------------------------------------------------------
   У сертификата не фотография украшения, а горизонтальная открытка. Квадратная
   обрезка карточки срезала бы ей бока вместе с надписью, поэтому здесь снимок
   вписывается целиком, а пустоту по краям закрывает графит макета.
   ========================================================================== */
.woocommerce ul.products li.product.product_cat-sertifikaty a img,
.woocommerce ul.products li.product.product_cat-sertifikaty img{
  object-fit:contain; background:#241F19;
}

/* ==========================================================================
   Разделы каталога
   --------------------------------------------------------------------------
   На входе в каталог человек сначала выбирает, что ему нужно — браслет или
   серьги, — и только потом разглядывает вещи. Шесть разнородных украшений
   вперемешку заставляют делать оба выбора сразу. Поэтому первый экран
   каталога — разделы, теми же карточками, что и в коллекциях.
   ========================================================================== */

.woocommerce ul.products li.product-category{
  position:relative; background:var(--card); border:1px solid var(--line);
  padding:0 !important; margin:0 !important; list-style:none;
  transition:border-color .35s var(--ease-lux);
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product-category:hover{ border-color:var(--border-gold); }

.woocommerce ul.products li.product-category > a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
}
.woocommerce ul.products li.product-category img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
  margin:0 !important; transition:transform .7s var(--ease-lux);
}
.woocommerce ul.products li.product-category:hover img{ transform:scale(1.04); }

/* Раздел без картинки не должен схлопываться в полоску: даём ту же высоту,
   что у карточки со снимком, и заполняем её тёплой плашкой. */
.woocommerce ul.products li.product-category > a:not(:has(img))::before{
  content:''; display:block; aspect-ratio:3/4; background:var(--graphite);
  border-bottom:1px solid var(--line);
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  font-family:var(--serif) !important; font-weight:400 !important;
  font-size:clamp(18px,2.1vw,22px) !important; color:var(--white);
  margin:20px 22px 6px !important; padding:0 !important;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.woocommerce ul.products li.product-category:hover h2.woocommerce-loop-category__title{ color:var(--gold-text); }

/* Счётчик товаров — служебная цифра, а не часть названия раздела. */
.woocommerce ul.products li.product-category h2 .count{
  background:none !important; color:var(--muted); font-family:var(--sans);
  font-size:12px; font-weight:400; padding:0 !important; border-radius:0;
}
.woocommerce ul.products li.product-category h2 .count::before{ content:'('; }
.woocommerce ul.products li.product-category h2 .count::after{ content:')'; }

.woocommerce ul.products li.product-category::after{
  content:'Смотреть →'; display:block;
  margin:0 22px 22px; font-family:var(--sans); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.woocommerce ul.products li.product-category:hover::after{ color:var(--gold-text); }

/* Счётчик WooCommerce уже приходит в скобках — свои не добавляем, иначе
   получается «((2))». */
.woocommerce ul.products li.product-category h2 .count::before,
.woocommerce ul.products li.product-category h2 .count::after{ content:none; }

/* Раздел без своей картинки: вместо серой заглушки WooCommerce — спокойная
   плашка цвета фона. Заглушка с «горами» читается как сломанное изображение. */
.woocommerce ul.products li.product-category img.woocommerce-placeholder{
  opacity:0; background:var(--graphite);
}
.woocommerce ul.products li.product-category a:has(img.woocommerce-placeholder){
  background:var(--graphite);
}

/* ==========================================================================
   Витрина подарочных сертификатов
   --------------------------------------------------------------------------
   Без фотографий: у сертификата нет вида, есть номинал. Поэтому карточка —
   это крупная сумма и больше ничего, а объяснение вынесено ниже отдельным
   блоком «Как это работает». Так человек сначала выбирает сумму, а потом
   при желании читает условия — а не наоборот.
   ========================================================================== */

/* Открытка сертификата на его странице. Ширину держим по сетке сумм, чтобы
   картинка и кнопки читались одним блоком, а не двумя разными экранами. */
.cert-art{ margin:0 auto 30px; max-width:760px; }
.cert-art img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.cert-art figcaption{
  margin-top:10px; text-align:center;
  font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--muted);
}
@media (max-width:600px){ .cert-art{ margin-bottom:22px; } }

.cert-grid{
  display:grid; gap:clamp(14px,2vw,20px); max-width:900px; margin:0 auto clamp(48px,7vw,80px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.cert-card{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:clamp(24px,3vw,34px); background:var(--card); border:1px solid var(--line);
  transition:border-color .35s var(--ease-lux), transform .35s var(--ease-lux);
}
.cert-card:hover{ border-color:var(--border-gold); transform:translateY(-2px); }
.cert-card:focus-visible{ outline:1px solid var(--gold-text); outline-offset:2px; }

.cert-card-label{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.cert-card-value{
  font-family:var(--serif); font-size:clamp(30px,4.4vw,42px); line-height:1;
  color:var(--white); font-variant-numeric:tabular-nums;
}
.cert-card:hover .cert-card-value{ color:var(--gold-text); }
.cert-card-cta{
  margin-top:auto; padding-top:8px;
  font-family:var(--sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); transition:color .3s;
}
.cert-card:hover .cert-card-cta{ color:var(--gold-text); }

.cert-how{
  max-width:720px; margin:0 auto; padding-top:clamp(32px,5vw,48px);
  border-top:1px solid var(--line);
}
.cert-how h2{ font-size:clamp(22px,2.6vw,28px); margin:0 0 26px; text-align:center; }

.cert-steps{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:18px; }
.cert-steps li{ display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start; }
.cert-step-num{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-gold); border-radius:50%;
  font-family:var(--sans); font-size:13px; color:var(--gold-text);
}
.cert-step-text{ color:var(--silver); font-size:15px; line-height:1.65; padding-top:6px; }

.cert-note{
  margin:0; padding:16px 18px; background:rgba(169,129,46,.08);
  border-left:2px solid var(--gold);
  color:var(--silver); font-size:13.5px; line-height:1.7;
}

/* ==========================================================================
   Оформление заказа: поле страны
   --------------------------------------------------------------------------
   Магазин продаёт только по России, и в списке стран один пункт. Выбирать не
   из чего, а поле занимает строку и выглядит как вопрос. Прячем его вместе с
   подписью — значение при этом остаётся в форме и уходит с заказом, поэтому
   WooCommerce по-прежнему считает адрес корректным.
   ========================================================================== */
.wc-block-components-address-form__country{ display:none; }