/* ==========================================================================
   Kytky od potoka - Svatby
   WordPress glue - vše, co je potřeba doladit kvůli WP markupu / adminu,
   ale NENÍ součástí designu (tokens/base/components/...). Načítá se jako
   POSLEDNÍ, aby mohlo (výjimečně a bez !important) doladit detaily.
   ========================================================================== */

/* --- `.screen-reader-text` (F7 bugfix) ---
   WP jádro tenhle skrytý text vypisuje sitewide (`the_posts_pagination()`,
   `the_posts_navigation()` na search.php, `wp_link_pages()`...), ne jen na
   blogu - dřív bylo pravidlo scoped jen pod `.blog-pagination` (blog.css),
   takže bylo na `/?s=...` (search.php) viditelné. Stejná technika jako
   `.visually-hidden` v components.css. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Custom logo v .brand (header i footer) ---
   Záložní větev brand.php pro případ, že by v tématu chyběla PNG loga
   (assets/img/logo-kytky-od-potoka-{tmave,bile}-*.png) - primárně se
   vykreslují ta, viz .brand-logo v base.css. Tahle větev bere bitmapu
   z knihovny médií (custom_logo). */
.brand .custom-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
}

/* Bitmapa je tmavě šedá, na švestkovém pozadí patičky by měla kontrast 1.05:1.
   `brightness(0) invert(1)` z ní udělá bílou siluetu - logo je jednobarevné,
   takže se tím nic neztratí. */
.site-footer__brand .custom-logo {
  height: 34px;
  filter: brightness(0) invert(1);
}

/* --- WordPress admin bar: sticky header musí zůstat pod ní, ne pod ni schovaná --- */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* --- Newsletter formulář v patičce: stavová hláška (JS, viz kop-newsletter.js) --- */
.newsletter__msg {
  margin-top: var(--space-2xs);
  font-size: 0.85rem;
}

.newsletter__msg--success {
  color: color-mix(in oklab, var(--c-success) 55%, white);
}

.newsletter__msg--error {
  color: color-mix(in oklab, var(--c-error) 55%, white);
}

/* --- Reálné fotky z media library uvnitř .photo placeholderů (F1+) ---
   .photo je positioned (relative) s dekor ::before/::after na z-index:-1;
   reálný <img> položíme přes ně (z-index:0), object-fit cover vyplní tvar
   (gm-tall/gm-sq/gm-wide, quote-band__media). */
.photo > img,
.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 0;
}

/* --- Lightbox: reálnou fotku ukázat celou (contain), ne oříznutou na 4:3 ---
   Platí jen pro stage s reálným <img> (třída doplněná v kop.js). Placeholdery
   (bez fotky) zůstávají na původním 4:3 poměru z components.css. */
.lightbox__figure .photo.lightbox__photo--real {
  aspect-ratio: auto;
  background: none;
}
.lightbox__figure .photo.lightbox__photo--real::before,
.lightbox__figure .photo.lightbox__photo--real::after {
  content: none;
}
.lightbox__figure .photo.lightbox__photo--real > img {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  margin: 0 auto;
}

/* --- WooCommerce archiv (F2): restyl nativního toolbaru, řazení a stránkování ---
   woocommerce/archive-product.php (viz shop.css .shop-toolbar) zachovává
   nativní markup pro count/ordering/pagination - tady jen vzhled. */
.shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-muted);
}

.shop-toolbar .woocommerce-ordering {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-toolbar .woocommerce-ordering::before {
  content: "Řadit";
  font-size: 0.9rem;
  color: var(--c-muted);
}

.shop-toolbar .woocommerce-ordering select {
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-text);
  background-color: var(--c-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E2A52' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.5rem 2.4rem 0.5rem 0.85rem;
  cursor: pointer;
}

.shop-toolbar .woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}

.woocommerce-pagination {
  margin-top: var(--space-xl);
}

/* WC default (woocommerce.css) dává stránkování rámeček boxu (`ul{border}`) +
   dělící linky mezi položkami (`li{border-right}`) a šedou výplň aktivní stránky.
   Přebíjíme to selektory se STEJNOU strukturou/specificitou jako WC - wp.css se
   načítá až ZA woocommerce.css, takže při shodné specificitě vyhraje pozdější
   pořadí (bez !important, viz konvence tématu). Bod 2: stránkování bez borderů. */
