/* === Мобильная версия — подключается при media="(max-width: 600px)" === */

/* Скрытие шапки и категорий при скролле на мобилках */
@media (max-width: 600px){
  body{
    padding-bottom:80px;
  }
  .site-header-section.hide-on-scroll{
    transform:translateY(-110%);
  }
  .sidebar.hide-on-scroll{
    transform:translateY(-150%);
    opacity:0;
    pointer-events:none;
  }
  /* Мобильная нижняя навигация */
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:3px 14px calc(5px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.8);
    border-top:1px solid rgba(0,0,0,0.04);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 20px rgba(0,0,0,0.12);
  }
  .mobile-bottom-nav::before{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:96px;
    height:38px;
    background:rgba(255,255,255,0.8);
    border-radius:50% 50% 0 0;
    box-shadow:0 -4px 10px rgba(0,0,0,0.06) inset;
  }
  .mobile-nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-size:11px;
    background:transparent;
    border:none;
    padding:0;
    color:#555555;
  }
  .mobile-nav-item .mobile-nav-icon{
    font-size:20px;
    line-height:1;
    color:#000000;
    filter:grayscale(1);
  }
  .mobile-nav-item .mobile-nav-label{
    line-height:1.2;
  }
  .mobile-nav-item.active{
    color:#e35239;
  }
  .mobile-nav-cart{
    position:relative;
    width:70px;
    height:70px;
    border-radius:50%;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-20px);
    z-index:71;
  }
  .mobile-nav-cart-badge{
    position:absolute;
    top:2px;
    right:2px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:10px;
    background:#e53935;
    color:#fff;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    pointer-events:none;
  }
  .mobile-nav-cart-badge:empty{
    display:none;
  }
  .mobile-nav-cart-inner{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    /* Цвет как у кнопки \"Оформить заказ\" */
    background:linear-gradient(135deg,var(--rose-300),var(--coral-500));
    color:#ffffff;
    font-size:22px;
    /* Усиленная тень, похожая на btn-cart-checkout */
    box-shadow:
      0 0 18px rgba(255,255,255,0.9),
      0 10px 24px rgba(0,0,0,0.28);
  }
}

  .container{ padding:14px 16px; }

  .header-actions-pc{ display:none !important; }
  .site-header-section{
    position:sticky;
    top:0;
    z-index:60;
    transition:transform 0.2s ease;
  }
  .site-header-wrapper{ position:static; top:auto; z-index:50; display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; min-height:auto; border-radius:0; padding-top:env(safe-area-inset-top,0); background:var(--header-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20'%3E%3Cpath fill='none' stroke='%23FEFBFB' stroke-width='0.8' d='M0 10 Q50 5 100 10 T200 10 T300 10 T400 10'/%3E%3Cpath fill='none' stroke='%23FEFBFB' stroke-width='0.6' d='M0 14 Q50 9 100 14 T200 14 T300 14 T400 14'/%3E%3C/svg%3E"); background-size: 200px 20px; background-repeat: repeat-x; box-shadow:0 4px 20px rgba(0,0,0,0.08); min-height:80px; }
  .site-header-wrapper > header{ min-height:0; flex:none; display:block; position:relative; }
  .site-header-wrapper:has(header.header-has-bg-image){ background-image:none; }
  header.header-has-bg-image{ background-size:contain !important; background-position:27% top !important; background-repeat:no-repeat !important; }
  header.header-has-bg-image .header-bg-layer img{ object-position:27% center; }
  header.header-has-bg-image .header-inner{ min-height:76px; }
  .header-inner{ padding:16px 16px; min-height:80px; }
  .header-menu-toggle{ display:none !important; }

  .header-actions-mob{
    position:absolute;
    top:52px;
    right:14px;
    z-index:60;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 10px 12px;
    /* 50% прозрачность в цвете категории */
    background:rgba(253, 237, 237, 0.5);
    border:1px solid #e6d6d0;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    min-width:190px;
  }
  .site-header-section.menu-open .header-actions-mob{ display:flex; }
  .header-actions-mob .btn-header-login{ flex:1; min-height:48px; padding:12px 14px; font-size:14px; }
  .header-actions-mob .btn-header-login svg{ width:20px; height:20px; }

  .btn-header-login{ display:inline-flex; align-items:center; justify-content:center; min-width:0; padding:10px 14px; font-size:13px; min-height:42px; gap:8px; border-radius:21px; border:none; background:linear-gradient(180deg,#FDF2EF 0%,#F9E6E0 50%,#F6DED6 100%); color:#333; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; box-shadow:inset 0 1px 2px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.03),0 2px 6px rgba(0,0,0,0.06); }
  .btn-header-login:hover{ background:linear-gradient(180deg,#FFF6F3 0%,#FAE8E2 50%,#F6DED6 100%); box-shadow:inset 0 1px 2px rgba(255,255,255,0.8),inset 0 -1px 1px rgba(0,0,0,0.04),0 3px 10px rgba(0,0,0,0.08); }
  .btn-header-login svg{ width:18px; height:18px; }

  .layout{ gap:14px; }
  .sidebar{
    padding:0;
    border-radius:0;
    box-shadow:none;
    border:0;
    background:transparent;
    transition:transform 0.2s ease;
  }
  .categories{ flex-direction:row; flex-wrap:wrap; gap:0; padding:0; border-radius:999px; border:1px solid #e6d6d0; background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9); overflow:hidden; align-items:stretch; }
  .category-btn{ position:relative; padding:6px 12px; font-size:13px; flex:0 0 auto; min-width:0; border-radius:0; border:none; background:transparent; color:#000; box-shadow:none; display:flex; align-items:center; justify-content:center; min-height:30px; }
  .category-btn::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:#e6d6d0; }
  .category-btn:last-child::after{ display:none; }
  .category-btn.active{ background:linear-gradient(135deg,var(--rose-300),var(--coral-500)); color:#fff; box-shadow:var(--shadow-2); }
  .category-btn:hover:not(.active){ background:rgba(248,195,199,0.3); }

  .grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .card{ border-radius:14px; box-shadow:0 4px 16px rgba(255,120,120,0.2); border:3px solid rgba(255,255,255,0.9); background:var(--card-bg,#fcf6f5); }
  .card-img{ padding-top:100%; }
  .card-body{ padding:10px; gap:8px; }
  .title{ font-size:11px; line-height:1.25; font-weight:600; }
  .price-per-100{ font-size:10px; }
  .grams-input{ min-height:38px; border-radius:9px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
  .grams-input input[type="number"]{ padding:8px 10px; font-size:14px; }
  .grams-input span{ padding:8px 10px; font-size:14px; }
  .btn-add{ padding:10px 12px; font-size:12px; border-radius:10px; min-height:40px; box-shadow:0 2px 10px rgba(255,111,97,0.35); }

  .cart.cart-panel{ border-radius:18px; box-shadow:0 4px 16px rgba(255,120,120,0.2); border:3px solid rgba(255,255,255,0.9); background:#fcefea; }
  .cart-panel-header{ padding:16px 18px; background:#fcefea; }
  .cart-summary{ background:#fcefea; }
  .cart-qty-row{ display:flex; align-items:stretch; gap:0; padding:0; border:1px solid #e6d6d0; background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%); border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.06); overflow:hidden; }
  .cart-qty-btn{ width:21px; height:26px; border:0; background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%); border-radius:0; cursor:pointer; font-size:15px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; color:#333; }
  .cart-qty-btn:hover{ background:linear-gradient(180deg,#f9e9e3 0%,#f3d6cb 100%); }
  .cart-qty-value{ min-width:34px; padding:0 8px; text-align:center; font-weight:700; font-size:14px; background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%); border-left:1px solid #e6d6d0; border-right:1px solid #e6d6d0; display:flex; align-items:center; justify-content:center; }
  .cart-qty-input{ width:46px; padding:0 8px; text-align:center; font-weight:700; font-size:14px; border:0; border-left:1px solid #e6d6d0; border-right:1px solid #e6d6d0; background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%); }
  .cart-qty-wrap{ display:flex; align-items:center; gap:6px; }
  .cart-remove-btn{
    width:auto;
    min-width:32px;
    height:26px;
    padding:0 10px;
    border-radius:9px;
    background:linear-gradient(180deg,#fff6f2 0%,#fbe6de 100%);
    border:1px solid #e6d6d0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.06);
    font-size:14px;
    font-weight:700;
    color:var(--red-500);
  }
  .cart-remove-btn:hover{
    background:linear-gradient(180deg,#f9e9e3 0%,#f3d6cb 100%);
  }
  .btn-cart-checkout{ padding:16px 18px; font-size:16px; min-height:52px; border-radius:14px; }
  .cart-empty{ padding:24px 18px; font-size:14px; }
  .cart-items-by-category{ padding:14px 18px; gap:14px; background:#fdf9f8; border-radius:12px; }
  .cart-items-by-category:empty{ display:none; padding:0; background:transparent; }
  .cart-item-row{ padding:10px 12px; background:transparent; border-radius:12px; }

  .site-footer{ margin-top:20px; padding:20px 16px; border-radius:16px 16px 0 0; }
  .footer-top{ flex-direction:column; gap:16px; align-items:center; }
  .footer-contact{ align-items:center; text-align:center; }
  .footer-socials{ align-items:center; text-align:center; }
  .footer-legal{ flex-direction:column; align-items:center; text-align:center; }

  .modal-backdrop{ padding:12px; align-items:flex-end; }
  .modal{ border-radius:20px 20px 0 0; }
  .checkout-modal{ border-radius:18px 18px 0 0; max-width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
  .auth-modal{ border-radius:18px 18px 0 0; max-width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
  .auth-modal-body{ padding:12px; gap:10px; flex:1; min-height:0; overflow-y:auto; }
  .auth-step-text{ font-size:13px; }
  .auth-submit-btn{ padding:12px; font-size:15px; min-height:44px; }
  .checkout-modal-header{ padding:10px 12px; }
  .checkout-modal-title{ font-size:16px; }
  .checkout-date{ font-size:11px; }
  .checkout-close-btn{ width:28px; height:28px; font-size:16px; }
  .checkout-modal-body{ padding:12px; gap:10px; flex:1; min-height:0; overflow-y:auto; }
  .checkout-fields{ gap:8px; }
  .checkout-field label{ font-size:12px; }
  .checkout-input{ padding:8px 10px; font-size:14px; }
  .checkout-summary-wrap{ padding:10px; }
  .checkout-summary-label{ font-size:10px; margin-bottom:6px; }
  .checkout-order-summary{ font-size:13px; max-height:80px; overflow-y:auto; }
  .checkout-modal-footer{ padding:12px; gap:6px; flex-shrink:0; }
  .checkout-total-value{ font-size:18px; }
  .checkout-submit-btn{ padding:12px; font-size:15px; min-height:44px; }
  .checkout-copy-btn{ padding:6px; font-size:12px; }