/*
 * Single product page (PDP).
 *
 * Extracted from the source layout's preke.html <style> block, section
 * "PREKĖS PUSLAPIS". Loaded only on is_product() and after main.css, which it
 * relies on for the design tokens (--brand, --ink, --line, …) and for the base
 * .btn / .wrap / .badge / .prod rules it overrides here.
 *
 * Omitted from the source on purpose:
 *   - .crumbs, now in main.css: the breadcrumbs are on every inner page, and
 *     keeping a second copy here overrode the shared spacing
 *   - a verbatim repeat of the .gal-zoom/.lb lightbox rules
 *   - .tab-btns/.tab-pane, leftovers of a tab UI the accordions replaced
 *     (the first .tab-btns rule is even missing its selector in the source)
 *   - .drawer and html,body{overflow-x} — already in main.css; redeclaring the
 *     drawer here would break the shared mobile menu
 *
 * @package Statybumedis
 */

/* ===== PREKĖS PUSLAPIS ===== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pp{display:grid; grid-template-columns:1.16fr .84fr; gap:26px; padding:12px 0 42px; align-items:start}
/* сетка фото */
.pgal{display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start}
.gtile{margin:0; position:relative; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden;
       aspect-ratio:1/1; cursor:zoom-in}
.gtile.wide{grid-column:1 / -1; aspect-ratio:4/3}
.gtile img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gtile.pad img{object-fit:contain; padding:20px}
.gtile:hover img{transform:scale(1.3)}
.gtile.pad:hover img{transform:scale(1.45)}
.gtile .badge{position:absolute; top:14px; left:14px; z-index:2}
.gtile .cap{position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.96); border:1px solid var(--line);
            border-radius:6px; padding:5px 11px; font-size:12px; font-weight:500; z-index:2}
.gal-zoom{position:absolute; right:14px; bottom:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.94);
          border:1px solid var(--line); display:flex; align-items:center; justify-content:center; z-index:2;
          box-shadow:0 2px 10px rgba(20,30,15,.12)}
.gal-zoom svg{width:17px; height:17px; color:var(--ink)}
.lb{position:fixed; inset:0; background:rgba(20,24,16,.9); display:none; align-items:center; justify-content:center; z-index:400; padding:36px}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:88vh; object-fit:contain; background:#fff; border-radius:10px}
.lb .x{position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.9);
       font-size:22px; cursor:pointer; line-height:1}
