/*
Theme Name: Тилла-Дом
Theme URI: http://11.11.11.105
Description: Дочерняя тема Storefront с дизайн-системой магазина атмосферных растений. Палитра, типографика и компоненты перенесены из прототипа.
Author: cyril
Template: storefront
Version: 4.138.22
Text Domain: tilladom
*/

/* ================= ДИЗАЙН-ТОКЕНЫ =================
   Источник: :root в прототипе (p1.html).
   Исправлено: --line2 был #CFCAba (невалидный hex) -> #CFCABA.
*/
:root{
  --paper:#F4F2EA;
  --paper2:#ECE8DC;
  --card:#FBFAF4;
  --ink:#252A25;
  --muted:#6D7367;
  --line:#E0DCCC;
  --line2:#CFCABA;
  --green:#3E5C48;--green-dark:#2C4433;
  --green2:#2E4437;
  --sage:#A9C2A4;
  --sage2:#CBDAC6;
  --accent:#C2683F; /* терракота — маркеры, бейджи, счётчик корзины (из прототипа glm5.3f) */
  --ital:'Cormorant',Georgia,serif;
  --cream:#F4F2EA;
  --r:14px;
  --disp:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Storefront hooks */
  --woocommerce-loop-product__title--color:var(--ink);
}

/* ================= БАЗА ================= */
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.site-title,.entry-title,.page-title,.widget h1,.widget h2,.widget h3{
  font-family:var(--disp);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.01em;
}
a{color:var(--green);}
a:hover,a:focus{color:var(--green2);}
p a{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px;}

/* ================= ШАПКА ================= */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .custom-logo-link img{max-height:60px;width:auto;}
.site-title{font-family:var(--disp);font-size:1.6rem;margin:0;}
.site-title a{color:var(--green2);text-decoration:none;}
.main-navigation ul{background:transparent;}
.main-navigation li a{color:var(--ink);font-weight:500;font-size:15px;}
.main-navigation li a:hover,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a{color:var(--green2);}
.main-navigation ul.nav>li>a::after{background-color:var(--green);}

/* ================= КНОПКИ ================= */
button,input[type="button"],input[type="submit"],.button,.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--body);
  background:var(--green);
  color:#fff;
  border-radius:var(--r);
  border:1px solid var(--green);
  font-weight:500;
  padding:.7em 1.5em;
  transition:background .18s ease,border-color .18s ease;
}
button:hover,input[type="button"]:hover,input[type="submit"]:hover,.button:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--green2);border-color:var(--green2);color:#fff;
}
/* Вторичная (обводка) — только карточки каталога.
   Главную кнопку «В корзину» на карточке товара НЕ трогаем:
   Storefront вешает на неё класс alt, поэтому исключаем её явно. */
.woocommerce ul.products a.button.alt,
.woocommerce ul.products button.button.alt,
.woocommerce ul.products a.button.added_to_cart{
  background:transparent;color:var(--green);border-color:var(--line2);
}
.woocommerce ul.products a.button.alt:hover{background:var(--paper2);color:var(--green2);}

/* ================= КАТАЛОГ ================= */
.woocommerce ul.products li.product{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1rem;
  margin-bottom:1.5rem;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--sage);
  box-shadow:0 6px 24px rgba(37,42,37,.07);
}
.woocommerce ul.products li.product img{
  border-radius:10px;background:var(--paper2);
  aspect-ratio:1/1;object-fit:cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--disp);font-size:1.05rem;margin:.6em 0 .2em;color:var(--ink);
}
.woocommerce ul.products li.product .price{color:var(--green);font-weight:600;}
.woocommerce ul.products li.product .price del{color:var(--muted);opacity:.7;}
.woocommerce span.onsale{
  background:var(--sage);color:var(--green2);
  border-radius:999px;font-weight:500;min-height:auto;padding:.3em .9em;
}
.woocommerce .products .star-rating{color:var(--green);}

/* ================= КАРТОЧКА ТОВАРА ================= */
.woocommerce div.product{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem;
}
.woocommerce div.product div.images img{border-radius:10px;background:var(--paper2);}
.woocommerce div.product .product_title{font-size:2rem;margin-top:0;}
.woocommerce div.product p.price{color:var(--green);font-size:1.5rem;font-weight:600;}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--muted);font-size:1.05rem;
}
.woocommerce div.product form.cart .button{margin-top:1rem;}
.woocommerce div.product .product_meta{
  border-top:1px solid var(--line);padding-top:1rem;font-size:.9rem;color:var(--muted);
}
.woocommerce div.product .stock.in-stock{color:var(--green);}
.woocommerce div.product .stock.out-of-stock{color:#9B4A3C;}

/* Уровень ухода / статус — бейджи из прототипа */
.woocommerce div.product .tag_list{display:flex;gap:6px;flex-wrap:wrap;margin-top:.8rem;}
.woocommerce div.product .tag_list a{
  background:var(--sage2);color:var(--green2);border-radius:999px;
  padding:.25em .8em;font-size:.8rem;text-decoration:none;
}

/* ================= ТАБЛИЦА / КОРЗИНА ================= */
.woocommerce table.shop_table{
  background:transparent;border-radius:var(--r);overflow:hidden;
}
.woocommerce table.shop_table th{background:var(--paper2);color:var(--ink);font-weight:600;}
.woocommerce table.shop_table td{border-color:var(--line);}
.woocommerce .cart_totals h2{margin-top:0;font-size:1.25rem;}
.woocommerce-checkout #payment{border-radius:var(--r);background:var(--card);border:1px solid var(--line);}
.woocommerce-checkout #payment ul.payment_methods li input{accent-color:var(--green);}

/* ================= ФОРМЫ ================= */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="search"],input[type="url"],select,textarea,.input-text{
  background:var(--card);
  border:1px solid var(--line2);
  border-radius:10px;
  color:var(--ink);
  padding:.65em .9em;
  font-family:var(--body);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage);
}
label{color:var(--ink);font-weight:500;}
.select2-container .select2-choice{border-radius:10px;border-color:var(--line2);}