.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.5rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1;
  background: transparent;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.woocommerce-pagination a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: var(--c-plum-wash);
  color: var(--c-primary-ink);
}

.woocommerce-pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--c-primary);
  color: #fff;
}

/* ==========================================================================
   WooCommerce notice zprávy (F4) - `.woocommerce-message/-error/-info`
   Společné pro CELÝ Woo frontend (obchod, detail produktu, košík, pokladna) -
   proto tady (kop-wp se načítá vždy), ne v checkout.css (to jede jen na
   košíku/pokladně), aby stejná hláška nevypadala jinde jinak. Nahrazuje
   výchozí fialový pruh + WC ikonový font (woocommerce-general) tintovanou
   kartou + kolečkovou ikonou (✓/!) přes ::before dle typu.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: var(--radius);
  color: var(--c-text);
  padding: var(--space-sm) var(--space-md);
  /* `margin-inline: auto` (přes zkratku) - bez něj se 760px karta lepila na
     levý okraj `.wrap` (1240px) místo aby stála na střed. */
  margin: 0 auto var(--space-md);
  /* Karta, ne pruh přes celou šířku `.wrap` (1240px) - notice „přidáno do
     košíku" i info/prázdný stav drží čitelnou šířku a působí jako oznámení. */
  max-width: var(--content-narrow);
  font-family: var(--font-body);
  font-size: 0.92rem;
  list-style: none;
}
.woocommerce-error {
  border-radius: var(--radius);
  color: var(--c-text);
  padding: var(--space-sm) var(--space-md);
  margin: 0 auto var(--space-md);
  max-width: var(--content-narrow);
  font-family: var(--font-body);
  font-size: 0.92rem;
  list-style: none;
}
.woocommerce-message {
  background: color-mix(in oklab, var(--c-success) 12%, var(--c-surface));
  border: 1px solid color-mix(in oklab, var(--c-success) 45%, transparent);
}
.woocommerce-info {
  background: color-mix(in oklab, var(--c-primary) 7%, var(--c-surface));
  border: 1px solid color-mix(in oklab, var(--c-primary) 32%, transparent);
}
.woocommerce-error {
  background: color-mix(in oklab, var(--c-error) 10%, var(--c-surface));
  border: 1px solid color-mix(in oklab, var(--c-error) 40%, transparent);
}
/* `.woocommerce-error` je `<ul>` s jednou/více `<li>` (validační chyby) -
   ikonu proto dává každá položka zvlášť, ne obal. */
.woocommerce-error li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.15rem 0;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error li::before {
  /* woocommerce-general pozicuje svou ikonu `position:absolute` (top/left) -
     bez přepnutí na static by naše kolečko leželo přes začátek textu
     místo aby bylo prvním flex prvkem. */
  position: static;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 0.05rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
.woocommerce-message::before { content: "\2713"; background: var(--c-success); }
.woocommerce-info::before { content: "!"; background: var(--c-primary); }
.woocommerce-error li::before { content: "!"; background: var(--c-error); }
/* `a.button` (typ + třída) kvůli WC pravidlu `.woocommerce .woocommerce-message
   .button{float:right}` z woocommerce-layout.css, které na obchodě/detailu
   zůstává enqueuované - bez shodné specificity by tlačítko plavalo jen tam. */
.woocommerce-message a.button,
.woocommerce-info a.button {
  float: none;
  flex: none;
  margin-left: auto;
}

/* ==========================================================================
   Detail produktu (F3) - WP/WC glue
   woocommerce/single-product.php + inc/woocommerce.php (design/svatby/detail-klasik.html).
   Galerie, variace, lh-product-cf pole (plugin lh-product-cf), množství a
   tlačítko do košíku zůstávají nativní Woo markup - tady se jen mapují na
   designové třídy z detail.css/components.css.

   Pozn. k pořadí načtení: kop-wp se enqueuuje PŘED kop-detail (viz
   inc/enqueue.php), takže na stejnou třídu se stejnou specificitou by při
   shodné specificitě vyhrálo pozdější detail.css. Tam, kde skutečně
   přepisujeme vlastnost z detail.css (`.pdp__gallery`), proto cíleně
   používáme selektor s vyšší specificitou (`.pdp .pdp__gallery`) místo
   !important; jinde jde vždy o nové selektory (Woo třídy), takže pořadí
   souborů nehraje roli.
   ========================================================================== */

/* --- Sale flash (badge nad galerií, vizuál jako .product-card__badge) --- */
.pdp__gallery {
  position: relative;
}
.pdp__gallery .onsale {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-primary-ink);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* --- Galerie: nativní Woo galerie (flexslider + PhotoSwipe zoom/lightbox
   z theme supports, viz inc/setup.php) přeuspořádaná na "náhledy vlevo, foto
   vpravo" dle návrhu. Flexslider generuje `.flex-viewport` a
   `.flex-control-thumbs` až za běhu (JS), proto tu neřešíme přesný markup,
   jen finální třídy. Priorita = funkční zoom/lightbox, ne pixel-perfect
   pozice náhledů (viz F3 plán - vědomá odchylka). --- */
.pdp .pdp__gallery > .woocommerce-product-gallery.images {
  /* .pdp__gallery je z detail.css 2sloupcová grid (74px thumbs / 1fr foto)
     počítaná s markupem z návrhu (.pdp__thumbs + .pdp__main); reálná Woo
     galerie je jediné dítě, ať zabere celou šířku a rozložení řeší sama.
     `width:100%` + `float:none` PŘEBÍJÍ woocommerce-general
     `.woocommerce div.product div.images{float:left;width:48%}` (specificita
     0,3,2) - proto selektor s `.images` navíc (0,4,0), bez !important. Bez
     toho zůstane galerie na 48 % sloupce a flexslider spočítá malý slide
     (~184px) + vpravo od fotky velká prázdná plocha až k buy-boxu. */
  grid-column: 1 / -1;
  width: 100%;
  float: none;
}
.woocommerce-product-gallery {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--space-sm);
}
.woocommerce-product-gallery .flex-viewport {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 96px;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Čtvercové náhledy (1/1) - hlavní fotka i zdrojový WC `gallery_thumbnail` jsou
   čtvercové (600×600, resp. 100×100), takže portrétní poměr by čtvercovou fotku
   ořízl a nechal pod náhledem prázdné místo (img.height:100% neresolvuje proti
   výšce li odvozené z aspect-ratio → img spadne na auto = čtverec). 1/1 sedne
   přesně: náhled 96×96 (desktop) / 84×84 (mobil), downscale ze 100px = ostré. */
.woocommerce-product-gallery .flex-control-thumbs li {
  aspect-ratio: 1 / 1;
}
/* WooCommerce (woocommerce.css) forcuje `.flex-control-thumbs li{width:25%;float:left}`
   (specificita 0,4,3) - bez přebití zůstane náhled na 25 % šířky railu (~24px při
   96px sloupci) a plave, místo aby rail vyplnil. Selektor „mirror WC + třída navíc"
   (0,5,3, gallery má současně `.images` i `.woocommerce-product-gallery`) přebíjí
   bez !important; `width:100%` = náhled na plnou šířku railu (desktop). Float ve
   flexu sice nehraje roli, přesto rušíme, ať nezůstane viset v jiném kontextu. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
  width: 100%;
  float: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover {
  border-color: var(--c-accent);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border-color: var(--c-accent-deep);
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
  background: #fff;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .woocommerce-product-gallery {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-product-gallery .flex-control-thumbs {
    flex-direction: row;
    width: auto;
    overflow-x: auto;
  }
  /* Stejná (0,5,3) specificita jako desktop override výše (přebít WC `li{width:25%}`)
     - tady pevná šířka náhledu v horizontálním scrollu (řádek náhledů pod fotkou).
     Přijde v souboru později než desktop pravidlo, takže při shodné specificitě
     vyhraje. */
  .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
    flex: none;
    width: 84px;
  }
}

/* --- Buy-box: titulek, hodnocení, cena, krátký popis (glue na design) --- */
.buy-box .product_title {
  font-size: var(--step-4);
  margin: 0.3rem 0 var(--space-xs);
}

