/* ========= Variables ========= */
:root{
  --site-bg:#FDF7EE; --panel-bg:#E7E3D4; --product-bg:#B7ADAC;
  --accent-pink:#F3D6D1; --accent-aqua:#99CED3; --accent-mint:#DBF1E5;
  --hover-yellow:#FBEEC1; --text:#4B4B4B; --muted:#737373; --danger:#D9777F;
  --ticker-h:40px; --header-bg:#fff; --header-h:56px;
}
@media (max-width:768px){ :root{ --header-h:48px; --ticker-h:36px } }

/* ========= Base ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  background:var(--site-bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:1100px; margin:0 auto;
  padding-left:clamp(16px, 4vw, 36px); padding-right:clamp(16px, 4vw, 36px);
  padding-top:28px; padding-bottom:28px;
}
@media (min-width:1280px){ .container{ max-width:1200px } }
@media (min-width:1440px){ .container{ max-width:1320px } }
@media (min-width:1600px){ .container{ max-width:1440px } }

h1,h2,h3,h4{ color:var(--text); line-height:1.2; margin:0 0 10px }
h1{ font-size:28px; font-weight:800 } h2{ font-size:26px; font-weight:800 }
h3{ font-size:20px; font-weight:700 } h4{ font-size:16px; font-weight:700 }
a.link-clean{ color:inherit; text-decoration:none } a.link-clean:hover{ text-decoration:underline }

/* ========= Layout (header/ticker) ========= */
.ticker-top{ position:sticky; top:0; z-index:60; border-bottom:1px solid rgba(0,0,0,.06) }
.ticker-top .container{ padding-top:6px; padding-bottom:6px }

.header-sticky{
  position:sticky; top:var(--ticker-h); z-index:50; background:var(--header-bg);
  box-shadow:0 6px 12px rgba(16,24,40,.06); border-left:0; border-right:0; border-radius:0; padding:0;
}
.header-row{ display:flex; gap:16px; align-items:center; min-height:var(--header-h); padding:0 }
.header-links{ margin-left:auto; display:flex; gap:10px; align-items:center }
.logo{ display:inline-flex; align-items:center; justify-content:center; height:var(--header-h); padding:0 4px; text-decoration:none; color:var(--text) }
.logo img{ display:block; max-height:calc(var(--header-h) - 12px); height:auto; width:auto }

/* ========= Card/Buttons/etc ========= */
.card{
  background:linear-gradient(180deg,#fff,#fbfaf9);
  border:1px solid var(--panel-bg); border-radius:14px;
  box-shadow:0 12px 30px rgba(16,24,40,.06); padding:18px;
}
.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (min-width:1536px){ .grid-4{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:768px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr } }

.btn{
  border:0; cursor:pointer; border-radius:12px; padding:12px 20px;
  font-weight:700; font-size:15px; transition:all .22s cubic-bezier(.2,.9,.3,1);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn:disabled{ opacity:.7; cursor:not-allowed }
.btn--cart-header{ background:#99CED3; color:#333; box-shadow:0 8px 20px rgba(0,0,0,.08) }
.btn--primary{ background:var(--accent-aqua); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.08) }
.btn--primary:hover{ background:var(--hover-yellow); color:var(--text); transform:scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.12) }
.btn--confirm{ background:var(--accent-aqua); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.btn--confirm:hover{ background:var(--accent-mint); color:var(--text); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12) }
.btn--secondary{ background:var(--panel-bg); color:var(--text); border:1px solid rgba(0,0,0,.04) }
.btn--secondary:hover{ filter:brightness(1.03); transform:translateY(-2px) }

.input, select, textarea,
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="search"], input[type="password"]{
  width:100%; border:1px solid var(--panel-bg); border-radius:10px; padding:10px 12px; background:#fff; color:var(--text)
}
.input:focus, select:focus, textarea:focus, input:focus{
  outline:none; box-shadow:0 0 0 3px rgba(153,206,211,.35); border-color:var(--accent-aqua)
}

