/* ==========================================================================
   KIRA TCG — vlastní vzhled (Sylveon paleta) — v1.2 (oprava)
   ==========================================================================
   ZMĚNY V TÉTO VERZI (v1.2):
   - Vyhledávací okno: opraveno, aby nezůstávalo schované pod tmavou vrstvou
     (z-index + širší selektory [class*="..."], které trefí i neznámé
     přesné názvy Shoptet tříd).
   - Tlačítka množství +/-: odstraněno pravidlo, které vyplnilo znaménko
     plnou barvou (vypadalo jako "vínový čtverec").
   - Postranní panel kategorií: silnější přepis výchozího rámečku šablony,
     který předtím probleskoval (tenčí, klidnější orámování).
   - Řadicí "pilulky": odstraněny přebytečné okraje, čistší vzhled.
   - Hover na podkategoriích: přidáno zřetelné podtržení + posun.
   - Přidána ucelená responzivní sekce pro mobil/tablet (sekce 10).
   ==========================================================================
   DŮLEŽITÉ — jak soubor připojit (přesně v tomto pořadí):

   1) Nahrajte "kira-tcg-theme.css" do Editoru šablon (např. do složky
      /css/ nebo /additional/ vaší šablony).
   2) V hlavním souboru šablony, kde se vkládají <link> na styly
      (obvykle "header.tpl" nebo "html-header.html" / layout soubor),
      přidejte TAG (ne @import!):
        <link rel="stylesheet" href="{$domain}/user/documents/css/kira-tcg-theme.css">
      (cestu upravte podle toho, kam soubor v Editoru šablon nahrajete)
      Vložte ho AŽ ZA odkaz na hlavní style.css šablony, aby naše
      pravidla měla přednost při stejné specifitě.

   Proč ne @import: @import uvnitř CSS musí být úplně prvním pravidlem
   v souboru — pokud skončí uprostřed/na konci hlavního style.css, prohlížeč
   ho potichu ignoruje a nic se neprojeví. Proto teď doporučuju samostatný
   <link> tag místo @import.

   3) Po každé úpravě v Shoptetu vyčistěte cache šablony/CSS
      (Vzhled webu -> často tlačítko "Vyčistit cache" nebo se CSS
      verzuje samo — pokud změny nejsou vidět, zkuste tvrdý reload
      prohlížeče Ctrl+Shift+R / Cmd+Shift+R).

   Soubor NEPŘEPISUJE žádnou strukturu HTML, jen styluje existující
   Shoptet třídy (header, sidebar, product, footer…), takže košík,
   filtry a objednávkový proces zůstávají funkční beze změny.

   Pokud i po nahrání nějaký prvek pořád nereaguje: pravým tlačítkem na
   něj -> "Prozkoumat" / "Inspect" -> pošlete mi screenshot panelu se
   třídami (class="...") toho konkrétního elementu, ať to doladím přesně
   na váš skutečný DOM (teď jsem vycházel z Vaší kategorie a screenshotů).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1) DESIGN TOKENY
   -------------------------------------------------------------------------- */
:root{
  /* brand */
  --kira-pink:        #F4B2D0;
  --kira-pink-deep:   #E58AB0;
  --kira-pink-soft:   #FCE3EE;
  --kira-blue:        #9ADBE8;
  --kira-blue-deep:   #6CC3D6;
  --kira-blue-soft:   #E3F6FA;

  /* podpůrné */
  --kira-plum:        #6B3654;   /* nadpisy, kontrastní akcenty */
  --kira-navy:         #2E3A59;  /* patička, tmavé plochy */
  --kira-ink:          #3A2E38;  /* běžný text (teplá tmavá, ne černá) */
  --kira-cream:        #FFF8FA;  /* pozadí stránky */
  --kira-white:        #FFFFFF;
  --kira-gold:         #F2C14E;  /* odznaky, akční prvky, "holo" lesk */
  --kira-line:         #F0DCE6;  /* jemné linky/oddělovače */

  /* typografie */
  --kira-font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --kira-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* tvar */
  --kira-radius-s:  10px;
  --kira-radius-m:  16px;
  --kira-radius-l:  26px;
  --kira-shadow:    0 6px 20px rgba(107,54,84,.10);
  --kira-shadow-hover: 0 14px 32px rgba(107,54,84,.18);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   2) ZÁKLAD STRÁNKY
   -------------------------------------------------------------------------- */
