/* Zvislý posuvník vynútený vždy prítomný - inak "width:100vw" (napr. .panorama nižšie) a
   "width:100%" nedávajú rovnaký výsledok (100vw počíta do seba aj šírku posuvníka), takže
   prvok na celú šírku je vždy o šírku posuvníka širší než viditeľná plocha a vzniká vodorovný
   posuvník. Overené z ?debug=1: .panorama merala 648px pri clientWidth 628px, rozdiel presne
   20px = posuvník.
   Platí na všetkých šírkach, nie len na desktope: zúžené desktopové okno posuvník má tiež.
   Predtým to bolo obmedzené na min-width:769px kvôli tomu, že to lámalo moje vlastné CSS
   position:sticky - to už nepoužívame (beží natívny Bricks sticky, JS-riadený, ktorému
   overflow na predkoch nevadí), takže obmedzenie netreba. */
html {overflow-y:scroll;}

/* variables */
:root {
--vivino-c:#94070a; 
--darkvivino-c:#6e0708; 
--link-c:#990000; 
--hover-c:#DD0000; 
--white-c:#fff; 
--lightblack-c:#2c2923; 
--black-c:#060000;
--lightgray-c:#e7e6de;
--darkgray-c:#4a4844;
--page-pad-x:15px;
--page-pad-bottom:40px;
}

