/* Akva Exo - refreshed shop design (modernisation steps 2 and 3, mock-up public/nahled/index.html).
   The only stylesheet of the shop (with css/fonts.css): the legacy _layout3.css / layout_main.css are gone, the few
   rules the remaining legacy markup needed are here (links, .panel headings, the homepage info panel). Pages that
   keep their legacy markup (account, orders, content pages) sit in .panel. */

:root {
  --orange: #f67500;
  --orange-hover: #e06a00;
  --orange-soft: #fff3e8;
  --teal: #1cb5ad;
  --teal-dark: #0f958e;
  --teal-soft: #e6f6f5;
  --green: #2b9a3e;
  --red: #e4572e;
  --bg: #eef2f4;
  --card: #fff;
  --text: #1f2a33;
  --muted: #66727c;
  --line: #e1e6e9;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 6px 18px rgba(16, 24, 32, .06);
}

html { -webkit-text-size-adjust: 100%; }
a { color: var(--orange); text-decoration: none; }
img { border: 0; }
body.shop { min-height: 100vh; display: flex; flex-direction: column; margin: 0; background: var(--bg); color: var(--text); font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 1.5; }
:where(.site-topbar, .site-header, .cat-nav, .page-layout, .site-footer, .drawer, .basket-dialog, .toast, .buy-bar, .lightbox),
:where(.site-topbar, .site-header, .cat-nav, .page-layout, .site-footer, .drawer, .basket-dialog, .toast, .buy-bar, .lightbox) *,
:where(.site-topbar, .site-header, .cat-nav, .page-layout, .site-footer, .drawer, .basket-dialog, .toast, .buy-bar, .lightbox) *::before,
:where(.site-topbar, .site-header, .cat-nav, .page-layout, .site-footer, .drawer, .basket-dialog, .toast, .buy-bar, .lightbox) *::after { box-sizing: border-box; }
/* legacy pages inside .panel keep the old box model */
.panel, .panel * { box-sizing: content-box; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top links ---------- */
.site-topbar { background: #f7f9fa; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-topbar .wrap { display: flex; gap: 20px; align-items: center; min-height: 36px; }
.site-topbar a { color: inherit; }
.site-topbar a:hover { color: var(--orange); }
.site-topbar .account { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.site-topbar .account form { display: inline; margin: 0; }
.link-button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.link-button:hover { color: var(--orange); }

/* ---------- header ---------- */
.site-header { background: #fff; }
.site-header .wrap { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.site-logo img { height: 56px; width: auto; display: block; }
.site-search { flex: 1; max-width: 520px; display: flex; align-items: center; background: #f3f6f7; border: 2px solid transparent; border-radius: 999px; padding: 4px 4px 4px 18px; margin: 0; transition: border-color .15s, background .15s; }
.site-search:focus-within { border-color: var(--teal); background: #fff; }
.site-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 6px 0; font: inherit; color: var(--text); }
.site-search button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.site-cart { margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--text); text-decoration: none; }
.site-cart:hover { color: var(--text); background: #ffe9d6; }
.cart-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; flex: none; }
.cart-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; line-height: 1; }
.cart-text { line-height: 1.25; white-space: nowrap; }
.cart-text small { display: block; color: var(--muted); font-size: 12px; }
.cart-text b { color: var(--orange); }
.menu-btn { display: none; height: 42px; border: 0; border-radius: 10px; background: var(--orange); color: #fff; font: inherit; font-weight: 700; align-items: center; gap: 6px; padding: 0 14px 0 10px; cursor: pointer; }

/* ---------- category bar ---------- */
.cat-nav { background: linear-gradient(#ff7f1e, #f26c00); box-shadow: 0 2px 6px rgba(242, 108, 0, .25); }
.cat-nav ul { display: flex; list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1200px; }
.cat-nav li { flex: 1 1 auto; }
.cat-nav a { display: block; text-align: center; white-space: nowrap; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; padding: 14px 10px 11px; border-bottom: 3px solid transparent; text-transform: uppercase; }
.cat-nav a:hover { background: rgba(0, 0, 0, .08); color: #fff; }
.cat-nav a.active { border-bottom-color: #fff; }

/* ---------- page ---------- */
.page-layout { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.page-layout.has-sidebar { grid-template-columns: 260px minmax(0, 1fr); }
.page-main { min-width: 0; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; overflow-x: auto; }
.panel h1 { font-weight: 700; font-size: 26px; line-height: 1.25; margin: 0 0 20px; }
.panel h2 { font-size: 16px; line-height: 1.4; margin: 22px 0 8px; }
.panel img { max-width: 100%; height: auto; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--orange); }
.page-title { font-size: 28px; line-height: 1.2; margin: 0 0 18px; font-weight: 700; }
.section-title { font-size: 20px; margin: 0 0 14px; }

/* ---------- left menu ---------- */
.sidebar { overflow: hidden; }
.sidebar h2 { margin: 0; background: var(--teal); color: #fff; text-align: center; font-size: 15px; letter-spacing: .06em; padding: 12px; text-transform: uppercase; }
.sidebar ul { list-style: none; margin: 0; padding: 6px 0; }
.sidebar a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 16px; font-size: 14px; color: var(--text); }
.sidebar a:hover { color: var(--orange); background: #f7f9fa; }
.sidebar .icon { width: 16px; height: 16px; opacity: .55; }
.sidebar .lvl-2 > a { padding-left: 30px; }
.sidebar .lvl-3 > a { padding-left: 44px; color: var(--muted); font-size: 13.5px; padding-top: 5px; padding-bottom: 5px; }
.sidebar .lvl-4 > a { padding-left: 58px; color: var(--muted); font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.sidebar .open > a { font-weight: 700; color: var(--text); }
.sidebar .current > a { background: var(--orange); color: #fff; border-radius: 8px; margin: 2px 8px; padding-left: 22px; padding-right: 8px; font-weight: 700; }
.sidebar .current > a .icon { opacity: 1; }
.sidebar .more-toggle { padding-left: 44px; color: var(--teal-dark); font-weight: 600; font-size: 13.5px; background: none; border: 0; cursor: pointer; padding-top: 5px; padding-bottom: 5px; font-family: inherit; }
.sidebar .is-extra { display: none; }
.sidebar.show-all .is-extra { display: list-item; }
.sidebar.show-all .more-toggle-li { display: none; }

/* sub-category chips (phones) */
.chips { display: none; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.chip { white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--text); font-family: inherit; cursor: pointer; line-height: 1.4; }
.chip:hover { border-color: var(--orange); color: var(--text); }
.chip.active { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.chips .is-extra { display: none; }
.chips.show-all .is-extra { display: inline-block; }
.chips.show-all .chip-more { display: none; }

/* ---------- toolbar: price, sorting, in stock ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 16px 20px; margin-bottom: 18px; }
.toolbar label, .toolbar .label { font-size: 14px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; flex: 1 1 420px; }
.filters-head, .filters .filters-apply { display: none; }
.price-filter { display: flex; align-items: center; gap: 12px; flex: 1 1 340px; }
.price-values { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--orange); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-values output { min-width: 4.2em; text-align: right; }
.price-values output:last-child { text-align: left; }
/* price range: two native range inputs on one track (shop.js); only the thumbs take the pointer */
.range { --thumb: 22px; position: relative; flex: 1 1 180px; min-width: 140px; height: 32px; }
.range-track { position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--line); }
.range-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 4px; background: var(--orange); }
.range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range input[type="range"]:focus { outline: none; }
.range input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; height: 100%; }
.range input[type="range"]::-moz-range-track { background: none; border: 0; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: var(--thumb); height: var(--thumb); margin-top: calc((32px - var(--thumb)) / 2); border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: grab; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: var(--thumb); height: var(--thumb); box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: grab; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(246, 117, 0, .3); }
.range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(246, 117, 0, .3); }
.range input.is-top { z-index: 1; }
@media (pointer: coarse) { .range { --thumb: 28px; height: 40px; } .range input[type="range"]::-webkit-slider-thumb { margin-top: calc((40px - var(--thumb)) / 2); } }
.razeni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.razeni form { display: contents; }
.f-select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 34px 7px 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2366727c' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; max-width: 100%; }
.f-select:focus { outline: none; border-color: var(--teal); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: #cfd6db; position: relative; cursor: pointer; transition: background .15s; margin: 0; flex: none; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(18px); }
.filter-btn { display: none; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--orange-soft); color: #8a4300; font-size: 14px; }
.filter-note .icon { width: 16px; height: 16px; flex: none; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--teal-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }
.filter-note .link-btn { margin-left: auto; }
.listing-goods { transition: opacity .15s; }
.listing.is-loading .listing-goods { opacity: .45; pointer-events: none; }

/* ---------- pagination (catalog/_pagination.html.twig): the count above the products, the page links below ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.pager .result-count { color: var(--muted); font-size: 14px; margin-right: auto; }
.listing-pager .pager { margin: 24px 0 0; justify-content: center; }
.listing-pager .result-count, .listing-count .strankovani { display: none; }
.strankovani { display: flex; flex-wrap: wrap; gap: 6px; }
.strankovani a, .strankovani b, .strankovani .is-disabled { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: var(--shadow); font-weight: 600; padding: 0 12px; color: var(--text); font-size: 14px; }
.strankovani a:hover { color: var(--orange); }
.strankovani b.actual { background: var(--orange); color: #fff; }
.strankovani .is-disabled { color: #b5bdc3; box-shadow: none; background: transparent; }

/* ---------- product cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* homepage: 6 newest products give full rows - 5 columns on desktop (the 6th hidden), 3 on tablets, 2 on phones */
.product-grid--home { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-grid--home > .pcard:nth-child(n+6) { display: none; }
@media (max-width: 1100px) {
  .product-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid--home > .pcard:nth-child(n+6) { display: flex; }
}
.product-grid .empty { grid-column: 1 / -1; color: var(--muted); }
.pcard { display: flex; flex-direction: column; padding: 14px; transition: box-shadow .2s, transform .2s; min-width: 0; }
.pcard:hover { box-shadow: 0 10px 28px rgba(16, 24, 32, .12); transform: translateY(-2px); }
.pcard-photo { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 12px; }
.pcard-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.pcard-badges { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; z-index: 1; }
.badge { font-size: 12px; font-weight: 700; color: #fff; border-radius: 6px; padding: 2px 8px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5; }
.badge--sale { background: var(--red); }
.badge--new { background: var(--teal); }
.pcard-name { font-size: 15px; line-height: 1.35; margin: 0 0 6px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard-name a { color: var(--text); }
.pcard-name a:hover { color: var(--orange); }
.pcard-desc { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-stock { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 13px; font-weight: 600; margin-top: auto; margin-bottom: 8px; min-height: 20px; }
.pcard-stock .icon { width: 15px; height: 15px; stroke-width: 3; }
.pcard-stock.is-order { color: var(--muted); font-weight: 400; }
.pcard-stock.is-order .icon { display: none; }
.pcard-buy { margin: 0; }
.pcard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 36px; }
.pcard-row .f-select { padding-top: 5px; padding-bottom: 5px; min-width: 0; }
.pcard-pack { font-size: 14px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-price { font-size: 20px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }
.pcard-prices { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.pcard-prices .price-was { font-size: 13px; }
.pcard-prices .price-tip { left: auto; right: 0; }
.pcard.is-promo .pcard-price { color: var(--red); }

/* struck-out original price (loyalty discount or promotion); the reason shows on hover, keyboard focus or tap.
   The tooltip is placed over the whole price row (.price-box, .pcard-row), so it never runs off a phone screen. */
.price-box, .pcard-row { position: relative; }
.price-was { color: #a0aec0; cursor: help; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.price-was:focus { outline: none; }
.price-was:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.price-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: max-content; max-width: min(100%, 320px);
  background: var(--text); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; padding: 7px 11px; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16, 24, 32, .18); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.price-was.is-open .price-tip, .price-was:focus-visible .price-tip { opacity: 1; visibility: visible; }
@media (hover: hover) { .price-was:hover .price-tip { opacity: 1; visibility: visible; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: var(--orange); color: #fff; font: inherit; font-weight: 700; padding: 10px 16px; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.btn:hover { background: var(--orange-hover); color: #fff; }
.btn:active { transform: scale(.98); }
.btn:disabled { background: #c9d0d5; cursor: not-allowed; transform: none; }
.btn--secondary { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn--secondary:hover { background: #f3f6f7; color: var(--text); }
.btn--block { width: 100%; }
.btn--lg { font-size: 17px; padding: 12px 20px; }

/* ---------- product page ---------- */
.notice { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-weight: 700; }
.notice--warn { background: #fdecea; color: #a12b17; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px; margin: 8px 0 24px; }
.gallery-main { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.gallery-main .pcard-badges { top: 12px; left: 12px; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gallery-thumbs a { width: 72px; aspect-ratio: 4 / 3; border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 3px; display: grid; place-items: center; }
.gallery-thumbs a:hover { border-color: var(--orange); }
.gallery-thumbs img { max-width: 100%; max-height: 100%; display: block; }
.buybox h1 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; font-weight: 700; }
.buybox form { margin: 0; }
.code { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 18px; }
.price-big { font-size: 36px; font-weight: 800; color: var(--orange); line-height: 1; }
.price-box del { color: #a0aec0; font-size: 17px; }
.price-box small { color: var(--muted); font-size: 13px; }
.field-label { font-weight: 700; margin-bottom: 8px; font-size: 14px; }
/* packagings: two columns of compact tiles - name and price on one line, availability under them */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 7px 12px; line-height: 1.3; color: var(--text); transition: border-color .15s, background .15s; }
.pack:hover { border-color: #f5b27a; color: var(--text); }
.pack b { font-size: 14px; overflow-wrap: anywhere; }
.pack span { font-weight: 600; text-align: right; white-space: nowrap; }
.pack small { grid-column: 1 / -1; font-size: 12px; color: var(--green); font-weight: 600; }
.pack small.later { color: var(--muted); font-weight: 400; }
.pack[aria-current="true"] { border-color: var(--orange); background: var(--orange-soft); }
.availability { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 8px 12px; border-radius: 8px; background: #eaf6ec; color: #1f6d2c; font-size: 14px; }
.availability.is-out { background: #f3f6f7; color: var(--muted); }
.single-pack { margin-bottom: 14px; font-size: 14px; }
.add-row { display: flex; gap: 10px; margin-bottom: 8px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.qty button { width: 40px; height: 48px; border: 0; background: #f3f6f7; font-size: 20px; cursor: pointer; color: var(--text); }
.qty input { width: 48px; height: 48px; text-align: center; border: 0; font: inherit; font-weight: 700; color: var(--text); }
.add-row .btn { flex: 1; }
.delivery { padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.delivery div { display: flex; gap: 10px; align-items: center; }
.delivery div + div { margin-top: 4px; }
.delivery .icon { color: var(--teal-dark); }
.description { padding: 24px; margin-bottom: 24px; }
.description .textdetail { color: #34414b; overflow-wrap: anywhere; }
.description .textdetail img { max-width: 100%; height: auto; }
.description .textdetail table { max-width: 100%; }
.buy-bar { display: none; }

/* ---------- recommendations (pages that keep the legacy content) ---------- */
.recommendations { margin-top: 24px; }
/* 6 products in full rows: 6 columns without the left menu, 5 with it (the 6th hidden), 3 on tablets, 2 on phones */
.rec-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.has-sidebar .rec-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.has-sidebar .rec-grid > .rec-item:nth-child(n+6) { display: none; }
@media (max-width: 1100px) {
  .has-sidebar .rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .has-sidebar .rec-grid > .rec-item:nth-child(n+6) { display: flex; }
}
@media (max-width: 900px) { .rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rec-grid, .has-sidebar .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; font-size: 13.5px; color: var(--text); }
.rec-item:hover { color: var(--orange); }
.rec-item img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: contain; }
.rec-item .n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; font-weight: 600; }
.rec-item b { color: var(--teal-dark); }

/* ---------- footer ---------- */
.site-footer { background: #24323c; color: #c9d3d9; font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; padding-bottom: 24px; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: #fff; }
.site-footer .copy { margin-left: auto; color: #8fa0aa; }

/* ---------- menu drawer, basket dialog, toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15, 23, 30, .45); z-index: 900; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: #fff; z-index: 950; overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, .15); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 34px; width: auto; }
.drawer ul { list-style: none; margin: 0; padding: 8px 0; }
.drawer li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.drawer li a.active { color: var(--orange); }
.drawer .links { border-top: 1px solid var(--line); }
.drawer .links a { font-weight: 400; color: var(--muted); padding-top: 9px; padding-bottom: 9px; border-bottom: 0; }
.close-btn { border: 0; background: #f3f6f7; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--text); flex: none; }

.basket-dialog { border: 0; padding: 0; border-radius: 16px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); color: var(--text); font-size: 15px; }
.basket-dialog::backdrop { background: rgba(15, 23, 30, .5); }
.basket-dialog.is-loading .bd-content { opacity: .5; pointer-events: none; }
.bd-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; background: #eaf6ec; color: var(--green); font-weight: 700; font-size: 16px; }
.bd-head .icon { stroke-width: 3; }
.bd-head .close-btn { margin-left: auto; background: #fff; }
.bd-body { padding: 18px 20px 4px; outline: none; }
.bd-item { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.bd-item img { width: 96px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; flex: none; }
.bd-item h3 { margin: 0 0 2px; font-size: 16px; line-height: 1.3; }
.bd-hint { font-size: 13px; color: var(--muted); }
.bd-options { display: grid; gap: 8px; margin-bottom: 18px; }
.bd-option { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.bd-option:hover { border-color: #f5b27a; }
.bd-option:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.bd-option input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; flex: none; }
.bd-option b { min-width: 64px; }
.bd-option .avail { font-size: 13px; color: var(--muted); }
.bd-option .avail.is-in { color: var(--green); font-weight: 600; }
.bd-option .avail.is-out { color: var(--red); }
.bd-option .p { margin-left: auto; font-weight: 700; white-space: nowrap; }
.bd-also h4 { margin: 0 0 10px; font-size: 14px; }
/* hlídací pes: the button under the buy box and its dialog (the basket dialog's look) */
.watch-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); text-align: left; cursor: pointer; }
.watch-btn .icon { width: 18px; height: 18px; color: var(--orange); flex: none; }
.watch-btn b { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.watch-btn:hover b { color: var(--orange-hover); }
.watch-dialog .wd-head { background: var(--orange-soft); color: #8a4300; }
.wd-options { display: grid; gap: 8px; margin-bottom: 14px; }
.wd-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 4px 4px 42px; font-size: 14px; color: var(--muted); }
.wd-target[hidden] { display: none; }
.wd-target input { width: 90px; border: 1px solid #cfd8dd; border-radius: 8px; padding: 7px 10px; font: inherit; color: var(--text); }
.wd-target .field-error { flex-basis: 100%; }
.wd-field { margin: 0 0 8px; }
.wd-field input { border: 1px solid #cfd8dd; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 15px; width: 100%; }
.wd-field input:focus, .wd-target input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28, 181, 173, .15); }
.wd-email, .wd-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.wd-email b { color: var(--text); }
.wd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wd-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #a12b17; font-size: 14px; font-weight: 600; }
.wd-foot { padding: 4px 20px 20px; }
.wd-foot .btn { width: 100%; }
.wd-done { padding: 28px 24px 24px; text-align: center; }
.wd-done h3 { margin: 0 0 8px; font-size: 20px; }
.wd-done p { margin: 0 0 14px; color: var(--muted); }
.watch-list { padding: 4px 20px; }
.watch-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.watch-row:last-child { border-bottom: 0; }
.watch-row img { width: 60px; height: 45px; object-fit: contain; flex: none; }
.watch-info { flex: 1; min-width: 0; }
.watch-info a { color: var(--text); }
.watch-info small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.watch-info small .icon { width: 14px; height: 14px; color: var(--orange); }
.watch-row form { margin: 0; flex: none; }
.watch-cancel h1 { margin-bottom: 10px; }
.bd-also-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.bd-also-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; font-size: 13px; color: var(--text); }
.bd-also-item:hover { border-color: var(--orange); color: var(--text); }
.bd-also-item img { height: 60px; width: auto; margin: 0 auto 6px; display: block; }
.bd-also-item .n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
.bd-also-item b { color: var(--teal-dark); }
.bd-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px 18px; }
.bd-sum { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.bd-sum b { color: var(--orange); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #1f2a33; color: #fff; padding: 12px 18px; border-radius: 12px; display: flex; gap: 10px; align-items: center; z-index: 1000; transition: opacity .2s, transform .2s; pointer-events: none; font-size: 15px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .icon { color: #7ee08e; stroke-width: 3; }
.toast.is-error .icon { color: #ff9c8a; }

/* ---------- tablet & phone ---------- */
@media (max-width: 1100px) {
  .cat-nav a { font-size: 12.5px; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 900px) {
  .site-topbar, .cat-nav, .sidebar { display: none; }
  .site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .menu-btn { display: flex; }
  .site-logo { justify-self: start; }
  .site-logo img { height: 40px; }
  .site-search { grid-column: 1 / -1; max-width: none; order: 3; }
  .site-cart { padding: 0; background: transparent; margin-left: 0; }
  .site-cart:hover { background: transparent; }
  .cart-text { display: none; }
  .page-layout, .page-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .panel { padding: 16px; }
  .chips { display: flex; }
  .page-title { font-size: 22px; margin-bottom: 14px; }

  .toolbar { padding: 10px 12px; gap: 10px; }
  .filter-btn { display: inline-flex; }
  /* the price filter and "in stock" become a bottom sheet */
  .filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); display: none; flex-direction: column; align-items: stretch; gap: 18px; }
  .filters.is-open { display: flex; }
  .filters-head { display: flex; align-items: center; justify-content: space-between; }
  .filters-head h2 { margin: 0; font-size: 18px; }
  .price-filter { flex-wrap: wrap; flex: none; }
  .price-filter .range { flex: 1 1 100%; order: 3; }
  .price-values output { min-width: 0; }
  .filters .filters-apply { display: flex; width: 100%; padding: 13px; font-size: 16px; }

  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { padding: 10px; }
  .pcard-desc { display: none; }
  .pcard-name { font-size: 14px; }
  .pcard-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .pcard-price { font-size: 18px; }
  .pcard-prices { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; position: relative; }   /* tooltip right above the price */
  .pcard .btn { padding: 9px 10px; }
  .pcard .btn span { display: none; }   /* phones: only the cart icon ... */
  .pcard .btn:disabled span { display: inline; }   /* ... but "Nedostupné" has no icon, keep its text */
  #vypis_kusu { display: none; }
  .strankovani { gap: 4px; }
  .strankovani a, .strankovani b, .strankovani .is-disabled { min-width: 34px; height: 36px; padding: 0 8px; border-radius: 8px; }

  .product-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px; }
  .price-big { font-size: 30px; }
  .add-row .btn { display: none; }   /* the sticky buy bar submits the form (with the quantity) */
  .description { padding: 16px; }
  .buy-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; box-shadow: 0 -4px 16px rgba(0, 0, 0, .1); }
  .buy-bar .pcard-price { color: var(--orange); font-size: 22px; display: block; line-height: 1.1; }
  .buy-bar small { display: block; color: var(--muted); font-size: 12px; }
  .buy-bar .btn { margin-left: auto; padding: 12px 22px; font-size: 16px; }
  body.has-buy-bar { padding-bottom: 76px; }
  body.has-buy-bar .toast { bottom: 92px; }

  .site-footer .copy { margin-left: 0; }

  .basket-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; }
  .bd-body { padding: 14px 16px 0; }
  .bd-foot { grid-template-columns: 1fr; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .bd-sum { order: -2; }
  .bd-foot a.btn { order: -1; }
  .bd-also-item img { height: 48px; }
}

/* homepage text below the newest products */
.home-info { margin-top: 24px; }
.home-info::after { content: ''; display: block; clear: both; }
.home-info h2 { font-size: 20px; line-height: 1.5; margin: 70px 0 0; color: #0db4ac; }
.home-info h2:first-of-type { margin-top: 0; }
.home-info hr { border: 0; height: 1px; background: #0db4ac; margin: 0 0 12px; }
.home-info p { text-align: justify; }
.home-info .kdo_jsme { float: left; width: 343px; max-width: 40%; height: auto; margin: 8px 45px 0 0; }
.home-info .sleva10 { float: right; font-size: 60px; font-weight: 700; line-height: 1.5; color: #0db4ac; margin: -10px 30px 0 40px; }
.home-info .parking { float: right; margin: -5px 20px 0 40px; }
.home-info .orange { color: var(--orange); font-size: 14px; }
@media (max-width: 900px) {
  .home-info .kdo_jsme, .home-info .sleva10, .home-info .parking { float: none; display: block; margin: 0 0 12px; max-width: 100%; }
  .home-info .sleva10 { font-size: 40px; }
  .home-info p { text-align: left; }
}

/* =====================================================================================
   Basket, checkout, account and content pages (redesign part 2)
   ===================================================================================== */
.muted { color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--teal-dark); font-weight: 600; font-size: 14px; }
.back-link:hover { color: var(--orange); }

/* notices */
.notice--info { background: var(--teal-soft); color: #0b5f5a; }
.notice--ok { background: #eaf6ec; color: #1f6d2c; }
.notice a { color: inherit; text-decoration: underline; }
.notice p { margin: 0; }
.notice p + p { margin-top: 6px; }
.page-main .warning { color: #a12b17; }

/* checkout steps: white cards; the current step has an orange outline and icon, done steps a teal icon,
   the steps that can be opened (done, next) a border on hover */
.steps { display: flex; list-style: none; margin: 0 0 20px; padding: 0; gap: 8px; }
.steps li { flex: 1 1 0; min-width: 0; }
.steps a, .steps span.step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid transparent; border-radius: 12px; background: #fff; box-shadow: var(--shadow); color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; transition: border-color .15s, color .15s; }
.steps a { color: var(--text); }
.steps a:hover { border-color: #f5b27a; color: var(--text); }
.steps b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f1f4f6; color: #9aa5ad; }
.steps b .icon { width: 18px; height: 18px; }
.steps .step-label { overflow: hidden; text-overflow: ellipsis; }
.steps .done b { background: var(--teal-soft); color: var(--teal-dark); }
.steps .next b { color: var(--muted); }
.steps .current span.step { border-color: var(--orange); color: var(--text); font-weight: 700; }
.steps .current b { background: var(--orange-soft); color: var(--orange); }

/* availability text (basket/_availability.html.twig) */
.avail { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.avail--stock { color: var(--green); font-weight: 600; }
.avail--partial { color: #b26a00; }
.avail--order { color: var(--muted); }

/* basket page */
.basket-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.basket-lines { padding: 6px 20px; }
.bline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 110px 40px; gap: 16px; align-items: center; padding: 14px 0; }
.bline + .bline { border-top: 1px solid var(--line); }
.bline-photo img { width: 96px; height: 72px; object-fit: contain; display: block; }
.bline-name { display: block; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 6px; }
.bline-name:hover { color: var(--orange); }
.bline-info .f-select { padding-top: 5px; padding-bottom: 5px; margin: 0 8px 6px 0; max-width: 100%; }
.bline-packlabel { display: inline-block; font-size: 14px; color: var(--muted); margin: 0 8px 6px 0; }
.qty--sm button { width: 34px; height: 38px; font-size: 18px; }
.qty--sm input { width: 42px; height: 38px; }
.bline-price { text-align: right; font-weight: 700; white-space: nowrap; }
.bline-price small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.bline-remove { width: 36px; height: 36px; border: 0; border-radius: 8px; background: #f3f6f7; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.bline-remove:hover { background: #fdecea; color: #a12b17; }
.basket-page.is-loading { opacity: .6; pointer-events: none; transition: opacity .2s; }
.summary-box { padding: 20px; }
.summary-box h2 { font-size: 17px; margin: 0 0 12px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; font-weight: 700; }
.sum-total b { font-size: 24px; color: var(--orange); }
.summary-box .btn { margin-top: 16px; }
.summary-box .notice { margin: 12px 0 0; font-size: 14px; }
.summary-box .link-button { display: block; margin: 14px auto 0; color: var(--muted); font-size: 14px; }
/* last checkout step: note, total and terms above the order button */
.order-finish textarea { min-height: 72px; }
.order-finish-total { margin-top: 16px; }
.order-terms { margin: 14px 0 0; }
.empty-state { padding: 32px 24px; text-align: center; }
.empty-state p { margin: 0 0 16px; font-size: 17px; }

/* order summary lines (basket/_invoice.html.twig, also reloaded by shop.js) */
.sum-lines { list-style: none; margin: 0; padding: 0; }
.sum-lines li { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; }
.sum-lines li + li { border-top: 1px solid var(--line); }
.sum-lines img { width: 48px; height: 36px; object-fit: contain; flex: none; }
.sum-name { flex: 1; min-width: 0; line-height: 1.3; }
.sum-name small { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sum-lines b { white-space: nowrap; }
.sum-shipping .sum-name { color: var(--muted); }

/* checkout choices (shipping, payment, addresses) */
.checkout-box { padding: 20px; margin-bottom: 18px; }
.checkout-box h2 { font-size: 17px; margin: 0 0 12px; }
.choice { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.choice + .choice { margin-top: 8px; }
.choice:hover { border-color: #f5b27a; }
.choice:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.choice.is-disabled:hover { border-color: var(--line); }
.choice.is-disabled img { filter: grayscale(1); }
.choice-text .choice-blocked { color: #b3261e; font-size: 13px; margin-top: 2px; }
.choice-text .choice-parcels { color: var(--teal-dark); font-size: 13px; margin-top: 2px; }
.shipping-blocked { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #8a1c14; font-size: 14px; }
.choice input[type="radio"] { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; flex: none; }
.choice img { max-height: 30px; width: auto; max-width: 70px; flex: none; }
.choice-text { flex: 1; min-width: 0; line-height: 1.35; }
.choice-text small { display: block; color: var(--muted); }
.choice-note:not(:empty) { display: block; margin-top: 4px; font-size: 13px; color: var(--teal-dark); font-weight: 600; }
.choice-price { font-weight: 700; white-space: nowrap; }
.payment-hint { margin: 0 0 10px; font-size: 14px; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.checkout-side .checkout-actions { flex-direction: column-reverse; }
.checkout-side .checkout-actions .btn { width: 100%; }
.address-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.address-cards .choice { align-items: flex-start; margin: 0; }
.same-billing { margin-top: 14px; }
.address-cards .choice input { margin-top: 3px; }
.address-cards hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* forms */
.form-card { padding: 24px; }
.form-card + .form-card { margin-top: 18px; }
.form-card h2 { font-size: 18px; margin: 0 0 14px; }
/* "Přidat novou adresu" on the delivery details: a collapsed card, the summary is the button */
.form-card.add-address { padding: 0; }
.add-address summary { display: flex; align-items: center; gap: 10px; padding: 16px 24px; font-weight: 700; color: var(--teal-dark); cursor: pointer; list-style: none; }
.add-address summary::-webkit-details-marker { display: none; }
.add-address summary:hover { color: var(--orange); }
.add-address summary .icon { width: 20px; height: 20px; transition: transform .15s; }
.add-address[open] summary .icon { transform: rotate(45deg); }
.add-address form { padding: 0 24px 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: #3b4852; }
.req { color: var(--orange); }
.form-card input[type="text"], .form-card input[type="password"], .form-card input[type="email"], .form-card input[type="tel"], .form-card select, .form-card textarea,
.panel input[type="text"], .panel input[type="password"], .panel input[type="email"], .panel input[type="tel"], .panel select, .panel textarea {
  border: 1px solid #cfd8dd; border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--text); background: #fff; max-width: 100%; }
.form-card input[type="text"], .form-card input[type="password"], .form-card input[type="email"], .form-card input[type="tel"], .form-card select, .form-card textarea { width: 100%; box-sizing: border-box; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus, .panel input:focus, .panel select:focus, .panel textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28, 181, 173, .15); }
.form-card input:disabled { background: #f3f6f7; color: var(--muted); }
/* form checks (shop.js, form[data-validate]) */
.form-card [aria-invalid="true"], .panel [aria-invalid="true"] { border-color: #d93025; }
.field-error { margin: 4px 0 0; color: #b3261e; font-size: 13px; font-weight: 600; }
.address-cards > .field-error { grid-column: 1 / -1; }
.btn.is-waiting { opacity: .6; }
.form-card textarea { min-height: 90px; resize: vertical; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.checkbox input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.form-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.form-toggle { border: 0; background: none; padding: 4px 0; color: var(--teal-dark); font: inherit; font-weight: 600; cursor: pointer; }
.form-toggle:hover { color: var(--orange); }
/* display: legacy CSS hid both parts; shop.js shows them with the hidden attribute */
.page-main #firma, .page-main #druha_adresa { display: block; margin: 10px 0 0; padding: 0; }
.page-main #druha_adresa b { display: block; margin: 4px 0 10px; font-size: 14px; }
.auth-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.auth-narrow { max-width: 480px; }

/* order sent */
.order-done { text-align: center; padding: 32px 24px; }
.done-icon { width: 64px; height: 64px; border-radius: 50%; background: #eaf6ec; color: var(--green); display: grid; place-items: center; margin: 0 auto 16px; }
.done-icon .icon { width: 34px; height: 34px; stroke-width: 3; }
.done-icon.is-error { background: #fdecea; color: #a12b17; }
.order-done h1 { font-size: 26px; margin: 0 0 8px; }
/* QR Platba for bank transfers (checkout/done.html.twig) */
.qr-pay { display: flex; align-items: center; gap: 24px; max-width: 620px; margin: 24px auto 4px; padding: 20px; border-radius: 14px; background: var(--orange-soft); text-align: left; }
.qr-pay-code { margin: 0; flex: none; text-align: center; }
.qr-pay-code svg { display: block; width: 168px; height: 168px; border-radius: 10px; background: #fff; }
.qr-pay-code figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #8a4300; }
.qr-pay-code figcaption b { display: block; font-size: 13px; }
.qr-pay-info h2 { margin: 0 0 10px; font-size: 18px; color: #8a4300; }
.qr-pay-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 10px; font-size: 15px; }
.qr-pay-info dt { color: var(--muted); }
.qr-pay-info dd { margin: 0; font-weight: 700; }
.qr-pay-info p { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .qr-pay { flex-direction: column; align-items: stretch; }
  .qr-pay-code svg { margin: 0 auto; width: 200px; height: 200px; }
}
.page-main .pay_button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--orange); color: #fff; font: inherit; font-weight: 700; font-size: 16px; padding: 12px 22px; cursor: pointer; }
.page-main .pay_button:hover { background: var(--orange-hover); }

/* account / orders pages (they bring their own styles; align them with the shop) */
.panel .ucet-container, .panel .obj-container, .panel .udaje-container { padding: 0; max-width: none; font-family: inherit; }
.panel .ucet-container h1, .panel .obj-container h1, .panel .udaje-container h1 { font-size: 26px; font-weight: 700; }

/* content pages: keep their layout, keep wide tables and maps inside the page */
.panel table { max-width: 100%; }
.panel iframe { max-width: 100%; }

@media (max-width: 900px) {
  .basket-layout, .checkout-layout, .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 4px; }
  .steps a, .steps span.step { padding: 8px 6px; gap: 6px; font-size: 12px; justify-content: center; }
  .steps b { width: 30px; height: 30px; }
  .steps li:not(.current) .step-label { display: none; }
  .steps li.current { flex: 3 1 0; }
  .basket-lines { padding: 2px 12px; }
  .bline { grid-template-columns: 64px minmax(0, 1fr) auto 36px; grid-template-areas: "photo info info remove" "photo qty price price"; gap: 8px 12px; }
  .bline-photo { grid-area: photo; align-self: start; }
  .bline-photo img { width: 64px; height: 48px; }
  .bline-info { grid-area: info; }
  .bline .qty { grid-area: qty; justify-self: start; }
  .bline-price { grid-area: price; align-self: center; }
  .bline-remove { grid-area: remove; align-self: start; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card, .summary-box, .checkout-box { padding: 16px; }
  .add-address summary { padding: 14px 16px; }
  .add-address form { padding: 0 16px 16px; }
  .order-finish-total { display: none; }   /* the summary with its total is right above on phones */
  .order-done { padding: 24px 16px; }
  /* tables of the account pages become stacked rows */
  .panel .historie-table thead, .panel .zbozi-table thead { display: none; }
  .panel .historie-table, .panel .zbozi-table, .panel .historie-table tbody, .panel .zbozi-table tbody { display: block; width: 100%; }
  .panel .historie-table tr, .panel .zbozi-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .panel .historie-table td, .panel .zbozi-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; width: auto !important; background: none !important; }
  .panel .historie-table td::before, .panel .zbozi-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .panel .historie-table td:empty, .panel .zbozi-table td:empty, .panel .zbozi-table .celkem-radek td:not([data-label]) { display: none; }
}

/* delivery details: login link above the form, e-mail hint below the e-mail field */
.login-hint { display: flex; align-items: center; gap: 10px; }
.login-hint .icon { flex: none; }
.email-hint { border-radius: 10px; background: var(--orange-soft); color: #8a4300; padding: 10px 14px; font-size: 14px; }
.email-hint:empty { display: none !important; }
.email-hint p { margin: 0; }
.email-hint a { color: inherit; font-weight: 700; text-decoration: underline; }
.email-hint p + p { margin-top: 6px; }
.email-fix { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.drawer-logo { display: block; }

/* search suggestions under the header search box */
.site-search { position: relative; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 700; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(16, 24, 32, .18); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px 0; text-align: left; }
.ss-head { padding: 8px 16px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ss-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--text); }
.ss-item:hover, .ss-item.is-active { background: var(--orange-soft); color: var(--text); }
.ss-item img { width: 48px; height: 36px; object-fit: contain; flex: none; }
.ss-cat .icon { width: 16px; height: 16px; color: var(--teal-dark); }
.ss-name { flex: 1; min-width: 0; line-height: 1.3; font-size: 14px; }
.ss-name small { display: block; font-size: 12px; color: var(--muted); }
.ss-name small.is-in { color: var(--green); font-weight: 600; }
.ss-name mark { background: none; color: var(--orange); font-weight: 700; }
.ss-price { font-weight: 700; white-space: nowrap; font-size: 14px; }
.ss-price small { font-weight: 400; color: var(--muted); }
.ss-all { justify-content: center; font-weight: 700; color: var(--teal-dark); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.ss-empty { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 14px; }
.search-more { margin: 20px 0 0; padding: 12px 16px; background: #fff; border-radius: 12px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- Czech address suggestions under the street field (shop.js, input[data-address-suggest]) ---------- */
.has-address-suggest { position: relative; }
.address-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 650; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(16, 24, 32, .18); max-height: min(50vh, 400px); overflow-y: auto; padding: 4px 0; text-align: left; }
.as-item { padding: 8px 14px; cursor: pointer; line-height: 1.3; font-size: 15px; color: var(--text); }
.as-item small { display: block; font-size: 12.5px; color: var(--muted); }
.as-item:hover, .as-item.is-active { background: var(--orange-soft); }
.as-street span::after { content: ' …'; color: var(--muted); }
.as-source { margin: 4px 0 0; padding: 6px 14px 2px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }

/* ---------- product pictures in a dialog (shop.js, links in .gallery) ---------- */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(12, 16, 20, .94); color: #fff; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; background: #fff; border-radius: 8px; user-select: none; touch-action: pan-y; }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.lightbox .icon { width: 24px; height: 24px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 14px; }
.lb-prev .icon { transform: scaleX(-1); }
.lb-next { right: 14px; }
.lb-count { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }
@media (max-width: 767px) {
  .lb-prev, .lb-next { top: auto; bottom: 12px; margin: 0; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
}

/* ---------- pickup-point map (shop.js, /odber-zbozi/) ---------- */
.pickup-dialog { border: 0; padding: 0; width: min(1100px, 94vw); height: 90vh; height: 90dvh; max-width: none; max-height: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.pickup-dialog[open] { display: flex; flex-direction: column; }
.pickup-dialog::backdrop { background: rgba(16, 24, 32, .5); }
.pickup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); font-size: 17px; }
.pickup-dialog iframe { flex: 1; width: 100%; border: 0; display: block; }
.choice-note .link-btn { font-size: 13px; }
@media (max-width: 767px) {
  .pickup-dialog { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
}