.buy-box .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
  color: var(--c-muted);
}
.buy-box .woocommerce-product-rating .star-rating {
  color: var(--c-gold);
}
.buy-box .woocommerce-product-rating .star-rating::before {
  color: var(--c-border);
}
.buy-box .woocommerce-product-rating .woocommerce-review-link {
  color: inherit;
}

.buy-box > .price,
.buy-box .woocommerce-variation-price .price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--step-4);
  color: var(--c-primary-ink);
  line-height: 1.1;
  margin: 0;
}
.buy-box > .price del {
  opacity: 0.55;
  font-size: 0.6em;
  margin-right: 0.4em;
}
.buy-box > .price ins {
  text-decoration: none;
}
.buy-box .price .woocommerce-Price-currencySymbol {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-muted);
}

.buy-box .woocommerce-product-details__short-description {
  color: var(--c-muted);
}
.buy-box .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* --- Variace (tabulka `.variations`) - "odtabulkované" na vzhled config__row --- */
.buy-box .variations,
.buy-box .variations tbody,
.buy-box .variations tr,
.buy-box .variations th,
.buy-box .variations td {
  display: block;
  width: 100%;
}
.buy-box .variations {
  border-collapse: collapse;
}
.buy-box .variations tr {
  margin-bottom: var(--space-md);
}
.buy-box .variations tr:last-child {
  margin-bottom: 0;
}
.buy-box .variations th.label,
.buy-box .variations td.value {
  padding: 0;
  text-align: left;
}
.buy-box .variations th.label {
  margin-bottom: 0.5rem;
}
.buy-box .variations th.label label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-text);
}
.buy-box .variations td.value select {
  appearance: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background-color: var(--c-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E2A52' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.7rem 2.4rem 0.7rem 0.85rem;
  width: 100%;
  cursor: pointer;
}
.buy-box .variations td.value select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}
.buy-box .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--c-muted);
  text-decoration: underline;
}
.buy-box .reset_variations:hover {
  color: var(--c-accent-deep);
}

/* --- lh-product-cf pole (plugin lh-product-cf): styl / zakončení / přání ---
   Markup = woocommerce_form_field() -> <p class="form-row full-row">. Select
   dostává třídu `.select` už z jádra WC (styl zdarma z pages.css), text input
   ne (`.input-text`) - dostyluje se tu na vzhled `.input`. */
.buy-box .form-row.full-row {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.buy-box .form-row.full-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-text);
}
.buy-box .form-row.full-row label .required {
  color: var(--c-accent-deep);
  font-weight: 600;
}
.buy-box .form-row.full-row label .optional {
  color: var(--c-muted);
  font-weight: 400;
  font-size: 0.8rem;
}
.buy-box .form-row.full-row .woocommerce-input-wrapper {
  display: block;
}
.buy-box .form-row.full-row input.input-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
}
.buy-box .form-row.full-row input.input-text:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}

/* --- Množství, tlačítko do košíku, stav varianty po výběru --- */
.buy-box form.cart {
  display: grid;
  gap: var(--space-md);
}
.buy-box .single_variation_wrap {
  display: grid;
  gap: var(--space-sm);
}
.buy-box .woocommerce-variation-add-to-cart {
  display: grid;
  gap: var(--space-sm);
}
.buy-box .woocommerce-variation-description p {
  color: var(--c-muted);
  font-size: 0.9rem;
  margin: 0;
}
.buy-box .stock {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin: 0;
}
.buy-box .stock.out-of-stock {
  color: var(--c-accent-deep);
  font-weight: 600;
}

.buy-box .quantity {
  justify-self: start;
}
.buy-box .quantity .qty {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.6rem;
  width: 4.5rem;
  text-align: center;
}
.buy-box .quantity .qty:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}

.buy-box .single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1.05rem 2rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--c-accent-deep);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-align: center;
}
.buy-box .single_add_to_cart_button:hover {
  background: var(--c-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.buy-box .single_add_to_cart_button:active {
  transform: translateY(0);
}
.buy-box .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.buy-box .single_add_to_cart_button:disabled,
.buy-box .single_add_to_cart_button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   A11y audit (WCAG 2.2 AA) - drobné glue opravy
   ========================================================================== */

/* --- Úkol 5: sekce "O produktu" (woocommerce/single-product.php) dostala
   skutečný nadpis <h2 class="eyebrow"> místo <p class="eyebrow"> (screen
   reader ji tak najde). Beze změny vzhledu to ale samo o sobě nešlo:
   pages.css uvnitř `.split__body` definuje `.split__body h2 { font-size:
   var(--display-sm) }` a `.split__body p { color; font-size }` - obě mají
   vyšší specificitu (třída + typ) než samotné `.eyebrow` (jen třída), takže
   dřív fakticky RENDEROVALY font-size/barvu paragrafu, ne `.eyebrow`. Navíc
   base.css `h1,h2,h3,h4` nastavuje jiný line-height (nadpisový) než jaký měl
   zděděný <p> (tělový, z body). Dorovnáno vyšší specificitou selektoru (2
   třídy + typ), ne !important - stejný vzor jako `.pdp .pdp__gallery` výše. */
.split__body h2.eyebrow {
  font-size: var(--step-1);
  color: var(--c-muted);
  line-height: var(--lh-body);
}

/* --- Úkol 6: base.css (zmražený) má nepodmíněné `html{scroll-behavior:
   smooth}` - respektovat preferenci systému/prohlížeče pro omezený pohyb. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Vyhledávání a 404 (F8e) - search.php / 404.php / searchform.php
   `.page-hero`, `.breadcrumbs`, `.post-grid`/`.post-card`, `.card`, `.btn`,
   `.stack-cta` dává pages.css/components.css (enqueue na `is_search()`/
   `is_404()`, viz inc/enqueue.php) - tady jen to, co jinde v tématu není:
   samotný vyhledávací formulář (sdílený oběma šablonami), stránkování
   výsledků a prázdný/chybový stav.
   ========================================================================== */

/* --- Vyhledávací formulář (searchform.php) --- */
.search-form {
  display: flex;
  gap: 0.6rem;
  max-width: 30rem;
}
.search-form__input {
  flex: 1;
  min-width: 0;
}
.search-form__submit {
  flex: none;
}
.page-hero .search-form {
  margin-top: var(--space-md);
}
.page-hero--center .search-form {
  margin-inline: auto;
}
@media (max-width: 480px) {
  .search-form {
    flex-direction: column;
  }
  .search-form__submit {
    width: 100%;
  }
}

/* --- Stránkování výsledků hledání (`the_posts_pagination()`, search.php) ---
   Stejný vzor jako `.blog-pagination` (blog.css) / `.woocommerce-pagination`
   (výše) - blog.css se ale na search.php nenačítá (`kop_is_blog_listing()`
   je záměrně jen `is_home()`/archivy příspěvků, ne `is_search()`), proto
   vlastní stejnojmenná sada pravidel tady. */
.search-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: var(--space-xl);
}
.search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: transparent;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.search-pagination a.page-numbers:hover {
  background: var(--c-plum-wash);
  color: var(--c-primary-ink);
}
.search-pagination .page-numbers.current {
  background: var(--c-primary);
  color: #fff;
}
.search-pagination .page-numbers.dots {
  background: none;
}

/* --- Prázdný stav hledání (search.php, `have_posts()` false) - vzor
   `.cart-empty-cta` z checkout.css. --- */
.search-empty {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg);
}
.search-empty__lead {
  color: var(--c-muted);
  font-size: var(--step-1);
  margin-bottom: var(--space-md);
}
.search-empty .search-form {
  margin-inline: auto;
}

/* --- 404 (`.error-404`, viz 404.php) - nahrazuje dřívější inline `style=""`
   z F0 kostry (`text-align:center` na obalu, `margin-top` na CTA odstavci). --- */
.error-404 .search-form {
  margin-top: var(--space-lg);
  margin-inline: auto;
}