@font-face {font-family:'Barlow Semi Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowSemiCondensed-Regular.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:optional;}
@font-face {font-family:'Barlow Semi Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowSemiCondensed-Medium.woff2) format('woff2'); font-weight:500; font-style:normal; font-display:optional;}
@font-face {font-family:'Barlow Semi Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowSemiCondensed-Bold.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:optional;}
@font-face {font-family:'Barlow Semi Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowSemiCondensed-Italic.woff2) format('woff2'); font-weight:400; font-style:italic; font-display:optional;}

@font-face {font-family:'Barlow Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowCondensed-Regular.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:optional;}
@font-face {font-family:'Barlow Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowCondensed-Bold.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:optional;}
@font-face {font-family:'Barlow Condensed'; src:url(/wp-content/uploads/web/fonts/BarlowCondensed-Italic.woff2) format('woff2'); font-weight:400; font-style:italic; font-display:optional;}

/* Main */
a {color:#990000; border-bottom:1px #990000}
a.web {color:var(--lightblack-c); font-weight:500; border-bottom:1px #990000}
a:hover {color:#CC0000; border-bottom:#CC0000;}
a.size18 {font-size:18px !important;}
a.textlink {color:#2b2923 !important;}
a.textlink:hover {text-decoration:underline;}

/* Breadcrumbs - Bricks WooCommerce Breadcrumbs element nepoužíva štandardnú WooCommerce
   triedu .woocommerce-breadcrumb, ale vlastnú .brxe-woocommerce-breadcrumbs (overené z
   reálneho outerHTML). Štruktúra: <div class="brxe-woocommerce-breadcrumbs"><nav><span
   class="navigation"><a>Domov</a><span class="separator"></span><a>...</a>...</span></nav>
   </div> - .separator je úplne prázdny span, Bricks doň nevkladá žiadne "/", takže ho musí
   dodať CSS cez content. Bez červenej z globálneho "a {color:#990000}" vyššie, vlastná
   neutrálna tmavá farba, vycentrované. Domček pred prvou položkou (Home/Domov) cez CSS mask,
   nech dedí farbu textu rovnako ako ostatné naše ikony v headeri. */
/* width:100% + text-align:center samotné nestačilo - nav je pravdepodobne už sám osebe
   display:flex (bežné v CSS resetoch), kde centrovanie riadi justify-content, nie text-align.
   Vynucujem oboje naraz (aj !important), nech je to jedno, ktorý z nich reálne platí. */
.brxe-woocommerce-breadcrumbs {width:100% !important; text-align:center !important;}
.brxe-woocommerce-breadcrumbs nav {display:flex !important; justify-content:center !important; width:100%;}
.brxe-woocommerce-breadcrumbs .navigation {text-align:center;}
.brxe-woocommerce-breadcrumbs .navigation {font-family:'Barlow Semi Condensed', sans-serif; font-size:15px; color:var(--lightblack-c);}
.brxe-woocommerce-breadcrumbs a {color:var(--lightblack-c); text-decoration:none; border-bottom:none;}
.brxe-woocommerce-breadcrumbs a:hover {color:var(--vivino-c); border-bottom:none;}
.brxe-woocommerce-breadcrumbs .separator {display:inline-block; margin:0 8px;}
.brxe-woocommerce-breadcrumbs .separator::before {content:"/"; color:var(--darkgray-c);}
.brxe-woocommerce-breadcrumbs a:first-child::before {content:""; display:inline-block; width:14px; height:14px; margin-right:5px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center/contain;}

/* Breadcrumb na produktovej stránke - vľavo, nie na stred ako inde */
.single-product .brxe-woocommerce-breadcrumbs {text-align:left !important; padding-bottom:20px !important;}
.single-product .brxe-woocommerce-breadcrumbs nav {justify-content:flex-start !important;}
.single-product .brxe-woocommerce-breadcrumbs .navigation {text-align:left;}
a.golink {color:#2b2923 !important; text-decoration:underline;}
a.golink:hover {color:#5d0200 !important;}
a.u {text-decoration:underline;}
a.u:hover {color:var(--vivino-c);}
h1, h2, h3, h4, h5, h6 {font-family:'Barlow Semi Condensed', sans-serif; font-weight:500;}
h3, h4, h5, h6 {color:var(--vivino-c)}
/* Basel Theme Options: Text font aj Primary font = Barlow Semi Condensed (nastavené v admine,
   nie v tomto súbore - stratilo sa spolu s Baselom). Nastavené priamo na body, nech to dedí
   aj obsah bez vlastného pravidla (span, li text mimo p...), nielen konkrétne selektory nižšie. */
body {font-family:'Barlow Semi Condensed', sans-serif; font-size:18px;}
/* Sticky footer - header/content/footer sú priame deti <body>. Body sa roztiahne na celú
   výšku okna, #brx-content (hlavný obsah) vyplní voľné miesto medzi headerom a pätičkou -
   tá tak ostane vždy pri spodku okna, aj keď je obsahu stránky málo. Nemá vplyv na sticky
   header (to rieši position/JS, nie display), len na to, kde skončí pätička. */
body {display:flex; flex-direction:column; min-height:100vh;}
/* Pri prihlásení pridáva WP admin lištu NAD <body> (mimo nášho merania, takže 100vh + výška
   lišty presahuje okno - presne ten "trochu useknutý" efekt s posuvníkom aj na krátkej
   stránke). Rovnaké hodnoty výšky lišty (32px / 46px), aké už používame pri headeri. */
body.admin-bar {min-height:calc(100vh - 32px);}
@media (max-width:782px) {body.admin-bar {min-height:calc(100vh - 46px);}}
#brx-content {flex:1 0 auto;}
/* Title stránky (H1) - TEST: ak sa toto po nahratí neprejaví (veľké, čierne, na strede,
   veľkými písmenami), CSS pipeline sa niekde láme (cache/upload), nie konkrétne pravidlo. */
h1 {font-size:36px !important; font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:500; text-transform:uppercase; text-align:center; color:var(--black-c) !important;}
/* Rovnaký vzhľad ako h1, pre elementy, ktoré nemôžu byť priamo <h1> (napr. "Skrátený kód" s
   [ux_page_title] pre spoločnú šablónu kategórie/vyhľadávania) - prirad' túto triedu v poli
   "CSS Class" v Bricks. */
.ux-page-title {font-size:36px !important; font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:500; text-transform:uppercase; text-align:center; color:var(--black-c) !important;}
h2 {font-size:24px; margin:0 0 5px; padding:30px 0 0; color:var(--darkvivino-c);}
h3 {font-size:21px; margin:24px 0 15px; padding:0}
h4 {font-size:18px; margin:20px 0 5px; padding:0}
.nopadding {margin:0; padding:0;}

p {font-family:'Barlow Semi Condensed', sans-serif; font-size:18px; font-weight:500 !important; line-height:1.5em; margin:0 0 1em; padding:0 !important; color:var(--lightblack-c) !important;}
h3 + p {margin-bottom:.4em;}
ul {margin:0 0 5px;}
li {font-size:17px;}
p + ul {margin-top:-0.8em !important;}
/* Keď je h3+p+ul reťazec (nadpis -> krátky "label" odstavec bez vety -> zoznam, napr. "4.
   Platba a dodanie" -> "Spôsob objednania tovaru" -> <ul>), h3+p {margin-bottom:.4em} a
   p+ul {margin-top:-0.8em} sa spočítajú na -0.4em (záporné), zoznam sa vtiahne do textu
   odstavca. Pri bežnej vete (p margin-bottom 1em) to vyjde na +0.2em, preto to inde funguje -
   tu to opravujeme špecifickejším pravidlom, nie zmenou všeobecných h3+p / p+ul. */
h3 + p + ul {margin-top:0 !important;}
/*
p {font-family:'Barlow', sans-serif; font-weight:500 !important; line-height:1.5em; margin:0 0 1.0em; padding:0 !important; color:var(--lightblack-c) !important;}
ul {margin:0 0 5px;}
h3 {font-size:21px; margin:0 0 5px; padding:25px 0 0}
li {font-size:17px;}
p + ul {margin-top:-0.8em !important;}
*/
.read_div p + ul, .read_div p + h3 {margin-top:-0.6em !important;}
.read_div p + h3 {margin-top:-1em !important;}
.ux-sr-only {position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;}

.fullbar {clear:both !important; color:#ffffff !important; background-color:var(--vivino-c) !important; font-size:25px !important; font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:500 !important; line-height:normal !important; padding:1px 10px 3px 14px !important; margin:30px 0 0 !important; display:block !important; width:100% !important; box-sizing:border-box !important; text-align:left !important;}
.big_info {color:var(--darkgray-c); font-size:23px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:400; font-style:italic; margin:0; padding:20px 0 0 0;}
.sameheight {overflow:hidden; margin-top:0; padding:0} /* the same height */
.clearfloat {clear:both;}
.citat {color:#867960; background-color:#ece6d1; font-weight:500; font-size:25px; text-align:center; font-style:italic; border:2px dotted #c5baa5; padding:5px 10px; border-radius:20px 2px; margin:25px 0}
@media only screen and (max-width:600px) {.citat {font-size:22px;}}
.whyusbox {color:#867960; background-color:#ece6d1; font-weight:500; border:2px dotted #c5baa5; padding:5px 10px; border-radius:12px; margin-bottom:15px} 

/* ul/li pre Read More */
.read_div ul {list-style:none !important; margin:1em 0 1.2em 1.5em !important; padding:0; color:#554433;}
.read_div li {position:relative; margin-bottom:0.3em; padding-left:1.2em; line-height:1.5;}
.read_div li::before {content:"�"; position:absolute; left:0; top:-0.05em; color:#c4a663; font-size:1.5em; font-weight:normal; line-height:1;}

/* Globálna odrážka (kvačka v štýle .opis_hodnota/"archívny potenciál") pre zoznamy v OBSAHU
   stránok - nahrádza defaultnú bodku prehliadača (napr. na /informacie/obchodne-podmienky/).
   DÔLEŽITÉ: ul:not([class]) - mieri VÝLUČNE na <ul> bez akejkoľvek triedy (obyčajný zoznam
   napísaný v editore). Pôvodná verzia mierila na .entry-content/.brxe-post-content ul čo sa
   ukázalo nebezpečné - na homepage je VNÚTRI tohto wrapperu aj produktový slider
   (ul.products.ux-pslider-track), takže kvačky sa objavili aj tam. Každý skutočný komponent
   webu (produkty, menu, sidebar) má vždy nejakú triedu, takže :not([class]) ho bezpečne
   vynechá nech je vnorený kdekoľvek.*/
.entry-content ul:not([class]), .brxe-post-content ul:not([class]) {list-style:none; margin:0 0 1.2em 0; padding:0;}
.entry-content ul:not([class]) li, .brxe-post-content ul:not([class]) li {position:relative; padding-left:18px; margin-bottom:0.3em; line-height:1.5;}
.entry-content ul:not([class]) li::before, .brxe-post-content ul:not([class]) li::before {content:""; position:absolute; left:2px; top:0.55em; width:7px; height:7px; border-right:2px solid var(--vivino-c); border-bottom:2px solid var(--vivino-c); transform:rotate(-45deg);}

.metaslider { width:100vw !important; margin-left:calc(-50vw + 50%) !important;}
.metaslider img:first-child { loading:eager !important; fetchpriority:high !important; }

/* homepage */
.home .entry-header .entry-title {position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.homepage {text-align:justify; font-size:25px; color:black; padding-top:0px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:400;}
@media only screen and (max-width:600px) {.homepage {font-size:18px;}}

/* Homepage nemá title ani breadcrumbs (obe prázdne) - napriek tomu si držia svoj default
   margin/padding od Bricks a robia veľkú medzeru nad sliderom. :empty to zruší presne tam,
   kde naozaj nič nie je (na iných stránkach s vyplneným title/breadcrumbs sa nič nemení).*/
h1.brxe-post-title:empty, .brxe-woocommerce-breadcrumbs:empty {display:none;}

/* text pod "Prečo si objednať víno u nás" na homepage - o 2px väčšie (z 18px na 20px), rovnako na desktope aj mobile */
.why_us {font-size:20px;}

.home_pole_parameter {color:var(--vivino-c); font-size:17px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; line-height:normal; margin:0; padding:0;}
.home_pole_hodnota {color:#2c2923; font-size:19px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; margin:0 0 20px 0; padding:0;}
.home_img_popis {color:#444444; font-size:17px; margin:0; padding:5px 0 0 0;}
.home_container100 {width:100%; max-width:100%; margin:0; padding:0}
.home_container {float:left; margin:15px 0 25px 0; padding:0; overflow:hidden;}

.online-banner {text-align:right; color:white; padding-right:120px; background-image:var(--wpr-bg-f8c82d5b-3b97-42e9-9f71-f7938279b14a); background-size:cover; width:100%; height:210px; max-height:210px; margin:0}
.online_banner {display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; text-align:center; padding:6px 5px 9px 5px; background:#891619; width:100%; margin:0 0 15px 0; gap:5px; /* medzera medzi castami */}
.banner_font1 {font-size:45px; line-height:1.1; color:white; white-space:nowrap; /* zamedzi zalamovaniu v strede textu */}
.banner_font2 {font-size:32px; line-height:1.1; color:white; white-space:nowrap;}
@media (max-width:768px) {.banner_font1, .banner_font2 {white-space:normal;}}

/* homepage grid - v�na*/
.home_grid {max-width:1140px; display:grid; grid-gap:12px; grid-template-columns:1fr;}
.home_grid {grid-template-columns:repeat(1, 1fr);} /* Mobile first by default */
@media (min-width:400px)  {.home_grid {grid-template-columns:repeat(2, 1fr);}}
@media (min-width:900px) {.home_grid {grid-template-columns:repeat(4, 1fr);}}
.home_card {padding:2px; display:flex; flex-direction:column; gap:10px; height:fit-content;}
.home_h2 {padding:2px 10px 3px 14px; margin:11px 0 14px 0; font-size:23px; color:var(--white-c); background-color:var(--vivino-c); font-weight:500; font-family:'Barlow Semi Condensed', sans-serif; line-height:normal; display:block;}
.home_card h3 {font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:500; font-size:22px !important; color:var(--vivino-c) !important; margin:-3px 0 12px 0;}
.home_card a {text-decoration:none; color:inherit;}
.home_card:not(.home_card-split):hover h3 a {color:var(--hover-c);}
.home_card-split .home_card-mini:hover h3 a {color:var(--hover-c);}
.home_card p {margin:0; padding:0; display:inline;}
.home_grid img {width:100%; margin:0; padding:0; display:block; margin-bottom:0}
@media (max-width:899px) {
  .home_h2 {font-size:clamp(20px, calc(16.3px + 0.77vw), 23px);}
  .home_card h3 {font-size:clamp(19px, calc(-0.69px + 4.1vw), 35px) !important; font-family:'Barlow Condensed', sans-serif !important; font-weight:400 !important;}
}
@media (min-width:900px) and (max-width:1139px) {
  .home_card h3 {font-size:clamp(16px, calc(8.47px + 0.84vw), 18px) !important;}
}

/* Zdieľaná karta pre 2 krajiny s málo vínami (napr. Portugalsko + Nemecko) - "height:auto"
   zruší height:fit-content z .home_card vyššie, takže sa karta normálne natiahne (grid
   stretch) na presne tú istú výšku, akú majú ostatné karty v rade. Oba mini-obrázky si tento
   priestor rovnako podelia (flex:1) a orežú sa (object-fit:cover), takže spodný nadpis
   ("Nemecké víno") skončí presne v rovnakej úrovni ako nadpisy ostatných kariet - nezávisle
   od konkrétnej výšky riadku. */
.home_card-split {height:auto !important; gap:16px !important;}
.home_card-split .home_card-mini {display:flex; flex-direction:column; flex:1 1 0; min-height:0;}
.home_card-split .home_card-mini .izoom {flex:1 1 auto; min-height:0;}
.home_card-split .home_card-mini .izoom img {display:block; width:100%; height:calc(97% - 3px); object-fit:cover; border-radius:25px 6px !important;}
.home_card-split .home_card-mini h3 {flex:0 0 auto; margin-top:7px !important; line-height:1.15 !important;}
.home_card-split .home_card-mini:nth-child(2) {margin-top:0px;}

.izoom_container {margin:0 0 5px 0; padding:0;}
.izoom {overflow:hidden; line-height:0;}
.izoom img {transition:transform 2s ease-in-out; border-radius:42px 8px;}
.izoom:hover img {transform:scale(1.2);}

/* homepage grid - Loga vinarstiev */
.loga_grid {max-width:1140px; display:grid; grid-gap:25px; grid-template-columns:1fr;}
.loga_grid {grid-template-columns:repeat(2, 1fr);} /* Mobile first by default */
@media (min-width:300px) {.loga_grid {grid-template-columns:repeat(3, 1fr);}}
@media (min-width:600px) {.loga_grid {grid-template-columns:repeat(4, 1fr);}}
@media (min-width:1140px) {.loga_grid {grid-template-columns:repeat(5, 1fr);}}
.loga_grid img {width:100%; opacity:0.6; transition:opacity 0.5s ease-in-out;}
.loga_grid img:hover {opacity:1;}


/* odrody */
.odrody_grid {max-width:1140px; display:grid; column-gap:20px; row-gap:15px; grid-template-columns:1fr;}
.odrody_grid {grid-template-columns:repeat(2, 1fr);} /* Mobile first by default */
@media (max-width:649px) {.odrody_grid {column-gap:15px;}}
@media (min-width:650px)  {.odrody_grid {grid-template-columns:repeat(3, 1fr);}}
@media (min-width:950px)  {.odrody_grid {grid-template-columns:repeat(4, 1fr);}}
@media (min-width:1140px) {.odrody_grid {grid-template-columns:repeat(5, 1fr);}}
.odrody_card {padding:2px 0;}
.odrody_h2 {clear:both; color:#ffffff !important; background-color:var(--vivino-c); font-size:25px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; line-height:normal; padding:1px 10px 3px 14px; margin:60px 0 20px 0; display:block}
h3.odrody_h3 {font-size:25px; font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:500; color:var(--black-c) !important; margin:60px 0 10px 0;}
.odrody_card h4 {font-size:21px; font-family:'Barlow Condensed', sans-serif; font-weight:500; color:var(--link-c); margin:4px 0; padding:0;}
.odrody_card h4 small {color:#777777;}
.odrody_card a {text-decoration:none; color:inherit;}
.odrody_card:hover h4 a {color:var(--hover-c);}
.odrody_card p {margin:0; padding:0; display:inline;}
.odrody_card .popis {color:var(--darkgray-c); font-size:18px; font-family:'Barlow Condensed', sans-serif; font-weight:400; margin:0; padding:0; text-align:right}
.odrody_grid img {width:100%; border-radius:0 44px; opacity:1; transition:opacity 0.6s ease-in-out; margin:0; padding:0; display:block; margin-bottom:0}
.odrody_grid img:hover {opacity:0.75;}

/* vinarstva */
.vinarstva_grid {max-width:1140px; display:grid; grid-gap:25px; grid-template-columns:1fr;}
.vinarstva_grid {grid-template-columns:repeat(2, 1fr);} /* Mobile first by default */
@media (min-width:600px)  {.vinarstva_grid {grid-template-columns:repeat(3, 1fr);}}
@media (min-width:950px)  {.vinarstva_grid {grid-template-columns:repeat(4, 1fr);}}
@media (min-width:1140px) {.vinarstva_grid {grid-template-columns:repeat(5, 1fr);}}
.vinarstva_card {position:relative; padding:2px; display:flex; flex-direction:column;}
.vinarstva_h2 {font-size:28px; color:var(--white-c); background-color:var(--vivino-c); font-family:'Barlow Semi Condensed', sans-serif !important; font-weight:400; line-height:normal; padding:3px 10px 3px 5px; margin:60px 0 20px 0; display:block}
.vinarstva_card h3, .vinarstva_card h3 a {font-size:21px !important; font-family:'Barlow Condensed', sans-serif !important; font-weight:500; color:var(--link-c); margin:4px 0;}
@media (max-width:950px) {.vinarstva_card h3, .vinarstva_card h3 a {font-size:19px !important;}}
@media (max-width:650px) {.vinarstva_card h3, .vinarstva_card h3 a {font-size:18px !important;}}
.vinarstva_card a {text-decoration:none; color:inherit;}
.vinarstva_card:hover h3 a {color:var(--hover-c);}
.vinarstva_card p {margin:0 !important; padding:0 !important; line-height:0 !important;}
.vinarstva_card .popis {width:100%; color:var(--darkgray-c); font-size:18px; font-family:'Barlow Condensed', sans-serif; font-weight:400; margin:0; padding:0; text-align:right;}
.vinarstva_img_box {position:relative; width:100%; /* Make it responsive */ height:0; /* Reset height */ padding-bottom:100%; /* Square aspect ratio */ margin:0;}
.vinarstva_img_box img {position:absolute; width:100%; height:100%; left:0; top:0; margin:0; padding:0; transition:opacity 0.8s ease-in-out; object-fit:cover; /* Make sure images cover the area nicely */}
.vinarstva_img_box img.img_front:hover {opacity:0;}

.vinarstva-loga {float:left; margin:10px 13px 0 13px; padding:0;}
.vinarstva-loga img {opacity:0.5; width:200px; height:200px}
.vinarstva-loga img:hover {opacity:1; transition:opacity 0.5s ease-in-out;}

.izoom .w360 {width:360px}
.izoom .w264 {width:264px}

.vl1 {border-left:4px solid black; height:15px; top:2px; margin:0 8px 0 8px; display:inline-block}
.vl2 {border-left:4px solid darkred; height:15px; top:2px; margin:0 8px 0 0; display:inline}


/* odrody submenu - vina podla odrody*/
.div_center {text-align:center;}
.odrody_menu {font-weight:600px; font-size:18px; color:var(--vivino-c); background:var(--lightgray-c); border-radius:20px; display:inline-block; padding:3px 20px; margin:20px 0}
.odrody_menu a {font-weight:700}

/* odrody:obr�zky - stranky s popisom odrody + homepage degustacia*/
.odroda_img {float:right; padding:10px 0 15px 25px;}
@media only screen and (max-width:600px) {.odroda_img {width:100%; padding:0 0 15px 0;}}

/* img_reverse - na mobile presunie obrázok za text, aby LCP kandidátom bol text (rýchly,
   font-display:optional) a obrázok sa stal LCP kandidátom až neskôr/mimo viewportu. Dať
   triedu na wrapper div (napr. "sameheight img_reverse") a na <p>, čo obaľuje obrázok, pridať
   triedu "img_wrap" (napr. <p class="img_wrap"><a><img .../></a></p>). Zámerne BEZ :has() -
   WP Rocket Remove Unused CSS ho nemusí rozpoznať a pravidlo potichu vyhodí ako nepoužité.
   Desktop sa nemení - flex poradie platí iba pod 600px.*/
@media only screen and (max-width:600px) {
  .img_reverse {display:flex; flex-direction:column;}
  .img_reverse > .img_wrap {order:99;}
}

/* Obrázky v texte kategórie vína (napr. červené víno) - generické WP triedy alignright/
   alignleft v .brxe-post-content, nech sa to nemusí ručne prerábať na každej stránke. Rovnaký
   vzor ako .odroda_img, ale obrázok je širší (467x400), preto skáče na plnú šírku skôr (väčší
   breakpoint). Bočné odsadenie pri skoku NEPRIDÁVAME vlastné - kontajner (.brxe-post-content)
   už svoje má, vlastný padding navyše sa s ním sčítaval (odmerané: 15px náš + kontajnerov =
   50px vľavo) - necháva sa teda zdediť. */
.brxe-post-content img.alignright {float:right; margin:0; padding:10px 0 15px 25px;}
.brxe-post-content img.alignleft {float:left; margin:0; padding:10px 25px 15px 0;}
@media only screen and (max-width:850px) {
  .brxe-post-content img.alignright, .brxe-post-content img.alignleft {width:100%; height:auto; margin:0; padding:0 0 15px 0; float:none; box-sizing:border-box;}
}

/* Stránky vinárstiev - obrázky v .sameheight/.floatleft/.floatright na plnú šírku obsahu na
   mobile (rovnaký vzor ako .odroda_img vyššie), nech sa to nemusí riešiť ručne v 35 stránkach.
   Logo (.floatleft img) vynechané - to má vlastné, opačné pravidlo nižšie (nezväčšovať,
   max-height), inak by ho toto prebilo na plnú šírku (rozmazané, "veľké ako krava"). */
@media only screen and (max-width:767px) {.sameheight img:not(.floatleft img) {width:100% !important; height:auto !important; padding:0;}}

/* Panorama */
.panorama {position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:30px; height:900px; /* Set a fixed height for desktop */ overflow:hidden;}
.full {position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; display:block; transform:scale(1);}
.zoom {animation:scale 15s ease-in-out;}
@keyframes scale {50% {transform:scale(1.5);}}
@media (max-width:1024px) {.panorama {height:600px;}} /* tablet */
@media (max-width:950px) {.panorama {height:70vh;}} /* mobile landscape*/
@media (max-width:768px) {.panorama {height:50vh;}} /* mobile */

/* Header */
/* Layout - vzor prevzatý z vitalfit.sk (tam doladený a overený). Potrebuje CSS ID "brx-header"
   nastavené na Section elemente headera v Bricks (Settings -> ID) - bez neho sa nič z tohto
   nechytí. */
/* Vlastné position:sticky VYPNUTÉ - skúšame natívny Bricks "Sticky header" (Template Settings
   šablóny Header), nech nebežia dva konkurenčné sticky mechanizmy naraz. Ak sa natívny
   neosvedčí, tento riadok jednoducho odkomentuj naspäť.
#brx-header {position:sticky; top:0; z-index:999; background:var(--white-c); box-shadow:0 1px 0 rgba(0,0,0,.06);}
body.admin-bar #brx-header {top:32px;}
@media (max-width:782px) {body.admin-bar #brx-header {top:46px;}}
*/
/* Bez box-shadow tu - tá tenká čiarka (0 1px 0) bola vidno aj v bežnom (nezoscrollovanom)
   stave a opticky vadila. Tieň pri scrollovaní rieši výhradne natívne pole "Tieň boxu pri
   posúvaní" priamo v Bricks (naše vlastné CSS pre tento tieň je nižšie zámerne vypnuté) -
   to samo stačí, netreba nič duplikovať. */
#brx-header {background:var(--white-c); z-index:999;}
/* Odsadenie pod WP admin lištu - lišta sa správa inak podľa šírky obrazovky a práve to je
   dôvod tej prázdnej medzery nad hlavičkou pri scrollovaní:
   - nad 782px je lišta position:fixed (drží sa hore) a vysoká 32px -> hlavička sa lepí pod ňu
     na top:32px a lišta to miesto vyplní, takže žiadna medzera nevzniká
   - do 782px je lišta position:absolute, teda pri scrollovaní odíde preč -> hlavička sa musí
     lepiť na top:0, inak po nej ostane prázdnych 46px (presne to, čo bolo vidieť).
   Netýka sa bežných návštevníkov, len prihlásených administrátorov. */
body.admin-bar #brx-header {top:32px !important;}
@media (max-width:782px) {body.admin-bar #brx-header {top:0 !important;}}
/* Tieň/pozadie pri scrollovaní - rieši sa priamo v Bricks Template Settings (polia "Pozadie
   pri posúvaní" / "Tieň boxu pri posúvaní"), nie tu - .brx-sticky očividne neznamená "práve
   prilepené počas scrollu" (inak by sa nezmenšovalo natrvalo), takže dokým nezistíme správnu
   triedu pre zúženie/logo, CSS na to tu zámerne nedávam.
#brx-header.brx-sticky {box-shadow:0 4px 20px rgba(0,0,0,.1);}
*/
/* Pri scrollovaní sa hlavička zmenší aj na výšku (menší padding + menšie logo). Ak by pod ňou
   ostávala biela medzera, znamená to, že Bricks drží pod ňou "spacer" pevnej (pôvodnej) výšky
   - vtedy treba vypnúť automatické odsadenie v Bricks Template Settings, lebo position:sticky
   si miesto rezervuje sám a spacer navyše je zbytočný. */
#brx-header .brxe-section {width:100%; padding-top:16px; padding-bottom:16px; transition:padding .3s ease;}
/* Okrem paddingu treba pri scrollovaní vynulovať aj tých ~15px navyše pod sekciou (v normálnom
   stave sú tiež, len ich nevidno - pri zmenšenej hlavičke vyčnievajú ako prázdny biely pás,
   pod ktorým sedí tieň). Nulujem margin aj padding naraz, keďže nevieme, ktoré z nich to je. */
#brx-header.scrolling .brxe-section {padding-top:6px; padding-bottom:6px; margin-bottom:0 !important;}
#brx-header.scrolling {padding-bottom:0 !important;}
#brx-header .brxe-section > .brxe-container {display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important; box-sizing:border-box !important; width:100% !important; max-width:1170px !important; padding-left:15px !important; padding-right:15px !important; margin-left:auto; margin-right:auto;}
/* Logo = prvý priamy potomok kontajnera (skutočná trieda po nahradení Logo elementu
   shortcode-om [ux_logo] je .brxe-shortcode, nie .brxe-logo - to bola presná príčina, prečo
   sa menu doteraz necentrovalo: rástli len ikony vpravo, logo vľavo zostávalo malé). Cielenie
   cez :first-child namiesto generovaného ID, nech to prežije aj prestavbu headeru. */
#brx-header .brxe-section > .brxe-container > .brxe-shortcode:first-child {flex:1 1 0; min-width:0;}
#brx-header .brxe-logo img {width:auto !important; height:auto !important; max-height:50px; max-width:none !important; object-fit:contain;}
#brx-header .brxe-container > .brxe-nav-menu {flex:0 0 auto;}

/* Logo ako inline SVG (nie Bricks Logo element) - viewBox 300x70 v ux_logo() drží pomer
   strán. Šírka 175px, výška sa dopočíta sama z pomeru strán. Mäkkosť pri priblížení na
   monitore zblízka bola vlastnosť LCD (subpixelové vyhladzovanie), nie chyba v kóde - na
   mobile je SVG naopak výrazne ostrejšie než PNG (potvrdené). */
.header-logo {display:inline-flex; align-items:center; flex:0 0 auto;}
.header-logo svg {width:175px; height:auto; transition:width .3s ease;}
#brx-header.scrolling .header-logo img, #brx-header.scrolling .header-logo svg {width:120px;}

/* Menu položky - nowrap nech sa nezalamujú pri stlačení šírky. Basel Theme Options malo
   Navigation font: Barlow Semi Condensed Medium 500, 18px - to isté platí tu pre hlavné
   položky. Podmenu nemalo v Basel nastaveniach vlastnú veľkosť, dal som 15px Regular 400
   (predtým sa nič netrafilo, dedilo sa odkiaľsi z Bricks - preto ten "čudný" 13px). */
#brx-header .bricks-nav-menu {flex-wrap:nowrap;}
#brx-header .bricks-nav-menu > li > a, #brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a {text-transform:uppercase; font:500 18px/1.2 'Barlow Semi Condensed', sans-serif; letter-spacing:.4px; color:var(--lightblack-c); white-space:nowrap;}
#brx-header .bricks-nav-menu > li > a:hover, #brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a:hover {color:var(--vivino-c);}
/* Kvačka (rozbaľovacia šípka) - veľkosť sa nastavuje priamo na SVG, NIE cez transform:scale.
   Transform totiž zmenší len vykreslenie, nie rozmer boxu - tlačidlo si drží pôvodnú šírku a
   okolo zmenšenej šípky ostane mŕtvy priestor, ktorý sa k medzere pripočíta (preto tých 13px
   napriek gap:6px). Bez transformu je vizuálna medzera presne tá, ktorú nastavíme. */
/* Vlastné SVG Bricksu sa skryje a šípka sa kreslí ako pozadie priamo na tlačidle. Dôvod:
   Bricks si rozmer tlačidla riadi sám (vychádzalo 17x17px = cca 1.2em pri 14px písme) a
   nastavovanie veľkosti vnútorného SVG sa naň nedostalo. Takto je rozmer daný jedným
   pravidlom na tlačidle a nie je čo prebíjať - vrátane flex-basis, aby sa nedalo roztiahnuť. */
/* appearance:none - natívny OS/prehliadačový vzhľad <button> vie pridať vizuálnu hrúbku
   navyše (padding/tieň), ktorá sa do CSS box modelu vôbec nepočíta a preto ju nešlo prebiť
   cez width/height/padding. box-sizing:border-box + display:block istí, že sa vlastný
   rozmer nemieša s ničím zdedeným. */
#header-nav-menu .brx-submenu-toggle > button, #header-nav-menu .brx-submenu-toggle > .brx-submenu-toggle-icon {appearance:none !important; -webkit-appearance:none !important; box-sizing:border-box !important; display:block !important; width:11px !important; height:11px !important; min-width:0 !important; min-height:0 !important; max-width:11px !important; max-height:11px !important; flex:0 0 11px !important; padding:0 !important; margin:0 !important; border:none !important; outline:none !important; box-shadow:none !important; font-size:0 !important; line-height:0 !important; transform:none !important; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394070a'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") no-repeat center/contain !important;}
#header-nav-menu .brx-submenu-toggle > button svg, #header-nav-menu .brx-submenu-toggle .menu-item-icon {display:none !important;}
#header-nav-menu .brx-submenu-toggle {display:flex !important; align-items:center; gap:4px !important;}

/* Podmenu (rozbaľovacie dropdowny) */
#header-nav-menu ul.sub-menu, #header-nav-menu .brx-dropdown-content {background:var(--white-c); min-width:220px; box-shadow:0 8px 20px rgba(0,0,0,.12); padding:10px 0; margin-left:-15px;}
#header-nav-menu .sub-menu li > a, #header-nav-menu .sub-menu li > div.brx-submenu-toggle > a {display:block; padding:7px 16px; font:400 15px/1.3 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; color:var(--lightblack-c); text-decoration:none; transition:background-color .2s ease, color .2s ease;}
#header-nav-menu .sub-menu li > a:hover, #header-nav-menu .sub-menu li > div.brx-submenu-toggle:hover > a {background:var(--lightgray-c); color:var(--vivino-c);}

/* Deliaca čiara v podmenu - namiesto pluginu. Položka "---" vo WP menu potrebuje vlastnú CSS
   triedu "menu-divider" (Vzhľad -> Menu -> zapnúť "CSS Classes" v Screen Options hore vpravo,
   potom pri danej položke do poľa "CSS Classes" napísať menu-divider). Odkaz sa úplne skryje,
   zostane len tenká čiara s presne kontrolovaným odsadením - žiadny plugin, žiadne veľké
   medzery navyše. */
/* width:calc() + margin:auto namiesto margin:6px 23px na inset - Bricks dáva položkám menu
   vlastné width:100% (.bricks-menu-item), takže pridaný margin sa už nemá kam zmestiť a box
   len pretečie von. Explicitná užšia šírka je jediný spôsob, ako čiaru naozaj zúžiť dovnútra.
   32px = 2x16px, rovnaké odsadenie ako padding na susedných <a> odkazoch, nech čiara vizuálne
   nadväzuje na okraj textu nad/pod ňou. */
#header-nav-menu .sub-menu li.menu-divider {list-style:none; height:0; width:calc(100% - 32px); margin:6px auto; padding:0; border-top:1px solid var(--lightgray-c);}
#header-nav-menu .sub-menu li.menu-divider > a {display:none;}

/* Ikony vpravo (hľadanie/účet/obľúbené/košík) - riadok stlačený cez :has(), nie cez gap
   nastavenie na Bricks kontajneri. Dôvod: Bricks obaľuje každý shortcode do vlastného
   .brxe-shortcode elementu, vnútri ktorého sa "gap:normal" počíta ako 0 - presne ten istý
   problém, čo sme riešili a zdokumentovali na vitalfit.sk. Selektor cieli cez .header-search
   (spoľahlivo prítomný v tomto riadku), nie cez generované Bricks ID, takže prežije aj
   prestavbu headeru. */
#brx-header .brxe-container:has(> .brxe-shortcode > .header-search) {display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-end; flex:1 1 0 !important; gap:9px !important;}
#brx-header .brxe-container:has(> .brxe-shortcode > .header-search) > * {flex:0 0 auto !important; width:auto !important; margin:0 !important; padding:0 !important;}

/* Poistka pre prípad, že by [ux_mobile_menu] niekedy vrátilo prázdny výstup - Bricks aj tak
   obalí shortcode do vlastného .brxe-shortcode divu, ktorý v strome zostáva, a prázdna
   položka si aj tak vypýta gap od kontajnera (presne to bola príčina včerajšieho pretekania
   košíka/hamburgera). Teraz je neaktívna (burger má reálny obsah), ale nechávam ju tu. */
#brx-header .brxe-shortcode:has(> .ux-mobile-menu-placeholder) {display:none !important;}

/* Mobil - vlastný burger + vysúvací panel (vzor z vitalfit.sk), natívny Bricks toggle sa
   nepoužíva vôbec (jeho panel sedí vnútri hlavičky, nie vo footeri). Hľadanie/účet/obľúbené
   sa presúvajú do vlastného panela (viď ux_mobile_menu_panel() vo functions.php). */
@media (max-width:880px) {
  #header-nav-menu {display:none !important;}
  /* Logo doľava, ikony doprava. NIE cez justify-content:space-between - to sa ukázalo ako
     citlivé na "fantómovú" položku: v riadku je okrem loga a ikon ešte jeden neviditeľný
     flex item (pseudo-element ::after, ktorý flexbox počíta ako plnohodnotnú položku), takže
     space-between rozdeľovalo miesto medzi TRI položky a ikony skončili v strede (merané:
     328..408 namiesto 511..591). margin-left:auto na ikonách pohltí celé voľné miesto pred
     nimi a pritlačí ich doprava bez ohľadu na to, koľko položiek v riadku reálne je. */
  #brx-header .brxe-section > .brxe-container {justify-content:flex-start !important;}
  /* width:auto !important je tu kľúčové - Bricks tomuto konkrétnemu shortcode obalu aj
     kontajneru ikon niekde natívne vnucuje width:100% (potvrdené z ?debug=1: oba merali
     presne 576px, čo je celá dostupná šírka riadku, hoci obsah bol len 130px resp. ~80px).
     flex:0 0 auto samo osebe to neprebilo, lebo flex-basis:auto sa odvíja práve od width -
     ak je width nastavené na 100% niekde inde, basis sa vypočíta z toho. Toto som mala už
     vyriešené v skoršom (úspešnom) teste, ale vypadlo to pri zjednodušovaní na space-between. */
  #brx-header .brxe-container > .brxe-shortcode:first-child {flex:0 0 auto !important; width:auto !important;}
  /* margin:0 0 0 auto (celý shorthand, nie len margin-left) - Bricks má na svojich kontajneroch
     natívne margin-left:auto AJ margin-right:auto (tak si ich centruje). Keď som nastavovala len
     ľavý, pravý ostal auto a voľné miesto sa rozdelilo na polovice = prvok sa vycentroval
     (merané: ikony začínali presne 183px za logom, čo je presná polovica zo 366px voľného
     miesta). Pravý margin musí byť 0, aby sa všetko voľné miesto presunulo doľava. */
  #brx-header .brxe-container:has(> .brxe-shortcode > .header-search) {flex:0 0 auto !important; width:auto !important; max-width:max-content !important; margin:0 0 0 auto !important; gap:17px !important;}
  #brx-header .brxe-container > .brxe-shortcode:has(> .header-search),
  #brx-header .brxe-container > .brxe-shortcode:has(> .ux-account-link),
  #brx-header .brxe-container > .brxe-shortcode:has(> .ux-wishlist-link) {display:none !important;}
  /* Suma vedľa košíka len na desktope - na mobile stačí počet v krúžku */
  #brx-header .mini-cart-link .cart-subtotal {display:none !important;}
  #brx-header .brxe-section > .brxe-container {min-width:0 !important; max-width:100% !important;}
  .ux-searchbox, .ux-search-form {max-width:100%; min-width:0; box-sizing:border-box;}
  .header-logo img, .header-logo svg {width:130px;}
}

/* ---- Mobilné menu: burger + vysúvací panel (vzor prevzatý z vitalfit.sk) ---------------- */
/* Burger je vidieť len na mobile, panel sa vykresľuje vo footeri ako priame dieťa <body>. */
.ux-burger {display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 7px; background:none; border:none; cursor:pointer;}
.ux-burger span {display:block; height:3px; background:var(--lightblack-c); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.ux-mpanel-on .ux-burger span:nth-child(1) {transform:translateY(8px) rotate(45deg);}
.ux-mpanel-on .ux-burger span:nth-child(2) {opacity:0;}
.ux-mpanel-on .ux-burger span:nth-child(3) {transform:translateY(-8px) rotate(-45deg);}
@media (max-width:880px) {.ux-burger {display:flex;}}
/* Na desktope treba skryť aj Bricks obal shortcodu, nielen samotný burger - prázdna flex
   položka si aj tak vypýta gap a za košíkom by ostalo 9px mŕtveho miesta. */
@media (min-width:881px) {
  .ux-burger, .ux-mpanel, .ux-mpanel-overlay {display:none !important;}
  #brx-header .brxe-shortcode:has(> .ux-burger) {display:none !important;}
}

.ux-mpanel-overlay {position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:1000;}
/* left:-100% namiesto transform:translateX(-100%) - position:fixed skryté cez transform sa v
   niektorých prehliadačoch napriek tomu počíta do šírky celej stránky (transform nemení, odkiaľ
   fixed element svoju pozíciu počíta, len jeho vykreslenie). Toto je jediný nový position:fixed
   + transform prvok, ktorý pribudol práve s vysúvacím panelom - najpravdepodobnejšia príčina
   pretekania na mobile. left je klasický, bezpečný vzor presne kvôli tomuto javu. */
.ux-mpanel {position:fixed; top:0; left:-100%; width:86%; max-width:360px; height:100%; background:var(--white-c); transition:left .28s ease; z-index:1001; overflow-y:auto;}
.ux-mpanel-on .ux-mpanel-overlay {opacity:1; visibility:visible;}
.ux-mpanel-on .ux-mpanel {left:0;}
.ux-mpanel-on {overflow:hidden;}
.ux-mpanel-head {display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eee; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px;}
.ux-mpanel-close {background:none; border:none; font-size:30px; line-height:1; color:#777; cursor:pointer;}
.ux-mpanel-search {padding:14px 18px; border-bottom:1px solid #eee;}
.ux-mpanel-link {display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #eee; color:var(--lightblack-c); font:500 15px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px; text-decoration:none; border-left:none;}
.ux-mpanel-link svg {flex:0 0 auto; color:var(--vivino-c);}
.ux-mpanel-link:hover {background:var(--lightgray-c); color:var(--vivino-c);}

/* Menu v paneli - položka s podmenu sa prvým klikom rozbalí (accordion) */
.ux-mmenu-wrap {border-top:8px solid #f4f4f4;}
.ux-mmenu, .ux-mmenu .sub-menu {list-style:none; margin:0; padding:0;}
.ux-mmenu > li {border-bottom:1px solid #eee;}
.ux-mmenu > li > a, .ux-mmenu > li > .brx-submenu-toggle > a {display:flex; align-items:center; padding:14px 18px; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px; color:var(--lightblack-c); text-decoration:none; border-bottom:none;}
.ux-mmenu > li.menu-item-has-children {position:relative;}
.ux-mmenu > li.menu-item-has-children > a {padding-right:58px;}
.ux-mmenu-toggle {position:absolute; top:0; right:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-left:1px solid #eee; padding:0; margin:0; cursor:pointer; z-index:1;}
.ux-mmenu-toggle::after {content:""; width:12px; height:12px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23888888'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .2s ease;}
.ux-mmenu > li.open .ux-mmenu-toggle {background:var(--vivino-c);}
.ux-mmenu > li.open .ux-mmenu-toggle::after {background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") no-repeat center/contain; transform:rotate(180deg);}
.ux-mmenu .sub-menu {display:none; padding:6px 0; background:#faf8f6; border-left:4px solid var(--vivino-c);}
.ux-mmenu > li.open > .sub-menu {display:block;}
.ux-mmenu .sub-menu li > a {display:block; padding:11px 18px 11px 30px; color:var(--lightblack-c); text-decoration:none; font:400 15px/1.3 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; border-bottom:none;}
.ux-mmenu .sub-menu li > a:hover {color:var(--vivino-c);}
/* Deliaca čiara funguje aj tu (tá istá trieda menu-divider z WP menu) */
.ux-mmenu .sub-menu li.menu-divider {height:0; width:calc(100% - 36px); margin:6px auto; padding:0; border-top:1px solid var(--lightgray-c);}
.ux-mmenu .sub-menu li.menu-divider > a {display:none;}

/* Search box - pill input + kruhové tlačidlo s lupou (rovnaký vizuál ako vitalfit.sk) */
.ux-searchbox {width:100%;}
.ux-search-form {display:flex; align-items:center; gap:8px;}
.ux-search-input {flex:1; min-width:0; height:44px; padding:0 18px; border:1px solid var(--lightgray-c); border-radius:9999px; font-family:'Barlow Semi Condensed', sans-serif; font-size:15px; color:var(--lightblack-c); background:var(--white-c); outline:none;}
.ux-search-input:focus {border-color:var(--vivino-c);}
.ux-search-submit {flex:0 0 44px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--white-c); background:var(--vivino-c); border:none; border-radius:9999px; cursor:pointer; transition:background-color .2s ease;}
.ux-search-submit:hover {background:var(--darkvivino-c);}

/* AJAX live-search dropdown - vykresľuje ho priamo JS do formulára (ux_live_search_script()),
   pre produktové vyhľadávanie (header aj mobilný panel), nie pre vyhľadávanie v blogu. */
.ux-livesearch-results {display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--white-c); border:1px solid var(--lightgray-c); border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.14); max-height:360px; overflow-y:auto; z-index:1003;}
.ux-livesearch-results.ux-livesearch-on {display:block;}
.ux-livesearch-item {display:flex; align-items:center; gap:10px; padding:8px 14px; text-decoration:none; color:var(--lightblack-c); border-bottom:none;}
.ux-livesearch-item:hover {background:var(--lightgray-c);}
.ux-livesearch-item img {width:40px; height:60px; object-fit:cover; border-radius:4px; flex:0 0 auto; margin:0;}
.ux-livesearch-info {display:flex; flex-direction:column; gap:2px; min-width:0;}
.ux-livesearch-title {font:500 14px/1.3 'Barlow Semi Condensed', sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ux-livesearch-price {font-size:13px; color:var(--vivino-c);}
.ux-livesearch-empty {padding:14px; text-align:center; color:var(--darkgray-c); font-size:14px;}

/* === BLOG SIDEBAR (vyhľadávanie + kategórie článkov + posledné príspevky) === */
.ux-sidebar {display:flex; flex-direction:column; gap:32px;}
/* #brxe-7ca19a (sidebar na kategórii blogu) a #brxe-09ae50 (sidebar pod jednotlivým článkom)
   majú v Bricks na mobile zrejme ešte Max. šírku 300px zdedenú z Desktopu (Šírka 100% ju
   neprebije) - rovnaký bug, aký sme riešili pri košíku/pokladni/blogu, tu rovno override cez
   ID namiesto ďalšieho hľadania v Bricks. Rozsah až po 977px (tesne pod globálny Bricks
   breakpoint 978-979px, kde sa sidebar presunie vedľa obsahu ako vlastný stĺpec) - bežný
   mobil na šírku (740-930px) je totiž nad 768px, takže užší rozsah by ho vynechal. */
@media (max-width:977px) {
  #brxe-7ca19a, #brxe-09ae50 {width:100% !important; max-width:100% !important;}
}
/* 2 stĺpce (hľadanie+kategórie vľavo, posledné príspevky vpravo) iba v širšom mobilnom pásme
   (mobil na šírku) - na úzkom mobile na výšku (<=480px) by sa to nezmestilo, tam zostáva
   pôvodné radenie pod sebou (.ux-sidebar vyššie, bez media query). */
@media (min-width:481px) and (max-width:977px) {
  .ux-sidebar {display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
  .ux-sidebar-block:nth-child(1) {grid-column:1; grid-row:1;}
  .ux-sidebar-block:nth-child(2) {grid-column:1; grid-row:2;}
  .ux-sidebar-block:nth-child(3) {grid-column:2; grid-row:1 / span 2;}
}
.ux-sidebar-title {font:500 18px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px; color:var(--lightblack-c); margin:0 0 12px; padding:0 0 8px; border-bottom:2px solid var(--vivino-c);}
.ux-sidebar-categories {list-style:none; margin:0; padding:0;}
.ux-sidebar-categories li {display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--lightgray-c); font:400 15px/1.3 'Barlow Semi Condensed', sans-serif;}
.ux-sidebar-categories li:last-child {border-bottom:none;}
.ux-sidebar-categories a {color:var(--lightblack-c); text-decoration:none; border-bottom:none;}
.ux-sidebar-categories a:hover {color:var(--vivino-c);}
.ux-sidebar-count {color:var(--darkgray-c); font-size:13px; flex:0 0 auto;}
.ux-sidebar-recent {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.ux-sidebar-recent li {display:flex; gap:12px; align-items:flex-start;}
.ux-sidebar-thumb {flex:0 0 70px; width:70px; height:70px; display:block; border-radius:6px; overflow:hidden;}
.ux-sidebar-thumb img {width:100%; height:100%; object-fit:cover; display:block; margin:0;}
.ux-sidebar-recent-text {display:flex; flex-direction:column; gap:4px; min-width:0;}
.ux-sidebar-recent-text a {color:var(--lightblack-c); text-decoration:none; border-bottom:none; font:500 15px/1.3 'Barlow Semi Condensed', sans-serif;}
.ux-sidebar-recent-text a:hover {color:var(--vivino-c);}
.ux-sidebar-date {color:var(--darkgray-c); font-size:13px;}

/* === BLOG KARTY ČLÁNKOV (ux_blog_sections, ux_category_posts) === */
.ux-blog-section {margin-bottom:48px;}
.ux-blog-category-desc {margin:0 0 28px; font:400 16px/1.6 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c);}
.ux-blog-section-head {display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:8px; border-bottom:2px solid var(--vivino-c);}
.ux-blog-section-title {margin:0; min-width:0; font:500 24px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px;}
/* Mobil na výšku (tablet a mobil na šírku sú OK aj s pôvodným fontom) - užší Condensed rez
   (nie Semi Condensed) + o 1px menšie, nech sa dlhšie názvy kategórií zmestia vedľa "Viac →". */
@media (max-width:480px) {
  .ux-blog-section-title {font:500 23px/1.2 'Barlow Condensed', sans-serif;}
}
.ux-blog-section-title a {color:var(--lightblack-c); text-decoration:none; border-bottom:none;}
.ux-blog-section-title a:hover {color:var(--vivino-c);}
.ux-blog-more {flex:0 0 auto; color:var(--vivino-c); font:500 14px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; text-decoration:none; border-bottom:none; white-space:nowrap;}
.ux-blog-more:hover {color:var(--darkvivino-c);}

.ux-blog-grid {display:grid; gap:24px; margin:0 0 24px;}
.ux-blog-grid-3 {grid-template-columns:repeat(3, 1fr);}
.ux-blog-grid-2 {grid-template-columns:repeat(2, 1fr);}
@media (max-width:768px) {.ux-blog-grid-3 {grid-template-columns:1fr;}}
/* -2 varianta (bez bočného menu vedľa, napr. kategória blogu) potrebuje na 2 stĺpce menej
   miesta ako -3 - breakpoint odhadom nižšie (2 karty s obrázkom + textom sa ešte zmestia). */
@media (max-width:600px) {.ux-blog-grid-2 {grid-template-columns:1fr;}}

.ux-blog-card {display:flex; flex-direction:column; min-width:0;}
.ux-blog-card-img {display:block; aspect-ratio:3/2; border-radius:42px 8px; overflow:hidden; margin-bottom:10px;}
.ux-blog-card-img img {width:100%; height:100%; object-fit:cover; display:block; margin:0; transition:transform .3s ease;}
.ux-blog-card-img:hover img {transform:scale(1.04);}
.ux-blog-card-body {display:flex; flex-direction:column; gap:6px;}
.ux-blog-card-title {margin:0; padding:0; font:500 17px/1.3 'Barlow Semi Condensed', sans-serif;}
.ux-blog-card-title a {color:var(--vivino-c); text-decoration:none; border-bottom:none;}
.ux-blog-card-title a:hover {color:var(--darkvivino-c);}
.ux-blog-card-excerpt {margin:0; color:var(--lightblack-c) !important; font-weight:400 !important; font-family:'Barlow Semi Condensed', sans-serif; font-size:15px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ux-blog-card-more {align-self:flex-start; color:var(--vivino-c); font:500 14px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; text-decoration:none; border-bottom:none;}
.ux-blog-card-more:hover {color:var(--darkvivino-c);}

.ux-blog-loadmore-wrap {text-align:center; margin:8px 0 24px;}
.ux-blog-loadmore, .ux-shop-loadmore {box-sizing:border-box; display:inline-block; height:40px; padding:6px 15px; background:#fff; color:var(--vivino-c); border:2px solid var(--vivino-c); border-radius:9999px; font:500 15px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; transition:background-color .7s ease, color .7s ease;}
.ux-blog-loadmore:hover, .ux-shop-loadmore:hover {background:var(--darkvivino-c); color:#fff;}
.ux-blog-loadmore:disabled, .ux-shop-loadmore:disabled {opacity:.6; cursor:default;}

/* Ikony (účet/hľadanie/obľúbené) - SVG dedí farbu textu cez currentColor. 34px box okolo
   22px glyfu (rovnaké pomery ako na vitalfit.sk), nech majú všetky rovnaký odstup aj s
   košíkom nižšie. */
.header-icon {display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border-radius:7px; color:var(--lightblack-c); text-decoration:none; transition:color .2s ease, background-color .2s ease;}
.header-icon svg {width:22px; height:22px;}
.header-icon:hover {color:var(--vivino-c); background:var(--lightgray-c);}

/* Mini-cart - natívny Bricks/WooCommerce element. color:var(--lightblack-c) je tu preto, že
   mini-cart je obyčajný <a> a dedil červenú z globálneho pravidla "a {color:#990000}" na
   začiatku súboru (ostatné ikony ju nededia, lebo .header-icon si farbu nastavuje sám) -
   presne preto svietil košík červeno oproti zvyšku. Ikona je font-icon, farbí sa cez color.
   width:auto + min-width necháva miesto na sumu vedľa ikony (desktop, viď nižšie). */
/* position:relative tu (nie na .mini-cart-link) - .cart-detail je jeho súrodenec, obaja sú
   deti .brxe-woocommerce-mini-cart, takže presne tu musí byť ukotvovací bod pre position:
   absolute nižšie. */
/* position:absolute tu ostáva zapnuté - toto je overená, dokázaná príčina (398px scrollWidth
   z konzoly, v normálnom toku), nechcem ju znova zaviesť naspäť len kvôli izolovaniu inej
   chyby. */
#brx-header .brxe-woocommerce-mini-cart {position:relative;}
#brx-header .cart-detail {position:absolute; top:100%; right:0; z-index:1002; width:420px; max-width:90vw; margin-top:8px; background:var(--white-c); border:1px solid var(--lightgray-c); border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.14); box-sizing:border-box; padding:20px 20px 8px;}
#brx-header .cart-detail .widget_shopping_cart_content {padding:0 !important;}

/* Názvy produktov v minikošíku - rovnako ako v košíku: normálna váha, čierna */
.woocommerce-mini-cart-item > a:not(.remove) {font-weight:400 !important; color:var(--black-c) !important;}
#brx-header .cart-detail img {max-width:100%; height:auto;}

#brx-header .mini-cart-link {display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto !important; min-width:34px; height:36px; padding:0 !important; margin:0 !important; color:var(--lightblack-c); border-bottom:none;}
#brx-header .mini-cart-link:hover {color:var(--vivino-c);}
#brx-header .mini-cart-link .cart-icon {display:inline-flex; align-items:center; justify-content:center; position:relative;}
#brx-header .mini-cart-link .cart-icon i {font-size:24px; line-height:1;}
#brx-header .cart-count {position:absolute; top:-1px; right:-5px; min-width:17px; height:17px; padding:0 4px; background:var(--vivino-c); color:var(--white-c); border-radius:50%; font:700 11px/17px 'Barlow Semi Condensed', sans-serif; text-align:center; box-sizing:border-box;}
/* Suma vedľa košíka (Bricks ju zabalí do .cart-subtotal) - farbu dedí z .mini-cart-link,
   takže sa mení spolu s ikonou aj pri hoveri */
#brx-header .mini-cart-link .cart-subtotal {font:500 16px/1 'Barlow Semi Condensed', sans-serif; white-space:nowrap;}
#brx-header .mini-cart-link .cart-subtotal .amount {color:inherit;}

/* Krížik na odobratie položky z košíka (minikošík aj stránka Košík) - nahradené SVG ikonou
   (cez mask + currentColor) namiesto textového "×" znaku, ktorý sa nedal poriadne vertikálne
   vycentrovať kvôli metrike fontu. Tmavosivá, okrúhle pozadie pri hoveri (bez posunu, box má
   pevnú veľkosť stále). V minikošíku naviac vycentrovaný na výšku celého riadku položky. */
.product-remove > a.remove,
.woocommerce-mini-cart-item > a.remove {display:inline-flex !important; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--darkgray-c) !important; font-size:0; line-height:1; background:transparent !important; text-decoration:none !important; transition:background-color .2s ease, color .2s ease;}
.product-remove > a.remove::before,
.woocommerce-mini-cart-item > a.remove::before {content:""; display:block; width:22px; height:22px; background-color:currentColor; -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiLz48L3N2Zz4=) no-repeat center/contain; mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiLz48L3N2Zz4=) no-repeat center/contain;}
.product-remove > a.remove:hover {background:var(--lightgray-c) !important; color:var(--vivino-c) !important;}
.woocommerce-mini-cart-item > a.remove:hover {background:var(--lightgray-c) !important; color:var(--vivino-c) !important;}
.woocommerce-mini-cart-item {position:relative;}
.woocommerce-mini-cart-item > a.remove {position:absolute; top:50%; right:0; transform:translateY(-50%);}

/* Rozbaľovacie vyhľadávanie - čisto CSS (checkbox hack), žiadny JS. */
.header-search {position:relative; display:inline-flex;}
/* top počíta od malej ikony lupy (jej vlastná výška), nie od celej hlavičky - ikona je
   vycentrovaná v riadku s logom/menu, takže pod ňou je ešte dosť priestoru vnútri hlavičky
   navyše (cca 30px odhadom), preto väčší odstup, nech dropdown nezasahuje do hlavičky. */
.header-search-form {display:none; position:absolute; top:calc(100% + 5px); right:0; z-index:1002; background:var(--white-c); border:1px solid var(--lightgray-c); border-radius:14px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.14);}
.header-search-toggle:checked ~ .header-search-form {display:flex;}
.header-search-form input[type="search"] {border:1px solid var(--lightgray-c); border-radius:9999px; padding:0 18px; height:44px; font-family:'Barlow Semi Condensed', sans-serif; font-size:15px; color:var(--lightblack-c); background:var(--white-c); width:260px; outline:none;}

/* Wishlist ikona v hlavičke - červený krúžok s počtom, position:relative na odkaze nech sa
   dá krúžok umiestniť oproti nemu absolútne. Skrytý cez display:none (JS), kým je 0. */
.ux-wishlist-link {position:relative;}
.ux-wishlist-count {position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:var(--vivino-c); color:var(--white-c); font-size:11px; line-height:16px; text-align:center; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500;}

/* Wishlist tlačidlo na produktovej stránke - prevzaté z vitalfit.sk, farby prepnuté na
   vivino paletu. .ux-heart je prázdne/plné srdce cez SVG v pozadí (dátová URI, keďže
   background-image nevie currentColor - farba je preto vpísaná priamo do SVG kódu nižšie). */
.ux-wishlist {margin-top:12px;}
.ux-wishlist-toggle {display:inline-flex; align-items:center; gap:8px; padding:0; background:none; border:none; font-size:15px; color:#777; cursor:pointer; transition:color .2s ease;}
.ux-wishlist-toggle:hover {color:var(--vivino-c);}
.ux-wishlist-toggle.is-active {color:var(--vivino-c);}
.ux-heart {width:18px; height:18px; flex:0 0 auto; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23777'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.6l-1-1a5.5%205.5%200%200%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .15s ease;}
.ux-wishlist-toggle.is-active .ux-heart {background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='%2394070a'%20stroke='%2394070a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.6l-1-1a5.5%205.5%200%200%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z'/%3E%3C/svg%3E") no-repeat center/contain;}
.ux-wishlist-toggle:active .ux-heart {transform:scale(1.25);}

/* Footer */
/* Basel mal kondenzované písmo nastavené vo vlastných Theme Options (nie v tomto súbore),
   to prešlo s ním - bez tejto triedy by pätička dedila predvolené (širšie) písmo Bricks
   a text by sa nezmestil na jeden riadok / do stĺpcov. Na wrapperi celej pätičky, nie iba
   na .cards, nech siaha aj na riadok s copyrightom, ktorý je mimo .cards (súrodenec). */
.vivino-footer {font-family:'Barlow Semi Condensed', sans-serif;}
/* Basel dodával globálny obrázkový reset (max-width:100%) vo vlastnom style.css, ten je
   preč spolu s ním - bez neho sa mapový obrázok (nemá vlastnú šírku v HTML) vykreslí v
   plnej pôvodnej veľkosti, pretečie svoj stĺpec v grid-e a spôsobí vodorovný posuvník
   na celej stránke. */
.vivino-footer img {max-width:100%; height:auto;}

.card {padding:20px; min-width:0; color:#aaa;} /* color = rovnaká farba ako a.whitelink, aby boli • odrážky (čistý text, dedí odtiaľto) viditeľné na tmavom pozadí */
/* Šírka riadená Bricks Containerom okolo shortcode elementu (1140px), nie touto triedou -
   pôvodných 1200px sa aj na živom webe nikdy neuplatnilo (Basel obal bol užší), takže ide
   o mŕtve pravidlo. Necháva sa bez max-width, nech ho neprepisuje s iným číslom. */
.cards {margin:0 auto; display:grid; grid-gap:40px;}
.cards {grid-template-columns:repeat(1, 1fr);} /* Mobile first approach - 1 column by default */
@media (min-width:400px) {.cards {grid-template-columns:repeat(2, 1fr);}}
@media (min-width:950px) {.cards {grid-template-columns:repeat(4, 1fr);}}

/* Platobné ikony - 100% na mobile, 80% od desktopovej šírky (951px = hranica "mobile
   landscape" použitá inde v tomto súbore), nech ostane trochu vzduchu po stranách.
   display:block namiesto pôvodného "alignright" (jadrová WP trieda s float:right) - float
   zrúca výšku svojho rodiča na nulu a nasledujúci riadok (copyright) sa vykreslí v tom
   istom mieste, presne to prekrývanie, čo bolo vidno. Bez plávania niet čo čistiť. */
.payment-icons {display:block; margin:0 auto; width:100%;}
@media (min-width:951px) {.payment-icons {width:80%;}}

/* Riadok s copyrightom - font-family fix vyššie by ho mal na desktope zmestiť sám, toto je
   poistka, ktorá to vynúti isto (na mobile sa nowrap nevynucuje, nech sa tam smie zalomiť). */
@media (min-width:951px) {.footer-copy {white-space:nowrap;}}

/* Bodka pred odkazom - riadok je teraz flex namiesto plain textu + <br>, nech sa bodka
   centruje podľa skutočnej výšky riadku, nie podľa x-height textu (vertical-align:middle na
   znaku "•" sedelo nízko, lebo veľa fontov má tento glyf posunutý dole vo vlastnom em-boxe). */
.link-row {display:flex; align-items:center; gap:.5em;}
.dot {line-height:1;}

.lightgray {color:#999; font-size:18px; line-height:normal}
/* display:inline - Bricks (na rozdiel od Basel) mení <a> na blokový/inline-block prvok
   niekde vo vlastnom jadrovom CSS; blokový potomok si vynúti zalomenie riadku pred/za sebou
   bez ohľadu na white-space:nowrap na rodičovi (.footer-copy), preto sa odkaz "vivino.sk"
   trhal na samostatný riadok. Vo .link-row (flex) toto display nemá vplyv, tam vládne flex. */
a.whitelink {display:inline; color:#aaa; font-size:18px; line-height:normal}
a.whitelink:hover {color:#fff}
.aligncenter {text-align:center}

.map-preview {position:relative; width:100%; aspect-ratio:261/217; display:block; overflow:hidden;}
.map-preview img {width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; z-index:0; position:relative;}
.map-preview:hover img {transform:scale(1.05);}
.map-preview::before {content:""; position:absolute; inset:0; background:rgba(60,0,0,0.55); opacity:0; transition:opacity 0.4s ease; z-index:1;}
.map-preview span {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:18px; text-align:center; opacity:0; transform:translateY(10px); transition:opacity 0.4s ease,transform 0.4s ease; z-index:2; pointer-events:none;}
.map-preview:hover::before {opacity:1;}
.map-preview:hover span {opacity:1; transform:translateY(0);}

/* Ratings - zlatá medaila s plastickým číslom */
.rating_bar {display:block; color:var(--vivino-c); font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; font-size:18px; line-height:normal; margin:0; padding:0;}
.rating_container {display:flex; flex-wrap:wrap; gap:16px; margin:9px 0 14px;}
.rating_box {display:flex; flex-direction:column; align-items:center; width:92px; text-align:center;}
.rating_medal {width:92px; height:92px; border-radius:50%; background-image:var(--wpr-bg-54a23a7d-0a74-4c3b-8f8e-78a8f4a12b60); background-size:cover; background-position:center; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 10px 2px rgba(237,196,120,.65);}
.rating_points {position:relative; top:5px; left:1px; font-size:30px; font-weight:800; line-height:1; color:#6b4a14; text-shadow:0 1px 0 rgba(255,248,220,.9), 0 -1px 1px rgba(0,0,0,.35), 1px 1px 1px rgba(255,255,255,.35);}
.rating_max {position:relative; top:3px; left:1px; font-size:13px; font-weight:500; line-height:1; color:#746551; margin-top:2px;}
.rating_who {font-family:Georgia, "Times New Roman", serif; font-weight:400; color:var(--vivino-c); font-size:16px; line-height:1.2; margin-top:7px; max-width:92px;}
.coupon-wrapper {display:block; min-height:65px; width:300px; margin-top:-10px; margin-bottom:15px; overflow:hidden;}
.coupon-wrapper img {max-width:100%; height:auto; aspect-ratio:300/65;}

/* read more */
.read_more_hidden {display:none;}
.read_more_hidden.read_more_hidden--open {display:block;}
.read-link {display:inline-block; margin:0; padding-left:10px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; text-transform:uppercase; color:var(--darkvivino-c);}

/* === Theme adaptation === */
.single-product-content .basel-show-product-gallery {background-color:rgba(0,0,0,0) !important; box-shadow:0 0 0 rgba(0,0,0,0) !important;} /*lupa*/
.stock {display:inline-block !important; text-transform:uppercase !important; font-size:14px !important; font-weight:500 !important; color:#736C66 !important; padding:2px 10px !important; border:1px solid #736C66 !important; border-radius:6px; margin-top:25px !important;} /* na sklade */
.stock.in-stock {background:#d3e7be !important; border-color:#8fae6e !important; color:#3f5c2a !important;}

/* H1 produktu v logo-červenej */
.single-product h1 {color:var(--vivino-c) !important; text-transform:none !important; text-align:left !important;}

/* Cena na produktovej stránke - 2x väčšia, medzera k "Skladom" pod ňou zmenšená o 20px */
.brxe-product-price .price {font-size:2em !important; margin-bottom:-20px !important;}
.brxe-product-price .price .woocommerce-price-suffix {font-size:25px !important; font-weight:400 !important;}
.brxe-product-price .price del {position:relative; display:inline-block; font-weight:400; color:var(--darkgray-c); text-decoration:none; margin-right:6px;}
.brxe-product-price .price del::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:#b51218; transform:rotate(-12deg);}
.brxe-product-price .price ins {text-decoration:none; color:var(--vivino-c);}

.home_container3 {float:left; margin:15px 20px 25px 0; padding:0; width:32%; overflow:hidden; padding-right:}(30px, 0)}
.izoom .w3603 {width:100%;}

.woocommerce li.product {vertical-align:top; display:inline-block; float:none;}
.woocommerce ul.products {text-align:center;}

/* === VÝPIS PRODUKTOV (shortcode [products category="..."] na stránkach odrôd/vinárstiev/oblastí) === */
ul.products {display:grid !important; grid-template-columns:repeat(3, 1fr); gap:28px; list-style:none; margin:16px 0 0 !important; padding:0 !important;}
@media (max-width:768px) {ul.products {grid-template-columns:repeat(2, 1fr);}}

/* === Vlastný slider (súvisiace/podobné/odporúčané produkty) - žiadny plugin, čisté
   scroll-snap + šípky. Swipe prstom/myšou funguje zadarmo vďaka natívnemu scroll-snap. === */
.ux-pslider-wrap {margin:20px 0;}
.ux-pslider {position:relative; display:flex; align-items:center; gap:10px;}
ul.products.ux-pslider-track {display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 2px 10px !important; margin:0 !important;}
.ux-pslider-track::-webkit-scrollbar {display:none;}
ul.products.ux-pslider-track > li.product {scroll-snap-align:start; flex:0 0 calc(25% - 15px) !important; min-width:200px;}
@media (max-width:768px) {ul.products.ux-pslider-track > li.product {flex:0 0 calc(50% - 10px) !important; min-width:150px;}}
.ux-pslider-arrow {flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--lightgray-c); background:#fff; color:var(--darkgray-c); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:background-color .2s ease;}
.ux-pslider-arrow:hover {background:var(--lightgray-c);}

/* Mobil - šípky prekryté ponad obrázkovú časť karty (nie vedľa nej vo flex riadku), nech
   produkty dostanú celú šírku, ktorú predtým brali kolieska + medzery (~92px). Obrázok má
   pevnú výšku 300px, track padding-top 4px -> stred obrázka cca 154px od vrchu .ux-pslider. */
@media (max-width:768px) {
  .ux-pslider-arrow {position:absolute; top:154px; transform:translateY(-50%); z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.2);}
  .ux-pslider-arrow--prev {left:4px;}
  .ux-pslider-arrow--next {right:4px;}
}

/* "Podobné produkty" (plugin WebToffee) používa ten istý tag ul.products ako náš archív -
   naše pravidlo vyššie mu prebíjalo plugin vlastný počet stĺpcov. Nech má vlastný, 4 v rade. */
.wt-related-products ul.products {grid-template-columns:repeat(4, 1fr) !important;}
@media (max-width:768px) {.wt-related-products ul.products {grid-template-columns:repeat(2, 1fr) !important;}}

/* [ux_wishlist] - 4 v rade (nie 3 ako archív), na plnú šírku kontajnera, bez medzery hore.
   Stránka /oblubene-vina/ je vložená do zdieľanej šablóny "Single Page" (úzky kontajner pre
   bežný textový obsah) - :has() nech zacieli LEN na túto stránku (podľa prítomnosti
   #ux-wishlist-list), nie na šablónu plošne pre všetky stránky, čo ju používajú. */
@media (min-width:900px) {
  body:has(#ux-wishlist-list) .brxe-container {max-width:1280px !important;}
}
#ux-wishlist-list {width:100%; max-width:none;}
#ux-wishlist-list ul.products {grid-template-columns:repeat(4, 1fr) !important; margin-top:0 !important;}
@media (max-width:768px) {#ux-wishlist-list ul.products {grid-template-columns:repeat(2, 1fr) !important;}}

/* Slider (Owl Carousel) prerozdelí <li> do vlastných .owl-item divov a obíde tým ancestor
   "ul.products", na ktorý mieri pravidlo vyššie pre .ux-product-footer - zopakované tu
   nezávisle od ul.products. */
.wt-related-products .ux-product-footer {display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:1px !important; width:100%; margin-top:auto;}
ul.products li.product {display:flex; flex-direction:column; align-items:center; width:auto !important; margin:0 0 25px !important; float:none !important; text-align:center;}
ul.products li.product img {width:150px; height:300px; object-fit:contain; border-radius:12px; margin:0 auto 12px;}
ul.products li.product .woocommerce-loop-product__title {margin:0; padding:0; font:400 18px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--vivino-c); text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px;}
ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {color:#000000; text-shadow:0 2px 10px rgba(237,196,120,.75);}
ul.products li.product .ux-product-footer {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:100%; margin-top:auto;}
ul.products li.product .price {margin-top:-5px; font-size:25px; font-weight:400; color:var(--black-c); text-align:center;}
ul.products li.product .price del {position:relative; display:inline-block; font-weight:400; color:var(--darkgray-c); text-decoration:none; margin-right:6px;}
ul.products li.product .price del::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:#b51218; transform:rotate(-12deg);}
ul.products li.product .price ins {text-decoration:none; color:var(--vivino-c);}
ul.products li.product .price .woocommerce-price-suffix {display:none;}
ul.products li.product .button, ul.products li.product a.add_to_cart_button {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:7px 15px 5px; font:500 14px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:#fff !important; background:var(--darkgray-c) !important; border:none !important; border-radius:9999px !important; box-shadow:0 3px 8px rgba(74,72,68,.3); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; text-decoration:none;}
ul.products li.product .button:hover, ul.products li.product a.add_to_cart_button:hover {background:#5a8419 !important; box-shadow:0 6px 16px rgba(117,168,34,.32); transform:translateY(-2px);}

/* === SHOP FILTER (sidebar + mobil) - [ux_shop_filters] + [ux_shop_grid] === */
.ux-shop-filters {width:100%; background:var(--lightgray-c); padding:0 0 14px; border-radius:12px; box-sizing:border-box;}
.ux-shop-mobile-bar {display:none; align-items:center; gap:12px; margin:0 0 16px;}
.ux-shop-filter-toggle {display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--vivino-c); color:#fff; border:none; border-radius:9999px; font:500 14px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; cursor:pointer;}
/* Tlačidlá "x minimalizovať filter" nad/pod panelom - skryté defaultne (nielen v media query),
   nech sa neobjavia na desktope - predtým mali display iba definovaný vnútri @media, čím im
   na desktope ostal browser default (viditeľné). */
.ux-shop-filter-minimize {display:none;}
.ux-shop-result-bar {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; flex-wrap:nowrap;}
.ux-shop-sort-wrap {display:flex; align-items:center; gap:8px; flex:0 0 auto; font:400 15px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--darkgray-c); white-space:nowrap;}
.ux-shop-result-count {flex:0 0 auto; font:400 15px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--darkgray-c); white-space:nowrap;}
.ux-shop-sort {width:auto; max-width:180px; -webkit-appearance:none; appearance:none; font:400 13px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--darkgray-c); border:1px solid var(--darkgray-c); border-radius:9999px; padding:4px 26px 4px 10px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4844' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 8px center; background-size:12px; outline:none;}
.ux-shop-sort:focus {outline:none; border:1px solid var(--darkgray-c); border-radius:12px 12px 0 0;}
.ux-shop-grid.ux-shop-loading {opacity:.5; pointer-events:none;}

.ux-shop-filters-body {display:flex; flex-direction:column; gap:10px;}
.ux-filter-group {border-bottom:none; padding-bottom:0;}
.ux-filter-group-toggle, .ux-filter-select label, .ux-filter-price > label {display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 14px; margin:0 0 6px; background:var(--darkgray-c); border:none; border-radius:0; cursor:default; font:500 15px/1.3 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:#fff; box-sizing:border-box;}
.ux-filter-group-toggle {cursor:pointer;}
.ux-filter-price > label {margin-bottom:11px;}
.ux-filter-toggle-icon {flex:0 0 auto; width:16px; height:16px; position:relative;}
.ux-filter-toggle-icon::before, .ux-filter-toggle-icon::after {content:""; position:absolute; top:50%; left:50%; background:#fff; transform:translate(-50%, -50%);}
.ux-filter-toggle-icon::before {width:10px; height:2px;}
.ux-filter-toggle-icon::after {width:2px; height:10px; transition:transform .2s ease;}
.ux-filter-group--open .ux-filter-toggle-icon::after {transform:translate(-50%, -50%) scaleY(0);}
.ux-filter-group-body {display:none; flex-direction:column; gap:4px; padding:0 1px 0 10px;}
.ux-filter-group--open .ux-filter-group-body {display:flex;}
.ux-filter-check {display:flex; align-items:center; gap:8px; font:400 15px/1.3 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); cursor:pointer;}
.ux-filter-check input {width:16px; height:16px; accent-color:var(--vivino-c); cursor:pointer;}

.ux-filter-select {display:flex; flex-direction:column; gap:0;}
.ux-filter-select select {width:calc(100% - 20px); margin:0 10px; font:400 14px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); border:1px solid #fff; border-radius:8px; padding:9px 10px; background:#fff; box-sizing:border-box; outline:none;}
.ux-filter-select select:focus {outline:none; border-color:#fff;}

.ux-price-inputs {display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 10px;}
.ux-price-label {color:var(--darkgray-c); font:400 14px/1.2 'Barlow Semi Condensed', sans-serif;}
.ux-price-group {display:flex; align-items:stretch; height:24px; border:1px solid #b8b3a5; border-radius:6px; overflow:hidden; background:#fff; box-sizing:border-box;}
.ux-price-number {width:45px; border:none; outline:none; padding:0 0 0 6px; font:400 14px/22px 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); background:#fff; box-sizing:border-box;}
.ux-price-euro {display:flex; align-items:center; justify-content:center; width:20px; background:var(--lightgray-c); color:var(--darkgray-c); font-size:13px; border-left:1px solid #b8b3a5; box-sizing:border-box;}

@media (min-width:901px) {
  .ux-shop-content {margin-left:25px;}
}
@media (max-width:900px) {
  .ux-shop-mobile-bar {display:flex;}
  /* Predtým sa skrýval iba vnútorný -body, ale samotný .ux-shop-filters rámček (so sivým
     pozadím) ostával viditeľný aj prázdny - to bol ten "prázdny sivý pás" nad tlačidlom
     Filtrovať. Teraz sa skrýva celý panel, a pri otvorení má margin-bottom, nech sa nelepí
     priamo na tlačidlo pod ním. */
  .ux-shop-filters {display:none;}
  body.ux-shop-filters-open .ux-shop-filters {display:block; margin-bottom:0;}
  .ux-shop-filters-body {display:flex;}

  /* Tlačidlá "x minimalizovať filter" nad aj pod panelom filtrov - viditeľné iba keď je
     panel otvorený, nech má používateľ vždy poruke spôsob, ako filter zavrieť bez
     scrollovania. Horný pruh (#ux-shop-mobile-bar) sa v tom čase schová úplne - jeho úlohu
     (zavretie panelu) preberajú tieto dve tlačidlá priamo pri paneli. */
  body.ux-shop-filters-open .ux-shop-filter-minimize {display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; font:400 14px/1.3 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); cursor:pointer;}
  .ux-shop-filter-minimize--top {margin:0 0 12px;}
  .ux-shop-filter-minimize--bottom {margin:12px 0 15px;}
  .ux-shop-filter-minimize svg {flex:0 0 auto; width:13px; height:13px;}
  .ux-shop-filter-minimize:hover {color:var(--vivino-c);}
  .ux-shop-filter-minimize:hover svg path {stroke:var(--vivino-c);}
  body.ux-shop-filters-open #ux-shop-mobile-bar {display:none;}

  /* Súhrn aktívnych filtrov (zobrazí sa namiesto tlačidla Filtrovať, keď je panel zatvorený
     a aspoň jeden filter je aktívny) - rovnaké sivé pozadie ako samotný panel filtrov. */
  .ux-shop-active-filters {display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; background:var(--lightgray-c); border-radius:12px; padding:12px 14px; box-sizing:border-box;}
  .ux-shop-active-filters-label {flex:0 0 auto; font:700 14px/1.3 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); cursor:pointer;}
  .ux-shop-filter-pill {display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:#fff; border:1px solid var(--darkgray-c); border-radius:9999px; font:400 13px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); cursor:pointer;}
  .ux-shop-filter-pill svg {flex:0 0 auto; width:11px; height:11px;}
  .ux-shop-filter-pill:hover {background:#f6f5f1; color:var(--vivino-c);}
  .ux-shop-filter-clear {flex:0 0 auto; background:none; border:none; padding:0; font:400 13px/1.2 'Barlow Semi Condensed', sans-serif; color:var(--vivino-c); text-decoration:underline; cursor:pointer;}
}

/* Tla�idlo "Prida� do ko��ka" a mno�stvo */
form.cart {display:flex; align-items:center;}
.single_add_to_cart_button {display:inline-flex; align-self:center; align-items:center; justify-content:center; gap:8px; height:40px; margin:0 !important; padding:0; font:500 18px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:#fff !important; background:var(--darkgray-c) !important; border:none !important; border-radius:8px !important; box-shadow:0 3px 8px rgba(74,72,68,.3); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; text-decoration:none; cursor:pointer; box-sizing:border-box;}
.single_add_to_cart_button:hover, .single_add_to_cart_button:focus {background:#5a8419 !important; box-shadow:0 6px 16px rgba(117,168,34,.32); transform:translateY(-2px);}

/* === KOŠÍK / POKLADŇA - tlačidlá === */
/* Sekundárne tlačidlá (Pokračovať k pokladni, Aktualizovať košík, Uplatniť poukaz) - rovnaký
   pill vzor ako "Pridať do košíka" na produkte. */
.woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart-form .button {display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:#fff !important; background:var(--darkgray-c) !important; border:none !important; border-radius:8px !important; box-shadow:0 3px 8px rgba(74,72,68,.3); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; text-decoration:none; cursor:pointer; box-sizing:border-box;}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart-form .button:hover {background:#5a8419 !important; box-shadow:0 6px 16px rgba(117,168,34,.32); transform:translateY(-2px);}
.woocommerce .wc-proceed-to-checkout a.checkout-button {width:100% !important; box-sizing:border-box !important;}
.woocommerce-cart-form .button[disabled], .woocommerce-cart-form .button:disabled {opacity:.5; cursor:default;}

/* Objednať záväzne - hlavné (finálne) tlačidlo, odlíšené logo-červenou, zelená pri hoveri
   rovnako ako všade inde na stránke. */
.woocommerce-checkout #place_order {display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:#fff !important; background:var(--darkgray-c) !important; border:none !important; border-radius:8px !important; box-shadow:0 3px 8px rgba(74,72,68,.3); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; cursor:pointer; box-sizing:border-box;}
.woocommerce-checkout #place_order:hover, .woocommerce-checkout #place_order:focus {background:#5a8419 !important; box-shadow:0 6px 16px rgba(117,168,34,.32); transform:translateY(-2px);}
form.cart .quantity {display:inline-flex; align-items:stretch; height:40px; margin-right:18px; padding:0 !important; overflow:hidden; box-sizing:border-box;}
form.cart .quantity input.qty {height:100%; margin:0; padding:0; text-align:center; font:400 22px/1 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); border:none; outline:none; background:#fff; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:textfield; appearance:none;}
form.cart .quantity input.qty::-webkit-outer-spin-button, form.cart .quantity input.qty::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
form.cart .quantity .action {display:flex; align-items:center; justify-content:center; width:40px; height:100%; margin:0; padding:0; background:#756f6a; color:#fff; cursor:pointer; transition:background-color 0.6s ease; box-sizing:border-box;}
form.cart .quantity .action svg {width:28px; height:28px;}
form.cart .quantity .action.minus {border-right:1px solid var(--darkgray-c); border-top-left-radius:8px !important; border-bottom-left-radius:8px !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;}
form.cart .quantity .action.plus {border-left:1px solid var(--darkgray-c); border-top-right-radius:8px !important; border-bottom-right-radius:8px !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;}
form.cart .quantity .action:hover {background:#a19a93;}
form.cart .quantity input.qty {border-radius:0 !important;}

/* === KOŠÍK - riadok množstva v tabuľke (rovnaké HTML ako na produkte, ale iný formulár
   ".woocommerce-cart-form" namiesto "form.cart" - Bricks mu bez tohto dáva vlastný veľmi
   široký rámik, preto rovnaký štýl zopakovaný pre tento kontext). */
.woocommerce-cart-form .quantity {display:inline-flex; align-items:stretch; height:40px; border:1px solid #b4b2ab !important; border-radius:8px !important; padding:0 !important; overflow:hidden; box-sizing:border-box;}
.woocommerce-cart-form .quantity input.qty {width:50px !important; height:100%; margin:0; padding:0; text-align:center; font:400 20px/1 'Barlow Semi Condensed', sans-serif; color:var(--lightblack-c); border:none !important; border-radius:0 !important; outline:none; background:#fff; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:textfield; appearance:none;}
.woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
.woocommerce-cart-form .quantity .action {display:flex; align-items:center; justify-content:center; width:36px; height:100%; margin:0; padding:0; background:#fff; color:var(--black-c); cursor:pointer; transition:background-color 0.6s ease; box-sizing:border-box;}
.woocommerce-cart-form .quantity .action svg {width:24px; height:24px;}
.woocommerce-cart-form .quantity .action.minus {border-right:1px solid #b4b2ab; border-top-left-radius:8px !important; border-bottom-left-radius:8px !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;}
.woocommerce-cart-form .quantity .action.plus {border-left:1px solid #b4b2ab; border-top-right-radius:8px !important; border-bottom-right-radius:8px !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;}
.woocommerce-cart-form .quantity .action:hover {background:var(--lightgray-c);}

/* Názov produktu v košíku - čierny, nie tučný/červený */
.woocommerce-cart-form .product-name a {font-weight:400 !important; color:var(--black-c) !important;}

/* WooCommerce hlášky (napr. "Zóna priradená zákazníkovi...") - jemný zelený chip */
.woocommerce-message, .woocommerce-info {background:#f1fcea !important; border:1px dashed #bdd9ac !important; border-radius:8px !important; color:#89b174 !important; outline:none !important; margin-bottom:10px !important; padding:15px 20px !important; box-sizing:border-box;}
.woocommerce-error {border-radius:8px !important; border:1px dashed #e3a1a1 !important; outline:none !important; margin-bottom:10px !important;}
.woocommerce-message:focus, .woocommerce-info:focus {outline:none !important; box-shadow:none !important;}

/* Medzisúčet v košíku doprava */
.woocommerce-cart-form .product-subtotal {text-align:right;}

/* Medzery medzi stĺpcami riešené čisto paddingom, nie šírkou stĺpca (width:1% kolidovalo s
   "shop_table_responsive" pevným rozložením tabuľky a schovalo obrázok). */
.woocommerce-cart-form .product-thumbnail {padding:15px 20px 15px 0 !important;}
.woocommerce-cart-form .product-quantity {padding:15px 15px 15px 20px !important; width:1% !important; white-space:nowrap;}

/* Mobil (<=768px) - tabuľka košíka sa namiesto 6 stĺpcov vedľa seba (nezmestí sa to) prerobí
   na CSS Grid: obrázok fľaše naľavo cez celú výšku karty, zvyšok (meno/cena/počet/
   medzisúčet) sa stackuje vpravo vedľa neho - presne tam, kde je ešte dosť miesta.
   Padding okolo stránky už dáva Bricks kontajner (opravené v builderi, viď komentár nižšie
   pri .woocommerce-order) - tu bola predtým ešte aj CSS záplata navyše, ktorá sa s ním
   sčítavala (15+15=30px), preto odstránená. */
@media (max-width:768px) {
  .woocommerce-cart-form thead {display:none;}
  .woocommerce-cart-form table.cart,
  .woocommerce-cart-form tbody {display:block; width:100%;}
  .woocommerce-cart-form tr.cart_item {
    display:grid !important;
    grid-template-columns:90px 1fr auto;
    grid-template-rows:auto auto auto auto;
    column-gap:15px;
    padding:15px 0;
    border-bottom:1px solid var(--lightgray-c);
    position:relative;
  }
  .woocommerce-cart-form tr.cart_item td,
  .woocommerce-cart-form tr.cart_item th {
    display:block !important; width:auto !important; max-width:none !important;
    padding:0 !important; border:none !important; text-align:left !important;
  }
  .woocommerce-cart-form .product-thumbnail {grid-column:1; grid-row:1 / -1; align-self:start;}
  .woocommerce-cart-form .product-thumbnail img {width:90px !important; height:180px !important; object-fit:contain;}
  .woocommerce-cart-form .product-name {grid-column:2 / span 2; grid-row:1;}
  .woocommerce-cart-form .product-price {grid-column:2 / span 2; grid-row:2;}
  .woocommerce-cart-form .product-quantity {grid-column:2; grid-row:3;}
  .woocommerce-cart-form .product-remove {grid-column:3; grid-row:3; justify-self:end; align-self:center;}
  .woocommerce-cart-form .product-subtotal {grid-column:2 / span 2; grid-row:4; font-weight:600;}
}

/* Prihlásenie - rovnaká šírka/zarovnanie ako box "Nemáte ešte účet?" pod ním (ten má svoj
   vlastný inline <style> na stránke s rovnakými hodnotami - zámerne zjednotené). */
.woocommerce-form-login {width:500px; max-width:90%; margin:-25px auto 0 auto; box-sizing:border-box;}
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce:not(:has(form)) > .woocommerce-message,
.woocommerce:not(:has(form)) > .woocommerce-info {width:500px; max-width:90%; margin-left:auto !important; margin-right:auto !important;}
.woocommerce:not(:has(form)) > p {width:500px; max-width:90%; margin-left:auto; margin-right:auto;}
.order-again {margin-top:20px;}

/* Breakpoint-gap bug (Bricks Tablet padding do ~979px, Desktop šírka/padding až od ~1140px,
   medzi tým nič) - pôvodne tu bola CSS záplata cez konkrétne ID kontajnerov na košíku,
   pokladni, blogu aj kategóriách vína. Príčina sa našla a opravila priamo v Bricks (pole
   "Šírka" nastavené správne pre všetky breakpointy, nielen Desktop) vo všetkých šablónach
   okrem hlavičky/pätičky - záplata už nie je potrebná nikde, zmazaná. */

/* "Mohlo by vás zaujímať" slider za košíkom (plný aj prázdny) - rovnaký 15px štandard,
   scoped len na kontext za .woocommerce (nedotkne sa homepage/produktového sliderov).
   .brxe-container (nie .brxe-shortcode) + .woocommerce ako potomok (nie priame dieťa) -
   slider je súrodencom vonkajšieho kontajnera, nie vnoreného shortcode-u s košíkom. */
.brxe-container:has(.woocommerce) ~ .brxe-shortcode .ux-pslider-wrap {padding-left:15px; padding-right:15px; box-sizing:border-box;}

/* "Mohlo by vás zaujímať" lišta v košíku (plný aj prázdny) - väčší odstup nad ňou, len tu
   (globálne .fullbar margin-top je 30px, tu +25px = 55px). */
.brxe-container:has(.woocommerce) ~ .fullbar {margin-top:55px !important;}

/* Zelené/červené hlášky v pokladni majú z vnútorného .brxe-container padding 20px z každej
   strany (1140-1100=40), zatiaľ čo všetko ostatné na stránke ide na plných 1140px - na
   desktope ich "vybijeme" von presne o tento rozdiel, nech sedia na rovnakú šírku. */
@media (min-width:1171px) {
  .before-checkout .woocommerce-message,
  .before-checkout .woocommerce-info,
  .before-cart .woocommerce-message,
  .before-cart .woocommerce-info,
  .woocommerce-checkout .woocommerce-message,
  .woocommerce-checkout .woocommerce-info,
  .woocommerce-checkout .woocommerce-error,
  .woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-message {margin-left:-20px !important; margin-right:-20px !important; width:calc(100% + 40px) !important;}
}
.woocommerce-ResetPassword.lost_reset_password {width:500px; max-width:90%; margin:25px auto 0 auto; padding:30px; border:1px solid #ddd; border-radius:10px; box-sizing:border-box;}
.woocommerce-ResetPassword.lost_reset_password .input-text {width:100%; box-sizing:border-box;}
@media (max-width:768px) {
  .woocommerce-ResetPassword.lost_reset_password {width:90%; max-width:90%; border-radius:8px;}
}
@media (max-width:768px) {
  .woocommerce-form-login {width:90%; max-width:90%;}
}

/* === MÔJ ÚČET - bočné menu v štýle [ux_shop_filters] (svetlosivý box, biele "pill"
   riadky vnútri, aktívna položka červená). === */
.woocommerce:has(> .woocommerce-MyAccount-navigation) {display:flex; align-items:flex-start; gap:30px;}
.woocommerce-MyAccount-navigation {flex:0 0 220px; width:220px; background:var(--lightgray-c); border-radius:12px; padding:10px; box-sizing:border-box;}
.woocommerce-MyAccount-content {flex:1 1 auto; min-width:0;}
@media (max-width:768px) {
  .woocommerce:has(> .woocommerce-MyAccount-navigation) {flex-direction:column;}
  .woocommerce-MyAccount-navigation {flex:0 0 auto; width:100%;}

  /* Notice box ("Potvrďte e-mailovú adresu" a pod.) vnútri Môj účet - na plnú šírku,
     tlačidlo pod text namiesto vedľa neho (predtým pretekalo mimo viditeľnú oblasť). */
  .woocommerce-MyAccount-content .woocommerce-info,
  .woocommerce-MyAccount-content .woocommerce-message {display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100% !important; max-width:100% !important;}

  /* Tabuľka objednávok - rovnaký princíp ako košík: z tabuľky vedľa seba na karty pod sebou,
     popisky stĺpcov (Objednávka/Dátum/Stav/...) z existujúceho data-title atribútu. */
  .woocommerce-orders-table thead {display:none;}
  .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr {display:block; width:100%;}
  .woocommerce-orders-table tr {margin-bottom:15px; border:1px solid var(--lightgray-c); border-radius:8px; overflow:hidden;}
  .woocommerce-orders-table td, .woocommerce-orders-table th {display:flex; justify-content:space-between; align-items:center; gap:10px; width:auto !important; max-width:none !important; padding:10px 14px !important; border:none !important; border-bottom:1px solid var(--lightgray-c); text-align:right;}
  .woocommerce-orders-table tr > :last-child {border-bottom:none;}
  .woocommerce-orders-table td::before, .woocommerce-orders-table th::before {content:attr(data-title); font-weight:600; text-align:left;}
  .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {justify-content:flex-start; gap:10px;}
  .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before {display:none;}
}
.woocommerce-MyAccount-navigation ul {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.woocommerce-MyAccount-navigation-link a {display:block; padding:10px 14px; background:#fff; border-radius:8px; font:500 15px/1.3 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; color:var(--lightblack-c); text-decoration:none; transition:background-color .2s ease, color .2s ease;}
.woocommerce-MyAccount-navigation-link a:hover {background:var(--darkgray-c); color:#fff;}
.woocommerce-MyAccount-navigation-link.is-active a {background:var(--vivino-c); color:#fff;}

/* Sekundárne outline pill tlačidlá - "Aktualizovať košík", "Uplatniť zľavový kód",
   "Použiť" (darčeková karta), "Zobraziť košík" (minikošík) - všetky jedno a to isté
   pravidlo, nech sa menia na jednom mieste naraz. Svetlý outline pill, odlíšené od
   hlavných tmavých tlačidiel. */
.woocommerce-cart-form .button[name="update_cart"],
.button[name="apply_coupon"],
#pwgc-redeem-button,
.wc-backward,
.woocommerce-message a.wc-forward,
.woocommerce-error a.wc-forward,
.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout),
.woocommerce-MyAccount-content .button,
.woocommerce-form-login__submit,
.woocommerce-ResetPassword.lost_reset_password button,
.restore-item {display:inline-flex !important; align-items:center; justify-content:center; height:40px; padding:0 24px; background:#fff !important; color:var(--darkgray-c) !important; border:2px solid #c9c4b8 !important; border-width:2px !important; border-radius:9999px !important; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; text-decoration:none !important; box-shadow:none !important; transform:none !important; cursor:pointer;}
/* Na úzkom mobile vie WooCommerce tieto tlačidlá natiahnuť na celú šírku (width:100% z jeho
   vlastného CSS) - prebíjame späť na šírku podľa textu. Vyššia špecifickosť (.actions > / .coupon)
   aj poistka pre flex-stretch (align-self), nielen samotný width. */
@media (max-width:768px) {
  .woocommerce-cart-form .button[name="update_cart"],
  .button[name="apply_coupon"],
  .woocommerce-cart-form .actions > .button,
  .woocommerce-cart-form .actions .coupon .button {width:auto !important; max-width:none !important; flex:0 0 auto !important; align-self:flex-start !important; display:inline-flex !important;}
}

/* "Sumár košíka" (Medzisúčet/Cena spolu) - bez tejto úpravy sa štítok a suma na úzkom mobile
   zlepia bez medzery (tabuľka nemá default border-spacing). Riadok "Doprava" s rozbaľovacím
   zoznamom nechávame netknutý, ten sa zalamuje inak a funguje. */
@media (max-width:768px) {
  .cart_totals .cart-subtotal,
  .cart_totals .order-total {display:flex !important; justify-content:space-between; align-items:baseline; gap:10px;}
}
.woocommerce-cart-form .button[name="update_cart"]:hover,
.button[name="apply_coupon"]:hover,
#pwgc-redeem-button:hover,
.wc-backward:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-error a.wc-forward:hover,
.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-ResetPassword.lost_reset_password button:hover,
.restore-item:hover {background:var(--lightgray-c) !important; color:var(--darkgray-c) !important; border-color:var(--darkgray-c) !important; border-width:2px !important; box-shadow:none !important; transform:none !important;}

/* "Pokladňa" v minikošíku - hlavné (primárne) tmavé pill tlačidlo, rovnaké ako "Objednať
   a zaplatiť"/"Pridať do košíka" */
.woocommerce-mini-cart__buttons a.checkout {display:inline-flex !important; align-items:center; justify-content:center; height:40px; padding:0 24px; background:var(--darkgray-c) !important; color:#fff !important; border:none !important; border-radius:9999px !important; font:500 16px/1.2 'Barlow Semi Condensed', sans-serif; text-transform:uppercase; letter-spacing:.3px; text-decoration:none !important; box-shadow:0 3px 8px rgba(74,72,68,.3); transition:background-color .2s ease; cursor:pointer;}
.woocommerce-mini-cart__buttons a.checkout:hover {background:#5a8419 !important;}

/* Karta minikošíka - širšia, o niečo menší padding */
.woocommerce-mini-cart__buttons {display:flex; gap:10px;}
.woocommerce-mini-cart__buttons a {flex:1;}

/* Pole zľavového kódu - rovnaký radius v pokoji aj pri hoveri/focuse, okraj pri hoveri sivý
   ako je pozadie tlačidla "Uplatniť zľavový kód" */
/* Jednotný štýl pre všetky textové polia na celej stránke - 1px svetlosivý okraj v pokoji,
   1px tmavosivý pri hoveri/focuse, vždy zaoblenie 8px. */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], textarea, select {
  border:1px solid #ccc !important;
  border-radius:8px !important;
  outline:none;
}
input[type="text"]:hover, input[type="text"]:focus,
input[type="email"]:hover, input[type="email"]:focus,
input[type="tel"]:hover, input[type="tel"]:focus,
input[type="number"]:hover, input[type="number"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
input[type="search"]:hover, input[type="search"]:focus,
input[type="url"]:hover, input[type="url"]:focus,
textarea:hover, textarea:focus,
select:hover, select:focus {
  border:1px solid #4a4844 !important;
  border-radius:8px !important;
  outline:none;
}

/* "Kliknite sem pre zadanie kódu" - tmavosivá namiesto červenej, nech nepôsobí kŕiklavo na
   zelenom pozadí hlášky */
.showcoupon {color:var(--darkgray-c) !important; font-weight:400 !important;}

/* Súhlas s obchodnými podmienkami - text aj odkaz rovnakou krvavočervenou (odkaz je aj tak
   podčiarknutý, netreba ho farebne odlišovať) */
.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-terms-and-conditions-checkbox-text a {color:#8a2020 !important;}

/* === POKLADŇA - dvojstĺpcové rozloženie (prevzaté z vitalfit, rovnaký vzor) ===
   Kľúčové: .woocommerce-NoticeGroup (vrátane tej, čo WooCommerce vlastným JS vloží po AJAX
   prepočte dopravy/zóny) musí mať flex:0 0 100%, inak sa pri predvolenom flex správaní
   (align-items:stretch) roztiahne na celú výšku vedľa formulára. */
@media (min-width:769px) {
  .woocommerce-checkout form.checkout {display:flex !important; flex-flow:row wrap; column-gap:4%; align-items:flex-start; width:100% !important;}
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {flex:0 0 100%;}
  .woocommerce-checkout form.checkout > #customer_details {flex:0 1 52%; max-width:52%; float:none;}
  .woocommerce-checkout form.checkout > div:has(#order_review) {flex:0 1 44%; max-width:44%; float:none;}
}
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 {float:none; width:100%;}
.woocommerce-checkout #order_review {background:#fafafa; border:1px solid #eee; border-radius:12px; padding:18px; box-sizing:border-box;}

/* AJAX dopočet (~1s po načítaní) vloží rovnakú "Zóna priradená..." hlášku ešte raz - zbytočné
   zopakovanie tej istej informácie, skrývame to. */
.woocommerce-NoticeGroup-updateOrderReview {display:none !important;}

/* Darčeková karta v košíku - do jedného riadku, tlačidlo "Použiť" štýlované spoločne vyššie */
#pwgc-redeem-gift-card-container {display:flex !important; align-items:center; gap:10px; flex-wrap:wrap;}
#pwgc-redeem-gift-card-container label {flex:0 0 auto; margin:0;}
#pwgc-redeem-gift-card-container br {display:none;}
#pwgc-redeem-error:empty {display:none;}
#pwgc-redeem-gift-card-number {height:40px; padding:0 14px; border:1px solid #ccc; border-radius:8px; box-sizing:border-box;}

/* Odstup okolo "Skontrolovať a objednať" */
.wc-proceed-to-checkout .checkout-button {margin-top:20px !important; margin-bottom:35px !important;}


/* --- Centrovanie produkt listu --- */
.product-grid-item {text-align:center !important; display:block; box-sizing:border-box;}
/* obr�zok - zru�i� float a centrova� */
.product-grid-item .product-element-top, .product-grid-item .product-element-top a 
 {display:block !important; text-align:center !important;}
.product-grid-item .product-element-top img, .product-grid-item .product-element-top a img 
 {float:none !important; display:inline-block !important; margin:0 auto !important; vertical-align:middle;}
/* n�zov produktu */
.product-grid-item h3.product-title, .product-grid-item .woocommerce-loop-product__title, .product-grid-item h2
 {text-align:center !important; display:block; margin:10px auto !important;}
/* cena a obal okolo ceny / tla�idla */
.product-grid-item .wrap-price, .product-grid-item .wrap-price .wrapp-swap, .product-grid-item .price, .product-grid-item .wrap-price .btn-add, .product-grid-item .btn-add
 {text-align:center !important; float:none !important; display:block !important; margin:8px auto 0 auto !important;}
/* samotn� tla�idlo pridania do ko��ka */
.product-grid-item .button, .product-grid-item .add_to_cart_button, .product-grid-item a.button
 {float:none !important; display:inline-block !important; margin:8px auto !important;}
/* ochrana proti �pecifick�m tabel�rnym wishlistom */
.product-grid-item table, .product-grid-item tr, .product-grid-item td
 {text-align:center !important;}

/* theme adaptation */
.page-title {margin-bottom:0px !important;}

/* --- PRODUCT LABELS --- */
.product-label {display:inline-flex; align-items:center; justify-content:center; font-family:'Barlow Condensed', sans-serif; font-weight:500; color:#fff; text-transform:uppercase; line-height:1; border-radius:50%; width:42px; height:42px; white-space:nowrap; transition:all 0.3s ease;}
.product-label.new {background:#72b01b; font-size:13px;}
.product-label.onsale {background:#6e0708; font-family:'Barlow Semi Condensed'; font-size:17px; font-weight:500;}
.product-label.featured {background:#c9a55b; color:#111; font-size:13px; font-weight:500; padding:0 20px; width:70px; height:42px; line-height:1; clip-path:ellipse(50% 35%); border-radius:0;}
.product-label.out-of-stock {background:#9E998E; font-weight:400; font-size:12px; padding:0 28px; min-width:75px !important; height:42px; line-height:1; clip-path:ellipse(50% 35%); border-radius:0;}
@keyframes pulse {0%{opacity:1;}50%{opacity:0.7;}100%{opacity:1;}}
.product-label.featured, .product-label.onsale {animation:pulse 3s infinite;}
@media (max-width:768px) {.labels-rounded .out-of-stock {max-width:100px;}}
/* ARCH�V (shop, kateg�rie, product loop) */
.product.product_cat-archiv-vypredanych-vin .product-label {display:none!important;}
/* SINGLE PRODUCT */
.single-product .product_cat-archiv-vypredanych-vin .product-label {display:none!important;}


/* v�no */
.basel-scroll-content {height:100% !important; display:contents;}

.pole_parameter {color:var(--vivino-c); font-size:18px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; line-height:normal; margin:0; padding:0;}
.pole_hodnota {color:#2c2923; font-size:19px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500; line-height:normal; margin:0; padding:0;}
.opis_hodnota {color:#2c2923; font-size:18px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:500}
.opis_hodnota ul {list-style:none; margin:0; padding:0;}
.opis_hodnota li {position:relative; padding-left:18px;}
.opis_hodnota li::before {content:""; position:absolute; left:2px; top:12px; width:7px; height:7px; border-right:2px solid var(--vivino-c); border-bottom:2px solid var(--vivino-c); transform:rotate(-45deg);}

.kontakty-container {float:left; margin:10px 30px 20px 20px; width:60%}
.kontakty-container img {border-radius:8px 42px;}

.entry-content p {color:#665544; font-size:18px; font-family:'Barlow Semi Condensed', sans-serif; font-weight:400}
.kontakty-container img {border-radius:8px 42px 8px 42px;}

/* Imgs */
.floatright {float:right; padding:3px 0}
.floatleft {float:left; padding:0}
.floatclearright {clear:right}
.floatclearleft {clear:left}
/* Logo vinárstva (.floatleft na stránkach jednotlivých vinárstiev) - na desktope/tablete
   obteká text dobre, ale niektoré logá majú natívny pomer strán až 1:5 a na mobile sa navyše
   roztiahnu na celú šírku (rozmazané, neprimerane vysoké). Na mobile preto logo prestane
   plávať (žiadne obtekanie textom vedľa neho) a zobrazí sa samostatne, vycentrované, s
   obmedzenou výškou - nezväčšuje sa, iba sa prípadne zmenší. */
@media (max-width:886px) {
  .floatleft {float:none; display:block; text-align:center; background:#fff; padding:15px 0;}
  .floatleft img {float:none; display:inline-block; width:auto; max-width:100%; max-height:300px;}
}
/* img {position:relative; z-index:202;} */
img {position:static; z-index:auto;}

/* share */
.share-container {float:right; margin:0 10px 0 0;}
.share-img-hover {position:relative; height:32px; width:32px; margin:0px; padding:0;}
.share-img-hover img {position:absolute; right:0; top:0; height:32px; width:32px; margin:0; padding:0; transition:opacity 0.6s ease-in-out;}
.share-img-hover img.img-front:hover {opacity:0;}

/* follow */
.follow-container {float:right; display:inline; margin:0 20px 0 0;}
.follow-img-hover {position:relative; height:30px; width:30px; margin:0px; padding:0;}
.follow-img-hover img {position:absolute; right:0; top:0; height:30px; width:30px; margin:0; padding:0; transition:opacity 0.5s ease-in-out;}
.follow-img-hover img.img-front:hover {opacity:0;}

/* tables */
.shipping-prices {list-style:none; padding:0; margin:6px 0 0; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width:260px; width:fit-content;}
.shipping-prices li {display:flex; justify-content:space-between; align-items:center; margin-bottom:0.1em; border-bottom:1px dashed #eee;}
.shipping-prices li:last-child {border-bottom:none;}
.shipping-prices span {color:#555; min-width:80px; flex:1;}
.shipping-prices strong {font-weight:700; text-align:right; min-width:65px; display:inline-block; white-space:nowrap;}

/* login */
.create-account {padding:14px 16px; margin:20px 0; border:2px dashed #c9a24d; background:#fffaf0;}
.create-account label {font-weight:600; font-size:16px; cursor:pointer; display:flex; align-items:center; padding-left:10px; gap:10px;}
.create-account input {transform:scale(1.2); margin:0;}
.woocommerce-info {font-size:18px; line-height:1.5;}

/* Bundle plugin - 2 st�pce na mobiloch */
@media only screen and (max-width: 479px) {
  .woosb-products[class*="woosb-products-layout-grid"] .woosb-product { width: calc(50% - 20px) !important; }
}


/* *** Custom CSS for mobile landscape - breakpoint matches .panorama above (950px) */
@media only screen and (max-width: 950px) {
  /* homepage */
  .banner_font1 {font-size:33px; color:white;}
  .banner_font2 {font-size:18px; color:white;}

  .izoom img {transition: transform 1.5s ease; border-radius:21px 0;}

  /* Main */
  .fullbar {color:#ffffff !important; background-color:#94070a !important; font-size:16px !important; font-family: 'Barlow Semi Condensed', sans-serif !important; font-weight: 500 !important; line-height:normal !important; padding:1px 7px 2px 9px !important; margin:0 !important; display:block !important; width:100% !important; box-sizing:border-box !important;}
}


/* *** Custom CSS for mobile - breakpoint matches .panorama above (768px) */
@media only screen and (max-width: 768px) {
  /* homepage */
  .home_img_popis {color:#444444; font-size:13px; margin:0; padding:3px 0 0 0;}

  .banner_font1 {font-size:33px; line-height:1.1; color:white;}
  .banner_font2 {font-size:18px; line-height:1.1; color:white;}
  .online_banner {gap:3px; padding-top:4px; padding-bottom:11px;}

  .vinarstva-loga img {opacity:0.5; width:80px; height:80px}

  .izoom img {transition: transform 1.5s ease; border-radius:21px 5px;}

  /* Main */
  .fullbar {color:#ffffff !important; background-color:#94070a !important; font-size:16px !important; font-family: 'Barlow Semi Condensed', sans-serif !important; font-weight: 500 !important; line-height:normal !important; padding:1px 7px 2px 9px !important; margin:0 !important; display:block !important; width:100% !important; box-sizing:border-box !important;}
}

/* O nás */
.vivino-about {max-width:1200px; margin:0 auto;}
.about-row {display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin:0 0 70px;}
.about-image img {display:block; width:100%; height:auto;}
.about-text h2 {margin:0 0 15px;}
.about-text p {margin:0 0 18px;}
.about-text p:last-child {margin-bottom:0;}
.about-text ul {margin:0; padding-left:22px;}
.about-text li {margin:0 0 8px;}
.about-closing {margin-top:10px;}
.about-closing p {margin:0 0 20px;}

@media (max-width:768px) {
  .about-row {grid-template-columns:1fr; gap:25px; margin-bottom:50px;}
  .about-text {order:1;}
  .about-image {order:2;}
}

/* Galéria produktu - náhrada za nefunkčný natívny Bricks element "Product Gallery" */
.ux-product-gallery {display:flex; flex-direction:column; gap:12px; width:fit-content;}

/* Medzera medzi stĺpcom galérie a textovým stĺpcom (H1/breadcrumbs/cena...) na produktovej
   stránke - Bricks neumožňuje tomuto riadku priradiť spoľahlivé vlastné ID (overené na tomto
   projekte opakovane), preto cielime cez :has() na jedinečnú triedu .ux-product-gallery:
   nech je riadok akokoľvek pomenovaný/zanorený, toto vždy trafí práve jeho flex gap a nikde
   inde (gap pôsobí iba na skutočných flex/grid rodičoch, inde je bez efektu). */
.single-product *:has(.ux-product-gallery) {column-gap:75px !important;}

/* Nadpis "Súvisiace produkty" na stred */
.single-product h2 {text-align:center;}

/* Obsah záložky Popis/Parametre bol zbytočne odsadený doprava */
.brxe-product-tabs, .brxe-product-tabs .woocommerce-Tabs-panel, .brxe-product-tabs .panel {padding-left:0 !important; margin-left:0 !important;}
.brxe-product-tabs ul.tabs a, .brxe-product-tabs .wc-tabs a {text-transform:uppercase;}
.brxe-product-tabs ul.tabs, .brxe-product-tabs .wc-tabs {padding-left:0 !important; margin-left:0 !important;}
.brxe-product-tabs ul.tabs li {margin-left:0 !important; padding-left:0 !important;}
.brxe-product-tabs ul.tabs li a {padding-left:0 !important; padding-top:0.3em !important; padding-bottom:0.3em !important;}
.brxe-product-tabs {margin-top:0 !important;}
.brxe-product-tabs .woocommerce-tabs {margin:0 !important; padding:0 !important;}
.brxe-product-tabs ul.tabs {margin:0 !important; padding:0 !important; border-top:none !important;}
.brxe-product-tabs ul.tabs li {margin:0 !important; padding:0 !important;}
.brxe-product-tabs .panel {margin-top:0 !important; padding-top:1em !important; padding-bottom:0 !important;}
.ux-product-meta {margin-top:12px;}
.ux-product-meta-row {margin:0 0 0.5em;}
.ux-product-meta-row:last-child {margin-bottom:0;}
.ux-product-meta-row {font:400 15px/1.3 'Barlow Semi Condensed', sans-serif;}
.ux-product-meta-row strong {font-size:15px; font-family:'Barlow Semi Condensed', sans-serif;}

/* Textový stĺpec (H1/breadcrumbs/cena...) mal zbytočný ľavý padding oproti deliacim čiaram */
.single-product *:has(> h1) {padding-left:0 !important;}
/* Bricks obaľuje [ux_product_gallery] do vlastného "shortcode" prvku, ktorý ako flex položka
   mohol aj naďalej rásť (flex-grow) a naťahovať sa na celú šírku stĺpca aj napriek tomu, že
   obsah vnútri je už len width:fit-content - preto treba zastaviť rast aj na samotnom obale. */
.single-product *:has(> .ux-product-gallery) {flex:0 0 auto !important; width:fit-content !important;}
.ux-pg-main {position:relative; width:355px; max-width:100%; aspect-ratio:1/2; background:#f4f3ee;}
.ux-pg-main-item {display:none; position:relative; width:100%; height:100%;}
.ux-pg-main-item--active {display:block;}
.ux-pg-main-item img {width:100%; height:100%; object-fit:contain; display:block;}
.ux-pg-main-item img[data-zoom] {cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjguNzgsMzAuNzRjLTAuNTUsMC0xLjA4LTAuMTktMS41LTAuNTRsLTcuMTItNi4zOWMtMC4xNiwwLjExLTAuMzMsMC4yMi0wLjUsMC4zMiBjLTAuMzEsMC4xOS0wLjYyLDAuMzYtMC45NCwwLjUyYy0xLjcyLDAuODYtMy41NywxLjI5LTUuNSwxLjI5Yy0zLjI5LTAtNi4zOC0xLjI4LTguNzEtMy41OSBjLTAuMDEtMC4wMS0wLjAyLTAuMDEtMC4wMi0wLjAyYy0yLjMzLTIuMzMtMy42MS01LjQzLTMuNjEtOC43MmMwLTMuMzEsMS4yOS02LjQxLDMuNjItOC43NCBjMi4zMy0yLjMzLDUuNDItMy42MSw4LjcyLTMuNjFjMy4zMSwwLDYuNDEsMS4yOSw4Ljc0LDMuNjJjMi4zMywyLjMzLDMuNjEsNS40MiwzLjYxLDguNzIgYy0wLDEuMzYtMC4yMiwyLjY4LTAuNjQsMy45NGMtMC4wNywwLjIxLTAuMTQsMC40LTAuMjIsMC41OWMtMC4zMywwLjgzLTAuNzQsMS42Mi0xLjI0LDIuMzdsNi44Nyw2LjE4IGMwLjQ4LDAuNDYsMC43NCwxLjAxLDAuNzcsMS42MWMwLjAzLDAuNTktMC4xNiwxLjE3LTAuNTQsMS42MmMtMC4wMSwwLjAxLTAuMDYsMC4wNy0wLjA3LDAuMDggYy0wLjQ1LDAuNDctMS4wMSwwLjczLTEuNiwwLjc2TDI4Ljc4LDMwLjc0eiBNNC4xLDEzLjZjMCwyLjQ0LDAuOTUsNC43MywyLjY3LDYuNDYgYzEuNzMsMS43Miw0LjAyLDIuNjcsNi40NiwyLjY3bDAtMGMyLjQ0LDAsNC43My0wLjk1LDYuNDYtMi42N2MxLjczLTEuNzIsMi42Ny00LjAyLDIuNjctNi40NSBjLTAtMi40NS0wLjk1LTQuNzQtMi42Ny02LjQ2Yy0xLjcyLTEuNzMtNC4wMS0yLjY4LTYuNDUtMi42OGMtMi40NSwwLTQuNzQsMC45NS02LjQ2LDIuNjcgYy0xLjcyLDEuNzItMi42Nyw0LTIuNjgsNi40M0M0LjEsMTMuNTgsNC4xLDEzLjU5LDQuMSwxMy42eiBNMTMuMjQsMjAuNzhjLTAuMTctMC0wLjMzLTAuMDMtMC40OS0wLjA3IGMtMC4zLTAuMDgtMC41OC0wLjI0LTAuODEtMC40N2MtMC4yMy0wLjIzLTAuMzktMC41MS0wLjQ3LTAuODFjLTAuMDQtMC4xNi0wLjA2LTAuMzItMC4wNi0wLjQ5bDAuMDItMy40NiBsLTMuNDYsMC4wMmMtMC4zNCwwLTAuNjYtMC4wOS0wLjkzLTAuMjRjLTAuMS0wLjA2LTAuMi0wLjEzLTAuMjktMC4yYy0wLjA4LTAuMDctMC4xNi0wLjE2LTAuMjMtMC4yNSBjLTAuMjUtMC4zMi0wLjM5LTAuNzItMC4zOS0xLjE0YzAtMC4zMywwLjA5LTAuNjUsMC4yNS0wLjkzYzAuMS0wLjE4LDAuMjQtMC4zNCwwLjQtMC40OCBjMC4xNy0wLjE0LDAuMzUtMC4yNSwwLjU1LTAuMzJjMC4yLTAuMDgsMC40Mi0wLjEyLDAuNjQtMC4xMmwzLjQ5LTAuMDJsMC4wMi0zLjQ5YzAtMC4zMiwwLjA5LTAuNjUsMC4yNi0wLjkzIGMwLjA2LTAuMSwwLjEzLTAuMiwwLjItMC4yOGMwLjA4LTAuMDgsMC4xNi0wLjE3LDAuMjYtMC4yM2MwLjAzLTAuMDIsMC4wNi0wLjA0LDAuMDktMC4wNCBjMC4yMy0wLjIsMC42My0wLjM0LDEuMDQtMC4zNGMwLjM0LDAsMC42NiwwLjA5LDAuOTQsMC4yNWMwLjEyLDAuMDcsMC4yNCwwLjE2LDAuMzUsMC4yNiBjMC4wMSwwLjAxLDAuMDIsMC4wMSwwLjAzLDAuMDJjMC4xMSwwLjExLDAuMiwwLjIzLDAuMjgsMC4zN2MwLjE2LDAuMjgsMC4yNSwwLjYsMC4yNCwwLjkzbC0wLjAyLDMuNDYgbDMuNDYtMC4wMmMwLjM0LDAsMC42NSwwLjA4LDAuOTMsMC4yNGMwLjEsMC4wNiwwLjIsMC4xMywwLjI4LDAuMmMwLjA5LDAuMDcsMC4xNywwLjE2LDAuMjQsMC4yNSBjMC4yNSwwLjMyLDAuMzksMC43MiwwLjM5LDEuMTRjLTAsMC4zMy0wLjA5LDAuNjUtMC4yNSwwLjkzYy0wLjEyLDAuMjEtMC4zLDAuNDEtMC41LDAuNTYgYy0wLjEsMC4wNy0wLjIxLDAuMTQtMC4zMywwLjE5Yy0wLjI0LDAuMTEtMC40OSwwLjE3LTAuNzYsMC4xN2wtMy40OSwwLjAybC0wLjAyLDMuNDkgYy0wLDAuMjgtMC4wNywwLjU2LTAuMTksMC44MWMtMC4wNSwwLjEtMC4xMiwwLjItMC4xOSwwLjNjLTAuMDgsMC4xLTAuMTYsMC4xOS0wLjI1LDAuMjYgYy0wLjM0LDAuMy0wLjc3LDAuNDYtMS4yMiwwLjQ2QzEzLjI0LDIwLjc4LDEzLjI0LDIwLjc4LDEzLjI0LDIwLjc4eiIvPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xMy4yMywxLjUxdjBjMy4zNCwwLDYuMzYsMS4zNSw4LjU1LDMuNTRjMi4xOCwyLjE5LDMuNTQsNS4yMSwzLjU0LDguNTRoMHYwLjAxdjAuMDFoLTAgYy0wLDEuMzQtMC4yMiwyLjY0LTAuNjMsMy44NWMtMC4wNywwLjItMC4xNCwwLjQtMC4yMSwwLjU4djBjLTAuMzUsMC44OS0wLjgsMS43Mi0xLjM0LDIuNDkgbDcuMDQsNi4zM2wwLDBsMC4wNCwwLjA0bDAuMDEsMGMwLjQsMC4zOCwwLjYxLDAuODgsMC42NCwxLjRjMC4wMywwLjUxLTAuMTMsMS4wMy0wLjQ4LDEuNDQgbC0wLDBsLTAuMDQsMC4wNWwtMC4wMSwwLjAxbC0wLjAzLDAuMDRsLTAsMGMtMC4zOCwwLjQtMC44OSwwLjYxLTEuNCwwLjY0IGMtMC4wNCwwLTAuMDcsMC0wLjExLDBjLTAuNDcsMC0wLjk1LTAuMTYtMS4zNC0wLjQ4bC0wLTBsLTAuMDUtMC4wNGwtMC4wMS0wLjAxbC03LjItNi40NyBjLTAuMjEsMC4xNS0wLjQzLDAuMjktMC42NSwwLjQzYy0wLjMsMC4xOC0wLjYxLDAuMzUtMC45MiwwLjUxYy0xLjYyLDAuODEtMy40NSwxLjI2LTUuMzksMS4yNnYwaC0wIHYtMGMtMy4zNC0wLTYuMzYtMS4zNS04LjU1LTMuNTRsLTAsMGMtMi4xOC0yLjE5LTMuNTQtNS4yMS0zLjU0LTguNTRIMS4xM3YtMC4wMXYtMGgwIGMwLTMuMzQsMS4zNS02LjM2LDMuNTQtOC41NWMyLjE5LTIuMTgsNS4yMS0zLjU0LDguNTQtMy41NFYxLjUxaDAuMDFIMTMuMjMgTTEzLjIyLDQuMjJMMTMuMjIsNC4yMiBjLTIuNTgsMC00LjkzLDEuMDUtNi42MiwyLjc1bDAsMGMtMS43LDEuNy0yLjc1LDQuMDQtMi43NSw2LjYzSDMuODV2MHYwLjAxSDMuODUgYzAsMi41OCwxLjA1LDQuOTMsMi43NSw2LjYybDAtMGMxLjcsMS43LDQuMDQsMi43NSw2LjYzLDIuNzV2LTBoMGgwLjAxdjAgYzIuNTgtMCw0LjkzLTEuMDUsNi42Mi0yLjc1YzEuNy0xLjcsMi43NS00LjA0LDIuNzUtNi42M2gtMHYtMHYtMC4wMWgwIGMtMC0yLjU4LTEuMDUtNC45My0yLjc1LTYuNjJWNi45N2MtMS43LTEuNy00LjA0LTIuNzUtNi42My0yLjc1djBoLTBIMTMuMjIgTTEzLjMxLDYuNzMgYzAsMCwwLDAsMC4wMSwwYzAuMjksMCwwLjU3LDAuMDgsMC44LDAuMjJjMC4xMiwwLjA3LDAuMjMsMC4xNSwwLjMyLDAuMjVsMC0wIGMwLjA5LDAuMDksMC4xOCwwLjIsMC4yNSwwLjMyYzAuMTQsMC4yMywwLjIxLDAuNTEsMC4yMSwwLjhsLTAuMDIsMy43MWwzLjcyLTAuMDJjMCwwLDAuMDEsMCwwLjAxLDAgYzAuMjksMCwwLjU2LDAuMDgsMC43OSwwLjIxbC0wLDBjMC4wOSwwLjA1LDAuMTcsMC4xMSwwLjI0LDAuMTdjMC4wNywwLjA2LDAuMTQsMC4xNCwwLjIxLDAuMjJoMCBjMC4yMSwwLjI3LDAuMzQsMC42MSwwLjM0LDAuOThjLTAsMC4yOS0wLjA4LDAuNTctMC4yMiwwLjgxYy0wLjExLDAuMTktMC4yNiwwLjM1LTAuNDMsMC40OCBjLTAuMDksMC4wNi0wLjE4LDAuMTItMC4yOCwwLjE3Yy0wLjIsMC4wOS0wLjQyLDAuMTQtMC42NiwwLjE1bC0zLjczLDAuMDJsLTAuMDIsMy43NCBjLTAsMC4yNS0wLjA2LDAuNDktMC4xNywwLjdjLTAuMDQsMC4wOS0wLjEsMC4xOC0wLjE2LDAuMjZsLTAsMGMtMC4wNiwwLjA4LTAuMTMsMC4xNS0wLjIxLDAuMjIgYy0wLjI4LDAuMjUtMC42NiwwLjQtMS4wNiwwLjR2LTBjLTAuMTUsMC0wLjI5LTAuMDItMC40Mi0wLjA2Yy0wLjI3LTAuMDctMC41MS0wLjIyLTAuNy0wLjQxIGMtMC4xOS0wLjE5LTAuMzMtMC40My0wLjQxLTAuN3YtMGMtMC4wNC0wLjEzLTAuMDUtMC4yNy0wLjA1LTAuNDJ2LTBsMC4wMi0zLjcxbC0zLjcxLDAuMDIgYy0wLDAtMC4wMSwwLTAuMDEsMGMtMC4yOSwwLTAuNTYtMC4wOC0wLjc5LTAuMjFoMGMtMC4wOS0wLjA1LTAuMTctMC4xMS0wLjI1LTAuMTcgQzYuODQsMTQuOCw2Ljc3LDE0LjczLDYuNzEsMTQuNjVINi43MWMtMC4yMS0wLjI3LTAuMzQtMC42MS0wLjM0LTAuOThjMC0wLjI5LDAuMDgtMC41NywwLjIyLTAuODFsMCwwIGMwLjA5LTAuMTUsMC4yMS0wLjMsMC4zNS0wLjQxaDBjMC4xNC0wLjEyLDAuMy0wLjIxLDAuNDctMC4yOGMwLjE3LTAuMDYsMC4zNi0wLjEsMC41Ni0wLjFsMy43NC0wLjAyIGwwLjAyLTMuNzRjMC0wLjI5LDAuMDgtMC41NywwLjIyLTAuOGwwLDBjMC4wNS0wLjA5LDAuMTEtMC4xNywwLjE3LTAuMjRjMC4wNy0wLjA3LDAuMTQtMC4xNCwwLjIyLTAuMmwwLDAgdjBDMTIuNjEsNi44NSwxMi45NSw2LjczLDEzLjMxLDYuNzMgTTEzLjIzLDEuMDFoLTBjLTAuMDEsMC0wLjAzLDAtMC4wNCwwIGMtMy4zNSwwLjAxLTYuNSwxLjMyLTguODYsMy42OWMtMi4zNywyLjM3LTMuNjgsNS41Mi0zLjY5LDguODdjLTAsMC4wMS0wLDAuMDMtMCwwLjA0IHMwLDAuMDMsMCwwLjA0YzAuMDEsMy4zNSwxLjMyLDYuNSwzLjY5LDguODdjMC4wMSwwLjAxLDAuMDIsMC4wMiwwLjAzLDAuMDMgYzIuMzcsMi4zNSw1LjUsMy42NSw4Ljg0LDMuNjZjMC4wMSwwLDAuMDIsMCwwLjAzLDBjMCwwLDAsMCwwLDBjMS45Ny0wLDMuODYtMC40NCw1LjYxLTEuMzIgYzAuMzItMC4xNiwwLjY0LTAuMzQsMC45Ni0wLjUzYzAuMTItMC4wNywwLjIzLTAuMTUsMC4zNS0wLjIybDYuOTEsNi4yMWwwLjA2LDAuMDUgYzAuMDEsMC4wMSwwLjAyLDAuMDIsMC4wMywwLjAyYzAuNDYsMC4zOCwxLjA0LDAuNTksMS42NCwwLjU5YzAuMDQsMCwwLjA5LTAsMC4xNC0wIGMwLjY2LTAuMDMsMS4yOC0wLjMyLDEuNzQtMC43OWMwLjAxLTAuMDEsMC4wMi0wLjAyLDAuMDMtMC4wM2wwLjAyLTAuMDJsMC4wNy0wLjA4IGMwLjQyLTAuNSwwLjYzLTEuMTQsMC41OS0xLjc5Yy0wLjAzLTAuNjYtMC4zMi0xLjI4LTAuNzktMS43M2MtMC4wMS0wLjAxLTAuMDItMC4wMi0wLjA0LTAuMDMgYy0wLjAxLTAuMDEtMC4wMS0wLjAxLTAuMDItMC4wMmwtNi43MS02LjAzYzAuNDYtMC43LDAuODQtMS40NSwxLjE1LTIuMjNjMC0wLjAxLDAuMDEtMC4wMiwwLjAxLTAuMDMgYzAuMDctMC4xOSwwLjE0LTAuMzgsMC4yMS0wLjU4YzAuNDMtMS4yNywwLjY1LTIuNjEsMC42NS0zLjk2YzAtMC4wMSwwLTAuMDMsMC0wLjA0IGMwLTAuMDEtMC0wLjAzLTAtMC4wNGMtMC4wMS0zLjM1LTEuMzItNi41LTMuNjktOC44N2MtMi4zNy0yLjM3LTUuNTItMy42OC04Ljg2LTMuNjkgQzEzLjI2LDEuMDEsMTMuMjUsMS4wMSwxMy4yMywxLjAxTDEzLjIzLDEuMDF6IE00LjM1LDEzLjU3YzAuMDEtMi4zNiwwLjkzLTQuNTgsMi42LTYuMjUgYzEuNjgtMS42OCwzLjktMi42LDYuMjctMi42djBoMC4wMWMwLDAsMCwwLDAsMGMyLjM3LDAsNC42LDAuOTIsNi4yOCwyLjYgYzEuNjcsMS42NywyLjYsMy44OSwyLjYsNi4yNWMtMCwwLjAxLTAsMC4wMi0wLDAuMDNjMCwyLjM4LTAuOTIsNC42LTIuNiw2LjI4IGMtMS42NywxLjY3LTMuODksMi42LTYuMjUsMi42Yy0wLjAxLTAtMC4wMi0wLTAuMDMtMGMtMi4zNywwLTQuNi0wLjkyLTYuMjgtMi42IGMtMC4wMS0wLjAxLTAuMDEtMC4wMS0wLjAyLTAuMDJjLTEuNjUtMS42Ny0yLjU3LTMuODctMi41OC02LjIxYzAtMC4wMSwwLTAuMDIsMC0wLjA0IFM0LjM1LDEzLjU5LDQuMzUsMTMuNTdMNC4zNSwxMy41N3ogTTEzLjMxLDYuMjNjLTAuNDUsMC0wLjg5LDAuMTUtMS4yNSwwLjQxYy0wLjAxLDAuMDEtMC4wMiwwLjAxLTAuMDMsMC4wMiBjLTAuMSwwLjA4LTAuMiwwLjE3LTAuMjksMC4yNmMtMC4wOSwwLjEtMC4xNywwLjIxLTAuMjMsMC4zMmMtMC4xOSwwLjMyLTAuMjksMC42OC0wLjI5LDEuMDVsLTAuMDIsMy4yNCBsLTMuMjQsMC4wMmMtMC4yNSwwLTAuNSwwLjA1LTAuNzMsMC4xM2MtMC4yMSwwLjA4LTAuNDEsMC4yLTAuNTksMC4zNGMtMC4wMSwwLjAxLTAuMDIsMC4wMi0wLjAzLDAuMDIgYy0wLjE4LDAuMTYtMC4zNCwwLjM0LTAuNDYsMC41NGMtMC4xOSwwLjMyLTAuMjksMC42OS0wLjI5LDEuMDZjMCwwLjQ3LDAuMTYsMC45MywwLjQ0LDEuMjkgYzAuMDEsMC4wMSwwLjAyLDAuMDIsMC4wMywwLjAzYzAuMDgsMC4xLDAuMTYsMC4xOCwwLjI1LDAuMjZjMC4wOSwwLjA4LDAuMiwwLjE2LDAuMzIsMC4yMyBjMC4zMSwwLjE4LDAuNjcsMC4yOCwxLjA0LDAuMjhsMy4yMy0wLjAybC0wLjAyLDMuMjFjLTAsMC4xOSwwLjAyLDAuMzcsMC4wNywwLjU1IGMwLjA5LDAuMzUsMC4yOCwwLjY3LDAuNTMsMC45M2MwLjI2LDAuMjYsMC41OCwwLjQ0LDAuOTMsMC41NGMwLjE2LDAuMDQsMC4zMywwLjA3LDAuNSwwLjA3IGMwLjAyLDAsMC4wMywwLDAuMDUsMGMwLjUxLDAsMS0wLjE5LDEuMzktMC41MmMwLjA5LTAuMDgsMC4xOC0wLjE3LDAuMjYtMC4yOCBjMC4wMS0wLjAxLDAuMDEtMC4wMSwwLjAyLTAuMDJjMC4wOS0wLjEyLDAuMTYtMC4yMywwLjIxLTAuMzRjMC4xNC0wLjI4LDAuMjItMC42LDAuMjItMC45MmwwLjAyLTMuMjQgbDMuMjQtMC4wMmMwLjMtMCwwLjU5LTAuMDcsMC44Ni0wLjE5YzAuMTMtMC4wNiwwLjI1LTAuMTMsMC4zNy0wLjIyYzAuMjMtMC4xNywwLjQzLTAuMzksMC41Ny0wLjY0IGMwLjE5LTAuMzIsMC4yOC0wLjY4LDAuMjktMS4wNmMwLTAuNDctMC4xNi0wLjkzLTAuNDQtMS4yOWMtMC4xLTAuMTItMC4xOS0wLjIxLTAuMjgtMC4yOSBjLTAuMDktMC4wOC0wLjE5LTAuMTUtMC4yOS0wLjIxYy0wLjAxLTAuMDEtMC4wMi0wLjAxLTAuMDMtMC4wMmMtMC4zMi0wLjE4LTAuNjgtMC4yOC0xLjA0LTAuMjhsLTMuMjIsMC4wMSBsMC4wMi0zLjIxYzAtMC4zNy0wLjA5LTAuNzMtMC4yOC0xLjA1Yy0wLjA5LTAuMTYtMC4yLTAuMy0wLjMzLTAuNDNjLTAuMDEtMC4wMS0wLjAyLTAuMDItMC4wNC0wLjAzIGMtMC4xMi0wLjExLTAuMjUtMC4yMS0wLjM5LTAuMjljLTAuMzEtMC4xOC0wLjY4LTAuMjgtMS4wNS0wLjI4QzEzLjMyLDYuMjMsMTMuMzEsNi4yMywxMy4zMSw2LjIzIEwxMy4zMSw2LjIzeiIvPjwvc3ZnPg==) 10 10, zoom-in;}
.ux-pg-zoom-pane {display:none; position:absolute; top:0; right:-40px; width:500px; height:100%; max-width:none; background-color:#fff; background-repeat:no-repeat; z-index:1010; pointer-events:none;}
.ux-pg-zoom-pane--active {display:block;}

/* Zoom pri nábehu myšou nedáva na dotykových zariadeniach zmysel (žiadny skutočný hover) a
   dotykové udalosti ho vedeli omylom spustiť - zakryl potom napr. rozbalené mobilné menu. */
@media (max-width:768px) {
  .ux-pg-zoom-pane {display:none !important;}
}

/* Jednotný padding stránok - hodnota na jednom mieste (--page-pad-x/--page-pad-bottom v :root),
   postupne dopĺňame pre ďalšie typy stránok/šablón. Zatiaľ: produktová stránka. */
.single-product .brxe-section {padding-bottom:var(--page-pad-bottom) !important;}
.single-product .brxe-section > .brxe-container:not(.woocommerce-notices-wrapper) {padding-left:var(--page-pad-x) !important; padding-right:var(--page-pad-x) !important;}
/* .woocommerce-notices-wrapper NA PRODUKTOVEJ STRÁNKE je priamy súrodenec <section
   class="brxe-section"> (nie jeho potomok) - sedí mimo celej vetvy, ktorú vieme nastaviť v
   Bricks builderi. Má preto vlastné, na okolí nezávislé pravidlo (vyššie pravidlo ho preto aj
   explicitne vynecháva cez :not()). max-width:1140px + vycentrovanie, aby na širokom desktope
   kopírovalo rovnaký stĺpec obsahu ako zvyšok stránky (nie 100% okna). Desktop padding 0,
   tablet 20px, mobil --page-pad-x (15px). SCOPED na .single-product - v košíku/pokladni je
   notices-wrapper vnorený v Bricks kontajneri, ktorý má padding už nastavený natívne; globálne
   pravidlo by sa s ním sčítalo (presne to sa aj stalo - 15+15=30px).  */
.single-product .woocommerce-notices-wrapper {width:100% !important; max-width:1140px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box;}
@media (max-width:1170px) {
  .single-product .woocommerce-notices-wrapper {padding-left:20px !important; padding-right:20px !important;}
}
@media (max-width:768px) {
  .single-product .woocommerce-notices-wrapper {padding-left:var(--page-pad-x) !important; padding-right:var(--page-pad-x) !important;}
}
.ux-pg-yt {position:relative; width:100%; height:100%; cursor:pointer; background:#000;}
.ux-pg-yt img {width:100%; height:100%; object-fit:cover; display:block;}
.ux-pg-yt-play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:28px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);}
.ux-pg-main-item iframe {width:100%; height:100%; display:block; border:0;}
.ux-pg-thumbs {display:flex; flex-wrap:wrap; gap:8px;}
.ux-pg-thumb {position:relative; width:60px; height:60px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:#f4f3ee; display:flex; align-items:center; justify-content:center;}
.ux-pg-thumb img {width:100%; height:100%; object-fit:cover;}
.ux-pg-thumb--active {border-color:#94070a;}
.ux-pg-thumb--video .ux-pg-thumb-play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:16px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);}