/* липкая колонка покупки */
.buy{position:sticky; top:18px}
/* блок покупки */
.buy h1{font-size:clamp(24px,2.8vw,34px); line-height:1.12}
.buy .meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:7px; font-size:13px; color:var(--mut)}
.buy .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--line)}
.buy .meta .in{display:inline-flex; align-items:center; gap:6px}
.buy .meta .in b{color:var(--ink)}
.buy .meta i.stock-dot{width:7px; height:7px; border-radius:50%; background:var(--brand); display:inline-block}
.stock-dot{width:9px; height:9px; border-radius:50%; background:var(--brand)}
.price-box{margin:12px 0 2px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.price-box .big{font-family:"Anybody",sans-serif; font-weight:700; font-size:34px}
.price-box .big small{font-size:15px; font-weight:500}
.price-box .sec{font-size:14.5px; color:var(--mut)}
.opt{margin-top:15px}
.lbl{font-size:12px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; margin-bottom:7px}
.lbl span{color:var(--ink); text-transform:none; letter-spacing:0; font-weight:600; margin-left:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative; cursor:pointer}
.chips input{position:absolute; opacity:0; width:0; height:0}
.chips .chip-out{font:inherit; background:none; border:none; padding:0; cursor:pointer}
.chips .chip-out span{display:flex; flex-direction:column; gap:2px; line-height:1.15; border:1.5px solid var(--line);
                      border-radius:8px; padding:8px 13px; font-size:14.5px; color:var(--mut); text-decoration:line-through;
                      text-decoration-color:var(--line)}
.chips .chip-out i{font-style:normal; font-size:11.5px; font-weight:500; text-decoration:none; color:var(--mut)}
.chips .chip-out:hover span{border-color:var(--ink); color:var(--ink)}
.notify{display:inline-flex; align-items:center; gap:7px; margin-top:9px; font:inherit; font-size:13px; font-weight:500;
        color:var(--mut); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.notify svg{width:14px; height:14px}
.notify:hover{color:var(--brand-d)}
.chips.len span{display:flex; flex-direction:column; gap:2px; line-height:1.15}
.chips.len i{font-style:normal; font-size:11.5px; font-weight:500; color:var(--mut)}
.chips.len input:checked + span i{color:rgba(255,255,255,.85)}
.chips span{display:inline-block; border:1.5px solid var(--line); border-radius:8px; padding:8px 13px; font-size:14.5px; background:#fff; transition:.15s}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked + span{border-color:var(--brand); background:var(--brand); color:#fff; font-weight:600}
.chips .out span{color:var(--mut); text-decoration:line-through}
/* конфигуратор покраски */
.paint{margin-top:16px; border:1.5px solid var(--line); border-radius:12px; overflow:hidden}
.paint.on{border-color:var(--brand)}
.paint-head{display:grid; grid-template-columns:18px 1fr; align-items:center; column-gap:10px; row-gap:2px; padding:11px 13px; cursor:pointer; background:var(--soft)}
.paint-head input{width:18px; height:18px; accent-color:var(--brand); margin:0; flex:0 0 18px}
.paint-head b{display:block; font-size:14.5px; line-height:1.25}
.paint-head>span{display:contents}
.paint-head p{grid-column:2}
.paint-head p{font-size:12.5px; color:var(--mut); margin:2px 0 0; line-height:1.35}
.paint-body{display:none; padding:15px; border-top:1px solid var(--line)}
.paint.on .paint-body{display:block}
.tech{display:grid; gap:6px}
.tech label{display:flex; align-items:flex-start; gap:10px; border:1.5px solid var(--line); border-radius:9px; padding:10px 13px; cursor:pointer; transition:.15s}
.tech label:hover{border-color:var(--ink)}
.tech input{accent-color:var(--brand); margin-top:4px; flex:0 0 auto}
.tech input:checked ~ .tt b{color:var(--brand-d)}
.tech .tt b{font-size:14.5px; line-height:1.3; display:block}
.tech .tt p{font-size:13px; color:var(--mut); margin:2px 0 0; line-height:1.4}
.tech .tp{margin-left:auto; font-size:14px; font-weight:600; white-space:nowrap}
.edge-note{font-size:12.5px; color:var(--mut); margin:8px 0 0; max-width:52ch}
.chips.edges span{padding:8px 15px; font-size:14px}
.col-preview{margin-bottom:9px; border-radius:9px; overflow:hidden; border:1px solid var(--line)}
.col-preview img{display:block; width:100%; height:104px; object-fit:cover}
@media(hover:none){.sw-zoom{display:none}}
.rals[hidden]{display:none}
.rals{display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); gap:8px; margin-top:6px}
.rals label{cursor:pointer; position:relative}
.rals input{position:absolute; opacity:0; width:0; height:0}
.rals .sw{display:block; width:100%; aspect-ratio:1/1; height:auto; border-radius:8px; overflow:hidden;
          box-shadow:0 0 0 1px var(--line) inset; position:relative; transition:.15s}
.rals .sw img{width:100%; height:100%; object-fit:cover; display:block}
.rals .sw::after{content:""; position:absolute; inset:0; border-radius:8px; opacity:0; background-color:rgba(20,24,16,.35);
    background:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>")}
.rals label:hover .sw{box-shadow:0 0 0 2px var(--line)}
.sw-zoom{position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) scale(.96);
         width:190px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px;
         box-shadow:0 12px 30px rgba(20,30,15,.18); opacity:0; visibility:hidden; transition:.14s; z-index:60; pointer-events:none}
.sw-zoom img{width:100%; height:118px; object-fit:cover; border-radius:6px; display:block}
.sw-zoom i{display:block; font-style:normal; font-size:12.5px; font-weight:600; text-align:center; padding:6px 0 2px}
.rals label:hover .sw-zoom{opacity:1; visibility:visible; transform:translateX(-50%) scale(1)}
.rals label{position:relative}
.rals input:checked + .sw{box-shadow:0 0 0 2px var(--ink)}
.rals input:checked + .sw::after{opacity:1}
.ral-more{display:inline-block; margin-top:11px; font:inherit; font-size:13.5px; font-weight:600; color:var(--brand-d);
          background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.ral-more:hover{color:var(--ink)}
.ral-all{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.ral-hint{margin:11px 0 0; font-size:13px; color:var(--mut)}
.ral-hint a{color:var(--brand-d); text-decoration:underline; text-underline-offset:3px}
.paint .sum{margin-top:13px; background:var(--soft); border-radius:10px; padding:12px 14px; font-size:14.5px}
.paint .sum div{display:flex; justify-content:space-between; gap:12px; padding:4px 0}
.paint .sum .tot{border-top:1px solid var(--line); margin-top:6px; padding-top:9px; font-weight:700; font-size:16px}

/* единицы измерения и пересчёт */
.unit-sw{display:inline-flex; border-radius:7px; overflow:hidden; padding:2px; background:var(--soft); gap:2px; margin:0 4px}
.unit-sw label{position:relative; cursor:pointer}
.unit-sw input{position:absolute; opacity:0; width:0; height:0}
.unit-sw span{display:block; padding:5px 10px; font-size:12.5px; font-weight:600; color:var(--mut); background:none; border-radius:5px; transition:.15s}
.unit-sw span{border-radius:6px}
.unit-sw input:checked + span{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(20,30,15,.14)}
.unit-sw label:hover span{color:var(--ink)}
.qty-head{display:flex; align-items:center; gap:12px; margin-top:16px}
.qty-head .lbl{margin:0}
.convert{margin-top:8px; font-size:13.5px; color:var(--mut); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.convert b{color:var(--ink); font-weight:600}
.convert .note{opacity:.8}
/* калькулятор площади */
.qty-head{justify-content:space-between}
.calc-link{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600;
           color:var(--brand-d); background:none; border:none; padding:0; cursor:pointer}
.calc-link svg{width:15px; height:15px}
.calc-link:hover{color:var(--ink)}
.calc-link.on{color:var(--ink)}
.ac-panel{margin:10px 0 0; padding:14px; border:1.5px solid var(--line); border-radius:10px}
.ac-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.ac-f{flex:1; min-width:110px}
.ac-f span{display:block; font-size:12.5px; color:var(--mut); margin-bottom:5px}
.ac-f input{width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px}
.ac-f input:focus{outline:none; border-color:var(--brand)}
.ac-res{margin-top:12px; font-size:14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.ac-res b{font-size:16px}
.ac-apply{font:inherit; color:var(--ink); font-size:13.5px; font-weight:600; margin-top:11px; padding:9px 15px; border-radius:8px;
          border:1.5px solid var(--line); background:#fff; cursor:pointer}
.ac-apply:hover{border-color:var(--brand); color:var(--brand-d)}
/* доставка */
.deliv{margin-top:9px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--mut)}
.deliv svg{width:17px; height:17px; color:var(--brand-d)}
.deliv select{font:inherit; font-size:14px; padding:8px 30px 8px 11px; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365695c' stroke-width='2.2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:13px; background-color:#fff; border:1.5px solid var(--line); border-radius:8px; color:var(--ink)}
.deliv select:focus{outline:none; border-color:var(--brand)}
.deliv b{color:var(--ink)}

/* попап связи */
.ask{position:fixed; inset:0; background:rgba(20,24,16,.5); display:none; align-items:center; justify-content:center; z-index:420; padding:24px}
.ask.open{display:flex}
.ask-box{position:relative; background:#fff; border-radius:14px; padding:26px 26px 24px; width:100%; max-width:420px;
         box-shadow:0 30px 60px rgba(20,30,15,.28)}
.ask-x{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:var(--soft); cursor:pointer;
       display:flex; align-items:center; justify-content:center}
.ask-x svg{width:15px; height:15px; color:var(--ink)}
.ask-box h3{font-size:20px; margin:8px 0 0}
.ask-var{margin:8px 0 0; font-size:14.5px; font-weight:600; color:var(--ink); background:var(--soft); border-radius:8px; padding:9px 12px; display:inline-block}
.ask-sub{font-size:13.5px; color:var(--mut); margin:8px 0 0}
.ask-call{display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px; border:1.5px solid var(--line); border-radius:10px}
.ask-call:hover{border-color:var(--brand)}
.ask-call svg{width:20px; height:20px; color:var(--brand-d)}
.ask-call b{display:block; font-size:17px; font-family:"Anybody",sans-serif}
.ask-call i{display:block; font-style:normal; font-size:12.5px; color:var(--mut); margin-top:1px}
.ask-or{position:relative; text-align:center; margin:16px 0 12px; font-size:12.5px; color:var(--mut)}
.ask-or::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
.ask-or span{position:relative; background:#fff; padding:0 10px}
.ask-form input,.ask-form textarea{width:100%; font:inherit; font-size:15px; padding:11px 13px; border:1.5px solid var(--line);
                                   border-radius:9px; margin-bottom:9px; resize:vertical}
.ask-form input:focus,.ask-form textarea:focus{outline:none; border-color:var(--brand)}
.ask-form .btn{width:100%; justify-content:center}
.ask-note{font-size:11.5px; color:var(--mut); margin-top:9px; text-align:center}
.ask-done{text-align:center; padding:24px 0 6px; font-size:16px; color:var(--brand-d)}
/* количество и кнопка */
.qty-row{display:flex; gap:12px; align-items:stretch; margin-top:22px; flex-wrap:wrap}
.qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; overflow:hidden}
.qty button{width:44px; border:none; background:#fff; font-size:19px; cursor:pointer; color:var(--ink)}
.qty button:hover{color:var(--brand-d)}
.qty button:active{color:var(--brand)}
.qty input{width:62px; border:none; text-align:center; font:inherit; font-size:15px; font-weight:600; padding:12px 0}

.qty-row .btn{flex:1; justify-content:center; min-width:200px}
.lead-time{display:flex; align-items:center; gap:9px; margin-top:12px; padding-top:13px; border-top:1px solid var(--line); font-size:14px; color:var(--mut)}
.lead-time svg{width:17px; height:17px; color:var(--brand-d)}
.second-row{display:flex; gap:12px; margin-top:13px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap}
.second-row{align-items:center}
.second-row .btn{flex:0 0 auto; justify-content:center}
.second-row .btn svg{width:16px; height:16px}
.lnk-sample{font:inherit; font-size:13px; background:none; border:none; padding:0; cursor:pointer;
            color:var(--brand-d); text-decoration:underline; text-underline-offset:3px}
.lnk-sample:hover{color:var(--ink)}
.sample-note{margin-top:9px; font-size:12.5px; color:var(--mut); display:flex; gap:8px; align-items:flex-start}
.sample-note svg{width:15px; height:15px; flex:0 0 15px; color:var(--brand-d); margin-top:1px}
.tlink{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink);
       background:none; border:none; padding:0; cursor:pointer}
.tlink svg{width:15px; height:15px; transition:transform .2s}
.tlink:hover{color:var(--brand-d)} .tlink:hover svg{transform:translateX(3px)}
/* аккордеоны с информацией */
.acc{margin-top:18px; border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; padding:13px 0; font-size:15.5px; font-weight:600;
             display:flex; align-items:center; gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .arw{margin-left:auto; width:14px; height:14px; color:var(--mut); transition:.2s; flex:0 0 14px}
.acc details[open] summary .arw{transform:rotate(180deg)}
.acc summary:hover{color:var(--brand-d)}
.acc .ab{padding:0 0 16px}
.acc .ab p{font-size:14.5px; color:#3d4136; margin:0 0 9px}
.acc .ab ul{margin:9px 0 0; padding-left:19px}
.acc .ab li{font-size:14.5px; color:#3d4136; margin:6px 0}
.spec{width:100%; border-collapse:collapse; max-width:720px}
.spec tr{border-bottom:1px solid var(--line)}
.spec td{padding:11px 0; font-size:14.5px}
.spec td:first-child{color:var(--mut); width:46%}
.spec td:last-child{font-weight:600}
@media(max-width:1000px){
  /* min-width:0 stops the bled-out .pgal below from widening the grid column:
     grid items default to min-width:auto, so the carousel's 2×16px overhang
     would otherwise stretch the single column past .wrap and push .buy off
     the right edge. */
  .pp{grid-template-columns:1fr; gap:26px; min-width:0}
  .pp>*{min-width:0}
  .buy{position:static}
  /* Bleed the carousel to the screen edges. The offset must match .wrap's own
     mobile padding (16px in main.css) — the source layout used 18px, which
     pushed the track 2px past each edge and made the body wider than the
     viewport (only hidden by main.css's overflow-x:hidden). */
  .pgal{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
            margin:0 -16px; padding-left:16px; padding-right:16px}
  .gtile{flex:0 0 93%; scroll-snap-align:center; aspect-ratio:4/3}
  .gtile.wide{flex:0 0 93%; aspect-ratio:4/3}
  .gtile.wide.pad{aspect-ratio:1/1}
  .gtile.wide.pad img{padding:4px}
    }
@media(max-width:720px){
  .qty-row{gap:10px}
  .qty{width:100%}
  .qty input{flex:1; width:auto}
  .qty-row .btn{flex:1 1 100%; min-width:0}
  .second-row .btn{flex:1 1 100%}
  }

/* ===== Page modes =====
 * preke.html covers the normal mode only; the rules below come verbatim from
 * preke-akcija.html (sale) and preke-uzsakymas.html (made to order), the two
 * variant layouts this one template also has to render.
 */

/* Sale: struck-through price on its own line, savings chip, campaign note. */
.price-box.sale{flex-wrap:wrap; gap:6px 12px}
.price-box .old{flex:0 0 100%; font-size:16px; color:var(--mut); text-decoration:line-through}
.price-box .old small{font-size:12px}
.price-box .save{font-size:12.5px; font-weight:600; color:#b0442f; background:#fbeeea; border-radius:6px; padding:4px 10px}
.gtile .badge.sale{left:auto; right:14px; background:#fbeeea; color:#b0442f}
.sale-note{background:#fbeeea; color:#7d3626}
.sale-note svg{color:#b0442f}

/* Made to order: amber stock dot, minimum-order note, lengths without stock. */
.minq{display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 14px;
      background:var(--soft); border-radius:10px; font-size:13.5px; color:#4a4d41}
.minq svg{width:17px; height:17px; flex:0 0 17px; color:#c68a2e; margin-top:1px}
.buy .meta .order i.stock-dot{background:#c68a2e}
.chips.len.narrow span{display:inline-block}

/* Below the minimum batch there is nothing to quote: the button is out of
   reach and the reason sits directly under the quantity field. */
.qty-row .btn[disabled]{opacity:.5; cursor:not-allowed}
.qty-min{margin:8px 0 0; font-size:13px; color:#b0442f}