. Bez ">" by ho toto pravidlo prebilo a štítok by stratil farbu. */
.vivelum-audience-item > p{
font-size:14.5px;line-height:1.65;color:#444;margin:0;
}
/* ============================================================================
OPRAVA (2026-07-14): oxblood štítky nikdy nefungovali.
`.vivelum-pdp p{color:#444}` (špecificita 0,1,1) prebíjalo
`.vivelum-kicker{color:var(--vivelum-oxblood)}` (0,1,0) — a keďže kicker JE
,
prehrával. Následok: VŠETKY kickery a card-labely na PDP boli sivé #444, nie
oxblood. V hero sekcii to isté robí `.vivelum-hero p{color:#D6CDC0}` s
`.vivelum-kicker-light`. Overené na živom webe: 7/7 kickerov sivých.
Riešenie: zvýšiť špecificitu na (0,2,0), čo (0,1,1) porazí.
============================================================================ */
.vivelum-pdp .vivelum-kicker,
.vivelum-pdp .vivelum-card-label{
color:var(--vivelum-oxblood);
}
.vivelum-pdp .vivelum-kicker-light{
color:#D8A0A0;
}
.vivelum-pdp .vivelum-audience-label{
color:var(--vivelum-oxblood);
}
@media (max-width:700px){
.vivelum-audience-item{grid-template-columns:1fr;gap:8px;padding:20px 0}
}
/* ============================================================================
VIVELUM PDP v3 (2026-07-14) — „dve krabice namiesto štrnástich"
Schválené používateľom. Nahrádza rozhádzaný systém sekcií.
Princíp: celý obsah PDP sú len 4 druhy vecí —
FAKT (štítok+nadpis+text) · ÚDAJ (štítok+hodnota) · TEXT · FAQ
Doteraz sa kreslili 14 rôznymi spôsobmi. Tu ich kreslia DVA bloky
(.vx-facts / .vx-data) s identickou mriežkou, štítkom aj typografiou.
Štruktúra: viditeľné sú len úvod + .vivelum-stats, zvyšok je v 4 accordionoch.
Použitie:
RUŠÍ SA: .vivelum-hero, .vivelum-card-accent, .vivelum-benefit-card,
.vivelum-dose-box, .vivelum-audience (slepá vetva — vyzerala zle).
POZOR na špecificitu: téma má na #description ID pravidlá, ktoré porazia
`.vx h1` (0,1,1). Preto majú nadpisy a odseky v reťazci `#description`.
Bez toho sa škála nepresadí — presne to sa stalo pôvodnému .vivelum-pdp h3
(predpisoval clamp(26px,3vw,34px), reálne renderoval 22.4px z témy).
============================================================================ */
.vx{
--col:680px;
--hair:rgba(27,28,30,.13);
background:#FFF;
color:var(--vivelum-ink);
font-size:16px;
line-height:1.65;
padding:0 0 8px;
}
.vx *{box-sizing:border-box}
/* ── Úvod: jediná viditeľná textová sekcia ──
POZOR na špecificitu aj na skratku `margin`. Toto pravidlo musí prebiť:
a) `.vivelum-pdp p{margin:0 0 16px}` (0,1,1) — inak odsek stratí margin-left:auto
b) vlastné pravidlo pre h1 nižšie — preto tam NIE JE skratka `margin`,
ale margin-top/bottom zvlášť. Skratka by nastavila margin-left:0 !important
a úvod by sa zarovnal doľava, kým blok by ostal vycentrovaný (rozdiel 226px). */
.vx-intro{padding:36px 24px 8px}
html body #description .vx .vx-intro > *{
max-width:var(--col)!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Nadpisy a text — #description v reťazci je nutnosť, nie opatrnosť */
html body #description .vx h1{
font-family:var(--vivelum-font-serif)!important;
font-weight:400!important;
font-size:36px!important;
line-height:1.15!important;
letter-spacing:-.025em;
margin-top:0!important; /* NIE skratka `margin` — zrušila by margin-left:auto */
margin-bottom:16px!important;
padding-left:0!important;
color:var(--vivelum-ink)!important;
text-wrap:balance;
}
html body #description .vx p{color:#4A4844}
html body #description .vx .vivelum-lead{font-size:18px;line-height:1.6;color:var(--vivelum-ink)!important}
/* ── 4 VEĽKÉ ACCORDIONY ── */
/* max-width je --col PLUS vodorovný padding: kvôli box-sizing:border-box by inak
obsah accordionu vyšiel o 48px užší než úvod a blok (text by začal na 338 vs 314). */
.vx-acc{max-width:calc(var(--col) + 48px);margin:0 auto;padding:0 24px 40px;border-top:1px solid var(--hair)}
.vx-acc > details{border-bottom:1px solid var(--hair)}
.vx-acc > details > summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;position:relative;display:block}
.vx-acc > details > summary::-webkit-details-marker{display:none}
.vx-sum-t{display:block;font-family:var(--vivelum-font-serif);font-size:22px;line-height:1.3;
color:var(--vivelum-ink);letter-spacing:-.015em}
.vx-sum-s{display:block;font-size:13.5px;color:#7A7872;margin-top:4px;line-height:1.45}
.vx-acc > details > summary::after{
content:"+";position:absolute;right:0;top:26px;width:30px;height:30px;
border:1px solid rgba(27,28,30,.24);border-radius:50%;
/* flex centrovanie namiesto line-height: sedi pri + aj x, bez dopocitavania pixelov */
display:flex;align-items:center;justify-content:center;line-height:1;
font-family:var(--vivelum-font-sans);font-size:18px;font-weight:400;color:var(--vivelum-ink);
transition:background .15s,color .15s,border-color .15s;
}
.vx-acc > details > summary:hover::after{background:var(--vivelum-oxblood);border-color:var(--vivelum-oxblood);color:#FFF}
.vx-acc > details[open] > summary::after{content:"×";
background:var(--vivelum-oxblood);border-color:var(--vivelum-oxblood);color:#FFF}
.vx-acc > details[open] > summary .vx-sum-t{color:var(--vivelum-oxblood)}
.vx-body{padding:2px 0 30px}
.vx-body > *:first-child{margin-top:0}
/* Podnadpis vnútri accordionu — jediný akcent, oxblood eyebrow */
html body #description .vx .vx-sub{
font-family:var(--vivelum-font-sans)!important;
font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;
font-weight:700!important;color:var(--vivelum-oxblood)!important;
margin:30px 0 12px!important;padding-left:0!important;
}
/* ── BLOK 1: FAKT ── */
.vx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--hair);border:1px solid var(--hair);margin:0 0 18px}
.vx-fact{background:#FFF;padding:20px 18px}
html body #description .vx .vx-fact .vx-t,
html body #description .vx .vx-fact .vx-t p{font-size:13.5px;line-height:1.6;color:#5A5852;margin:0}
/* ── BLOK 2: ÚDAJ ── */
.vx-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--hair);border:1px solid var(--hair);margin:0 0 18px}
.vx-datum{background:#FFF;padding:15px 18px}
html body #description .vx .vx-v{
font-family:var(--vivelum-font-mono)!important;font-feature-settings:"tnum" 1;
font-size:15px!important;color:var(--vivelum-ink)!important;margin:0!important;font-weight:600;
}
/* ── Spoločné pre OBA bloky — v tomto je tá jednotnosť ──
.vx-l je
, takže ho `.vivelum-pdp p{color:#444}` prebije. Odtiaľ !important. */
html body #description .vx .vx-l{
font-size:10px!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700!important;
color:#8A8880!important;margin:0 0 6px!important;line-height:1.3;padding-left:0!important;
}
html body #description .vx .vx-h{
font-family:var(--vivelum-font-serif)!important;font-weight:400!important;
font-size:17px!important;line-height:1.3!important;margin:0 0 8px!important;
color:var(--vivelum-ink)!important;padding-left:0!important;letter-spacing:-.01em;
text-align:left!important;
}
html body #description .vx .vx-h::before,
html body #description .vx .vx-h::after{display:none!important;content:none!important}
@media (max-width:680px){
.vx-facts,.vx-data{grid-template-columns:1fr}
.vx-sum-t{font-size:19px}
}
/* ── Zvyšky pôvodného obsahu: zjednotiť, neprikrášľovať ── */
.vx .vivelum-warning,.vx .vivelum-dose-box{background:transparent;border:0;padding:0}
.vx .vivelum-faq details{border-bottom:1px solid var(--hair)}
.vx .vivelum-faq summary{cursor:pointer;list-style:none;padding:15px 40px 15px 0;position:relative;
font-family:var(--vivelum-font-serif);font-size:16px;color:var(--vivelum-ink)}
.vx .vivelum-faq summary::-webkit-details-marker{display:none}
/* Aj tu flex: povodne pravidlo temy
bolo pisane pre 28px kruzok. V 22px kruzku posunulo x o 5px dole. */
html body #description .vx .vivelum-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
width:22px;height:22px;border:1px solid rgba(27,28,30,.24);border-radius:50%;
display:flex;align-items:center;justify-content:center;line-height:1!important;
font-family:var(--vivelum-font-sans);font-size:14px;color:var(--vivelum-ink)}
/* Otvorený stav: vyplnený oxblood krúžok s bielym ×. Vzniklo to pôvodne omylom
(presakovaním pravidiel veľkého accordionu), ale vyzerá dobre — tak je to tu
nastavené zámerne a v správnej veľkosti. line-height:1 + flex = × je v strede
bez ohľadu na znak; pôvodné `line-height:25px` z témy bolo pre 28px krúžok. */
html body #description .vx .vivelum-faq details[open] summary::after{
content:"×";
line-height:1!important;
background:var(--vivelum-oxblood);
border-color:var(--vivelum-oxblood);
color:#FFF;
}
html body #description .vx .vivelum-faq summary:hover::after{
background:var(--vivelum-oxblood);
border-color:var(--vivelum-oxblood);
color:#FFF;
}
html body #description .vx .faq-answer{font-size:14.5px;line-height:1.7;color:#4A4844;padding:0 0 18px}
html body #description .vx .vivelum-sources{font-size:13px;color:#6A6862}
html body #description .vx .vivelum-small-note{font-size:12.5px;color:#8A8880!important}
/* Farebný blok ostáva ako jediný hlasný moment — len sadá do stĺpca .vx */
.vx .vivelum-stats{max-width:var(--col);margin-left:auto;margin-right:auto}
/* Na mobile sa už necentruje (stĺpec je širší než obrazovka), takže by blok
trčal 24px za text na každej strane. Dorovnávame ho na rovnaké odsadenie,
aké má .vx-intro a .vx-acc — jedna os platí aj na mobile. */
@media (max-width:760px){
.vx .vivelum-stats{margin-left:24px!important;margin-right:24px!important}
}
/* v3 dodatok: .vivelum-dark-note (tmavý box v „Dávka a rutina" / „Ako používať")
sa vo v3 zapája do jednotného systému — inak by to bol ďalší druh krabice.
Jeho vnorený .vivelum-kicker-light bol na inku ružový; na bielej ide na oxblood. */
.vx .vivelum-dark-note{background:transparent!important;padding:0!important;margin:18px 0 0!important}
html body #description .vx .vivelum-dark-note h3{
font-family:var(--vivelum-font-serif)!important;font-weight:400!important;font-size:17px!important;
line-height:1.3!important;color:var(--vivelum-ink)!important;margin:0 0 8px!important;padding-left:0!important;
}
html body #description .vx .vivelum-dark-note p{color:#4A4844!important;font-size:14.5px}
html body #description .vx .vivelum-dark-note .vivelum-kicker-light,
html body #description .vx .vivelum-dark-note .vivelum-kicker{
font-size:10px!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700!important;
color:var(--vivelum-oxblood)!important;margin:0 0 6px!important;padding-left:0!important;
}
/* ============================================================================
OPRAVA (2026-07-14): názov produktu sa skrýval pod hornou lištou na mobile.
Príčina: na mobile je position:fixed, 60px. Každý kotvový skok
(napr. odkaz "Viac informácií o produkte" na #description) aj každé
scrollIntoView() zarovná cieľ na vrch okna — teda POD lištu.
Namerané: scrollIntoView na galériu dalo h1 na -122px (celý pod lištou).
scroll-padding-top povie prehliadaču, aby sa zastavil nižšie.
Na desktope je header position:absolute a odscrolluje preč, takže tam to
netreba — zámerne scopnuté len na mobil, aby sa desktop nezmenil.
============================================================================ */
@media (max-width:991px){
html{scroll-padding-top:76px}
}
/* Gradient C (žiara za produktom) — poloha svetla podľa rozloženia bloku.
Na desktope je fotka vľavo (blok je flex-direction:row), takže žiara je na 22% 38%.
Na mobile sa blok preklopí na column a fotka je HORE V STREDE — žiara sa preto
musí presunúť nad ňu, inak by svietila vedľa fľaše. */
@media (max-width:767px){
.vivelum-product-magnesium .vivelum-stats{
--vs-bg:radial-gradient(circle at 50% 20%,#8C3838 0%,#6B2B2B 45%,#3F1919 100%);
}
.vivelum-product-omega-3 .vivelum-stats{
--vs-bg:radial-gradient(circle at 50% 20%,#2B6A6E 0%,#1E4A4D 45%,#0D2021 100%);
}
.vivelum-product-vitamin-d3 .vivelum-stats{
--vs-bg:radial-gradient(circle at 50% 20%,#C6AA52 0%,#B0953D 45%,#998235 100%);
}
}
/* ============================================================================
VIVELUM PDP — poradie nákupného bloku na mobile (2026-07-28)
---------------------------------------------------------------------------
PROBLÉM: v natívnom Shoptet layoute má riadok .product-top poradie
[1] .p-detail-info (krátky popis, ~440px) → [2] .p-info-wrapper (cena + CTA)
Na mobile sa oba stĺpce stackujú v tomto DOM poradí, takže tlačidlo
„Pridať do košíka" spadne až na ~1311px — cca 1,6 obrazovky pod ohyb.
(Namerané na 375×812: fotka 207–566, popis 596–1037, cena 1036, CTA 1311.)
RIEŠENIE: .product-top preklopíme na flex-column a blok s cenou a CTA
(.p-info-wrapper) posunieme cez order:-1 PRED popis. Dlhý popis klesne pod CTA.
Výsledok (namerané po aplikovaní): CTA 1311 → 870px, cena + „Skladom" nad
ohybom, tlačidlo hneď za nimi. Fotku ani strip miniatúr ani blok dostupnosti
ZÁMERNE neorezávame — nesú hodnotu (viac fotiek, sklad + termín doručenia),
posledných ~58px pod ohyb za ne nestojí.
PREČO order:-1 a nie order:1/2: cena je prvá bez ohľadu na to, koľko
súrodencov v riadku pribudne (napr. varianty). Popis a čokoľvek ďalšie
ostáva v prirodzenom poradí (order:0) za ňou.
SCOPE max-width:991px = presne bod, kde sa Shoptet stĺpce (col-lg-6) lámu na
jeden stĺpec. Desktop (≥992px, kde je layout vedľa seba) ostáva nedotknutý —
overené: nad 991px je .product-top stále display:block a order:0.
============================================================================ */
@media (max-width:991px){
html body .p-detail .product-top{
display:flex!important;
flex-direction:column!important;
}
html body .p-detail .product-top > .p-info-wrapper{
order:-1!important;
}
}
/* ============================================================================
VIVELUM PDP — cena a dostupnosť/doručenie VEDĽA SEBA na mobile (2026-07-28)
---------------------------------------------------------------------------
Nadväzuje na reorder vyššie. .price-line je natívne flex-column: cena je NAD
blokom dostupnosti, takže na mobile je to 4–5 riadkov pod sebou (~255px).
Preklopíme ho na DVA STĹPCE: VĽAVO cena (nezmenená), VPRAVO „Skladom + Môžeme
doručiť do: + dátum + Možnosti doručenia" — zarovnané doprava a oddelené
tenkou zvislou hairline linkou (rgba(27,28,30,.13), tá istá ako .vx-facts).
ZAROVNANIE (verzia „B — cena na stred", schválené používateľom): ľavý cenový
blok je nižší (2 riadky) než pravý (4 riadky). Cenu necháme v natívnej veľkosti
(28px) a align-items:center ju vycentruje na výšku pravého bloku — rovnaký
odstup hore aj dole (namerané ~18/18px na 375px). Cena tak „pláva" v optickom
strede, geometricky dokonalá symetria; zámerne nesedí vrchom so „Skladom".
margin-top na oboch stĺpcoch nulujeme (.availability-value malo natívne 20px).
(Alternatíva „A" — väčšia cena 44px ako kotva — bola zvážená a zamietnutá.)
Výsledok (namerané 375×812): price-line 255 → ~105px, CTA (už po reorderi)
870 → ~719px, čiže cena, dostupnosť AJ tlačidlo sú CELÉ nad ohybom.
POZOR 1 — FONT: typografický systém vyššie dáva celej .availability-value MONO
font (JetBrains Mono je široký). Mono má zmysel len pre číslo (dátum), preto
prozaické riadky („Môžeme doručiť do:", „Možnosti doručenia") vraciame na Inter
— inak sa v úzkom stĺpci lámu na 2 riadky. Dátum (.delivery-time) ostáva mono.
POZOR 2 — ÚZKE DISPLEJE: white-space:nowrap (čisté jednoriadkové texty) púšťame
len od 361px. Pod 360px sa próza radšej zalomí, než by pretiekla — overené na
360px aj 320px: žiadne horizontálne pretečenie, CTA stále vysoko.
POZOR 3 — DESKTOP: .price-line je nad 991px natívne tiež row; tam ZÁMERNE
NEcielime (celý blok je v max-width:991px), takže hairline linka ani
right-align na desktope nevzniknú — overené na 1280px (border-left:0,
text-align:start, .product-top zostáva block).
============================================================================ */
@media (max-width:991px){
html body .p-detail .price-line{
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:12px!important;
}
html body .p-detail .price-line > .p-final-price-wrapper{
flex:0 0 auto!important;
margin-top:0!important;
/* Cenový blok stiahnutý presne na obsah — .price-final je natívne display:block
a rozťahoval sa na ~173px, čo bralo miesto pravému stĺpcu (a pri centrovaní
tlačilo .price-line do ~1px vnútorného pretoku). max-content = presná šírka
(~111px), takže doprava má viac miesta a próza sa zmestí na 1 riadok aj pri
360px. max-width:60% je poistka, aby dlhá cena nikdy nezožrala pravý stĺpec. */
width:max-content!important;
max-width:60%!important;
}
html body .p-detail .price-line > .availability-value{
flex:1 1 auto!important;
min-width:0!important;
margin-top:0!important;
text-align:right!important;
border-left:1px solid rgba(27,28,30,.13)!important;
padding-left:12px!important;
}
html body .p-detail .price-line > .availability-value .availability-label{
font-size:15px!important;
line-height:1.2!important;
margin-bottom:3px!important;
}
html body .p-detail .price-line > .availability-value .delivery-line{
display:block!important;
margin-top:0!important;
line-height:1.45!important;
}
/* Každý riadok doručenia na vlastný riadok a flush k pravému okraju.
.delivery-time-label je natívne inline a .delivery-time inline-block — v
pôvodnom horizontálnom layoute mali margin-right (10px / 25px) ako medzery.
Pri right-align to spôsobovalo dve veci: dátum a popisok končili 10–25px od
okraja (nezarovnané so „Skladom") a po vynulovaní marginov sa dokonca spojili
na jeden riadok. display:block ich rozdelí na samostatné riadky, margin-right:0
ich prisadí presne pod „Skladom" a „Možnosti doručenia". */
html body .p-detail .price-line > .availability-value .delivery-time-label,
html body .p-detail .price-line > .availability-value .delivery-time{
display:block!important;
margin-right:0!important;
}
html body .p-detail .price-line > .availability-value .delivery-time-label,
html body .p-detail .price-line > .availability-value .shipping-options{
font-family:var(--vivelum-font-sans)!important;
font-size:12.5px!important;
}
html body .p-detail .price-line > .availability-value .shipping-options{
display:block!important;
margin:5px 0 0!important;
}
}
/* Čisté jednoriadkové texty len na bežných telefónoch (≥361px).
Pod 360px sa próza radšej zalomí, aby nič nepretieklo. */
@media (min-width:361px) and (max-width:991px){
html body .p-detail .price-line > .availability-value .delivery-time-label,
html body .p-detail .price-line > .availability-value .shipping-options{
white-space:nowrap!important;
}
}
/* ============================================================================
VIVELUM · 2+1 „Bundle výber" blok (Variant A) — VZHĽAD
----------------------------------------------------------------------------
Upsell 2+1 pod tlačidlom „Do košíka" na produktových stránkach.
FUNKČNOSŤ (nie vzhľad) rieši JavaScript vložený v pätičke:
Nastavenia → HTML kódy a analytika → pole „Pätička (pred )".
PREPOJENIE produktu s jeho 2+1 sadou (jedno z dvoch):
• parameter s názvom obsahujúcim „2+1", hodnota = URL sady, alebo
• skrytý prvok v popise:
2+1
Čísla (cena, za ks) sú v JetBrains Mono ako ostatné ceny na webe.
============================================================================ */
.vlm2p1{--b:#753333;--tint:#F3E9E4;--tintln:#E4CFC6;--ink:#1B1C1E;--muted:#8a8378;--card:#fff;--line:#E7DECF;
margin:16px 0 4px;font-family:var(--vivelum-font-sans,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);-webkit-font-smoothing:antialiased}
.vlm2p1__lead{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 9px;display:flex;align-items:center;gap:8px}
.vlm2p1__lead svg{width:15px;height:15px;color:var(--b);flex:0 0 auto}
.vlm2p1__opts{display:flex;flex-direction:column;gap:9px}
.vlm2p1__opt{position:relative;display:flex;align-items:center;gap:13px;cursor:pointer;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--card);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;min-height:56px}
.vlm2p1__opt:hover{border-color:var(--tintln)}
.vlm2p1__opt:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.vlm2p1__opt.is-sel{border-color:var(--b);background:var(--tint)}
.vlm2p1__radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto;position:relative;transition:border-color .15s}
.vlm2p1__opt.is-sel .vlm2p1__radio{border-color:var(--b)}
.vlm2p1__opt.is-sel .vlm2p1__radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--b)}
.vlm2p1__main{flex:1;min-width:0}
.vlm2p1__t{font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.25}
.vlm2p1__s{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.vlm2p1__badge{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--b);padding:2px 7px;border-radius:5px;text-transform:uppercase;white-space:nowrap}
.vlm2p1__pr{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;padding-left:6px;text-align:right}
.vlm2p1__price{font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap;line-height:1.1;font-family:var(--vivelum-font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-feature-settings:"tnum" 1}
.vlm2p1__per{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px;white-space:nowrap;font-family:var(--vivelum-font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace)}
.p-detail-inner.vlm2p1-bundle .p-final-price-wrapper .price-standard,
.p-detail-inner.vlm2p1-bundle .p-final-price-wrapper .price-save{display:none!important}
@media (max-width:480px){
.vlm2p1{margin:13px 0 2px}
.vlm2p1__lead{font-size:11px;margin-bottom:7px;letter-spacing:.05em}
.vlm2p1__lead svg{width:13px;height:13px}
.vlm2p1__opts{gap:7px}
.vlm2p1__opt{padding:9px 11px;gap:10px;min-height:46px;border-radius:10px}
.vlm2p1__radio{width:17px;height:17px}
.vlm2p1__t{font-size:13px;gap:6px}
.vlm2p1__s{font-size:11px;margin-top:1px}
.vlm2p1__price{font-size:14px}
.vlm2p1__per{font-size:10px;margin-top:1px}
.vlm2p1__badge{font-size:9px;padding:1px 5px;letter-spacing:0}
}