/* ==========================================================================
   „Můj účet" (F8e) - základní CSS glue pro WC přihlašovací formulář a
   formulář ztraceného/resetovaného hesla (myaccount/form-login.php,
   myaccount/form-lost-password.php, myaccount/form-reset-password.php -
   žádný theme override, registrace je vypnutá, web běží na guest checkoutu,
   takže tu návštěvník typicky uvidí jen přihlašovací formulář, viz
   `WC_Shortcode_My_Account::output()`). `page.php` už dává H1 + `.wrap--narrow`
   (výchozí větev šablony) - tady se jen WC markup dostyluje na vzhled karty/
   inputů/tlačítek z designu (vzor `.form-row`/`.input`/`.button.alt` v
   checkout.css), bez zásahu do WC šablon. Scoped pod `.woocommerce-account`
   (WC vlastní body třída na všech endpointech účtu), ať se nic z tohohle
   neprojeví jinde (např. na checkoutu, který má svůj vlastní vzhled forem).
   ========================================================================== */
/* Selektor s typem `form` NENÍ kosmetika - přihlašovací formulář nese kromě
   `.woocommerce-form-login` i holou třídu `.login` (`<form class="woocommerce-
   -form-login login">`, viz myaccount/form-login.php) a `woocommerce-general`
   na ni cílí vlastním `.woocommerce form.login{border:1px solid #cfc8d8;
   border-radius:5px;padding:20px}` (2 třídy + typ `form`) - bez shodného
   „tvaru" selektoru by WC výchozí rámeček/padding vyhrál bez ohledu na
   pořadí (naše `.woocommerce-account .woocommerce-form-login` mělo jen 2
   třídy bez typu, tedy nižší specificitu). Ověřeno v prohlížeči (computed
   styles), ne jen výpočtem. */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-ResetPassword {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 28rem;
}
.woocommerce-account .form-row {
  padding: 0;
  margin: 0 0 var(--space-sm);
}
.woocommerce-account .form-row:last-child {
  margin-bottom: 0;
}
.woocommerce-account label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-text);
}
.woocommerce-account form .form-row .required {
  color: var(--c-accent-deep);
  text-decoration: none;
}
/* Specificita (3 třídy + typ `form`) schválně kopíruje přesný „tvar" WC
   vlastního selektoru `.woocommerce form .form-row .input-text` - na účtu
   (na rozdíl od košíku/pokladny) zůstává `woocommerce-layout.css` i
   `woocommerce-general` enqueued (viz inc/enqueue.php, dequeue tam cílí jen
   na `is_cart()`/`is_checkout()`), takže bez shodné specificity by defaultní
   padding/border/radius (WC tokeny, ne naše) vyhrálo bez ohledu na pořadí. */
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
}
.woocommerce-account .form-row input.input-text:focus-visible,
.woocommerce-account .form-row select:focus-visible,
.woocommerce-account .form-row textarea:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}
/* Zaškrtávátko „Zapamatovat si mě" - label nese input+text, bez tohohle by
   po `label{display:block}` výše zůstal checkbox nad textem místo vedle.
   3 třídy v ancestor řetězci (ne 2) - `woocommerce-general` má vlastní
   `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme
   {display:inline-block}` (taky 3 třídy), bez shodné specificity by
   `inline-block` vyhrálo bez ohledu na pořadí (ověřeno v prohlížeči). */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-sm);
  font-weight: 400;
  cursor: pointer;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme input {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin: 0;
  accent-color: var(--c-primary);
}
/* Specificita (2 třídy + typ) schválně kopíruje vzor `.button.alt` z
   checkout.css - `woocommerce-general` (zůstává enqueued) cílí defaultní
   vzhled `.button` přes `.woocommerce a.button`/`.woocommerce button.button`
   (v `:where()`, ale ten má nulovou specificitu) - bez shodného „tvaru"
   selektoru (třídy + typ) by domácí barva prohrála bez ohledu na pořadí. */
.woocommerce-account a.button,
.woocommerce-account button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--c-accent-deep);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce-account button.button:hover {
  background: var(--c-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.woocommerce-account a.button:focus-visible,
.woocommerce-account button.button:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.woocommerce-account .woocommerce-LostPassword {
  margin-top: var(--space-sm);
  margin-bottom: 0;
  font-size: 0.9rem;
}
.woocommerce-account .woocommerce-LostPassword a {
  color: var(--c-accent-deep);
  text-decoration: underline;
}
/* Navigace „Můj účet" (jen pro přihlášené - u nás výjimka, web jede na
   guest checkoutu) - bez tohohle by to byl nestylovaný odrážkový seznam. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-lg);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-size: 0.9rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  border-color: var(--c-accent);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}