body{
  background: var(--kira-cream) !important;
  color: var(--kira-ink) !important;
  font-family: var(--kira-font-body) !important;
}

h1, h2, h3, h4,
.category-title, .sidebar__heading, .p-in .name a,
.pageElement__heading{
  font-family: var(--kira-font-display) !important;
  color: var(--kira-plum) !important;
  letter-spacing: .2px;
}

a{ color: var(--kira-pink-deep); }
a:hover{ color: var(--kira-plum); }

::selection{ background: var(--kira-pink); color: var(--kira-navy); }

/* jemný scrollbar v duchu palety (podporované prohlížeče) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--kira-blue-soft); }
::-webkit-scrollbar-thumb{ background: var(--kira-pink); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--kira-pink-deep); }

/* viditelný focus stav pro klávesnicové ovládání (přístupnost) */
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible{
  outline: 3px solid var(--kira-blue-deep);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3) HLAVIČKA
   -------------------------------------------------------------------------- */
#header{
  background: var(--kira-white) !important;
  position: relative;
  z-index: 20;
}

.header-top{
  background: linear-gradient(90deg, var(--kira-pink) 0%, var(--kira-blue) 100%) !important;
  padding: 10px 0 !important;
}

.header-top .navigation-tools,
.header-top a,
.header-top .icon-search,
.header-top .icon-login,
.header-top .icon-cart{
  color: var(--kira-navy) !important;
}

body .site-name a{
  display: inline-flex;
  align-items: center;
}

/* KRITICKÉ: bez tohoto stropu se logo vykreslí v plné (nativní) velikosti
   a natáhne za sebou celou hlavičku — to je přesně to, co bylo vidět
   na screenshotu (obří kolo přes půl obrazovky) */
body .site-name img,
body .header-top .site-name img,
body .header-bottom .site-name img{
  max-height: 84px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(46,58,89,.15));
}

@media (max-width: 768px){
  body .site-name img{ max-height: 56px !important; }
}

.header-bottom{
  background: var(--kira-white) !important;
  border-bottom: none !important;
  position: relative;
}

/* stužkový (scalloped) přechod pod hlavičkou — jemná narážka na Sylveon stužky,
   bez použití loga či postavy */
.header-bottom::after{
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 10px;
  background:
    radial-gradient(circle at 10px 0, transparent 9px, var(--kira-pink-soft) 9.5px)
    0 0 / 20px 10px repeat-x;
  opacity: .9;
  pointer-events: none;
}

/* Zesíleno (body prefix + *) — pokud text sedí na vnořeném <span>,
   nebo pokud Shoptet vlastní CSS má vyšší specifitu, tohle to přebije */
body .menu > li > a,
body .menu > li > a *{
  font-family: var(--kira-font-display) !important;
  color: var(--kira-plum) !important;
  font-weight: 600 !important;
  transition: color .18s ease !important;
}

body .menu > li{
  position: relative;
}

/* animovaná podtržená linka při najetí myší */
body .menu > li > a{
  position: relative;
}

body .menu > li > a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--kira-pink-deep);
  transition: width .2s ease, left .2s ease;
}

body .menu > li:hover > a,
body .menu > li:hover > a *,
body .menu > li > a:hover,
body .menu > li > a:hover *{
  color: var(--kira-pink-deep) !important;
}

body .menu > li:hover > a::after{
  width: 100%;
  left: 0;
}

