/* ЛАБОРКОМПЛЕКТ — product card template (uses styles.css tokens) */

.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-faint);padding:calc(22px * var(--sp)) 0 0}
.crumb a{cursor:pointer;transition:.12s}
.crumb a:hover{color:var(--teal-deep)}
.crumb svg{width:14px;height:14px;opacity:.6}
.crumb b{color:var(--ink-soft);font-weight:500}

/* ---------- product grid ---------- */
.pc{display:flex;flex-direction:column;gap:calc(34px * var(--sp));padding:calc(26px * var(--sp)) 0 calc(56px * var(--sp))}

@media(min-width:920px){
  .pc{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    grid-template-areas:
      "head head"
      "gallery info"
      "desc  specs"
      "docs  docs";
    column-gap:clamp(30px,4vw,64px);
    row-gap:clamp(34px,4vw,60px);
    align-items:start;
    padding-bottom:calc(64px * var(--sp));
  }
  .pc__head{grid-area:head}
  .pc__gallery{grid-area:gallery}
  .pc__info{grid-area:info}
  .pc__desc{grid-area:desc}
  .pc__specs{grid-area:specs}
  .pc__docs{grid-area:docs}
}

/* ---------- row 1: title + price ---------- */
.pc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:calc(24px * var(--sp))}
.pc__titlewrap{max-width:64ch}
.pc__h1{font-size:clamp(1.85rem,3.2vw,2.9rem);line-height:1.06}
.pc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
.pc__sku{color:var(--ink-faint)}
.pc__sku b{color:var(--ink-soft);font-weight:600}
.stock{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--teal-deep)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.rating{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.rating svg{width:15px;height:15px}
.rating span{color:var(--ink-faint);font-weight:500}

.pc__price{flex-shrink:0;text-align:right}
@media(max-width:919px){.pc__price{text-align:left}}
.pc__price-eye{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.pc__price-val{font-family:var(--head-font);font-size:clamp(2.1rem,3.4vw,3rem);line-height:1;color:var(--teal-deep);
  letter-spacing:-0.01em;margin-top:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc__price-val small{font-size:.42em;color:var(--ink-faint);font-family:var(--ui-font);font-weight:600;letter-spacing:.02em;margin-right:6px;vertical-align:.42em}
.pc__price-note{font-size:12.5px;color:var(--ink-faint);margin-top:8px}

/* ---------- row 2 left: gallery ---------- */
.pc__gallery{display:grid;gap:14px;grid-template-columns:1fr;align-self:start}
.pc__gallery[data-thumbs="left"]{grid-template-columns:84px 1fr;grid-auto-flow:column}
.pc__gallery[data-thumbs="left"] .gal__thumbs{flex-direction:column;order:-1}

.gal__main{position:relative;min-height:200px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  cursor:zoom-in;background:var(--card);box-shadow:var(--shadow-sm)}
.gal__zoom{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:9px;
  background:rgba(251,248,239,.9);border:1px solid var(--line);color:var(--teal-deep);display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;box-shadow:var(--shadow-sm);transition:.16s}
.gal__main:hover .gal__zoom{background:var(--teal-deep);color:#F4EFDF;border-color:var(--teal-deep)}
.gal__zoom svg{width:19px;height:19px}
.gal__hint{position:absolute;left:12px;bottom:12px;z-index:3;font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);
  background:rgba(251,248,239,.9);border:1px solid var(--line-soft);border-radius:6px;padding:5px 10px}

.gal__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gal__thumb{position:relative;flex:0 0 auto;width:84px;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);cursor:pointer;background:var(--card);transition:.16s;padding:0}
.pc__gallery[data-thumbs="left"] .gal__thumb{width:100%}
.gal__thumb:hover{border-color:var(--teal)}
.gal__thumb[data-active="1"]{border-color:var(--teal-deep);box-shadow:0 0 0 2px var(--teal-deep) inset}

/* striped photo placeholder */
.ph{position:relative;width:100%;height:100%;overflow:hidden;
  background-image:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 11px,var(--card) 11px,var(--card) 22px)}
.ph--soft{background-image:repeating-linear-gradient(135deg,var(--teal-tint-2),var(--teal-tint-2) 11px,var(--card) 11px,var(--card) 22px)}
.ph__tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  background:var(--card);border:1px solid var(--line-soft);border-radius:6px;padding:6px 11px;max-width:84%;line-height:1.4;white-space:nowrap}
.gal__thumb .ph__tag{font-size:8.5px;padding:3px 5px;border:0;background:transparent;letter-spacing:.06em}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);
  background:rgba(11,35,31,.82);backdrop-filter:blur(3px);animation:lbIn .2s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__stage{position:relative;display:flex;align-items:center;justify-content:center}
