/* ===== RESET / UTILS ===== */
body.no-scroll { overflow: hidden; }

/* ===== MOBILE HEADER (<=991px) ===== */
@media (max-width: 991px){
  .warp-row > header.warp-content{ display:none !important; }

  .m-header{
    height:56px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; background:#0c0c0c; position:sticky; top:0; z-index:1001;
  }
  .m-logo img{ height:22px; display:block; }

  .m-burger{
    width:40px; height:40px; display:inline-flex; flex-direction:column; justify-content:center;
    gap:5px; background:#111; border:1px solid #2a2a2a; border-radius:20px; cursor:pointer;
  }
  .m-burger-bar{ height:2px; width:18px; background:#fff; display:block; margin:0 auto; }

  .m-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
    opacity:0; transition:opacity .2s ease;
  }
  .m-backdrop.is-open{ opacity:1; }

  .m-drawer{
    position:fixed; top:0; left:0; height:100dvh; width:84vw; max-width:360px;
    background:#0c0c0c; color:#fff; z-index:1002;
    transform:translateX(-100%); transition:transform .24s ease;
    display:flex; flex-direction:column; overflow:auto;
    box-shadow: 2px 0 16px rgba(0,0,0,.35);
  }
  .m-drawer.is-open{ transform:translateX(0); }

  .m-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid #1e1e1e;
  }
  .m-drawer-logo{ height:18px; }
  .m-close{
    background:#1a1a1a; border:1px solid #2a2a2a; color:#fff; width:36px; height:36px;
    border-radius:18px; font-size:18px; line-height:36px; text-align:center; cursor:pointer;
  }

  .m-menu{ list-style:none; margin:0; padding:8px 0; }
  .m-menu > li > a,
  .m-acc-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; font-size:16px; text-decoration:none; color:#eee;
    border-bottom:1px solid #171717; background:none;
  }
  .m-menu > li > a:active{ background:#121212; }
  .m-acc{ background:#0c0c0c; }
  .m-acc-btn{ cursor:pointer; text-align:left; border:none; }
  .m-acc-caret{
    display:inline-block; width:8px; height:8px; border-right:2px solid #aaa; border-bottom:2px solid #aaa;
    transform:rotate(-45deg); transition:transform .2s ease;
  }
  .m-acc-btn[aria-expanded="true"] .m-acc-caret{ transform:rotate(45deg); }
  .m-acc-panel{ display:none; padding:6px 0 10px; background:#0f0f0f; }
  .m-acc-panel li a{
    display:block; padding:10px 26px; color:#cfcfcf; font-size:15px; text-decoration:none;
  }
  .m-menu a[aria-current="page"]{ color:#00d1af; }
}

/* ===== DESKTOP: скрыть мобильные элементы ===== */
@media (min-width: 992px){
  .m-header, .m-drawer, .m-backdrop{ display:none !important; }
}

/* ===== PRODUCT PAGE ===== */
@media (max-width: 991px){
  .pd-info{
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows:auto;
    gap:18px;
  }

  .large-picture{
    order:1; display:flex; align-items:center; justify-content:center;
    padding:8px 0 0;
  }
  .large-picture img{ max-width:100%; height:auto; display:block; }

  .small-picture{
    order:2; display:flex; gap:10px; overflow-x:auto; padding:0 2px 8px;
  }
  .small-picture img{
    width:64px; height:64px; object-fit:cover;
    border-radius:8px; opacity:.7; border:1px solid #e6e6e6;
    flex:0 0 auto; cursor:pointer;
  }
  .small-picture img.active{ opacity:1; border-color:#00d1af; }

  .information{ order:3; padding:8px 2px 2px; }
  .information h3{ margin:0 0 10px; font-size:20px; line-height:1.2; }

  .info-group{
    display:flex; gap:10px; align-items:flex-start;
    padding:8px 0; border-bottom:1px solid #f1f1f1;
  }
  .info-group .description{ min-width:120px; color:#666; font-size:14px; }
  .info-group .value{ flex:1; font-size:14px; color:#111; }

  .info-group .tag{
    display:inline-block; padding:6px 10px; margin:4px 6px 0 0;
    background:#f6f7f8; border:1px solid #e6e6e6; border-radius:16px;
    font-size:12px; line-height:1; color:#333;
  }

  .price{ font-size:22px; font-weight:700; color:#111; }

  /* qty + кнопка */
  .product-dtl-info-action .item{
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  }
  .product-dtl-info-action .input-group{
    position:relative; display:grid;
    grid-template-columns:56px 1fr 56px;
    align-items:center; row-gap:12px; width:100% !important;
  }
  .product-dtl-info-action .input-group::before{
    content:""; position:absolute; inset:0 0 calc(100% - 52px) 0; /* фон под счетчиком */
    height:52px; border:1px solid #e6e6e6; border-radius:28px; background:#fff;
    z-index:0;
  }
  .button-minus2,.button-plus2{
    z-index:1; width:56px; height:52px; background:#fff !important; border:0 !important;
    font-size:20px; font-weight:700; cursor:pointer; transition:background .15s,transform .15s;
  }
  .button-minus2{ border-right:1px solid #eee; }
  .button-plus2{ border-left:1px solid #eee; }
  .button-minus2:hover,.button-plus2:hover{ background:#f7f7f7; transform:translateY(-1px); }
  .button-minus2:active,.button-plus2:active{ transform:none; }

  .quantity-field{
    z-index:1; width:100%; height:52px; background:transparent !important; border:0 !important; outline:0;
    text-align:center; font-size:16px; font-weight:600; color:#111;
    -moz-appearance:textfield;
  }
  .quantity-field::-webkit-outer-spin-button,
  .quantity-field::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  .product-dtl-info-add-bag-buy.link{
    width:100% !important; max-width:none !important; border-radius:28px !important;
    padding:14px 18px !important; font-size:16px;
  }
}

/* DESKTOP: превью вертикально */
@media (min-width: 992px){
  .small-picture{ display:flex; flex-direction:column; gap:10px; }
  .small-picture img{
    width:84px; height:84px; object-fit:cover;
    border-radius:10px; border:1px solid #e6e6e6; opacity:.8; cursor:pointer;
  }
  .small-picture img.active{ opacity:1; border-color:#00d1af; }
}

/* Кнопка Buy now — единый вид */
.product-dtl-info-add-bag-buy.link{
  display:inline-flex !important; align-items:center; justify-content:center;
  background:#00d1af !important; color:#fff !important; border:none;
  border-radius:20px !important; padding:12px 32px !important; font-weight:600;
  box-shadow:0 4px 10px rgba(0,209,175,.25);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.product-dtl-info-add-bag-buy.link:hover{ background:#00b89c !important; transform:translateY(-2px); }
.product-dtl-info-add-bag-buy.link:active{ transform:none; box-shadow:0 3px 6px rgba(0,209,175,.25); }

/* FOOTER компактнее */
.warp-row > footer.warp-content{ padding-top:25px !important; padding-bottom:48px !important; box-sizing:border-box; }
footer .logo-out-links img.logo, footer .logo-out-links img{ height:36px !important; width:auto !important; display:block; margin-bottom:6px !important; }
footer .desc-list, footer .contact-desc-list{ padding:24px 24px !important; margin:0 !important; }
footer .desc-list > strong, footer .contact-desc-list > strong{ display:block; margin-bottom:8px !important; font-size:16px; line-height:1.1; }
footer .desc-list a, footer .contact-desc-list p{ display:block; margin:18px 0 !important; padding:0 !important; line-height:1.2; }
footer .contact-desc-list p{ font-size:14px; }
.warp-row .warp-content.copyright{ padding:10px 0 !important; font-size:13px; line-height:1; }
.warp-row > footer.warp-content, .warp-row > .warp-content.copyright{ min-height:0 !important; gap:0 !important; }
@media (max-width:768px){
  .warp-row > footer.warp-content{ padding-top:12px !important; padding-bottom:8px !important; }
  footer .logo-out-links img.logo{ height:28px !important; }
  footer .desc-list a, footer .contact-desc-list p{ font-size:13px; }
}

/* ===== MOBILE FIXES: принудительно складываем в столбик и убираем обтекания ===== */
@media (max-width: 991px){
  /* Секция товара — только колонкой */
  .pd-info{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    width:100% !important;
  }

  /* Каждый подсекционный блок на всю ширину, без float/fixed-width */
  .pd-info > .small-picture,
  .pd-info > .large-picture,
  .pd-info > .information{
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
  }

  /* Большое изображение — адаптивно */
  .large-picture{ order:1 !important; display:flex !important; justify-content:center !important; }
  .large-picture img{ max-width:100% !important; height:auto !important; display:block !important; }

  /* У некоторых тем внутри стоят фикс. размеры контейнеров — снимаем */
  .large-picture .goods-image,
  .large-picture .middle,
  .large-picture .imgbox{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
  }
  /* отключаем слой-лупу, чтобы не мешал размерам */
  .large-picture .layer{ display:none !important; }

  /* Превью — строго горизонтальная лента со скроллом */
  .small-picture{
    order:2 !important;
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    overflow-x:auto !important;
    padding:0 2px 8px !important;
  }
  .small-picture .ant-spin-nested-loading,
  .small-picture .ant-spin-container{
    flex:0 0 auto !important;
    width:auto !important;
  }
  .small-picture img{
    width:64px !important; height:64px !important; object-fit:cover;
    border:1px solid #e6e6e6; border-radius:8px; opacity:.75;
  }
  .small-picture img.active{ opacity:1; border-color:#00d1af; }

  /* Информация — обычный поток под фото */
  .information{ order:3 !important; padding:8px 2px 2px !important; }
  .info-group{ display:flex !important; gap:10px; align-items:flex-start; border-bottom:1px solid #f1f1f1; }
  .info-group .description{ min-width:120px; color:#666; font-size:14px; }
  .info-group .value{ flex:1; font-size:14px; color:#111; }
  .price{ font-size:22px; font-weight:700; }

  /* Кол-во + кнопка — на всю ширину */
  .product-dtl-info-action .item{ display:flex !important; flex-direction:column; gap:12px; }
  .product-dtl-info-action .input-group{
    display:grid !important;
    grid-template-columns:56px 1fr 56px !important;
    width:100% !important;
    align-items:center;
  }
  .button-minus2,.button-plus2{ width:56px !important; height:52px !important; }
  .quantity-field{ height:52px !important; font-size:16px !important; }
  .product-dtl-info-add-bag-buy.link{
    width:100% !important; max-width:none !important; border-radius:28px !important;
    padding:14px 18px !important; font-size:16px !important;
  }
}



/* ==== MOBILE: превью слева, большое фото справа ==== */
@media (max-width: 991px){
  /* 2 колонки: 68px под превью + остальное под фото */
  .pd-info{
    display:grid !important;
    grid-template-columns: 68px 1fr !important;
    grid-template-areas:
      "thumbs image"
      "info   info" !important;
    gap:12px 14px !important;
    align-items:start !important;
    width:100% !important;
  }

  .small-picture{
    grid-area: thumbs !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 !important;
    max-height:70vh !important;   /* чтобы список не растягивал страницу */
  }
  .small-picture img{
    width:60px !important;
    height:60px !important;
    object-fit:cover;
    border:1px solid #e6e6e6;
    border-radius:8px;
    opacity:.75;
  }
  .small-picture img.active{ opacity:1; border-color:#00d1af; }

  .large-picture{
    grid-area: image !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    padding:0 !important;
  }
  .large-picture img{
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }

  .information{
    grid-area: info !important;
    margin-top:6px !important;
  }
}