/*
 * product-list-lahoda-1 — server-rendered B2C product grid, AND the single
 * stylesheet of the shared product card (`product-card-lahoda` block, bottom
 * of this file) used by product-list-lahoda-1/2/3, search-lahoda-1 and any
 * other component that renders products/product-card.phtml or
 * product-card-schema.js#buildProductCard(). Those components load this file
 * next to their own; bump its ?version= in every component.php listing it.
 * Wrapper / inner split (same as footer-lahoda-1 / form-lahoda-1 / table-lahoda-1):
 * the root stays full-bleed so a future full-width background can be added
 * without touching the centred content.
 */

.product-list-lahoda-1 {
    width: 100%;
    container-type: inline-size;
}

.product-list-lahoda-1__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-7) var(--container-gutter);
}

/* Anchor target (display.anchorId): clears the sticky header + contact bar. */
.product-list-lahoda-1__inner {
    scroll-margin-top: 140px;
}

/*
 * Grid header row shared by product-list-lahoda-1/2/3 (this file is loaded by
 * all three): heading on the left, product-count badge, small "back to the
 * categories" outline pill. Wraps on phones. Brief 09.
 */
.product-grid-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-6);
}

.product-grid-head > h2 {
    margin: 0;
}

.product-grid-head__count {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--brand-gold-dark);
    background: var(--brand-gold-tint);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}

.product-grid-head__count[hidden] {
    display: none;
}

.product-grid-head__back {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast);
}

/* Server-rendered hidden; product-grid-head.js reveals it only when the
   #anchor target exists above the grid (a tile component on the page). */
.product-grid-head__back[hidden] {
    display: none;
}

.product-grid-head__back:hover,
.product-grid-head__back:focus-visible {
    border-color: var(--brand-gold);
    color: var(--brand-gold-dark);
}

@media (min-width: 768px) {
    .product-grid-head__back {
        margin-left: auto;
    }
}

/*
 * Shared product pager (brief 10): products/product-pager.phtml (server
 * lists) and product-pager.js#buildPager() (product-list-lahoda-2 refetch,
 * search-lahoda-1) emit the same DOM. Look copied from wedding-lahoda-1's
 * pager: outline pills, the current page a filled --brand-red pill, 44px
 * touch targets, wraps on phones. `--inert` = editor preview (no hrefs),
 * `is-busy` = a client refetch in flight.
 */
.product-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    font-family: var(--font-body);
}

.product-pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-pager__item {
    display: flex;
}

.product-pager__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

a.product-pager__link[href]:hover,
a.product-pager__link[href]:focus-visible {
    border-color: var(--brand-red);
    color: var(--brand-red-dark);
}

/* "‹ Predošlá" / "Ďalšia ›" carry words, not a digit: a roomier pill. */
.product-pager__link--prev,
.product-pager__link--next {
    padding: 0 var(--space-5);
}

.product-pager__link:focus-visible {
    outline: 2px solid var(--brand-gold-dark);
    outline-offset: 2px;
}

.product-pager__link.product-pager__link--current {
    border-color: var(--brand-red);
    background: var(--brand-red);
    color: var(--bg-cream);
}

.product-pager__link.product-pager__link--disabled {
    opacity: 0.45;
    cursor: default;
}

.product-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 44px;
    color: var(--ink-muted);
}

.product-pager__counts {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.product-pager--inert .product-pager__link,
.product-pager.is-busy .product-pager__link {
    pointer-events: none;
}

.product-pager.is-busy {
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .product-pager__link {
        transition: none;
    }
}

.product-list-lahoda-1__heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-6);
}

.product-list-lahoda-1__empty {
    font-family: var(--font-body);
    color: var(--ink-muted);
    margin: 0;
}

/* "auto" tier: minmax(240px) (was 220px before the 2026-10 card restyle) —
   the stepper + "Pridať" row and the one-line price need ~210px of content
   width, and 240px lands on the manual's 1 / 2 / 4 per row at phone /
   tablet / desktop widths. */
.product-list-lahoda-1__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
}

/*
 * Fixed column count (editor field "Počet kariet v riadku"), overriding the
 * auto-fill default above. Mobile is always capped at 2 regardless of the
 * desktop setting (component.php: $columnsMobile = min($columns, 2)) — same
 * convention as gallery-lahoda-1. Doubled class selectors so these always
 * win over the unconditional auto-fill rule above regardless of source
 * order; minmax(0, 1fr) (not plain 1fr) keeps a long name/price from
 * blowing out its column's width.
 */
