/* =============================================================
   KFC33 — PRODUCTS PAGE
   Page-specific styling for the per-city product listing.
   Loaded together with (and after) core.css. The reusable
   product-card/commerce component lives in core.css; this file
   only holds what is unique to this page.
   ============================================================= */

/* Give the catalog more room than the default narrow content column. */
.content {
    max-width: min(100%, 1000px);
    /* Anchor the inline (absolutely-positioned) Back button. */
    position: relative;
}

/* Back button sits on the SAME line as the centered page title (left side),
   instead of taking its own row above it. */
.back-bar {
    position: absolute;
    /* match .content padding-top so the button aligns with the title's line */
    top: clamp(0.5rem, 2vw, 1rem);
    left: 0;
    margin: 0;
    z-index: 3;
}

/* Title block — the "select product" prompt is now the page title, so it
   simply needs breathing room above the step switch / catalog. */
.content > .general-ttl {
    margin-bottom: clamp(1.15rem, 3.5vw, 1.7rem);
    /* Reserve room so the centered title clears the inline back button. */
    padding-inline: 3.2rem;
}

/* -------------------------------------------------------------
   Step switch — a JS-driven "switch to area view" toggle that does
   nothing in this static build. Hidden cleanly so it doesn't render
   as a stray, non-functional pill control.
   ------------------------------------------------------------- */
.simple-switch {
    display: none;
}

/* -------------------------------------------------------------
   Product card grid
   The catalog uses the original WordPress product markup
   (.product-list > li > .product > .product-wrap > .img-wrap),
   which the shared .select-list component in core.css does not
   cover — so the card shell, thumbnail and price block are
   styled here.
   ------------------------------------------------------------- */
.product-list {
    /* Flex (not grid) so an incomplete final row stays CENTERED. Card width is
       set on the <li> below (1-up on phones / 3-up from 560px). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    width: 100%;
    margin: 0 auto;
}

/* Each <li> is just the grid cell; the .product div is the card.
   The card is split into two zones: a photo thumbnail on top and a solid
   info panel below it that carries the name, quantity and price. Text no
   longer overlays the image, so it stays fully legible on the panel. */
.product-list li {
    display: flex;
    /* 1-up on phones: products stack one per row so they read well on narrow
       screens. Fixed width (no grow/shrink) keeps cards uniform so the centered
       last row matches. Tablet/desktop multi-up is restored at 560px below. */
    flex: 0 0 100%;
}

/* Medium cards: 3 per row from tablet up. Declared AFTER the base rule so it
   correctly overrides the 2-up flex-basis (this was the bug — cards stayed
   2-up/oversized). No 4-up: 3 is the sweet spot. */
@media (min-width: 560px) {
    .product-list li {
        flex-basis: calc((100% - 2 * var(--gap)) / 3);
    }
}

.product-list .product {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--c-bg-elev);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
}

.product-list li:hover .product,
.product-list li:focus-within .product {
    transform: translateY(-3px);
    border-color: var(--c-line-strong);
    box-shadow: var(--shadow);
}

/* Anchor wraps the photo + title and stretches to fill the card so the
   whole tile is the link (like the score tiles). It is a column so the
   image sits above the title inside the info panel. */
.product-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--c-ink);
}

/* Thumbnail — square photo at the top of the card. Each card carries its
   REAL product photo as an inline background (template-score.php emits it per
   product); because it is inline it wins the cascade over the rule below
   without needing !important. The bundled product-photo.jpg here is only a
   FALLBACK: it shows for a card that has no inline photo, and
   products-gallery.js swaps it in (and removes the zoom button) if a card's
   real photo fails to load. The previous build forced product-photo.jpg with
   !important, which painted that "photo coming soon" graphic over every real
   photo — and the lightbox then opened it full-screen. A hairline separates
   the thumbnail from the panel. */
.product .img-wrap,
.product-wrap .img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-bottom: 1px solid var(--c-line);
    background-color: var(--c-bg-elev);
    background-image: url("../images/product-photo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Product name — first line of the info panel, on the solid card surface.
   Reserve two lines of height so prices line up across cards in a row. Uses
   the clean body sans (not the pixel display face) so name, quantity and price
   all share one type system and read as a cohesive, premium block. */
.product-ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.7rem 0.85rem 0;
    min-height: calc(0.7rem + 2.5em);
    max-height: calc(0.7rem + 2.5em);
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 2.5vw, 1.15rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--c-ink);
    overflow: hidden;
}

/* Price / quantity block — sits at the foot of the info panel. margin-top
   auto pins it to the bottom so cards with shorter names still align. */
.product > .price {
    margin-top: auto;
}

/* Onion-exclusive / no-price cards (e.g. Party Menu) have no real qty/price
   row, so the title would float at the top of the info panel. Give it flex:1
   so it fills the panel and the existing align-items:center centres the text
   vertically. Unset the fixed min/max-height that exists for multi-row
   alignment on normal cards (not needed here). */
.product.onion-exclusive .product-ttl {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* Onion-exclusive cards: no zoom button and no availability badge. */
.product.onion-exclusive .pg-view-btn,
.product.onion-exclusive .pdavailable {
    display: none;
}

.price.single-qty {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.6rem;
    padding: 0.5rem 0.85rem 0.85rem;
}

/* Quantity now reads as a compact chip (e.g. "10g") anchored to the left of
   the foot bar, sharing the row with the price on the right. Same body sans as
   the rest of the card; sits as the muted "secondary" tier of the hierarchy. */
.price-select .qty-value {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.5rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--c-ink-soft);
}

/* Price cluster on the right of the foot row: the "Τιμή:" label and struck old
   price are the quiet secondary tier; the new price is the emphasized lead. */
.price .amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--c-ink-muted);
}

.price .regular-price {
    font-size: 0.75rem;
    color: var(--c-ink-faint);
    text-decoration: line-through;
}

.price .amount > span {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--c-ink);
}

/* "On sale" badge — icon-only circular chip pinned to the photo's top-left
   corner. The localized word ("Σε Προσφορά") is hidden CSS-only (font-size:0 +
   transparent) so only the "%" glyph shows; the chip matches the dark glass
   view-image button for a tidy, intentional look on any part of the photo. */
.product-on-sale-tag {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: var(--radius-pill);
    /* Sits on the product photo, so use the always-dark glass tokens (white
       glyph on dark plate) — legible over imagery in either theme. */
    background: var(--c-overlay-surface-strong);
    border: 1px solid var(--c-overlay-line);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: var(--shadow-soft);
    /* Collapse the text label to nothing — only the ::before glyph remains. */
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    color: transparent;
    overflow: hidden;
}

/* Discount mark — the visible "%" sits centered in the chip as a clean white
   glyph, keeping the badge monochrome/on-theme. Resets the parent's font-size:0. */
.product-on-sale-tag::before {
    content: "%";
    display: block;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--c-overlay-ink);
}

/* "Available" pill on the party-menu tile — pinned inside the photo at the
   bottom-left so it never collides with the top-right view-image button. */
.pdavailable {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
}

/* -------------------------------------------------------------
   View-image button + full-resolution lightbox
   Button is injected into every card by js/products-gallery.js;
   the overlay is a single reusable element appended to <body>.
   ------------------------------------------------------------- */
.pg-view-btn {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.75rem = 44px — meets iOS/Android minimum touch-target size.
       Was 2rem (32px) which was too small to tap reliably on phones. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--c-overlay-line);
    border-radius: var(--radius-pill);
    background: var(--c-overlay-surface-strong);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: var(--c-overlay-ink);
    cursor: pointer;
    opacity: 0.85;
    /* Eliminates 300ms tap delay and prevents double-tap zoom on this button. */
    touch-action: manipulation;
    transition: background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        opacity var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.pg-view-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.pg-view-btn:hover,
.pg-view-btn:focus-visible {
    opacity: 1;
    border-color: #fff;
    background: #000;
    transform: scale(1.06);
}

.pg-view-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Lightbox overlay */
.pg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(0, 0, 0, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: auto;
    overscroll-behavior: contain;
}