/* ========= Tables ========= */
table.ui{
  width:100%; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden;
  table-layout:fixed; /* фикс ширины колонок */
}
table.ui th, table.ui td{
  padding:12px 14px;
  word-break:break-word; overflow-wrap:anywhere; /* длинные значения не распирают */
}
table.ui thead th{ background:#fff; border-bottom:1px solid var(--panel-bg); text-align:left; font-weight:700 }
table.ui tbody tr{ background:#fff }
table.ui tbody tr+tr td{ border-top:1px solid var(--panel-bg) }
.break-any{ word-break:break-word; overflow-wrap:anywhere }

/* ========= Prices ========= */
.price-old{ text-decoration:line-through; color:var(--muted); margin-right:8px }
.price-new{ color:#dc2626; font-weight:800 }
.price{ font-weight:600 }

/* ========= Product preview ========= */
.product-preview{
  display:flex; align-items:center; justify-content:center;
  background:var(--product-bg); color:#fff; border-radius:8px; font-weight:700;
  position:relative; overflow:hidden; flex:1 1 auto; min-width:0;
}
.preview-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .25s ease }

/* ========= Ticker ========= */
.ticker{
  flex:1 1 auto; background:var(--accent-mint); border:1px solid rgba(0,0,0,.04);
  border-radius:10px; overflow:hidden; padding:8px 12px; min-height:var(--ticker-h);
  display:flex; align-items:center
}
.ticker__text{ white-space:nowrap; transition:opacity .3s ease, transform .3s ease }
.ticker__text.is-out{ opacity:0; transform:translateY(-8px) }
.ticker__text.is-in{ opacity:1; transform:translateY(0) }

/* ========= Footer ========= */
.muted{ color:var(--muted) } .danger{ color:var(--danger) }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none } }

.site-footer{ background:var(--panel-bg); color:var(--text); padding:40px 0 20px; border-top:1px solid rgba(0,0,0,.1); margin-top:60px }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px }
.footer-list{ list-style:none; padding:0; margin:0 }
.footer-list li{ margin-bottom:8px }
.footer-list a:hover{ text-decoration:underline }
.footer-bottom{ text-align:center; margin-top:30px; font-size:14px; color:var(--muted) }
.section-title{ font-size:20px; font-weight:700; margin:24px 0 12px; text-align:center }

