/* ==========================================================================
   Skořápka webu — proměnné, hlavička, menu, patička.

   Tenhle soubor je JEDINÝ zdroj vzhledu skořápky. Používá ho Astro (přes
   @import v global.css) i WordPress, který si ho tahá z /shell.css. Když se
   tady něco změní, změní se to na obou stranách najednou.
   ========================================================================== */

:root {
  /* konstrukce */
  --ink:        #1a1a2e;
  --ink-2:      #1c1c28;
  --ink-soft:   #2a2a42;

  /* akcenty */
  --blue:       #2563eb;
  --blue-dark:  #1d4ed8;
  --blue-light: #60a5fa;
  --blue-wash:  #e9eefb;
  --green:      #16a34a;
  --green-dark: #15803d;
  --green-light:#4ade80;
  --green-wash: #e7f6ec;
  --orange:     #f97316;
  --orange-2:   #fb923c;
  --orange-wash:#fff1e6;
  --purple:     #7c3aed;
  --magenta:    #c026d3;
  --red:        #dc2626;
  --red-wash:   #fdeaea;

  /* neutrály */
  --g-900: #1f2937;
  --g-700: #4b5563;
  --g-600: #6b7280;
  --g-500: #9099a8;
  --g-400: #9ca3af;
  --g-300: #cbd5e1;
  --g-200: #e2e8f0;
  --g-150: #e7eaf0;
  --g-100: #f1f5f9;
  --ground: #f5f7fa;
  --surface: #ffffff;

  /* Hodnota / úspora — třetí barva vedle navy a zelené. Používá se JEN
     u skutečné úspory a cenových argumentů, nikde jinde. */
  --value:      #f5a300;
  --value-dark: #8a5c00;
  --value-wash: #fff6e0;

  --wrap: 1240px;
  /* Držíme malý rádius — technické zboží, ne SaaS dlaždice. */
  --r: 6px;
  --r-sm: 4px;
  --shadow: 0 1px 2px rgba(26, 26, 46, .06), 0 8px 24px rgba(26, 26, 46, .06);
  --shadow-lift: 0 4px 10px rgba(26, 26, 46, .08), 0 16px 40px rgba(26, 26, 46, .12);
}

.num { font-variant-numeric: tabular-nums; }

.vis-skryte {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- hlavička --------------------------------------------------- */

.lista {
  background: var(--ink);
  color: #b9c2d6;
  font-size: 13.5px;
}
.lista .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.lista strong { color: #fff; font-weight: 700; }
.lista .ic { display: inline-flex; align-items: center; gap: 7px; }
.lista .vpravo { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }

.hlavicka {
  background: var(--ink-2);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 18px rgba(26, 26, 46, .25);
}
.hlavicka .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 24px;
  align-items: center;
}
.znacka { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.znacka b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.znacka span {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-top: 5px;
  font-weight: 700;
}

.hledat { flex: 1; display: flex; max-width: 520px; }
.hledat input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  padding: 11px 15px;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.hledat button {
  border: 0;
  background: var(--green);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hledat button:hover { background: var(--green-dark); }

.akce-hlavicka { display: flex; gap: 8px; margin-left: auto; }
.akce-hlavicka a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .09);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s;
}
.akce-hlavicka a:hover { background: rgba(255, 255, 255, .18); }

.menu { background: #fff; border-bottom: 1px solid var(--g-150); }
.menu .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.menu a {
  font-weight: 700;
  font-size: 15px;
  padding: 14px 15px;
  color: var(--g-700);
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.menu a:hover, .menu a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--green);
}

/* ---------- patička ---------------------------------------------------- */

.paticka {
  background: var(--ink);
  color: #98a3ba;
  margin-top: 64px;
  padding: 44px 0 0;
  font-size: 14.5px;
}
.paticka-mrizka {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 34px;
}
.paticka h5 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 3px solid;
}
.paticka .sl-nakup h5    { color: var(--green-light); border-color: var(--green-light); }
.paticka .sl-info h5     { color: var(--orange-2);    border-color: var(--orange-2); }
.paticka .sl-doprava h5  { color: var(--blue-light);  border-color: var(--blue-light); }
.paticka .sl-firma b {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
}
.paticka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.paticka a:hover { color: #fff; }

.paticka-spodek {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 38px;
  padding: 18px 0;
}
.paticka-spodek .in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #78839c;
}
/* Síť webů je až terciární informace — smí být vidět, ale nesmí soupeřit
   s firemními údaji, nákupem a dopravou nad ní. */
.paticka-sit {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 15px 0 22px;
  text-align: center;
  font-size: 12px;
  color: #626c82;
}
.paticka-sit a { color: #77819a; }
.paticka-sit a:hover { color: var(--orange-2); }
.paticka-sit .oddel { color: #414a5c; margin: 0 7px; }

/* ---------- responzivita skořápky --------------------------------------- */

@media (max-width: 1040px) {
  .paticka-mrizka { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .hlavicka .in { flex-wrap: wrap; gap: 14px; }
  .hledat { order: 3; flex-basis: 100%; max-width: none; }
  .lista .vpravo { display: none; }

  /* Menu jede v jednom pásu do strany, ne ve třech řádcích. */
  .menu .in {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu .in::-webkit-scrollbar { display: none; }
  .menu a {
    white-space: nowrap;
    padding: 13px 12px;
    font-size: 14.5px;
    scroll-snap-align: start;
  }
  .skryj-mobil { display: none; }
}

@media (max-width: 520px) {
  .paticka-mrizka { grid-template-columns: 1fr; }
}


/* ---------- pohodlné ovládání palcem ------------------------------------
   Na dotyku míříme na 44 px výšky u všeho, co posouvá nákup dopředu.
   Nezvětšujeme písmo ani odsazení do stran — jen zaručíme plochu, která
   se dá spolehlivě trefit. Platí pro Astro i pro WooCommerce. */

@media (hover: none), (max-width: 780px) {
  .btn,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .wc-block-components-button,
  .tl-od-tlacitko {
    min-height: 44px;
  }

  /* Volba dopravy a platby — celý řádek musí být klikatelný. */
  .wc-block-components-radio-control__option,
  .wc-block-checkout__shipping-method-option {
    min-height: 44px;
  }

  /* Množství v košíku: plus, minus i pole nad práh. */
  .wc-block-components-quantity-selector,
  .wc-block-components-quantity-selector__button,
  .wc-block-components-quantity-selector__input {
    min-height: 44px;
  }

  /* Vyhledávání v hlavičce — vstup i lupa. */
  .hledat input,
  .hledat button { min-height: 44px; }

  /* Koš u položky bývá jen ikonka. */
  .wc-block-cart-item__remove-link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}