/* Ensure hero badge can overlap header */
.site-header{ overflow: visible; }
/* ===== Base tokens, typography, spacing, colors, utilities ===== */

:root{
  /* Кольори */
  --color-bg:#FAFAF7;            /* теплий фон сторінки */
  --card-bg:#f6f6f6;             /* фон карток/блоків */
  --color-text:#1d1d1f;
  --color-muted:#6e6e73;
  --color-border:#e5e5e7;
  --color-accent:#0074d9;
  --color-accent-contrast:#ffffff;

  /* Радіуси і тіні */
  --radius-8:8px;
  --radius-10:10px;
  --radius-12:12px;
  --shadow-1:0 6px 16px rgba(0,0,0,.08);
  --shadow-2:0 12px 32px rgba(0,0,0,.12);

  /* Відступи */
  --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px;
  --space-12:12px; --space-14:14px; --space-16:16px; --space-20:20px; --space-24:24px;

  /* Єдиний мобільний жолоб (краї контенту) */
  --gutter:16px;
}

html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% -200px, #ffffff 0%, #FAFAF7 60%, #F6F4F2 100%);
  color:var(--color-text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', sans-serif;
}

/* Prevent horizontal tug/bounce on mobile while preserving carousels */
html, body{ max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; }
body{ touch-action: pan-y; }

/* Homepage background */
body.home{ background: #f6f6f6; }

img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; }

.container{
  width:100%;
  max-width:720px;
  margin:0 auto;
  /* краї контенту + safe area */
  padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

.sr-only{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.main{ display:block; padding-top: var(--header-h); }

/* ============================
   Header (класичний, білий)
   ============================ */
/* ===== Header (mobile-first) ===== */
:root{
  --gutter:16px;                /* край для контенту та шапки */
  --header-bg: var(--color-accent);   /* синій фон за замовчуванням */
  --header-fg: #fff;                   /* білі іконки/текст у шапці */
  --header-h: 60px;                   /* висота шапки */
}

/* Липка шапка, без рамок на кнопках */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--header-bg);
  color: var(--header-fg);
}

/* 3 колонки: бургер | лого | кошик. Краї = gutter + safe-area */
.header-inner{
  height: 60px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

.brand{ justify-self: center; display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.brand .logo{ height:30px; width:auto; display:block; }

.menu-btn,
.cart-btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  background: transparent; border: 0; box-shadow: none; color: inherit; padding:0; margin:0;
}
.menu-btn{ justify-self: start; }
.cart-btn{ justify-self: end; position: relative; }

/* Бургер: 3 гострі лінії, без скруглень */
.menu-btn .menu-bars{
  position: relative; display: inline-block;
  width: 22px; height: 2px; background: currentColor; border-radius: 0;
}
.menu-btn .menu-bars::before,
.menu-btn .menu-bars::after{
  content:""; position:absolute; left:0;
  width:22px; height:2px; background: currentColor; border-radius:0;
}
.menu-btn .menu-bars::before{ top:-6px; }  /* верхня риска */
.menu-btn .menu-bars::after{  top: 6px; }  /* нижня риска */

/* Кошик з PNG: завжди білий (на темній шапці) */
.cart-img{ display:block; width:18px; height:18px; filter: brightness(0) invert(1); }

/* Лічильник кошика (приховано за замовчуванням) */
.cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:#fff; color:#0074d9;
  font-size:11px; line-height:18px; text-align:center;
  display:none;
}

/* ============================
   Hero (повна ширина)
   ============================ */
.hero-image img{ width:100%; height:auto; }

/* (необов'язково) ширші екрани */
@media (min-width:600px){
  .container{ max-width:960px; }
}

/* ============================
   Header — планшети (edge-to-edge, ≥768px)
   ============================ */
   @media (min-width:768px){
    /* ширший контейнер по сайту */
    .container{ max-width:1040px; }
  
    /* шапка НЕ плаваюча: без зовнішніх полів і заокруглень */
    .site-header{
      margin: 0;                 /* прибираємо «плаваючість» */
      border-radius: 0;          /* рівні краї на всю ширину */
      border-left: none;         /* без бокових обрамлень */
      border-right: none;
      box-shadow: none;          /* без зовнішньої тіні по краях */
      /* залишаємо твій колір/blur, які вже задані раніше */
    }
    :root{ --header-h: 64px; }
  
    /* трохи більша висота та гаттери всередині */
    .header-inner{
      height: 64px;              /* було ~60 */
      padding-inline: var(--space-16);
      gap: 12px;
    }
  
    /* логотип небагато крупніший */
    .brand .logo{ height: 32px; }
  
    /* іконки залишаємо як на мобайлі (або піджени, якщо хочеш) */
    .header-actions{ gap: 12px; }
    /* .icon-btn{ width:44px; height:44px; } // за бажанням */
  }
  /* великі телефони, портрет або лендскейп */
@media (min-width:480px){
  .container{ max-width: 840px; }         /* опційно */
}


/* ===== Footer contacts (minimal, universal) ===== */
.site-footer .foot-contact{
  margin:10px 0 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#aeb8c6;
  font-size:13px;
}
.site-footer .foot-contact a{ color:#dce3ec; text-decoration:none; }
.site-footer .foot-contact a:hover{ text-decoration:underline; }
@media (min-width:600px){
  .site-footer .foot-contact{ flex-direction:row; gap:16px; align-items:center; }
}