.product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (min-width: 768px) {
    .product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* =====================================================================
 * Product card — `product-card-lahoda` (2026-10 restyle, brief 04)
 *
 * Markup: modules/cms/individual/products/product-card.phtml (PHP) and
 * static/cms/individual/products/product-card-schema.js#buildProductCard()
 * (JS) — identical DOM, change the three files together.
 *
 *   li.product-card-lahoda[--no-image]
 *     a.__link  (or div.__link--static)   photo + name/weight; its ::after
 *       .__media   img/video | .__fallback  stretches over the whole card
 *       .__head    .__name .__weight
 *     .__body      .__price .__allergens .__description .__fields
 *     .__actions   quick-add form | caller's own element   (above ::after)
 * ===================================================================== */

.product-card-lahoda {
    /* Cut-out product photos (2026-10-29, owner's restyle): the photos are
       WebP cut-outs with alpha on a 4:3 canvas, so the media area is a
       translucent cream wash over the card surface, the silhouette throws
       its own shadow and the name row glows warm gold upward "under" the
       product. The owner's draft used white 35 % / #00000042 / #ba8850 —
       retoned to the manual (ink-tinted shadow, never neutral black; gold
       family, no off-palette hex; no pure white). Scoped here, not in
       tokens.css. */
    --product-card-wash: rgba(251, 246, 236, 0.5);
    --product-card-cutout-shadow: drop-shadow(3px 2px 11px rgba(42, 33, 26, 0.26));
    --product-card-glow: color-mix(
        in srgb,
        var(--brand-gold) 70%,
        var(--brand-gold-light)
    );
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-cream-deep);
    border-radius: var(--radius);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

/* Hover/focus anywhere on a linked card: lift + warm shadow (the shadow
   tokens are --ink-tinted, never cold grey). */
.product-card-lahoda:has(a.product-card-lahoda__link:hover),
.product-card-lahoda:has(a.product-card-lahoda__link:focus-visible) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* The link's own outline would only frame the photo + name; draw focus on
   the whole card instead, matching the clickable area. */
.product-card-lahoda:has(a.product-card-lahoda__link:focus-visible) {
    outline: 2px solid var(--brand-gold-dark);
    outline-offset: 2px;
}

.product-card-lahoda__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.product-card-lahoda__link:focus-visible {
    outline: none;
}

/* Stretched link: the whole card opens the detail page. The actions row,
   the allergen badges (title tooltips) and the video toggle sit above it. */
a.product-card-lahoda__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.product-card-lahoda__link--static {
    cursor: default;
}

/* ---- Photo / image-less fallback ---- */

.product-card-lahoda__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Translucent on purpose: the head's gold glow (below) shows through
       it and through the cut-out's transparent pixels — `__media` is
       positioned, so it paints above the head's shadow. */
    background: var(--product-card-wash);
}

.product-card-lahoda__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* A shadow on the silhouette, not on the box — only visible because the
       photos carry alpha. */
    filter: var(--product-card-cutout-shadow);
}

.product-card-lahoda__video {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* The hover video replaces the photo — keep the silhouette shadow. */
    filter: var(--product-card-cutout-shadow);
    transition:
        opacity 0.5s ease,
        transform var(--transition-slow);
}

.product-card-lahoda__video[data-video-ready="true"] {
    opacity: 1;
}

/* video-reveal.js inserts the toggle right after the <video>; lift it above
   the stretched link so it plays instead of navigating. */
.product-card-lahoda__media .video-toggle {
    z-index: 2;
}

/* No product photo yet — a first-class state, not a broken box: the card's
   own --bg-cream-deep surface with a soft gold-tint glow, the name's initial
   in Madimi One and a small caption. */
.product-card-lahoda__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: radial-gradient(
        circle at 50% 42%,
        var(--brand-gold-tint) 0%,
        var(--bg-cream-deep) 70%
    );
    border-bottom: 1px solid var(--border);
}

.product-card-lahoda__initial {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--brand-gold);
}

.product-card-lahoda__fallback-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

/* ---- Name + weight chip ---- */

.product-card-lahoda__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) 0;
    /* Warm glow cast upward into the media area — the "shelf" the cut-out
       stands on. Negative spread keeps it off the card's sides. */
    box-shadow: var(--product-card-glow) 0 -30px 40px -12px;
}

.product-card-lahoda__name {
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* A word wider than the column breaks (hyphenated where the browser has
       a Slovak dictionary — the page is lang="sk-SK") instead of being
       clipped by the clamp above („Bageta furmansk…“). */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Phone (2-column grid, ~150–170 px cards — audit U18): the weight chip
   stops competing with the name for the row (it wraps under it), the name
   steps down a size and may take a third line. */
@media (max-width: 767.98px) {
    .product-card-lahoda__head {
        flex-wrap: wrap;
    }

    .product-card-lahoda__name {
        flex: 1 1 100%;
        font-size: 1rem;
        -webkit-line-clamp: 3;
    }

    .product-card-lahoda__weight {
        margin-top: 0;
    }
}

.product-card-lahoda__weight {
    flex-shrink: 0;
    margin-top: 2px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--bg-cream);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    white-space: nowrap;
}

/* ---- Body ---- */

.product-card-lahoda__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-4);
}