body .menu > li.active > a,
body .menu > li.active > a *{
  color: var(--kira-pink-deep) !important;
}

/* Ikony hledání / přihlášení / košík — jde většinou o SVG, takže potřebují
   "fill", ne jen "color" (to byl důvod, proč se barva neprojevila).
   OPRAVA v1.3: dřívější selektor trefil jen ikonu košíku (proto jen ta
   měla animaci). Teď cílíme na VŠECHNY odkazy/tlačítka uvnitř
   .header-top obecně — tam žádné jiné interaktivní prvky nejsou,
   takže je to bezpečné a zachytí to i ikony s neznámým názvem třídy. */
body .header-top a,
body .header-top button{
  color: var(--kira-navy) !important;
}

body .header-top a,
body .header-top button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.55) !important;
  transition: background .18s ease, transform .18s ease !important;
}

body .header-top a svg,
body .header-top button svg{
  fill: var(--kira-navy) !important;
  stroke: var(--kira-navy) !important;
  transition: fill .18s ease, stroke .18s ease;
}

body .header-top a:hover,
body .header-top button:hover{
  background: var(--kira-white) !important;
  transform: translateY(-2px) scale(1.05);
}

.cart-count{
  background: var(--kira-gold) !important;
  color: var(--kira-navy) !important;
  font-weight: 700;
}

.search-form input,
.search-form .search{
  border-radius: var(--kira-radius-s) !important;
  border: 1px solid var(--kira-line) !important;
}

/* --------------------------------------------------------------------------
   3b) VYSKAKOVACÍ OKNA (vyhledávání, přihlášení, košík)
   OPRAVA v1.3 — DŮLEŽITÉ VYSVĚTLENÍ:
   V minulé verzi jsme sem natvrdo vynutili "position: relative" a
   "pointer-events: auto". Jenže Shoptet tato okna sám pozicuje a
   zobrazuje/skrývá přes vlastní JS (typicky position: fixed/absolute
   + přepínání viditelnosti). Tím, že jsme to přepsali, jsme rozbili
   jejich vlastní mechanismus — proto se přihlašovací okno a košík
   objevily hned pod hlavičkou místo na středu obrazovky (viz screenshoty)
   a proto vyhledávání zůstávalo "zaseknuté" v šedé vrstvě.
   Nyní stylujeme JEN vzhled (barvy, zaoblení, stín, padding) a necháváme
   pozicování, zobrazování a z-index čistě na Shoptetu.
   -------------------------------------------------------------------------- */
body .popup-widget,
body .toggle-window,
body [class*="popup"],
body [class*="modal"]{
  background: var(--kira-white) !important;
  border-radius: var(--kira-radius-m) !important;
  box-shadow: var(--kira-shadow-hover) !important;
  border: none !important;
  padding: 28px !important;
}

/* tmavší, konzistentní podklad za oknem — jen barva, žádné pozicování */
body .popup-overlay,
body .overlay,
body .window-overlay{
  background: rgba(46,58,89,.45) !important;
}

body .popup-widget input[type="text"],
body .toggle-window input[type="text"],
body [class*="popup"] input[type="text"],
body [class*="modal"] input[type="text"],
body .search-form input[type="text"]{
  border-radius: var(--kira-radius-s) !important;
  border: 1px solid var(--kira-line) !important;
  padding: 10px 16px !important;
  font-family: var(--kira-font-body) !important;
  background: var(--kira-white) !important;
}

body .popup-widget input[type="text"]:focus,
body .toggle-window input[type="text"]:focus,
body [class*="popup"] input[type="text"]:focus{
  border-color: var(--kira-blue-deep) !important;
  outline: none !important;
}

body .popup-widget button,
body .toggle-window button,
body [class*="popup"] button,
body [class*="modal"] button,
body .popup-widget .btn,
body .toggle-window .btn{
  background: var(--kira-pink-deep) !important;
  color: var(--kira-white) !important;
  border: none !important;
  border-radius: var(--kira-radius-s) !important;
  font-family: var(--kira-font-display) !important;
  font-weight: 600 !important;
  transition: background .15s ease;
  cursor: pointer !important;
}

body .popup-widget button:hover,
body .toggle-window button:hover,
body [class*="popup"] button:hover{
  background: var(--kira-plum) !important;
}

body .popup-widget [class*="close"],
body .toggle-window [class*="close"],
body [class*="popup"] [class*="close"],
body [class*="modal"] [class*="close"]{
  color: var(--kira-plum) !important;
  transition: transform .15s ease, color .15s ease;
  cursor: pointer !important;
}

body .popup-widget [class*="close"]:hover,
body .toggle-window [class*="close"]:hover{
  color: var(--kira-pink-deep) !important;
  transform: rotate(90deg);
}

/* načítací "spinner" v barvách značky, ne šedý default */
body .loading, body .loader, body [class*="spinner"]{
  border-color: var(--kira-pink-soft) !important;
  border-top-color: var(--kira-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   4) BOČNÍ PANEL / KATEGORIE
   OPRAVA v1.2: sjednocené, tenčí a klidnější orámování (dřív tam probleskoval
   výchozí "šablonový" silný barevný rámeček, protože originální selektor
   netrefil skutečný obalový element).
   -------------------------------------------------------------------------- */
body .sidebar .box,
body .box-categories,
body .sidebar > div{
  background: var(--kira-white) !important;
  border: 1px solid var(--kira-line) !important;
  border-radius: var(--kira-radius-m) !important;
  box-shadow: var(--kira-shadow) !important;
  overflow: hidden;
}

.box-categories .sidebar__heading{
  background: var(--kira-blue-soft);
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid var(--kira-line);
}

body .box-categories li a{
  color: var(--kira-ink) !important;
  display: block;
  position: relative;
  transition: background .15s ease, color .15s ease, padding-left .15s ease !important;
}

/* Zřetelnější hover — jemné podbarvení + podtržení + posun, aby bylo
   jasně vidět, že je položka interaktivní */
body .box-categories li a:hover{
  background: var(--kira-pink-soft) !important;
  color: var(--kira-plum) !important;
  padding-left: 24px !important;
  text-decoration: underline !important;
  text-decoration-color: var(--kira-pink-deep) !important;
  text-underline-offset: 3px;
}

body .box-categories li.active > a{
  color: var(--kira-pink-deep) !important;
  font-weight: 700 !important;
  background: var(--kira-blue-soft) !important;
}

/* --------------------------------------------------------------------------
   5) HLAVIČKA KATEGORIE / ŘAZENÍ / FILTRY
   -------------------------------------------------------------------------- */
.category-top{
  background: var(--kira-white);
  border-radius: var(--kira-radius-m);
  padding: 22px 26px;
  box-shadow: var(--kira-shadow);
  margin-bottom: 22px;
}

.category-title{
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 6px;
}

.category-perex{
  color: var(--kira-ink);
  opacity: .85;
}

.listSorting__control,
.unveil-button, .btn-default{
  border-radius: 999px !important;
  border: none !important;
  color: var(--kira-plum) !important;
  background: var(--kira-white) !important;
  transition: background .15s ease, color .15s ease;
}

.listSorting__control--current,
.listSorting__control:hover,
.unveil-button:hover{
  background: var(--kira-pink) !important;
  color: var(--kira-navy) !important;
}

/* --------------------------------------------------------------------------
   6) PRODUKTOVÉ KARTY — s "holo" efektem karet
   -------------------------------------------------------------------------- */
.products{
  gap: 18px;
}

.product{
  --mx: 50%;
  --my: 50%;
  background: var(--kira-white);
  border: 1px solid var(--kira-line);
  border-radius: var(--kira-radius-m);
  box-shadow: var(--kira-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}

.product:hover{
  transform: translateY(-4px);
  box-shadow: var(--kira-shadow-hover);
}

.product .p-in{
  position: relative;
  overflow: hidden;
  border-radius: var(--kira-radius-m) var(--kira-radius-m) 0 0;
}

/* holografická vrstva přes obrázek produktu — reaguje na pohyb myši (viz JS),
   bez JS zůstává jemná statická verze (degraduje bezpečně) */
.product .p-in::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255,255,255,.55) 0%,
    rgba(154,219,232,.35) 25%,
    rgba(244,178,208,.35) 50%,
    rgba(242,193,78,.25) 75%,
    transparent 85%
  );
  mix-blend-mode: soft-light;
  transition: opacity .25s ease;
}

.product:hover .p-in::before{
  opacity: 1;
}

.product .name a{
  font-size: 15px;
  line-height: 1.3;
}

.product .price-final{
  font-family: var(--kira-font-display);
  color: var(--kira-plum);
  font-weight: 700;
  font-size: 18px;
}

.product .flag{
  border-radius: 999px !important;
  font-family: var(--kira-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 4px 10px !important;
}

.product .flag-new{
  background: var(--kira-gold) !important;
  color: var(--kira-navy) !important;
}

.btn-cart, .add-to-cart-button{
  background: var(--kira-pink-deep) !important;
  border: none !important;
  border-radius: var(--kira-radius-s) !important;
  color: var(--kira-white) !important;
  font-family: var(--kira-font-display) !important;
  font-weight: 600 !important;
  transition: background .15s ease, transform .1s ease;
}

.btn-cart:hover, .add-to-cart-button:hover{
  background: var(--kira-plum) !important;
  transform: translateY(-1px);
}

/* OPRAVA v1.2: dřívější pravidlo vynutilo background-color i na element se
   samotným znaménkem +/-, což ho úplně zaplnilo barvou (vypadalo to jako
   plný čtverec bez znaménka). Teď stylujeme JEN vnější rámeček tlačítka
   a znaménko necháváme řízené barvou textu (color), ne pozadím. */
body .quantity .increase,
body .quantity .decrease{
  background: var(--kira-blue-soft) !important;
  border: 1px solid var(--kira-line) !important;
  border-radius: var(--kira-radius-s) !important;
  color: var(--kira-plum) !important;
  transition: background .15s ease, border-color .15s ease !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* pokud je znaménko kresleno jako SVG uvnitř tlačítka */
body .quantity .increase svg,
body .quantity .decrease svg{
  fill: var(--kira-plum) !important;
  stroke: var(--kira-plum) !important;
}

/* Poznámka: záměrně už nezasahujeme do ::before/::after uvnitř tlačítka —
   to byla příčina "plného čtverce". Necháváme znaménko na výchozím
   Shoptet vykreslení, měníme jen rámeček/pozadí okolo něj. */

body .quantity .increase:hover,
body .quantity .decrease:hover{
  background: var(--kira-pink-soft) !important;
  border-color: var(--kira-pink) !important;
}

body .quantity input[type="text"],
body .quantity input[type="number"]{
  border-radius: var(--kira-radius-s) !important;
  border: 1px solid var(--kira-line) !important;
  color: var(--kira-ink) !important;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7) OBECNÁ TLAČÍTKA / FORMULÁŘE
   -------------------------------------------------------------------------- */
.btn:not(.btn-cart):not(.add-to-cart-button){
  border-radius: var(--kira-radius-s) !important;
  font-family: var(--kira-font-display) !important;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], textarea, select{
  border-radius: var(--kira-radius-s) !important;
  border: 1px solid var(--kira-line) !important;
}

input:focus, textarea:focus, select:focus{
  border-color: var(--kira-blue-deep) !important;
}

/* --------------------------------------------------------------------------
   8) PATIČKA
   -------------------------------------------------------------------------- */
.footer{
  background: var(--kira-navy) !important;
  color: var(--kira-blue-soft) !important;
  position: relative;
  margin-top: 40px;
}

.footer::before{
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; top: -9px;
  height: 10px;
  background:
    radial-gradient(circle at 10px 10px, transparent 9px, var(--kira-navy) 9.5px)
    0 0 / 20px 10px repeat-x;
  pointer-events: none;
}

.footer a{ color: var(--kira-blue-soft) !important; }
.footer a:hover{ color: var(--kira-pink) !important; }

.footer .pageElement__heading,
.footer h2, .footer h3{
  color: var(--kira-pink) !important;
  font-family: var(--kira-font-display) !important;
}

.footer-bottom{
  background: #24304A !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

.copyright{
  color: rgba(255,255,255,.6) !important;
}

/* --------------------------------------------------------------------------
   9) VOLITELNÉ TŘÍDY PRO HTML BLOKY (homepage banner, sekce apod.)
   Vlož je do "HTML bloku" na hlavní stránce přes Shoptet widget.
   -------------------------------------------------------------------------- */
.kira-hero{
  background: linear-gradient(135deg, var(--kira-pink-soft) 0%, var(--kira-blue-soft) 100%);
  border-radius: var(--kira-radius-l);
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 32px;
}

.kira-hero h1{
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 10px;
}

.kira-hero p{
  max-width: 560px;
  margin: 0 auto 20px;
  color: var(--kira-ink);
}

.kira-hero .kira-btn{
  display: inline-block;
  background: var(--kira-pink-deep);
  color: var(--kira-white);
  font-family: var(--kira-font-display);
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}

.kira-hero .kira-btn:hover{
  background: var(--kira-plum);
  transform: translateY(-2px);
}

.kira-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kira-gold);
  color: var(--kira-navy);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   10) RESPONZIVITA — MOBIL A TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 991px){
  .category-top{ padding: 18px 20px; }
  .kira-hero{ padding: 34px 24px; }
}

