/*
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;--green-dark:#2C4433;
  --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;
}

*
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;
}