.lb__stage img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.lb__close{position:absolute;top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);z-index:5;width:46px;height:46px;border-radius:50%;
  background:rgba(251,248,239,.92);border:0;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb__close svg{width:24px;height:24px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  background:rgba(251,248,239,.9);border:0;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5}
.lb__nav svg{width:26px;height:26px}
.lb__nav--prev{left:clamp(10px,3vw,26px)}
.lb__nav--next{right:clamp(10px,3vw,26px)}
.lb__count{position:absolute;left:50%;bottom:clamp(16px,3vw,28px);transform:translateX(-50%);z-index:5;
  font-size:13px;letter-spacing:.04em;color:#F4EFDF;background:rgba(11,35,31,.6);border:1px solid rgba(244,239,223,.2);
  border-radius:999px;padding:7px 16px}

/* ---------- row 2 right: info ---------- */
.pc__info{display:flex;flex-direction:column;gap:20px}
.spec-hi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:6px 18px;box-shadow:var(--shadow-sm)}
.spec-hi__row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.spec-hi__row:last-child{border-bottom:0}
.spec-hi__ic{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:var(--teal-tint);display:flex;align-items:center;justify-content:center}
.spec-hi__ic svg{width:20px;height:20px;color:var(--teal-deep)}
.spec-hi__k{font-size:13px;color:var(--ink-soft);line-height:1.3}
.spec-hi__v{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.spec-hi__row--country{background:var(--accent-tint);margin:0 -18px;padding:13px 18px}
.spec-hi__row--country .spec-hi__ic{background:rgba(181,118,46,.16)}
.spec-hi__row--country .spec-hi__ic svg{color:var(--accent)}
.spec-hi__row--country .spec-hi__v{color:var(--accent)}

.pc__short{font-size:15px;color:var(--ink-soft);line-height:1.6}
.pc__buy{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.pc__buy-row{display:flex;gap:12px;flex-wrap:wrap}
.pc__buy-row .btn{flex:1;min-width:150px}
.pc__buy-assure{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--ink-faint)}
.pc__buy-assure span{display:inline-flex;align-items:center;gap:7px}
.pc__buy-assure svg{width:15px;height:15px;color:var(--teal)}

/* ---------- row 3: full description ---------- */
.pc__h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px}
.pc__h2 svg{width:24px;height:24px;color:var(--teal)}
.prose{color:var(--ink-soft);font-size:15.5px;line-height:1.72;max-width:64ch}
.prose>*+*{margin-top:16px}
.prose h3{font-family:var(--head-font);font-size:1.22rem;color:var(--ink);margin-top:26px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.prose li{position:relative;padding-left:26px}
.prose li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;
  background:var(--teal);transform:rotate(45deg)}

/* ---------- row 3 right: spec tables ---------- */
.spec-tbl{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.spec-tbl+.spec-tbl{margin-top:18px}
.spec-tbl__cap{font-family:var(--head-font);font-size:1.08rem;color:var(--teal-deep);background:var(--paper);
  padding:14px 18px;border-bottom:1px solid var(--line)}
.spec-tbl table{width:100%;border-collapse:collapse}
.spec-tbl tr{border-bottom:1px solid var(--line-soft)}
.spec-tbl tr:last-child{border-bottom:0}
.spec-tbl tr:nth-child(even){background:var(--teal-tint-2)}
.spec-tbl th{text-align:left;font-weight:500;color:var(--ink-soft);font-size:13.5px;padding:12px 18px;width:52%;vertical-align:top}
.spec-tbl td{text-align:right;font-weight:600;color:var(--ink);font-size:13.5px;padding:12px 18px;
  font-variant-numeric:tabular-nums;vertical-align:top}

/* ---------- documents ---------- */
.pc__docs{border-top:1px solid var(--line);padding-top:calc(34px * var(--sp))}
.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.doc-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 16px;cursor:pointer;transition:.18s;text-align:left}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)}
.doc-card__ic{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:var(--teal-tint);display:flex;align-items:center;justify-content:center}
.doc-card__ic svg{width:22px;height:22px;color:var(--teal-deep)}
.doc-card__name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.doc-card__meta{font-size:12px;color:var(--ink-faint);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.doc-card__dl{margin-left:auto;color:var(--ink-faint);transition:.16s}
.doc-card:hover .doc-card__dl{color:var(--teal-deep);transform:translateY(2px)}
.doc-card__dl svg{width:20px;height:20px}

/* ---------- responsive ---------- */
@media(max-width:919px){
  .pc__head{flex-direction:column;align-items:flex-start;gap:16px}
  .docs-grid{grid-template-columns:repeat(2,1fr)}
  .gal__main{aspect-ratio:1;max-height:none}
  .gal__main>img{width:100%!important;height:100%!important;object-fit:contain!important;display:block}
}
@media(max-width:560px){
  .docs-grid{grid-template-columns:1fr}
  .pc__buy-row .btn{flex:1 1 100%}
  .gal__thumb{width:64px}
}