/* ========= Catalog cards ========= */
.product-img{ width:100%; height:220px; object-fit:contain; background:#fff; border-radius:8px; display:block }
@media (max-width:768px){ .product-img{ height:200px } }

/* ========= Product Detail (scoped) ========= */
.container, .grid, .grid > *, .card{ min-width:0 } /* важно: можно сжиматься */
img, video{ max-width:100%; height:auto }          /* медиа не шире контейнера */
h1, .product-title, .sku, .ean{ overflow-wrap:anywhere; word-break:break-word }

.pgallery-row{ display:flex; gap:14px; max-width:100% }
#pgallery > .pgallery-row{ min-width:0 }
.thumbs{ display:flex; flex-direction:column; gap:10px; flex:0 0 78px; max-width:100% }
.thumb-img{ width:78px; height:78px; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer; display:block }

.price-row{ display:flex; justify-content:space-between; align-items:center; margin:12px 0 10px }

.qty-cta-row{
  display:flex; align-items:stretch; gap:10px;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.qty-cta-row .btn{ white-space:nowrap }
.qty-wrap{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:var(--surface);
}
.qty-wrap .qty{ width:80px; padding:6px 8px; border:1px solid rgba(0,0,0,.08); border-radius:8px }

/* --- Tabs --- */
.tabs-card{ background:#fff }                 /* гарантированный белый фон */
.tabs-nav{ display:flex; gap:20px; border-bottom:1px solid var(--panel-bg); margin-bottom:14px }
.tab-link{
  flex:1; padding:12px 20px; font-weight:600; text-align:left;
  color:var(--muted); border-bottom:2px solid transparent; text-decoration:none
}
.tab-link--active{ color:var(--text); border-bottom-color:var(--accent-aqua) }

/* панель не распирает страницу; если что-то шире — скроллится ВНУТРИ */
.tab-panel{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* универсальный класс скрытия, вместо инлайнового display:none */
.is-hidden{ display:none !important }

@media (max-width:480px){
  .qty-cta-row{ flex-wrap:wrap; overflow-x:visible }
  .qty-cta-row .btn{ flex:1 1 100% }
}

/* === Mobile: вкладки в столбик, без переполнений (≤480px) === */
@media (max-width: 480px){
  /* Контейнер вкладок — колонкой, без нижней линии */
  .tabs-nav{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-bottom: 0;
    margin-bottom: 12px;
  }

  /* Кнопки-вкладки на всю ширину, как «плитки» */
  .tab-link{
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--panel-bg);
    border-radius: 10px;
    text-align: left;
    /* убираем нижнюю линию активной вкладки из десктопного стиля */
    border-bottom-width: 1px;
  }
  .tab-link--active{
    border-color: var(--accent-aqua);
    background: #fff;
    /* отключаем «нижний бордер» как индикатор, т.к. теперь плитки */
    border-bottom-color: var(--accent-aqua);
  }

  /* Панели: внутри не скроллим по X, чтобы не было «левого» свайпа */
  .tab-panel{
    overflow-x: visible;
  }
}

/* --- Fix: не даём логотипу сжиматься в шапке --- */
.logo { 
  flex-shrink: 0;      /* логотип не сжимается во флексе */
  min-width: 120px;    /* безопасная минимальная ширина */
}
.logo img {
  max-width: 160px;    /* не раздувать слишком широко */
  height: auto;
}

/* На очень узких экранах уменьшаем «давление» от кнопок справа */
@media (max-width: 480px){
  .header-links {
    gap: 6px;
    overflow-x: auto;      /* если не влезло — скроллится, но логотип виден */
    -webkit-overflow-scrolling: touch;
  }
  .header-links .btn {
    padding: 8px 12px;     /* компактнее кнопки */
    font-size: 14px;
    white-space: nowrap;
  }
}

/* === Mobile header: logo on top, buttons below (≤480px) === */
@media (max-width: 480px){
  .header-row{
    display: grid;                 /* вместо одного ряда делаем две строки */
    grid-template-columns: 1fr;
    row-gap: 8px;
    align-items: center;
  }

  .logo{
    justify-self: center;          /* центрируем логотип */
    flex-shrink: 0;
    min-width: auto;               /* убираем прошлую минимальную ширину */
  }
  .logo img{
    max-height: 36px;              /* компактная высота логотипа */
    max-width: 60vw;               /* не шире 60% экрана */
    height: auto;
    width: auto;
  }

  .header-links{
    margin-left: 0;                /* ряд кнопок под логотипом */
    justify-content: space-between;
    gap: 8px;
    overflow: visible;             /* убираем горизонтальный скролл в шапке */
  }
  .header-links .btn{
    padding: 10px 12px;            /* чуть компактнее */
    font-size: 14px;
    white-space: nowrap;
    flex: 1 1 auto;                /* кнопки тянутся равномерно */
    min-width: 0;
  }

  /* на очень узких — гарантируем, что корзина не уедет за край */
  .btn--cart-header{
    flex: 0 0 auto;                /* фиксируем минимальную ширину */
  }
}

/* === Catalog tree buttons: same feel as CTA === */
.catalog-tree .btn--cat-parent,
.catalog-tree .btn--cat-child{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;          /* как CTA */
  border-radius: 12px;          /* как CTA */
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-weight: 700;
}

/* Parent = #E7E3D4, Child = #DBF1E5 (эти переменные уже так и настроены) */
.catalog-tree .btn--cat-parent{ background: var(--panel-bg);   color: var(--text); }
.catalog-tree .btn--cat-child { background: var(--accent-mint); color: var(--text); }

/* Ховеры — как у CTA: лёгкая реакция */
.catalog-tree .btn--cat-parent:hover,
.catalog-tree .btn--cat-child:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Компактные отступы и колонка на мобиле */
.catalog-tree .catalog-buttons{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.catalog-tree .catalog-buttons + .catalog-buttons{
  margin-top: 20px;
}
.catalog-tree .catalog-buttons > div{ margin-left: 32px; }
@media (max-width: 600px){
  .catalog-tree .catalog-buttons > div{ margin-left: 16px; }
}

/* === Catalog buttons: как CTA, не на всю ширину === */
.catalog-tree .btn--cat-parent,
.catalog-tree .btn--cat-child{
  display: inline-flex;      /* не блочные */
  width: auto;               /* ширина по содержимому */
  flex: 0 0 auto;            /* не тянутся */
  align-self: flex-start;    /* не растягиваются по контейнеру */
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-weight: 700;
}

/* Цвета как просил */
.catalog-tree .btn--cat-parent{ background:#E7E3D4; color:var(--text); }
.catalog-tree .btn--cat-child { background:#DBF1E5; color:var(--text); }

/* Контейнер с кнопками — плитками, с зазорами */
.catalog-tree .catalog-buttons{
  display: flex;
  flex-wrap: wrap;           /* в строку с переносом, как «плитки» */
  gap: 8px 10px;
  align-items: flex-start;
}
.catalog-tree .catalog-buttons > div{ margin-left: 0; } /* убираем прежний отступ */
@media (max-width: 600px){
  .catalog-tree .catalog-buttons{ gap: 8px; }
}

/* === Product page: компактная Add to Cart на мобилке === */
@media (max-width: 480px){
  .qty-cta-row{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }
  /* кнопки больше НЕ тянем на всю ширину */
  .qty-cta-row .btn{
    flex: 0 0 auto !important;
    width: auto !important;
  }
  /* чтобы поле Qty и кнопка были одной высоты и удобны для тапа */
  .qty-wrap, .qty-cta-row .btn{
    min-height: 44px;
  }
}

/* === Cart table fixes: compact rows, no vertical stretching === */

/* горизонтальный скролл таблицы на узких, без ломки строк */
.cart-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.cart-table{ min-width: 640px } /* на очень узких даст скролл по X, а не «ломку» */

/* выравнивание по вертикали */
.cart-table.ui th, .cart-table.ui td{ vertical-align: middle }

/* превью + название в одну линию, и можно сжиматься */
.cart-item{ display:flex; align-items:center; gap:10px; min-width:0 }
.cart-thumb{
  width:56px; height:56px; object-fit:cover; border-radius:8px;
  border:1px solid var(--panel-bg); flex:0 0 auto;
}
.cart-thumb--empty{
  display:flex; align-items:center; justify-content:center; background:var(--panel-bg);
}
.cart-title{
  display:block; color:inherit; text-decoration:none;
  overflow-wrap:anywhere; word-break:break-word;
  max-width: 420px; /* не даём заголовку растягивать строку */
}
@media (max-width: 480px){
  .cart-title{ max-width: 200px; }
}

/* форма количества — в одну линию, компактно */
.cart-qty-form{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.cart-qty-input{
  width:72px; padding:8px; border:1px solid var(--panel-bg); border-radius:10px;
}
.cart-qty-btn{ white-space:nowrap; padding:10px 12px }

/* кнопка Удалить — компактная, не растягивается */
.cart-actions{ white-space:nowrap }
.cart-actions .btn{ display:inline-flex; width:auto; padding:10px 12px }

/* купон — аккуратные поля на одной строке; на мобилке перенос */
.cart-coupon-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.cart-coupon-input{
  border:1px solid var(--panel-bg); border-radius:10px; padding:10px; min-width: 220px; flex:0 0 auto;
}

/* суммирование: кнопки справа стекаются на узких красиво */
.cart-summary{
  margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.cart-summary-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
@media (max-width: 600px){
  .cart-summary{ flex-direction:column; align-items:stretch }
  .cart-summary-actions{ justify-content:stretch }
  .cart-summary-actions .btn{ flex:1 1 auto }
}

/* === Cart: mobile-friendly layout (≤480px) === */
@media (max-width: 480px){

  /* убираем идею "широкой таблицы со скроллом" */
  .cart-table-wrap{ overflow-x: visible; }
  .cart-table{ min-width: 0; border-collapse: separate; border-spacing: 0 0; width: 100%; }

  /* прячем заголовок таблицы */
  .cart-table thead{ display: none; }

  /* превращаем каждую строку в «карточку» */
  .cart-table tbody tr{
    display: grid;
    grid-template-columns: 1fr auto; /* слева контент, справа цены */
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-bg);
  }

  /* 1-я ячейка (товар) — на всю ширину сверху */
  .cart-table tbody td:nth-child(1){
    grid-column: 1 / -1;
  }

  /* блок товара: картинка + название — в строку и сжатие разрешено */
  .cart-item{ min-width: 0; }
  .cart-title{
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* обрезаем до 2-х строк вместо «описаний» */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Qty — видно и удобно нажимать */
  .cart-qty-form{ justify-content: flex-start; }
  .cart-qty-input{
    width: 92px;
    min-height: 44px;
    font-size: 16px;            /* без авто-зума */
  }
  .cart-qty-btn{
    padding: 10px 12px;
    flex: 0 0 auto;
  }

  /* Цена (колонка 3) и Итого (4) — прижаты к правому краю */
  .cart-table tbody td:nth-child(3),
  .cart-table tbody td:nth-child(4){
    text-align: right;
    white-space: nowrap;
  }

  /* Кнопка удалить — последняя строка, справа */
  .cart-actions{
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }
  .cart-actions .btn{
    padding: 10px 12px;
    width: auto;
  }
}

/* === Cart: на мобилке Цена и Итого под Количеством (≤480px) === */
@media (max-width: 480px){
  .cart-table-wrap{ overflow-x: visible; }
  .cart-table{ min-width: 0; width: 100%; }
  .cart-table thead{ display: none; }

  /* Каждую строку превращаем в вертикальную «карточку» */
  .cart-table tbody tr{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "item"
      "qty"
      "price"
      "total"
      "actions";
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-bg);
  }

  /* Привязка ячеек таблицы к областям */
  .cart-table tbody td:nth-child(1){ grid-area: item; }
  .cart-table tbody td:nth-child(2){ grid-area: qty; }
  .cart-table tbody td:nth-child(3){ grid-area: price; }
  .cart-table tbody td:nth-child(4){ grid-area: total; }
  .cart-table tbody td:nth-child(5){ grid-area: actions; }

  /* Визуальные мелочи */
  .cart-item{ min-width: 0; }
  .cart-title{
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-qty-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
  .cart-qty-input{ width:92px; min-height:44px; font-size:16px }
  .cart-qty-btn{ padding:10px 12px; flex:0 0 auto }

  .cart-table tbody td:nth-child(3),
  .cart-table tbody td:nth-child(4){
    text-align: left;   /* под количеством выглядят как обычные строки */
    white-space: nowrap;
  }

  .cart-actions{
    display:flex; justify-content:flex-end;
  }
  .cart-actions .btn{ padding:10px 12px; width:auto }
}
/* === Cart mobile: "Цена" и "Итого" в одну строку с подписями (≤480px) === */
@media (max-width: 480px){
  .cart-table thead{ display:none; }
  .cart-table-wrap{ overflow-x: visible; }
  .cart-table{ min-width:0; width:100%; }

  /* строка корзины -> грид 2 колонки */
  .cart-table tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-bg);
  }

  /* Товар и Кол-во — во всю ширину (2 колонки) */
  .cart-table tbody td:nth-child(1),
  .cart-table tbody td:nth-child(2),
  .cart-table tbody td:nth-child(5){
    grid-column: 1 / -1;
  }

  /* Цена (3-я) и Итого (4-я) — в одну строку, рядом */
  .cart-table tbody td:nth-child(3){
    grid-column: 1; text-align:left; white-space:nowrap;
    display:flex; gap:6px; align-items:center;
  }
  .cart-table tbody td:nth-child(4){
    grid-column: 2; text-align:left; white-space:nowrap;
    display:flex; gap:6px; align-items:center; justify-content:flex-end;
  }

  /* подписи перед значениями */
  .cart-table tbody td:nth-child(3)::before{ content:"Цена:"; color:var(--muted); }
  .cart-table tbody td:nth-child(4)::before{ content:"Итого:"; color:var(--muted); }

  /* товарный блок — не растягивается вниз */
  .cart-item{ display:flex; align-items:center; gap:10px; min-width:0; }
  .cart-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* количество — удобно редактировать */
  .cart-qty-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .cart-qty-input{ width:92px; min-height:44px; font-size:16px; }
  .cart-qty-btn{ padding:10px 12px; flex:0 0 auto; }

  /* удалить — последняя строка, справа */
  .cart-actions{ display:flex; justify-content:flex-end; }
  .cart-actions .btn{ padding:10px 12px; width:auto; }
}
/* === Cart mobile layout v2 (≤480px): Qty слева, Update+Удалить справа; Цена, затем Итого — столбиком === */
@media (max-width: 480px){
  .cart-table thead{ display:none; }
  .cart-table-wrap{ overflow-x: visible; }
  .cart-table{ min-width:0; width:100%; }

  /* строка корзины -> 2 колонки: [контент | действия] */
  .cart-table tbody tr{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-bg);
  }

  /* 1) Товар — на всю ширину (верхняя строка) */
  .cart-table tbody td:nth-child(1){ grid-column: 1 / -1; }

  /* 2) Количество — слева, отдельная ячейка */
  .cart-table tbody td:nth-child(2){
    grid-column: 1; grid-row: 2;
  }

  /* 3) Действия (Удалить) — справа в той же строке, что и Qty */
  .cart-table tbody td:nth-child(5){
    grid-column: 2; grid-row: 2;
    justify-self: end;
  }

  /* 4) Цена — слева, третьей строкой */
  .cart-table tbody td:nth-child(3){
    grid-column: 1; grid-row: 3;
    text-align: left; white-space: nowrap;
    display: flex; gap: 6px; align-items: center;
  }
  .cart-table tbody td:nth-child(3)::before{
    content:"Цена:"; color: var(--muted);
  }

  /* 5) Итого — слева, ЧЕТВЁРТОЙ строкой (под ценой) */
  .cart-table tbody td:nth-child(4){
    grid-column: 1; grid-row: 4;
    text-align: left; white-space: nowrap;
    display: flex; gap: 6px; align-items: center;
  }
  .cart-table tbody td:nth-child(4)::before{
    content:"Итого:"; color: var(--muted);
  }

  /* Qty: компактно и видно, не растягивается */
  .cart-qty-form{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }
  .cart-qty-input{ width:92px; min-height:44px; font-size:16px; }
  .cart-qty-btn{ padding:10px 12px; }

  /* Кнопка удалить — компактная */
  .cart-actions .btn{ padding:10px 12px; width:auto; }

  /* Название товара: не тянет строку, 2 строки макс */
  .cart-item{ min-width:0; }
  .cart-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
/* === Cart mobile: правки выравнивания и кнопок (≤480px) === */
@media (max-width: 480px){
  /* 1) "Итого" строго слева */
  .cart-table tbody td:nth-child(4){
    grid-column: 1; grid-row: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
    justify-content: flex-start;   /* <-- не по центру */
    justify-self: start;           /* на всякий случай для грида */
  }

  /* 2) Кнопки внизу: НЕ тянем на всю ширину */
  .cart-summary{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cart-summary-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;   /* слева, компактно */
    width: auto;
  }
  .cart-summary-actions .btn{
    flex: 0 0 auto !important;     /* перебиваем старое flex:1 1 auto */
    width: auto !important;
    min-width: 0;
    padding: 10px 12px;
  }
}
/* Product preview: безопасная высота на мобилке, даже если JS не отработал */
@media (max-width: 600px){
  .product-preview{
    min-height: clamp(220px, 55vw, 420px);
  }
}
/* === Fixed top bar + header (always visible) === */
.ticker-top{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;                 /* поверх контента */
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-sticky{
  position: fixed; top: var(--ticker-h); left: 0; right: 0;
  z-index: 990;
  background: var(--header-bg);
  border-radius: 0;              /* на всю ширину без скруглений по краям */
  box-shadow: 0 6px 12px rgba(16,24,40,.06);
}

/* Сдвигаем контент вниз на высоту тикера + хедера, чтобы ничего не перекрывалось */
main.min-h-screen{
  margin-top: calc(var(--ticker-h) + var(--header-h) + 8px);
}

/* На мобильных у тебя — двухстрочная шапка, всё совместимо, просто уточним высоты */
@media (max-width: 768px){
  :root{ --header-h: 48px; --ticker-h: 36px; }
}

/* F.A.Q.*/

.faq-item { border:1px solid #e5e5e5; border-radius:12px; padding:12px 14px; margin:10px 0; }
.faq-q { cursor:pointer; font-weight:700; list-style:none; }
.faq-q::-webkit-details-marker { display:none; }

.faq-a{
  margin-top: 10px;
  line-height: 1.55;
  padding-left: 18px;
  border-left: 3px solid #e5e5e5;
}
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }