/*
Theme Name: FISH is BRO
Theme URI: https://fishisbro.cz
Description: Vzhled eshopu FISH is BRO. Potomek šablony Woostify — přebírá od ní celé rozvržení obchodu i nákupní cestu a mění jen vzhled. Díky tomu se stránka produktu, košík ani pokladna nemusely stavět znovu a fungují dál tak, jak fungovaly.
Author: UltimWeb
Author URI: https://ultimweb.cz
Template: woostify
Version: 1.0.0
Text Domain: fishisbro
*/

/* ==========================================================================
   FISH is BRO — designový systém

   Tmavý podklad, oranžová z loga, tři písma. Hodnoty nejsou odhadnuté:
   kontrasty jsou spočítané proti nejtmavšímu podkladu #06080A.

     --bila    na --dno   15,9 : 1
     --sedy    na --dno    7,7 : 1
     --sedy-2  na --dno    5,1 : 1   (nejnižší použitá hodnota)
     --oranz   na --dno    8,5 : 1   (proto se smí použít i na text)

   Pozor na jednu věc: bílý text na oranžovém tlačítku má jen 2,35 : 1.
   Na oranžové ploše proto vždy tmavý text — proměnná --na-oranzove.
   ========================================================================== */

:root{
  /* podklad: skoro černá a tři vrstvy povrchů nad ní */
  --dno:#06080A;
  --v1:#0C0F12;
  --v2:#12161A;
  --v3:#1A1F24;

  --bila:#F5F6F7;
  --sedy:#9BA1A6;
  --sedy-2:#7A8186;

  --oranz:#FF8900;
  --oranz-svetla:#FFA338;
  --oranz-tmava:#D97400;
  --na-oranzove:#0A0705;

  --linka:rgba(255,255,255,.08);
  --linka-2:rgba(255,255,255,.16);
  --linka-oranz:rgba(255,137,0,.35);

  --r:4px;
  --r-s:10px;
  --r-m:16px;
  --r-l:26px;

  --ease:cubic-bezier(.22,.61,.36,1);

  --font-d:"Anton","Arial Narrow",Impact,sans-serif;
  --font-t:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --sirka:1280px;
}

/* --------------------------------------------------------------- základ */
body,
body.woocommerce,
.site{
  background:var(--dno);
  color:var(--bila);
  font-family:var(--font-t);
  font-size:16px;
  line-height:1.65;
}

/* Woostify si obsah drží v .site-content; sjednocujeme šířku. */
.woostify-container,
.site-content > .woostify-container,
.container{
  max-width:var(--sirka);
}

h1,h2,h3,h4,h5,h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title{
  font-family:var(--font-d);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.06;
  text-transform:uppercase;
  color:var(--bila);
}

h1,.entry-title,.product_title{font-size:clamp(2rem,4.4vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.4rem);}
h3{font-size:clamp(1.2rem,2vw,1.6rem);}

p,li,td,th,dd,dt{color:var(--bila);}
.woocommerce-breadcrumb,
.post-meta,
small,
.drobne{color:var(--sedy);}

a{color:var(--oranz);text-decoration:none;transition:color .25s var(--ease);}
a:hover,a:focus{color:var(--oranz-svetla);}

/* Viditelné zaměření klávesnicí — bez něj se web nedá ovládat bez myši. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible{
  outline:2px solid var(--oranz);
  outline-offset:2px;
  border-radius:var(--r);
}

/* --------------------------------------------------------------- tlačítka */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--font-t);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:0;
  border-radius:var(--r-s);
  padding:14px 26px;
  background:var(--oranz);
  color:var(--na-oranzove);
  transition:background-color .22s var(--ease), transform .22s var(--ease);
  cursor:pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.button:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--oranz-svetla);
  color:var(--na-oranzove);
  transform:translateY(-1px);
}

/* Druhotné tlačítko: obrys místo výplně. */
.button.tlacitko-duch,
.woocommerce a.button.tlacitko-duch{
  background:transparent;
  color:var(--bila);
  box-shadow:inset 0 0 0 1px var(--linka-2);
}
.button.tlacitko-duch:hover{
  background:transparent;
  color:var(--oranz);
  box-shadow:inset 0 0 0 1px var(--linka-oranz);
}

/* --------------------------------------------------------------- hlavička */
.site-header,
.woostify-header,
.site-header.header-sticky{
  background:rgba(6,8,10,.88);
  backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--linka);
}
.site-header a{color:var(--bila);}
.site-header a:hover{color:var(--oranz);}
.primary-navigation a,
.main-navigation a{
  font-family:var(--font-t);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.02em;
}

/* --------------------------------------------------- výpis produktů */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.woocommerce ul.products li.product:hover{
  border-color:var(--linka-oranz);
  transform:translateY(-3px);
}
.woocommerce ul.products li.product a img{
  margin:0;
  border-radius:0;
  transition:transform .7s var(--ease);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04);}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.02rem;
  line-height:1.15;
  padding:0 16px;
  margin:14px 0 6px;
}
.woocommerce ul.products li.product .price{
  display:block;
  padding:0 16px 16px;
  font-family:var(--font-m);
  font-size:1.02rem;
  font-weight:700;
  color:var(--oranz);
}
.woocommerce ul.products li.product .price del{color:var(--sedy-2);font-weight:400;}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--oranz);}

/* Štítek slevy */
.woocommerce span.onsale{
  background:var(--oranz);
  color:var(--na-oranzove);
  font-family:var(--font-m);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.04em;
  border-radius:100px;
  min-height:auto;
  min-width:auto;
  padding:5px 12px;
  line-height:1.3;
}