/* Price — inner markup is catalog-price.phtml / catalog-price.js (prefix
   "product-card-lahoda"), unchanged; laid out here as one compact line:
   gross (red, deliberate — see the instance README 2026-10-01) / unit
   "s DPH" · ex-VAT, the rest muted. Wraps the ex-VAT part onto a second line
   only when the card is too narrow. */
.product-card-lahoda__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.product-card-lahoda__price-main {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-1);
}

.product-card-lahoda__price-gross {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--brand-red);
}

/* "od" before the lowest price of a product with a choice still to make
   (cardDto needsConfiguration) — quiet, the figure stays the accent. */
.product-card-lahoda__price-from {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.product-card-lahoda__price-unit,
.product-card-lahoda__price-vat-note {
    font-weight: 400;
}

.product-card-lahoda__price-exvat {
    font-variant-numeric: tabular-nums;
}

.product-card-lahoda__price-exvat::before {
    content: "·";
    margin-right: var(--space-2);
}

/* Allergen numbers — small round badges, full Annex II wording in `title`.
   Lifted above the stretched link so the tooltip shows on hover. */
.product-card-lahoda__allergens {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.product-card-lahoda__allergens-label {
    margin-right: 2px;
}

.product-card-lahoda__allergen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: var(--brand-gold-tint);
    color: var(--ink);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: help;
}

.product-card-lahoda__description {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Generic schema fields (display.showExtraFields) — below the description. */
.product-card-lahoda__fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink);
}

.product-card-lahoda__field {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-1);
}

.product-card-lahoda__field dt {
    font-weight: 600;
    color: var(--ink-muted);
}

.product-card-lahoda__field dt::after {
    content: ":";
}

.product-card-lahoda__field dd {
    margin: 0;
}

/* ---- Actions row (quick-add, or a caller's own controls) ---- */

/* Pinned to the card's bottom (.body grows) so rows line up across a grid
   row; above the stretched link so its controls stay interactive. */
.product-card-lahoda__actions {
    position: relative;
    z-index: 2;
    padding: 0 var(--space-4) var(--space-4);
}

.product-card-lahoda__quick-add {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
}

.product-card-lahoda__quick-add-qty-group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-cream);
    padding: 0 2px;
}

.product-card-lahoda__quick-add-qty-step {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink);
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
}

.product-card-lahoda__quick-add-qty-step:hover {
    background: var(--brand-gold-tint);
}

/* Touch / phone: 40 px tap targets for −/+ (audit U18). The desktop look
   (28 px buttons in a 40 px pill) is untouched. */
@media (max-width: 767.98px), (pointer: coarse) {
    .product-card-lahoda__quick-add-qty-group {
        height: 44px;
    }

    .product-card-lahoda__quick-add-qty-step {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
}

/* Phone: the stepper takes the full row (−/+ at its ends, the number
   between) and „Pridať do košíka“ sits on its own line under it — two
   stacked full-width rows instead of a cramped single line. */
@media (max-width: 767.98px) {
    .product-card-lahoda__quick-add-qty-group {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .product-card-lahoda__quick-add-qty {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .product-card-lahoda__quick-add-button {
        flex-basis: 100%;
    }
}

.product-card-lahoda__quick-add-qty {
    width: 32px;
    border: none;
    background: none;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.product-card-lahoda__quick-add-qty::-webkit-inner-spin-button,
.product-card-lahoda__quick-add-qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Grows into the rest of the row; when the card is too narrow (e.g. a fixed
   5-column grid) it wraps under the stepper at full width. */
.product-card-lahoda__quick-add-button {
    flex: 1 1 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bg-cream);
    background: var(--brand-red);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        opacity var(--transition-fast);
}

.product-card-lahoda__quick-add-button:hover:not(:disabled) {
    background: var(--brand-red-dark);
}

/* "Navrhnúť a objednať" link of a "Cena dohodou" card — the quick-add
   button's look, full row width, no stepper. */
.product-card-lahoda__configure {
    display: flex;
    width: 100%;
    text-decoration: none;
}

.product-card-lahoda__quick-add-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.product-card-lahoda__quick-add-status {
    flex-basis: 100%;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.product-card-lahoda__quick-add-status:empty {
    display: none;
}

.product-card-lahoda__quick-add-status.is-error {
    color: var(--danger);
}

/* Quantity-limit hint („Minimálne množstvo na objednanie je 10 ks.“ —
   product-quick-add.js via quantity-limits.js) in the same status line. */
.product-card-lahoda__quick-add-status.is-hint {
    font-weight: 500;
    color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .product-card-lahoda,
    .product-card-lahoda__img {
        transition: none;
    }

    .product-card-lahoda:has(a.product-card-lahoda__link:hover),
    .product-card-lahoda:has(a.product-card-lahoda__link:focus-visible),
    .product-card-lahoda:has(a.product-card-lahoda__link:hover)
        .product-card-lahoda__img {
        transform: none;
    }
}