.badge-hit{ position:absolute; top:15%; background:#D43030; color:#fff; border:1px solid #fff; border-radius:10px; padding:clamp(6px,1.5vw,10px) clamp(10px,2.5vw,14px); font-family:'Roboto Condensed',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(12px,3.2vw,18px); line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:2; }
.badge-hit.left{ right:clamp(8px, 2vw, 16px); }
.badge-hit.right{ left:clamp(8px, 2vw, 16px); }
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap');

:root{ --bg:#0b0d11; --text:#fff; --muted:#b9c3cf; --accent:#2EA6FF; /* offsets for positioning */ --salads-x: 0px; --salads-y: 0px; --u:1; }
html,body{ min-height:100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body{
  margin:0;
  background-color: var(--bg);
  background-image: 
    url('../assets/bg.webp'),
    linear-gradient(180deg, transparent 0%, rgba(11, 13, 17, 0.25) 90%, rgba(11, 13, 17, 0.5) 100%);
  background-repeat: repeat-y, no-repeat;
  background-position: center top, center center;
  background-size: 100% auto, 100% 100%;
  background-attachment: scroll, scroll;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  touch-action: pan-y; /* разрешаем вертикальный скролл */
  overflow-x: hidden; /* скрываем горизонтальный скролл */
  user-select: none; /* запрещаем выделение текста */
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* отключаем контекстное меню на iOS */
}

/* Убраны фиксированные фоновые секции - возврат к рабочему фону */
.wrap{ min-height:100%; display:flex; flex-direction:column; touch-action: pan-y; position:relative; z-index:1; }
.header{ position:sticky; top:0; z-index:1000; backdrop-filter: blur(6px); background: rgba(7,17,40,0.7); display:flex; align-items:center; justify-content:space-between; padding:clamp(12px, 3vw, 20px); border-bottom:1px solid rgba(255,255,255,.08); }
.header-left{ display:flex; flex-direction:column; gap:clamp(4px,1vw,8px); }
.title{ margin:0; font-size:clamp(16px, 4vw, 24px); font-weight:800; line-height:1.0; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.header-right{ display:flex; align-items:center; gap:clamp(8px, 2vw, 16px); }
.category-select{ background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.2); color:var(--text); padding:clamp(6px,1.2vw,10px) clamp(24px,5vw,32px) clamp(6px,1.2vw,10px) clamp(10px,2.5vw,14px); border-radius:6px; font-size:clamp(11px, 2.5vw, 15px); font-weight:600; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' fill-opacity='0.7' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right clamp(10px,2.5vw,14px) center; background-size:clamp(10px,2.6vw,12px) auto; }
.category-select:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(46,166,255,.25); }
.lang-switcher{ display:flex; gap:clamp(6px, 1.5vw, 10px); }
.version{ font-size:clamp(9px, 2vw, 13px); color:rgba(255,255,255,.4); font-weight:500; }
.vat-note{ font-size:clamp(9px, 2vw, 13px); color:rgba(255,255,255,.6); font-weight:500; margin-right:clamp(8px, 2vw, 12px); }
.category-btn{ background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text); padding:clamp(4px, 1.2vw, 8px) clamp(8px, 2.5vw, 16px); border-radius:6px; cursor:pointer; font-size:clamp(11px, 2.5vw, 15px); font-weight:600; transition:all .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.category-btn:hover{ background:rgba(255,255,255,.1); }
.category-btn.active{ background:var(--accent); border-color:var(--accent); }
.lang-btn{ background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text); padding:clamp(4px, 1.2vw, 8px) clamp(8px, 2.5vw, 16px); border-radius:6px; cursor:pointer; font-size:clamp(11px, 2.5vw, 15px); font-weight:600; transition:all .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lang-btn:hover{ background:rgba(255,255,255,.1); }
.lang-btn.active{ background:var(--accent); border-color:var(--accent); }
.content{ flex:1; padding:0 clamp(12px, 3vw, 20px) clamp(12px, 3vw, 20px); touch-action: pan-y; }
.hero{ margin:clamp(8px, 2vw, 16px) 0; }
.banner{ width:100%; aspect-ratio: 16/9; border-radius:clamp(12px, 3vw, 20px); background:center/cover no-repeat; box-shadow:0 12px 24px rgba(0,0,0,.35); }
.section{ margin:clamp(14px, 3.5vw, 24px) 0 clamp(18px, 4vw, 32px); }
.section.hidden{ display:none; }
.section-title{ margin:0 0 clamp(10px, 2.5vw, 16px); font-family: 'Roboto Condensed', sans-serif; font-size:70px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-align:center; line-height:1.0; text-shadow:0 3px 10px rgba(0,0,0,.45); }
#salads{ position: relative; transform: translate(var(--salads-x), var(--salads-y)); }
.grid{ display:grid; grid-template-columns: 1fr; gap:clamp(12px, 3vw, 20px); }
.card{ background:transparent; border-radius:clamp(10px, 2.5vw, 16px); padding:clamp(10px, 2.5vw, 16px); display:flex; gap:clamp(12px, 3vw, 20px); align-items:center; min-width:0; position:relative; z-index:1; }
.card .item-img{ position:relative; flex-shrink:0; border-radius:clamp(6px, 1.5vw, 10px); background:center/contain no-repeat; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.card .item-img > img{ display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.ua-huawei .card .item-img{ filter:none; }
.ua-huawei .card .item-img > img{ image-rendering:auto; transform: translateZ(0); backface-visibility:hidden; filter: drop-shadow(0 10px 16px rgba(0,0,0,.32)) drop-shadow(0 3px 6px rgba(0,0,0,.22)); }
.ua-huawei .card .item-img{ filter:none; box-shadow:none; -webkit-transform:none; transform:none; backface-visibility:visible; will-change:auto; contain: paint layout; }
.ua-huawei .card .item-img > img{ filter: drop-shadow(0 10px 16px rgba(0,0,0,.32)) drop-shadow(0 3px 6px rgba(0,0,0,.22)); }
.card .text-block{ flex:1; display:flex; flex-direction:column; min-width:0; }
.badge-oos{ position:absolute; top:15%; background:#343434; color:#fff; border:1px solid #fff; border-radius:10px; padding:clamp(6px,1.5vw,10px) clamp(10px,2.5vw,14px); font-family:'Roboto Condensed',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(12px,3.2vw,18px); line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:2; }
/* .item-number временно не используется */
.badge-oos.left{ right:clamp(8px, 2vw, 16px); }
.badge-oos.right{ left:clamp(8px, 2vw, 16px); }
.card .name{ font-family: 'Roboto Condensed', sans-serif; font-weight:700; margin:0 0 clamp(6px, 1.5vw, 10px); font-size:clamp(18px, 4vw, 30px); text-transform:uppercase; line-height:1.1; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
.card .desc{ font-family: 'Roboto Condensed', sans-serif; font-weight:300; color:#fff; font-size:clamp(10px, 2.5vw, 18px); line-height:1.4; margin:0 0 clamp(10px, 2.5vw, 20px); white-space:normal; word-break:normal; }
.card .price{ color:#ffffff; font-weight:300; font-size:clamp(14px, 2.8vw, 20px); border:clamp(2px, 0.5vw, 3px) solid #fff; min-width:clamp(70px, 18vw, 100px); padding:clamp(5px, 1.2vw, 8px) clamp(8px, 2vw, 14px); text-align:center; border-radius:clamp(4px, 1vw, 6px); flex-shrink:0; width:auto; }

/* Huawei AGS6-L09 (и схожие WebView): корректировки масштаба */
.ua-huawei body{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ua-huawei .header{ padding: calc(12px * var(--u)) calc(20px * var(--u)); }
.ua-huawei .category-select, .ua-huawei .lang-btn, .ua-huawei .category-btn{ font-size: calc(14px * var(--u)); }
.ua-huawei .section-title{ font-size: calc(70px * var(--u)); }
.ua-huawei .card{ gap: calc(16px * var(--u)); padding: calc(16px * var(--u)); }
.ua-huawei .card .name{ font-size: calc(30px * var(--u)); word-break:break-word; overflow-wrap:anywhere; white-space:normal; }
.ua-huawei .card .desc{ font-size: calc(18px * var(--u)); }
.ua-huawei .card .price{ font-size: calc(20px * var(--u)); border-width: calc(3px * var(--u)); min-width: calc(100px * var(--u)); padding: calc(8px * var(--u)) calc(14px * var(--u)); }
.ua-huawei .beer-group{ padding: calc(16px * var(--u)); }
.ua-huawei .beer-row{ gap: calc(14px * var(--u)); }
.ua-huawei .beer-group-title{ font-size: calc(16px * var(--u)); }
.ua-huawei .beer-name{ font-size: calc(14px * var(--u)); }
.ua-huawei .beer-vol, .ua-huawei .beer-price{ font-size: calc(16px * var(--u)); }

/* Fallback для движков с багами clamp()/vw: заменяем ключевые clamp на абсолютные через медиа-запрос */
@media (max-width: 900px){
  .ua-huawei .header{ padding: 14px 18px; }
  .ua-huawei .card{ gap: 14px; padding: 14px; }
  .ua-huawei .card .name{ font-size: 26px; }
  .ua-huawei .card .desc{ font-size: 16px; }
  .ua-huawei .card .price{ font-size: 18px; min-width: 92px; }
}

/* Позиция текста: слева - фото справа, справа - фото слева */
.card.text-left{ flex-direction:row; }
.card.text-left .text-block{ text-align:right; align-items:flex-end; }
.card.text-left .name{ text-align:right; }
.card.text-left .desc{ text-align:right; }
.card.text-left .price{ margin-left:auto; align-self:flex-end; }
.card.text-right{ flex-direction:row-reverse; }
.card.text-right .text-block{ text-align:left; align-items:flex-start; }
.card.text-right .name{ text-align:left; }
.card.text-right .desc{ text-align:left; }
.card.text-right .price{ margin-right:auto; align-self:flex-start; }

/* Beer table layout */
/* Контейнер без собственного фона — фоны на группах для явного разделения */
.beer-table{ background: transparent; padding:clamp(2px, 0.5vw, 6px); }
.beer-group{ margin:clamp(12px, 3vw, 18px) 0; background: rgba(15,16,20,0.78); border-radius:clamp(10px, 2.5vw, 14px); padding:clamp(10px, 2.5vw, 16px); box-shadow:0 10px 18px rgba(0,0,0,.35); }
.beer-group.alt{ background: rgba(15,16,20,0.78); }
.beer-group-title{ margin:0 0 clamp(6px,1.5vw,10px); padding:0 0 clamp(6px,1.5vw,8px); border-bottom:1px solid rgba(255,255,255,.12); font-family:'Roboto Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(12px,2.6vw,16px); color:#fff; opacity:.95; }
.beer-rows{ display:block; }
.beer-row{ display:grid; grid-template-columns: 1fr 1fr auto; gap:clamp(8px,2vw,14px); align-items:center; padding:clamp(6px,1.5vw,10px) 0; border-bottom:1px solid rgba(255,255,255,.08); }
.beer-row:last-child{ border-bottom:none; }
.beer-name{ font-family:'Roboto Condensed',sans-serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase; font-size:clamp(12px,2.8vw,14px); display:block; max-width:100%; }
.beer-name-wrap{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.beer-country{ margin-left:6px; font-weight:300; color:rgba(255,255,255,.65); font-size:clamp(10px,2.4vw,13px); text-transform:none; white-space:nowrap; }
.beer-country{ margin-left:6px; font-weight:300; color:rgba(255,255,255,.65); font-size:clamp(10px,2.4vw,13px); text-transform:none; white-space:nowrap; }
.beer-vol{ font-weight:300; font-size:clamp(12px,3vw,16px); opacity:.95; text-align:center; }
.beer-row .beer-vol{ justify-self:end; margin-right:clamp(10px,2.5vw,22px); transform:none; }
.beer-price{ font-weight:700; font-size:clamp(12px,3vw,16px); text-align:right; min-width:clamp(80px,18vw,110px); justify-self:end; }