/* Vinarija 4 praseta - shop (Vina) + brzi pregled + flaša (crtež -> fotografija). Deli se sa proizvod.html. */

/* ===== FLAŠA: ilustracija, etiketa, fotografija kroz akvarel mrlje ===== */
.fl{position:relative;height:100%;aspect-ratio:var(--o);flex:none;transform-origin:50% 100%}
.fl img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.fl-ilu{transition:opacity .5s}
.fl-foto{-webkit-mask-image:url(media/b-mrlja-1.png),url(media/b-mrlja-3.png),url(media/b-mrlja-2.png);mask-image:url(media/b-mrlja-1.png),url(media/b-mrlja-3.png),url(media/b-mrlja-2.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:40% 35%,60% 75%,50% 50%;mask-position:40% 35%,60% 75%,50% 50%;
  -webkit-mask-size:var(--r1,0%),var(--r2,0%),var(--r3,0%);mask-size:var(--r1,0%),var(--r2,0%),var(--r3,0%)}
.fl.pun .fl-foto{-webkit-mask:none;mask:none}
.fl.pun .fl-ilu{opacity:0}
.fl img.fl-et{inset:auto;top:var(--et);left:var(--el);width:var(--ew);height:var(--eh);opacity:0;transform-origin:50% 100%;z-index:2}
.fl::after{content:none}
.fl--mala{height:64%}

.str-shop main,.str-proizvod main{overflow-x:clip}

/* ===== 1. UVOD - ilustracija kao page header ===== */
.sh-glava{position:relative;overflow:hidden;min-height:clamp(330px,46vh,450px);padding:calc(var(--hdr) + 26px) var(--ram) 120px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:30px}
.sh-ilu{position:absolute;inset:0}
.sh-ilu img{width:100%;height:120%;object-fit:cover;object-position:center 42%}
.sh-glava::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,rgba(239,229,211,.93) 26%,rgba(239,229,211,.35) 56%,rgba(239,229,211,.1) 100%),linear-gradient(0deg,var(--bg) 0,rgba(239,229,211,.85) 22%,rgba(239,229,211,0) 60%)}
.sh-glava-t,.sh-uslovi{position:relative;z-index:2}
.sh-glava-t{max-width:560px}
.mrv{display:flex;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:16px}
.mrv a{color:var(--acc);text-decoration:none}
.mrv a:hover{text-decoration:underline;text-underline-offset:4px}
.sh-glava h1{font-family:var(--fd);font-size:clamp(2.7rem,4.6vw,4.3rem);line-height:1.02;letter-spacing:-.005em;color:var(--ink);margin-bottom:16px}
.sh-glava-t p{max-width:44ch;color:var(--ink2);font-size:1.04rem}
.sh-uslovi{list-style:none;align-self:start;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.sh-uslovi li{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(247,240,227,.82);padding:9px 16px 9px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sh-uslovi li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}

/* ===== 2. VINA - polica preko cele širine ===== */
.sh-vina{position:relative;z-index:2;margin-top:-150px;--scena:clamp(400px,54vh,600px)}
.police{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 clamp(10px,2.4vw,48px)}
.vk{position:relative;display:flex;flex-direction:column;align-items:stretch;color:var(--ink)}
.vk+.vk::before{content:"";position:absolute;left:0;top:calc(var(--scena) * .3);height:calc(var(--scena) * .62);width:1px;background:linear-gradient(transparent,var(--line) 30%,var(--line) 70%,transparent)}
.vk-scena{position:relative;height:var(--scena);display:flex;align-items:flex-end;justify-content:center}
.vk-flasa{position:relative;z-index:2;height:84%;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;padding:0 8px}
.vk-flasa:focus-visible{outline-offset:8px;border-radius:8px}
.vk-mrlja{position:absolute;z-index:0;left:50%;top:56%;width:min(118%,440px);aspect-ratio:1;translate:-50% -50%;background:var(--wash);opacity:.38;
  -webkit-mask:url(media/b-mrlja-2.png) center/var(--k,64%) no-repeat;mask:url(media/b-mrlja-2.png) center/var(--k,64%) no-repeat;transition:-webkit-mask-size 1s var(--ease),mask-size 1s var(--ease),opacity .6s}
.vk--tamno .vk-mrlja{opacity:.22}
.vk-rec{position:absolute;z-index:0;top:16%;left:50%;translate:-50% 0;font:400 clamp(3rem,6.4vw,6.6rem)/1 var(--fd);letter-spacing:.04em;color:var(--wash);opacity:0;white-space:nowrap;pointer-events:none;transition:opacity .6s,letter-spacing 1s var(--ease)}
.vk-temp{position:absolute;z-index:3;bottom:22px;left:clamp(10px,1.4vw,24px);display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--ink2);font-variant-numeric:tabular-nums}
.vk-temp svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.vk-cta{position:absolute;z-index:4;left:50%;bottom:20%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(18px);transition:opacity .35s,transform .55s var(--ease);pointer-events:none}
.vk-qv{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(247,240,227,.9);padding:8px 14px;border-radius:999px;transition:background .3s,color .3s}
.vk-qv:hover{background:var(--ink);color:var(--on)}
@media (hover:hover) and (min-width:761px){
  .vk:hover .vk-mrlja{--k:104%;opacity:.9}
  .vk--tamno:hover .vk-mrlja{opacity:.5}
  .vk:hover .vk-rec{opacity:.55;letter-spacing:.12em}
  .vk--tamno:hover .vk-rec{opacity:.22}
  .vk:hover .vk-cta,.vk:focus-within .vk-cta{opacity:1;transform:none;pointer-events:auto}
  .vk:hover .vk-flasa{transform:translateY(-8px)}
}
.vk-flasa{transition:transform .7s var(--ease)}
.vk-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;padding:30px clamp(12px,1.6vw,28px) 0}
.vk-t>*{grid-column:1}
.vk-nad{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.vk-ime{font:400 clamp(1.5rem,2vw,1.95rem)/1.1 var(--fd)}
.vk-ime a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.vk-ime a:hover{background-size:100% 1px}
.vk-sorta{font-size:.88rem;color:var(--ink2);margin-top:4px}
.vk-kratko{font-size:.9rem;line-height:1.5;color:var(--ink2);margin-top:12px;max-width:34ch}
.vk-cena{grid-column:2;grid-row:1/4;text-align:right}
.vk .price,.qv .price,.str-proizvod .price{color:var(--ink);font-size:1.35rem}
.vk .price small,.qv .price small,.str-proizvod .price small{color:var(--ink2)}
.vk-mob-btn{display:none}
.polica-crta{position:absolute;left:0;top:calc(var(--scena) - 6px);width:100%;height:14px;z-index:1;pointer-events:none}
.polica-crta path{fill:none;stroke:var(--ink2);stroke-width:1.3;opacity:.45}
.mob-nav{display:none}

/* ===== 3. PAKET ===== */
.sh-paket{position:relative;max-width:1320px;margin:0 auto;padding:clamp(110px,11vw,170px) var(--ram) clamp(80px,9vw,130px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,110px);align-items:center}
.sh-paket .sil-loza{top:40px;right:-10vw}
.paket-foto{position:relative;margin:0;min-width:0;padding:4% 6% 0 0}
.paket-foto img{display:block;width:100%;height:auto}
.p6{position:absolute;top:0;right:0;width:clamp(78px,8vw,112px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--acc);color:var(--on);font:400 clamp(2.4rem,3.6vw,3.4rem)/.9 var(--fd);box-shadow:0 0 0 5px var(--bg),0 0 0 6.5px var(--acc),0 14px 30px -10px rgba(109,29,42,.55);rotate:8deg}
.p6 small{font:600 .6rem/1 var(--ft);letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
/* paket u korpi: fotografija šest flaša + oznaka 6 */
.kp6{position:relative;display:block;width:100%}
.kp6 img{display:block;width:100%!important;height:auto!important}
.kp6 i{position:absolute;top:-10px;right:0;width:22px;height:22px;border-radius:50%;display:grid;place-content:center;background:var(--acc);color:var(--on);font:400 .8rem/1 var(--fd);font-style:normal;font-variant-numeric:tabular-nums}
.korpa-lista li:has(.kp6){grid-template-columns:88px 1fr auto}
.minik-lista li:has(.kp6){grid-template-columns:64px 1fr auto}
.paket-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.paket-t .h2,.paket-t .nad{margin-bottom:0}
.paket-t p:not(.nad){color:var(--ink2);max-width:40ch}
.paket-t .b{margin-top:10px}

/* ===== 4. DOSTAVA - račun ===== */
.sh-dostava{position:relative;overflow:hidden;background:var(--acc2);color:var(--on);padding:clamp(90px,10vw,150px) var(--ram);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.sh-dostava>*{position:relative}
.dostava-prasici{position:absolute!important;left:-60px;bottom:-30px;width:min(620px,70vw);color:var(--on);opacity:.06;pointer-events:none}
.dostava-t{max-width:520px;justify-self:end}
.dostava-t .h2{color:var(--on)}
.dostava-t p:not(.nad){color:rgba(246,239,226,.8)}
.racun{justify-self:start;width:min(470px,100%);background:var(--card);color:var(--ink);padding:40px 36px 34px;rotate:-2deg;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  -webkit-mask:radial-gradient(circle at 9px 0,#0000 6px,#000 6.5px) top/18px 51% repeat-x,radial-gradient(circle at 9px 100%,#0000 6px,#000 6.5px) bottom/18px 51% repeat-x;
  mask:radial-gradient(circle at 9px 0,#0000 6px,#000 6.5px) top/18px 51% repeat-x,radial-gradient(circle at 9px 100%,#0000 6px,#000 6.5px) bottom/18px 51% repeat-x}
.racun-glava{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:20px;margin-bottom:18px;border-bottom:1.5px dashed rgba(34,23,20,.3);color:var(--acc)}
.racun-glava .lg-n{width:110px}
.racun-glava small{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.racun dl{display:flex;flex-direction:column;gap:14px}
.racun dl>div{display:flex;align-items:baseline;gap:10px}
.racun dt{flex:1;display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:.86rem;white-space:nowrap}
.racun dt::after{content:"";flex:1;border-bottom:2px dotted rgba(34,23,20,.28);transform:translateY(-4px)}
.racun dd{text-align:right;font-size:.92rem;max-width:58%;line-height:1.4}
.racun-dno{margin-top:22px;padding-top:18px;border-top:1.5px dashed rgba(34,23,20,.3);font-size:.86rem;color:var(--ink2);text-align:center}
.racun-dno a{font-weight:600;white-space:nowrap}

/* ===== 5. POKLON ===== */
.sh-poklon{max-width:1320px;margin:0 auto;padding:clamp(100px,11vw,160px) var(--ram) clamp(70px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,100px);align-items:center}
.poklon-slika{aspect-ratio:16/10}
.poklon-t p:not(.nad){color:var(--ink2);max-width:42ch;margin-bottom:28px}
.poklon-tel{font-size:.8rem;line-height:1.4;color:var(--ink2);padding-left:6px}
.poklon-tel a{font-weight:600;font-size:.95rem;text-decoration:none}

/* ===== 6. DEGUSTACIJA ===== */
/* r4: fotografija ide tik do futera (bez donjeg razmaka) */
.sh-degust{position:relative;padding:0}
.degust-slika{aspect-ratio:auto;height:clamp(440px,74vh,720px);border-radius:0}
.degust-t{position:absolute;left:clamp(16px,6vw,110px);bottom:clamp(32px,4vw,64px);width:min(500px,calc(100% - 32px));background:var(--card);padding:clamp(28px,3vw,44px);border-radius:4px;box-shadow:0 30px 60px -24px rgba(34,23,20,.35);z-index:4}
.degust-t p:not(.nad){color:var(--ink2);margin-bottom:26px}
.degust-t .b{margin-bottom:2px}

/* ===== BRZI PREGLED ===== */
.qv{position:fixed;inset:0;z-index:95;display:grid;place-items:center;visibility:hidden;pointer-events:none}
.qv.otv{visibility:visible;pointer-events:auto}
.qv-zastor{position:absolute;inset:0;background:rgba(34,23,20,.52);opacity:0}
.qv-box{position:relative;width:min(1000px,calc(100% - 48px));max-height:calc(100svh - 48px);overflow:auto;background:var(--bg);border-radius:6px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);overscroll-behavior:contain}
.qv-vizual{position:relative;overflow:hidden;background:var(--bg2);min-height:560px;display:flex;align-items:flex-end;justify-content:center;padding:40px 30px 56px}
.qv-mrlja{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;translate:-50% -50%;background:var(--wash);-webkit-mask:url(media/b-mrlja-2.png) center/92% no-repeat;mask:url(media/b-mrlja-2.png) center/92% no-repeat;opacity:.75}
.qv--tamno .qv-mrlja{opacity:.4}
.qv-vizual .fl{height:500px;max-height:calc(100svh - 160px)}
.qv-vizual .fl--mala{height:330px}
.qv-t{padding:52px 46px 40px;display:flex;flex-direction:column;align-items:flex-start}
.qv-t .nad{margin-bottom:10px}
.qv-t h2{font:400 clamp(2rem,3vw,2.6rem)/1.05 var(--fd)}
.qv-sorta{color:var(--ink2);margin:6px 0 18px}
.qv-opis{font-size:.98rem;color:var(--ink2);max-width:46ch}
.qv-cin{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;width:100%;margin:24px 0;padding:18px 0;border-block:1px solid var(--line)}
.qv-cin div:last-child{grid-column:1/-1}
.qv-cin dt{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.qv-cin dd{font-size:.95rem}
.qv-cena{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.qv-cena .ph{margin:0}
.qv-akc{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.qv-kol{margin:0;gap:12px}
.qv-kol button{width:42px;height:42px;font-size:1.15rem}
.qv-kol span{font-size:1.15rem;min-width:22px}
.qv-x{position:absolute;top:16px;right:16px;z-index:5;background:var(--bg)}
.qv-rucka{display:none}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .vk-kratko{display:none}
  .vk-t{grid-template-columns:1fr}
  .vk-cena{grid-column:1;grid-row:auto;text-align:left;margin-top:10px}
}
@media (max-width:980px){
  .sh-paket,.sh-dostava,.sh-poklon{grid-template-columns:1fr}
  .dostava-t{justify-self:start}
  .racun{justify-self:center}
}
@media (max-width:760px){
  /* page header se svodi na natpis preko prve flaše */
  .sh-glava{position:absolute;top:0;left:0;right:0;z-index:5;min-height:0;padding:calc(var(--hdr) + 6px) var(--ram) 0;display:block;pointer-events:none;overflow:visible}
  .sh-glava::before,.sh-ilu,.sh-glava-t p,.sh-uslovi,.mrv{display:none}
  .sh-glava h1{font:600 .74rem/1 var(--ft);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0;transition:color .5s}
  .vino-tamno .sh-glava h1{color:var(--on)}

  /* JEDNA flaša preko ekrana, samo swipe */
  .sh-vina{margin-top:0;--scena:auto;background:var(--wash-akt,#EBC9BF);transition:background-color .2s linear}
  .police{display:flex;height:100svh;min-height:600px;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .police::-webkit-scrollbar{display:none}
  .vk{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;overflow:visible;justify-content:flex-end}
  .vk+.vk::before{display:none}
  .vk--tamno{color:var(--on)}
  .vk-scena{flex:1;height:auto;min-height:0;padding-top:calc(var(--hdr) + 30px)}
  .vk-flasa{height:100%;max-height:calc(100svh - var(--hdr) - 300px);min-height:250px;transform:translateX(calc(var(--d,0) * -60vw)) rotate(calc(var(--d,0) * 9deg)) scale(calc(1 - var(--d,0) * var(--d,0) * .3));opacity:calc(1 - var(--d,0) * var(--d,0) * .45);transform-origin:50% 100%;transition:none;padding:0}
  /* peek: susedna flaša viri sa ivice ekrana - jasno je da ima još (Ivan r3) */
  .vk-mrlja{width:150vw;top:60%;--k:100%;opacity:.55;background:#FBF6EC;transition:none;transform:scale(calc(1 - var(--d,0) * var(--d,0) * .5))}
  .vk--tamno .vk-mrlja{background:#8A2B3C;opacity:.5}
  .vk-rec{top:calc(var(--hdr) + 40px);font-size:26vw;opacity:calc(1 - var(--d,0) * var(--d,0) * 1.6);color:rgba(255,250,240,.5);transform:translateX(calc(var(--d,0) * 70%));transition:none}
  .vk--tamno .vk-rec{color:rgba(246,239,226,.09)}
  .vk-temp{top:calc(var(--hdr) - 1px);bottom:auto;left:auto;right:var(--ram);color:inherit;opacity:.8}
  .vk-cta{display:none}
  .vk-t{position:relative;z-index:3;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:22px var(--ram) 92px;transform:translateX(calc(var(--d,0) * 30%));opacity:calc(1 - var(--d,0) * var(--d,0) * 2.2)}
  .vk-t>*{grid-column:1/-1}
  .vk-nad{color:inherit;opacity:.75}
  .vk-ime{font-size:2.5rem}
  .vk-sorta,.vk-kratko{color:inherit;opacity:.8}
  .vk-kratko{display:block;font-size:.9rem;margin-top:8px}
  .vk-cena{grid-column:1;grid-row:5;text-align:left;margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .vk-cena .ph{margin:0}
  .vk--tamno .price,.vk--tamno .price small{color:var(--on)}
  .vk-mob-btn{display:inline-flex;grid-column:2;grid-row:5;margin-top:14px;min-height:52px;padding-left:20px}
  .vk--tamno .vk-mob-btn{background:var(--on);color:var(--acc)}
  .vk--tamno .vk-mob-btn .bc{background:var(--acc);color:var(--on)}
  .polica-crta{display:none}
  .mob-nav{display:flex;position:absolute;left:var(--ram);right:var(--ram);bottom:30px;z-index:4;justify-content:space-between;align-items:center;pointer-events:none;color:var(--ink);transition:color .5s}
  .vino-tamno .mob-nav{color:var(--on)}
  .mob-br{font-size:.74rem;font-weight:600;letter-spacing:.16em;font-variant-numeric:tabular-nums}
  .mob-br b{font:400 1.25rem var(--fd);letter-spacing:0}
  .mob-br small{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-top:3px}
  .mob-str{display:flex;align-items:center;gap:12px;pointer-events:auto}
  .mob-s{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.3px solid currentColor;color:inherit;transition:opacity .3s,background .3s}
  .mob-s svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mob-s:disabled{opacity:.25}
  #mobDalje:not(:disabled){background:var(--acc);border-color:var(--acc);color:var(--on)}
  .vino-tamno #mobDalje:not(:disabled){background:var(--on);border-color:var(--on);color:var(--acc)}
  .mob-tacke{display:flex;gap:6px}
  .mob-tacke i{display:block;width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.3;transition:width .5s var(--ease),opacity .4s}
  .mob-tacke i.on{width:22px;opacity:1}

  .sh-paket{padding-top:90px}
  .sh-dostava{padding-block:80px}
  .racun{padding:34px 22px 28px;rotate:-1.2deg}
  .racun dl>div{flex-direction:column;gap:2px}
  .racun dt::after{display:none}
  .racun dd{text-align:left;max-width:none}
  /* mobilni: kartica preko donjeg dela fotografije, fotografija do futera */
  .sh-degust{display:grid}
  .degust-slika,.degust-t{grid-area:1/1}
  .degust-slika{height:auto}
  .degust-t{position:relative;left:auto;bottom:auto;align-self:end;margin:46svh var(--ram) var(--ram);width:auto}

  /* brzi pregled = bottom sheet, flaša iskače iznad ivice */
  .qv{place-items:end stretch}
  .qv-box{width:100%;max-height:none;overflow:visible;border-radius:24px 24px 0 0;display:block;box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
  .qv-rucka{display:block;position:absolute;top:10px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:999px;background:rgba(34,23,20,.22)}
  .qv-vizual{position:absolute;right:14px;top:-112px;width:130px;height:250px;min-height:0;padding:0;background:none;overflow:visible;z-index:3;pointer-events:none}
  .qv-mrlja{width:190px;top:58%;opacity:.9}
  .qv-vizual .fl{height:240px}
  .qv-vizual .fl--mala{height:150px}
  .qv-t{max-height:84svh;overflow-y:auto;overscroll-behavior:contain;padding:64px 20px calc(24px + env(safe-area-inset-bottom))}
  .qv-t .nad,.qv-t h2,.qv-sorta{max-width:calc(100% - 130px)}
  .qv-x{left:14px;right:auto;top:14px;width:40px;height:40px;font-size:22px}
  .qv-opis{font-size:.95rem}
  .qv-cin{margin:16px 0;gap:10px 16px}
  .qv-akc{width:calc(100% + 40px);justify-content:space-between;gap:12px;position:sticky;bottom:0;z-index:3;background:var(--bg);margin:0 -20px 10px;padding:12px 20px;box-shadow:0 -14px 20px -14px rgba(34,23,20,.25)}
  .qv-akc .b-pri{flex:1;justify-content:space-between}
}