/* --------------------------------------------------- stránka produktu */
.woocommerce div.product .product_title{margin-bottom:10px;}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--font-m);
  font-size:1.7rem;
  font-weight:700;
  color:var(--oranz);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--sedy);
  font-size:1.02rem;
}
.woocommerce div.product form.cart div.quantity input,
.woocommerce .quantity input.qty{
  background:var(--v2);
  border:1px solid var(--linka-2);
  color:var(--bila);
  border-radius:var(--r-s);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--linka);}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;
  border:0;
  border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--font-t);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sedy);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--oranz);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom:2px solid var(--oranz);
}

/* --------------------------------------------------- košík a pokladna */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review table.shop_table{
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  border-collapse:separate;
  overflow:hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-top:1px solid var(--linka);
  color:var(--bila);
}
.woocommerce table.shop_table thead th{
  font-family:var(--font-t);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sedy);
  background:var(--v2);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading{
  font-size:1.3rem;
}
.woocommerce .order-total .amount,
.woocommerce-checkout .order-total .amount{
  font-family:var(--font-m);
  font-size:1.35rem;
  color:var(--oranz);
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment{
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--v2);
  color:var(--sedy);
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--v2);}

/* --------------------------------------------------------------- formuláře */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single,
input[type="text"],input[type="email"],input[type="tel"],
input[type="password"],input[type="number"],input[type="search"],
textarea,select{
  background:var(--v2);
  border:1px solid var(--linka-2);
  color:var(--bila);
  border-radius:var(--r-s);
  padding:13px 15px;
}
.woocommerce form .form-row input.input-text:focus,
textarea:focus,select:focus{
  border-color:var(--linka-oranz);
  outline:none;
}
::placeholder{color:var(--sedy-2);opacity:1;}
.woocommerce form .form-row label{
  color:var(--sedy);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
}
.required{color:var(--oranz);}

/* --------------------------------------------------------------- hlášky */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--v1);
  border-top:3px solid var(--oranz);
  color:var(--bila);
  border-radius:var(--r-s);
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--oranz);}

/* --------------------------------------------------------------- patička */
.site-footer{
  background:var(--v1);
  border-top:1px solid var(--linka);
  color:var(--sedy);
}
.site-footer a{color:var(--sedy);}
.site-footer a:hover{color:var(--oranz);}

/* --------------------------------------------------- drobečky a stránkování */
.woocommerce-breadcrumb a{color:var(--sedy);}
.woocommerce-breadcrumb a:hover{color:var(--oranz);}
.woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex;}
.woocommerce nav.woocommerce-pagination ul li{
  border:0;
  border-radius:var(--r-s);
  overflow:hidden;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--v2);
  color:var(--bila);
  font-family:var(--font-m);
  padding:10px 15px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--oranz);
  color:var(--na-oranzove);
}

/* ------------------------------------------------------ pohyb jen když ho chce */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .woocommerce ul.products li.product:hover,
  .button:hover{transform:none;}
}

/* ==========================================================================
   ÚVODNÍ STRÁNKA
   Bloky, které staví shortcody [fib_cisla], [fib_kategorie] a [fib_doprava],
   plus úpravy sekcí poskládaných v Elementoru.
   ========================================================================== */

/* Sekce úvodky mají svůj dech; Elementor sám odsazení nedává. */
.fib-sekce{padding:88px 0;}
.fib-sekce--uzka{padding:56px 0;}
.fib-sekce--tmava{background:var(--v1);}

.fib-oci{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-m);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oranz);
}
.fib-oci::before{content:"";width:26px;height:2px;background:var(--oranz);}

/* --------------------------------------------------------------- hero */
.fib-hero{position:relative;overflow:hidden;}
/* Obří průsvitný nápis za obsahem — stejný nápad jako v návrhu. */
.fib-hero::before{
  content:"BOILIES";
  position:absolute;
  left:-2%;top:6%;
  font-family:var(--font-d);
  font-size:clamp(7rem,17vw,15rem);
  line-height:1;
  color:rgba(255,255,255,.028);
  letter-spacing:.02em;
  pointer-events:none;
  user-select:none;
}
.fib-hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:.98;
  margin:16px 0 18px;
}
.fib-hero h1 .fib-oranz{color:var(--oranz);display:block;}
.fib-hero p.fib-vede{
  font-size:1.1rem;
  line-height:1.75;
  color:var(--sedy);
  max-width:46ch;
}

.fib-akce{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;}

/* Tři důvody pod tlačítky. */
.fib-duvody{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:30px 0 0;padding:22px 0 0;
  border-top:1px dashed var(--linka-2);
  list-style:none;
}
.fib-duvody li{
  display:flex;align-items:center;gap:9px;
  font-size:.92rem;color:var(--sedy);
}
.fib-duvody li::before{
  content:"";
  width:7px;height:7px;flex:0 0 auto;
  background:var(--oranz);
  transform:rotate(45deg);
}

/* --------------------------------------------------------------- čísla */
.fib-cisla{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--linka);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  overflow:hidden;
}
.fib-cislo{
  background:var(--dno);
  padding:30px 22px;
  text-align:center;
}
.fib-cislo b{
  display:block;
  font-family:var(--font-d);
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
  color:var(--oranz);
}
.fib-cislo span{
  display:block;
  margin-top:8px;
  font-family:var(--font-m);
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sedy-2);
}

