/* =====================================================================
   MOBILE LAYER — MERCH × IBRAT FARZANDLARI
   Подключается на всех страницах после основных стилей.
   Действует только на экранах до 640px — десктоп не затрагивается.
   ===================================================================== */

/* элементы, которые создаёт mobile.js, на десктопе скрыты */
.m-call, .cart-fab{display:none;}

@media (max-width:640px){

  :root{
    --m-pad:16px;
    --m-safe-b:env(safe-area-inset-bottom, 0px);
    --m-soft:#F3F2F4;
    --m-line:#E9E8EB;
  }

  html{-webkit-text-size-adjust:100%;}
  body{
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:none;
  }
  button, a, input, textarea{touch-action:manipulation;}
  .wrap{padding-left:var(--m-pad);padding-right:var(--m-pad);}

  /* лишнее: декоративные частицы и верхняя полоса с телефоном */
  #particles{display:none !important;}
  .topbar{display:none;}

  /* ------------------------------------------------------------------
     ШАПКА: 2 строки вместо 5, прячется при прокрутке вниз
     ------------------------------------------------------------------ */
  .sticky-header{
    /* своя GPU-плоскость: уход/возврат шапки идёт только через transform, без перерисовки */
    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    transition:transform .26s cubic-bezier(.2,.8,.2,1);
    padding-top:env(safe-area-inset-top, 0px);
    background:#fff;
  }
  /* тень без анимации: плавное изменение blur-тени на каждом скролле и давало подлагивание */
  .sticky-header, .sticky-header.is-scrolled{transition:transform .26s cubic-bezier(.2,.8,.2,1);}
  .sticky-header.is-scrolled{box-shadow:0 1px 0 rgba(23,22,26,.08);}
  .sticky-header.is-hidden{transform:translate3d(0,-100%,0);box-shadow:none;}
  .main-inner{transition:none;}
  .sticky-header.is-scrolled .main-inner{padding-top:10px;padding-bottom:6px;}

  .main-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:10px 8px;
    padding-top:10px;padding-bottom:6px;
  }
  .brand{order:1;margin-right:auto;gap:7px;min-width:0;}
  .brand-mark svg{height:16px;}
  .brand-x{font-size:15px;}
  .partner-mark svg, .partner-mark img{height:26px;max-width:120px;}

  .m-call{
    order:2;
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    background:#FFF1E9;color:var(--orange);
    flex:none;
  }
  .m-call svg{width:20px;height:20px;}

  .btn-cart{
    order:3;margin-left:0;position:relative;
    width:42px;height:42px;padding:0;
    justify-content:center;gap:0;
    font-size:0;               /* прячем слово «Корзина», остаётся иконка */
    border-radius:50%;
  }
  .btn-cart svg{width:20px;height:20px;}
  .btn-cart .cart-count{
    position:absolute;top:-3px;right:-4px;
    min-width:20px;height:20px;padding:0 5px;
    border-radius:10px;
    background:var(--ink);color:#fff;
    border:2px solid #fff;
    font-size:11px;font-weight:800;line-height:1;
    transition:transform .2s ease;
  }
  .btn-cart.is-empty .cart-count{display:none;}
  .btn-cart.bump{animation:mBump .35s ease;}
  @keyframes mBump{40%{transform:scale(1.18);}}

  nav.primary{
    order:4;flex:1 1 100%;
    flex-wrap:nowrap;gap:8px;row-gap:0;
  }
  .btn-catalog{
    height:44px;padding:0 16px;font-size:14px;
    flex:none;
  }
  nav.primary{position:relative;}
  .search{
    position:static;
    flex:1;min-width:0;max-width:none;
    height:44px;padding:0 6px 0 16px;gap:6px;
    background:var(--m-soft);
    border:1.5px solid transparent;
  }
  .search:focus-within{background:#fff;border-color:var(--orange);}
  .search input{font-size:16px;font-weight:600;height:100%;}
  .search input::placeholder{color:#9B9AA1;}
  .search button.icon-btn{width:34px;height:34px;align-items:center;justify-content:center;}
  .search button.icon-btn::before{inset:-4px;}
  .search-suggestions{
    top:calc(100% + 6px);
    max-height:min(55dvh, 380px);
    border-radius:18px;
  }
  .suggestion-item{padding:10px 8px;min-height:52px;}
  .suggestion-photo{width:44px;height:44px;}
  .suggestion-name{font-size:14.5px;}

  /* категории: широкая горизонтальная лента без обрезки по краям */
  .categories{padding:4px 0 10px;}
  .categories-inner{
    gap:8px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:0;
  }
  .categories-inner::-webkit-scrollbar{display:none;}
  .pill{
    flex:none;
    height:38px;padding:0 16px;
    display:inline-flex;align-items:center;
    font-size:13.5px;
    border:none;background:var(--m-soft);color:var(--ink);
  }
  .pill:hover{background:var(--m-soft);color:var(--ink);}
  .pill.active, .pill.active:hover{background:var(--orange);color:#fff;}
  .pill-ghost{background:#fff;border:1.5px dashed #D3D2D7;color:var(--ink-soft);}

  /* ------------------------------------------------------------------
     КАРТОЧКИ ТОВАРОВ
     ------------------------------------------------------------------ */
  .products-row, .catalog-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .product-card{
    border-radius:22px;
    padding-bottom:12px;
    border-color:#F0EFF2;
    box-shadow:0 10px 26px -18px rgba(23,22,26,.28), 0 1px 3px rgba(23,22,26,.05);
  }
  .product-card:hover{transform:none;box-shadow:0 10px 26px -18px rgba(23,22,26,.28), 0 1px 3px rgba(23,22,26,.05);}
  .product-photo{
    margin:8px 8px 10px;
    border-radius:16px;
    aspect-ratio:1/1;
  }
  .product-badges{top:8px;left:8px;}
  .badge{font-size:10.5px;padding:4px 9px;}
  .color-dots{bottom:8px;}
  .color-dot{width:5px;height:5px;}

  .product-body{padding:0 12px;display:flex;flex-direction:column;flex:1;}
  .product-name{
    font-size:14px;font-weight:700;line-height:1.28;
    margin:0 0 6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .product-price{font-size:18px;line-height:1.15;margin:0 0 3px;white-space:nowrap;}
  .product-moq{font-size:11.5px;line-height:1.3;color:#8E8D94;margin:0 0 10px;}

  .product-actions{flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;}
  .product-actions .stepper{
    flex:none;width:100%;justify-content:space-between;
    padding:3px;gap:0;
    background:var(--m-soft);border:none;
  }
  .stepper button{
    width:38px;height:38px;border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(23,22,26,.12);
    font-size:20px;font-weight:600;
    transition:transform .1s ease;
  }
  .stepper button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .stepper button:active{transform:scale(.9);}
  .stepper button::before{inset:-3px;}
  .stepper output{flex:1;min-width:0;font-size:15px;font-weight:800;}
  .btn-add{
    flex:none;width:100%;height:44px;padding:0 10px;
    font-size:14px;border-radius:999px;
  }

  /* ------------------------------------------------------------------
     ЗАГОЛОВКИ СЕКЦИЙ
     ------------------------------------------------------------------ */
  .section-head{gap:10px;margin-bottom:14px;flex-wrap:nowrap;}
  .section-head h2{font-size:20px;color:var(--ink);}
  .section-head .rule{display:none;}
  .see-all{margin-left:auto;padding:0 16px;height:38px;font-size:13px;display:inline-flex;align-items:center;}
  .products-section{padding-bottom:28px;}

  .catalog-section{padding-top:6px;padding-bottom:8px;}
  .catalog-head{flex-wrap:nowrap;align-items:center;margin-bottom:14px;}
  .catalog-head h1{font-size:22px;}
  .catalog-count{font-size:13px;white-space:nowrap;color:#8E8D94;}
  .catalog-more{width:100%;margin-top:20px;padding:16px;font-size:15px;border-radius:16px;}
  .catalog-empty{padding:48px 8px;}

  /* ------------------------------------------------------------------
     ГЛАВНАЯ: слайдер и «как это работает»
     ------------------------------------------------------------------ */
  .slider-section{padding-bottom:22px;padding-top:2px;}
  .slider{aspect-ratio:16/10;min-height:0;border-radius:22px;}
  .slider-arrow{display:none;}
  .slider-dots{bottom:12px;gap:6px;}
  .slider-dots button{width:22px;}

  .how-section{padding-top:4px;padding-bottom:32px;}
  .how-head{margin-bottom:20px;gap:4px;}
  .how-head h2{font-size:24px;}
  .how-head .tagline{font-size:13.5px;}
  .how-steps{grid-template-columns:1fr;row-gap:0;}
  .how-step{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    column-gap:16px;row-gap:2px;
    align-items:start;
    padding-bottom:22px;
  }
  .how-step:not(:last-child)::after{
    content:"";position:absolute;left:27px;top:62px;bottom:6px;
    border-left:2px dashed #E4E3E7;
  }
  .how-step:last-child{padding-bottom:0;}
  .how-icon{width:56px;height:56px;margin:0;grid-row:1 / span 2;grid-column:1;}
  .how-icon svg{width:24px;height:24px;}
  .how-step h3{grid-column:2;grid-row:1;font-size:17px;margin:2px 0 0;align-self:end;}
  .how-step p{grid-column:2;grid-row:2;max-width:none;font-size:14px;line-height:1.45;align-self:start;}

  /* ------------------------------------------------------------------
     ФОРМА ЗАЯВКИ
     ------------------------------------------------------------------ */
  .contact-section{padding-top:4px;padding-bottom:28px;scroll-margin-top:16px;}
  .contact-card{border-radius:24px;}
  .contact-left{padding:24px 20px 6px;gap:0;}
  .contact-blob, .contact-headset{display:none;}
  .contact-copy{margin-left:0;}
  .contact-copy h2{font-size:22px;margin-bottom:8px;}
  .contact-copy p{font-size:14.5px;max-width:none;margin-bottom:14px;}
  .contact-checklist{gap:10px;}
  .contact-checklist li{font-size:14px;gap:10px;}
  .check-badge{width:24px;height:24px;}
  .contact-right{padding:18px 20px 22px;border-top:none;}
  .field{margin-bottom:14px;}
  .field label{font-size:13.5px;margin-bottom:6px;}
  .field input, .field textarea{
    font-size:16px;                 /* 16px — чтобы iOS не зумил страницу при фокусе */
    padding:14px 16px;border-radius:14px;
  }
  .field textarea{min-height:88px;}
  .btn-submit, .cart-submit{height:52px;padding:0;font-size:16px;border-radius:16px;}

  /* ------------------------------------------------------------------
     КОРЗИНА: нижняя шторка вместо окна по центру
     ------------------------------------------------------------------ */
  .cart-overlay{background:rgba(17,16,20,.45);}
  .cart-modal{
    top:auto;left:0;right:0;bottom:var(--m-kb, 0px);
    width:100%;max-height:min(90dvh, calc(var(--m-vvh, 100dvh) - 12px));
    border-radius:26px 26px 0 0;
    padding:10px 18px calc(16px + var(--m-safe-b));
    transform:translateY(105%);
    opacity:1;
    visibility:hidden;
    box-shadow:0 -16px 48px -12px rgba(17,16,20,.3);
    transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .34s;
  }
  .cart-modal.open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  .cart-modal::before{
    content:"";flex:none;
    width:40px;height:4px;border-radius:2px;background:#DAD9DE;
    margin:0 auto 14px;
  }
  .cart-head{flex:none;margin-bottom:14px;padding-right:44px;}
  .cart-head h2{font-size:19px;}
  .cart-close{top:14px;right:14px;width:36px;height:36px;font-size:20px;}
  .cart-close::before{inset:-6px;}
  .cart-items{
    flex:1 1 auto;min-height:0;
    gap:14px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .cart-item{padding-bottom:14px;}
  .cart-item-name{font-size:15px;}
  .cart-item-remove{font-size:20px;padding:6px;}
  .cart-item .stepper{width:auto;padding:3px;gap:2px;background:var(--m-soft);border:none;}
  .cart-item .stepper button{width:32px;height:32px;font-size:18px;}
  .cart-item .stepper output{min-width:34px;flex:none;font-size:14.5px;}
  .cart-summary{flex:none;margin-top:12px;padding-top:14px;background:#fff;}
  .cart-total-value{font-size:24px;margin-bottom:12px;}
  .cart-summary .field{margin-bottom:12px;}
  .cart-note{margin-top:10px;}

  /* ------------------------------------------------------------------
     ПЛАВАЮЩАЯ ПАНЕЛЬ КОРЗИНЫ (появляется, когда есть товары)
     ------------------------------------------------------------------ */
  .cart-fab{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:12px;right:12px;
    bottom:calc(12px + var(--m-safe-b));
    z-index:90;
    height:56px;padding:0 8px 0 18px;
    background:var(--ink);color:#fff;border:none;
    border-radius:20px;
    box-shadow:0 14px 34px -10px rgba(23,22,26,.55);
    font-family:inherit;font-size:15px;font-weight:700;
    transform:translateY(160%);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
    pointer-events:none;
  }
  .cart-fab.show{transform:none;pointer-events:auto;}
  .cart-fab .fab-left{display:flex;align-items:center;gap:10px;}
  .cart-fab .fab-badge{
    min-width:26px;height:26px;padding:0 7px;border-radius:13px;
    background:var(--orange);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;
  }
  .cart-fab .fab-go{
    height:40px;padding:0 16px;border-radius:14px;
    background:var(--orange);
    display:inline-flex;align-items:center;gap:6px;
    white-space:nowrap;font-size:14px;
  }
  .cart-fab .fab-sum{font-size:14px;font-weight:700;opacity:.85;white-space:nowrap;}
  body.kb-open .cart-fab{transform:translateY(160%);}

  /* ------------------------------------------------------------------
     СТРАНИЦА ТОВАРА
     ------------------------------------------------------------------ */
  .breadcrumb{
    padding-top:10px;padding-bottom:10px;
    flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;
    scrollbar-width:none;font-size:12.5px;
  }
  .breadcrumb::-webkit-scrollbar{display:none;}
  .product-detail-section{padding-top:0;padding-bottom:28px;}
  .product-detail{gap:18px;}
  .pd-main-photo{border-radius:24px;margin-bottom:12px;}
  .pd-swatches{
    gap:10px;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(-1 * var(--m-pad));padding:2px var(--m-pad) 4px;
  }
  .pd-swatches::-webkit-scrollbar{display:none;}
  .pd-swatch{width:62px;height:62px;border-radius:14px;}
  .pd-swatch-label{font-size:11px;}
  .pd-category{margin-bottom:10px;padding:5px 12px;}
  .pd-info h1{font-size:23px;line-height:1.2;margin-bottom:8px;}
  .pd-price{font-size:30px;margin-bottom:4px;}
  .pd-moq{margin-bottom:14px;}
  .pd-description{font-size:14.5px;line-height:1.6;margin-bottom:0;max-width:none;}

  /* закреплённая панель «Купить» */
  body.page-product{padding-bottom:calc(88px + var(--m-safe-b));}
  body.page-product .pd-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    margin:0;flex-wrap:nowrap;gap:10px;
    padding:10px var(--m-pad) calc(10px + var(--m-safe-b));
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);
    backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--m-line);
  }
  body.page-product .pd-actions .stepper{
    flex:none;padding:4px;gap:2px;
    background:var(--m-soft);border:none;
  }
  body.page-product .pd-actions .stepper button{width:40px;height:40px;}
  body.page-product .pd-actions .stepper output{min-width:42px;flex:none;font-size:16px;}
  body.page-product .pd-actions .btn-add{
    flex:1;min-width:0;height:52px;padding:0 12px;font-size:16px;border-radius:999px;
  }
  body.page-product .pd-added-note{
    position:fixed;left:50%;bottom:calc(86px + var(--m-safe-b));
    transform:translate(-50%, 8px);
    margin:0;padding:10px 18px;border-radius:999px;
    background:#1BA855;color:#fff;font-size:14px;
    box-shadow:0 10px 24px -8px rgba(27,168,85,.6);
    z-index:96;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    white-space:nowrap;
  }
  body.page-product .pd-added-note.show{transform:translate(-50%,0);}
  body.page-product .cart-fab{display:none;}
  body.page-product.kb-open .pd-actions{position:static;}
  .related-section{padding-bottom:28px;}

  /* ------------------------------------------------------------------
     ПОДВАЛ
     ------------------------------------------------------------------ */
  footer.site{padding:26px 0 calc(92px + var(--m-safe-b));}
  body.page-product footer.site{padding-bottom:28px;}
  .footer-inner{gap:6px;align-items:flex-start;}
  .footer-brand{margin-bottom:8px;}
  .footer-phone, .footer-email{font-size:15px;padding:10px 0;}
  .footer-copy{margin-top:8px;font-size:12.5px;white-space:normal;}
}

/* очень узкие экраны (iPhone SE, 320–360px) */
@media (max-width:360px){
  :root{--m-pad:12px;}
  .brand-mark svg{height:14px;}
  .partner-mark svg, .partner-mark img{height:22px;}
  .btn-catalog{padding:0 12px;font-size:13px;}
  .products-row, .catalog-grid{gap:10px;}
  .product-price{font-size:16.5px;}
  .product-name{font-size:13.5px;}
}

@media (prefers-reduced-motion:reduce){
  .sticky-header, .cart-modal, .cart-fab{transition:none !important;}
}