/* :root{
   --color-primary:#18b5c4;
  --color-primary-700:#1499A7;
  --color-accent:#FFB300;
  --color-success:#1A9E68; --color-warning:#C97A00; --color-danger:#D64545; --color-info:#0B6E99;
  --color-text:#0F172A; --color-text-muted:#475569;
  --color-surface:#FFFFFF; --color-muted:#F6F8FA; --color-border:#E5E7EB;

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.12);

  --container:1200px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
} */

:root{
  --color-primary:#4FD7E5;
  --color-primary-700:#007A86; /* тёмный вариант для кнопок/чипов с белым текстом */

  --color-accent:#FFB300;

  --color-success:#1A9E68;
  --color-warning:#C97A00;
  --color-danger:#D64545;
  --color-info:#1F8D9A;

  --color-text:#0F172A;
  --color-text-muted:#475569;

  --color-surface:#FFFFFF;
  --color-muted:#F6F8FA;
  --color-border:#E5E7EB;

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.12);

  --container:1200px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* помощники для читаемости текста */
  --on-primary:#0F172A;     /* текст на #4FD7E5 (белый даёт низкий контраст) */
  --on-primary-700:#FFFFFF; /* текст на #007A86 — контраст AA (≈5.1:1) */

  --slider-h: 8px;
}


html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; color:var(--color-text); background:var(--color-surface);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5; font-size:16px; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
h1,h2,h3,h4{font-family: Manrope, Segoe UI, Roboto, Inter, system-ui, sans-serif; line-height:1.25; margin: 0 0 var(--space-4)}
h1{font-size:clamp(28px,3vw,40px); font-weight:800}
h2{font-size:clamp(24px,2.4vw,32px); font-weight:800}
h3{font-size:22px; font-weight:700} h4{font-size:18px; font-weight:600}

a{color:var(--color-primary); text-decoration:none}
a:hover{color:var(--color-primary-700); text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.container{max-width:var(--container); margin-inline:auto; padding:0 var(--space-5)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-md); border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn--primary{background:var(--color-primary); color:#fff}
.btn--primary:hover{background:var(--color-primary-700)}
.btn--secondary{background:#fff; color:var(--color-primary); border-color:var(--color-primary)}
.btn--secondary:hover{background:var(--color-muted)}
.btn--pill{border-radius:var(--radius-pill)}

.badge{display:inline-block; padding:2px 8px; font-size:12px; border-radius:var(--radius-pill); background:var(--color-muted); color:var(--color-text)}
.badge--accent{background:var(--color-accent); color:#1F2A37}

.input, select, textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:#fff; color:var(--color-text);
}
.input:focus, select:focus, textarea:focus{
  outline:2px solid transparent; border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, #ffffff);
}

.card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}

.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.alert{padding:12px 14px; border-radius:var(--radius-md)}
.alert--success{background:color-mix(in oklab, var(--color-success) 12%, #fff)}
.alert--warning{background:color-mix(in oklab, var(--color-warning) 12%, #fff)}
.alert--danger{background:color-mix(in oklab, var(--color-danger) 12%, #fff)}


.product-card{display:flex; flex-direction:column; gap:12px; padding:16px}
.product-card .price{font-weight:700; font-size:18px}
.product-card .title{font-weight:600; color:var(--color-text)}
.product-card .rating{color:#F59E0B}
.product-card .actions{display:flex; gap:8px}
.woocommerce ul.products li.product .button{ @apply: none; } /* если Tailwind не используем — удалите */
.woocommerce a.button, .woocommerce button.button{
  composes: btn btn--primary; /* если без CSS Modules — замените на классы .btn .btn--primary */
}
.onsale{ position:absolute; top:8px; left:8px; }
.onsale{ background:var(--color-accent); color:#1F2A37; border-radius:var(--radius-pill); padding:2px 8px; font-weight:700; font-size:12px }


/* ===========================
   Mobile gutters + full-bleed
   =========================== */
@media (max-width: 768px){
  :root{
    --gutter: 16px;         /* единый боковой отступ */
    --radius: 12px;         /* скругление для цветных блоков */
  }

  /* 1) Отступы только на верхнем уровне main/footer */
  .site-main > .container,
  .site-footer > .container{
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* 2) Убираем ДВОЙНЫЕ отступы у вложенных контейнеров */
  .site-main .container .container,
  .site-footer .container .container{
    padding-left: 0;
    padding-right: 0;
  }

  /* 3) Полноширинные (цветные) секции: тянем фон до краёв,
        но контент остаётся по сетке */
  .full-bleed,                 /* универсальный класс, если добавишь в разметку */
   .promo-hero, .shop-hero,
  .footer-cta, .footer-top, .newsletter, .cta-banner{
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    border-radius: var(--radius);
    overflow: hidden;         /* чтобы фон/градиент не «торчал» за скругление */
  }

  /* 4) Подстраховка для секций Woo «Рекомендовані/Схожі товари»,
        которые часто без wrapper'а */
  .site-main :where(.related, .upsells, .cross-sells){
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}