/* =========================================================
   HERO WRAPPER
========================================================= */
.custom-hero-wrapper {
  display: none; /* defaultně skryto, JS ukáže jen na homepage */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding: 0;
  margin-bottom: 30px;
}

/* =========================================================
   HLAVNÍ HERO KONTEJNER
========================================================= */
.sow-main-container {
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease-in-out;
  background-color: #222;
  color: white;
  display: flex;
}

/* Tmavý overlay pro desktop */
.sow-main-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   WRAPPER SEKCI
========================================================= */
.sow-sections-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 2;
}

/* =========================================================
   JEDNOTLIVÉ SEKCE
========================================================= */
a.sow-section {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

a.sow-section:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

a.sow-section:last-child {
  border-right: none;
}

/* =========================================================
   TEXTY
========================================================= */
.sow-section-content {
  text-align: center;
  z-index: 2;
  position: relative;
  pointer-events: none;
}

.sow-section-content h3 {
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   MOBIL / TABLET
   Na webu je mobil řešený jako vertikální stack panelů,
   každý panel má vlastní background image.
========================================================= */
@media (max-width: 768px) {
  .custom-hero-wrapper {
    margin-bottom: 20px;
  }

  .sow-main-container {
    background-image: none !important;
    background-color: #000;
    height: 100vh;
    min-height: 100svh;
  }

  .sow-main-container::before {
    display: none;
  }

  .sow-sections-wrapper {
    flex-direction: column;
    height: 100%;
  }

  a.sow-section {
    flex: 1;
    border-right: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  a.sow-section:last-child {
    border-bottom: none;
  }

  a.sow-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
  }

  .sow-section-content h3 {
    font-size: 20px;
    letter-spacing: 1.5px;
    padding: 0 10px;
  }

  /* Každá sekce má na mobilu vlastní obrázek */
  a.sow-section:nth-child(1) {
    background-image: url("https://objevte.senseofwine.cz/user/documents/upload/simone-santoro.jpg");
    background-position: center top;
  }

  a.sow-section:nth-child(2) {
    background-image: url("https://objevte.senseofwine.cz/user/documents/upload/Zappacosta-hero-100.jpg");
  }

  a.sow-section:nth-child(3) {
    background-image: url("https://objevte.senseofwine.cz/user/documents/upload/arizcuren_wines.jpg");
  }

  a.sow-section:nth-child(4) {
    background-image: url("https://www.senseofwine.cz/images/prima-domus.jpg");
  }
}

/* =========================================================
   OPRAVY PRO SHOPTET LAYOUT
========================================================= */
@media (max-width: 991px) {
  .overall-wrapper {
    padding-top: 0 !important;
  }
}

/* Header musí být nad hero */
#header {
  z-index: 999 !important;
}

.sticky-mobile #header {
  z-index: 999 !important;
}

/* =========================================================
   PŘEPÍNAČ JAZYKŮ CZ / EN
========================================================= */

/* Kontejner v hlavičce */
.languagesMenu {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 14px;
}

/* Vypnout výchozí prvky Shoptetu (vlaječkové tlačítko, hlavičky, šipka) */
.languagesMenu__flags,
.languagesMenu__header,
.languagesMenu .caret,
.languagesMenu__list__link .shp-flag {
  display: none !important;
}

/* Z dropdownu udělat inline řádek */
.languagesMenu__content,
.languagesMenu__box {
  display: block !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.languagesMenu__list {
  display: flex !important;
  position: static !important;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  list-style: none;
}

.languagesMenu__list li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Tenký oddělovač mezi jazyky */
.languagesMenu__list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.28);
}

.languagesMenu__list__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 10px !important;
  background: transparent !important;
  line-height: 1;
}