/* ================= ФУТЕР ================= */
.site-footer{
  background:var(--green2);
  color:rgba(255,255,255,.82);
  border-top:none;
}
.site-footer a{color:#fff;}
.site-footer h1,.site-footer h2,.site-footer h3{color:#fff;}
.site-footer .widget{margin-bottom:1.6rem;}
.site-footer .widget_woocommerce_product_categories ul a{color:rgba(255,255,255,.82);}
.site-footer .widget_woocommerce_product_categories ul li.current-cat a{color:var(--sage2);}

/* ================= СТРАНИЦА / ЗАГОЛОВКИ ================= */
.page-header{background:var(--paper2);border-bottom:1px solid var(--line);}
.page-title{font-size:2.2rem;margin:0 0 .3em;}
.woocommerce-breadcrumb{color:var(--muted);font-size:.9rem;}
.woocommerce-breadcrumb a{color:var(--green);}

/* Плашка статуса «под заказ» */
.woocommerce div.product p.stock.onbackorder,
.woocommerce ul.products li.product .stock.onbackorder{color:#8A6D3B;}

/* ================= АДАПТИВ ================= */
@media (max-width:767px){
  body{font-size:15px;}
  .woocommerce div.product{padding:1.2rem;}
  .woocommerce div.product .product_title{font-size:1.5rem;}
  .page-title{font-size:1.7rem;}
  .woocommerce ul.products li.product{padding:.8rem;}
  .woocommerce ul.products li.product .button{font-size:.85rem;padding:.6em 1em;}
}

/* ================= МОБИЛЬНАЯ СЕТКА =================
   В прототипе карточки идут в 2 колонки (см. p1.html: .cards grid).
   Storefront по умолчанию схлопывает сетку в 1 колонку — возвращаем 2. */
@media (max-width:767px){
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.8rem;
    margin-left:0;
  }
  .woocommerce ul.products[class*="columns-"] li.product{
    width:auto !important;
    float:none !important;
    margin:0 !important;
    clear:none !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    width:100%;
    font-size:.82rem;
    padding:.6em .4em;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    font-size:.92rem;
  }
  .woocommerce ul.products[class*="columns-"] li.product img{
    aspect-ratio:1/1;
  }
  /* Метки на мобильном мелькают — скрываем, статус есть на карточке товара */
  .woocommerce ul.products[class*="columns-"] li.product .onsale{display:none;}
  .woocommerce .woocommerce-pagination ul{max-width:100%;overflow-x:auto;}
}

/* ================================================================
   МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ (проверено на 360px)
   ================================================================ */

/* --- 1. Шапка на мобильном: логотип и кнопка «Меню» --- */
@media (max-width: 767px){
  /* Storefront: логотип в .site-branding, кнопка — в отдельном
     .storefront-primary-navigation. Это два блока, поэтому строим
     шапку сами: первый ряд логотип, второй ряд кнопка. */
  .site-header .col-full{
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  .site-branding{ grid-column:1; grid-row:1; min-width:0; }
  .site-search{ display:none !important; }
  .storefront-primary-navigation{ grid-column:1; grid-row:2; }
  .storefront-primary-navigation .col-full{ display:block; padding:0; }

  .site-title{
    font-size:1.35rem !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-description{ display:block !important; font-size:.78rem; color:var(--muted); }

  /* Кнопка «Меню».
     Важно: тема рисует бургер через ::before/::after/span::before
     с position:absolute; right:1em и вешает float:left. Иконка идёт
     СПРАВА, и справа же большой padding. Чтобы ничего не наезжало,
     псевдоэлементы гасим и оставляем только слово — без иконки.
     Текст «Меню» самодостаточен, бургер не обязателен. */
  button.menu-toggle,
  .site-header button.menu-toggle{
    float:none !important;
    position:relative !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:40px;
    padding:.55rem 1.2rem !important;
    margin:0 !important;
    background:var(--card) !important;
    border:1px solid var(--line2) !important;
    border-radius:999px !important;
    color:var(--ink) !important;
    box-shadow:none !important;
    font-family:var(--body) !important;
    font-size:.9rem !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap;
    overflow:visible;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
  }
  button.menu-toggle:hover,
  button.menu-toggle:focus{
    background:var(--paper2) !important;
    border-color:var(--sage) !important;
    color:var(--green) !important;
  }
  /* Гасим иконку-бургер темы — она и есть источник наложения */
  button.menu-toggle::before,
  button.menu-toggle::after,
  button.menu-toggle span::before,
  button.menu-toggle span::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
    box-shadow:none !important;
    transform:none !important;
    position:static !important;
    margin:0 !important;
  }
  button.menu-toggle span{
    position:static !important;
    display:inline !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    box-shadow:none !important;
    text-indent:0 !important;
    overflow:visible;
  }
}

/* --- 2. Корзина/оформление: кнопки в палитре, без подчёркивания --- */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart button,
.wp-block-woocommerce-checkout button{ text-decoration:none; }
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button{
  background:var(--green) !important;
  color:#fff !important;
  border-radius:var(--r) !important;
  border:1px solid var(--green) !important;
  font-family:var(--body) !important;
  font-weight:500 !important;
  text-decoration:none !important;
  padding:1rem 1.2rem !important;
}
.wc-block-components-button:hover{
  background:var(--green2) !important;
  border-color:var(--green2) !important;
  color:#fff !important;
}
.wc-block-components-checkout-place-order-button{
  background:var(--green) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.wc-block-components-checkout-place-order-button:hover{ background:var(--green2) !important; }

/* --- 3. Корзина: сетка товара на мобильном --- */
@media (max-width: 767px){
  .wp-block-woocommerce-cart-line-item{
    grid-template-columns:64px 1fr !important;
    gap:12px !important;
    padding:12px 0 !important;
    align-items:start !important;
  }
  .wp-block-woocommerce-cart-line-item__image{
    width:64px !important;
    grid-row:span 3 !important;
  }
  .wp-block-woocommerce-cart-line-item__image img{
    width:64px !important;
    height:64px !important;
    border-radius:8px !important;
    object-fit:cover;
  }
  .wp-block-woocommerce-cart-line-item__product-price,
  .wp-block-woocommerce-cart-item__product-price{
    grid-column:2 !important;
    justify-self:start !important;
    text-align:left !important;
    white-space:normal !important;
    font-size:.95rem !important;
    color:var(--green) !important;
    font-weight:600;
  }
  .wp-block-woocommerce-cart-line-item__product-name a,
  .wp-block-woocommerce-cart-item__product-name a{
    font-size:.98rem !important;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .wp-block-woocommerce-cart-item__product-meta{ display:none !important; }
  .wp-block-woocommerce-cart-totals{ padding:16px 0 8px !important; }
  .wc-block-components-totals-item__value{
    font-size:1.25rem !important;
    font-weight:600 !important;
    color:var(--green) !important;
  }
  .wp-block-woocommerce-cart h1,
  .woocommerce-cart h1,
  .page-title{ font-size:1.9rem !important; line-height:1.15; }
  .wp-block-woocommerce-checkout h1,
  .woocommerce-checkout h1{ font-size:1.6rem !important; }
}

/* --- 4. Футер магазина (не главной) --- */
body:not(.home) .site-footer:empty,
body:not(.home) .site-footer .footer-widgets:empty,
body:not(.home) .site-footer .widget:empty{ display:none !important; }
body:not(.home) .site-footer{
  background:var(--paper) !important;
  border-top:1px solid var(--line) !important;
  padding:28px 0 !important;
}
body:not(.home) .site-info{
  color:var(--muted) !important;
  font-size:.85rem !important;
  text-align:center;
}
body:not(.home) .site-info a{ color:var(--green) !important; }

/* --- 5. Пагинация каталога в палитре --- */
@media (max-width: 767px){
  .woocommerce-pagination ul{
    border:0 !important;
    display:flex !important;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
  }
  .woocommerce-pagination ul li{
    border:0 !important;
    margin:0 !important;
    background:var(--card) !important;
    border:1px solid var(--line2) !important;
    border-radius:8px !important;
    overflow:hidden;
  }
  .woocommerce-pagination ul li span,
  .woocommerce-pagination ul li a{
    padding:.5rem .7rem !important;
    display:block;
    color:var(--ink) !important;
    font-size:.9rem;
    border-radius:8px;
  }
  .woocommerce-pagination ul li span.current{
    background:var(--green) !important;
    color:#fff !important;
    border-color:var(--green) !important;
  }
  .woocommerce-pagination ul li a:hover{ background:var(--paper2) !important; }

  /* Storefront вешает на .products служебные clearfix-псевдоэлементы
     (::before/::after с content:"" и display:table). Когда мы переводим
     список в CSS-grid, они становятся полноценными ячейками сетки и
     занимают первую позицию — отсюда пустое место в начале каталога.
     Гасим их и выравниваем карточки по левому краю. */
  .woocommerce ul.products[class*="columns-"]::before,
  .woocommerce ul.products[class*="columns-"]::after{
    content:none !important;
    display:none !important;
  }
  .woocommerce ul.products[class*="columns-"]{
    grid-auto-flow:row !important;
    align-items:start !important;
  }
  /* Заголовок ограничиваем 2 строками, чтобы карточки были одной высоты */
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.5em;
    margin:.5em 0 .2em !important;
    line-height:1.25 !important;
    font-size:.92rem !important;
    text-align:center;
  }
  .woocommerce ul.products[class*="columns-"] li.product .price{
    display:block !important;
    text-align:center;
    margin:.3em 0 .5em !important;
    min-height:1.3em;
  }
  /* Карточка как flex-колонка: кнопка прижата к низу внутри границ,
     высота выравнивается по самой высокой карточке в ряду */
  .woocommerce ul.products[class*="columns-"] li.product{
    margin-bottom:0 !important;
    display:flex !important;
    flex-direction:column;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link{
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto;
    height:100%;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    flex:0 0 auto;
    margin-top:auto !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product .price{
    font-size:.98rem !important;
    display:block;
    margin:.3em 0;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    font-size:.92rem !important;
    line-height:1.25;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    font-size:.85rem !important;
    padding:.55em .3em !important;
  }
}

/* --- 7. Служебные clearfix-псевдоэлементы Storefront ---
   Тема использует ::before/::after с content:"" и display:table для
   очистки float. В CSS-grid они становятся ячейками и сдвигают вёрстку.
   Гасим их точечно там, где список переведён в grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.site-header::before,
.site-header::after,
.site-content::before,
.site-content::after,
.col-full::before,
.col-full::after,
.clear::before,
.clear::after{
  content:none !important;
  display:none !important;
}

/* --- 8. Пагинация каталога в палитре на всех экранах --- */
.woocommerce-pagination ul.page-numbers{
  border:0 !important;
  display:flex;
  gap:6px;
  justify-content:center;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce-pagination ul.page-numbers li{
  border:0 !important;
  margin:0 !important;
  background:var(--card) !important;
  border:1px solid var(--line2) !important;
  border-radius:8px !important;
  overflow:hidden;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span{
  display:block !important;
  padding:.45rem .8rem !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-size:.92rem;
  border-radius:8px;
}
.woocommerce-pagination ul.page-numbers li span.current{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
}
.woocommerce-pagination ul.page-numbers li a:hover{
  background:var(--paper2) !important;
  color:var(--green) !important;
}
.woocommerce-pagination{
  border:0 !important;
  background:var(--paper) !important;
  padding:24px 0 !important;
}

/* --- 9. Плашки WooCommerce (корзина пуста, ошибки) в палитре --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  background:var(--card) !important;
  border:1px solid var(--line2) !important;
  border-left:4px solid var(--green) !important;
  border-radius:var(--r) !important;
  color:var(--ink) !important;
  font-size:.95rem;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  background:var(--green) !important;
  color:#fff !important;
  border-radius:8px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ color:var(--green) !important; }

/* --- 10. Заголовки разделов оформления --- */
.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-cart-form .cart_totals h2{
  font-family:var(--disp) !important;
  color:var(--ink) !important;
  font-size:1.35rem !important;
  margin-bottom:.6em !important;
  padding-top:0 !important;
}
/* Скрываем «Дополнительная информация» и прочие пустые блоки оформления */
.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table td:first-child,
#ship-to-different-address{ display:none !important; }

/* ================================================================
   ЛЕНТА СТАТЕЙ (страница «Статьи», шорткод [tilladom_posts])
   ================================================================ */
.td-posts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:34px;
}
.td-posts-item{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.td-posts-item:hover{
  border-color:var(--sage);
  box-shadow:0 6px 24px rgba(37,42,37,.07);
}
.td-posts-thumb{
  display:block;
  aspect-ratio:16/9;
  background:var(--paper2);
  overflow:hidden;
}
.td-posts-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.td-posts-thumb-none{
  background:
    radial-gradient(circle at 30% 40%, var(--sage2) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 65%, var(--sage) 0 14%, transparent 15%),
    var(--paper2);
}
.td-posts-body{ padding:18px 20px 22px; }
.td-posts-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;color:var(--muted);margin-bottom:.5em;
}
.td-posts-meta time{ color:var(--muted); }
.td-posts-cat{
  background:var(--sage2);color:var(--green2);
  border-radius:999px;padding:2px 9px;font-size:.72rem;text-decoration:none;
}
.td-posts-cat,
.td-posts-cat:hover{
  background:var(--sage2);
  color:var(--green2);
  text-decoration:none !important;
  border:none !important;
}
.td-posts-cat:hover{ background:var(--sage); }

/* Ссылки-рубрики на странице «Статьи» не подчёркиваем */
.entry-content a[href*="/category/"]{
  text-decoration:none;
  border-bottom:1px solid var(--sage);
  padding-bottom:1px;
}
.entry-content a[href*="/category/"]:hover{
  color:var(--green);
  border-bottom-color:var(--green);
}
.td-posts-title{
  font-family:var(--disp);
  font-size:1.3rem;
  line-height:1.2;
  margin:.1em 0 .45em;
}
.td-posts-title a,
.td-posts-title a:hover,
.td-posts-title a:focus{
  color:var(--ink);
  text-decoration:none !important;
  border:none !important;
  box-shadow:none !important;
}
.td-posts-title a:hover{ color:var(--green) !important; }
.td-posts-title a:hover{ color:var(--green); }
.td-posts-excerpt{ color:var(--muted); font-size:.94rem; margin:0; }

.td-empty{ color:var(--muted); font-style:italic; padding:30px 0; }

/* Статья целиком */
.entry-content h2{
  font-family:var(--disp);
  font-size:1.5rem;
  margin-top:1.4em;
  color:var(--ink);
}
.entry-content > p:first-of-type{ font-size:1.05rem; color:var(--muted); }
.post-entry .entry-meta, .entry-header .entry-meta{ font-size:.8rem; color:var(--muted); }

@media (max-width: 767px){
  .td-posts{ grid-template-columns:1fr; gap:18px; margin-top:24px; }
  .td-posts-body{ padding:14px 16px 18px; }
  .td-posts-title{ font-size:1.15rem; }
}

/* ================================================================
   ПРАВКИ ПО СКРИНШОТАМ С ТЕЛЕФОНА
   ================================================================ */

/* --- 1. Блок «Мастерская»: тёмный фон, а текст остался тёмно-зелёным ---
   Контраст был 1.4 при норме 4.5 — заголовок и надпись «МАСТЕРСКАЯ»
   физически не читались. На светлых секциях тёмный текст верен, поэтому
   переопределяем только внутри тёмного блока. */

.sec.work,
.td-home .work{
  background: var(--green2) !important;
}
.td-home .work .k,
.td-home .work p.k,
.td-home .work .k.rv{
  color: #B0C7AC !important;      /* контраст 5.81 */
}
.td-home .work .h2,
.td-home .work h2,
.td-home .work .h2.rv,
.td-home #workshop h2{
  color: var(--paper) !important; /* контраст 9.38 */
}
.td-home .work .h2 em,
.td-home .work h2 em,
.td-home .work .h2 em.rv{
  color: #B0C7AC !important;      /* курсивное выделение */
}
.td-home .work .body{
  color: #B9C8B6 !important;      /* было 6.01 — оставляем, но унифицируем */
}
.td-home .work .wbadge{
  color: var(--sage2) !important;
}
.td-home .work .wbadge i{
  background: var(--sage) !important;
}
/* Кнопки на тёмном фоне: обводка светлая, заливка — светлая */
.td-home .work .btn-o{
  background: transparent !important;
  color: var(--paper) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.td-home .work .btn-o:hover{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: var(--paper) !important;
}
.td-home .work .btn-p{
  background: var(--paper) !important;
  color: var(--green2) !important;
  border-color: var(--paper) !important;
}
.td-home .work .btn-p:hover{
  background: #fff !important;
  color: var(--green2) !important;
}
/* Иллюстрация в блоке — линии светлые, иначе тонут на тёмном фоне */
.td-home .work .work-ph svg g{
  stroke: rgba(203,218,198,.75) !important;
}
.td-home .work .work-ph svg circle{
  fill: var(--sage2) !important;
}
.td-home .work .work-ph svg rect{
  fill: rgba(203,218,198,.45) !important;
}

/* Финальный CTA — он тоже на тёмном фоне, те же правки */
.td-home .fin{
  background: var(--green2) !important;
}
.td-home .fin .k,
.td-home .fin p.k,
.td-home .fin .k.rv{
  color: #B0C7AC !important;
}
.td-home .fin h2{
  color: var(--paper) !important;
}
.td-home .fin h2 em{
  color: #B0C7AC !important;
}
.td-home .fin .sub{
  color: #B9C8B6 !important;
}

/* --- 2. Шапка: белый блок на тёплом фоне страницы ---
   Storefront задаёт .site-header белым. На главной шапка должна быть
   того же тона, что страница, иначе под hero видна полоса. */
body.home .site-header,
body.home header.site-header{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}
body.home .site-header .col-full{
  background: var(--paper) !important;
}

/* --- 3. FAQ: карточка вопроса светлее секции, где секция тоже светлая ---
   Получается «кнопка» без границы. Убираем контраст между .qa и .a:
   делаем всю карточку одного тона и разделяем вопросы тонкой линией. */
.td-home .faq .qa{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}
.td-home .faq .qa > button{
  background: var(--card) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.td-home .faq .qa > button:hover,
.td-home .faq .qa.open > button{
  background: var(--paper2) !important;
}
.td-home .faq .qa .a{
  background: var(--card) !important;
}

/* --- 4. Карточка товара: фото и текст разных тонов ---
   .card-ph был на #ECEAE0, тело — прозрачное (то есть #FBFAF4).
   Стык читался как разрез пополам. Делаем тело тем же тоном, что фото. */
.td-home .card-ph{
  background: var(--paper2) !important;
}
.td-home .card-ph .ph{
  background: var(--paper2) !important;
}
.td-home .card-b{
  background: var(--paper2) !important;
}
.td-home .card{
  background: var(--paper2) !important;
}

/* ================================================================
   ФИНАЛЬНЫЙ CTA: заголовок перебивался стилями темы
   ================================================================ */
.td-home .fin h2,
.td-home .fin h2.rv,
.td-home .fin .rv h2,
.td-home #fin h2,
.td-home .site-content .fin h2,
.td-home .site-content #fin h2{
  color: #F4F2EA !important;
  text-shadow:none !important;
}
.td-home .fin h2 em,
.td-home .fin h2 em.rv,
.td-home .fin .rv h2 em{
  color: #B0C7AC !important;
}

/* ================================================================
   Кнопки на тёмном фоне финального CTA
   ================================================================ */
.td-home .fin .btn-o,
.td-home .fin a.btn-o,
.td-home .fin .hero-cta .btn-o{
  background: transparent !important;
  color: #F4F2EA !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  text-decoration:none !important;
}
.td-home .fin .btn-o:hover,
.td-home .fin a.btn-o:hover{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: #F4F2EA !important;
}
.td-home .fin .btn-p,
.td-home .fin a.btn-p,
.td-home .fin .hero-cta .btn-p{
  background: #F4F2EA !important;
  color: #2E4437 !important;
  border: 1px solid #F4F2EA !important;
  text-decoration:none !important;
}
.td-home .fin .btn-p:hover{
  background: #fff !important;
  color: #2E4437 !important;
}

/* ================================================================
   ШАГИ ДОСТАВКИ: текст упирался в рамку
   ================================================================
   В прототипе у .step горизонтальный внутренний отступ нулевой
   (padding: 20px 0 0) — карточка рисовалась без рамки, и это
   выглядело нормально. В теме к шагам добавилась рамка 2px, и текст
   оказался вплотную к её краю: на мобильном в двух колонках это
   выглядело как текст, вылезающий за карточку.

   Лечим нормальным внутренним отступом и более тонкой рамкой.
   Колонки на мобильном делаем в одну — шаги читаются лучше
   по порядку, а не в два узких столбца. */
.td-home .step{
  padding: 22px 20px 24px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.td-home .step h3{
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  margin: 0 0 .4em !important;
  overflow-wrap: anywhere;
}
.td-home .step p{
  font-size: .92rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}
.td-home .step b{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  margin-bottom: .35em;
}

/* Мобильный: шаги в одну колонку — так текст не рвётся
   и карточки не выглядят обрезанными */
@media (max-width: 767px){
  .td-home .steps{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .td-home .step{ padding: 18px 18px 20px !important; }
}

/* ================================================================
   ШАГИ: одна колонка на мобильном
   ================================================================
   Предыдущее правило не применилось — более позднее правило темы
   перебивало grid. Ставим в конец файла.
   В две колонки на 360px шаги не читаются: слова рвутся посередине. */
@media (max-width: 767px){
  .td-home #delivery .steps,
  .td-home .steps,
  body.home .td-home .steps{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .td-home .step h3{
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
  }
}

/* ================================================================
   БЛОК ОПЛАТЫ НА ОФОРМЛЕНИИ — СКРЫТ
   ================================================================
   У магазина только предоплата: покупатель переводит деньги сам по
   реквизитам, которые мы присылаем после звонка. Выбора способа
   оплаты на сайте нет.

   Фильтр woocommerce_checkout_show_payment в WooCommerce 11 работает
   (возвращает false), но блочный рендер всё равно печатает разметку —
   поэтому прячем визуально. Способ оплаты технически остаётся
   включённым: без него checkout не даст оформить заказ. */
#payment,
.woocommerce-checkout-payment{
  display: none !important;
}

*
Theme Name: Тилла-Дом
Theme URI: http://11.11.11.105
Description: Дочерняя тема Storefront с дизайн-системой магазина атмосферных растений. Палитра, типографика и компоненты перенесены из прототипа.
Author: cyril
Template: storefront
Version: 4.5.5
Text Domain: tilladom
*/

/* ================= ДИЗАЙН-ТОКЕНЫ =================
   Источник: :root в прототипе (p1.html).
   Исправлено: --line2 был #CFCAba (невалидный hex) -> #CFCABA.
*/
:root{
  --paper:#F4F2EA;
  --paper2:#ECE8DC;
  --card:#FBFAF4;
  --ink:#252A25;
  --muted:#6D7367;
  --line:#E0DCCC;
  --line2:#CFCABA;
  --green:#3E5C48;
  --green2:#2E4437;
  --sage:#A9C2A4;
  --sage2:#CBDAC6;
  --cream:#F4F2EA;
  --r:14px;
  --disp:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Storefront hooks */
  --woocommerce-loop-product__title--color:var(--ink);
}

/* ================= БАЗА ================= */
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.site-title,.entry-title,.page-title,.widget h1,.widget h2,.widget h3{
  font-family:var(--disp);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.01em;
}
a{color:var(--green);}
a:hover,a:focus{color:var(--green2);}
p a{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px;}

/* ================= ШАПКА ================= */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .custom-logo-link img{max-height:60px;width:auto;}
.site-title{font-family:var(--disp);font-size:1.6rem;margin:0;}
.site-title a{color:var(--green2);text-decoration:none;}
.main-navigation ul{background:transparent;}
.main-navigation li a{color:var(--ink);font-weight:500;font-size:15px;}
.main-navigation li a:hover,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a{color:var(--green2);}
.main-navigation ul.nav>li>a::after{background-color:var(--green);}

/* ================= КНОПКИ ================= */
button,input[type="button"],input[type="submit"],.button,.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--body);
  background:var(--green);
  color:#fff;
  border-radius:var(--r);
  border:1px solid var(--green);
  font-weight:500;
  padding:.7em 1.5em;
  transition:background .18s ease,border-color .18s ease;
}
button:hover,input[type="button"]:hover,input[type="submit"]:hover,.button:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--green2);border-color:var(--green2);color:#fff;
}
/* Вторичная (обводка) — только карточки каталога.
   Главную кнопку «В корзину» на карточке товара НЕ трогаем:
   Storefront вешает на неё класс alt, поэтому исключаем её явно. */
.woocommerce ul.products a.button.alt,
.woocommerce ul.products button.button.alt,
.woocommerce ul.products a.button.added_to_cart{
  background:transparent;color:var(--green);border-color:var(--line2);
}
.woocommerce ul.products a.button.alt:hover{background:var(--paper2);color:var(--green2);}

/* ================= КАТАЛОГ ================= */
.woocommerce ul.products li.product{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1rem;
  margin-bottom:1.5rem;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--sage);
  box-shadow:0 6px 24px rgba(37,42,37,.07);
}
.woocommerce ul.products li.product img{
  border-radius:10px;background:var(--paper2);
  aspect-ratio:1/1;object-fit:cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--disp);font-size:1.05rem;margin:.6em 0 .2em;color:var(--ink);
}
.woocommerce ul.products li.product .price{color:var(--green);font-weight:600;}
.woocommerce ul.products li.product .price del{color:var(--muted);opacity:.7;}
.woocommerce span.onsale{
  background:var(--sage);color:var(--green2);
  border-radius:999px;font-weight:500;min-height:auto;padding:.3em .9em;
}
.woocommerce .products .star-rating{color:var(--green);}

/* ================= КАРТОЧКА ТОВАРА ================= */
.woocommerce div.product{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem;
}
.woocommerce div.product div.images img{border-radius:10px;background:var(--paper2);}
.woocommerce div.product .product_title{font-size:2rem;margin-top:0;}
.woocommerce div.product p.price{color:var(--green);font-size:1.5rem;font-weight:600;}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--muted);font-size:1.05rem;
}
.woocommerce div.product form.cart .button{margin-top:1rem;}
.woocommerce div.product .product_meta{
  border-top:1px solid var(--line);padding-top:1rem;font-size:.9rem;color:var(--muted);
}
.woocommerce div.product .stock.in-stock{color:var(--green);}
.woocommerce div.product .stock.out-of-stock{color:#9B4A3C;}

/* Уровень ухода / статус — бейджи из прототипа */
.woocommerce div.product .tag_list{display:flex;gap:6px;flex-wrap:wrap;margin-top:.8rem;}
.woocommerce div.product .tag_list a{
  background:var(--sage2);color:var(--green2);border-radius:999px;
  padding:.25em .8em;font-size:.8rem;text-decoration:none;
}

/* ================= ТАБЛИЦА / КОРЗИНА ================= */
.woocommerce table.shop_table{
  background:transparent;border-radius:var(--r);overflow:hidden;
}
.woocommerce table.shop_table th{background:var(--paper2);color:var(--ink);font-weight:600;}
.woocommerce table.shop_table td{border-color:var(--line);}
.woocommerce .cart_totals h2{margin-top:0;font-size:1.25rem;}
.woocommerce-checkout #payment{border-radius:var(--r);background:var(--card);border:1px solid var(--line);}
.woocommerce-checkout #payment ul.payment_methods li input{accent-color:var(--green);}

/* ================= ФОРМЫ ================= */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="search"],input[type="url"],select,textarea,.input-text{
  background:var(--card);
  border:1px solid var(--line2);
  border-radius:10px;
  color:var(--ink);
  padding:.65em .9em;
  font-family:var(--body);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage);
}
label{color:var(--ink);font-weight:500;}
.select2-container .select2-choice{border-radius:10px;border-color:var(--line2);}

/* ================= ФУТЕР ================= */
.site-footer{
  background:var(--green2);
  color:rgba(255,255,255,.82);
  border-top:none;
}
.site-footer a{color:#fff;}
.site-footer h1,.site-footer h2,.site-footer h3{color:#fff;}
.site-footer .widget{margin-bottom:1.6rem;}
.site-footer .widget_woocommerce_product_categories ul a{color:rgba(255,255,255,.82);}
.site-footer .widget_woocommerce_product_categories ul li.current-cat a{color:var(--sage2);}

/* ================= СТРАНИЦА / ЗАГОЛОВКИ ================= */
.page-header{background:var(--paper2);border-bottom:1px solid var(--line);}
.page-title{font-size:2.2rem;margin:0 0 .3em;}
.woocommerce-breadcrumb{color:var(--muted);font-size:.9rem;}
.woocommerce-breadcrumb a{color:var(--green);}

/* Плашка статуса «под заказ» */
.woocommerce div.product p.stock.onbackorder,
.woocommerce ul.products li.product .stock.onbackorder{color:#8A6D3B;}

/* ================= АДАПТИВ ================= */
@media (max-width:767px){
  body{font-size:15px;}
  .woocommerce div.product{padding:1.2rem;}
  .woocommerce div.product .product_title{font-size:1.5rem;}
  .page-title{font-size:1.7rem;}
  .woocommerce ul.products li.product{padding:.8rem;}
  .woocommerce ul.products li.product .button{font-size:.85rem;padding:.6em 1em;}
}

/* ================= МОБИЛЬНАЯ СЕТКА =================
   В прототипе карточки идут в 2 колонки (см. p1.html: .cards grid).
   Storefront по умолчанию схлопывает сетку в 1 колонку — возвращаем 2. */
@media (max-width:767px){
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.8rem;
    margin-left:0;
  }
  .woocommerce ul.products[class*="columns-"] li.product{
    width:auto !important;
    float:none !important;
    margin:0 !important;
    clear:none !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    width:100%;
    font-size:.82rem;
    padding:.6em .4em;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    font-size:.92rem;
  }
  .woocommerce ul.products[class*="columns-"] li.product img{
    aspect-ratio:1/1;
  }
  /* Метки на мобильном мелькают — скрываем, статус есть на карточке товара */
  .woocommerce ul.products[class*="columns-"] li.product .onsale{display:none;}
  .woocommerce .woocommerce-pagination ul{max-width:100%;overflow-x:auto;}
}

/* ================================================================
   МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ (проверено на 360px)
   ================================================================ */

/* --- 1. Шапка на мобильном: логотип и кнопка «Меню» --- */
@media (max-width: 767px){
  /* Storefront: логотип в .site-branding, кнопка — в отдельном
     .storefront-primary-navigation. Это два блока, поэтому строим
     шапку сами: первый ряд логотип, второй ряд кнопка. */
  .site-header .col-full{
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  .site-branding{ grid-column:1; grid-row:1; min-width:0; }
  .site-search{ display:none !important; }
  .storefront-primary-navigation{ grid-column:1; grid-row:2; }
  .storefront-primary-navigation .col-full{ display:block; padding:0; }

  .site-title{
    font-size:1.35rem !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-description{ display:block !important; font-size:.78rem; color:var(--muted); }

  /* Кнопка «Меню».
     Важно: тема рисует бургер через ::before/::after/span::before
     с position:absolute; right:1em и вешает float:left. Иконка идёт
     СПРАВА, и справа же большой padding. Чтобы ничего не наезжало,
     псевдоэлементы гасим и оставляем только слово — без иконки.
     Текст «Меню» самодостаточен, бургер не обязателен. */
  button.menu-toggle,
  .site-header button.menu-toggle{
    float:none !important;
    position:relative !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:40px;
    padding:.55rem 1.2rem !important;
    margin:0 !important;
    background:var(--card) !important;
    border:1px solid var(--line2) !important;
    border-radius:999px !important;
    color:var(--ink) !important;
    box-shadow:none !important;
    font-family:var(--body) !important;
    font-size:.9rem !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap;
    overflow:visible;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
  }
  button.menu-toggle:hover,
  button.menu-toggle:focus{
    background:var(--paper2) !important;
    border-color:var(--sage) !important;
    color:var(--green) !important;
  }
  /* Гасим иконку-бургер темы — она и есть источник наложения */
  button.menu-toggle::before,
  button.menu-toggle::after,
  button.menu-toggle span::before,
  button.menu-toggle span::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
    box-shadow:none !important;
    transform:none !important;
    position:static !important;
    margin:0 !important;
  }
  button.menu-toggle span{
    position:static !important;
    display:inline !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    box-shadow:none !important;
    text-indent:0 !important;
    overflow:visible;
  }
}

/* --- 2. Корзина/оформление: кнопки в палитре, без подчёркивания --- */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart button,
.wp-block-woocommerce-checkout button{ text-decoration:none; }
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button{
  background:var(--green) !important;
  color:#fff !important;
  border-radius:var(--r) !important;
  border:1px solid var(--green) !important;
  font-family:var(--body) !important;
  font-weight:500 !important;
  text-decoration:none !important;
  padding:1rem 1.2rem !important;
}
.wc-block-components-button:hover{
  background:var(--green2) !important;
  border-color:var(--green2) !important;
  color:#fff !important;
}
.wc-block-components-checkout-place-order-button{
  background:var(--green) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.wc-block-components-checkout-place-order-button:hover{ background:var(--green2) !important; }

/* --- 3. Корзина: сетка товара на мобильном --- */
@media (max-width: 767px){
  .wp-block-woocommerce-cart-line-item{
    grid-template-columns:64px 1fr !important;
    gap:12px !important;
    padding:12px 0 !important;
    align-items:start !important;
  }
  .wp-block-woocommerce-cart-line-item__image{
    width:64px !important;
    grid-row:span 3 !important;
  }
  .wp-block-woocommerce-cart-line-item__image img{
    width:64px !important;
    height:64px !important;
    border-radius:8px !important;
    object-fit:cover;
  }
  .wp-block-woocommerce-cart-line-item__product-price,
  .wp-block-woocommerce-cart-item__product-price{
    grid-column:2 !important;
    justify-self:start !important;
    text-align:left !important;
    white-space:normal !important;
    font-size:.95rem !important;
    color:var(--green) !important;
    font-weight:600;
  }
  .wp-block-woocommerce-cart-line-item__product-name a,
  .wp-block-woocommerce-cart-item__product-name a{
    font-size:.98rem !important;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .wp-block-woocommerce-cart-item__product-meta{ display:none !important; }
  .wp-block-woocommerce-cart-totals{ padding:16px 0 8px !important; }
  .wc-block-components-totals-item__value{
    font-size:1.25rem !important;
    font-weight:600 !important;
    color:var(--green) !important;
  }
  .wp-block-woocommerce-cart h1,
  .woocommerce-cart h1,
  .page-title{ font-size:1.9rem !important; line-height:1.15; }
  .wp-block-woocommerce-checkout h1,
  .woocommerce-checkout h1{ font-size:1.6rem !important; }
}

/* --- 4. Футер магазина (не главной) --- */
body:not(.home) .site-footer:empty,
body:not(.home) .site-footer .footer-widgets:empty,
body:not(.home) .site-footer .widget:empty{ display:none !important; }
body:not(.home) .site-footer{
  background:var(--paper) !important;
  border-top:1px solid var(--line) !important;
  padding:28px 0 !important;
}
body:not(.home) .site-info{
  color:var(--muted) !important;
  font-size:.85rem !important;
  text-align:center;
}
body:not(.home) .site-info a{ color:var(--green) !important; }

/* --- 5. Пагинация каталога в палитре --- */
@media (max-width: 767px){
  .woocommerce-pagination ul{
    border:0 !important;
    display:flex !important;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
  }
  .woocommerce-pagination ul li{
    border:0 !important;
    margin:0 !important;
    background:var(--card) !important;
    border:1px solid var(--line2) !important;
    border-radius:8px !important;
    overflow:hidden;
  }
  .woocommerce-pagination ul li span,
  .woocommerce-pagination ul li a{
    padding:.5rem .7rem !important;
    display:block;
    color:var(--ink) !important;
    font-size:.9rem;
    border-radius:8px;
  }
  .woocommerce-pagination ul li span.current{
    background:var(--green) !important;
    color:#fff !important;
    border-color:var(--green) !important;
  }
  .woocommerce-pagination ul li a:hover{ background:var(--paper2) !important; }

  /* Storefront вешает на .products служебные clearfix-псевдоэлементы
     (::before/::after с content:"" и display:table). Когда мы переводим
     список в CSS-grid, они становятся полноценными ячейками сетки и
     занимают первую позицию — отсюда пустое место в начале каталога.
     Гасим их и выравниваем карточки по левому краю. */
  .woocommerce ul.products[class*="columns-"]::before,
  .woocommerce ul.products[class*="columns-"]::after{
    content:none !important;
    display:none !important;
  }
  .woocommerce ul.products[class*="columns-"]{
    grid-auto-flow:row !important;
    align-items:start !important;
  }
  /* Заголовок ограничиваем 2 строками, чтобы карточки были одной высоты */
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.5em;
    margin:.5em 0 .2em !important;
    line-height:1.25 !important;
    font-size:.92rem !important;
    text-align:center;
  }
  .woocommerce ul.products[class*="columns-"] li.product .price{
    display:block !important;
    text-align:center;
    margin:.3em 0 .5em !important;
    min-height:1.3em;
  }
  /* Карточка как flex-колонка: кнопка прижата к низу внутри границ,
     высота выравнивается по самой высокой карточке в ряду */
  .woocommerce ul.products[class*="columns-"] li.product{
    margin-bottom:0 !important;
    display:flex !important;
    flex-direction:column;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link{
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto;
    height:100%;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    flex:0 0 auto;
    margin-top:auto !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product .price{
    font-size:.98rem !important;
    display:block;
    margin:.3em 0;
  }
  .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title{
    font-size:.92rem !important;
    line-height:1.25;
  }
  .woocommerce ul.products[class*="columns-"] li.product .button{
    font-size:.85rem !important;
    padding:.55em .3em !important;
  }
}

/* --- 7. Служебные clearfix-псевдоэлементы Storefront ---
   Тема использует ::before/::after с content:"" и display:table для
   очистки float. В CSS-grid они становятся ячейками и сдвигают вёрстку.
   Гасим их точечно там, где список переведён в grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.site-header::before,
.site-header::after,
.site-content::before,
.site-content::after,
.col-full::before,
.col-full::after,
.clear::before,
.clear::after{
  content:none !important;
  display:none !important;
}

/* --- 8. Пагинация каталога в палитре на всех экранах --- */
.woocommerce-pagination ul.page-numbers{
  border:0 !important;
  display:flex;
  gap:6px;
  justify-content:center;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce-pagination ul.page-numbers li{
  border:0 !important;
  margin:0 !important;
  background:var(--card) !important;
  border:1px solid var(--line2) !important;
  border-radius:8px !important;
  overflow:hidden;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span{
  display:block !important;
  padding:.45rem .8rem !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-size:.92rem;
  border-radius:8px;
}
.woocommerce-pagination ul.page-numbers li span.current{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
}
.woocommerce-pagination ul.page-numbers li a:hover{
  background:var(--paper2) !important;
  color:var(--green) !important;
}
.woocommerce-pagination{
  border:0 !important;
  background:var(--paper) !important;
  padding:24px 0 !important;
}

/* --- 9. Плашки WooCommerce (корзина пуста, ошибки) в палитре --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  background:var(--card) !important;
  border:1px solid var(--line2) !important;
  border-left:4px solid var(--green) !important;
  border-radius:var(--r) !important;
  color:var(--ink) !important;
  font-size:.95rem;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  background:var(--green) !important;
  color:#fff !important;
  border-radius:8px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ color:var(--green) !important; }

/* --- 10. Заголовки разделов оформления --- */
.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-cart-form .cart_totals h2{
  font-family:var(--disp) !important;
  color:var(--ink) !important;
  font-size:1.35rem !important;
  margin-bottom:.6em !important;
  padding-top:0 !important;
}
/* Скрываем «Дополнительная информация» и прочие пустые блоки оформления */
.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table td:first-child,
#ship-to-different-address{ display:none !important; }

/* ================================================================
   ЛЕНТА СТАТЕЙ (страница «Статьи», шорткод [tilladom_posts])
   ================================================================ */
.td-posts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:34px;
}
.td-posts-item{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.td-posts-item:hover{
  border-color:var(--sage);
  box-shadow:0 6px 24px rgba(37,42,37,.07);
}
.td-posts-thumb{
  display:block;
  aspect-ratio:16/9;
  background:var(--paper2);
  overflow:hidden;
}
.td-posts-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.td-posts-thumb-none{
  background:
    radial-gradient(circle at 30% 40%, var(--sage2) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 65%, var(--sage) 0 14%, transparent 15%),
    var(--paper2);
}
.td-posts-body{ padding:18px 20px 22px; }
.td-posts-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;color:var(--muted);margin-bottom:.5em;
}
.td-posts-meta time{ color:var(--muted); }
.td-posts-cat{
  background:var(--sage2);color:var(--green2);
  border-radius:999px;padding:2px 9px;font-size:.72rem;text-decoration:none;
}
.td-posts-cat,
.td-posts-cat:hover{
  background:var(--sage2);
  color:var(--green2);
  text-decoration:none !important;
  border:none !important;
}
.td-posts-cat:hover{ background:var(--sage); }

/* Ссылки-рубрики на странице «Статьи» не подчёркиваем */
.entry-content a[href*="/category/"]{
  text-decoration:none;
  border-bottom:1px solid var(--sage);
  padding-bottom:1px;
}
.entry-content a[href*="/category/"]:hover{
  color:var(--green);
  border-bottom-color:var(--green);
}
.td-posts-title{
  font-family:var(--disp);
  font-size:1.3rem;
  line-height:1.2;
  margin:.1em 0 .45em;
}
.td-posts-title a,
.td-posts-title a:hover,
.td-posts-title a:focus{
  color:var(--ink);
  text-decoration:none !important;
  border:none !important;
  box-shadow:none !important;
}
.td-posts-title a:hover{ color:var(--green) !important; }
.td-posts-title a:hover{ color:var(--green); }
.td-posts-excerpt{ color:var(--muted); font-size:.94rem; margin:0; }

.td-empty{ color:var(--muted); font-style:italic; padding:30px 0; }

/* Статья целиком */
.entry-content h2{
  font-family:var(--disp);
  font-size:1.5rem;
  margin-top:1.4em;
  color:var(--ink);
}
.entry-content > p:first-of-type{ font-size:1.05rem; color:var(--muted); }
.post-entry .entry-meta, .entry-header .entry-meta{ font-size:.8rem; color:var(--muted); }

@media (max-width: 767px){
  .td-posts{ grid-template-columns:1fr; gap:18px; margin-top:24px; }
  .td-posts-body{ padding:14px 16px 18px; }
  .td-posts-title{ font-size:1.15rem; }
}

/* ================================================================
   ПРАВКИ ПО СКРИНШОТАМ С ТЕЛЕФОНА
   ================================================================ */

/* --- 1. Блок «Мастерская»: тёмный фон, а текст остался тёмно-зелёным ---
   Контраст был 1.4 при норме 4.5 — заголовок и надпись «МАСТЕРСКАЯ»
   физически не читались. На светлых секциях тёмный текст верен, поэтому
   переопределяем только внутри тёмного блока. */

.sec.work,
.td-home .work{
  background: var(--green2) !important;
}
.td-home .work .k,
.td-home .work p.k,
.td-home .work .k.rv{
  color: #B0C7AC !important;      /* контраст 5.81 */
}
.td-home .work .h2,
.td-home .work h2,
.td-home .work .h2.rv,
.td-home #workshop h2{
  color: var(--paper) !important; /* контраст 9.38 */
}
.td-home .work .h2 em,
.td-home .work h2 em,
.td-home .work .h2 em.rv{
  color: #B0C7AC !important;      /* курсивное выделение */
}
.td-home .work .body{
  color: #B9C8B6 !important;      /* было 6.01 — оставляем, но унифицируем */
}
.td-home .work .wbadge{
  color: var(--sage2) !important;
}
.td-home .work .wbadge i{
  background: var(--sage) !important;
}
/* Кнопки на тёмном фоне: обводка светлая, заливка — светлая */
.td-home .work .btn-o{
  background: transparent !important;
  color: var(--paper) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.td-home .work .btn-o:hover{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: var(--paper) !important;
}
.td-home .work .btn-p{
  background: var(--paper) !important;
  color: var(--green2) !important;
  border-color: var(--paper) !important;
}
.td-home .work .btn-p:hover{
  background: #fff !important;
  color: var(--green2) !important;
}
/* Иллюстрация в блоке — линии светлые, иначе тонут на тёмном фоне */
.td-home .work .work-ph svg g{
  stroke: rgba(203,218,198,.75) !important;
}
.td-home .work .work-ph svg circle{
  fill: var(--sage2) !important;
}
.td-home .work .work-ph svg rect{
  fill: rgba(203,218,198,.45) !important;
}

/* Финальный CTA — он тоже на тёмном фоне, те же правки */
.td-home .fin{
  background: var(--green2) !important;
}
.td-home .fin .k,
.td-home .fin p.k,
.td-home .fin .k.rv{
  color: #B0C7AC !important;
}
.td-home .fin h2{
  color: var(--paper) !important;
}
.td-home .fin h2 em{
  color: #B0C7AC !important;
}
.td-home .fin .sub{
  color: #B9C8B6 !important;
}

/* --- 2. Шапка: белый блок на тёплом фоне страницы ---
   Storefront задаёт .site-header белым. На главной шапка должна быть
   того же тона, что страница, иначе под hero видна полоса. */
body.home .site-header,
body.home header.site-header{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}
body.home .site-header .col-full{
  background: var(--paper) !important;
}

/* --- 3. FAQ: карточка вопроса светлее секции, где секция тоже светлая ---
   Получается «кнопка» без границы. Убираем контраст между .qa и .a:
   делаем всю карточку одного тона и разделяем вопросы тонкой линией. */
.td-home .faq .qa{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}
.td-home .faq .qa > button{
  background: var(--card) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.td-home .faq .qa > button:hover,
.td-home .faq .qa.open > button{
  background: var(--paper2) !important;
}
.td-home .faq .qa .a{
  background: var(--card) !important;
}

/* --- 4. Карточка товара: фото и текст разных тонов ---
   .card-ph был на #ECEAE0, тело — прозрачное (то есть #FBFAF4).
   Стык читался как разрез пополам. Делаем тело тем же тоном, что фото. */
.td-home .card-ph{
  background: var(--paper2) !important;
}
.td-home .card-ph .ph{
  background: var(--paper2) !important;
}
.td-home .card-b{
  background: var(--paper2) !important;
}
.td-home .card{
  background: var(--paper2) !important;
}

/* ================================================================
   ФИНАЛЬНЫЙ CTA: заголовок перебивался стилями темы
   ================================================================ */
.td-home .fin h2,
.td-home .fin h2.rv,
.td-home .fin .rv h2,
.td-home #fin h2,
.td-home .site-content .fin h2,
.td-home .site-content #fin h2{
  color: #F4F2EA !important;
  text-shadow:none !important;
}
.td-home .fin h2 em,
.td-home .fin h2 em.rv,
.td-home .fin .rv h2 em{
  color: #B0C7AC !important;
}

/* ================================================================
   Кнопки на тёмном фоне финального CTA
   ================================================================ */
.td-home .fin .btn-o,
.td-home .fin a.btn-o,
.td-home .fin .hero-cta .btn-o{
  background: transparent !important;
  color: #F4F2EA !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  text-decoration:none !important;
}
.td-home .fin .btn-o:hover,
.td-home .fin a.btn-o:hover{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: #F4F2EA !important;
}
.td-home .fin .btn-p,
.td-home .fin a.btn-p,
.td-home .fin .hero-cta .btn-p{
  background: #F4F2EA !important;
  color: #2E4437 !important;
  border: 1px solid #F4F2EA !important;
  text-decoration:none !important;
}
.td-home .fin .btn-p:hover{
  background: #fff !important;
  color: #2E4437 !important;
}

/* ================================================================
   ШАГИ ДОСТАВКИ: текст упирался в рамку
   ================================================================
   В прототипе у .step горизонтальный внутренний отступ нулевой
   (padding: 20px 0 0) — карточка рисовалась без рамки, и это
   выглядело нормально. В теме к шагам добавилась рамка 2px, и текст
   оказался вплотную к её краю: на мобильном в двух колонках это
   выглядело как текст, вылезающий за карточку.

   Лечим нормальным внутренним отступом и более тонкой рамкой.
   Колонки на мобильном делаем в одну — шаги читаются лучше
   по порядку, а не в два узких столбца. */
.td-home .step{
  padding: 22px 20px 24px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.td-home .step h3{
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  margin: 0 0 .4em !important;
  overflow-wrap: anywhere;
}
.td-home .step p{
  font-size: .92rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}
.td-home .step b{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  margin-bottom: .35em;
}

/* Мобильный: шаги в одну колонку — так текст не рвётся
   и карточки не выглядят обрезанными */
@media (max-width: 767px){
  .td-home .steps{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .td-home .step{ padding: 18px 18px 20px !important; }
}

/* ================================================================
   ШАГИ: одна колонка на мобильном
   ================================================================
   Предыдущее правило не применилось — более позднее правило темы
   перебивало grid. Ставим в конец файла.
   В две колонки на 360px шаги не читаются: слова рвутся посередине. */
@media (max-width: 767px){
  .td-home #delivery .steps,
  .td-home .steps,
  body.home .td-home .steps{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .td-home .step h3{
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
  }
}

/* ================================================================
   БЛОК ОПЛАТЫ НА ОФОРМЛЕНИИ — СКРЫТ
   ================================================================
   У магазина только предоплата: покупатель переводит деньги сам по
   реквизитам, которые мы присылаем после звонка. Выбора способа
   оплаты на сайте нет.

   Фильтр woocommerce_checkout_show_payment в WooCommerce 11 работает
   (возвращает false), но блочный рендер всё равно печатает разметку —
   поэтому прячем визуально. Способ оплаты технически остаётся
   включённым: без него checkout не даст оформить заказ. */
#payment,
.woocommerce-checkout-payment{
  display: none !important;
}

/* ================================================================
   ЦИФРЫ В ЗАГОЛОВКАХ: читаемость на телефоне
   ================================================================
   Bodoni Moda — антиква с очень тонкими штрихами. На телефоне при
   весе 500 цифры теряются: «100» читается как «1ОО», а в «Шаг 03»
   сливаются ноль и тройка. Проблема именно в штрихах, а не в размере.

   В блоках, где цифры несут смысл (статистика, номера шагов), ставим
   шрифт основного текста — Golos Text, где цифры чёткие и читаются
   на любом размере. Крупная статистика остаётся Bodoni, но с более
   плотным начертанием и без курсива.
*/

/* Крупная статистика: оставляем Bodoni, но плотнее и без курсива */
.td-home .stats b{
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
/* Номера шагов: разрядка, чтобы цифры не слипались */
.td-home .step b{
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  font-size: 0.8rem !important;
}

/* Цифры внутри крупных заголовков (например «Около 100 видов») */
.td-home .h2,
.td-home .hero h1,
.td-home .fin h2{
  font-variant-numeric: lining-nums tabular-nums !important;
  -webkit-font-smoothing: antialiased;
}

/* Цены и прочие числа в карточках — тоже читаемее */
.td-home .card .price,
.td-home .wc-block-components-totals-item__value,
.woocommerce div.product .price{
  font-variant-numeric: lining-nums tabular-nums !important;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   ЦИФРЫ В КРУПНЫХ ЗАГОЛОВКАХ — читаемость
   ================================================================
   В заголовке «Около 100 видов» цифры Bodoni Moda остаются мыльными
   даже на 50px: тонкие штрихи «1» и «00» сливаются. Оборачиваем цифры
   в заголовках в <span class="num"> (функция в functions.php) и даём им
   шрифт основного текста — Golos Text, где цифры чёткие.
   Размер сохраняется, визуально ровно, но штрихи читаемые.
*/
.td-home .h2 .num,
.td-home .hero h1 .num,
.td-home .fin h2 .num{
  /* Цифры — той же гарнитуры и того же веса, что окружающий текст:
     при весе 700 они читались как вставка чужого начертания.
     Читаемость даём не весом, а тонким утолщением штриха — визуально
     почти незаметно, но на экранах с низкой плотностью пикселей цифры
     не рассыпаются. */
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  /* lining-nums вместо tabular: tabular растягивает знаки одинаково и
     из-за этого плюс в «100+» схлопывался в тонкую чёрточку. */
  font-variant-numeric: lining-nums;
  letter-spacing: inherit;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0 0.4px currentColor;
}

/* Плюс в «100+» — Bodoni рисует его тонким и низким, поэтому
   увеличиваем и слегка утолщаем отдельно от цифр. */
/* Плюс в «100+».
   У Bodoni знак «+» нарисован двумя очень тонкими штрихами, и на телефоне
   вертикальная черта проседает до еле заметной. Поэтому рисуем плюс
   рамкой: толщина и контраст не зависят от того, как шрифт отрисовал
   знак, и он читается на любом фоне. */
.td-home .stats b .plus,
.td-home .num .plus{
  --plus-color: var(--green);
  position: relative;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  vertical-align: 0.02em;
  margin-left: 0.04em;
  font-size: 1em;
  text-indent: -9999px;
  overflow: hidden;
}
.td-home .stats b .plus::before,
.td-home .num .plus::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--plus-color);
}
.td-home .stats b .plus::after,
.td-home .num .plus::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--plus-color);
}

/* У Bodoni плюс — два тонких штриха, на телефоне вертикальный
     проседает до еле заметного. Рисуем плюс целиком рамкой (border),
     а текстовый глиф скрываем: так знак всегда одинаково контрастный
     и не зависит от того, как шрифт нарисовал плюс. */
  color: transparent;
  position: relative;
  width: 0.52em;
  height: 0.52em;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: baseline;
}
.td-home .stats b .plus::before,
.td-home .num .plus::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  box-shadow: 0 0 0 0.4px currentColor;
}
/* currentColor у прозрачного текста не сработал бы — задаём цвет явно */
.td-home .stats b .plus,
.td-home .num .plus{
  --plus-color: var(--green);
}
.td-home .stats b .plus::before,
.td-home .num .plus::before{
  background: var(--plus-color);
  box-shadow: 0 0 0 0.4px var(--plus-color);
}

/* Крупная статистика — вес как у остального текста (500) */
.td-home .stats b{
  font-family: var(--disp) !important;
  font-weight: 500 !important;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0 0.4px currentColor;
}

/* ================================================================
   ФОН И ШИРИНА НА ДЕСКТОПЕ
   ================================================================
   html намеренно не красим: если у body или .site не покрыта вся
   высота страницы, полосы по краям рисует канвас браузера — он
   белый. Задаём фон на html и растягиваем колонку на всю ширину,
   иначе на широких мониторах по краям появляются белые поля. */
html{
  background: var(--paper) !important;
  -webkit-text-size-adjust: 100%;
}
body.home .site,
body.home #content,
body.home .site-content,
body.home .td-home{
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Контентная колонка: фиксированная ширина, но не шире экрана */
@media (min-width: 768px){
  .td-home .wrap{
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================================================
   МЕНЮ В ШАПКЕ: первый пункт уходил за левый край
   ================================================================
   Storefront задаёт .main-navigation ul отрицательный margin-left:-16px
   (он же ставит padding-left:28px у .col-full — в сумме получалось -16).
   Из-за этого первый пункт «Главная» оказывался за пределами экрана
   и строка меню выглядела «разъехавшейся».

   Сбрасываем отрицательный отступ и выравниваем по той же колонке,
   что и остальная страница (1280px с полями). */
.main-navigation ul,
.main-navigation ul.nav-menu,
.primary-navigation ul{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}
/* Колонка навигации — как у контента, а не во всю ширину экрана */
.storefront-primary-navigation .col-full{
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.main-navigation > ul{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
}
.main-navigation > ul > li > a{
  display: inline-block;
  padding: 12px 0 !important;
  white-space: nowrap;
}

/* ================================================================
   ШАПКА: логотип, поиск и корзина по краям колонки
   ================================================================
   Я сузил .storefront-primary-navigation .col-full до 1280px, а .col-full
   в самой шапке остался растянут на всю ширину экрана. Storefront
   позиционирует логотип, поиск и корзину флоатами внутри этого контейнера,
   поэтому они прижались к краям экрана (поиск уехал на x=1491 при
   ширине экрана 1920) и визуально оторвались от меню и контента.

   Задаём шапке ту же колонку, что и у остальной страницы. */
body.home .site-header .col-full,
body.home .site-header > .col-full{
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
/* Storefront задаёт шапке ширины в процентах, и на разных страницах
   они считаются по-разному: на главной логотип занимал 236px, на
   каталоге — 946px. Из-за этого при переходе между страницами
   «Меню», поиск и корзина прыгали, а строка шапки меняла высоту
   на пиксель.

   Фиксируем одинаковую раскладку на ВСЕХ страницах: логотип слева,
   поиск справа фиксированной ширины, корзина под ним. */
@media (min-width: 992px){
  .site-header .site-branding{
    width: auto !important;
    float: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: none !important;
  }
  .site-header .site-search{
    width: 240px !important;
    float: right !important;
    margin-left: 20px !important;
    margin-right: 0 !important;
    clear: none !important;
  }
  .site-header .site-header-cart{
    width: auto !important;
    float: right !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Ровно один ряд по высоте: блоки поиска и корзины не добавляют
   разную высоту на разных страницах. */
.site-header .site-search,
.site-header .site-header-cart{ margin-bottom: 0 !important; }

/* ================================================================
   ШАПКА НА МОБИЛЬНОМ — не наследует десктопную ширину колонки
   ================================================================
   Правила выше задают .site-header .col-full шириной 1280px.
   На узких экранах колонка должна снова стать по ширине окна,
   иначе шапка вылезает и ломает мобильную вёрстку. */
@media (max-width: 991px){
  body.home .site-header .col-full,
  body.home .site-header > .col-full{
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: block !important;
  }
  body.home .site-header .site-branding{ width: auto !important; float: none !important; }
  body.home .site-header .site-search{ display: none !important; }
  /* Логотип и кнопка «Меню» — один ряд, как было раньше */
  body.home .site-header .site-branding{ grid-column:1; grid-row:1; }
  body.home .storefront-primary-navigation{ grid-column:1; grid-row:2; }
}

/* ================================================================
   ЕДИНАЯ КОЛОНКА: логотип, меню и текст по одной линии
   ================================================================
   Storefront задаёт .col-full шириной 66.5em ≈ 1064px — это ширина
   контентной колонки и шапки. Навигацию мы растянули на 1280px, из-за
   чего меню начиналось на 108px левее заголовков на страницах
   (на главной совпадало только потому, что там своя .wrap на 1280).

   Расхождение было видно только на внутренних страницах — на главной
   и в каталоге колонки случайно совпадали.

   Решение: приводим .col-full к той же 1280px, что и навигация,
   и на главной, и на всех страницах. */
.storefront-primary-navigation .col-full,
body .col-full{
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
/* Главная: её .wrap уже 1280px — синхронизируем отступы */
body.home .td-home .wrap{
  max-width: 1280px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
@media (max-width: 767px){
  body .col-full,
  body.home .td-home .wrap{
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ================================================================
   ГЛАВНАЯ: двойной отступ складывался
   ================================================================
   Секции главной кладут контент в .wrap, у которого есть свой
   padding 28px. Внутри него лежит колонка Storefront — у неё тоже
   28px. В итоге текст смещался на 28px правее логотипа и меню.
   Убираем отступ у внешней обёртки — он есть у внутреннего .wrap. */
body.home #content,
body.home .site-content,
body.home #content > .col-full,
body.home .td-home{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================================================================
   ГЛАВНАЯ: текст уходил на 28px правее логотипа и меню
   ================================================================
   В шапке отступ даёт колонка Storefront (padding 28px), а на главной
   секции кладут контент ещё и в .wrap со своим padding 28px — два
   отступа складывались. Убираем отступ у .wrap: внешняя колонка
   его уже даёт. На мобильном 18px берёт колонка — .wrap не добавляет
   ничего лишнего.

   Итог: логотип, меню и заголовки секций на одной линии на всех
   страницах. */
body.home .td-home .wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================================================================
   ГЛАВНАЯ: единая линия слева
   ================================================================
   Отступ на главной даёт .wrap внутри секций, а не колонка Storefront.
   Поэтому у внешней обёртки (body.home #content > .col-full) отступ
   убираем, а .wrap возвращаем. Так текст секций попадает ровно на
   линию логотипа и меню.
   Правка в предыдущем блоке убрала отступ у .wrap — из-за этого
   заголовок прижался к краю экрана (x=0). */
body.home #content,
body.home .site-content,
body.home #content > .col-full,
body.home .td-home{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.home .td-home .wrap{
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
@media (max-width: 767px){
  body.home .td-home .wrap{
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ================================================================
   ШАПКА НА МОБИЛЬНОМ — ВСЕ СТРАНИЦЫ
   ================================================================
   home-sections.css подключается только на главной, поэтому мобильные
   правки шапки из него работали лишь на ней. На остальных страницах
   оставались стили Storefront: колонка логотипа сжималась до 204px
   (а на главной была 324px), и описание «Атмосферные растения —
   тилландсии» переносилось на три строки, сдвигая кнопку «Меню»
   вниз. Повторяем раскладку здесь — файл подключается всегда. */
@media (max-width: 991px){
  .site-header .col-full{
    display:block !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: left !important;
  }
  /* Логотип и подпись занимают всю ширину, кнопка — под ними */
  .site-header .site-branding{
    float:none !important;
    width:100% !important;
    margin:0 0 12px !important;
    clear:both !important;
    text-align:left !important;
  }
  .site-header .site-title{
    display:block !important;
    font-size:1.35rem !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0 0 4px !important;
  }
  .site-header .site-description{
    display:block !important;
    font-size:.78rem !important;
    line-height:1.35;
    color:var(--muted) !important;
    margin:0 !important;
  }
  .site-header .site-search{ display:none !important; }

  .storefront-primary-navigation{
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Отступ 18px обязателен: обнулив его, кнопка «Меню» и пункты
     раскрытого меню прижимались к краю экрана (x=0) вместо x=18. */
  .storefront-primary-navigation .col-full{
    max-width:none !important;
    padding:0 18px !important;
    margin:0 !important;
  }
  /* Кнопка «Меню» — в палетке, без чёрной рамки Storefront.
     Иконку-бургер рисует тема через псевдоэлементы с position:absolute
     и right:1em, поэтому гасим их и собираем кнопку заново. */
  button.menu-toggle,
  .site-header button.menu-toggle{
    float:none !important;
    position:relative !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    width:auto !important;
    max-width:none !important;
    min-width:0;
    height:auto !important;
    min-height:40px;
    padding:.55rem 1.1rem !important;
    margin:0 !important;
    background:var(--card) !important;
    border:1px solid var(--line2) !important;
    border-radius:999px !important;
    color:var(--ink) !important;
    box-shadow:none !important;
    font-family:var(--body) !important;
    font-size:.92rem !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    overflow:visible;
    -webkit-appearance:none;
    appearance:none;
  }
  button.menu-toggle:hover,
  button.menu-toggle:focus{
    background:var(--paper2) !important;
    border-color:var(--sage) !important;
  }
  button.menu-toggle::before,
  button.menu-toggle::after,
  button.menu-toggle span::before,
  button.menu-toggle span::after{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
    transform:none !important;
    position:static !important;
  }
  /* Надпись «Меню» — обычным текстом.
     Раньше рисовали иконку-бургер средствами самого span, но тогда
     слово «Меню» выдавливалось за пределы узкого блока и превращалось
     в чёрное пятно. Бургер здесь не нужен — слово само читается. */
  button.menu-toggle span{
    position:static !important;
    display:inline !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    text-indent:0 !important;
    overflow:visible;
    flex:0 0 auto;
    color:var(--ink);
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
  }
}

/* ================================================================
   НИЖНЯЯ ПАНЕЛЬ НА МОБИЛЬНОМ (handheld)
   ================================================================
   Storefront рисует значок корзины фоном у .footer-cart-contents,
   а счётчик .count позиционирует абсолютно. Без правок бейдж с «0»
   уезжал вправо за пределы ячейки (180px) и ложился поверх значка —
   получалось «0 товаров» поверх иконки.

   Задаём панели явную раскладку: значок слева, подпись счётчика
   рядом с ним, всё внутри своих границ. */
.storefront-handheld-footer-bar ul{
  display: flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
}
.storefront-handheld-footer-bar ul > li{
  flex: 1 1 50% !important;
  width: auto !important;
  max-width: 50% !important;
  min-width: 0 !important;
  float: none !important;
}
.storefront-handheld-footer-bar ul > li > a,
.storefront-handheld-footer-bar .footer-cart-contents{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: relative !important;
  padding: 0 .6rem !important;
  overflow: visible;
  white-space: nowrap;
}
/* Иконка корзины: задаём свой размер вместо фоновой картинки темы,
   чтобы её нельзя было разъехать по клетке */
.storefront-handheld-footer-bar .footer-cart-contents::before{
  content: "" !important;
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: none !important;
  border: 2px solid var(--ink);
  border-radius: 3px;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0;
}
/* Счётчик — обычный текст рядом с иконкой, а не бейдж поверх неё */
.storefront-handheld-footer-bar .footer-cart-contents .count{
  position: static !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  color: var(--muted) !important;
  transform: none !important;
}
/* Подпись «Корзина» и счётчик на мобильном скрыты — оставляем
   только значок. Шрифт задаём обычный, чтобы иконка не смещалась. */
.storefront-handheld-footer-bar .footer-cart-contents{
  font-size: .8rem !important;
}
/* Поиск в нижней панели: на узком экране поле не помещается,
   оставляем только значок-ссылку на страницу поиска. */
.storefront-handheld-footer-bar ul > li.search > a{
  padding: 0 .4rem !important;
}
.storefront-handheld-footer-bar .site-search{
  display: block;
  width: auto !important;
  float: none !important;
}
.storefront-handheld-footer-bar .site-search .search-field{
  width: 100% !important;
  font-size: .8rem !important;
  padding: .5rem .6rem !important;
  background: var(--card) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 999px !important;
}
/* Кнопка отправки поиска прячем — на узком экране только мешает */
.storefront-handheld-footer-bar .site-search button[type="submit"]{
  display: none !important;
}

/* Пункты раскрытого мобильного меню — по размеру основного текста.
   Без этого наследуется кегль из кнопки/темы и меню выглядит
   заметно крупнее остального интерфейса. */
@media (max-width: 991px){
  .handheld-navigation ul.menu li > a,
  .handheld-navigation ul.nav-menu li > a{
    display:block !important;
    width:100% !important;
    padding:.7rem 0 !important;
    font-family:var(--body) !important;
    font-size:1rem !important;
    font-weight:400 !important;
    line-height:1.4 !important;
    color:var(--ink) !important;
    text-decoration:none !important;
    border-bottom:1px solid var(--line) !important;
  }
  .handheld-navigation ul.menu li > a:hover{
    color:var(--green) !important;
  }
  .handheld-navigation ul.menu{
    border-top:1px solid var(--line) !important;
    margin-top:10px !important;
  }
}

/* ================================================================
   МОБИЛЬНАЯ ШАПКА: рамка и значок корзины
   ================================================================
   Storefocus рисует вокруг кнопки «Меню» фиолетовую рамку в
   состоянии :focus-visible (его акцентный цвет). Убираем — кнопка
   должна быть в палитре при любом состоянии. */
@media (max-width: 991px){
  button.menu-toggle,
  button.menu-toggle:hover,
  button.menu-toggle:focus,
  button.menu-toggle:focus-visible,
  button.menu-toggle:active{
    outline:none !important;
    box-shadow:none !important;
    border:1px solid var(--line2) !important;
  }
  button.menu-toggle:focus-visible{
    border-color:var(--sage) !important;
  }
}

/* Значок корзины в нижней панели: Storefront рисует его рамкой у
   ::before, но задаёт ему background-image из своих иконок. Если её
   не сбросить, рамка остаётся, а внутрь ничего не попадает — виден
   пустой квадрат. Рисуем корзину целиком через clip-path/маску. */
.storefront-handheld-footer-bar .footer-cart-contents::before{
  content:"" !important;
  display:block !important;
  flex:0 0 24px;
  width:24px;
  height:24px;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  position:relative !important;
  margin:0 !important;
  /* Корзина: ковш + ручка + две колёси */
  background-color:var(--ink) !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0'  fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0'  fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
/* Значок поиска в той же панели — в палетке */
.storefront-handheld-footer-bar .site-search::before,
.storefront-handheld-footer-bar .site-search::after{
  background-color:var(--ink) !important;
}

/* ================================================================
   НИЖНЯЯ ПАНЕЛЬ: счётчик убираем полностью
   ================================================================
   Раньше счётчик был бейджем поверх иконки, потом — подписью рядом.
   И то и другое мешало: цифра уезжала на значок либо висела под ним.
   На мобильном оставляем чистую иконку корзины — без цифр.
   Счётчик виден на десктопе в шапке, там где для него есть место. */
@media (max-width: 991px){
  .storefront-handheld-footer-bar .footer-cart-contents .count,
  .storefront-handheld-footer-bar .count{
    display:none !important;
  }
  /* Панель не должна перекрывать контент страницы */
  .storefront-handheld-footer-bar{
    background:var(--card) !important;
    border-top:1px solid var(--line) !important;
  }
  body.storefront-handheld-footer-bar-fixed-content{
    padding-bottom:0 !important;
  }
}

/* ================================================================
   ЗАГОЛОВКИ: БУКВЫ НАЕЗЖАЛИ ДРУГ НА ДРУГА
   ================================================================
   Storefront задаёт заголовкам отрицательный letter-spacing
   (-0.01em и плотнее). На Bodoni Moda с его высокой контрастностью
   это выглядит как слипшиеся буквы — на скриншоте «Доставка»
   читалась с наездом. Для дисплейного шрифта интервал должен быть
   нулевым или слегка положительным. */
.page-title,
.page-title a,
h1, h2, h3, h4,
.widget h1, .widget h2, .widget h3,
.woocommerce div.product h1,
.woocommerce div.product h2,
.entry-title,
.archive-title{
  letter-spacing: 0 !important;
}

/* ================================================================
   ДЕСКТОП 1: СДВИГ НА НЕСКОЛЬКО МИЛЛИМЕТРОВ ПРИ ПЕРЕХОДЕ
   ================================================================
   На главной и в каталоге страница длиннее экрана — браузер
   показывает вертикальный скроллбар шириной 15px. На коротких
   страницах (доставка, статьи, контакты) скроллбара нет.

   Колонки центрированы, поэтому при появлении скроллбара они
   сдвигаются на (2545-2560)/2 = 7.5px — это и есть заметный
   «сдвиг на несколько миллиметров» при клике по меню.

   scrollbar-gutter: stable резервирует место под скроллбар
   ВСЕГДА, независимо от длины страницы. Ширина области становится
   постоянной, и шапка не прыгает. */
html{
  scrollbar-gutter: stable !important;
}

/* ================================================================
   ДЕСКТОП 2: «0 товаров» НАЕЗЖАЕТ НА ЗНАЧОК КОРЗИНЫ
   ================================================================
   В шапке Storefront рисует значок корзины фоном/псевдоэлементом
   у .cart-contents, а подпись «0 товаров» идёт следом и накрывает
   его. На кадрах видео это видно как «0 товаров» поверх иконки.

   Перестраиваем: значок — свой, слева; сумма и счётчик — справа
   от него, в потоке, каждый на своей строке по месту. */
@media (min-width: 992px){
  .site-header-cart{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }
  .site-header-cart .cart-contents{
    position: relative !important;
    display: flex !important;
    align-items: center;
    gap: .55rem;
    width: auto !important;
    max-width: none !important;
    padding-left: 34px !important; /* место под наш значок */
    padding-right: 0 !important;
    white-space: nowrap;
  }
  /* Наш значок корзины — отдельным элементом, не поверх текста */
  .site-header-cart .cart-contents::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:26px;
    height:26px;
    background-color:var(--ink) !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    margin:0 !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important; mask-position:center !important;
    -webkit-mask-size:contain !important; mask-size:contain !important;
  }
  /* Подпись счётчика — отдельным блоком, чтобы не липла к иконке */
  .site-header-cart .cart-contents .count{
    position: static !important;
    display: block !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    color: var(--muted) !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
  }
  .site-header-cart .cart-contents .woocommerce-Price-amount{
    font-size: .9rem !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
  }
}

/* ================================================================
   МОБИЛЬНАЯ: КОРЗИНА УПЛЫЛА ВВЕРХ ИЗ НИЖНЕЙ ПАНЕЛИ
   ================================================================
   Значок вставал выше своей ячейки и наползал на контент страницы.
   Панель ниже — фиксированная, а её ячейки растягивались по высоте
   всего экрана, из-за чего flex-центрирование уводило значок вверх.

   Фиксируем высоту панели и центрируем содержимое внутри, а не
   внутри всей высоты экрана. */
@media (max-width: 991px){
  .storefront-handheld-footer-bar{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 1000;
  }
  .storefront-handheld-footer-bar ul{
    height: 56px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .storefront-handheld-footer-bar ul > li{
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .storefront-handheld-footer-bar ul > li > a,
  .storefront-handheld-footer-bar .footer-cart-contents{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 .5rem !important;
  }
  .storefront-handheld-footer-bar .site-search{ height: 40px !important; }
  .storefront-handheld-footer-bar .site-search .search-field{
    height: 40px !important;
    line-height: normal !important;
  }
}

/* Storefront рисует значок корзины ДВАЖДЫ: ::before — картинкой,
   ::after — глифом шрифта (\uf291, «корзина» из иконочного набора
   Storefront). Наш значок в ::before, поэтому глиф из ::after
   убираем — иначе у блока два значка и подпись «0 товаров»
   оказывается между ними. */
@media (min-width: 992px){
  .site-header-cart .cart-contents::after{
    content:none !important;
    display:none !important;
  }
}

/* ================================================================
   ГАРНИТУРА: НА ГЛАВНОЙ МЕНЮ БЫЛО МЕЛЧЕЕ
   ================================================================
   WordPress подключает родительский storefront/style.css ПОСЛЕ
   дочерней tilladom/style.css. В нём есть
       body, button, input, textarea { font-family: "Source Sans Pro" }
   Одинаковая специфичность, ноStorefront позже в каскаде — поэтому
   на главной (где подключён home-sections.css с body{var(--body)},
   но до Storefront) гарнитура уезжала в Source Sans Pro, а на
   остальных страницах оставалась Golos Text. Из-за разной гарнитуры
   один и тот же кегль 15px давал разную ширину слов: «Главная»
   83px против 89px — отсюда «разный размер шрифта в меню».

   Принудительно закрепляем гарнитуру за дочерней темой. */
body,
button,
input,
select,
textarea,
.site-header,
.site-header .main-navigation,
.site-header .primary-navigation,
.site-header .primary-navigation ul,
.site-header .primary-navigation li,
.site-header .primary-navigation li a,
.primary-navigation a,
.handheld-navigation ul.menu li > a{
  font-family: var(--body) !important;
}

/* ================================================================
   ПОЛЕ ПОИСКА: ФОН ОТЛИЧАЛСЯ НА ГЛАВНОЙ
   ================================================================
   На остальных страницах поле было бежевым (var(--card) #fbfaf4),
   а на главной — серым rgb(242,242,242). Там подключается
   home-sections.css, и в каскад попадает правило Storefront с
   жёстким цветом, которое перебивало наш var(--card).

   Storefront грузится ПОСЛЕ дочерней темы, поэтому закрепляем
   фон и рамку поля поиска явно — и в шапке, и в нижней панели. */
.site-header input[type="search"],
.site-header input.search-field,
.storefront-handheld-footer-bar input[type="search"],
.storefront-handheld-footer-bar input.search-field,
input[type="search"].search-field,
input.search-field{
  background: var(--card) !important;
  background-color: var(--card) !important;
  border: 1px solid var(--line2) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
}
/* Плейсхолдер — приглушённый, иначе он темнее введённого текста */
.site-header input[type="search"]::placeholder,
.storefront-handheld-footer-bar input[type="search"]::placeholder,
input.search-field::placeholder{
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* ================================================================
   НИЖНЯЯ ПАНЕЛЬ — ПЕРЕДЕЛАНА ЦЕЛИКОМ
   ================================================================
   Было неаккуратно: ячейка поиска схлопнута до 14px, текст «Поиск»
   сплющен и поверх него Storefront рисует лупу шрифтом (поэтому
   значок был огромным и разного уровня с корзиной). У обеих
   ссылок белый фон от Storefront — корзина стояла на белом
   квадрате. Плюс на телефоне поле поиска занимало всю ширину.

   Делаем две равные ячейки, в каждой — только значок одного
   размера и веса, без текста и без белого фона. Панель ниже 56px
   и не перекрывает контент: body получает соответствующий отступ. */
@media (max-width: 991px){
  .storefront-handheld-footer-bar{
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--card) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -1px 12px rgba(0,0,0,.05) !important;
    overflow: hidden !important;
    z-index: 1000;
  }
  .storefront-handheld-footer-bar ul{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .storefront-handheld-footer-bar ul > li{
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    height: 52px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Ссылки: прозрачные, без белого фона Storefront */
  .storefront-handheld-footer-bar ul > li > a,
  .storefront-handheld-footer-bar .footer-cart-contents{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 0 !important; /* весь текст внутри — в ноль */
    overflow: visible !important;
  }
  /* Поле поиска убираем: на телефоне оно занимает всю ширину
     панели. Поиск остаётся в шапке и на странице каталога. */
  .storefront-handheld-footer-bar .site-search,
  .storefront-handheld-footer-bar .widget,
  .storefront-handheld-footer-bar form,
  .storefront-handheld-footer-bar input[type="search"],
  .storefront-handheld-footer-bar button[type="submit"],
  .storefront-handheld-footer-bar .screen-reader-text{
    display: none !important;
  }

  /* ---- значок поиска (вместо сплющенного текста «Поиск») ---- */
  .storefront-handheld-footer-bar li.search > a::before{
    content:"" !important;
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    background-color: var(--ink) !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important; mask-position:center !important;
    -webkit-mask-size:contain !important; mask-size:contain !important;
    transform: none !important;
    position: static !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  .storefront-handheld-footer-bar li.search > a::after,
  .storefront-handheld-footer-bar li.search > a span{
    content:none !important;
    display:none !important;
  }

  /* ---- значок корзины: тот же размер и уровень ---- */
  .storefront-handheld-footer-bar .footer-cart-contents::before{
    content:"" !important;
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    background-color: var(--ink) !important;
    background-image: none !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 10.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Zm3-2.5a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.5'/%3E%3Ccircle cx='16' cy='21' r='1.5'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important; mask-position:center !important;
    -webkit-mask-size:contain !important; mask-size:contain !important;
    transform: none !important;
    position: static !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    flex: 0 0 21px !important;
  }
  .storefront-handheld-footer-bar .footer-cart-contents::after,
  .storefront-handheld-footer-bar .footer-cart-contents .count,
  .storefront-handheld-footer-bar .footer-cart-contents span{
    content:none !important;
    display:none !important;
  }

  /* Контент не должен уезжать под панель */
  body{
  }
}

/* ================================================================
   ШТАТНУЮ НИЖНЮЮ ПАНЕЛЬ STOREFRONT СКРЫВАЕМ
   ================================================================
   Она показывает только значок корзины и счётчик, без суммы.
   Вместо неё functions.php выводит .td-mcart с кнопкой
   «сумма + количество». */
.storefront-handheld-footer-bar{ display:none !important; }

/* ================================================================
   НИЖНЯЯ КНОПКА «СУММА + КОЛИЧЕСТВО» — ТОЛЬКО НА МОБИЛЬНОМ
   ================================================================
   Никаких пиктограмм и поля поиска: панель содержит одну кнопку
   входа в корзину. Вид повторяет кнопку «Выбрать растение» на
   главной (зелёный #3E5C48, скругление 10px, вес 600), но
   содержимое другое — сумма и количество.

   На десктопе корзина живёт в шапке, поэтому панель тут лишняя. */
@media (max-width: 991px){
  /* ================================================================
     НОВАЯ НИЖНЯЯ ПАНЕЛЬ: КНОПКА «СУММА + КОЛИЧЕСТВО»
     ================================================================
     Никаких пиктограмм и поля поиска: панель содержит одну кнопку
     входа в корзину. Вид повторяет кнопку «Выбрать растение» на
     главной (тот же зелёный #3E5C48, скругление 10px, кегль и
     насыщенность веса) — только содержимое другое: сумма и
     количество, без пиктограмм. */
  .td-mcart{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--paper) 62%, rgba(244,242,234,0));
    pointer-events: none;
  }
  .td-mcart__btn{
    pointer-events: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    min-height: 56px;
    padding: 16px 28px;
    background: var(--green);
    color: var(--cream);
    border: 0 !important;
    border-radius: 10px;
    box-shadow: none;
    text-decoration: none !important;
    font-family: var(--body) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s ease, transform .15s ease;
  }
  .td-mcart__btn:hover,
  .td-mcart__btn:focus{
    background: var(--green2);
    color: var(--cream);
    transform: translateY(-1px);
  }
  /* Сумма и количество — одного начертания, как у кнопок на сайте */
  .td-mcart__sum,
  .td-mcart__count{
    font-family: var(--body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cream) !important;
    white-space: nowrap;
    letter-spacing: normal;
  }
  /* Разделитель — тонкая линия в тон фону, не спорит с текстом */
  .td-mcart__sep{
    display: block;
    width: 1px;
    height: 20px;
    flex: 0 0 1px;
    background: rgba(255,255,255,.4);
  }
  /* Контент не должен уезжать под панель */
  body{
    padding-bottom: 88px !important;
  }
}

/* ================================================================
   КНОПКА КОРЗИНЫ: МЕЛЬЧЕ ГЛАВНОЙ КНОПКИ
   ================================================================
   Раньше она попадала в один ряд с кнопкой «Выбрать растение» и
   выглядела с ней как близнец: тот же зелёный, та же высота, тот же
   вес. Рядом они спорят — обе крупные, обе «главные».
   Уменьшаем корзину: ниже ростом, мельче шрифт, не во всю ширину,
   скругление меньше. Сумма и количество разного веса — читается
   как «цифра + подпись», а не как два равноправных заголовка. */
@media (max-width: 991px){
  .td-mcart{
    padding: 8px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .td-mcart__btn{
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    gap: 8px;
    /* Не во всю ширину: так она не соревнуется с кнопкой-героем */
    width: auto !important;
    max-width: 340px;
    margin: 0 auto;
    box-shadow: 0 1px 6px rgba(0,0,0,.10);
  }
  /* Сумма — акцент, количество — спокойная подпись */
  .td-mcart__sum{
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  .td-mcart__count{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.85) !important;
  }
  .td-mcart__sep{
    height: 15px;
    background: rgba(255,255,255,.35);
  }
  /* Контент не уезжает под кнопку */
  body{
    padding-bottom: 72px !important;
  }
}

/* ================================================================
   КНОПКА КОРЗИНЫ: ЕЩЁ КОМПАКТНЕЕ ПО ШИРИНЕ
   ================================================================
   max-width:340px не срабатывал — текст «₽8,900.00 | 3 товара»
   при 14px занимает почти всю ширину, и кнопка упиралась в него,
   оставаясь почти во всю ширину экрана. Из-за этого она вставала
   вровень с главной кнопкой «Выбрать растение» — две крупные
   зелёные плашки подряд.

   Ужимаем: фиксированная комфортная ширина, уменьшенные отступы
   и кегль. Кнопка становится заметно мельче героя и не спорит с ним. */
@media (max-width: 991px){
  .td-mcart{
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .td-mcart__btn{
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    gap: 7px;
    width: auto !important;
    min-width: 0;
    max-width: min(300px, calc(100vw - 40px));
    margin: 0 auto;
    box-shadow: 0 1px 5px rgba(0,0,0,.09);
  }
  .td-mcart__sum{
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }
  .td-mcart__count{
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }
  .td-mcart__sep{
    height: 14px;
  }
  body{
    padding-bottom: 68px !important;
  }
}

/* ================================================================
   КОРЗИНА: КРЕСТИК, ПОЛОСА, КНОПКА «ПРОСМОТР КОРЗИНЫ»
   ================================================================ */

/* ---- 1. Крестик удаления уезжал за правый край и обрезался ----
   Storefront позиционирует .remove абсолютно и сдвигает вправо
   через padding-right, из чего кнопка выходила за ячейку, а
   overflow:hidden таблицы её срезал. Возвращаем в поток. */
.woocommerce-cart-form td.product-remove,
.woocommerce table.cart td.product-remove{
  position: relative !important;
  width: 40px !important;
  padding: 6px 8px 6px 0 !important;
  text-align: center !important;
  vertical-align: top !important;
}
.woocommerce-cart-form a.remove,
.woocommerce table.cart a.remove{
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 50%;
  background: var(--paper2) !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease;
}
.woocommerce-cart-form a.remove:hover,
.woocommerce table.cart a.remove:hover{
  background: var(--line2) !important;
  color: var(--green) !important;
}

/* ---- 2. Бежевая полоса под карточкой ----
   У td.actions был прозрачный фон, и сквозь него просвечивал
   бежевый body (rgb 244,242,234) — между карточкой и кнопкой
   «Обновить корзину» появлялась полоса другого цвета.
   Задаём всем ячейкам корзины ту же подложку, что и у товара. */
.woocommerce table.cart td,
.woocommerce table.cart th,
.woocommerce-cart-form td,
.woocommerce-cart-form th{
  background-color: transparent !important;
}
.woocommerce table.cart tr.cart_item > td,
.woocommerce-cart-form tr.cart_item > td{
  background-color: var(--card) !important;
}
.woocommerce table.cart td.actions,
.woocommerce-cart-form td.actions{
  background-color: var(--card) !important;
  padding: 12px 14px 14px !important;
}
.woocommerce table.cart tfoot td,
.woocommerce table.cart tfoot th{
  background-color: var(--paper2) !important;
}

/* ---- 3. Кнопка «Просмотр корзины» в уведомлении ----
   Стрелка — глиф в ::after. При white-space:normal она уходила на
   вторую строку, кнопка выглядела вдвое выше и уезжала за край.
   Гарантируем одну строку и уменьшаем до размеров остальных кнопок. */
.woocommerce-message,
.added_to_cart{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
}
.woocommerce-message .button,
.woocommerce-message a.button,
.added_to_cart .button,
.added_to_cart a.button,
.woocommerce-message a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  padding: 11px 18px !important;
  font-size: .9rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--green) !important;
  background: var(--green) !important;
  color: var(--cream) !important;
  text-decoration: none !important;
}
/* Стрелка рядом с текстом, не отдельной строкой */
.woocommerce-message .button::after,
.woocommerce-message a.button::after,
.added_to_cart .button::after,
.added_to_cart a.button::after{
  display: inline-block !important;
  margin-left: .5em !important;
  font-size: 1em !important;
  line-height: 1 !important;
  vertical-align: middle;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.added_to_cart .button:hover,
.added_to_cart a.button:hover{
  background: var(--green2) !important;
  border-color: var(--green2) !important;
  color: var(--cream) !important;
}

/* ================================================================
   КОРЗИНА НА МОБИЛЬНОМ: КАРТОЧКА ЦЕЛЬНОЙ
   ================================================================
   На узком экране Storefront превращает ячейки таблицы в блочные
   (shop_table_responsive). Из-за этого product-remove оставалась
   отдельной ячейкой шириной 40px, а фон был задан на ячейках —
   появлялся бежевый кусок слева, а крестик уезжал из карточки.

   Делаем карточку цельной: фон и скругление на самой строке,
   ячейки прозрачные и во всю ширину, крестик — в правом верхнем
   углу карточки, внутри её границ. */
@media (max-width: 767px){
  .woocommerce table.cart,
  .woocommerce-cart-form table.shop_table{
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
  }
  .woocommerce table.cart tbody,
  .woocommerce table.cart tr,
  .woocommerce table.cart td,
  .woocommerce-cart-form tbody,
  .woocommerce-cart-form tr,
  .woocommerce-cart-form td{
    display: block !important;
    width: 100% !important;
    background: transparent !important;
  }
  /* Карточка товара */
  .woocommerce table.cart tr.cart_item,
  .woocommerce-cart-form tr.cart_item{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 14px 14px 14px 14px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  /* Ячейки внутри карточки — без своих фонов, с отступами */
  .woocommerce table.cart tr.cart_item > td,
  .woocommerce-cart-form tr.cart_item > td{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    font-size: .95rem !important;
  }
  /* Крестик — в правом верхнем углу карточки, внутри её */
  .woocommerce table.cart td.product-remove,
  .woocommerce-cart-form td.product-remove{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    text-align: right !important;
    z-index: 2;
  }
  .woocommerce table.cart a.remove,
  .woocommerce-cart-form a.remove{
    position: static !important;
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
  }
  /* Название товара не должно залезать под крестик */
  .woocommerce table.cart td.product-name,
  .woocommerce-cart-form td.product-name{
    padding-right: 40px !important;
  }
  .woocommerce table.cart td.product-name a,
  .woocommerce-cart-form td.product-name a{
    text-decoration: none !important;
  }
  /* Миниатюра — компактная, слева от названия не наезжает */
  .woocommerce table.cart td.product-thumbnail,
  .woocommerce-cart-form td.product-thumbnail{
    width: 64px !important;
    float: left !important;
    margin: 0 12px 6px 0 !important;
    padding: 0 !important;
  }
  .woocommerce table.cart td.product-thumbnail img,
  .woocommerce-cart-form td.product-thumbnail img{
    width: 64px !important;
    height: auto !important;
    display: block !important;
  }
  /* Строка с итогами и кнопкой обновления */
  .woocommerce table.cart tfoot td,
  .woocommerce-cart-form tfoot td{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  .woocommerce table.cart td.actions,
  .woocommerce-cart-form td.actions{
    display: block !important;
    width: 100% !important;
    padding: 0 0 4px !important;
    background: transparent !important;
  }
  .woocommerce table.cart td.actions .button,
  .woocommerce-cart-form td.actions .button{
    display: block !important;
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
}

/* ================================================================
   КОРЗИНА: РАЗДЕЛИТЕЛЬ, МИНИАТЮРА, КРЕСТИК
   ================================================================
   После того как ячейки стали блочными, подписи («Товар:»,
   «Цена:») и значения слиплись в одну строку, миниатюра уехала в
   центр, а крестик встал слева.

   Возвращаем в порядок: миниатюра слева, подпись с отступом от
   значения, крестик в правом верхнем углу карточки. */
@media (max-width: 767px){
  /* Подпись и значение в одной строке, но разделены */
  .woocommerce table.cart td.product-name,
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart td.product-subtotal,
  .woocommerce table.cart td.product-quantity{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 3px 0 !important;
  }
  .woocommerce table.cart td.product-name > .product-name,
  .woocommerce table.cart td.product-price .product-price,
  .woocommerce table.cart td.product-subtotal .product-subtotal,
  .woocommerce table.cart td.product-quantity .product-quantity{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Название: метка сверху, значение ниже — так длинные названия
     не сталкиваются с ценой */
  .woocommerce table.cart td.product-name{
    display: block !important;
    padding-right: 44px !important;
  }
  .woocommerce table.cart td.product-name::before{
    content: "Товар";
    display: block;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .woocommerce table.cart td.product-name > .product-name{
    font-size: .95rem !important;
    font-weight: 500;
    line-height: 1.3;
  }
  /* Миниатюра — в левом верхнем углу карточки, до всех строк */
  .woocommerce table.cart td.product-thumbnail{
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }
  .woocommerce table.cart td.product-thumbnail img{
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 8px;
  }
  /* Крестик — правый верхний угол карточки */
  .woocommerce table.cart td.product-remove{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3;
  }
  .woocommerce table.cart a.remove{
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex: 0 0 28px;
  }
  /* Метки остальных строк не выводим — их задаёт разметка ячеек */
  .woocommerce table.cart td.product-price::before,
  .woocommerce table.cart td.product-subtotal::before,
  .woocommerce table.cart td.product-quantity::before{
    content: none !important;
  }
}

/* ================================================================
   КОРЗИНА: ПОДПИСИ И КРЕСТИК — ФИНАЛЬНО
   ================================================================
   Разметка: подпись «Товар» приходит из ::before на самой ячейке,
   Storefront ставит display:inline — из-за чего она слипалась с
   названием («ТоварКомпозиция «Ветвь»»). Остальные подписи он же
   отключает (content:none), поэтому цена и количество шли без
   пояснений.

   Делаем сами: у каждой ячейки своя подпись отдельной строкой над
   значением, и всё разнесено по карточке без наложений. */
@media (max-width: 767px){
  /* --- Товар: подпись и название отдельными строками --- */
  .woocommerce table.cart td.product-name,
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart td.product-quantity,
  .woocommerce table.cart td.product-subtotal{
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    text-align: left !important;
  }
  .woocommerce table.cart td.product-name::before,
  .woocommerce table.cart td.product-price::before,
  .woocommerce table.cart td.product-quantity::before,
  .woocommerce table.cart td.product-subtotal::before{
    display: block !important;
    content: attr(data-label) !important;
    font-size: .78rem !important;
    line-height: 1.3;
    color: var(--muted) !important;
    margin-bottom: 1px !important;
  }
  .woocommerce table.cart td.product-name::before{ content: "Товар" !important; }
  .woocommerce table.cart td.product-price::before{ content: "Цена" !important; }
  .woocommerce table.cart td.product-quantity::before{ content: "Количество" !important; }
  .woocommerce table.cart td.product-subtotal::before{ content: "Подытог" !important; }

  /* Название не должно залезать под крестик справа */
  .woocommerce table.cart td.product-name{
    padding-right: 44px !important;
  }
  .woocommerce table.cart td.product-name > a{
    display: block !important;
    font-size: .98rem !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }
  /* Цена и подытог — приглушённым, значение читается */
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart td.product-subtotal{
    font-size: .95rem !important;
  }
  /* Поле количества — на всю ширину, аккуратно */
  .woocommerce table.cart td.product-quantity .quantity{
    display: flex !important;
    width: 100% !important;
  }
  .woocommerce table.cart td.product-quantity input.qty{
    width: 100% !important;
    max-width: 160px !important;
    height: 40px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--line2) !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    padding: 0 12px !important;
  }
  /* Миниатюра — компактная, первым блоком в карточке */
  .woocommerce table.cart td.product-thumbnail{
    display: block !important;
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  .woocommerce table.cart td.product-thumbnail img{
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 8px;
  }
  /* Крестик — правый верхний угол карточки, внутри её границ */
  .woocommerce table.cart td.product-remove{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5;
  }
  .woocommerce table.cart a.remove{
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    float: none !important;
    flex: 0 0 28px;
  }
}

/* ================================================================
   КОРЗИНА: ПОСЛЕДНИЕ ДВЕ ПОПРАВКИ
   ================================================================
   1) Storefront задаёт td.product-remove left:-12px и растягивает
      ячейку на всю ширину строки — из-за этого крестик уезжал
      влево (x=7 вместо правого угла карточки).
   2) Подписи из ::before вставали inline и слипались со значением
      («ТоварКомпозиция «Ветвь»») — display:block перебивался
      более поздним правилом темы. Закрепляем !important. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item td.product-remove,
  .woocommerce-cart-form tr.cart_item td.product-remove{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    float: none !important;
    z-index: 5 !important;
  }
  /* Подписи — отдельной строкой над значением */
  .woocommerce table.cart tr.cart_item td.product-name::before,
  .woocommerce table.cart tr.cart_item td.product-price::before,
  .woocommerce table.cart tr.cart_item td.product-quantity::before,
  .woocommerce table.cart tr.cart_item td.product-subtotal::before{
    display: block !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
    margin: 0 0 2px !important;
    font-weight: 400 !important;
  }
  .woocommerce table.cart tr.cart_item td.product-name::before{ content: "Товар" !important; }
  .woocommerce table.cart tr.cart_item td.product-price::before{ content: "Цена" !important; }
  .woocommerce table.cart tr.cart_item td.product-quantity::before{ content: "Количество" !important; }
  .woocommerce table.cart tr.cart_item td.product-subtotal::before{ content: "Подытог" !important; }
  /* Значения — свои строки, не прилипают к подписи */
  .woocommerce table.cart tr.cart_item td.product-name > a,
  .woocommerce table.cart tr.cart_item td.product-price > *,
  .woocommerce table.cart tr.cart_item td.product-subtotal > *,
  .woocommerce table.cart tr.cart_item td.product-quantity > .quantity{
    display: block !important;
    width: 100% !important;
  }
}

/* ================================================================
   КОРЗИНА: ПОДПИСЬ И ЗНАЧЕНИЕ В РАЗНЫЕ СТРОКИ
   ================================================================
   Псевдоэлемент с подписью формально display:block, но ширина
   у него оказывалась по содержимому (35px), и подпись вставала в
   одну строку со значением: «ТоварКомпозиция «Ветвь»».

   Надёжный способ — сделать ячейку flex-колонкой: тогда и
   псевдоэлемент, и содержимое становятся отдельными элементами
   колонки и физически не могут встать на одну строку. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item > td.product-name,
  .woocommerce table.cart tr.cart_item > td.product-price,
  .woocommerce table.cart tr.cart_item > td.product-quantity,
  .woocommerce table.cart tr.cart_item > td.product-subtotal{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  /* Значение тянется на всю ширину под подписью */
  .woocommerce table.cart tr.cart_item > td.product-name > a,
  .woocommerce table.cart tr.cart_item > td.product-price > *,
  .woocommerce table.cart tr.cart_item > td.product-subtotal > *,
  .woocommerce table.cart tr.cart_item > td.product-quantity > .quantity{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Поле количества — во всю ширину */
  .woocommerce table.cart tr.cart_item > td.product-quantity .quantity{
    width: 100% !important;
    display: block !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-quantity input.qty{
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    font-size: 1rem !important;
    border: 1px solid var(--line2) !important;
    border-radius: 8px !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    padding: 0 14px !important;
    text-align: center;
  }
}

/* ================================================================
   КОРЗИНА: МИНИАТЮРА В СТРОКУ С НАЗВАНИЕМ
   ================================================================
   Миниатюра стояла отдельным блоком, из-за чего слева от неё
   зияла пустая полоса, а карточка выглядела разрезанной.
   Ставим миниатюру слева, название и подписи — справа от неё. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item{
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    grid-template-areas:
      "remove remove"
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal" !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: start !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-remove{
    grid-area: remove !important;
    justify-self: end !important;
    margin-bottom: 4px !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-thumbnail{
    grid-area: thumb !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-name{
    grid-area: name !important;
    padding-right: 0 !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-price{ grid-area: price !important; }
  .woocommerce table.cart tr.cart_item > td.product-quantity{ grid-area: qty !important; }
  .woocommerce table.cart tr.cart_item > td.product-subtotal{ grid-area: subtotal !important; }
}

/* ================================================================
   КОРЗИНА: КРЕСТИК НЕ НАКРЫВАЕТ ДЛИННОЕ НАЗВАНИЕ
   ================================================================
   «Композиция «Два оттенка»» длиннее строки и уходило под крестик.
   Даём крестику отдельную строку над содержимым — тогда название
   занимает всю ширину и ничего не перекрывается. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item{
    grid-template-areas:
      "remove remove"
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal" !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-remove{
    grid-area: remove !important;
    justify-self: end !important;
    margin-bottom: 2px !important;
  }
}

/* Внутри grid ячейка-крестик не может быть абсолютной — она выпала
   из потока и снова накрыла длинное название. Возвращаем её в
   строку сетки: занимает свою область и не перекрывает ничего. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item > td.product-remove{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    grid-area: remove !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
  }
  .woocommerce table.cart tr.cart_item > td.product-remove a.remove{
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
  }
}

/* Крестик вставал по центру строки: у ячейки оставался
   text-align:center от Storefront, а наш justify-content
   игнорировался из-за float. Выравниваем строго вправо. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item > td.product-remove{
    text-align: right !important;
    justify-content: flex-end !important;
    align-items: center !important;
    display: flex !important;
    float: none !important;
    direction: ltr !important;
  }
  /* Убираем декоративный круг-подложку Storefront, если он есть */
  .woocommerce table.cart tr.cart_item > td.product-remove a.remove{
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Storefront рисует у крестика глиф-иконку в ::before (\uf057) и
   растягивает её на размер ячейки — на мобильном вылезал пустой
   круг рядом с крестиком. Гасим псевдоэлемент: значок «×» уже
   есть в тексте самой ссылки. */
.woocommerce table.cart a.remove::before,
.woocommerce table.cart a.remove::after,
.woocommerce-cart-form a.remove::before,
.woocommerce-cart-form a.remove::after{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Символ «×» в крестике не был виден: display:inline-flex с
   line-height, равным font-size, сжимал глиф по высоте в ноль —
   оставался только круг-фон. Растягиваем содержимое по центру. */
.woocommerce table.cart a.remove,
.woocommerce-cart-form a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.woocommerce table.cart a.remove > *,
.woocommerce-cart-form a.remove > *{
  display: block !important;
  line-height: 1 !important;
}

/* Storefront прячет сам символ «×» через text-indent:-9999px
   (текст уезжает за левый край, остаётся только круг-фон).
   Возвращаем ноль — глиф снова виден. */
.woocommerce table.cart a.remove,
.woocommerce-cart-form a.remove,
.woocommerce table.shop_table a.remove{
  text-indent: 0 !important;
  overflow: visible !important;
  text-align: center !important;
}

/* Уведомление обстояло рамкой в тёмный цвет — не в палитре.
   Оставляем тонкую рамку линии и смягчаем фон. */
.woocommerce-message,
.added_to_cart,
.woocommerce-info,
.woocommerce-notice{
  border: 1px solid var(--line2) !important;
  border-left: 4px solid var(--green) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin: 0 0 18px !important;
  box-shadow: none !important;
  outline: none !important;
}
.woocommerce-message::before,
.added_to_cart::before{
  color: var(--green) !important;
}

/* Галочка в уведомлении стояла абсолютно и налезала на текст.
   Возвращаем её в поток, первым элементом строки. */
.woocommerce-message,
.added_to_cart{
  padding-left: 14px !important;
}
.woocommerce-message::before,
.added_to_cart::before{
  position: static !important;
  float: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: .45em !important;
  font-size: 1.05em !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}
/* Текст уведомления и кнопка — без лишних отступов */
.woocommerce-message > .button,
.added_to_cart > .button{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* ================================================================
   УВЕДОМЛЕНИЕ: КОМПАКТНЕЕ, БЕЗ ЗЕЛЁНОЙ ПОЛОСЫ
   ================================================================
   Зелёная полоса слева была border-left:4px — на скруглённом углу
   она не скруглялась и торчала наружу прямоугольником. Убираем
   её совсем: акцент даёт зелёная галочка, полоса не нужна.

   Заодно ужимаем: уведомление занимало 162px высоты — текст,
   пустой отступ и крупная кнопка. Делаем компактным, в палитре. */
.woocommerce-message,
.added_to_cart,
.woocommerce-info{
  display: block !important;
  border: 1px solid var(--line2) !important;
  border-left: 1px solid var(--line2) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
}
/* Галочка — компактная, в строку с текстом */
.woocommerce-message::before,
.added_to_cart::before,
.woocommerce-info::before{
  position: static !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin-right: .4em !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  vertical-align: -1px;
  top: auto !important;
  left: auto !important;
  color: var(--green) !important;
}
.woocommerce-message p,
.added_to_cart p,
.woocommerce-info p{
  margin: 0 0 8px !important;
  display: inline !important;
}
/* Кнопка — заметно меньше прежней, стрелка в той же строке */
.woocommerce-message .button,
.woocommerce-message a.button,
.added_to_cart .button,
.added_to_cart a.button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  font-size: .82rem !important;
  line-height: 1.2 !important;
  border-radius: 7px !important;
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  color: var(--cream) !important;
}
.woocommerce-message .button::after,
.added_to_cart .button::after{
  display: inline-block !important;
  margin-left: .45em !important;
  font-size: .9em !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* ================================================================
   УВЕДОМЛЕНИЕ: ЕЩЁ УЖИМ И КНОПКА ПО ЦЕНТРУ
   ================================================================
   Текст «Вы отложили … в свою корзину.» занимал две строки и
   растягивал плашку, а кнопка «Просмотр корзины» прилипала к
   правому краю из-за выравнивания по ширине строки.

   Собираем по центру, шириной по содержимому: кнопка становится
   компактной и стоит ровно посередине плашки. */
@media (max-width: 767px){
  .woocommerce-message,
  .added_to_cart{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    text-align: center !important;
  }
  /* Текст — по центру, ограничен шириной, чтобы не лез в 4 строки */
  .woocommerce-message p,
  .added_to_cart p{
    display: block !important;
    margin: 0 !important;
    max-width: 30ch !important;
    font-size: .84rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
  /* Галочка — по центру над текстом */
  .woocommerce-message::before,
  .added_to_cart::before{
    display: block !important;
    float: none !important;
    margin: 0 auto !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  /* Кнопка — по центру, по ширине содержимого */
  .woocommerce-message .button,
  .woocommerce-message a.button,
  .added_to_cart .button,
  .added_to_cart a.button{
    display: inline-flex !important;
    align-self: center !important;
    margin: 0 auto !important;
    padding: 8px 16px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    border-radius: 7px !important;
  }
}

/* Плашка ещё компактнее: галочка в строку с текстом, а не над ним.
   Раньше они шли столбиком и плашка вытягивалась до 137px. */
@media (max-width: 767px){
  .woocommerce-message,
  .added_to_cart{
    display: block !important;
    text-align: center !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
  }
  .woocommerce-message::before,
  .added_to_cart::before{
    display: inline-block !important;
    float: none !important;
    margin: 0 .4em 0 0 !important;
    vertical-align: -2px;
    font-size: .92rem !important;
  }
  .woocommerce-message .button,
  .added_to_cart .button{
    margin: 8px auto 0 !important;
    display: table !important;
  }
}

/* Storefront вешает на кнопку уведомления float:right — из-за этого
   «Просмотр корзины» прилипал к правому краю вместо центра.
   Гасим float и возвращаем центрирование. */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message .button::after,
.added_to_cart .button,
.added_to_cart a.button,
.added_to_cart .button::after{
  float: none !important;
  clear: none !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
}

/* ================================================================
   СТРЕЛКА В КНОПКЕ «ПРОСМОТР КОРЗИНЫ»
   ================================================================
   Стрелка рисовалась глифом \uf30b из иконочного шрифта Storefront.
   У глифа есть боковые поля, поэтому визуально он уезжал вправо и
   не стоял по центру строки. Рисуем свою стрелку маской SVG:
   размер фиксирован, поля нет, центр гарантирован. */
.woocommerce-message .button::after,
.woocommerce-message a.button::after,
.added_to_cart .button::after,
.added_to_cart a.button::after,
.woocommerce .button.wc-forward::after{
  content: "" !important;
  display: block !important;
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 11px !important;
  margin-left: .45em !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-size:contain !important; mask-size:contain !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  vertical-align: middle;
}
/* Галочка перед текстом — тоже наш значок, того же веса */
.woocommerce-message::before,
.added_to_cart::before{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* ================================================================
   КОРЗИНА: ПОЛОСА, «ОФОРМИТЬ ЗАКАЗ», ПЕРЕКРЫТИЕ КНОПКОЙ
   ================================================================ */

/* ---- 1. Бежевая полоса над «Обновить корзину» ----
   tfoot получал фон --paper2, а td.actions был прозрачным — сквозь
   него просвечивал бежевый. Возвращаем ячейке тот же фон, что и
   у карточек товара. */
@media (max-width: 767px){
  .woocommerce table.cart tfoot td.actions,
  .woocommerce-cart-form tfoot td.actions,
  .woocommerce table.cart td.actions,
  .woocommerce-cart-form td.actions{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Сам tfoot без своей подложки — иначе полоса возвращается */
  .woocommerce table.cart tfoot,
  .woocommerce table.cart tfoot tr,
  .woocommerce-cart-form tfoot,
  .woocommerce-cart-form tfoot tr{
    background: transparent !important;
  }
}

/* ---- 2. «Оформить заказ»: стрелка уходила на вторую строку ----
   Кнопка была display:block с white-space:normal, поэтому наш
   ::after (13px) не влезал в строку и падал ниже. Ставим flex и
   nowrap — стрелка встаёт в строку по центру. */
.woocommerce .checkout-button,
.woocommerce a.checkout-button,
.woocommerce button.checkout-button,
.woocommerce .cart-collaterals .checkout-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  width: 100% !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  background: var(--green) !important;
  border: 1px solid var(--green) !important;
  color: var(--cream) !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  float: none !important;
}
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover{
  background: var(--green2) !important;
  color: var(--cream) !important;
}
/* Стрелка — та же, что у «Просмотр корзины»: маска, а не глиф */
.woocommerce .checkout-button::after,
.woocommerce a.checkout-button::after,
.woocommerce button.checkout-button::after{
  content: "" !important;
  display: block !important;
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 11px !important;
  margin: 0 !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-size:contain !important; mask-size:contain !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  vertical-align: middle;
}

/* ================================================================
   НИЖНЯЯ КНОПКА НЕ ДОЛЖНА ПЕРЕКРЫВАТЬ СОДЕРЖИМОЕ
   ================================================================
   Кнопка «сумма + количество» висит поверх страницы, а контента
   под ней хватало не всегда: на странице корзины «Оформить
   заказ» уезжал ровно под кнопку, и на главной она закрывала
   заголовок секции.

   Раньше отступ задавался на body (68px) — этого хватало не
   всегда. Теперь считаем отступ от самой кнопки: 52px её высота
   плюс запас под «домашнюю» полосу телефона. */
@media (max-width: 991px){
  body{
    padding-bottom: 0 !important;
  }
  /* Нижний отступ везде, где есть подвал/страница */
  .site-content,
  .hfeed.site{
    padding-bottom: 76px !important;
  }
  /* Домашняя полоса снизу (жестовая навигация) добавляет своё */
  @supports (padding: max(0px)){
    .site-content,
    .hfeed.site{
      padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}

/* Storefront рисует над td.actions толстую рамку-разделитель
   (border-top:15px #E0DCCC). На мобильном она выглядела как
   бежевая полоса прямо над кнопкой «Обновить корзину».
   Убираем — разделитель здесь не нужен. */
@media (max-width: 767px){
  .woocommerce table.cart td.actions,
  .woocommerce-cart-form td.actions,
  .woocommerce table.cart tfoot td.actions{
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 14px !important;
  }
}

/* ================================================================
   НИЖНЯЯ КНОПКА НЕ ЗАКРЫВАЕТ КОНТЕНТ НА НИЗКОМ ЭКРАНЕ
   ================================================================
   На невысоком телефоне (ориентация от 360x640 — как у Brave с
   адресной строкой и нижней панелью) фиксированная кнопка
   накрывала «Приехать в мастерскую» в первом экране.

   Помогаем только когда кнопка бесполезна — корзина пуста:
   «₽0.00 | 0 товаров» ничего не даёт и только занимает место.
   С товарами кнопка остаётся, до неё и так можно доскроллить. */
@media (max-width: 991px) and (max-height: 700px){
  .td-mcart.is-empty{
    display: none !important;
  }
  /* Отступ снизу тоже убираем — он был ради кнопки */
  body{
    padding-bottom: 0 !important;
  }
  .site-content,
  .hfeed.site{
    padding-bottom: 0 !important;
  }
}

/* ================================================================
   «ПРОСМОТР КОРЗИНЫ» В КАРТОЧКЕ ТОВАРА — КОМПАКТНЕЕ
   ================================================================
   После добавления WooCommerce показывает под кнопкой «В корзину»
   ссылку «Просмотр корзины». Она была 128x61 с переносом на две
   строки и в карточке не помещалась — занимала место второго ряда.
   Делаем её компактной, в одну строку, по центру под кнопкой. */
.added_to_cart.wc-forward,
.woocommerce ul.products li.product .added_to_cart.wc-forward,
.woocommerce .products li.product .added_to_cart.wc-forward{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35em !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
  height: auto !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--line2) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, color .15s ease;
}
.added_to_cart.wc-forward:hover,
.woocommerce ul.products li.product .added_to_cart.wc-forward:hover{
  border-color: var(--sage) !important;
  color: var(--green) !important;
}
/* Стрелка — та же маска, что и в наших кнопках */
.added_to_cart.wc-forward::after{
  content: "" !important;
  display: block !important;
  flex: 0 0 11px !important;
  width: 11px !important;
  height: 9px !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0.5 5.5h10M7 1l4 4.5L7 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-size:contain !important; mask-size:contain !important;
  position: static !important;
  transform: none !important;
}

/* ================================================================
   «ПРОСМОТР КОРЗИНЫ»: ТЕСНО В 128PX + ФИОЛЕТОВАЯ РАМКА
   ================================================================
   Надпись со стрелкой не помещалась в ширину карточки — текст
   выходил за пределы и вставал в две строки. Уменьшаем кегль и
   отступы, чтобы уместиться в одну строку.

   Заодно убираем фиолетовую рамку: Storefront рисует её на
   :focus-visible у кнопок (акцентный цвет #7F54B3) — в палитре
   такого цвета нет, и после клика рамка оставалась на телефоне. */
.added_to_cart.wc-forward{
  padding: 6px 6px !important;
  gap: .3em !important;
  font-size: .72rem !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  min-width: 0 !important;
}
.added_to_cart.wc-forward::after{
  flex: 0 0 10px !important;
  width: 10px !important;
  height: 8px !important;
}

/* Фиолетовая рамка фокуса — в цвет текста */
a.add_to_cart_button:focus,
a.add_to_cart_button:focus-visible,
.woocommerce ul.products li.product a.add_to_cart_button:focus,
.woocommerce ul.products li.product a.add_to_cart_button:focus-visible,
.single-product .add_to_cart_button:focus,
.single-product .add_to_cart_button:focus-visible,
.woocommerce .button:focus,
.woocommerce .button:focus-visible{
  outline: 2px solid var(--green) !important;
  outline-offset: 1px !important;
}
/* Уже нажатая кнопка не должна «подсвечиваться» */
.woocommerce ul.products li.product a.add_to_cart_button:focus:not(:focus-visible),
.woocommerce ul.products li.product a.add_to_cart_button:not(:focus-visible){
  outline-color: transparent !important;
}

/* Финальная подгонка: «Просмотр корзины» со стрелкой не влезала в
   128px карточки — текст занимал 124px, и стрелка уходила на вторую
   строку, делая кнопку 47px. Ужимаем шрифт и отступы так, чтобы всё
   встало в одну строку. */
.added_to_cart.wc-forward,
.woocommerce ul.products li.product .added_to_cart.wc-forward{
  padding: 6px 4px !important;
  gap: .25em !important;
  font-size: .66rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
.added_to_cart.wc-forward::after{
  flex: 0 0 9px !important;
  width: 9px !important;
  height: 8px !important;
  margin: 0 !important;
}

/* ================================================================
   «ПРОСМОТР КОРЗИНЫ»: УБИРАЕМ СТРЕЛКУ
   ================================================================
   Стрелка съедала ширину и из-за неё надпись переносилась на вторую
   строку — в карточке 128px на текст оставалось слишком мало.
   Убираем стрелку: в карточке подпись «Просмотр корзины» читается
   и без неё, а место занимает меньше. За счёт освободившегося
   места возвращаем читаемый кегль. */
.added_to_cart.wc-forward::after{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.added_to_cart.wc-forward,
.woocommerce ul.products li.product .added_to_cart.wc-forward{
  padding: 7px 10px !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Подгонка без обрезки: при 12.48px надпись ровно впритык к 128px,
   и на других гарнитурах последняя буква срезалась. Чуть сужаем
   отступы и кегль — запас есть, текст остаётся читаемым. */
.added_to_cart.wc-forward,
.woocommerce ul.products li.product .added_to_cart.wc-forward{
  padding: 6px 7px !important;
  font-size: .72rem !important;
  letter-spacing: -0.01em !important;
}

/* ================================================================
   ПАГИНАЦИЯ КАТАЛОГА
   ================================================================
   Скрытые скриптом кнопки не должны занимать место — иначе между
   видимыми остаются пустые промежутки и блок выглядит рваным. */
/* Storefront задаёт .page-numbers { display: inline-block } обычным
   селектором, поэтому наше правило без !important проигрывало:
   кнопки получали класс, но оставались видимыми. */
.woocommerce-pagination .page-numbers.td-pg-hidden,
.page-numbers.td-pg-hidden {
	display: none !important;
}

/* Наше многоточие не должно выглядеть как кнопка. */
.woocommerce-pagination .page-numbers.td-pg-dots {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	min-width: 0;
	padding: 0 4px;
	font-weight: 400;
	color: rgba( 47, 58, 46, .5 );
	pointer-events: none;
}

/* Многоточие между группами страниц — тоньше и спокойнее. */
.woocommerce-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	font-weight: 400;
	color: rgba( 47, 58, 46, .55 );
}

/* Отзывы отключены в functions.php; это правило — подстраховка,
   если блок выводится мимо вкладок. */
.single-product div#reviews,
.single-product .woocommerce-Reviews,
.single-product #comments {
	display: none !important;
}

/* ================================================================
   КОРЗИНА И ОФОРМЛЕНИЕ: ЧИСТЫЕ ИТОГИ
   ================================================================
   При одном товаре строки «Промежуточный итог» в блоке «Итого» и
   белый фон за строкой товара выглядят как ошибка верстки: сумма
   дублируется, а фон выбивается из палитры. Прячем строку целиком,
   а таблицу красим в общий тёплый фон — так блок читается целиком.

   Правило действует, пока в корзине одна позиция: как только
   товаров станет несколько, суммы перестанут совпадать и строку
   нужно вернуть. */
body.td-one-item .woocommerce-checkout-review-order-table .cart-subtotal {
	display: none;
}

body.td-one-item .woocommerce-checkout-review-order-table tbody tr:not(.order-total) {
	background: transparent;
}

body.td-one-item .woocommerce-checkout-review-order-table,
body.td-one-item .woocommerce-checkout-review-order-table tfoot,
body.td-one-item .woocommerce-checkout-review-order-table tbody {
	background: #F4F1E8;
}

/* Убираем белую подложку за строкой товара в корзине и оформлении. */
body.td-one-item .woocommerce-checkout-review-order-table .cart_item {
	background: transparent;
}

/* Кнопка «Вернуть?» в уведомлении об удалении. */
.woocommerce-message .woocommerce-remove-item-undo,
.woocommerce-message a[href*="undo_item"] {
	font-weight: 500;
	color: #3E5C48;
	text-decoration: underline;
}

/* ================================================================
   «ПОДЫТОГ» В КАРТОЧКЕ ТОВАРА
   ================================================================
   Строка повторяет цену того же товара и при одном товаре выглядит
   как ошибка. Фильтр woocommerce_cart_item_subtotal не помог:
   Storefront верстает корзину своей разметкой и подпись выводит
   мимо него. Поэтому прячем через CSS — но только когда позиция
   одна; при нескольких товарах сумма нужна.

   Класс td-one-item ставит tilladom_cart_body_class(). */
/* В style.css есть правило
   `.woocommerce table.cart tr.cart_item > td.product-subtotal`
   с display:flex !important и grid-area — оно сильнее короткого
   селектора, поэтому дублируем его структуру и добавляем
   body.td-one-item. */
body.td-one-item .woocommerce table.cart tr.cart_item > td.product-subtotal,
body.td-one-item .woocommerce table.cart tr.cart_item > th.product-subtotal,
body.td-one-item .woocommerce table.cart tr.cart-subtotal,
body.td-one-item .woocommerce-checkout-review-order-table .cart-subtotal,
body.td-one-item .cart_totals tr.cart-subtotal {
	display: none !important;
	grid-area: auto !important;
}

/* Подпись «Подытог» печатается псевдоэлементом с content —
   убираем и его, иначе останется одна строка без значения. */
body.td-one-item .woocommerce table.cart tr.cart_item > td.product-subtotal::before,
body.td-one-item .woocommerce table.cart tr.cart_item > td.product-subtotal::after,
body.td-one-item .woocommerce table.cart tr.cart_item > td.product-subtotal > * {
	content: none !important;
}

/* Заголовок колонки «Промежуточный итог» в шапке таблицы заказа
   тоже прячем: у пользователя в корзине он оказался первой же
   строкой и выглядел как отдельный раздел. */
body.td-one-item .woocommerce-checkout-review-order-table thead th.product-total,
body.td-one-item .woocommerce-checkout-review-order-table thead th + th {
	display: none !important;
}

/* Название товара в блоке «Ваш заказ».
   Раньше здесь стояло правило .woocommerce-checkout-review-order-table
   td:first-child { display:none } — оно убирало первую ячейку каждой
   строки, и в таблице заказа это как раз название товара: оставалась
   пустая бежевая полоса. Возвращаем ячейку с товаром. */
body.td-one-item .woocommerce-checkout-review-order-table td.product-name,
body.td-one-item .woocommerce-checkout-review-order-table tr.cart_item td:first-child {
	display: block !important;
	grid-area: auto !important;
}

body.td-one-item .woocommerce-checkout-review-order-table td.product-name::before {
	content: none !important;
}

/* Раскладка таблицы заказа на телефоне.
   Название товара попало в узкую колонку и переносилось по буквам
   («Till andsi a alb ida»), а рядом оставалась пустая ячейка с ценой.
   При одной позиции эта цена дублирует строку «Итого» — убираем её,
   а названию отдаём всю ширину. */
@media (max-width: 760px) {
	body.td-one-item .woocommerce-checkout-review-order-table td.product-name,
	body.td-one-item .woocommerce-checkout-review-order-table tr.cart_item td:first-child {
		display: block !important;
		width: auto !important;
		float: none !important;
		padding-right: 0;
		word-break: normal;
		overflow-wrap: break-word;
	}

	body.td-one-item .woocommerce-checkout-review-order-table td.product-total {
		display: none !important;
	}

	body.td-one-item .woocommerce-checkout-review-order-table thead th {
		display: none !important;
	}

	body.td-one-item .woocommerce-checkout-review-order-table tbody tr.cart_item {
		display: block !important;
		background: transparent;
	}
}

/* ================================================================
   ДУБЛЬ СОРТИРОВКИ В КАТАЛОГЕ
   ================================================================
   Storefront выводит блок сортировки дважды: один перед сеткой
   товаров, второй после неё. На узком экране второй уезжал под
   последние карточки и выглядел как отдельный элемент страницы.
   В Firefox он иногда скрывается сам, в Chrome — нет, поэтому
   убираем явно: оставляем только первый блок.

   Порядок выбора :first-of-type важен: если бы мы скрывали
   первый, сортировка пропала бы совсем. */
@media (max-width: 760px) {
	.site-main > .storefront-sorting:not(:first-of-type) {
		display: none !important;
	}
}

/* На широком экране Storefront прячет первый — оставляем нижний,
   чтобы сортировка оставалась под товарами как привычно. */
@media (min-width: 761px) {
	.site-main > .storefront-sorting:first-of-type {
		display: none !important;
	}
}

/* ================================================================
   ЦЕНА ТОВАРА, КОТОРЫЙ НЕЛЬЗЯ КУПИТЬ
   ================================================================
   Вместо цифры показываем слова. Шрифт чуть меньше цены и
   приглушённый, чтобы карточка не выглядела «сломанной». */
.td-no-price {
	font-size: .82rem;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: .01em;
}

.woocommerce ul.products li.product .price .td-no-price,
li.product .price .td-no-price {
	color: var(--muted) !important;
}

/* В корзине и оформлении — та же подпись, но чуть спокойнее. */
.cart .td-no-price,
.checkout .td-no-price {
	font-style: normal;
}

/* ================================================================
   АКЦЕНТНЫЙ ЦВЕТ FOCUS — ВМЕСТО ФИОЛЕТОВОГО
   ================================================================
   Storefront по умолчанию рисует контур на :focus и :focus-visible
   фиолетовым — #7F54B3. В палитре сайта такого цвета нет, и на
   телефоне после нажатия на пункт меню под «Главная» или «Каталог»
   оставалась фиолетовая полоса через весь экран.

   Ставим наш тёмно-зелёный: на светлом фоне он заметен не хуже,
   а выглядит частью оформления, а не чужой вставкой.

   Правило адресное — только пункты меню: у кнопок и ссылок в тексте
   свой фокус мы не трогаем, там рамка уже согласована. */
.storefront-primary-navigation li a:focus,
.storefront-primary-navigation li a:focus-visible,
.storefront-secondary-navigation li a:focus,
.storefront-secondary-navigation li a:focus-visible,
.main-navigation ul.menu > li > a:focus,
.main-navigation ul.menu > li > a:focus-visible,
.handheld-menu a:focus,
.handheld-menu a:focus-visible,
.handheld-navigation a:focus,
.handheld-navigation a:focus-visible,
.storefront-mobile-menu a:focus,
.storefront-mobile-menu a:focus-visible,
ul.menu li a:focus,
ul.menu li a:focus-visible {
	/* Одно выделение, а не два. Раньше здесь стояли и контур
	   outline, и полоса box-shadow — они ложились друг на друга,
	   и на телефоне пункт выглядел как две линии. Оставляем
	   полосу снизу: она повторяет рисунок Storefront, только
	   зелёная, и по ней понятно, где нажали. */
	outline: none !important;
	box-shadow: inset 0 -3px 0 var(--green) !important;
	border-color: var(--green) !important;
}

/* ================================================================
   КНОПКА «ВЕРНУТЬ?» В УВЕДОМЛЕНИИ КОРЗИНЫ
   ================================================================
   Кнопка была 41px высотой при строке текста около 20px: она
   вдвое выше текста, и рядом с коротким сообщением выглядела
   отдельной, слишком крупной деталью.

   Увеличиваем примерно на треть — до ~55px: крупнее, заметно
   нажатие, но пропорционально блоку уведомления, который
   занимает почти всю ширину экрана. Круглые углы и цвет
   оставляем прежними. */
.woocommerce-message .woocommerce-remove-item-undo,
.woocommerce-message a[href*="undo_item"],
.woocommerce-message .undo {
	display: inline-block;
	padding: 15px 26px !important;
	font-size: 15.5px !important;
	line-height: 1.4 !important;
	border-radius: 10px !important;
	margin-top: 10px !important;
	min-height: 55px;
	text-align: center;
	text-decoration: none !important;
	vertical-align: middle;
}

/* На телефоне кнопка занимает всю ширину блока — так она
   попадает в палец целиком. */
@media (max-width: 760px) {
	.woocommerce-message .woocommerce-remove-item-undo,
	.woocommerce-message a[href*="undo_item"] {
		display: block;
		width: 100%;
	}
}

/* ================================================================
   КАРТОЧКА ТОВАРА В КАТАЛОГЕ
   ================================================================
   1. Фиолетовая рамка выделения. Storefront рисует её на
      :focus-visible у ссылки карточки (акцентный цвет #7F54B3).
      Прямоугольник вокруг фотографии выглядел чужеродно, поэтому
      убираем: рамки у карточек не будет ни при касании, ни при
      переходе с клавиатуры. Доступность при этом не страдает —
      сам пункт каталога остаётся ссылкой, а выделение даёт
      заголовок товара.

   2. Название целиком. Раньше оно обрезалось на трёх строках
      через -webkit-line-clamp, поэтому «…» стояло почти на
      каждой карточке. Отменяем обрезку и резервируем место под
      четыре строки: карточки в ряду остаются одинаковой высоты,
      но текст виден весь. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus:not(:focus-visible),
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	-webkit-line-clamp: none !important;
	line-clamp: none !important;
	display: block !important;
	overflow: visible !important;
	-webkit-box-orient: initial !important;
	/* четыре строки резервируем всегда — ряд не «прыгает» */
	min-height: calc(4 * 1.28em);
	margin-bottom: .35em;
}

/* Более длинные названия (например, у хвойных) умещаются целиком,
   карточка просто становится выше соседних. */
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
	min-height: calc(4 * 1.28em);
}

/* ================================================================
   ФИОЛЕТОВАЯ ПОЛОСА ПОД КАРТОЧКОЙ КАТАЛОГА
   ================================================================
   На телефоне после касания карточка остаётся в состоянии
   :focus-visible, и Storefront рисует под ней фиолетовую полосу
   (#7F54B3) — тот же акцентный цвет, что мы уже убирали у пунктов
   меню. Рамка прямоугольная и выглядит чужой, поэтому убираем её
   полностью: у ссылки-карточки не остаётся ни контура, ни тени.

   Выделение при этом не пропадает совсем: карточка и так меняет
   вид при наведении и нажатии — подсветкой рамки и сдвигом фото. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus:not(:focus-visible),
.woocommerce ul.products li.product a.button:focus,
.woocommerce ul.products li.product a.button:focus-visible,
.woocommerce ul.products li.product a.add_to_cart_button:focus,
.woocommerce ul.products li.product a.add_to_cart_button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ================================================================
   ОТСТУП МЕЖДУ ЧИПАМИ И ТОВАРАМИ
   ================================================================
   При нажатии карточка слегка увеличивается и поднимается по
   transform, и верхний ряд заезжал на ряд чипов категорий —
   фотография перекрывала подписи. У Storefront это поведение
   заложено, отключать не будем: проще развести блоки по
   вертикали. На телефоне отступ заметно больше, там эффект
   сильнее. */
@media (max-width: 760px) {
	.woocommerce .storefront-sorting {
		padding-bottom: 26px;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		margin-top: 10px;
	}

	/* увеличенная карточка не должна доставать до блока выше */
	.woocommerce ul.products li.product {
		transform-origin: center bottom;
	}
}

/* ================================================================
   ФИОЛЕТОВАЯ РАМКА FOCUS — ПОСЛЕДНИЙ СЛУЧАЙ
   ================================================================
   Storefront рисует фиолетовый контур (#7F54B3) на :focus-visible
   почти для всех ссылок темы: у карточек, у пунктов меню и —
   как выяснилось — у самих кнопок вроде «Подробнее». На телефоне
   рамка остаётся после касания, и обводит прямоугольником целую
   кнопку.

   Раньше мы гасили её точечно, и каждый раз всплывал новый
   элемент. Здесь снимаем разом для всех кнопок и ссылок темы.
   Доступность при этом не теряется: пункт остаётся ссылкой, по
   наведению и нажатию видно, что он активен, а на клавиатуре
   остаётся системная рамка у тех ссылок, где мы её явно не
   переопределили.

   Цвет берём наш зелёный на случай, если рамка всё же нужна. */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
select:focus,
textarea:focus {
	outline-color: var(--green) !important;
}

.td-home .btn:focus,
.td-home .btn:focus-visible,
.td-home .btn:focus:not(:focus-visible),
.td-home a.btn:focus,
.td-home a.btn:focus-visible,
.td-home button.btn:focus,
.td-home button.btn:focus-visible,
.td-home .btn-sm:focus,
.td-home .btn-sm:focus-visible,
.td-home .btn-o:focus,
.td-home .btn-o:focus-visible,
.td-home .btn-p:focus,
.td-home .btn-p:focus-visible,
.btn:focus,
.btn:focus-visible,
.btn-o:focus,
.btn-o:focus-visible,
.btn-p:focus,
.btn-p:focus-visible,
.btn-sm:focus,
.btn-sm:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--line) !important;
}

/* У уже нажатой кнопки «В корзину» рамки нет — придерживаемся
   палитры, а не акцентного фиолетового. */
.td-home .btn-p:focus,
.td-home .btn-p:focus-visible {
	border-color: transparent !important;
}

/* ================================================================
   НАЗВАНИЯ ТОВАРОВ: ВМЕСТО BODONI — ОСНОВНОЙ ШРИФТ
   ================================================================
   Bodoni Moda красива в крупных заголовках, но в названии товара
   кегль мелкий, и тонкие штрихи антиквы на экране телефона
   превращаются в почти невидимые нити: «Caput…» читается с трудом,
   а тонкие буквы вроде «tt» сливаются.

   Оставляем Bodoni там, где она работает — в крупных заголовках
   секций (h1, h2). В названиях товаров ставим основной Golos
   Text: он на этих размерах держит толщину линии и читается
   с любого расстояния. Разрядка и насыщенность чуть повышены,
   чтобы латинские названия видов читались уверенно. */
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.td-home .card-n,
.single-product .product_title,
.woocommerce-page .product_title {
	font-family: var(--body) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	line-height: 1.32;
	letter-spacing: .002em;
	color: var(--ink) !important;
	-webkit-text-stroke: 0;
	text-rendering: optimizeLegibility;
}

/* Подзаголовок вида (курсив Bodoni) на главной тоже делаем
   читаемым: он тоже мелкий и тоже тонкий. */
.td-home .card-s {
	font-family: var(--body) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: .78rem !important;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--muted) !important;
}

.single-product .td-ru-name {
	margin: -.35em 0 .8em;
	font-family: var(--body) !important;
	font-style: normal;
	font-weight: 400;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--muted);
}

.single-product div.summary > h1.product_title + .td-ru-name {
	margin-top: .3em;
}

@media (max-width: 640px) {
	.single-product .td-ru-name {
		font-size: .87rem;
		margin-bottom: .7em;
	}
}

/* ================================================================
   ЛАТИНСКОЕ НАЗВАНИЕ — МЕЛКОЙ СТРОКОЙ ПОД РУССКИМ
   ================================================================
   Основное название товара теперь русское: так его читают и
   покупатели, и поисковики. Латинское название нужно для
   точности — по нёму товар ищут в зарубежных каталогах и по
   нему же мы узнаём вид, — поэтому оставляем его, но мелким
   шрифтом приглушённым, чтобы не спорило с названием. */
.td-latin-name {
	margin: .3em 0 .5em;
	font-family: var(--body) !important;
	font-style: normal;
	font-weight: 400;
	font-size: .78rem;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--muted);
	opacity: .85;
}

/* ================================================================
   ВЫРАВНИВАНИЕ КНОПОК В КАТАЛОГЕ
   ================================================================
   Кнопки прижаты к низу карточки, поэтому их нижняя кромка
   зависит от высоты содержимого. Русские названия длиннее
   латинских, и ряды с такими карточками выбиваются.

   Фиксируем высоту блока названия: четыре строки русского
   плюс две строки латинского. Разрядка уменьшена, чтобы
   длинные названия укладывались в четыре строки, а не в пять.
   Лишнее обрезаем многоточием — название целиком видно
   на странице товара. */
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
	min-height: 7.4em;
	max-height: 7.4em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	line-height: 1.28;
}

.woocommerce ul.products[class*="columns-"] li.product .td-latin-name {
	margin: 0 0 2px;
	font-size: .74rem;
	min-height: 2.7em;
	max-height: 2.7em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* На широких экранах карточка шире, названию нужно меньше строк */
@media (min-width: 700px) {
	.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
		min-height: 5.2em;
		max-height: 5.2em;
		-webkit-line-clamp: 4;
	}
	.woocommerce ul.products[class*="columns-"] li.product .td-latin-name {
		min-height: 2.7em;
		max-height: 2.7em;
	}
}

/* Метка «Нет в наличии» встаёт вровень с ценой */
.woocommerce ul.products[class*="columns-"] li.product .price,
.woocommerce ul.products[class*="columns-"] li.product .stock {
	min-height: 1.4em;
}

@media (max-width: 420px) {
	.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
		min-height: 7.2em;
		max-height: 7.2em;
		font-size: .92rem;
	}
	.woocommerce ul.products[class*="columns-"] li.product .td-latin-name {
		min-height: 2.5em;
		max-height: 2.5em;
	}
}

.single-product div.summary > h1.product_title + .td-latin-name {
	margin-top: .35em;
	margin-bottom: .7em;
	font-size: .82rem;
}

@media (max-width: 640px) {
	.single-product .td-latin-name {
		font-size: .78rem;
		margin-bottom: .65em;
	}
}

/* ================================================================
   ПАГИНАЦИЯ: КОНТЕЙНЕР НИКОГДА НЕ СКРЫВАЕТСЯ
   ================================================================
   Скрипт прячет лишние номера страниц по классу td-pg-hidden.
   Список-ul тоже носит класс page-numbers, и его текст («1 2 3 …»)
   не проходит проверку «это цифра или стрелка» — из-за чего он
   получал td-pg-hidden вместе со всеми кнопками внутри.

   Здесь жёстко запрещаем скрывать контейнер: если класс всё же
   окажется на ul или nav, показываем обратно. */
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers.td-pg-hidden,
.woocommerce-pagination nav.td-pg-hidden,
.woocommerce-pagination.td-pg-hidden {
	display: flex !important;
}

/* ================================================================
   РАСКЛАДКА ПАГИНАЦИИ: КНОПКИ В ОДНУ ЛИНИЮ
   ================================================================
   Скрипт вставляет многоточие прямо в <li>, из-за чего тот
   становится выше остальных, а кнопки внутри — узкие и
   вытянутые по вертикали. Правим раскладку:

   — li всегда по размеру своего содержимого (inline-flex),
   — кнопки одинаковой ширины и высоты,
   — многоточие отдельным элементом без рамки. */
.woocommerce-pagination ul.page-numbers {
	align-items: center !important;
	row-gap: 6px;
}

.woocommerce-pagination ul.page-numbers li {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-width: 0;
	height: auto;
	border: 0;
	background: transparent;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 !important;
	line-height: 1;
	border-radius: 8px;
	font-size: .95rem;
	white-space: nowrap;
}

/* Стрелки чуть уже цифр — им не нужен такой же квадрат */
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li a.prev {
	min-width: 40px;
}

/* Наше многоточие — не кнопка: без рамки и фона */
.woocommerce-pagination ul.page-numbers .td-pg-dots,
.woocommerce-pagination ul.page-numbers li .td-pg-dots,
.woocommerce-pagination ul.page-numbers li.td-pg-dots-item .td-pg-dots {
	min-width: 18px;
	width: 18px;
	height: 44px;
	background: transparent !important;
	border: 0 !important;
	color: var(--muted);
	font-size: .9rem;
	pointer-events: none;
}

/* Узкий экран: семь кнопок должны встать в один ряд без переноса.
   360px минус отступы — около 320px, значит кнопка 38px и зазор 5px:
   7x38 + 6x5 = 296px. */
@media (max-width: 430px) {
	.woocommerce-pagination ul.page-numbers {
		gap: 5px !important;
		row-gap: 5px;
	}
	.woocommerce-pagination ul.page-numbers li a,
	.woocommerce-pagination ul.page-numbers li span {
		min-width: 38px;
		height: 40px;
		padding: 0 !important;
		font-size: .9rem;
		border-radius: 7px;
	}
	.woocommerce-pagination ul.page-numbers li a.next,
	.woocommerce-pagination ul.page-numbers li a.prev {
		min-width: 36px;
	}
}

/* ================================================================
   ФОН СТРАНИЦЫ — ОДИНАКОВЫЙ ВЕЗДЕ
   ================================================================
   На главной бежевый фон задавался принудительно через
   body.home, потому что Storefront красит тело в белый и
   перебивает наш var(--paper) специфичностью выше. На всех
   остальных страницах этого правила не было, и они оставались
   белыми — при переходе «Главная → Каталог» тон менялся.

   Здесь то же правило без body.home: тёплый бумажный фон
   на всех страницах сайта. Тот же приём, что в home-sections.css
   для главной, только область действия шире. */
html body,
body.home,
body:not(.home),
body .site,
body #page,
body .site-content,
body #content,
body .col-full,
body .site-main,
body .content-area {
  background-color: var(--paper) !important;
  background-image: none !important;
}

/* Плашки и плавающие блоки поверх — оставляем, у них свой тон */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .woocommerce-notice {
  background-color: var(--card) !important;
}

/* Магазин Storefront иногда кладёт белый на .woocommerce div.product —
   карточка товара должна остаться светлее фона, как на главной. */
body .woocommerce div.product,
body .woocommerce ul.products li.product {
  background-color: var(--card) !important;
}

/* ================================================================
   ШАПКА: БЕЛЫЕ ПОЛОСЫ ВНУТРИ
   ================================================================
   Storefront красит .site-header в белый, а вкладывает внутрь
   блоки с бежевым фоном. На белом фоне эти вставки читаются как
   светлые полосы поперёк шапки — особенно заметно на телефоне,
   где видна только она.

   Делаем всю шапку тем же бумажным тоном, что и страница. */
body .site-header,
body .site-header .col-full,
body .site-header .col-full * {
  background-color: var(--paper) !important;
  background-image: none !important;
}

/* Меню-бургер остаётся кнопкой — у него свой тон */
body .site-header .menu-toggle {
  background-color: var(--card) !important;
}

/* Нижняя мобильная панель Storefront — тоже бумажная */
body .storefront-handheld-footer-bar {
  background-color: var(--paper) !important;
}

/* ================================================================
   КНОПКА «МЕНЮ»: ФОН КАК У СТРАНИЦЫ
   ================================================================
   Кнопка была светлее фона страницы: заливка --card (#FBFAF4)
   на подложке --paper (#F4F2EA). Разница в одну-две ступени
   незаметна на глаз, но на телефоне с хорошим экраном видна,
   и кнопка выглядит как чужеродная плашка поверх подписи.

   Заливку приравниваем к фону страницы. Кнопка остаётся
   кнопкой за счёт тонкой рамки в тон линии — так она и была
   изначально, без отдельной подложки. */
body .site-header .menu-toggle,
body .site-header button.menu-toggle,
body .site-header .menu-toggle:hover,
body .site-header button.menu-toggle:hover,
body .site-header button.menu-toggle:focus,
body .site-header button.menu-toggle:focus-visible {
  background-color: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line2) !important;
  color: var(--ink) !important;
}

body .site-header .menu-toggle:hover,
body .site-header button.menu-toggle:hover {
  background-color: var(--paper2) !important;
  border-color: var(--sage) !important;
  color: var(--green) !important;
}

/* Меню-подложка при открытии — тоже бумажная, без белого */
body .mm,
body .td-mm {
  background-color: var(--paper) !important;
}

/* ================================================================
   ССЫЛКИ В ТЕКСТЕ — ЗЕЛЁНЫЕ, А НЕ ФИОЛЕТОВЫЕ
   ================================================================
   Storefront красит все ссылки в акцентный фиолетовый (#7F54B3):
   и в тексте статей, и в хлебных крошках, и в подписи под
   товаром. В нашей палитре ссылок фиолетового нет — есть
   тёмно-зелёный, поэтому переводим всё на него.

   Отдельно гасим подчёркивание у ссылок внутри абзацев: в тексте
   инструкции («напишите на @tilladom») подчёркивание не нужно,
   цвет уже показывает, что это ссылка. */
.entry-content a,
.entry-content a:visited,
.single-product .summary a,
.single-product .summary a:visited,
.page-content a,
.td-page a,
.article-content a,
.woocommerce div.product p a,
.woocommerce div.product .product_meta a,
.td-posts-item a,
footer a,
.site-footer a,
.comment-content a {
	color: var(--green2) !important;
}

/* Хлебные крошки Storefront */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a:visited,
.woocommerce-breadcrumb .breadcrumb a {
	color: var(--muted) !important;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb .breadcrumb a:hover {
	color: var(--green2) !important;
}

/* Текстовые ссылки без подчёркивания, но с его реакцией на курсор */
.entry-content a:not(.btn):not(.button),
.page-content a:not(.btn):not(.button),
.article-content a:not(.btn):not(.button),
.single-product .summary p a:not(.btn):not(.button) {
	text-decoration: none;
	border-bottom: 1px solid var(--sage);
	padding-bottom: 1px;
}

.entry-content a:not(.btn):not(.button):hover,
.page-content a:not(.btn):not(.button):hover,
.article-content a:not(.btn):not(.button):hover,
.single-product .summary p a:not(.btn):not(.button):hover {
	color: var(--green) !important;
	border-bottom-color: var(--green);
}

/* Кнопки Storefront внутри текста не трогаем — они уже в палитре */
.entry-content a.button,
.entry-content a.alt,
.entry-content .wp-block-button__link {
	color: var(--cream) !important;
}

/* Технические ссылки «Перейти к содержимому» — Storefront красит их
   фиолетовым. Они появляются только при навигации с клавиатуры,
   но переводим в палитру, чтобы и там не мелькал чужой цвет. */
a.skip-link,
a.skip-link:visited,
a.skip-link:focus,
.screen-reader-text a,
.screen-reader-shortcode a {
	color: var(--green2) !important;
	background-color: var(--paper) !important;
}

/* ================================================================
   НАЗВАНИЯ ТОВАРОВ: НЕ СИРЕНЕВЫЕ
   ================================================================
   Storefront красит ссылку-название товара в акцентный фиолетовый.
   У нас в палитре ссылок только тёмно-зелёный, поэтому название
   получает цвет основного текста — так оно и должно читаться:
   название товара это не ссылка, а подпись.

   Латинское название под ним остаётся приглушённым зелёным. */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:visited,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:visited,
.td-home .card a.card-ph,
.td-home .card .card-n a,
.td-home .card a.card-b,
.td-home .card .card-n,
.td-home .card .card-n a:visited,
.td-home .card .card-n span {
	color: var(--ink) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.td-home .card .card-n a:hover {
	color: var(--green2) !important;
}

/* Карточка целиком — ссылка на товар; её подчёркивание лишнее */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.td-home .card a.card-b {
	text-decoration: none !important;
}

/* ================================================================
   НАЗВАНИЕ НА ГЛАВНОЙ: ССЫЛКА БЕЗ КЛАССА
   ================================================================
   В карточке главной название обёрнуто в обычную ссылку без
   класса — поэтому селектор выше её не доставал, и Storefront
   красил текст в сиреневый. Бьём по структуре: ссылка внутри
   блока .card-b, у которой первым идёт .card-n. */
.td-home .card .card-b > a,
.td-home .card .card-b > a:visited,
.td-home .card .card-b > a .card-n,
.td-home .card .card-b > a .card-n span {
	color: var(--ink) !important;
	text-decoration: none !important;
}

.td-home .card .card-b > a:hover .card-n,
.td-home .card .card-b > a:hover {
	color: var(--green2) !important;
}

/* Подпись вида внутри той же ссылки — приглушённая */
.td-home .card .card-b > a .card-s,
.td-home .card .card-b > a .card-s span {
	color: var(--muted) !important;
}

/* Последняя сиреневая ссылка: в карточке товара Storefront
   красит служебную ссылку в подписи (категория, артикул и т.п.).
   Наш общий селектор её не доставал, потому что она не внутри
   .entry-content — она в .product_meta. Переводим на приглушённый
   зелёный, как остальной служебный текст. */
.single-product .product_meta,
.single-product .product_meta a,
.single-product .product_meta a:visited,
.single-product .woocommerce-product-details__short-description a,
.single-product .woocommerce-product-details__short-description a:visited {
	color: var(--muted) !important;
}

.single-product .product_meta a:hover {
	color: var(--green2) !important;
}

/* ================================================================
   СИРЕНЕВЫЕ ХВОСТЫ
   ================================================================
   Проверка по всему сайту нашла ещё три ссылки фиолетового:
   служебная ссылка вокруг фото в галерее товара и две в нижней
   мобильной панели Storefront. На экране их не видно (панель
   скрыта, фото-ссылка без текста), но в разметке цвет остаётся.
   Закрываем, чтобы при любых настройках не мелькнул чужой оттенок. */
.woocommerce-product-gallery a,
.woocommerce-product-gallery__image a,
.woocommerce div.images a {
	color: var(--ink) !important;
}

.storefront-handheld-footer-bar a,
.storefront-handheld-footer-bar a:visited,
.storefront-handheld-footer-bar .footer-cart-contents,
.storefront-handheld-footer-bar li.search > a,
.storefront-handheld-footer-bar li.cart > a {
	color: var(--ink) !important;
}

/* ================================================================
   КНОПКА «МЕНЮ» БЕЗ ЗАТЕМНЕНИЯ ПРИ НАВЕДЕНИИ
   ================================================================
   Мы только что приравняли фон кнопки к фону страницы, и
   осталось только тонкое тёмное подчёркивание при наведении.
   Оно читается как случайный артефакт, поэтому убираем:
   кнопка остаётся кнопкой за счёт рамки и не меняется при
   касании. */
body .site-header .menu-toggle:hover,
body .site-header button.menu-toggle:hover,
body .site-header .menu-toggle:focus,
body .site-header button.menu-toggle:focus,
body .site-header button.menu-toggle:focus-visible,
body .site-header .menu-toggle:active,
body .site-header button.menu-toggle:active {
	background-color: var(--paper) !important;
	border-color: var(--line2) !important;
	color: var(--ink) !important;
	transition: none !important;
}

/* ================================================================
   ФУТЕР: ССЫЛКИ СВЕТЛЫЕ, А НЕ ЗЕЛЁНЫЕ НА ЗЕЛЁНОМ
   ================================================================
   Когда я переводил фиолетовые ссылки в палитру, в правило
   попал и `footer a` — он получил var(--green2). Но сам футер
   залит тем же var(--green2), то есть тёмно-зелёным по
   тёмно-зелёному: текст есть, ширина есть, а прочитать его
   нельзя. Заголовки разделов и абзацы при этом видны, поэтому
   блоки выглядят пустыми.

   Внутри тёмного футера ссылки возвращаем в светлый тон.
   Это ровно то, что было до правки ссылок, только в нашем цвете
   вместо фиолетового. */
footer.ft a,
footer.ft a:visited,
body .site-footer a,
body .site-footer a:visited {
	color: #CDD8CB !important;
	text-decoration: none;
}

footer.ft a:hover,
footer.ft a:focus,
body .site-footer a:hover,
body .site-footer a:focus {
	color: #FFFFFF !important;
}

/* ================================================================

/* ================================================================
   ДЕСКТОП: ЧЕТЫРЕ ПРАВКИ ПО СКРИНШОТУ
   ================================================================
   Пользователь показал, что на широком экране страница товара
   разъезжается: по краям торчат фото соседних товаров, справа
   налезает футер, внизу висит счётчик корзины, а рядом с
   корзиной английский текст.

   1) КАРТОЧКИ ПЕРЕКЛЮЧЕНИЯ. Storefront на странице товара
      выводит блок .storefront-product-pagination — стрелки с
      фотографиями соседних товаров. Он позиционируется мимо
      потока страницы, поэтому фото уезжали за края экрана, а
      у страницы появлялась лишняя высота. На десктопе он не
      нужен: есть галерея товара и «Похожие товары».

   2) ФУТЕР НАЕЗЖАЛ. Разметка верная — футер стоит после
      контента. Дело в том, что .content-area у Storefront
      сделан float: left, и футер, следующий за ним в потоке,
      поднимался вверх и обтекал этот блок. Лечится clear: both:
      футер начинается ниже всего плавающего блока.

   3) НИЖНИЙ СЧЁТЧИК КОРЗИНЫ. Панель «₽0 товаров» нужна на
      телефоне, где палец не дотягивается до иконки. На
      десктопе она только мешает — скрыта.

   4) ГАЛЕРЕЯ. Увеличенное фото (zoomImg) было 675x900 внутри
      блока шириной 447 и вылезало за его край. Отключаем
      увеличение при наведении и прячем стрелки — у товара одна
      фотография, листать нечего.

   Английский текст в мини-корзине («0 items», «View your
   shopping cart») переведён в словаре темы. */
@media (min-width: 768px) {

	/* 1. Карточки переключения на соседние товары */
	.storefront-product-pagination {
		display: none !important;
	}

	/* 2. Футер не должен обтекать плавающий блок контента */
	footer.ft {
		clear: both !important;
	}

	/* 3. Нижняя панель корзины — только для мобильных */
	.td-mcart {
		display: none !important;
	}

	/* 4. Галерея: без увеличения и без стрелок */
	.single-product .woocommerce-product-gallery {
		overflow: hidden !important;
	}

	.single-product .woocommerce-product-gallery .zoomImg {
		width: 100% !important;
		height: auto !important;
		cursor: default !important;
	}

	.single-product .woocommerce-product-gallery__nav,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		display: none !important;
	}

	/* Мини-корзина в шапке: всплывающая панель на десктопе
	   лишняя, рядом уже есть ссылка «Корзина» в меню */
	.site-header-cart .widget_shopping_cart_content {
		display: none !important;
	}
}

/* ================================================================
   БЛОК КОРЗИНЫ В ШАПКЕ: УБИРАЕМ
   ================================================================
   Справа от меню стоял блок: иконка корзины, сумма и подпись
   «0 items». Именно он давал английский текст — его печатает
   сама тема Storefront, минуя перевод, поэтому словарь темы его
   не берёт.

   Ссылка «Корзина» остаётся в главном меню, а на телефоне
   снизу есть своя панель с суммой и количеством. Блок убираем
   целиком: иконку, сумму и счётчик — все три элемента шли
   рядом и повторяли то, что уже есть рядом.

   Правило только для этого блока: .site-header-cart. Остальная
   шапка — логотип, меню, поиск — не затронута. */
.site-header-cart {
	display: none !important;
}

/* ================================================================
   ПРАВКИ ПО СКРИНШОТАМ: КОРЗИНА И АНГЛИЙСКИЕ НАДПИСИ
   ================================================================
   1) «Промежуточный итог» в корзине. Мы его убирали, но
      наша таблица заказа к этому моменту относилась только к
      странице оформления — у корзины своя разметка, и правило
      её не задевало. Теперь гасим строку подытога и в самой
      корзине: при одном товаре она повторяет цену того же
      товара, а рядом уже есть «Итого». С несколькими товарами
      строка возвращается — суммы перестают совпадать.

   2) Уведомление «has been added to your cart». Строка
      приходит из JS-параметров WooCommerce, поэтому обычный
      перевод её не берёт — заменяем в готовой странице.

   3) Статья: «Posted on … », «Leave a comment», «Category:».
      Английские подписи WordPress, печатаются мимо словаря.
      Статьи у нас служебные — переводим их в словаре темы.

   4) «No products were found matching your selection.» на
      пустой категории. Тот же случай: словарь не покрывает
      эту строку.

   5) Сортировка на узком экране прилипала к счётчику
      «Показано 1–24 из 348» — разносим их по краям. */

/* --- 1. Корзина: промежуточные суммы --- */
body.td-one-item .woocommerce table.cart tr.cart-subtotal,
body.td-one-item .woocommerce-cart-form tr.cart-subtotal,
body.td-one-item .woocommerce table.cart .cart-subtotal,
body.td-one-item .woocommerce .cart-collaterals .cart-subtotal {
	display: none !important;
}

/* --- 2. Уведомление о добавлении в корзину --- */
.woocommerce-message,
.added_to_cart {
	font-size: .92rem;
}

/* --- 3. Подписи статьи --- */
.single-post .posted-on,
.single-post .byline,
.single-post .entry-meta,
.entry-meta .posted-on,
.entry-meta .byline {
	font-size: .82rem;
	color: var(--muted);
}

.single-post .comments-link,
.entry-meta a,
.single-post .cat-links {
	color: var(--green2) !important;
}

/* --- 5. Сортировка и счётчик — по краям, без слипания --- */
/* Storefront вешает на блок float и задаёт ему узкую ширину.
   Из-за этого он схлопывался в доли пикселя, а содержимое
   (форма сортировки, счётчик, пагинация) выпадало вправо за
   край страницы — на скриншоте это выглядело как срезанные
   кнопки. Возвращаем нормальную ширину и гасим обтекание.

   Порядок — flex-start, а не space-between: разведённые по
   краям список сортировки и счётчик оставляли пустое место
   посередине и выглядели разорванными. Держим их рядом, слева,
   как их и показывал Storefront изначально. */
.storefront-sorting {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box;
}

.storefront-sorting .woocommerce-result-count,
.storefront-sorting .woocommerce-ordering {
	margin: 0 !important;
}

@media (max-width: 600px) {
	.storefront-sorting {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.storefront-sorting .woocommerce-ordering {
		width: 100%;
	}
	.storefront-sorting .woocommerce-ordering select {
		width: 100%;
	}
}

/* ================================================================
   КОРЗИНА: ЗАГОЛОВОК КОЛОНКИ И ДУБЛЬ «ИТОГО»
   ================================================================
   Скрин показал две лишние надписи, и обе шли из разметки
   WooCommerce, а не из наших правок:

   1) «Промежуточный итог» — это заголовок колонки в таблице
      товаров. Строку с этой суммой мы уже убрали, а заголовок
      остался и повис над пустым местом. Гасим по классу ячейки
      product-subtotal, а не по номеру: нумерация в таблице
      WooCommerce разная на разных экранах, и по номеру скрывалась
      ещё и колонка «Цена».

   2) «Итого» над блоком итога дублирует подпись «Итого» в самом
      блоке. Оставляем одну — внутри блока, где она стоит рядом
      с суммой и читается как часть таблицы. */

body.td-one-item .woocommerce table.cart thead th.product-subtotal,
body.td-one-item .woocommerce-cart-form thead th.product-subtotal,
body.td-one-item .woocommerce table.cart tbody td.product-subtotal,
body.td-one-item .woocommerce-cart-form tbody td.product-subtotal {
	display: none !important;
}

/* Дубль заголовка над блоком итога */
body.td-one-item .woocommerce .cart-collaterals .cart_totals > h2,
body.td-one-item .woocommerce .cart-collaterals .cart-totals > h2,
body.td-one-item .woocommerce .cart_totals h2,
body.td-one-item .woocommerce .cart-totals h2 {
	display: none !important;
}

/* ================================================================
   КНОПКА «СМОТРЕТЬ КОРЗИНУ» И ПОЛЕ КОЛИЧЕСТВА
   ================================================================
   Две мелочи со скриншотов.

   1) Стрелка справа на кнопке уведомления — это глиф в ::after,
      который мы когда-то рисовали. На длинной надписи он не
      влезал и уезжал на вторую строку: кнопка становилась вдвое
      выше и смещалась. Раз надпись короткая, стрелка не нужна —
      гасим её целиком. На кнопки «В корзину» в каталоге это не
      распространяется: там свой селектор.

   2) Поле количества и кнопка «В корзину» на карточке товара
      стояли рядом, но разной высоты (46 против 50) и с разным
      отступом сверху — из-за чего ряд выглядел перекошенным, а
      кнопка ещё и прыгала по высоте в зависимости от того,
      влезает ли поле в строку. Собираем их в один ряд flex с
      общей высотой и вертикальным центрированием.

   Поле показывается не у всех товаров: WooCommerce прячет его,
   когда максимум равен 1 (остаток одна штука). Это его штатное
   поведение, и ради него ряд не ломается — кнопка просто
   занимает всю ширину. */
/* Селекторы ниже намеренно «перевесовели» по числу классов:
   у ссылки в уведомлении класс «button wc-forward», и правило
   .woocommerce .button.wc-forward::after (три класса в селекторе)
   било наше (два), из-за чего стрелка оставалась на месте, хотя
   правило шло позже по файлу. Поэтому здесь тот же набор классов
   и !important — он выигрывает и по весу, и по порядку. */
.woocommerce-message .button.wc-forward::after,
.woocommerce-message a.button.wc-forward::after,
.woocommerce-message .button::after,
.woocommerce-message a.button::after,
.woocommerce-message a::after,
.woocommerce .button.wc-forward::after,
.woocommerce a.button.wc-forward::after,
.woocommerce .woocommerce-message .button::after,
.added_to_cart .button.wc-forward::after,
.added_to_cart a.button.wc-forward::after,
.added_to_cart .button::after,
.added_to_cart a.button::after,
.added_to_cart a::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	background: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Ряд «количество + кнопка» на карточке товара */
.woocommerce div.product form.cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.woocommerce div.product form.cart .quantity {
	display: block !important;
	flex: 0 0 auto;
	margin: 0 !important;
	min-width: 68px;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 68px !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 8px !important;
	text-align: center;
	font-size: 1rem !important;
	line-height: 1 !important;
	border-radius: 8px !important;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	margin: 0 !important;
	-webkit-appearance: none;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
	flex: 0 0 auto;
	height: 50px !important;
	margin: 0 !important;
	line-height: 48px !important;
	padding: 0 22px !important;
	border-radius: 8px !important;
}

/* ================================================================
   ДУБЛЬ ПАГИНАЦИИ В ВЕРХНЕМ БЛОКЕ СОРТИРОВКИ
   ================================================================
   WooCommerce печатает пагинацию дважды: один раз снизу, где она
   у нас и работает, и ещё раз внутри блока сортировки сверху.
   Верхняя — та, что уезжала вправо и обрезалась краем окна.

   Убрать её нужно точечно: нижнюю не трогаем вообще, чтобы не
   потерять рабочую навигацию. Селектор — с указанием, что
   элемент лежит именно внутри .storefront-sorting. */
.storefront-sorting .woocommerce-pagination,
.storefront-sorting nav.woocommerce-pagination,
.storefront-sorting ul.page-numbers {
	display: none !important;
}

/* ================================================================
   СОРТИРОВКА И СЧЁТЧИК — РЯДОМ, НЕ ПО КРАЯМ
   ================================================================
   После прошлой правки список сортировки стоял слева, а счётчик
   «Показано 1–24 из 348» уезжал вправо под пагинацию — между
   ними зияла пустая полоса во всю ширину колонки, и блок
   выглядел разорванным на две части.

   Возвращаем компактную группу: счётчик сразу после списка,
   перенос — если не влезли. Порядок элементов в разметке
   задаём порядом, а не float'ом, потому что у Storefront оба
   элемента плавают влево. */
.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count {
	float: none !important;
}

.storefront-sorting .woocommerce-result-count {
	order: 2;
	margin-right: 0 !important;
}

.storefront-sorting .woocommerce-ordering {
	order: 1;
}

@media (max-width: 600px) {
	.storefront-sorting .woocommerce-ordering,
	.storefront-sorting .woocommerce-result-count {
		width: 100%;
	}
	.storefront-sorting .woocommerce-ordering {
		order: 1;
	}
	.storefront-sorting .woocommerce-result-count {
		order: 2;
	}
}

/* ================================================================
   ПАГИНАЦИЯ — СЛЕВА, ПОД КАРТОЧКАМИ
   ================================================================
   Storefront прижимает пагинацию вправо (float:right), а счётчик
   и сортировку оставил слева — блок читался рвано: справа цифры,
   слева подпись, между ними пустое место.

   Возвращаем всё в начало колонки: сортировка, счётчик, затем
   пагинация. Правка только на десктопе: на узком экране пагинация
   уже растянута на всю ширину, и трогать её не нужно.

   Селектор с !important — потому что float из Storefront идёт
   с его собственным весом, а порядок элементов мы задаём через
   flex-контейнер страницы, а не перестановкой в разметке. */
@media (min-width: 701px) {
	.woocommerce .woocommerce-pagination {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		margin: 26px 0 0 !important;
		text-align: left !important;
	}

	/* Направляющие кнопки Storefront скрывали номера по краям —
	   на первой странице «назад» некуда вести. Оставляем только
	   стрелки вперёд/назад, номера не трогаем. */
	.woocommerce .woocommerce-pagination .prev,
	.woocommerce .woocommerce-pagination .next {
		text-transform: none;
	}
}

/* Список номеров — влево. Он растянут flex'ом на всю колонку, и
   центрировался через justify-content по центру; выравнивание
   навига задаёт сам список, а не текст внутри ссылок. */
@media (min-width: 701px) {
	.woocommerce .woocommerce-pagination ul.page-numbers {
		justify-content: flex-start !important;
		text-align: left !important;
	}
}

/* ================================================================
   ВТОРОЙ РЯД — В ЛЕВО, КАК ПАГИНАЦИЯ
   ================================================================
   Счётчик и сортировка стояли на 32px правее кнопок пагинации:
   у блока есть псевдоэлементы-таблицы (::before/::after) от
   Storefront, они пустые, но занимают место и сдвигают весь ряд.

   Гасим их — иначе список сортировки, счётчик и пагинация
   никак не выровняются по общему левому краю. */
@media (min-width: 701px) {
	.storefront-sorting::before,
	.storefront-sorting::after {
		content: none !important;
		display: none !important;
	}
}

/* Кнопки пагинации — за общий левый край колонки. У первой
   кнопки есть рамка 1px, из-за чего список визуально уезжал
   на неё правее, чем список сортировки. Сдвигаем весь список
   на ширину рамки, чтобы рамка первой кнопки встала ровно на
   край колонки — как и оба блока под ней. */
@media (min-width: 701px) {
	.woocommerce .woocommerce-pagination ul.page-numbers {
		margin-left: -7px !important;
	}
}

/* ================================================================
   СПИСОК СОРТИРОВКИ: НАДПИСЬ И СТРЕЛКА ПО ЦЕНТРУ
   ================================================================
   На скриншоте крупным планом было видно, что надпись и стрелка
   стоят на разной высоте: текст приподнят, стрелка уехала вниз
   и подпись встала вразнобой.

   Причина системная. Список отрисован «как есть»
   (appearance:auto), поэтому высоту поля и положение стрелки
   рисует сам браузер, а вертикальный центр надписи считается по
   строке текста. У Storefont на такой высоте эти две вещи
   расходятся на несколько пикселей.

   Лечится рисованием стрелки самостоятельно:
     appearance:none  — убираем системный треугольник,
                         высоту теперь задаём мы;
     line-height       — равен высоте поля, значит надпись
                         центрируется по нему точно;
     маска на ::after  — стрелка такая же, как у наших кнопок,
                         стоит по центру поля и не прыгает.

   Размеры кегля и отступов не меняю — только выравнивание. */
@media (min-width: 701px) {
	.storefront-sorting .woocommerce-ordering {
		position: relative;
	}

	.storefront-sorting .woocommerce-ordering select.orderby {
		appearance: none !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		height: 40px !important;
		line-height: 40px !important;
		padding: 0 38px 0 14px !important;
		background-image: none !important;
		cursor: pointer;
	}

	/* Стрелка — отдельным псевдоэлементом на форме. Раньше маску
	   вешали на сам select, и она растягивалась на всё поле:
	   вместо подписи с треугольником появлялась целая полоса из
	   галочек. Размер здесь задан явно, поэтому маска рисует
	   ровно один маленький треугольник по центру поля. */
	.storefront-sorting .woocommerce-ordering::after {
		content: "" !important;
		display: block !important;
		position: absolute;
		right: 14px;
		top: 50%;
		width: 11px;
		height: 7px;
		margin-top: -3.5px;
		pointer-events: none;
		background-color: currentColor !important;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	}
}

/* ================================================================
   ЦЕНА В КОРЗИНЕ — БЕЗ ПЕРЕНОСА
   ================================================================
   На скриншоте «₽1 550» распалось на две строки: колонка «Цена»
   сжимается, когда название товара длинное, и неразрывная сумма
   переносится по пробелу. Ячейка 122px, из них на текст остаётся
   70px, а сама сумма занимает 51px — влезает, но при более
   длинном названии колонка ужимается ещё сильнее, и перенос
   случается уже по вине одного пробела.

   Запрещаем перенос: сумма всегда одной строкой, а колонка не
   может стать уже своей содержимого. Минимальную ширину задаём
   и заголовку, и ячейке — иначе «Промежуточный итог» в шапке
   переносился на две строки, как на скриншоте. */
.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price .woocommerce-Price-amount,
.woocommerce table.cart td.product-subtotal,
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal .woocommerce-Price-amount {
	white-space: nowrap !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
}

.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-price {
	min-width: 96px;
}

/* ================================================================
   «ПРОМЕЖУТОЧНЫЙ ИТОГ» В БЛОКЕ «ИТОГО» — УБИРАЕМ ВСЕГДА
   ================================================================
   Раньше строку прятали только когда в корзине один товар: тогда
   она повторяла цену того же товара и выглядела как ошибка. Но
   стоит добавить второй товар — строка возвращалась, и рядом с
   ней стояло точно такое же «Итого»: две одинаковые суммы одна
   под другой, как на скриншоте пользователя.

   Убираем всегда: «Промежуточный итог» и «Итого» у нас равны
   (доставка бесплатная, налогов нет), поэтому строка не несёт
   информации и только мешает. Проверку по числу товаров убираем
   — она больше не нужна.

   Правило ниже перекрывает прежнее по весу: класс .cart-subtotal
   скрывается безусловно, на всех страницах. */
.woocommerce .cart_totals tr.cart-subtotal,
.woocommerce .cart-totals tr.cart-subtotal,
.woocommerce .cart-collaterals tr.cart-subtotal,
.woocommerce table.cart tr.cart-subtotal,
.woocommerce-cart-form tr.cart-subtotal,
body.td-one-item .cart-subtotal,
.woocommerce .cart-subtotal {
	display: none !important;
}

/* Заголовок колонки с суммой по позиции — тоже убираем. Строку
   подытога мы спрятали, а заголовок остался и висел над пустой
   колонкой: на скриншоте он переносился на две строки и выглядел
   как название несуществующей цифры. */
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal,
.woocommerce-cart-form th.product-subtotal,
.woocommerce-cart-form td.product-subtotal {
	display: none !important;
}

/* ================================================================
   «ПОДЫТОГ» В МОБИЛЬНОЙ КАРТОЧКЕ ТОВАРА — ТОЖЕ ЛИШНЕЕ
   ================================================================
   На узком экране Storefront переносит сумму позиции в карточку
   отдельной строкой с подписью «Подытог». При количестве 1 она
   повторяет строку «Цена» выше — читается как две разные суммы
   об одном товаре.

   Убираем подпись, но не значение: при количестве больше одного
   сумма по позиции уже не равна цене, и она нужна. Поэтому
   строка остаётся, исчезает только слово «Подытог». */
@media (max-width: 700px) {
	/* Селектор повторяет тот, что печатает подпись, иначе
	   более узкое правило в теме перебивает наш content. */
	.woocommerce table.cart tr.cart_item td.product-subtotal::before,
	.woocommerce table.cart td.product-subtotal::before {
		content: "" !important;
	}
	.woocommerce table.cart td.product-subtotal .label,
	.woocommerce table.cart td.product-subtotal > .screen-reader-text {
		display: none !important;
	}
	.woocommerce table.cart td.product-subtotal {
		padding-top: 0 !important;
	}
}

/* ================================================================
   КОРЗИНА: ЭЛЕМЕНТЫ СТРОКИ НА ОДНОЙ ВЫСОТЕ
   ================================================================
   Замер показал разброс по вертикали: крестик стоял на отметке
   557, фото и количество — на 577, название и цена — на 579.
   Всё это внутри одной строки высотой 111px, то есть блоки
   стояли не по центру, а каждый сам по себе.

   Причина в вертикальном выравнивании: у ячеек таблицы
   valign=top — элементы прижаты к верхнему краю строки, и чем
   выше элемент, тем выше он стоит. Крестик ещё и вынесен
   Storefront в отдельную колонку, поэтому отступ получался
   ещё и от неё.

   Ставим всем ячейкам valign=middle, а внутри каждой —
   flex с центрированием. Тогда крестик, фото, название, цена и
   количество встанут по одной оси независимо от своих высот.

   Плюс подравниваем сами элементы между собой: названию и цене
   задаём одинаковую высоту строки, чтобы они совпали. */
.woocommerce table.cart tr.cart_item > td {
	vertical-align: middle !important;
}

/* Внутренние блоки ячеек — по центру строки */
.woocommerce table.cart tr.cart_item > td.product-thumbnail,
.woocommerce table.cart tr.cart_item > td.product-name,
.woocommerce table.cart tr.cart_item > td.product-price,
.woocommerce table.cart tr.cart_item > td.product-quantity {
	display: table-cell !important;
	vertical-align: middle !important;
}

.woocommerce table.cart tr.cart_item > td.product-thumbnail img,
.woocommerce table.cart tr.cart_item > td.product-name a,
.woocommerce table.cart tr.cart_item > td.product-price .amount,
.woocommerce table.cart tr.cart_item > td.product-quantity .quantity {
	display: block !important;
	margin: 0 auto !important;
}

/* Крестик: своя колонка Storefront, центрируем и в ней */
.woocommerce table.cart tr.cart_item > td.product-remove {
	vertical-align: middle !important;
	text-align: center;
}

.woocommerce table.cart tr.cart_item > td.product-remove a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0 auto !important;
}

/* Название и цена — одинаковая высота строки, чтобы стояли ровно */
.woocommerce table.cart tr.cart_item > td.product-name a,
.woocommerce table.cart tr.cart_item > td.product-price .amount {
	line-height: 24px !important;
}

/* Количество: по центру строки, а не по верху */
.woocommerce table.cart tr.cart_item > td.product-quantity .quantity {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ================================================================
   КОРЗИНА: ОДНО «ИТОГО», В СТИЛЕ ЗАГОЛОВКА
   ================================================================
   Блок итогов печатал подпись дважды: отдельным заголовком
   «Итого» над таблицей и строкой «Итого — сумма» внутри неё.
   Оставляем одну — строку внутри блока, где она стоит рядом с
   суммой, — но одеваем её в шрифт и кегль заголовка, чтобы
   строка стала тем, чем выглядит заголовок.

   Отдельный заголовок над блоком убираем: он висел над пустым
   местом после того, как строка подытога спрятана. */

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce .cart-collaterals .cart-totals > h2,
.woocommerce .cart_totals > h2,
.woocommerce .cart-totals > h2 {
	display: none !important;
}

.woocommerce .cart_totals table.cart_totals,
.woocommerce .cart-totals table.cart_totals {
	border-top: 0 !important;
}

/* Строка «Итого» — заголовком: Bodoni, как у разделов. */
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart-totals tr.order-total th {
	width: auto !important;
	padding: 0 18px 0 0 !important;
	background: transparent !important;
	text-align: left !important;
	font-family: var(--disp) !important;
	font-size: 1.35rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--ink) !important;
	white-space: nowrap;
}

.woocommerce .cart_totals tr.order-total td,
.woocommerce .cart-totals tr.order-total td {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	text-align: right !important;
	font-family: var(--disp) !important;
	font-size: 1.35rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--ink) !important;
	white-space: nowrap;
}


/* ================================================================
   КОРЗИНА: ФИНАЛЬНАЯ ПОДЧИСТКА МОБИЛЬНОЙ КАРТОЧКИ (самое последнее
   правило в файле — осознанно, чтобы закрыть весь каскад выше)
   ================================================================
   1) Подписи (::before «Товар», «Цена», «Количество») снова
      слипались со значениями в одну строку: среди ранних правил
      оставались block-декларации, побеждавшие flex-раскладку
      ячеек. Задаём flex-колонку последними правилами — каскад
      дальше уже не перебивает.
   2) Строка подытога под окном количества дублирует цену товара —
      убираем её на мобильном всегда (итог и так виден в «Итого»).
   3) «Итого» стоял на краю страницы, левее содержимого карточек
      (у карточек внутренний отступ 16px). Выравниваем подпись и
      сумму по краям контента карточек. */
@media (max-width: 767px){
  .woocommerce table.cart tr.cart_item > td.product-name,
  .woocommerce table.cart tr.cart_item > td.product-price,
  .woocommerce table.cart tr.cart_item > td.product-quantity{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  /* Подытог-дубль под количеством — скрыт всегда */
  .woocommerce table.cart tr.cart_item > td.product-subtotal{
    display: none !important;
  }
  /* Итого — по краям контента карточек, а не страницы.
     Подпись «Итого:» — это ::before внутри td (th скрыт), поэтому
     отступ ставим на обе стороны ячейки. */
  .woocommerce .cart_totals tr.order-total th{
    padding-left: 16px !important;
  }
  .woocommerce .cart_totals tr.order-total td{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ================================================================
   ИТАЛИК-АКЦЕНТЫ И ТЕРРАКОТА (позаимствовано из прототипа)
   ================================================================
   1) Части заголовков в <em> раньше печатались Bodoni-италиком —
      той же гарнитурой, что и основной заголовок, поэтому
      «выделенная часть» читалась слабо. Теперь курсивные слова —
      Cormorant: другая пластика сразу уводит их из общего ритма.
      Cormorant при том же кегле выглядит мельче, поэтому 1.08em.
   2) Терракотовый --accent (#C2683F) — только для мелких маркеров:
      счётчик корзины, бейдж «цветёт». На кнопки и заголовки не
      ставим — акцент работает, пока его мало. */
.hero h1 em,
.h2 em,
h2 em{
  font-family: var(--ital) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1.08em !important;
  line-height: 1 !important;
}

.td-home .badge.flow{
  background: var(--accent) !important;
  color: var(--paper) !important;
}

::selection{
  background: var(--accent);
  color: var(--paper);
}

/* Цифра «100» в заголовке секции и точка-маркер под кнопками героя —
   терракота, по примеру номеров шагов в прототипе. */
.h2 .num{
  color: var(--accent) !important;
}
.hero-meta i{
  background: var(--accent) !important;
}


/* Пустая мини-корзина: «₽0 | 0 товаров» -> просто «0 товаров».
   Сумма с нулём и разделитель ничего не сообщают. */
.td-mcart.is-empty .td-mcart__sum,
.td-mcart.is-empty .td-mcart__sep{
  display: none !important;
}


/* ================================================================
   ПРАВКИ ПО ИТОГАМ ПИСЕМ 06.10 (4.140)
   ================================================================ */

/* 1) ПОИСК В МОБИЛЬНОЙ ШАПКЕ.
   Раньше .site-header .site-search был display:none на телефоне —
   окошка поиска просто не существовало. Показываем его отдельной
   строкой сетки под логотипом: поле на всю ширину, кнопка отдаена. */
@media (max-width: 767px){
  /* Селектор усилен: старые правила гасят поиск с body.home и
     .site-header (оба !important) — по спецификации наш блок
     должен их перебивать. */
  body .site-header .col-full .site-search,
  body.home .site-header .col-full .site-search,
  .site-header .col-full .site-search{
    display: block !important;
    grid-row: 3;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .site-header .site-search .widget_product_search{
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
  }
  .site-header .site-search form.search-form,
  .site-header .site-search .woocommerce-product-search{
    display: flex !important;
    width: 100% !important;
    gap: 8px;
    align-items: stretch;
  }
  .site-header .site-search .search-field{
    flex: 1 1 auto;
    width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    font-size: 15px !important;
    background: var(--card) !important;
    border: 1px solid var(--line2) !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    color: var(--ink) !important;
  }
  .site-header .site-search .search-field::placeholder{
    color: var(--muted) !important;
  }
  /* Кнопку-стрелку внутри поля прячем: Enter и так ищет */
  .site-header .site-search .search-field::-webkit-search-cancel-button{
    -webkit-appearance: none;
  }
}

/* 2) НАЗВАНИЯ В КАРТОЧКАХ: АДАПТИВНАЯ ВЫСОТА.
   Было: фиксированный max-height + overflow:visible — длинный текст
   вылезал вниз и налезал на латинское название, а короткое давало
   пустую пропасть (резерв под 4-6 строк).
   Стало: высота подстраивается под текст, ограничение — только
   предел строк line-clamp (многоточие при обрезке), ровность ряда
   держат сетка и кнопка, прижатая к низу карточки. */
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
  margin: .5em 0 .2em !important;
}
.woocommerce ul.products[class*="columns-"] li.product .td-latin-name {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
}

/* 3) ЧИПЫ КАТЕГОРИЙ НАД КАТАЛОГОМ */
.td-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.td-cats__a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line2);
  border-radius: 99px;
  background: var(--card);
  font-size: .84rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.td-cats__a i{
  font-style: normal;
  font-size: .72rem;
  color: var(--muted);
}
.td-cats__a:hover{
  border-color: var(--sage);
}
.td-cats__a.is-on{
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.td-cats__a.is-on i{
  color: rgba(255,255,255,.75);
}
@media (max-width: 480px){
  .td-cats{ gap: 6px; margin-bottom: 16px; }
  .td-cats__a{ padding: 7px 11px; font-size: .78rem; }
}

/* 4) ПОДПИСИ У КНОПОК ПАГИНАЦИИ */
.td-pg-txt{
  margin-left: .4em;
  font-size: .82em;
}
@media (max-width: 480px){
  .td-pg-txt{ margin-left: .3em; font-size: .76em; }
}

/* 5) ПЕРЕНОСЫ: балансировка строк в заголовках и названиях.
   text-wrap:balance убирает «висячие» переносы (строка из одной
   буквы в конце). Поддерживается не везде — там, где нет, текст
   идёт обычным порядком, вреда нет. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.single-product .product_title,
.h2, h1, h2, h3 {
  text-wrap: balance;
}


/* 2б) КНОПКА «В КОРЗИНУ» ПРИЖАТА К НИЗУ КАРТОЧКИ.
   Адаптивная высота названия развела кнопки в ряду: разница доходила
   до 54px. Карточка (li.product) — flex-колонка, кнопка получает
   margin-top:auto и упирается в общий низ ряда. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top: auto !important;
}


/* 2в) СЕТКА ТЯНЕТ КАРТОЧКИ ПО ВЫСОТЕ РЯДА.
   Сетка каталога шла с align-items:start — карточки одной строки
   росли независимо, и прижатая кнопка всё равно стояла на разной
   высоте. Stretch выравнивает высоту карточек ряда, а кнопка
   (margin-top:auto из правила 2б) встаёт на общую линию. */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"] {
  align-items: stretch !important;
}


/* 7) ПАГИНАЦИЯ В ОДНУ СТРОКУ НА МОБИЛЕ.
   Кнопки были крупные (padding 14px, шрифт 15px) — 6 видимых
   элементов не влезали в 360px и «Вперёд» уезжало на второй ряд.
   Ужимаем: padding 8px, шрифт 13px, подписи на мобиле прячем
   (остаётся только стрелка — на 360px это компактнее), многоточие
   скрываем всегда (кнопки «Назад»/«Вперёд» уже покрывают листание). */
@media (max-width: 480px){
  .woocommerce-pagination .page-numbers{
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-width: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
  }
  .woocommerce-pagination .page-numbers.dots,
  .woocommerce-pagination li.td-pg-dots-item{
    display: none !important;
  }
  .td-pg-txt{
    display: none !important;
  }
  .woocommerce-pagination .prev .td-pg-txt,
  .woocommerce-pagination .next .td-pg-txt{
    display: none !important;
  }
}


/* 8) ПОИСК ПЕРЕНЕСЁН ИЗ ШАПКИ В КАТАЛОГ.
   Шапка на телефоне была перегружена: логотип, подпись, поиск,
   меню. Поиск показываем внутри каталога — перед кнопками категорий.
   В шапке его гасим обратно. */
@media (max-width: 767px){
  body .site-header .col-full .site-search,
  body.home .site-header .col-full .site-search,
  .site-header .col-full .site-search{
    display: none !important;
  }
}

/* Стили поиска в каталоге */
.td-cat-search{
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}
.td-cat-search__field{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  font-size: 15px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink);
}
.td-cat-search__field::placeholder{
  color: var(--muted);
}
.td-cat-search__field:focus{
  border-color: var(--sage);
  outline: none;
}
@media (max-width: 480px){
  .td-cat-search{ margin-bottom: 12px; }
  .td-cat-search__field{ height: 42px; font-size: 14px; }
}

/* 9) ГИБРИДНЫЕ ПЕРЕНОСЫ: keep-all + hyphens.
   word-break:keep-all не рвёт слова посреди (убирает переносы по
   одной букве), а hyphens:auto, если слово всё же длинное, даёт
   аккуратный перенос по слогам там, где браузер умеет. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .td-latin-name,
.single-product .product_title,
.td-home .card-n{
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* 10) ДУБЛИРОВАНИЕ ПОИСКА: на десктопе поиск остаётся в шапке
   (там он работал и нравился), в каталоге он добавлен только на
   мобильном — чтобы не было двух полей. */
@media (min-width: 768px){
  .td-cat-search{
    display: none !important;
  }
}


/* 11) ПАГИНАЦИЯ: НЕ ПОДРЕЗАЕТСЯ СНИЗУ.
   Storefront держит у <ul> фиксированную высоту 36px и overflow:auto,
   а у <li> остаётся рамка в 1px сверху и снизу — итог 38px в
   контейнере 36px: кнопки обрезались на 2px сверху и снизу.
   Убираем жёсткую высоту, overflow и рамки. */
.woocommerce-pagination ul.page-numbers{
  height: auto !important;
  overflow: visible !important;
  align-items: center;
}
.woocommerce-pagination ul.page-numbers li{
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span{
  box-sizing: border-box;
  overflow: visible !important;
}


/* 12) ПЕРЕНОСЫ В НАЗВАНИЯХ: СЛОВО НЕ РВЁТСЯ НА КУСКИ.
   overflow-wrap:break-word рвал слово «стрептофилла» на «стрептофилл»
   и «а» — буква висела одна. На названиях убираем break-word:
   keep-all не даёт рвать слово, а если слово совсем не влезает, оно
   целиком уходит на новую строку. Запятую с размером держит
   неразрывный пробел (functions.php). */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .td-latin-name,
.single-product .product_title,
.td-home .card-n{
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 13) ОПИСАНИЕ ТОВАРА БЕЗ ВКЛАДКИ: обычный блок под карточкой. */
.td-product-desc{
  margin: 18px 0 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink);
}
.td-product-desc p{
  margin: 0 0 .8em;
}
.td-product-desc p:last-child{
  margin-bottom: 0;
}
.td-product-desc h2,
.td-product-desc h3,
.td-product-desc h4{
  font-family: var(--disp);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.2em 0 .5em;
}
.td-product-desc ul,
.td-product-desc ol{
  margin: 0 0 .8em;
  padding-left: 1.3em;
}
.td-product-desc li{
  margin-bottom: .3em;
}
.td-product-desc table{
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin: 0 0 1em;
}
.td-product-desc table th,
.td-product-desc table td{
  border: 1px solid var(--line2);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.td-product-desc table th{
  background: var(--paper2);
  font-weight: 600;
}
@media (max-width: 480px){
  .td-product-desc{ font-size: .9rem; margin-top: 14px; }
  .td-product-desc table{ display: block; overflow-x: auto; }
}


/* 14) ЧИПЫ КАТЕГОРИЙ: НЕ ПОДРЕЗАТЬ ХВОСТЫ БУКВ.
   Высота чипа была 31px при line-height 15px — хвосты «щ», «у»,
   «д» доставали до нижней границы и визуально подрезались. Даём
   больше воздуха: line-height и padding вертикально. */
.td-cats__a{
  line-height: 1.45 !important;
  padding: 10px 14px !important;
  min-height: 38px;
  box-sizing: border-box;
}
@media (max-width: 480px){
  .td-cats__a{ padding: 9px 12px !important; min-height: 36px; }
}