@media (max-width: 767px){
  /* menší odsazení hlavičky, aby na malých displejích nezabírala moc místa */
  .header-top{ padding: 6px 0 !important; }

  body .site-name img{ max-height: 48px !important; }

  /* ikonky v hlavičce o trochu menší, ale pořád snadno klepnutelné (min 40px) */
  body .header-top .navigation-tools a,
  body .header-top a[class*="icon"]{
    width: 40px !important;
    height: 40px !important;
  }

  .category-top{
    padding: 16px 18px;
    border-radius: var(--kira-radius-s);
  }

  .category-title{ font-size: 22px; }

  /* řadicí "pilulky" ať se na mobilu nezalamují ošklivě, ale rolují vodorovně */
  .listSorting{
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .listSorting::-webkit-scrollbar{ display: none; }
  .listSorting__control{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* karty produktů: o něco menší padding a písmo, ať se toho vejde víc */
  .product .name a{ font-size: 14px; }
  .product .price-final{ font-size: 16px; }

  /* tlačítko do košíku i množství přes celou šířku — snazší klepnutí palcem */
  .btn-cart, .add-to-cart-button{
    width: 100%;
    justify-content: center;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body .quantity .increase,
  body .quantity .decrease{
    width: 40px !important;
    height: 40px !important;
  }

  .kira-hero{ padding: 26px 18px; border-radius: var(--kira-radius-m); }
  .kira-hero h1{ font-size: 24px; }

  /* vyhledávací okno na mobilu přes (skoro) celou šířku obrazovky */
  body .popup-widget,
  body [class*="popup"],
  body [class*="modal"]{
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 20px !important;
  }
}

@media (max-width: 480px){
  body .site-name img{ max-height: 40px !important; }
  .category-title{ font-size: 20px; }
  .kira-hero h1{ font-size: 21px; }
}

/* responzivní doladění (starší pravidlo, ponecháno pro jistotu) */
@media (max-width: 768px){
  .category-top{ padding: 16px 18px; }
  .kira-hero{ padding: 32px 22px; }
}