/* Dlouhé názvy nahradit kódy CZ / EN */
.languagesMenu__list__name {
  font-size: 0 !important;
  line-height: 1;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.languagesMenu__list__name::after {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.languagesMenu__list__link[href*="language=cs"] .languagesMenu__list__name::after {
  content: "CZ";
}
.languagesMenu__list__link[href*="language=en"] .languagesMenu__list__name::after {
  content: "EN";
}

.languagesMenu__list__link:hover .languagesMenu__list__name,
.languagesMenu__list__link:focus .languagesMenu__list__name {
  color: #fff;
}

/* Aktivní jazyk - bílý + tenké podtržení */
.languagesMenu__list__name--actual {
  color: #fff !important;
  position: relative;
}

.languagesMenu__list__name--actual::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #fff;
}

/* Zobrazit přepínač i na mobilu a tabletu (šablona ho skrývá) */
@media (max-width: 991px) {
  .languagesMenu {
    display: flex !important;
    position: static !important;
    right: auto !important;
    margin: 0 4px 0 0;
  }
  .languagesMenu__list__link {
    padding: 8px 6px !important;
  }
  .languagesMenu__list__name::after {
    font-size: 11px;
  }
}

/* =========================================================
   KOŠÍK V HLAVIČCE – IKONA LAHVE + POČET KUSŮ UPROSTŘED
   Shoptet renderuje odkaz na košík jako:
     <a class="cart-count full"><span class="sr-only">…</span>
        <i data-testid="headerCartCount">1</i></a>
   - ikona košíku = a.cart-count::before (ikonový font "shoptet")
   - číslo kusů  = <i>, defaultně malé bílé kolečko vpravo nahoře
   Když je košík prázdný, <i> neexistuje a zobrazí se jen lahev.
========================================================= */

/* 1) Nahradit ikonu košíku za obrys vinné lahve (SVG jako pozadí) */
a.cart-count::before {
  content: "" !important; /* zrušíme původní glyf košíku */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 72' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M16.5 6 L23.5 6 L23.5 28 C23.5 33 29.5 34 29.5 41 L29.5 65 C29.5 67 28 68.5 25.5 68.5 L14.5 68.5 C12 68.5 10.5 67 10.5 65 L10.5 41 C10.5 34 16.5 33 16.5 28 Z'/><line x1='16.5' y1='16' x2='23.5' y2='16'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto 56px !important; /* velikost lahve (výška) */
}

/* 2) Počet kusů = petrolejové kolečko přesahující tělo lahve, s bílým číslem */
a.cart-count i {
  position: absolute !important;
  top: 68% !important; /* na tělo lahve */
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 19px !important; /* průměr kolečka */
  height: 19px !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #9b2335 !important; /* vinná červená */
  border-radius: 50% !important;
  /* pro odlišení od černé hlavičky lze přidat tenký bílý lem:
       border: 1px solid #fff !important; */
  color: #fff !important; /* barva čísla */
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1 !important;
}

/* 3) MOBIL: černý pruh hlavičky se zužuje (~40 px), ale tlačítko košíku
   zůstává 80 px vysoké → lahev vycentrovaná do 80 px visela spodní půlkou
   pod pruhem a vypadala oříznutě. Na mobilu proto lahev zmenšíme a posadíme
   ji do viditelného pruhu (::before omezíme na výšku pruhu). */
@media (max-width: 991px) {
  a.cart-count::before {
    height: 40px !important;              /* výška viditelného pruhu */
    background-size: auto 34px !important; /* menší lahev */
  }
  a.cart-count i {
    /* lahev je přišpendlená k hornímu okraji tlačítka; výška tlačítka
       se na mobilu mění (60/80 px), proto kolečko pozicujeme pevně
       v pixelech od vršku (= střed těla lahve), ne v procentech */
    top: 29px !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 9px !important;
  }
}

/* =========================================================
   HLÁŠKA "PŘIDÁNO DO KOŠÍKU" – decentní toast vpravo dole
   Shoptet ji vykresluje takto (fixed, přes celou šířku nahoře):
     <div class="messages">
       <div class="msg msg-success"><div class="container"><span>…</span></div></div>
     </div>
   Přesuneme ji vpravo dole a zmenšíme na toast.
========================================================= */
.messages {
  top: auto !important;
  bottom: 24px !important;
  left: auto !important;
  right: 24px !important;
  width: auto !important;
  max-width: 340px !important;
}

.messages .msg {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* skrýt případnou velkou ikonu Shoptetu (necháme jen text) */
.messages .msg::before {
  display: none !important;
}

/* vnitřní .container Shoptetu roztahuje na plnou šířku – zúžit na toast */
.messages .container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 16px !important;
}

/* petrolejová (barva webu) místo křiklavé zelené */
.messages .msg-success {
  background: #003333 !important;
  color: #fff !important;
  border: none !important;
}
.messages .msg-success a {
  color: #fff !important;
  text-decoration: underline !important;
}

/* chybová hláška ať zůstane rozeznatelná (červená) */
.messages .msg-error,
.messages .msg-danger {
  background: #9b2335 !important;
  color: #fff !important;
  border: none !important;
}
.messages .msg-error a,
.messages .msg-danger a {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Mobil: toast přes spodní část šířky */
@media (max-width: 480px) {
  .messages {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: none !important;
  }
}