/* ===========================================================================
   60-product — reference product page (oct_promo, DESIGN_SPEC §9).
   Tab card · hero (gallery + dotted-leader info) · sticky buy rail ·
   description / specifications / reviews cards · related band.
   --pr-sticky-offset is owned by the header layer; defaults to 0.
   =========================================================================== */

/* --- breadcrumbs ----------------------------------------------------------- */
#product-info .breadcrumb{
  --bs-breadcrumb-divider:'›';
  font-size:12px;line-height:18px;font-weight:400;
  margin:16px 0 0;padding:0;
}
#product-info .breadcrumb a{color:var(--pr-links-color)}
#product-info .breadcrumb-item:last-child a{color:var(--pr-grey-color);pointer-events:none}
#product-info .breadcrumb-item+.breadcrumb-item::before{color:var(--pr-grey-color)}

/* --- tab card -------------------------------------------------------------- */
.vk-ptabs{
  display:flex;gap:4px;align-items:stretch;
  margin-top:16px;padding:0 8px;
  position:sticky;top:var(--pr-sticky-offset,0px);z-index:100;
  overflow-x:auto;scrollbar-width:none;
}
.vk-ptabs::-webkit-scrollbar{display:none}
.vk-ptab{
  display:inline-flex;align-items:center;
  padding:18px 16px;position:relative;white-space:nowrap;
  font-size:14px;line-height:21px;font-weight:600;color:var(--pr-dark-text-color);
}
.vk-ptab:hover{color:var(--pr-primary-dark-color)}
.vk-ptab.active{color:var(--pr-primary-dark-color)}
.vk-ptab.active::after{
  content:'';position:absolute;left:16px;right:16px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--pr-primary-dark-color);
}

/* --- two-column layout: main + buy rail ------------------------------------ */
.vk-prod-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:16px;
  align-items:start;margin-top:16px;
}
.vk-prod-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.vk-prod-layout > *,.vk-prod-main > *{min-width:0}
.vk-buy-rail{position:sticky;top:calc(var(--pr-sticky-offset,0px) + 16px);min-width:0}

/* anchored sections land below the sticky bars */
#vk-main,#vk-description,#vk-specs,#vk-reviews{
  scroll-margin-top:calc(var(--pr-sticky-offset,0px) + 76px);
}

/* --- hero card: gallery + info --------------------------------------------- */
.vk-prod-hero{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:32px;padding:24px;
}
.vk-prod-hero.vk-noimg{grid-template-columns:1fr}

.vk-gallery{min-width:0}
.vk-gal-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:320px;
}
.vk-gal-stage a{display:flex;justify-content:center;max-width:100%;min-width:0}
.vk-gal-stage img{max-height:420px;max-width:100%;width:auto;object-fit:contain}
.vk-gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border:0;border-radius:50%;
  background:var(--pr-bg);color:var(--pr-dark-text-color);font-size:12px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color var(--pr-main-transition);
}
.vk-gal-nav:hover{background:var(--pr-light-grey-color)}
.vk-gal-nav.prev{left:0}
.vk-gal-nav.next{right:0}
.vk-gal-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vk-gal-thumb{
  width:56px;height:56px;padding:4px;background:#fff;
  border:2px solid var(--pr-light-grey-color);border-radius:8px;cursor:pointer;
  transition:border-color var(--pr-main-transition);
}
.vk-gal-thumb img{width:100%;height:100%;object-fit:contain}
.vk-gal-thumb:hover{border-color:var(--pr-grey-color)}
.vk-gal-thumb.active{border-color:var(--pr-primary-dark-color)}

/* info column */
.vk-prod-info{min-width:0}
.vk-prod-info h1{font-size:24px;line-height:36px;font-weight:700;margin:0}
.vk-prod-info .vk-hairline{margin:12px 0}
.vk-prod-meta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;font-size:12px;line-height:18px;
}
.vk-prod-rating{display:flex;align-items:center;gap:8px;font-weight:400}
.vk-prod-rating .fa-stack{width:1em;height:1.4em;line-height:1.4em;font-size:12px;color:var(--pr-yellow-color)}
.vk-prod-rating .fa-regular.fa-star{color:var(--pr-light-grey-color)}
.vk-prod-rating a{color:var(--pr-links-color);text-decoration:underline}
.vk-prod-code{font-size:12px;font-weight:400}
.vk-prod-brand{font-size:12px;font-weight:400;margin-top:8px;color:var(--pr-dark-grey-color)}
.vk-prod-brand a{color:var(--pr-links-color)}
.vk-prod-subhead{font-size:16px;line-height:24px;font-weight:700;margin:20px 0 12px}