.pg-lightbox[hidden] {
    display: none;
}

.pg-lightbox__img {
    display: block;
    margin: auto;
    /* Standardized display box: every zoomed image fills the SAME responsive
       footprint regardless of its intrinsic resolution, so low-res and high-res
       photos read at one consistent size on a given device. width/height define
       the box; object-fit:contain scales each photo up or down to fit, preserving
       aspect ratio (letterboxed against the box background). Previously the image
       sized to its INTRINSIC pixels under max-width/height caps, so small source
       photos stayed small and large ones hit the cap (the "one smaller, one
       larger" effect, plus a smaller box on mobile than on desktop). */
    /* vh fallback first for browsers without dvh (pre-Safari 15.4); dvh tracks
       the current visible viewport on mobile so the box never exceeds the screen
       while the browser toolbar is showing. */
    width: min(92vw, 880px);
    height: min(80vh, 660px);
    height: min(80dvh, 660px);
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    background: var(--c-bg-elev);
}

.pg-lightbox__close {
    position: fixed;
    /* Keep the close FULLY below the top browser chrome / notch and tappable.
       This site's <meta viewport> is NOT viewport-fit=cover, so env(safe-area-
       inset-*) resolves to 0 on every device — the offset must therefore stand
       on a real comfortable floor, not on the safe-area inset. env() is kept
       (additively) so it still helps if cover is ever enabled. The touch-device
       bump below pushes it clear of the mobile address bar, which can overlap a
       fixed element pinned near the top of the layout viewport. */
    top: max(env(safe-area-inset-top, 0px) + 0.75rem, 1.5rem);
    right: max(env(safe-area-inset-right, 0px) + 0.75rem, 1.5rem);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.75rem = 44px — meets iOS/Android minimum touch-target size.
       Was 2.6rem (≈41.6px) which was just under the threshold. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    /* Pinned dark glass — the lightbox is a dark fullscreen overlay in both themes. */
    border: 1px solid var(--c-overlay-line);
    border-radius: var(--radius-pill);
    background: var(--c-overlay-surface-strong);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--c-overlay-ink);
    font-family: var(--font-body);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    /* Eliminates 300ms tap delay and prevents double-tap zoom on this button. */
    touch-action: manipulation;
    transition: background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.pg-lightbox__close:hover,
.pg-lightbox__close:focus-visible {
    background: #000;
    border-color: #fff;
    transform: scale(1.06);
}

.pg-lightbox__close:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Touch devices (phones/tablets): the browser's top toolbar / address bar can
   overlap a fixed element pinned near the top of the layout viewport, so drop
   the close further down to keep it comfortably below the chrome and reachable
   even on short (~390px tall) mobile viewports. Targets pointer:coarse rather
   than a width breakpoint so it also applies to phones in landscape. */
@media (pointer: coarse) {
    .pg-lightbox__close {
        top: max(env(safe-area-inset-top, 0px) + 0.75rem, 3.5rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pg-lightbox {
        animation: pg-fade 0.22s var(--ease) both;
    }

    .pg-lightbox__img {
        animation: pg-zoom 0.26s var(--ease) both;
    }
}

@keyframes pg-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pg-zoom {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------
   Entrance — gentle staggered rise for the catalog
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .content > .general-ttl,
    .content > .simple-switch,
    .product-list li {
        animation: products-rise 0.5s var(--ease) both;
    }

    .content > .simple-switch {
        animation-delay: 0.08s;
    }

    .product-list li {
        animation-delay: 0.12s;
    }

    .product-list li:nth-child(2) {
        animation-delay: 0.16s;
    }

    .product-list li:nth-child(3) {
        animation-delay: 0.2s;
    }

    .product-list li:nth-child(4) {
        animation-delay: 0.24s;
    }

    .product-list li:nth-child(5) {
        animation-delay: 0.28s;
    }

    .product-list li:nth-child(6) {
        animation-delay: 0.32s;
    }

    .product-list li:nth-child(n + 7) {
        animation-delay: 0.36s;
    }
}

@keyframes products-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}