/* --------------------------------------------------------------- kategorie */
.fib-kat{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.fib-kat-dlazdice{
  display:flex;
  flex-direction:column;
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  overflow:hidden;
  color:var(--bila);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.fib-kat-dlazdice:hover{
  border-color:var(--linka-oranz);
  transform:translateY(-3px);
  color:var(--bila);
}
.fib-kat-obr{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--v2);}
.fib-kat-obr img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.fib-kat-dlazdice:hover .fib-kat-obr img{transform:scale(1.06);}
.fib-kat-telo{padding:14px 16px 16px;}
.fib-kat-nazev{
  display:block;
  font-family:var(--font-d);
  font-size:1rem;
  text-transform:uppercase;
  line-height:1.15;
}
.fib-kat-pocet{
  display:block;
  margin-top:5px;
  font-family:var(--font-m);
  font-size:.74rem;
  color:var(--sedy-2);
}

/* --------------------------------------------------------------- doprava */
.fib-doprava{
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:center;
}
.fib-doprava-polozka{
  display:inline-flex;align-items:baseline;gap:10px;
  padding:13px 22px;
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:100px;
}
.fib-doprava-polozka b{
  font-family:var(--font-t);
  font-weight:700;
  font-size:.9rem;
}
.fib-doprava-polozka span,
.fib-doprava-polozka .woocommerce-Price-amount{
  font-family:var(--font-m);
  font-size:.9rem;
  color:var(--oranz);
}

/* --------------------------------------------------------------- příběh */
.fib-pribeh{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:52px;
  align-items:center;
}
.fib-pribeh p{color:var(--sedy);font-size:1.04rem;line-height:1.8;}
.fib-pribeh img{border-radius:var(--r-m);}

/* --------------------------------------------------------------- výzva */
.fib-vyzva{
  text-align:center;
  padding:64px 32px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,137,0,.12), transparent 62%),
    var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-l);
}
.fib-vyzva p{color:var(--sedy);max-width:52ch;margin-inline:auto;}

/* --------------------------------------------------------------- mřížka produktů na úvodce */
.fib-sekce .woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:0;
}
.fib-sekce .woocommerce ul.products::before,
.fib-sekce .woocommerce ul.products::after{display:none;}
.fib-sekce .woocommerce ul.products li.product{width:auto;margin:0;float:none;}