/* dotted leaders */
.vk-leaders{display:flex;flex-direction:column;gap:10px}
.vk-leader-row{display:flex;align-items:baseline;gap:6px;font-size:14px;line-height:20px;font-weight:400}
.vk-leader-name{color:var(--pr-dark-grey-color);flex-shrink:0;max-width:55%}
.vk-leader-dots{flex:1;min-width:24px;border-bottom:1px dotted #ccd1d9;transform:translateY(-4px)}
.vk-leader-val{flex:0 0 42%;max-width:42%}
.vk-leaders-specs .vk-leader-name{color:var(--pr-dark-text-color);font-weight:500}
.vk-leaders-specs .vk-leader-val{color:var(--pr-grey-color)}
.vk-link-blue{
  display:inline-block;margin-top:12px;font-size:14px;
  color:var(--pr-links-color)!important;text-decoration:underline;
}

/* delivery */
.vk-delivery{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vk-delivery li{display:flex;justify-content:space-between;align-items:center;gap:16px}
.vk-del-name{display:flex;align-items:center;gap:10px;font-weight:500}
.vk-del-name i{color:#da291c;width:18px;text-align:center}
.vk-del-price{font-size:12px;font-weight:400;text-align:right}
.vk-del-note{font-size:12px;line-height:18px;font-weight:400;color:var(--pr-grey-color);margin-top:12px}

/* --- buy rail card ---------------------------------------------------------- */
.vk-buy-card{padding:24px}
.vk-buy-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vk-stock-label{font-size:14px;font-weight:600}
.vk-stock-label.in{color:var(--pr-green-color)}
.vk-stock-label.order{color:#c99417}
.vk-buy-icons{display:flex;gap:8px}
.vk-icon-btn{
  width:36px;height:36px;border-radius:8px;
  border:1px solid var(--pr-light-grey-color);background:#fff;
  color:var(--pr-dark-text-color);font-size:14px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color var(--pr-main-transition),border-color var(--pr-main-transition);
}
.vk-icon-btn:hover{color:var(--pr-primary-dark-color);border-color:var(--pr-primary-dark-color)}
.vk-buy-price{margin-top:16px}
.vk-price-old{font-size:14px;font-weight:400;color:var(--pr-grey-color);text-decoration:line-through}
.vk-price-now{font-size:32px;line-height:44px;font-weight:700}
.vk-price-now.sale{color:var(--pr-red-color)}
.vk-price-meta{font-size:12px;line-height:18px;font-weight:400;margin-top:4px}
.vk-bulk{list-style:none;margin:8px 0 0;padding:8px 12px;background:var(--pr-bg);border-radius:8px;
  font-size:12px;line-height:20px;font-weight:400}
.vk-buy-card .vk-hairline{margin:16px 0}
.vk-buy-row{display:flex;gap:12px}
.vk-qty{display:flex;border:2px solid var(--pr-border);border-radius:8px;overflow:hidden;background:#fff;flex-shrink:0}
.vk-qty input.form-control{
  border:0;border-radius:0;width:44px;min-height:44px;padding:0;
  text-align:center;font-size:14px;font-weight:600;
}
.vk-qty input.form-control:focus{border:0;outline:0;box-shadow:none}
.vk-qty-btns{display:flex;flex-direction:column;border-left:1px solid var(--pr-border)}
.vk-qty-btn{
  flex:1;width:26px;border:0;background:#fff;cursor:pointer;
  font-size:13px;line-height:1;color:var(--pr-dark-text-color);padding:0;
  transition:color var(--pr-main-transition);
}
.vk-qty-btn:hover{color:var(--pr-primary-dark-color)}
.vk-qty-btn+.vk-qty-btn{border-top:1px solid var(--pr-border)}
.vk-btn-cart{flex:1;height:48px}
#vk-quick-order{margin-top:12px;height:48px}
.vk-quick-note{font-size:10px;line-height:15px;margin-top:6px}
#form-product .form-label{font-size:12px;font-weight:600}

/* --- section cards ---------------------------------------------------------- */
.vk-prod-section{padding:24px}
.vk-sec-head{display:flex;align-items:center;gap:16px}
.vk-sec-icon{
  width:48px;height:48px;border-radius:12px;background:var(--pr-bg);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.vk-sec-head h2{margin:0;font-size:22px;line-height:33px;font-weight:700}
.vk-prod-section .vk-hairline{margin:16px 0 20px}
.vk-desc-body{font-size:14px;line-height:22px;font-weight:400}
.vk-desc-body img{max-width:100%;height:auto}
.vk-prod-tags{font-size:12px;font-weight:400;margin:16px 0 0}
.vk-prod-tags a{color:var(--pr-links-color)}
.vk-spec-group{font-size:14px;line-height:21px;font-weight:700;margin:20px 0 12px}
.vk-spec-group:first-of-type{margin-top:0}

/* reviews card: restyle the stock review list + form */
#vk-reviews .form-label{font-size:12px;font-weight:600}
#vk-reviews #button-review{
  background:var(--pr-primary-light-color);border:0;border-radius:8px;
  height:44px;padding:0 24px;font-weight:700;color:#fff;
  transition:background-color var(--pr-main-transition);
}
#vk-reviews #button-review:hover{background:#44528a}
#vk-reviews h2{font-size:18px;line-height:27px;font-weight:700;margin:20px 0 12px}
#vk-reviews .vk-sec-head h2{font-size:22px;line-height:33px;margin:0}
#vk-reviews #input-rating{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:400}
#vk-reviews .rating .fa-stack{color:var(--pr-yellow-color)}

/* --- related band ----------------------------------------------------------- */
.vk-related h3{font-size:22px;line-height:33px;font-weight:600;margin:24px 0 16px}

/* --- responsive ------------------------------------------------------------- */
@media (max-width:1199px){
  .vk-prod-layout{grid-template-columns:minmax(0,1fr) 340px}
  .vk-prod-hero{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px}
}
@media (max-width:991px){
  /* single column: hero, buy card, then the section cards */
  .vk-prod-layout{grid-template-columns:1fr}
  .vk-prod-main{display:contents}
  .vk-prod-hero{order:1;grid-template-columns:1fr;gap:16px}
  .vk-buy-rail{order:2;position:static}
  #vk-description{order:3}
  #vk-specs{order:4}
  #vk-reviews{order:5}
  .vk-gal-stage{min-height:240px}
  .vk-gal-stage img{max-height:300px}
}
@media (max-width:575px){
  .vk-prod-hero,.vk-prod-section,.vk-buy-card{padding:16px}
  .vk-prod-info h1{font-size:20px;line-height:30px}
  .vk-price-now{font-size:28px;line-height:38px}
  .vk-leader-name,.vk-leader-val{max-width:none;flex:0 1 auto}
  .vk-leader-row{flex-wrap:wrap}
  .vk-buy-row{flex-wrap:wrap}
  .vk-btn-cart{min-width:200px}
}

/* Product descriptions arrive with raw <iframe> video embeds (fixed 560px
   from the old editor) — cap them at the card width or a phone viewport gets
   zoomed out by the overflow. */
.vk-prod-section iframe,.vk-prod-info iframe{max-width:100%}

/* ============ fast order (phone-only) modal ============ */
/* Everything position:fixed — the modal can never widen the document. The
   backdrop matches the cart drawer's (70-cart.css) so the two overlays read
   as one family. */
.vk-fo-backdrop{
  position:fixed;inset:0;z-index:2100;
  background:rgba(18,23,21,.8);
}
body.vk-fo-open{overflow:hidden}
.vk-fo-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2101;
  width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;
  background:#fff;border-radius:8px;padding:28px 24px 24px;
  box-shadow:0 12px 40px rgba(18,23,21,.25);
}
.vk-fo-close{
  position:absolute;top:8px;right:8px;width:36px;height:36px;
  border:0;background:none;cursor:pointer;
  font-size:24px;line-height:36px;color:var(--pr-grey-color);
}
.vk-fo-close:hover{color:var(--pr-dark-text-color)}
.vk-fo-title{font-weight:700;font-size:18px;line-height:26px;color:var(--pr-dark-text-color)}
.vk-fo-product{
  font-size:12px;line-height:18px;color:var(--pr-grey-color);
  margin:6px 0 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vk-fo-label{display:block;font-size:12px;line-height:18px;margin-bottom:4px;color:var(--pr-dark-text-color)}
/* .vk-fo-modal prefix outranks 00-tokens.css's input[type=tel] (0,1,1),
   which otherwise forces 12px — and 16px is what stops iOS zooming the page
   on focus */
.vk-fo-modal .vk-fo-input{
  width:100%;height:48px;min-height:48px;padding:0 14px;font-size:16px;
  border:1px solid var(--pr-light-grey-color);border-radius:6px;
  color:var(--pr-dark-text-color);background:#fff;
}
.vk-fo-modal .vk-fo-input:focus{outline:none;border-color:var(--pr-primary-dark-color)}
/* honeypot: off-screen but focusable-by-bots; never display:none, some bots skip those */
.vk-fo-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.vk-fo-err{color:#c0392b;font-size:12px;line-height:18px;margin-top:8px}
#vk-fo-submit{margin-top:16px;height:48px}
.vk-fo-note{font-size:11px;line-height:16px;margin-top:10px}
#vk-fo-done{text-align:center}
.vk-fo-done-icon{font-size:40px;line-height:1;color:#2e7d4f;margin:8px 0 12px}
.vk-fo-done-text{font-size:13px;line-height:20px;color:var(--pr-dark-text-color);margin:10px 0 18px}
#vk-fo-ok{height:44px}