/* =======================
   Tropic Bites — mobile.css
   ======================= */

:root{ --radius:18px; --mobile-header-h:56px }

/* base */
*{ box-sizing:border-box }
html,body{ margin:0 }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#1a202c; background:#fff;
}
p,li{ text-align:justify; text-justify:inter-word; text-align-last:left; hyphens:none; -webkit-hyphens:none; -ms-hyphens:none }
html,body,p{ -webkit-hyphens:none; -ms-hyphens:none; hyphens:none }
.menu li,.menu a{ text-align:center!important; justify-content:center!important }

/* hero */
.hero{ position:relative; height:auto; padding:66px 18px 8px; color:#1a202c; text-align:center; background:transparent }
.hero>picture,.hero>picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover!important; object-position:center 15% }
.hero-visual .mascot{ width:400px; height:400px; max-width:85vw; max-height:85vw; display:block; margin:0 auto; object-fit:contain }
.hero-content-stack{ display:none!important }
.hero__inner{ position:relative; z-index:1; padding:0 }
.hero__title{ display:none }
.hero__lead{ font-size:16px; margin:0 0 18px }
.btn{ display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:800; background:#fff; color:#0f172a }

/* sections */
.section{ padding:48px 18px }
#home.section{ padding-top:20px; padding-bottom:16px }
#about.section{ padding-top:12px }
h2{ color:#1a202c; margin-top:0 }

/* products */
.product-block{ text-align:center }
.products{ display:grid; grid-template-columns:1fr; gap:18px }
.card{ background:#fff; border-radius:var(--radius); padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.07) }
.card img{ width:100%; height:200px; object-fit:contain }
.card h3{ margin:10px 0 4px; font-size:18px }
.card p{ margin:0; color:#475569; font-size:14px }

/* footer */
.footer{ text-align:center; padding:32px 18px; background:#f9fafb; font-size:14px }

/* scroll to top */
#scrollToTopBtn{
  position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:24px; z-index:999;
  background:transparent; border:none; padding:0; cursor:pointer; display:none
}
#scrollToTopBtn img{ width:44px; height:44px; opacity:.85 }

/* patterns behind everything */
#tb-bg,#tb-mask,.tb-mask{ position:fixed; inset:0; z-index:-1!important; pointer-events:none; background:transparent }

/* taps, focus, cursors */
:where(a,button,.menu a,.menu-toggle,#scrollToTopBtn){ -webkit-tap-highlight-color:transparent; tap-highlight-color:transparent }
:where(a,button,.menu a,.menu-toggle,#scrollToTopBtn):focus{ outline:none }
:where(a,button,.menu a,.menu-toggle,#scrollToTopBtn):focus-visible{ outline:3px solid #22c55e; outline-offset:3px; border-radius:10px }
:where(.menu a,.menu-toggle,#scrollToTopBtn):active{ filter:brightness(0.98); transform:translateY(0) }

/* disable image interactions */
img,picture,#scrollToTopBtn img,.icon{ -webkit-touch-callout:none; -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; -moz-user-select:none; user-select:none }
.hero img,.hero picture,.card img,#scrollToTopBtn img,.icon{ pointer-events:none }
.hero,.hero *:not(a),.card,.card *:not(a),#scrollToTopBtn img{ cursor:default; user-select:none }
.menu a,.email-link,.instagram-button,#scrollToTopBtn,.menu-toggle{ cursor:pointer }

/* accessibility / motion */
@media (prefers-reduced-motion:reduce){
  .menu-toggle::before,.menu-toggle::after,.menu-toggle span,.menu a{ transition:none!important }
}

/* utility */
.products .card h3,.products .card p,.footer,.footer p,.footer div,.footer span{
  text-align:center!important; text-align-last:center!important; justify-content:center!important; display:block!important
}
.serp-primary-image{ display:none!important }

/* ===== Overlay for mobile menu (starts BELOW header; header not blurred) ===== */
#nav-dim{
  position:fixed;
  left:0; right:0; bottom:0;
  top:calc(env(safe-area-inset-top, 0px) + var(--mobile-header-h));
  background:rgba(255,255,255,0.20);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:1000; /* below menu (1001) and burger (1100) */
}
#nav-dim.active{ opacity:1; pointer-events:auto }

/* kill any legacy overlay if осталось в других сборках */
body.nav-open::before{ content:none!important }

/* ======================
   Mobile-only adjustments
   ====================== */
@media (max-width: 767px){

  html{ scroll-padding-top:60px }

  /* header bar */
  .mobile-header-bar{
    position:fixed; top:0; left:0; width:100vw; height:56px;
    background:rgba(255,255,255,.65);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 .5px 0 rgba(0,0,0,.06);
    z-index:1000;
  }
  .brand-title{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    margin:0; font-size:20px; font-weight:700; color:#000;
    max-width:calc(100vw - 120px);
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none;
  }

  /* burger button (fixed; always visible) */
  .hide-burger .mobile-header-bar #menu-toggle{ opacity:0; pointer-events:none }
  .menu-toggle{ display:none!important } /* hide any other .menu-toggle */
  .mobile-header-bar #menu-toggle{
    display:flex!important; flex-direction:column; justify-content:center; align-items:center; gap:6px;
    width:40px; height:36px;
    background:rgba(255,255,255,.85);
    border:0; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:opacity .2s ease;
  }
  #menu-toggle{
    position:fixed; top:10px; right:16px;
    z-index:1100;
  }
  #menu-toggle span{
  display:block; width:22px; height:2px; 
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, #000 70%, rgba(0,0,0,.78) 100%);
  border-radius:2px;
  transform-origin:center;
  transform: scaleX(1);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1), opacity 160ms ease, background-color .22s ease;
  backface-visibility:hidden; will-change:transform, opacity;
}

  #menu-toggle span + span{ margin-top:2px }

 /* активное состояние: синхронный «флип» по горизонтали + крестик */
#menu-toggle.active span:nth-child(1){
  transform: scaleX(-1) translateY(10px) rotate(45deg);
}
#menu-toggle.active span:nth-child(2){
opacity: 0;
transition-delay: 60ms; /* лёгкая задержка */
}
#menu-toggle.active span:nth-child(3){
  transform: scaleX(-1) translateY(-10px) rotate(-45deg);
}

  /* centered dropdown menu with wide glassy buttons */
  #nav-menu.menu{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(280px, calc(100% - 24px));
    display:none; flex-direction:column; align-items:stretch;
    gap:26px; margin:0; padding:0; list-style:none;
    background:transparent; border:0; box-shadow:none;
    z-index:1001;
  }
  #nav-menu.menu.show{ display:flex }

  #nav-menu.menu a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:48px; padding:14px 18px;
    text-align:center; text-decoration:none;
    font-weight:800; line-height:1.3; color:#0f172a;
    border-radius:16px;

    /* glassy white */
    background:rgba(255,255,255,0.92);
    border:1px solid rgba(255,255,255,0.65);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    backdrop-filter:saturate(120%) blur(4px);
    -webkit-backdrop-filter:saturate(120%) blur(4px);
  }
  #nav-menu.menu a:hover{ background:rgba(255,255,255,0.98) }
  #nav-menu.menu a:visited{ color:#0f172a }

  /* lock scroll when menu open */
  html.nav-open, body.nav-open{ overflow:hidden }

  /* extras (mobile-specific blocks you had) */
  .card.new-fruit img{ transition:filter .4s ease; animation:pulse-glow 2.5s infinite ease-in-out }
  .card.new-fruit:hover img{ filter:drop-shadow(0 0 12px rgba(186,85,211,.7)) }
  @keyframes pulse-glow{
    0%{filter:drop-shadow(0 0 6px rgba(186,85,211,.4))}
    50%{filter:drop-shadow(0 0 16px rgba(186,85,211,.9))}
    100%{filter:drop-shadow(0 0 6px rgba(186,85,211,.4))}
  }

  .contact-block{ padding:32px 16px }
  .contact-block h2{ text-align:center; margin:0 0 16px; color:#1a202c }
  .contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:100%; margin:0 auto }
  .contact-card{
    display:flex; flex-direction:column; align-items:center; text-decoration:none;
    background:#fff; border-radius:12px; padding:14px; box-shadow:0 8px 20px rgba(0,0,0,.06)
  }
  .card-text{
    font-size:13px; line-height:1.2; font-weight:700; color:#1a202c; text-align:center;
    margin-bottom:10px; white-space:nowrap
  }
  @media (max-width:360px){
    .card-text{ font-size:12px }
    .contact-cards{ gap:12px }
  }
  .contact-card img{ width:100%; max-width:110px; height:auto; object-fit:contain }
  .contact-card:hover{ transform:none; box-shadow:0 8px 20px rgba(0,0,0,.06) }
  
  .calm-band{
    max-width:680px; margin:44px 16px 36px; padding:22px 16px; text-align:center;
    background:#fff; border:1px solid #f1f5f9; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.05)
  }
  .calm-band h2{ margin:0 0 8px; font-size:20px; color:#1a202c }
  .calm-band p{ margin:0 auto 12px; font-size:14px; line-height:1.55; color:#374151 }
}
/* Buy Tropic Bites — mobile layout (300×300 + center + press) */
@media (max-width: 767px){
  .market-cards{
    display: grid;
    grid-template-columns: 1fr;   /* по одной карточке в строке */
    gap: 16px;
    justify-items: center;        /* центрируем карточки */
    margin: 0;
  }
  .market-card{
    width: min(300px, 100% - 36px);
    aspect-ratio: 1 / 1;                /* держим квадрат */
    height: auto;
    box-sizing: border-box;
    display:grid; place-items:center;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f1f5f9;    /* контур */
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,.05);
    padding: 0;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
  }
  .market-card:active{
    transform: translateY(-1px) scale(.997);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .market-card img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 12px;               /* «воздух» вокруг логотипа */
  }
}
/* Buy page: отступ от фиксированной шапки, чтобы заголовок не прилипал */
@media (max-width: 767px){
  #buy.section{
    /* высота шапки (56px) + небольшой зазор 16px + безопасная зона для выемки */
    margin-top: calc(env(safe-area-inset-top, 0px) + var(--mobile-header-h, 56px) + 2px);
  }
}
/* убираем синий highlight при нажатии на карточки */
.market-card,
.market-card img{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
/* Контакты: отключаем сохранение/долгий тап по картинкам внутри карточек */
.contact-card img{
  pointer-events: none;            /* долгий тап пойдёт по ссылке, а не по <img> */
  -webkit-touch-callout: none;     /* iOS: убрать Save Image/Share */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Контактные карточки: глушим длинный тап/сохранение на уровне ссылки */
@media (max-width: 767px){
  .contact-card,
  .contact-card *{
    -webkit-touch-callout: none;  /* iOS: убрать меню длинного тапа */
    user-select: none;
  }
  .contact-card img{
    pointer-events: none;         /* тап идёт по ссылке, не по <img> */
    -webkit-user-drag: none;
    user-drag: none;
  }
}
@media (max-width: 767px){
  .marketplaces > h2{
    text-align: center;
    white-space: nowrap;                /* одна строка */
    line-height: 1.1;
    /* плавная подгонка размера под ширину экрана */
    font-size: clamp(16px, 5.2vw, 26px);
    letter-spacing: 0;                  /* можно чуть уплотнить: -0.02em */
    margin: 0 0 16px;                   /* отступ до карточек (как было) */
  }
}
/* Marketplaces: запрет длинного тапа/сохранения на карточках и их содержимом */
.market-card,
.market-card *{
  -webkit-touch-callout: none;  /* iOS: глушим меню длинного тапа */
  -webkit-user-select: none;
  user-select: none;
}

/* саму картинку делаем «прозрачной» для событий и недраггабельной */
.market-card img{
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
@media (max-width: 767px){
  a.contact-card,
  a.contact-card *{
    -webkit-touch-callout: none; /* глушим меню длинного тапа (iOS/Android) */
    -webkit-user-select: none;
    user-select: none;
  }
}
/* Лого слева от заголовка в шапке (мобайл) — без правок HTML */
.mobile-header-bar .brand-title{
  display: inline-flex;          /* текст + иконка в строку */
  align-items: center;
  gap: 10px;                      /* расстояние между иконкой и текстом */
}

.mobile-header-bar .brand-title::before{
  content:"";
  width:42px; height:42px; flex:0 0 42px;
  background-image: url("/favicon-96x96.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
@media (max-width:767px){
  /* бренд в шапке и кнопки в выпадающем меню */
  .mobile-header-bar .brand-title,
  #nav-menu.menu a{
    font-family: "Delius", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-synthesis: weight;
    letter-spacing: .01em;
  }
}
/* ссылки-карточки */
.products .card {
  color: inherit;             /* наследуем цвет текста */
  text-decoration: none;      /* убираем подчёркивание */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.products .card:hover h3 {
  text-decoration: none;      /* даже при ховере не подчёркивать заголовок */
}
.products .card h3,
.products .card p {
  color: inherit;        /* чтобы заголовки и подписи тоже брали цвет от карточки */
  text-decoration: none; /* и точно не подчёркивались */
}