/* --------------------------------------------------------------- responzivita */
@media (max-width:1080px){
  .fib-kat{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fib-sekce .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:860px){
  .fib-sekce{padding:60px 0;}
  .fib-kat{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fib-cisla{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fib-pribeh{grid-template-columns:minmax(0,1fr);gap:30px;}
  .fib-sekce .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .fib-kat{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fib-hero::before{font-size:6rem;}
  .fib-vyzva{padding:44px 20px;}
}

/* --------------------------------------------------------------------------
   Dvousloupcové bloky úvodní stránky

   Elementor staví kontejnery jako flex, ne grid. Zalamování se proto musí
   řešit přes flex-direction; grid-template-columns na ně nemá vliv.
   -------------------------------------------------------------------------- */
.fib-hero-mriz,
.fib-pribeh{display:flex;flex-wrap:wrap;align-items:center;}
.fib-hero-mriz > *,
.fib-pribeh > *{min-width:0;}

@media (max-width:860px){
  .fib-hero-mriz,
  .fib-pribeh{flex-direction:column;align-items:stretch;gap:30px;}
  .fib-hero-mriz > *,
  .fib-pribeh > *{width:100%;flex:0 0 auto;}
  /* Na mobilu ať fotka nezabírá půl obrazovky výšky. */
  .fib-hero-mriz img,
  .fib-pribeh img{max-height:46vh;object-fit:cover;width:100%;}
}

/* ==========================================================================
   MATICE PŘÍCHUŤ × FORMA
   Devět sloupců se na mobil nevejde, proto vodorovné rolování s ukotveným
   prvním sloupcem — příchuť zůstane vidět i po odrolování doprava.
   ========================================================================== */
.fib-matice-obal{
  overflow-x:auto;
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  background:var(--v1);
  -webkit-overflow-scrolling:touch;
}
.fib-matice{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-t);
  margin:0;
}
.fib-matice-popis{
  caption-side:top;
  text-align:left;
  padding:18px 20px 14px;
  font-size:.9rem;
  color:var(--sedy);
}
.fib-matice th,
.fib-matice td{
  border:1px solid var(--linka);
  padding:0;
  text-align:center;
}
.fib-matice thead th{
  padding:12px 8px;
  font-family:var(--font-m);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sedy);
  background:var(--v2);
  white-space:nowrap;
}
.fib-matice-roh,
.fib-matice-prichut{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--v2);
  text-align:left !important;
  min-width:150px;
}
.fib-matice-prichut{
  padding:0 !important;
  font-family:var(--font-d);
  font-size:.98rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.fib-matice-prichut a{
  display:block;
  padding:13px 16px;
  color:var(--bila);
}
.fib-matice-prichut a:hover{color:var(--oranz);background:var(--v3);}

/* Obsazené políčko: celá plocha je odkaz, ať se dobře trefuje prstem. */
.fib-matice-je a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  transition:background-color .2s var(--ease);
}
.fib-matice-znak{
  width:11px;height:11px;
  background:var(--oranz);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}
.fib-matice-je a:hover{background:rgba(255,137,0,.14);}
.fib-matice-je a:hover .fib-matice-znak{transform:rotate(45deg) scale(1.35);}
.fib-matice-je a:focus-visible{outline-offset:-3px;}

.fib-matice-prazdne{
  color:var(--sedy-2);
  font-size:1.1rem;
  line-height:46px;
  background:rgba(255,255,255,.012);
}

/* Popisek jen pro čtečky — Woostify ho nemusí mít. */
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ==========================================================================
   VE STEJNÉ VŮNI (stránka produktu)
   ========================================================================== */
.fib-vune{margin:56px 0 0;padding:32px 0 0;border-top:1px solid var(--linka);}
.fib-vune-nadpis{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:22px;}
.fib-vune-nadpis em{font-style:normal;color:var(--oranz);}
.woocommerce ul.products.fib-vune-mrizka{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0;
  list-style:none;
}
.woocommerce ul.products.fib-vune-mrizka::before,
.woocommerce ul.products.fib-vune-mrizka::after{display:none;}
.woocommerce ul.products.fib-vune-mrizka li.product{width:auto;margin:0;float:none;}
.fib-vune-mrizka .woocommerce-loop-product__title{font-size:.94rem;padding:0 14px;margin:12px 0 4px;}
.fib-vune-mrizka .price{padding:0 14px 14px;}
.fib-vune-vice{margin-top:22px;}

@media (max-width:1080px){
  .woocommerce ul.products.fib-vune-mrizka{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:700px){
  .woocommerce ul.products.fib-vune-mrizka{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fib-matice-roh,.fib-matice-prichut{min-width:126px;}
}

/* --------------------------------------------------------------------------
   OPRAVA: dvousloupcové bloky se zalamovaly i na širokém displeji

   Elementor sloupcům nastavuje width:50 %, jenže mezera 52 px se do těch
   sta procent nevejde — 50 % + 50 % + 52 px > 100 %, takže druhý sloupec
   spadl pod první a fotka v heru se ocitla pod textem.

   Řeší se to tím, že si sloupce šířku nedrží a rozdělí si řádek podle toho,
   co zbude po mezeře (flex:1 1 0). Proměnná --width je Elementorova.
   -------------------------------------------------------------------------- */
.fib-hero-mriz > .e-con,
.fib-pribeh > .e-con{
  --width:auto;
  flex:1 1 0;
  min-width:0;
}
@media (max-width:1024px){
  .fib-hero-mriz > .e-con,
  .fib-pribeh > .e-con{--width:100%;flex:0 0 auto;width:100%;}
}

/* ==========================================================================
   HLAVIČKA
   Návrh má jeden tenký informační pruh a pod ním nízkou hlavičku se
   sedmdesáti čtyřmi pixely, malým logem vlevo a menu vpravo. Předtím byly
   tři řádky nad sebou a přes 250 px, než začal obsah.
   ========================================================================== */
.fib-top{
  background:var(--v1);
  border-bottom:1px solid var(--linka);
  font-family:var(--font-m);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.fib-top .elementor-widget-container > p{margin:0;}
.fib-top p{padding:9px 0;color:var(--sedy-2);}
.fib-top a{color:var(--sedy);margin-left:22px;}
.fib-top a:first-child{margin-left:0;}
.fib-top a:hover{color:var(--oranz);}
.fib-top-spojeni{text-align:right;}

.fib-hlava{
  position:sticky;
  top:0;
  z-index:400;
  background:rgba(6,8,10,.9);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linka);
}
/* Návrh počítá s hlavičkou 70 px. Kontejner Elementoru si k tomu přidává
   vlastních 10 px nahoře i dole, takže se odsazení ruší a výška se drží
   jen na vnitřním bloku. (Než se opravil selektor — .e-con-inner je vnuk,
   ne dítě — tohle pravidlo neplatilo a hlavička si výšku určovala sama.) */
.fib-hlava{padding-top:0;padding-bottom:0;}
.fib-hlava .e-con-inner{min-height:70px;}
.fib-logo img{width:150px;height:auto;display:block;}
.fib-logo{flex:0 0 auto;}
.fib-menu{flex:1 1 auto;}
.fib-kosik{flex:0 0 auto;}

.fib-menu .hfe-nav-menu li a.hfe-menu-item{
  font-family:var(--font-t);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.01em;
  color:var(--bila);
  padding:10px 15px;
}
.fib-menu .hfe-nav-menu li a.hfe-menu-item:hover,
.fib-menu .hfe-nav-menu li.current-menu-item a.hfe-menu-item{color:var(--oranz);}

/* Woostify vlastní hlavičku nevykresluje (dělá to Header Footer Elementor),
   ale kdyby se objevila, ať se neduplikuje. */
.fib-hlava + .site-header{display:none;}

@media (max-width:768px){
  .fib-top-tvrzeni{display:none;}
  .fib-top-spojeni{text-align:center;}
  .fib-logo img{width:118px;}
  .fib-hlava .e-con-inner{min-height:62px;}
}

/* ==========================================================================
   HERO FOTKA s popiskem a cenou
   ========================================================================== */
.fib-hero-foto{
  position:relative;
  margin:0;
  border-radius:var(--r-m);
  overflow:hidden;
  border:1px solid var(--linka);
}
.fib-hero-foto img{display:block;width:100%;height:auto;}
.fib-hero-popis{
  position:absolute;
  left:16px;bottom:16px;
  padding:10px 16px;
  border-radius:var(--r-s);
  background:rgba(6,8,10,.72);
  backdrop-filter:blur(8px);
  font-family:var(--font-m);
  font-size:.78rem;
  line-height:1.5;
  text-align:left;
}
.fib-hero-popis b{display:block;color:var(--bila);font-weight:500;}
.fib-hero-popis span{display:block;color:var(--sedy-2);}
.fib-hero-cena{
  position:absolute;
  right:16px;bottom:16px;
  display:grid;
  place-items:center;
  padding:12px 16px;
  border-radius:var(--r-s);
  background:var(--oranz);
  color:var(--na-oranzove);
  line-height:1;
}
.fib-hero-cena b{font-family:var(--font-d);font-size:1.5rem;}
.fib-hero-cena span{font-family:var(--font-m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.fib-kontakt-mriz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 36px;}
.fib-kontakt-blok{
  background:var(--v1);
  border:1px solid var(--linka);
  border-radius:var(--r-m);
  padding:26px;
}
.fib-kontakt-blok h2{font-size:1.1rem;margin-bottom:12px;}
.fib-kontakt-blok p{color:var(--sedy);}
@media (max-width:700px){ .fib-kontakt-mriz{grid-template-columns:minmax(0,1fr);} }

/* --------------------------------------------------------------------------
   Ikony u tří důvodů v heru

   Návrh má u každého důvodu vlastní ikonu (hvězda, přepravka, štít), ne tři
   stejné kostičky. Kreslí se maskou z vloženého SVG — nepřidává to žádný
   další požadavek a barvu si vezme z currentColor.
   -------------------------------------------------------------------------- */
.fib-duvody li::before{
  width:17px;height:17px;
  background:var(--oranz);
  transform:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* hvězda — vlastní receptura */
.fib-duvody li:nth-child(1)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.6 6.1.8-4.4 4.3 1 6-5.3-2.9-5.3 2.9 1-6L3.3 9.4l6.1-.8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.6 6.1.8-4.4 4.3 1 6-5.3-2.9-5.3 2.9 1-6L3.3 9.4l6.1-.8z'/%3E%3C/svg%3E");
}
/* přepravka — ruční výroba */
.fib-duvody li:nth-child(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 8 5 4h14l2 4M10 13h4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 8 5 4h14l2 4M10 13h4'/%3E%3C/svg%3E");
}
/* štít — testováno */
.fib-duvody li:nth-child(3)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21S5 17 5 11V6l7-3 7 3v5c0 6-7 10-7 10z'/%3E%3Cpath d='m9 11.5 2 2 4-4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21S5 17 5 11V6l7-3 7 3v5c0 6-7 10-7 10z'/%3E%3Cpath d='m9 11.5 2 2 4-4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TELEFON

   Návrh se kreslil na širokém displeji a na telefonu se rozpadl. Tady je
   všechno, co se muselo dorovnat.

   Pozor na jednotky: kořenové písmo má 14 px, takže 1 rem = 14 px, ne 16.
   Velikosti dotykových prvků jsou proto schválně v pixelech, ať nezáleží
   na tom, kde se sazba zrovna počítá.
   ========================================================================== */

/* -------------------------------------------------------------- hlavička
   Menu widget měl od nás flex:1 1 auto, takže se na úzkém displeji roztáhl
   na celý řádek a logo, košík i menu se každý zlomily na svůj — hlavička
   měřila 197 px a první obsah začínal až na 375. Na mobilu proto řádek
   nelomíme, widgetům bereme roztahování a hamburger jde doprava.
   ------------------------------------------------------------------------ */
@media (max-width:1024px){
  .fib-hlava .e-con-inner{flex-wrap:nowrap;min-height:58px;gap:10px;}
  .fib-hlava .fib-logo{order:1;flex:0 0 auto;}
  .fib-hlava .fib-kosik{order:2;flex:0 0 auto;width:auto;margin-left:auto;}
  .fib-hlava .fib-menu{order:3;flex:0 0 44px;width:44px;}
  .fib-hlava .fib-menu .hfe-nav-menu__toggle{margin:0 0 0 auto;}

  /* Hamburger i ikona košíku měly od pluginu #494C4F a černou výplň —
     na podkladu #06080A je nebylo vidět. */
  .fib-hlava .fib-menu .hfe-nav-menu__toggle,
  .fib-hlava .fib-menu .hfe-nav-menu-icon{color:var(--bila);}
  .fib-hlava .fib-menu .hfe-nav-menu-icon svg{
    fill:currentColor;width:24px;height:24px;
  }
  .fib-hlava .fib-menu .hfe-nav-menu__toggle:hover .hfe-nav-menu-icon{color:var(--oranz);}

  /* Rozbalené menu mělo bílé pozadí — background_color_dropdown_item má
     ve widgetu výchozí #fff. Elementor to pravidlo sází dvakrát: jednou
     v post-534.css a ještě jednou přímo ve stránce, a ta druhá kopie je až
     za naším souborem. Při shodné váze by tedy vyhrála ona — a platí i na
     odkazy, takže nabídka byla bílá na bílém. Proto je selektor o třídu
     delší (.fib-hlava.e-con); na pořadí souborů se tu spolehnout nedá. */
  .fib-hlava.e-con .fib-menu nav.hfe-nav-menu__layout-horizontal.hfe-dropdown,
  .fib-hlava.e-con .fib-menu nav.hfe-nav-menu__layout-horizontal.hfe-dropdown .menu-item a.hfe-menu-item{
    background-color:rgba(6,8,10,.97);
  }
  .fib-hlava.e-con .fib-menu nav.hfe-dropdown.menu-is-active{
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--linka);
    box-shadow:0 26px 44px rgba(0,0,0,.6);
  }
  .fib-hlava.e-con .fib-menu nav.hfe-dropdown .hfe-nav-menu{padding:4px 0 10px;}
  .fib-hlava.e-con .fib-menu nav.hfe-dropdown .menu-item{width:100%;}
  .fib-hlava.e-con .fib-menu nav.hfe-nav-menu__layout-horizontal.hfe-dropdown .menu-item a.hfe-menu-item{
    display:flex;align-items:center;
    min-height:54px;padding:15px 24px;
    font-size:17px;color:var(--bila);
  }
  .fib-hlava.e-con .fib-menu nav.hfe-dropdown .menu-item:not(:last-child) a.hfe-menu-item{
    border-bottom:1px solid var(--linka);
  }
  .fib-hlava.e-con .fib-menu nav.hfe-nav-menu__layout-horizontal.hfe-dropdown .menu-item a.hfe-menu-item:hover,
  .fib-hlava.e-con .fib-menu nav.hfe-nav-menu__layout-horizontal.hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item{
    color:var(--oranz);background-color:rgba(255,137,0,.09);
  }
}

/* --------------------------------------------------- informační pruh nahoře
   Telefon a e-mail jsou na mobilu to nejužitečnější, co v pruhu je, ale
   odkazy měly na výšku 17 px, což se prstem netrefuje. */
@media (max-width:768px){
  .fib-top{font-size:11px;letter-spacing:.05em;}
  .fib-top > .e-con,
  .fib-top .e-con-inner{padding-top:0;padding-bottom:0;min-height:0;}
  .fib-top p{padding:0;}
  .fib-top a{display:inline-block;padding:9px 0;margin-left:18px;}
}

/* ------------------------------------------------------- dvousloupcové bloky
   Elementorovy kontejnery mají výchozí odsazení 10 px a v heru i v příběhu
   jsou dva vnořené. Obsah tak byl odsazený 44 px místo 24 a z 390 px šířky
   zbylo na fotku 302. Na mobilu to odsazení nepotřebujeme. */
@media (max-width:860px){
  .fib-hero-mriz,
  .fib-hero-mriz > .e-con,
  .fib-pribeh,
  .fib-pribeh > .e-con{padding-left:0;padding-right:0;}
}

/* ------------------------------------------------------------------ tlačítka
   Sazba .86rem vychází při kořenu 14 px na 12 px, což je na hlavní výzvu
   k akci na telefonu málo. */
@media (max-width:768px){
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  /* .alt musí být vypsané zvlášť: základní pravidlo výš je adresuje
     třemi třídami, takže by tenhle blok jinak přebily i tady. */
  .woocommerce a.button.alt,
  .woocommerce button.button.alt{font-size:15px;min-height:50px;}
  .fib-akce .button{display:flex;width:100%;justify-content:center;}
}

/* ==========================================================================
   MATICE NA TELEFONU — z tabulky karty

   Deset sloupců se do 342 px nevejde. Vodorovné rolování mělo řešit
   min-width na buňkách, jenže tabulkové rozvržení ho v border-collapse
   ignoruje: sloupce se stlačily na 34 px, „Pekelný tuňák" se lámal po
   jednom písmenu a tabulka narostla do výšky 2304 px.

   Místo toho je z každého řádku karta: nahoře příchuť, pod ní odkazy na
   podoby, ve kterých se dělá. Prázdná políčka se vypouštějí — na telefonu
   nemá cenu ukazovat, co neexistuje, a ubere to polovinu výšky.
   ========================================================================== */
.fib-matice-forma{display:none;}
.fib-matice-popis-karty{display:none;}

@media (max-width:700px){
  .fib-matice-obal{overflow:visible;border:0;background:none;border-radius:0;}
  .fib-matice{display:block;width:100%;}
  .fib-matice thead{display:none;}
  .fib-matice-popis{display:block;padding:0 0 16px;}
  .fib-matice-popis-tabulka{display:none;}
  .fib-matice-popis-karty{display:inline;}

  .fib-matice tbody{display:grid;gap:12px;}
  .fib-matice tr{
    display:flex;flex-wrap:wrap;gap:8px;
    padding:15px 15px 16px;
    border:1px solid var(--linka);
    border-radius:var(--r-m);
    background:var(--v1);
  }
  .fib-matice th,
  .fib-matice td{border:0;padding:0;}

  .fib-matice-prichut{
    flex:0 0 100%;
    position:static;
    min-width:0;
    margin:0 0 3px;
    background:none;
    font-size:1.16rem;
  }
  .fib-matice-prichut a{display:block;padding:0;}
  .fib-matice-prichut a:hover{background:none;}

  .fib-matice-prazdne{display:none;}

  .fib-matice-je{flex:0 0 auto;}
  .fib-matice-je a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:0 14px;
    border:1px solid var(--linka);
    border-radius:999px;
    background:var(--v2);
  }
  .fib-matice-je .fib-matice-forma{
    display:inline;
    font-family:var(--font-t);
    font-size:.94rem;
    font-weight:600;
    color:var(--sedy);
    letter-spacing:.01em;
  }
  .fib-matice-je a:hover{background:rgba(255,137,0,.14);border-color:var(--oranz);}
  .fib-matice-je a:hover .fib-matice-forma{color:var(--bila);}
  .fib-matice-znak{width:8px;height:8px;}
}

/* ------------------------------------------------------------------- patička
   Odkazy měly na výšku 20 px. Doporučená dotyková plocha je 44, tak ať mají
   aspoň odsazení, které je k tomu přiblíží. */
@media (max-width:768px){
  footer .link-item{display:inline-block;padding:7px 0;}
  footer .link-container{line-height:1.5;}
}

/* --------------------------------------------------- dorovnání horního pruhu
   Odsazení 10 px má na sobě sám .fib-top, ne vnořený kontejner — pruh proto
   měřil 57 px, i když text v něm má 36. */
@media (max-width:768px){
  .fib-top{padding-top:0;padding-bottom:0;}
}

/* ------------------------------------------------ hamburger a ikona košíku
   Doporučená dotyková plocha je 44 px. Odkaz košíku se navíc roztahoval na
   127 px, takže se dalo kliknout i do prázdna vedle ikony. */
@media (max-width:1024px){
  .fib-hlava .fib-menu{flex:0 0 46px;width:46px;}
  .fib-hlava .fib-menu .hfe-nav-menu__toggle{
    min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
  }
  .fib-hlava .fib-kosik .hfe-masthead-custom-menu-items,
  .fib-hlava .fib-kosik .hfe-site-header-cart{display:inline-block;width:auto;}
}

/* ==========================================================================
   STRÁNKY MIMO ELEMENTOR

   Woostify nedává na svých šablonách obsahu vodorovné odsazení — celý řetězec
   .content-area → .site-main → article měl padding 0, takže se text na
   telefonu lepil na obě hrany. Stránka produktu má vlastní odsazení 15 px
   a stránky postavené v Elementoru si mezery řeší v kontejnerech; obojí
   se proto vynechává.
   ========================================================================== */
@media (max-width:860px){
  body:not(.single-product):not(.elementor-page) .content-area{
    padding-left:22px;
    padding-right:22px;
  }
}

/* ==========================================================================
   VÝPIS PRODUKTŮ NA TELEFONU

   Woostify skládá výpis na plovoucích blocích a pod 860 px dává každému
   100 % šířky — jeden produkt na řádek, výpis 5222 px vysoký. Dva sloupce
   se prohlížejí líp a stránka se zkrátí na polovinu.
   ========================================================================== */
@media (max-width:860px){
  .woocommerce ul.products{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin:0;
  }
  .woocommerce ul.products::before,
  .woocommerce ul.products::after{display:none;}
  .woocommerce ul.products li.product{width:auto;margin:0;float:none;}

  /* Řadicí rozbalovátko mělo 27 px na výšku a sazbu 13 px. */
  .woocommerce select.orderby,
  .woocommerce-page select.orderby{min-height:44px;font-size:15px;padding:0 30px 0 12px;}

  /* Stránkování: čísla měla 42 × 29 px. */
  .woocommerce-pagination a.page-numbers,
  .woocommerce-pagination span.page-numbers{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* ==========================================================================
   DOTYKOVÉ PRVKY NÁKUPNÍ CESTY

   Na mobilu se do nich musí trefit prstem, ne kurzorem. Sazba pod 16 px má
   navíc na iOS ten nepříjemný důsledek, že si prohlížeč při klepnutí do
   pole stránku sám přiblíží a už ji nezmenší.
   ========================================================================== */
@media (max-width:860px){
  /* Pole formulářů — 16 px kvůli přibližování na iOS. */
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=url],
  input[type=number],
  input[type=search],
  input[type=password],
  textarea,
  select{font-size:16px;}

  /* Stránka produktu: rozbalovátka variant měla 36 px, množství 20. */
  .woocommerce div.product .variations select{min-height:46px;}
  .woocommerce div.product .quantity input.qty,
  .woocommerce .cart input.qty{min-height:44px;font-size:16px;text-align:center;}
  .woocommerce div.product form.cart .button{min-height:46px;}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{
    display:inline-block;padding:11px 13px;
  }

  /* Košík a pokladna: nejdůležitější tlačítka webu měla sazbu 12 px. */
  .woocommerce .cart .checkout-button,
  .woocommerce #place_order,
  .woocommerce-checkout #place_order{font-size:16px;min-height:52px;}

  /* Zaškrtávátka měla 13 × 13 px — včetně souhlasu s podmínkami. */
  .woocommerce-checkout input[type=checkbox],
  .woocommerce-checkout input[type=radio],
  .woocommerce-form input[type=checkbox]{
    width:20px;height:20px;
    accent-color:var(--oranz);
  }
  .woocommerce-checkout .woocommerce-form__label-for-checkbox,
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label{
    display:flex;align-items:flex-start;gap:10px;line-height:1.5;
  }

  /* Výběr dopravy: řádky měly 24 px, teď se do nich dá trefit. */
  .woocommerce-checkout #shipping_method li,
  .woocommerce-checkout .woocommerce-shipping-methods li{
    display:flex;align-items:center;gap:10px;
    padding:8px 0;margin:0;
  }
  .woocommerce-checkout #shipping_method li label{margin:0;}

  /* Woostify sází sloupce s okrajem -5 px, ale nadřazený blok to nevyrovnává,
     takže obsah přesahoval 5 px za oba okraje obrazovky. */
  .woocommerce-checkout .woostify-row{margin-left:0;margin-right:0;}
  .woocommerce-checkout .woostify-row > .woostify-col{padding-left:0;padding-right:0;}
}

/* ------------------------------------------------------------ kontaktní formulář */
@media (max-width:860px){
  .wpcf7-form input[type=text],
  .wpcf7-form input[type=email],
  .wpcf7-form input[type=tel],
  .wpcf7-form textarea{width:100%;min-height:46px;}
  .wpcf7-form textarea{min-height:150px;}
  .wpcf7-form input[type=submit]{width:100%;min-height:52px;font-size:16px;}
}

/* ------------------------------------------- přesah sloupců na pokladně
   Woostify dává řádku s sloupci okraj -15 px podle zvoleného rozvržení
   pokladny (.checkout-layout-3), ale nadřazený blok to nevyrovnává —
   obsah tak přesahoval 15 px za oba okraje obrazovky. Pravidlo musí mít
   stejnou váhu jako jeho, jinak prohraje; proto je tu ještě podmínka na
   třídu těla, a ne konkrétní číslo rozvržení. */
@media (max-width:860px){
  .woocommerce-checkout[class*="checkout-layout"] .woostify-row{
    margin-left:0;margin-right:0;
  }
  .woocommerce-checkout[class*="checkout-layout"] .woostify-row > .woostify-col{
    padding-left:0;padding-right:0;
  }
}

/* ------------------------------------------------------- nadpis stránky
   Woostify má výpis titulku stránky vypnutý, takže stránky mimo Elementor
   začínaly rovnou textem. Nadpis je na telefonu potřeba tím spíš, že tam
   není nic jiného, co by řeklo, kde návštěvník je. */
.fib-nadpis-stranky{margin:0 0 14px;}
@media (max-width:768px){
  .fib-nadpis-stranky{margin-bottom:10px;}
}

/* ---------------------------------------------- dorovnání hlavičky, podruhé
   Dvě věci, na které jsem přišla až na živém webu:

   1) Elementor nastavuje zalamování pravidlem
      `.e-con.e-flex > .e-con-inner { flex-wrap: var(--flex-wrap) }`, které má
      o třídu vyšší váhu než `.fib-hlava .e-con-inner`. Nezáleží na pořadí
      souborů — prostě vyhraje. Proto je selektor níž delší.

   2) Ikona košíku s sebou nese i mezisoučet, takže widget zabíral 145 px.
      Logo (118) + košík (145) + hamburger (46) + mezery se do 322 px
      nevejdou a řádek se rozpadl na dva. Na telefonu proto zůstává jen
      ikona; částku má návštěvník v košíku o klepnutí dál. */
@media (max-width:1024px){
  .fib-hlava .e-con.e-flex > .e-con-inner{flex-wrap:nowrap;}
  .fib-hlava .fib-kosik .hfe-subtotal{display:none;}
}
@media (max-width:768px){
  .fib-hlava{padding-top:6px;padding-bottom:6px;}
}

/* ==========================================================================
   TLAČÍTKO NA KARTĚ PRODUKTU

   Tohle není chyba responzivity, jen jsem si jí všimla až při procházení
   obchodu na telefonu — platí i na širokém displeji.

   Woostify bere tlačítkům ve výpisu výplň pravidlem
   `.product-loop-meta:not(.no-transform) .button { background-color: transparent }`,
   ale barvu písma nechává na nás — a naše obecné .button dává barvu
   --na-oranzove, tedy skoro černou, protože je určená na oranžový podklad.
   Na tmavé kartě z toho vyšla černá na černé: kontrast 1 : 1 a „Do košíku"
   i „Výběr možností" nebylo vidět vůbec.

   Návrh má na kartě obrysové tlačítko, které se při najetí vybarví
   oranžově (.do-kosiku v casti-css.css) — tak to tedy dopisujeme i sem.
   ========================================================================== */
.woocommerce ul.products li.product .product-loop-meta .button,
.woocommerce ul.products li.product .button{
  background:transparent;
  color:var(--bila);
  box-shadow:inset 0 0 0 1px var(--linka-2);
  border-radius:var(--r-s);
  padding:11px 14px;
}
.woocommerce ul.products li.product .button svg{fill:currentColor;}

@media (hover:hover) and (pointer:fine){
  .woocommerce ul.products li.product .product-loop-meta .button:hover,
  .woocommerce ul.products li.product .button:hover{
    background:var(--oranz);
    color:var(--na-oranzove);
    box-shadow:inset 0 0 0 1px var(--oranz);
  }
}

@media (max-width:860px){
  /* Na kartě široké 133 px se patnáctka láme na tři řádky. */
  .woocommerce ul.products li.product .button{font-size:13px;padding:10px 10px;}
}

/* ------------------------------------------------- košík, pokladna, účet
   Tyhle tři stránky mají v těle třídu elementor-page (někdo je kdysi otevřel
   v Elementoru), takže je pravidlo o odsazení výš vynechávalo a obsah na nich
   zůstal nalepený na okraje. Rozvržení od Elementoru přitom nemají — obsah
   vykresluje WooCommerce. */
@media (max-width:860px){
  .woocommerce-cart .content-area,
  .woocommerce-checkout .content-area,
  .woocommerce-account .content-area{padding-left:22px;padding-right:22px;}

  /* Woostify zmenšuje množství v košíku na 12 px selektorem o čtyřech
     třídách. Pod šestnácti pixely ale iOS při klepnutí do pole stránku
     přiblíží a sám ji nezmenší, proto se to musí přebít. */
  .woocommerce-cart .woocommerce-cart-form__contents .quantity input.qty{font-size:16px;}
}

/* Pokladna je na rozdíl od košíku opravdu vložená do Elementoru, takže si
   jeho kontejner přidává vlastních 10 px a levý sloupec Woostify ještě
   patnáct. Odsazení se tím sčítalo: pole měla odstup 47 px, přehled
   objednávky vedle nich 32. Obojí se tu srovnává na společných 22 px. */
@media (max-width:860px){
  /* Odsazení Elementorova kontejneru (na .e-con, ne na .e-con-inner). */
  .woocommerce-checkout .content-area .elementor-element.e-con{
    padding-left:0;padding-right:0;
  }
  /* Woostify sází odsazení sloupců podle zvoleného rozvržení pokladny,
     tedy o třídu specifičtěji; podmínka na třídu těla váhu dorovná, aniž
     bychom se vázali na konkrétní číslo rozvržení. */
  .woocommerce-checkout[class*="checkout-layout"] .woostify-row > .col-left,
  .woocommerce-checkout[class*="checkout-layout"] .woostify-row > .col-right{
    padding-left:0;padding-right:0;
  }
}