/* TOPPLACHTY — shop-only rules. Loaded after site.css; never redefines its selectors.
   Authority: _spec/DESIGN.md §7.3. Tokens: tokens.css. */

/* h1 has no page-independent size in site.css (only .hero h1 does); shop pages set their own.
   §6: caps only for H1/H2 ≤ 6 words (build-shop.mjs adds .caps on the short ones; the rest
   keep the sentence case they already carry verbatim). */


/* results row: count + sort select */
.sort-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.sort-select {
  padding: .5rem .7rem; background: var(--cream-3); border: 1px solid var(--line-2);
  border-radius: var(--radius); font-size: .9rem;
  /* narrow-phone containment: stay inside the flex row */
  min-width: 0; max-width: 100%;
}

/* grid-blowout guard: .shop-layout has no explicit column template below 1024px, so its
   implicit single-column track sizes to the widest child's min-content — and .cat-rail's
   horizontal mobile scroll-strip (overflow-x: auto, deliberately unwrapped) has a huge one.
   Grid items default to min-width: auto; without this the whole layout overflows the viewport. */
.shop-layout > * { min-width: 0; }

/* sub-categories (Podložky, Nýty under Spojovací materiál) */
.cat-rail li.sub { margin-left: 0; }
.cat-rail li.sub a { padding-left: 1.6rem; font-size: .88rem; opacity: .88; }
@media (min-width: 1024px) { .cat-rail li.sub a { padding-left: 2rem; } }
@media (max-width: 1023.98px) { .cat-rail li.sub a { padding-left: 1.4rem; } }

/* card with no source image at all (one Bazar item ships with zero images) */
.card-img--empty {
  aspect-ratio: 1; background-color: var(--cream-2);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 10px);
}

/* product gallery thumbnails */
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery-thumbs .gallery-thumb {
  width: 64px; height: 64px; padding: 6px; border: 0; background: var(--ink-2); cursor: pointer;
}
.gallery-thumbs .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .gallery-thumb[aria-current="true"] { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* buy box spacing (product page right column) */
.buy-box .price-block { margin-top: 1rem; }
.buy-box > div:last-child > * + * { margin-top: 1rem; }
.buy-box .tag { margin-top: .4rem; }

/* cart flap head/close (site.css defines the shell; the close control is shop-only) */
.cart-flap .cart-close {
  background: none; border: 1px solid var(--line-2); width: 36px; height: 36px; font-size: 1.3rem; line-height: 1;
}
.cart-flap .cart-line strong { font-weight: 500; }
.cart-line .cart-line-name { display: block; }
.cart-line .cart-line-meta { display: block; font-size: .8rem; opacity: .72; margin-top: .15rem; }
.cart-totals { display: grid; gap: .3rem; font-family: var(--f-mono); font-size: .92rem; }
.cart-totals .grand { font-size: 1.05rem; font-weight: 500; }

/* pokladna order summary reuses .cart-line / .cart-totals inside a cream card */
[data-cart-summary], [data-cart-page] {
  padding: 1.2rem; background: var(--cream-3); border: 1px solid var(--line);
}
[data-cart-summary] .cart-line, [data-cart-page] .cart-line { grid-template-columns: 56px 1fr auto; }

/* Checkout containment: native selects and fieldsets must not lend their min-content width to
   the checkout grids. Keep the shared form rules and the two desktop columns intact. */
[data-checkout-form],
[data-checkout-form] .field-row,
[data-checkout-form] .field,
[data-checkout-form] fieldset,
[data-checkout-form] input,
[data-checkout-form] select,
[data-checkout-form] textarea {
  min-width: 0;
  min-inline-size: 0;
}
[data-checkout-form] .choice > input { flex-shrink: 0; }
@media (min-width: 640px) {
  [data-checkout-form] .field-row {
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .wrap.grid-2:has(> [data-checkout-form]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* End checkout containment. */

/* tabs: no-JS keeps both panels stacked (site.css never hides tabpanels); JS adds this class
   once it takes over, so it can hide the inactive one. */
.tabs.js [role="tabpanel"][hidden] { display: none; }

/* product tab panel ends flush and .section-head has no top margin, so the description
   collides with the "SOUVISEJICI PRODUKTY" heading below it without this gap */
.tabs + .section-head,
[data-product] + .section-head { margin-top: clamp(2.4rem, 5vw, 4rem); }

/* metráž products: the swatch IS the product image */
.sw-big { --sw: #888; aspect-ratio: 4 / 3; width: 100%; background-color: var(--sw); background-image: radial-gradient(120% 90% at 8% -10%, rgba(255,255,255,.28) 0%, transparent 60%), repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.sw-big::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: rgba(0,0,0,.14); }
.okno .sw-big { position: relative; }

.cart-thumb-sw { display: block; width: 64px; height: 64px; background-color: var(--sw, #888); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
[data-cart-summary] .cart-thumb-sw, [data-cart-page] .cart-thumb-sw { width: 56px; height: 56px; }
.cat-rail-h { font-size: .72rem; margin-bottom: .6rem; opacity: .7; }
@media (max-width: 1023.98px) { .cat-rail-h { display: none; } }
.masthead.is-product h1 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); text-transform: none; line-height: 1.02; max-width: 24ch; }

/* Narrow-phone containment: avoid forcing two product-card min-content tracks into viewports
   narrower than 360px (the sort control's containment lives in its base rule above). */
@media (max-width: 359.98px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}