/* ===== Product Detail – full CSS ===== */

.variant-page{margin-bottom:24px;}
.variant-page__grid{display:grid; grid-template-columns:1fr; gap:12px;}
.variant-page__media{grid-area:media;}
.variant-page__info{display: flex; grid-area:info; position:sticky; top:112px; flex-direction: column;}
.variant-page__specs{grid-area:specs;}
.variant-page__desc{grid-area:desc;}
.brand-page__desc{grid-area:brand-desc;}

@media (min-width:992px){
  .variant-page__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    grid-template-rows:auto auto auto;
    grid-template-areas:"media info" "specs info" "desc info" "brand-desc info";
    gap:12px; align-items:start;
  }
}
@media (max-width:991.98px){
  .variant-page__grid{
    grid-template-columns:1fr;
    grid-template-areas:"media" "info" "specs" "desc" "brand-desc";
  }
  .variant-page__info{
    position:static;
    top:auto;
  }
}

/* === ГРИД С КВАДРАТНЫМ ФОТО СЛЕВА === */
.variant-gallery__grid{display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:12px; align-items:start;}
.variant-gallery__grid > *{min-width:0; min-height:0;}
.variant-gallery__main{width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; touch-action:pan-y;}
.variant-gallery__main .swiper-wrapper,.variant-gallery__main .swiper-slide{height:100%;}
.variant-gallery__main .swiper-slide{display:grid; place-items:center; background:#f7f8fa;}
.variant-gallery__image{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1;}

/* Правая колонка-ячейка */
.variant-gallery__rail-cell{position:relative; height:100%; min-height:0; overflow:visible;}
.rail{position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; overflow-x:hidden; margin-right:-2px; scrollbar-width:thin; scrollbar-color:#888b90 transparent;}
.rail::-webkit-scrollbar{width:6px;}
.rail::-webkit-scrollbar-thumb{background:#999; border-radius:10px;}
.rail::-webkit-scrollbar-thumb:hover{background:#777;}
.rail__item{
  appearance:none; border:none; background:#fff; padding:0; margin:0; width:84px; aspect-ratio:1/1;
  border-radius:10px; overflow:hidden; cursor:pointer; opacity:.7; transition:opacity .15s,border-color .15s; flex:0 0 auto; position:relative;
}
.rail__item:hover{opacity:.9;}
.rail__item.is-active{opacity:1;}
.rail__item.is-active::after{content:""; position:absolute; inset:0; border:1px solid #111; border-radius:10px; pointer-events:none; z-index:1;}
.rail__thumb{width:100%; height:100%; object-fit:cover; display:block; border-radius:10px;}

@media (max-width:720px){
  .variant-gallery__grid{grid-template-columns:1fr; gap:8px;}
  .variant-gallery__rail-cell{position:static; height:auto;}
  .rail{position:static; display:flex; flex-direction:row; gap:8px; overflow-x:auto; overflow-y:hidden; padding-bottom:10px;}
  .rail::-webkit-scrollbar{height:8px;}
  .rail__item{width:72px; aspect-ratio:1/1; scroll-snap-align:start;}
}

/* страховка для swiper */
.swiper{overflow:hidden; width:100%;}

/* Title */
.variant-page__title-wrap{display:inline-flex; border-radius:var(--radius); margin-bottom:12px;}
.variant-page__title{margin:0; font-weight:700; font-size:22px; color:#000; font-family:'Comfortaa',system-ui,sans-serif;}

/* Fallback availabilityes */
.availability{
  display:inline-flex; 
  align-items:center; 
  flex:0 0 auto;
  align-self:flex-start;
  gap:.6rem; 
  font-size:14px; 
  font-weight:500; 
  color:var(--text);
  padding:6px 12px; 
  border-radius:8px; 
  background:rgba(0,0,0,0.04); 
  margin-bottom:12px;
}
.availability__qty{font-weight:600; color:var(--text); font-size:14px}
.availability__dot{width:8px; height:8px; border-radius:50%; display:inline-block; position:relative;}
.availability__dot::after{content:""; position:absolute; top:-4px; left:-4px; right:-4px; bottom:-4px; border-radius:50%; opacity:.5; animation:pulse 1.8s infinite ease-in-out;}
@keyframes pulse{0%{transform:scale(.9);opacity:.6}50%{transform:scale(1.3);opacity:0}100%{transform:scale(.9);opacity:.6}}
.availability--out .availability__dot{background:#dc3545;}
.availability--out .availability__dot::after{background:#dc3545;}
.availability--in .availability__dot{background:#28a745;}
.availability--in .availability__dot::after{background:#28a745;}

/* Price + Controls */
.variant-page__buy{display:flex; align-items:center; gap:1rem; flex-wrap:nowrap; margin-bottom:12px;}
.price-box{display:flex; flex-direction:column; align-items:flex-start; flex:0 0 auto;}
.price-old{padding-left:3px; line-height:1.1; font-size:16px; color:#9a9a9a; text-decoration:line-through;}
.price{line-height:1.1; color:#393D46; font-weight:700; font-size:32px; margin:0;}
.buy__controls{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.75rem; margin-top:auto;}

/* Quantity control */
.qty{display:inline-grid; grid-auto-flow:column; gap:5px; align-items:center;}
.qty__btn{
  width:var(--btn-height); height:var(--btn-height); display:grid; place-items:center; font-size:18px; border-radius:var(--radius);
  border:1px solid #111; background:transparent; cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .05s; user-select:none;
}
.qty__btn:hover{background:#111; color:#fff;}
.qty__btn:active{transform:translateY(1px);}
.qty__btn:disabled{opacity:.5; cursor:not-allowed;}
.qty__val{text-align:center; font-weight:600; font-size:18px; min-width:30px;}

/* Description */
.variant-page__description{margin-top:.5rem; font-size:16px; line-height:1.6; color:#1d1d1d;}
.variant-page__description h1,.variant-page__description h2,.variant-page__description h3{margin:.75rem 0 .5rem;}
.variant-page__description p{margin:.5rem 0;}
.variant-page__description ul,.variant-page__description ol{margin:.5rem 0 .5rem 1.25rem;}
.variant-page__description img{max-width:100%; height:auto; border-radius:8px;}

/* Small helpers */
.hover-shadow{box-shadow:var(--shadow);}
.border{border:1px solid var(--border);}
.visually-hidden{position:absolute!important; height:1px;width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}

/* Focus states for a11y */
.btn:focus-visible,.qty__btn:focus-visible{outline:2px solid #111; outline-offset:2px;}

/* Compact tweaks on small screens */
@media (max-width:480px){
  .variant-page__title{font-size:20px;}
  .price{font-size:22px;}
}

/* Optional: skeleton */
.variant-page__image[loading],.variant-page__image:is(.is-loading){
  background:linear-gradient(90deg,#f2f3f5 25%,#e9ebef 37%,#f2f3f5 63%);
  background-size:400% 100%; animation:shine 1.2s ease-in-out infinite;
}
@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}

/* ===== Варианты (чипы) ===== */
.variant-picker{display:grid; gap:12px; margin-bottom:12px;}
.variant-picker__row{display:grid; gap:8px;}
.variant-picker__label{font-size:13px; color:var(--muted);}
.variant-picker__list{display:flex; flex-wrap:wrap; gap:8px;}
.variant-chip{
  display:inline-flex; align-items:center; justify-content:center; height:var(--btn-height);
  padding:0 14px; border-radius:999px; font-size:14px; line-height:1.2; color:var(--text);
  background:var(--bg-white); border:1px solid var(--border); text-decoration:none;
  transition:background .15s,color .15s,border-color .15s,transform .05s; cursor:pointer; white-space:nowrap;
}
.variant-chip:hover{background:#000; color:#fff; border-color:#000;}
.variant-chip.is-active{background:#000; color:#fff; border-color:#000;}
.variant-chip:active{transform:translateY(1px);}
.variant-chip.is-disabled{opacity:.45;}
.variant-chip:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.12);}

.card-like{padding:1rem; border-radius:15px; background:#fff; border:1px solid var(--border,#e8eaef); box-shadow:var(--shadow,0 1px 4px rgba(0,0,0,.06));}

/* Ссылка-кнопка (тонкая) */
.link{appearance:none; border:none; background:none; padding:0; cursor:pointer; font:500 14px/1 'Inter',system-ui,sans-serif;}
.link--muted{color:var(--muted,#6c757d);}
.link:hover{text-decoration:underline;}

/* ==== Характеристики ==== */
.specs{display:grid; grid-template-columns:1fr; gap:8px;}
.specs__row{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:baseline; border-bottom:1px dashed rgba(0,0,0,.06); padding:6px 0;}
.specs__row:last-child{border-bottom:none;}
.specs__key{color:var(--muted,#6c757d); font-size:14px;}
.specs__val{color:#111; font-weight:600; font-size:15px; line-height:1.3; word-break:break-word;}

/* ==== Описание ==== */
.prose{color:#222; font:400 15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; overflow-wrap: anywhere; word-break: break-word;}
.prose p{margin:.6em 0;}
.prose h3,.prose h4{margin:1.1em 0 .5em;}
.prose ul,.prose ol{margin:.6em 0 .8em 1.1em;}
.prose li + li{margin-top:.2em;}
.prose img{max-width:100%; height:auto; border-radius:10px;}
.prose a{color:#0d6efd;}

/* Свертка длинного описания */
.prose--clamp{max-height:320px; overflow:hidden; position:relative;}
.prose--clamp::after{content:""; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 60%); pointer-events:none;}
.prose--expanded{max-height:none;}
.prose--expanded::after{display:none;}
.section__toggle[aria-expanded="true"]::after{content:"";}

/* Lightbox2 правки */
body.lb-open .lightboxOverlay{position:fixed; inset:0; width:100vw; height:100vh;}
body.lb-open #lightbox .lb-outerContainer{max-width:90vw; max-height:80vh; box-sizing:border-box;}
body.lb-open #lightbox img.lb-image{max-width:100%; max-height:80vh; width:auto; height:auto; display:block;}
body.lb-open #lightbox .lb-dataContainer{position:static; max-width:90vw; margin:12px auto 0;}
body.lb-open #lightbox .lb-data{display:flex; justify-content:space-between; align-items:center; gap:12px; background:rgba(0,0,0,.75); padding:8px 12px; border-radius:8px; box-sizing:border-box;}
body.lb-open #lightbox .lb-nav{z-index:1001;}
a[data-lightbox],.lb-link{cursor:zoom-in;}

/* маркетплейсы */
.variant-markets{display:flex; align-items:center; gap:1rem;}
.market-header{display:flex; align-items:center; gap:.6rem;}
.market-accent{width:4px; height:40px; border-radius:4px; background:linear-gradient(180deg,#005bff,#f1117e); flex:0 0 4px;}
.market-title{line-height:1.1}
.market-title span{display:block; font-weight:700; font-size:1rem}
.market-title .muted{font-weight:500; color:#6b7280}
.market-links{display:flex; gap:.75rem}
.market-btn{display:inline-flex; width:50px; height:50px; padding:0; border:none; background:none; cursor:pointer; transition:transform .2s,opacity .2s; overflow:visible;}
.market-btn img{width:100%; height:100%; display:block; object-fit:contain}
.market-btn:hover{transform:scale(1.05); opacity:.85}