/* Baravin storefront styles that no longer fit Journal's customCSS setting,
   a 64 KB TEXT column that is full. Loaded on every page by common/header. */

/* --- Product review: the form opens from its button, stars take the rating --- */
.bv-review .bv-review-open{margin-top:16px}
.bv-review .bv-review-fields{max-width:640px;margin-top:24px}
/* Journal lays a form group out as a wrapping flex row, which left 48px between
   the question and the stars */
.bv-review .bv-rating-group{display:block}
.bv-review .bv-rating-label{margin:0 0 10px;font-size:14px;line-height:1.5;color:#232323}
.bv-review .bv-rating-group.required .bv-rating-label::after{content:" *";color:#B23A3A}
.bv-rating{display:inline-flex;gap:6px}
.bv-rating__star{
  position:relative;
  margin:0;
  line-height:0;
  color:#D6D6D6;
  cursor:pointer;
  transition:color .12s ease-out;
}
/* the radio stays in the page for keyboards and screen readers, the star is what shows */
.bv-rating__star input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bv-rating__star svg{display:block;width:30px;height:30px;fill:currentColor}
.bv-rating__star:has(input:focus-visible){outline:2px solid #561729;outline-offset:2px;border-radius:4px}
/* chosen stars and, while pointing, the stars up to the pointer, in the brand colour */
.bv-rating:not(:hover):has(.bv-rating__star:nth-of-type(1) input:checked) .bv-rating__star:nth-of-type(-n+1),
.bv-rating:not(:hover):has(.bv-rating__star:nth-of-type(2) input:checked) .bv-rating__star:nth-of-type(-n+2),
.bv-rating:not(:hover):has(.bv-rating__star:nth-of-type(3) input:checked) .bv-rating__star:nth-of-type(-n+3),
.bv-rating:not(:hover):has(.bv-rating__star:nth-of-type(4) input:checked) .bv-rating__star:nth-of-type(-n+4),
.bv-rating:not(:hover):has(.bv-rating__star:nth-of-type(5) input:checked) .bv-rating__star:nth-of-type(-n+5),
.bv-rating:has(.bv-rating__star:nth-of-type(1):hover) .bv-rating__star:nth-of-type(-n+1),
.bv-rating:has(.bv-rating__star:nth-of-type(2):hover) .bv-rating__star:nth-of-type(-n+2),
.bv-rating:has(.bv-rating__star:nth-of-type(3):hover) .bv-rating__star:nth-of-type(-n+3),
.bv-rating:has(.bv-rating__star:nth-of-type(4):hover) .bv-rating__star:nth-of-type(-n+4),
.bv-rating:has(.bv-rating__star:nth-of-type(5):hover) .bv-rating__star:nth-of-type(-n+5){color:#561729}

/* --- Benefits band above the footer of every product, as on the Shoptet shop,
   on the page's grey rather than a white strip of its own; the page already leaves
   the space above it --- */
.bv-benefits{padding:0 0 56px;background:transparent}
.bv-benefits__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
/* the container's clearfix pseudo-elements would take the first and last grid cells */
.bv-benefits__list::before,
.bv-benefits__list::after{content:none;display:none}
.bv-benefits__item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px}
.bv-benefits__icon{
  width:48px;
  height:48px;
  margin-bottom:18px;
  fill:none;
  stroke:#561729;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bv-benefits__title{font-size:19px;font-weight:500;line-height:1.3;color:#232323}
.bv-benefits__text{margin-top:4px;font-size:15px;line-height:1.5;color:#6B6B6B}
@media (max-width:991px){
  .bv-benefits__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .bv-benefits{padding:0 0 40px}
  .bv-benefits__title{font-size:16px}
  .bv-benefits__text{font-size:14px}
}

/* --- Account address form: no region row when the country has no regions,
   the same as the checkout does --- */
#account-address .form-group:has(select[name="zone_id"]):not(:has(select[name="zone_id"] option:not([value=""]):not([value="0"]))),
#account-address .row:has(> div > select[name="zone_id"]):not(:has(select[name="zone_id"] option:not([value=""]):not([value="0"]))){display:none}

/* --- Account overview: three columns of links as on the Atexsport account,
   each a card like the account menu beside it --- */
.bv-account{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bv-account__box{padding:32px;background:#fff;border-radius:4px;box-shadow:0 5px 20px -5px rgba(0,0,0,.05)}
.bv-account .bv-account__title{margin:0 0 20px;font-size:16px;font-weight:600;line-height:1.4;color:#1C2021}
.bv-account__links{margin:0;padding:0;list-style:none}
.bv-account__links li + li{margin-top:10px}
.bv-account__links a{font-size:16px;line-height:1.5;color:#5A5E60;text-decoration:none}
.bv-account__links a:hover,
.bv-account__links a:focus-visible{color:#561729}
@media (max-width:991px){
  .bv-account{grid-template-columns:minmax(0,1fr)}
  .bv-account__box{padding:24px}
}

/* --- Product review: the privacy consent line above the send button, as on Shoptet --- */
.bv-review .bv-review-consent{margin:0 0 16px;font-size:14px;line-height:1.5;color:#6B6B6B}
.bv-review .bv-review-consent a{color:#561729;text-decoration:underline}
/* the anti-spam field: off screen for people, still in the form for bots */
.bv-review .bv-review-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Checkout, last step --- */
/* Journal puts 32px above whatever follows a paragraph, which dropped each edit
   button below the line it belongs to */
.checkout-recap-row .checkout-recap-edit{margin-top:0}
/* Journal hides a <br> that is a paragraph's only child element, which ran the
   bank transfer details into one line */
#checkout-payment p > br:only-child{display:inline}
/* the consent, between the recap and the button that places the order; its
   error takes a line of its own under the text instead of squeezing beside it.
   The page id is there to outweigh the checkout rules kept in Journal's custom CSS. */
#checkout-checkout .bv-agree{display:flex;flex-wrap:wrap;gap:0 10px;margin:0 0 24px}
/* the consent and the newsletter box under it read as one group */
#checkout-checkout .bv-agree:has(+ .bv-agree){margin-bottom:12px}
#checkout-checkout .bv-agree > label{flex:1 1 0;min-width:0;margin:0;font-size:15px;line-height:1.45;color:#232323;cursor:pointer}
/* Journal pads links in a check label, which read as double spaces in a sentence */
#checkout-checkout .bv-agree a{padding:0}
/* 32px = the box, the 6px Journal forces after every checkbox, and the row's gap */
#checkout-checkout .bv-agree > .invalid-feedback{flex:0 0 100%;padding-left:32px;font-size:14px}
/* the same hand-drawn box as the checkboxes of the delivery step: a native one
   would be the only blue control in a checkout whose radios are all wine red */
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:3px 0 0; /* 15px text, 21.75px line */
  border:1px solid #B5B5B5;
  border-radius:0;
  background:transparent;
  display:grid;
  place-content:center;
  cursor:pointer;
}
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]::before{
  content:"";
  width:9px;
  height:9px;
  background:#561729;
  transform:scale(0);
  transition:transform .12s ease-in-out;
}
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]:checked{border-color:#561729}
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]:checked::before{transform:scale(1)}
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]:focus{box-shadow:none;outline:none}
#checkout-checkout .bv-agree > .form-check-input[type=checkbox]:focus-visible{outline:2px solid #561729;outline-offset:2px}

/* --- Customer-service pages: a menu of their siblings beside the text, as on the
   Microwell shop. The menu is a card like the account menu and follows the scroll
   on long pages such as the terms. --- */
.bv-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;align-items:start}
.bv-info__menu{position:sticky;top:96px;padding:32px;background:#fff;border-radius:4px;box-shadow:0 5px 20px -5px rgba(0,0,0,.05)}
.bv-info .bv-info__menu-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.3;color:#1C2021}
.bv-info__menu ul{margin:0;padding:0;list-style:none}
.bv-info__menu li + li{border-top:1px solid rgba(28,32,33,.1)}
.bv-info__menu a{display:block;padding:14px 0;font-size:16px;line-height:1.4;color:#5A5E60;text-decoration:none}
.bv-info__menu a:hover,
.bv-info__menu a:focus-visible,
.bv-info__menu .bv-info__active a{color:#561729}
.bv-info__menu .bv-info__active a{font-weight:600}

/* The page title stands above the text, on the menu's top edge, instead of
   centred across the whole page. */
.bv-info .bv-info__title{margin:0 0 24px;font-size:36px;font-weight:700;line-height:1.2;color:#1C2021;text-align:left}
/* the terms and privacy texts centre themselves in a 900px block of their own
   (inline style), which would start them right of the title */
.bv-info__content .page-text{margin-left:0 !important;margin-right:0 !important}
/* plain text pages written for this layout: how to shop, delivery and payment, FAQ */
.bv-text{max-width:900px}
.bv-text h2{margin:32px 0 12px;font-size:24px;font-weight:600;line-height:1.3;color:#1C2021}
.bv-text h3{margin:24px 0 6px;font-size:18px;font-weight:600;line-height:1.4;color:#1C2021}
.bv-text > :first-child{margin-top:0}
.bv-text p{margin:0 0 12px}
.bv-text ol,
.bv-text ul{margin:0 0 12px;padding-left:22px}
.bv-text li{line-height:1.7;color:#5A5E60}
.bv-text li + li{margin-top:8px}
.bv-text a{color:#561729;text-decoration:underline}
@media (max-width:991px){
  .bv-info{grid-template-columns:minmax(0,1fr)}
  .bv-info__menu{position:static;padding:24px}
  .bv-info .bv-info__title{font-size:28px}
}

/* --- Checkout: every step's headings sit level with the cart panel's "Košík" --- */
/* The panel is a padded grey box, so its title starts 26px below the column top,
   while a step's own headings started at the top (or, in step one, 24px down).
   Below 992px the panel moves above the step, where there is nothing to line up. */
@media (min-width:992px){
  #checkout-checkout .checkout-layout > .checkout-main{padding-top:26px}
  /* step one keeps its two 24px offsets on different elements */
  #checkout-checkout .checkout-main #checkout-shipping-method,
  #checkout-checkout .checkout-main .row.checkout-sections > .checkout-section-end{padding-top:0}
}
/* the recap heading stands beside the panel's title, so it is set like it and
   like the headings of the other steps */
#checkout-checkout .checkout-main .checkout-recap-title{margin-bottom:27.5px;font-size:22px;font-weight:400;line-height:1.3}
/* and what follows a heading starts on one line too: the panel's rule under its
   title meets the rule and the boxes under the step's headings */
#checkout-checkout .checkout-aside .bv-summary-title{padding-bottom:27px}

/* --- Order confirmation: one centred box, as on the Atexsport and Microwell shops --- */
.bv-success{
  max-width:720px;
  margin:0 auto;
  padding:48px 40px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 5px 20px -5px rgba(0,0,0,.05);
  text-align:center;
}
.bv-success__icon{
  width:56px;
  height:56px;
  margin-bottom:16px;
  fill:none;
  stroke:#561729;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bv-success .bv-success__title{margin:0 0 12px;font-size:30px;font-weight:700;line-height:1.25;color:#1C2021}
.bv-success__order{margin:0 0 20px;font-size:18px;line-height:1.5;color:#232323}
.bv-success__message p{margin:0 0 8px;font-size:16px;line-height:1.6;color:#5A5E60}
.bv-success__message a,
.bv-success__bank a{color:#561729;text-decoration:underline}
.bv-success__bank{margin:24px 0 0;padding:20px 24px;background:#F7F7F8;border-radius:4px}
.bv-success__bank h2{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.4;color:#1C2021}
.bv-success__bank p{margin:0 0 4px;font-size:16px;line-height:1.6;color:#5A5E60}
/* Journal hides a <br> that is a paragraph's only child element, see the last checkout step */
.bv-success__bank p > br:only-child{display:inline}
.bv-success > .btn{margin-top:28px}
@media (max-width:600px){
  .bv-success{padding:32px 20px}
  .bv-success .bv-success__title{font-size:24px}
}

/* --- Instagram feed right above the dark footer of every page, as on the Shoptet shop: a
   white strip of its own, pictures in Instagram's portrait format --- */
.bv-instagram{padding:60px 0;background:#fff}
/* as wide as the content of Journal's footer rows around it: 1536px at most, 32px from the edges */
.bv-instagram__inner{max-width:1600px;margin:0 auto;padding:0 32px}
.bv-instagram__head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:40px}
/* the size of the footer's other section titles; Journal's title rule would leave it at 16px, and it sets
   its bottom margin with !important, which only another !important takes away */
.bv-instagram h3.bv-instagram__heading.title{margin:0!important;font-size:36px;line-height:1.4;text-align:center}
.bv-instagram__profile{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#561729;text-decoration:none}
.bv-instagram__profile:hover{color:#561729;text-decoration:underline}
/* the theme removes the focus outline from every link */
.bv-instagram__profile:focus-visible,
.bv-instagram__tile:focus-visible{outline:2px solid #561729;outline-offset:2px}
.bv-instagram__logo{display:block;flex-shrink:0}
.bv-instagram__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
/* 1080/1350 is Instagram's own portrait format; a square would cut more off every post */
.bv-instagram__tile{position:relative;display:block;overflow:hidden;aspect-ratio:1080/1350;background:#f7f7f7}
.bv-instagram .bv-instagram__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.bv-instagram__tile:hover .bv-instagram__image,
.bv-instagram__tile:focus-visible .bv-instagram__image{transform:scale(1.06)}
.bv-instagram__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(86,23,41,.55);opacity:0;transition:opacity .3s ease}
.bv-instagram__tile:hover .bv-instagram__overlay,
.bv-instagram__tile:focus-visible .bv-instagram__overlay{opacity:1}
@media (max-width:1200px){
  .bv-instagram__inner{padding:0 24px}
}
/* twelve posts are in the page; narrower screens show the first six or four, so the rows stay whole */
@media (max-width:991px){
  .bv-instagram__head{margin-bottom:30px}
  .bv-instagram h3.bv-instagram__heading.title{font-size:30px}
  .bv-instagram__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bv-instagram__tile:nth-child(n+7){display:none}
}
@media (max-width:767px){
  .bv-instagram{padding:48px 0}
  /* the design keeps the heading on one line on a phone, which 30px does not allow */
  .bv-instagram h3.bv-instagram__heading.title{font-size:min(30px,6.5vw)}
  .bv-instagram__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bv-instagram__tile:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  .bv-instagram__image,.bv-instagram__overlay{transition:none}
  .bv-instagram__tile:hover .bv-instagram__image,
  .bv-instagram__tile:focus-visible .bv-instagram__image{transform:none}
}

/* --- Checkout, delivery step: a signed-in customer's e-mail is the account's login and is shown
   but not edited here, so it must not look like a field that can be typed in. The checkout's own
   input styling, which loads later, would otherwise keep it white --- */
#form-register .form-control[readonly]{background:#EFEFEF!important;color:#6B6B6B!important;cursor:not-allowed}

/* --- "Page not found": the message and its button sit centred under the centred title; Journal
   stretches the button of a .buttons row across the whole page --- */
#error-not-found #content > p{text-align:center}
#error-not-found .buttons{display:flex;justify-content:center}
#error-not-found .buttons .pull-right{float:none;width:auto;flex:0 0 auto}
#error-not-found .buttons .btn{width:auto;min-width:220px}

/* --- Mobile header on tablets: from 760px Journal writes a label under each icon ("Menu",
   "Account", "Wishlist"), in English and wider than the icons, so they run into one another.
   The phone header has icons only; tablets get the same --- */
.mobile-header-active header .menu-icon::after,
.mobile-header-active header .links-text::after,
.mobile-header-active header .fa-shopping-cart::after{display:none!important}

/* --- A page that ends in a lone "Pokračovat" link (empty cart, empty category, no search results,
   account lists...): Journal stretches that button across the whole page; it keeps its own width
   under the text instead. The sign-in page is left alone: there the link is one of two buttons
   that fill their boxes side by side --- */
html:not(.route-account-login) #content .buttons > .pull-right:only-child:has(> a.btn:only-child),
.cart-page .buttons > .pull-right:only-child:has(> a.btn:only-child){float:none;width:auto;text-align:left}
html:not(.route-account-login) #content .buttons > .pull-right:only-child > a.btn:only-child,
.cart-page .buttons > .pull-right:only-child > a.btn:only-child{display:inline-flex;width:auto;min-width:220px}