/* ============================================
   TPLESHOP - Phoca Cart Complete Styling
   CSS overrides for all Phoca Cart views
   Keeps all ph-/phj- classes functional
   ============================================ */

/* ----- 0. Phoca Cart branding ----- */

/* Hide "Powered by Phoca Cart" branding */
div[style*="text-align:right"] > a[href*="phoca.cz"],
div[style*="text-align:right"] > a[href*="phocacart"],
div[style*="color:#ccc"] > a[href*="phoca.cz"],
a[href*="phoca.cz/phocacart"] > img[alt="Phoca Cart"],
a[href*="phoca.cz/phocacart"] > img[alt="Phoca POS"] {
    display: none !important;
}

div[style*="text-align:right"][style*="display:block"],
div[style*="text-align:right"][style*="color:#ccc"] {
    display: none !important;
}

/* ----- 1. Category View - Product Grid ----- */

/* Main container */
#ph-pc-category-box {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* Clear floats (Phoca Cart uses clearfix divs inside rows) */
.ph-cb {
    display: none;
}

/* NOTE: the legacy `#phItems .row { display: grid }` override that used to
 * live here was removed in v1.6.28. Product grid layout is now exclusively
 * driven by the modern `.ph-row-flex.grid` rules below (with --es-product-
 * cols-* variables), and the bottom `.ph-pagination` toolbar uses its own
 * rules. Both were colliding under the old `#phItems .row` selector. */

/* ----- Category product grid -----
 * We replace Phoca Cart's flex-based `.ph-row-flex.grid` layout with a
 * CSS grid driven by template parameters. This gives us:
 *   - No negative row margins → no horizontal overflow on narrow viewports
 *   - Four real breakpoints (xs/sm/md/lg) instead of Phoca Cart's xs/sm/md
 *   - Equal-height, gap-spaced cards with zero Bootstrap gutter math
 *
 * IMPORTANT: We intentionally use the same selector specificity as
 * Phoca Cart main.css (`.ph-row-flex.grid`) and add `!important` on the
 * layout-defining declarations. That way our rules win regardless of how
 * the browser resolves cascade ties when specificities match.
 *
 * The column counts come from index.php, derived from the two template
 * params (productColumns, productColumnsMobile). Fallbacks protect against
 * a bare install where the CSS vars aren't set yet. */
.ph-row-flex.grid {
    display: grid !important;
    grid-template-columns: repeat(var(--es-product-cols-xs, 1), minmax(0, 1fr)) !important;
    gap: var(--space-sm);
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* Slightly more breathing room between rows than between columns on wider
 * viewports — columns are tight by design, but vertical rhythm benefits
 * from a touch more space. */
@media (min-width: 768px) {
    .ph-row-flex.grid {
        gap: var(--space-md) var(--space-sm);
    }
}

@media (min-width: 576px) {
    .ph-row-flex.grid {
        grid-template-columns: repeat(var(--es-product-cols-sm, 2), minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .ph-row-flex.grid {
        grid-template-columns: repeat(var(--es-product-cols-md, 3), minmax(0, 1fr)) !important;
    }
}

@media (min-width: 992px) {
    .ph-row-flex.grid {
        grid-template-columns: repeat(var(--es-product-cols-lg, 3), minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1200px) {
    .ph-row-flex.grid {
        grid-template-columns: repeat(var(--es-product-cols-xl, 4), minmax(0, 1fr)) !important;
    }
}

/* Neutralize Bootstrap col-* classes baked into .es-row-item — CSS grid
 * now controls the track sizing, so the Bootstrap width/flex values from
 * items_grid.php's $colClass must not fight it. */
.ph-items .es-row-item,
.ph-row-flex.grid .row-item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    display: flex;
}

.es-row-item > .es-product-card,
.ph-row-flex.grid .row-item > .es-product-card {
    width: 100%;
}

/* ----- List + Gridlist layouts -----
 * Joomla 6 does not ship Bootstrap frontend CSS, so `.row`, `.col-md-*`,
 * `.row-item` classes in Phoca Cart HTML are empty hooks with no width/
 * flex rules. Without explicit overrides the inner `ph-item-content-row`
 * falls back to default block layout and cards look ragged/half-width.
 *
 * We rebuild both layouts from scratch using flex, giving each product
 * its own full-width card with image left, info center, price/button
 * right (responsive stack on mobile). */

/* Outer container — full width, block (not grid) so cards stack vertically */
.ph-items.list,
.ph-items.gridlist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ph-items.list .ph-row-flex,
.ph-items.gridlist .ph-row-flex,
.ph-row-flex.list,
.ph-row-flex.gridlist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Each product = one row-item = one full-width card */
.ph-items.list .row-item,
.ph-items.gridlist .row-item,
.ph-row-flex.list > .row-item,
.ph-row-flex.gridlist > .row-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-md) 0 !important;
    min-width: 0;
}

/* Card visual styling for .ph-item-box in list/gridlist (grid view has its
 * own .es-product-card; here we style Phoca Cart's native box instead) */
.ph-items.list .ph-item-box,
.ph-items.gridlist .ph-item-box {
    display: block;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: var(--space-md);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    overflow: hidden;
}

.ph-items.list .ph-item-box:hover,
.ph-items.gridlist .ph-item-box:hover {
    box-shadow: var(--card-shadow-hover);
}

/* Kill Phoca Cart legacy .thumbnail / .ph-thumbnail wrappers inside card */
.ph-items.list .ph-item-box .thumbnail,
.ph-items.list .ph-item-box .ph-thumbnail,
.ph-items.gridlist .ph-item-box .thumbnail,
.ph-items.gridlist .ph-item-box .ph-thumbnail {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.ph-items.list .ph-item-content,
.ph-items.gridlist .ph-item-content {
    display: block;
    width: 100%;
}

/* Inner row — flex with layout-specific child widths. Phoca Cart emits
 * DIFFERENT structures for list vs gridlist:
 *   list     → 5 children: image / info / price / .ph-cb / cart button block
 *   gridlist → 2 children: image / (title+price+desc+manuf+cart)
 * We target them separately below. */
.ph-items.list .ph-item-content-row,
.ph-items.gridlist .ph-item-content-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ----- LIST layout (5 children) ----- */

.ph-items.list .ph-item-content-row > *:nth-child(1) {
    /* Image column */
    flex: 0 0 auto !important;
    width: clamp(110px, 14%, 170px) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.ph-items.list .ph-item-content-row > *:nth-child(2) {
    /* Info column — title, description, manufacturer */
    flex: 1 1 0 !important;
    min-width: 200px;
    padding: 0 !important;
    margin: 0 !important;
}

.ph-items.list .ph-item-content-row > *:nth-child(3) {
    /* Price column (price only — cart button is a separate child 5) */
    flex: 0 0 auto !important;
    width: clamp(140px, 16%, 200px) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.ph-items.list .ph-item-content-row > *:nth-child(4) {
    /* .ph-cb clearfix — hide, it just creates a phantom flex item */
    display: none !important;
}

.ph-items.list .ph-item-content-row > *:nth-child(5) {
    /* Cart button block — force a wrap to the next row and right-align.
     * Result: [image] [info] [price]
     *                               [       Do košíka       ] */
    flex: 1 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: flex-end;
}

.ph-items.list .ph-item-content-row > *:nth-child(5) .ph-category-action-buttons {
    width: clamp(180px, 22%, 260px);
}

/* ----- GRIDLIST layout (2 children) ----- */

.ph-items.gridlist .ph-item-content-row > *:nth-child(1) {
    /* Image column — larger (roughly 1/3 of the card) */
    flex: 0 0 auto !important;
    width: clamp(160px, 30%, 320px) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.ph-items.gridlist .ph-item-content-row > *:nth-child(2) {
    /* Content column — everything else (title, price, desc, cart) */
    flex: 1 1 0 !important;
    min-width: 220px;
    padding: 0 !important;
    margin: 0 !important;
}

.ph-items.gridlist .ph-item-content-row > *:nth-child(2) .ph-category-price-box {
    text-align: left;
}

.ph-items.gridlist .ph-item-content-row > *:nth-child(2) .ph-category-action-buttons {
    margin-top: var(--space-sm);
    max-width: 260px;
}

/* ----- Shared image wrapper fix -----
 * The Phoca Cart image is wrapped in <a><div.phIBoxOH><div.phIBox><img>
 * and <a> is an inline element by default, which collapses its children
 * to zero width. We force it to block so the aspect-ratio wrapper inside
 * gets a meaningful container width. */
.ph-items.list .ph-item-content-row > *:nth-child(1) > a,
.ph-items.gridlist .ph-item-content-row > *:nth-child(1) > a {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
}

.ph-items.list .phIBoxOH,
.ph-items.gridlist .phIBoxOH {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--card-radius);
    /* To isté ako pri mriežkovej karte — nech rám splynie s podkladom karty
       a okolo fotky nezostal sivý pás. */
    background: var(--es-media-plate);
}

.ph-items.list .phIBoxOH .phIBox,
.ph-items.gridlist .phIBoxOH .phIBox {
    display: block;
    width: 100%;
    height: 100%;
}

.ph-items.list .phIBox img,
.ph-items.list .ph-image,
.ph-items.gridlist .phIBox img,
.ph-items.gridlist .ph-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Price box — text-align right in list, left in gridlist (handled above) */
.ph-items.list .ph-category-price-box {
    text-align: right;
    margin: 0;
    padding: 0;
}

/* Add-to-cart button: full width within its container */
.ph-items.list .ph-button-add-to-cart-box,
.ph-items.gridlist .ph-button-add-to-cart-box {
    width: 100%;
    padding: 0 !important;
}

.ph-items.list .ph-btn,
.ph-items.list .phCartButton,
.ph-items.gridlist .ph-btn,
.ph-items.gridlist .phCartButton {
    width: 100%;
}

/* Product title in list — bigger than grid, since there's more room */
.ph-items.list .ph-product-header,
.ph-items.gridlist .ph-product-header {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-xs) 0;
}

.ph-items.list .ph-product-header a,
.ph-items.gridlist .ph-product-header a {
    color: var(--color-heading);
    text-decoration: none;
}

.ph-items.list .ph-product-header a:hover,
.ph-items.gridlist .ph-product-header a:hover {
    color: var(--color-primary);
}

.ph-items.list .ph-item-desc,
.ph-items.gridlist .ph-item-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ph-items.list .ph-manufacturer-box,
.ph-items.gridlist .ph-manufacturer-box {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Stack on narrow viewports — single column, image full width on top.
 * This simplified mobile layout uses the same structure JS-forces inline
 * via ListLayoutForce.applyMobileStack(), so CSS + JS are redundant. */
@media (max-width: 767.98px) {
    .ph-items.list .ph-item-content-row,
    .ph-items.gridlist .ph-item-content-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: var(--space-sm) !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .ph-items.list .ph-item-content-row > *,
    .ph-items.gridlist .ph-item-content-row > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        position: static !important;
        float: none !important;
        align-self: stretch !important;
    }

    /* Image wrapper: full card width, capped height so tall posters
     * don't push the card below the fold */
    .ph-items.list .phIBoxOH,
    .ph-items.gridlist .phIBoxOH {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: auto !important;
        max-height: 240px !important;
        overflow: hidden !important;
    }

    .ph-items.list .phIBox,
    .ph-items.gridlist .phIBox {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .ph-items.list .phIBox img,
    .ph-items.list .ph-image,
    .ph-items.gridlist .phIBox img,
    .ph-items.gridlist .ph-image {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 240px !important;
        object-fit: contain !important;
    }

    /* List layout — price/cart button wrap row lives at the bottom */
    .ph-items.list .ph-item-content-row > *:nth-child(5) {
        justify-content: stretch;
    }

    .ph-items.list .ph-item-content-row > *:nth-child(5) .ph-category-action-buttons {
        width: 100%;
    }

    .ph-items.list .ph-category-price-box {
        text-align: left;
    }
}

/* Product card (from our override) */
.es-product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.es-product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Product card image
 *
 * Pozadie je priehľadné, nie sivé: rám má pevný pomer strán, takže pri fotke
 * s iným pomerom zostane voľné miesto — a to sa predtým vykreslilo ako sivý pás
 * medzi fotkou a nadpisom. Priehľadné pozadie prevezme farbu karty, takže rám
 * splynie s telom karty aj keď téma zmení jej podklad. Témy, ktoré chcú pod
 * fotkou vlastný podklad (vinarstvo, boatdiesel), si toto pravidlo prebijú. */
.es-product-card__image {
    position: relative;
    aspect-ratio: var(--card-image-ratio);
    overflow: hidden;
    background: var(--es-media-plate);
}

.es-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Phoca balí obrázok do <a><div.phIBoxOH><div.phIBox><img>. V mriežkovom
 * rozložení tie dva obaly nemali výšku, takže `height: 100%` na <img> spadlo
 * na `auto` a fotka sa lepila na horný okraj rámu — celá medzera potom ostala
 * dole, tesne nad nadpisom. */
.es-product-card__image .phIBoxOH,
.es-product-card__image .phIBox {
    display: block;
    width: 100%;
    height: 100%;
}

.es-product-card__image img,
.es-product-card .ph-image-full {
    width: 100%;
    height: 100%;
    /* `contain` = celý produkt je vidieť a fotka sa vycentruje. `cover` by
     * orezal — pri produktovej fotke na bielom podklade nežiaduce. */
    object-fit: contain;
    object-position: center;
    transition: transform var(--transition-slow);
}

.es-product-card:hover .es-product-card__image img,
.es-product-card:hover .ph-image-full {
    transform: scale(1.03);
}

/* Labels on image */
.es-product-card__labels {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.ph-label-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.ph-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.6em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    line-height: 1.2;
}

.ph-label-new {
    background: var(--color-success);
    color: var(--color-white);
}

.ph-label-hot {
    background: var(--color-danger);
    color: var(--color-white);
}

.ph-label-feat {
    background: var(--color-accent);
    color: var(--color-white);
}

.ph-label-discount,
.ph-label-sale {
    background: var(--color-danger);
    color: var(--color-white);
}

/* Overlay action icons */
.es-product-card__icons {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: 2;
}

.es-product-card:hover .es-product-card__icons {
    opacity: 1;
    transform: translateY(0);
}

.es-product-card__icons a,
.es-product-card__icons button,
.ph-category-action-icons a,
.ph-category-action-icons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-surface);
    color: var(--color-heading);
    border-radius: var(--radius-full);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

/* SVG ikona (pc-si) v kruhovom tlačidle nemá vlastný rozmer – vo flexe sa zmrští na 0 px (Robert 22. 9. 2026: „ikona porovnať a obľúbené sa nevykresľuje") */
.es-product-card__icons svg.pc-si,
.ph-category-action-icons svg.pc-si,
.es-product-card__icons a svg,
.es-product-card__icons button svg {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}
/* v kruhovom tlačidle len ikona – text („Porovnať", „Pridať do obľúbených") ostáva pre čítačky, vizuálne skrytý */
.es-product-card__icons a > :not(svg),
.es-product-card__icons button > :not(svg),
.ph-category-action-icons a > :not(svg),
.ph-category-action-icons button > :not(svg) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.es-product-card__icons a,
.es-product-card__icons button,
.ph-category-action-icons a,
.ph-category-action-icons button { position: relative; font-size: 0; line-height: 0; }
.es-product-card__icons a:hover,
.es-product-card__icons button:hover,
.ph-category-action-icons a:hover,
.ph-category-action-icons button:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Product card body */
.es-product-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Product header/title */
.es-product-card__header,
.ph-item-header {
    margin-bottom: var(--space-xs);
}

.es-product-card__header h3,
.ph-item-header h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.es-product-card__header a,
.ph-item-header a {
    color: var(--color-heading);
    text-decoration: none;
}

.es-product-card__header a:hover,
.ph-item-header a:hover {
    color: var(--color-primary);
}

/* Star rating */
.es-product-card__rating {
    margin-bottom: var(--space-xs);
}

/* Hviezdy hodnotenia (Phoca .ph-stars = 5 × 16 px, výplň = šírka vnútorného span): SVG hviezda ako CSS maska,
   farby cez tokeny --color-star (aktívna) a --color-star-empty (prázdna) – téma si ich prefarbí bez obrázkov (Robert 22. 9. 2026). */
.ph-stars,
span.ph-stars {
    display: inline-block;
    width: 80px;
    height: 16px;
    position: relative;
    background: var(--color-star-empty, var(--color-gray-200, #d5d8de)) !important;   /* !important: Phoca main.css dáva v moduloch (.phProductScrollerModuleBox …) obrázok hviezd s vyššou špecificitou */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6c.4 0 .8.2 1 .6l2.4 4.9 5.4.8c.9.1 1.2 1.2.6 1.8l-3.9 3.8.9 5.4c.2.9-.8 1.5-1.6 1.1L12 18.4l-4.8 2.5c-.8.4-1.7-.2-1.6-1.1l.9-5.4-3.9-3.8c-.6-.6-.3-1.7.6-1.8l5.4-.8L11 3.2c.2-.4.6-.6 1-.6z'/></svg>") 0 0 / 16px 16px repeat-x;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6c.4 0 .8.2 1 .6l2.4 4.9 5.4.8c.9.1 1.2 1.2.6 1.8l-3.9 3.8.9 5.4c.2.9-.8 1.5-1.6 1.1L12 18.4l-4.8 2.5c-.8.4-1.7-.2-1.6-1.1l.9-5.4-3.9-3.8c-.6-.6-.3-1.7.6-1.8l5.4-.8L11 3.2c.2-.4.6-.6 1-.6z'/></svg>") 0 0 / 16px 16px repeat-x;
}

.ph-stars span,
span.ph-stars span {
    display: block;
    height: 100%;
    background: var(--color-star, #F59E0B) !important;
    -webkit-mask: none;
    mask: none;
}

[data-theme="dark"] .ph-stars {
    background: var(--color-star-empty, #4a5058) !important;
}

/* Description in card */
.es-product-card__desc,
.ph-item-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags & manufacturer in card */
.es-product-card__tags,
.es-product-card__manufacturer {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

/* Price + actions area */
.es-product-card__actions {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* ----- 2. Price Display -----
 * Phoca Cart renders each price row as its own <div>. Classes used:
 *   .ph-price-netto / .ph-price-netto-txt   - price excl. tax + label
 *   .ph-tax         / .ph-tax-txt           - tax amount + label
 *   .ph-price-brutto / .ph-price-brutto-txt - price incl. tax + label
 *   .ph-price-original                      - struck-through original price
 *   .ph-price-discount                      - modifier for discount row
 *   .ph-line-through                        - added to original row when a discount exists
 * Which rows appear is decided by Phoca Cart Options → Price Display (B2B/B2C).
 */

.ph-category-price-box,
.ph-item-price-box {
    margin-bottom: var(--space-md);
}

.ph-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
}

/* Hero price: brutto (incl. tax) OR netto (excl. tax) — whichever admin enabled */
.ph-price,
.ph-price-brutto,
.ph-price-netto {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Tax amount is always a supporting detail */
.ph-tax {
    display: inline-block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Labels (netto/tax/brutto txt) — small uppercase above or inline with their price */
.ph-price-txt,
.ph-price-netto-txt,
.ph-tax-txt,
.ph-price-brutto-txt {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-right: 0.35em;
}

/* Struck-through original price (when a discount is active) */
.ph-price-original,
.ph-price-orig,
.ph-price-old,
.ph-price-brutto.ph-line-through,
.ph-price-netto.ph-line-through,
.ph-tax.ph-line-through {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    text-decoration: line-through;
    letter-spacing: 0;
}

/* When the row itself is the struck-through original, its label should match */
.ph-line-through-txt {
    color: var(--color-text-muted);
}

/* Discount row keeps hero styling but in danger colour to signal sale */
.ph-price-discount.ph-price-brutto,
.ph-price-discount.ph-price-netto,
.ph-price-brutto.ph-price-discount-product,
.ph-price-brutto.ph-price-discount-cart {
    color: var(--color-danger);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
}

/* Unit price (base) — small muted detail */
.ph-price-base {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Item (detail) view price — larger hero */
.ph-item-price-box .ph-price,
.ph-item-price-box .ph-price-brutto,
.ph-item-price-box .ph-price-netto {
    font-size: 2rem;
}

.ph-item-price-box .ph-price-discount.ph-price-brutto,
.ph-item-price-box .ph-price-discount.ph-price-netto {
    font-size: 2rem;
}

/* ----- 3. Add to Cart Buttons ----- */

.ph-category-action-buttons {
    margin-top: var(--space-sm);
}

/* Standard add to cart button */
.ph-btn,
.ph-btn-add-to-cart,
.phCartButton,
.btn.ph-btn,
button.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.ph-btn:hover,
.ph-btn-add-to-cart:hover,
.phCartButton:hover,
.btn.ph-btn:hover,
button.ph-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.ph-btn:active,
.ph-btn-add-to-cart:active,
.phCartButton:active,
.btn.ph-btn:active,
button.ph-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Icon inside the cart button (Phoca Cart renders <i>/<span>/svg before the label) */
.ph-btn > i,
.ph-btn > span:first-child:not(.ph-btn-label),
.ph-btn > svg {
    flex-shrink: 0;
    font-size: 1.05em;
    line-height: 1;
}

/* Reset Phoca Cart's legacy float wrappers inside the card and stack the
 * form contents vertically with consistent gaps. Phoca Cart wraps the
 * add-to-cart button in .ph-pull-right (float:right) and the view-product
 * button in .ph-pull-left (float:left) — on a narrow grid tile these floats
 * combined with our larger button padding + nowrap overflow the card. */
.es-product-card .phItemCartBoxForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.es-product-card .es-product-card__buttons {
    display: block;
    width: 100%;
}

.es-product-card .ph-pull-left,
.es-product-card .ph-pull-right,
.es-product-card .ph-button-view-product-box,
.es-product-card .ph-button-add-to-cart-box,
.es-product-card .ph-button-choose-variant-box {
    float: none !important;
    width: 100%;
    display: block;
    text-align: left;
}

/* Hide empty view-product wrapper so its gap doesn't leave a ghost slot.
 * :has() is supported everywhere we care about (Chrome 105+, FF 121+, Safari 15.4+). */
.es-product-card .ph-button-view-product-box:not(:has(*)) {
    display: none;
}

/* Phoca Cart clearfix divs are obsolete once floats are reset */
.es-product-card .ph-cb {
    display: none;
}

/* Category card buttons — ghost/outline style (calmer, modern) */
.es-product-card .ph-btn,
.es-product-card .phCartButton {
    display: flex;
    width: 100%;
    white-space: normal;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.es-product-card .ph-btn:hover,
.es-product-card .phCartButton:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.es-product-card .ph-btn:active,
.es-product-card .phCartButton:active {
    background: var(--color-primary-hover, var(--color-primary));
    border-color: var(--color-primary-hover, var(--color-primary));
}

/* Hide Phoca Cart's native quantity wrappers inside the category product
 * card — we use our own .es-qty picker (controlled by template param
 * displayQuantityInCategory). Note: do NOT hide input[name="quantity"]
 * here because our visible picker uses the same name. */
.es-product-card .ph-quantity-box,
.es-product-card .ph-quantity-input {
    display: none;
}

/* ----- Custom quantity picker (−/+) for category tiles ----- */

.es-qty {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.es-qty__btn {
    flex: 0 0 auto;
    width: 2.5rem;
    padding: 0;
    background: transparent;
    color: var(--color-heading);
    border: 0;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    user-select: none;
}

.es-qty__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.es-qty__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.es-qty__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.es-qty__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.25rem;
    background: transparent;
    color: var(--color-heading);
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    -moz-appearance: textfield;
}

.es-qty__input:focus {
    outline: none;
    background: var(--color-gray-100, rgba(0, 0, 0, 0.02));
}

/* Remove native number-input spinners (we have our own buttons) */
.es-qty__input::-webkit-outer-spin-button,
.es-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Narrow viewports (2-col mobile at 320-575px): shrink the picker so the
 * number stays visible on cards that are only ~140-170px wide. */
@media (max-width: 575.98px) {
    .es-product-card__body {
        padding: var(--space-sm);
    }

    .es-qty__btn {
        width: 2rem;
        font-size: 1rem;
    }

    .es-qty__input {
        padding: 0.4rem 0.125rem;
        font-size: var(--font-size-xs);
    }

    /* Cart button: tighter on narrow cards so the label doesn't wrap awkwardly */
    .es-product-card .ph-btn {
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-xs);
        gap: 0.375rem;
    }
}

/* Quantity input */
.ph-quantity-input,
input[name="quantity"] {
    width: 4rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
}

.ph-quantity-input:focus,
input[name="quantity"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ----- 4. Stock Status ----- */

.ph-category-stock-box,
.ph-item-stock-box {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
}

.ph-stock-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.ph-stock-in-stock,
.ph-stock-status-in-stock {
    background: rgba(5, 150, 105, 0.1);
    color: var(--color-success);
}

.ph-stock-out-stock,
.ph-stock-status-out-of-stock {
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-danger);
}

.ph-stock-low-stock {
    background: rgba(217, 119, 6, 0.1);
    color: var(--color-warning);
}

/* ----- 5. Category Header ----- */

.es-category-header {
    margin-bottom: var(--space-lg);
}

.es-category-header__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin: 0;
}

.es-category-header__desc {
    margin-top: var(--space-md);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

.es-category-back {
    margin-bottom: var(--space-lg);
}

/* ----- 6. Subcategories ----- */

.es-subcategories {
    margin-bottom: var(--space-2xl);
}

.es-subcategories__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

.es-subcategories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--card-gap);
}

.es-subcategory-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.es-subcategory-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.es-subcategory-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.es-subcategory-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-subcategory-card__title {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    text-align: center;
    margin: 0;
}

.es-subcategories__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
}

.es-subcategories__list li {
    display: inline-flex;
}

.es-subcategories__list a {
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.es-subcategories__list a:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ----- 7. Pagination ----- */

.ph-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    list-style: none;
    padding: var(--space-lg) 0;
    margin: 0;
}

.pagination > li > a,
.pagination > li > span,
.ph-pagination a,
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pagination > li > a:hover,
.ph-pagination a:hover,
.page-link:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination > li.active > span,
.pagination > li.active > a,
.page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.pagination > li.disabled > span,
.page-item.disabled .page-link {
    color: var(--color-gray-300);
    cursor: default;
}

/* Icon span inside page-link — no box styling */
.page-link > span,
.pagination > li > a > span,
.pagination > li > span > span {
    display: inline;
    min-width: unset;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
}

/* Joomla icon-font not loaded — Unicode arrow fallbacks */
.icon-angle-double-left::before { content: '\00AB'; }
.icon-angle-left::before { content: '\2039'; }
.icon-angle-right::before { content: '\203A'; }
.icon-angle-double-right::before { content: '\00BB'; }
.icon-chevron-left::before { content: '\2039'; }
.icon-chevron-right::before { content: '\203A'; }

/* ----- Pagination / sort / layout-switcher toolbar -----
 * Phoca Cart renders two toolbar variants:
 *   Top:    .row.ph-pagination-top  with .ph-pag-top-row children
 *   Bottom: .row.ph-pagination      with .ph-center-pagination children
 *
 * Top toolbar uses flex so the 3 sections (sort / limit / switcher) can
 * flex naturally and the switcher can push to the right edge.
 *
 * Bottom toolbar uses CSS grid so its 2 sections (sort / limit) stack
 * predictably on mobile (single column) and sit side by side on desktop
 * (two columns) without flex-basis guesswork. */
.ph-pagination-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) 0;
    margin: 0 0 var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.ph-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin: var(--space-lg) 0 0;
    border-top: 1px solid var(--color-border);
}

/* Neutralize Bootstrap col classes on toolbar children (both top & bottom) */
.ph-pagination-top > .ph-pag-top-row,
.ph-pagination > .ph-center-pagination {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Push the layout switcher to the far right on wide viewports */
.ph-pagination-top > .ph-pag-top-row:last-of-type {
    margin-left: auto !important;
}

/* Phoca Cart's inline clearfix is meaningless in flex layout */
.ph-pagination-top > .ph-cb,
.ph-pagination > .ph-cb {
    display: none;
}

.ph-pagination-top select,
.ph-pagination select {
    max-width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    appearance: auto;
}

.ph-pagination-top select:focus,
.ph-pagination select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Sort dropdown is the longest — hard cap its width so "Dátum aktualizácie,
 * zoradené od najstaršieho" doesn't stretch the toolbar to the horizon */
.ph-pagination-top #itemorderingtop,
.ph-pagination-top #itemordering,
.ph-pagination #itemorderingtop,
.ph-pagination #itemordering,
.ph-ordering-box select {
    max-width: 14rem;
    text-overflow: ellipsis;
}

/* Pagination list (if Phoca Cart renders page number links) */
.ph-pagination .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Priamy potomok (`li > a`), nie ľubovoľný vnorený.
   Šípky majú tvar <span class="page-link"><span class="icon-angle-…"></span></span>,
   takže descendant selektor `li span` chytil aj tú vnútornú ikonu a nakreslil
   okolo nej druhý rámček — čísla strán problém nemali, lebo v nich vnorený
   span nie je. Reset ikony nižšie (`.page-link > span`) to neprebil: mal nižšiu
   špecificitu než toto pravidlo. */
.ph-pagination .pagination li > a,
.ph-pagination .pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* Poistka: ikona vnútri tlačidla nesmie dostať vlastný rámček ani rozmery,
   nech už ju chytí ktorékoľvek z pravidiel vyššie. */
.ph-pagination .pagination li > a > span,
.ph-pagination .pagination li > span > span {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.ph-pagination .pagination li.active > a,
.ph-pagination .pagination li.active > span,
.ph-pagination .pagination li > a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ----- Layout switcher buttons (grid / gridlist / list) -----
 * Outline style at rest, filled primary when active. Replaces Phoca Cart's
 * three solid primary buttons in a row, which dominate the toolbar. */
.ph-pagination-top .ph-pag-top-row:has(.phItemSwitchLayoutType) {
    gap: 0.25rem;
}

.phItemSwitchLayoutType,
button.phItemSwitchLayoutType,
.btn.phItemSwitchLayoutType,
.btn-primary.phItemSwitchLayoutType {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.phItemSwitchLayoutType:hover,
button.phItemSwitchLayoutType:hover {
    background: var(--color-gray-100, rgba(0, 0, 0, 0.04));
    color: var(--color-heading);
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
}

.phItemSwitchLayoutType.active,
button.phItemSwitchLayoutType.active,
.btn-primary.phItemSwitchLayoutType.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.phItemSwitchLayoutType .pc-si {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}

/* ----- 8. Product Detail (Item View) ----- */

#ph-pc-item-box {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* Override Bootstrap row to CSS Grid for product layout */
#ph-pc-item-box > .row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    float: none;
}

/* Override Bootstrap columns */
#ph-pc-item-box [class*="col-xs"],
#ph-pc-item-box [class*="col-sm"],
#ph-pc-item-box [class*="col-md"] {
    width: 100%;
    float: none;
    padding: 0;
    max-width: none;
    flex: none;
}

/* ----- Image panel (hero gallery card) ----- */
.ph-item-view-image-box {
    position: relative;
}

/* Main image wrapper — premium white card with visible shadow, padding and
 * aspect ratio. Image is contained (not cover) so product photos with
 * transparent backgrounds aren't cropped.
 * Radius uses --card-radius to stay consistent with category product cards. */
.ph-item-image-full-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 12px 28px -6px rgba(0, 0, 0, 0.14),
        0 6px 12px -4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ph-item-image-full-box:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 24px 50px -12px rgba(0, 0, 0, 0.22),
        0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

/* Label chips (bestseller, new, discount) positioned top-left on the image */
.ph-item-image-full-box .ph-label-box {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.ph-item-image-full-box .ph-label {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.75em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ph-item-image-full-box img,
.ph-item-image-full-box .ph-image-full {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform var(--transition-slow);
}

.ph-item-image-full-box:hover img,
.ph-item-image-full-box:hover .ph-image-full {
    transform: scale(1.05);
}

/* ----- Gallery thumbnails (horizontal scroll) -----
 * Phoca Cart renders additional images in .ph-item-image-add-box with
 * col-md-3 children. We override to a horizontal scrollable flex row. */
.ph-item-image-add-box {
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-bottom: var(--space-xs);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ph-item-image-add-box::-webkit-scrollbar {
    display: none;
}

.ph-item-image-add-box [class*="col-"] {
    flex: 0 0 auto !important;
    width: 6rem !important;
    max-width: 6rem !important;
    padding: 0 !important;
    float: none !important;
}

.ph-item-image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    padding: var(--space-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition:
        border-color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.ph-item-image-box:hover {
    border-color: var(--color-primary);
    opacity: 1;
    transform: translateY(-1px);
}

.ph-item-image-box.is-active,
.ph-item-image-box[aria-selected="true"] {
    border-color: var(--color-primary);
    border-width: 2px;
    opacity: 1;
}

.ph-item-image-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ----- Data/price panel ----- */
.ph-item-view-data-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Outer wrapper that Phoca Cart renders around everything in the data
 * column (title, price, desc, manufacturer, stock, form). We use it as
 * a flex column with consistent spacing. */
.ph-item-price-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Product title — hero typography, uses --font-heading (template param) */
#ph-pc-item-box h1,
.ph-item-price-panel h1,
.ph-header {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    letter-spacing: -0.015em;
    margin: 0;
}

/* Description — light, relaxed, below hero title */
.ph-item-view-data-box .ph-desc,
.ph-item-price-panel .ph-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ----- Price card — premium white card wrapping price + quantity + cart button -----
 * This visual grouping is missing in Phoca Cart HTML so we simulate it
 * by styling .ph-item-price-box (Phoca Cart's native price wrapper) as a
 * card, and positioning the quantity + button below it through sibling
 * rules on .ph-item-add-to-cart-box which comes right after in the DOM. */
.ph-item-price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.ph-item-price-box .ph-cb { display: none; }

/* Hero price inside the card — bigger than category view */
.ph-item-price-box .ph-price,
.ph-item-price-box .ph-price-brutto,
.ph-item-price-box .ph-price-netto {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 2.5vw + 1rem, 2.75rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.ph-item-price-box .ph-price-txt,
.ph-item-price-box .ph-price-brutto-txt,
.ph-item-price-box .ph-price-netto-txt,
.ph-item-price-box .ph-tax-txt {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-xs) 0;
}

.ph-item-price-box .ph-tax {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

/* Riadky s údajmi o produkte — popisok a hodnota vedľa seba.
 *
 * Phoca v main.css (riadky 155-220) dáva hodnote `float: right` a popisku
 * `float: left; clear: both`, takže na širokom stĺpci skončí „SKU:" pri ľavom
 * okraji a samotný kód pri pravom — oko si ich musí spájať cez pol obrazovky
 * a údaj sa zle pamätá. Flex na rodičovi to rieší bez !important: float sa na
 * flex položky zo špecifikácie neuplatňuje, takže Phoca pravidlá zhasnú samy.
 *
 * `.ph-item-size-box` tu zámerne NIE JE — obsahuje viac dvojíc naraz
 * (dĺžka, šírka, výška, hmotnosť) a jeden flex riadok by ich pomiešal.
 * Cenové a skladové boxy tiež nie: tie majú vlastné rozloženie nižšie. */
.ph-item-manufacturer-box,
.ph-item-delivery-date-box,
.ph-item-reward-box,
.ph-item-sku-box,
.ph-item-upc-box,
.ph-item-ean-box,
.ph-item-jan-box,
.ph-item-isbn-box,
.ph-item-mpn-box,
.ph-item-serial-number-box,
.ph-item-min-qty-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: baseline;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    border: 0;
}

.ph-manufacturer-txt,
.ph-delivery-date-txt,
.ph-reward-txt,
.ph-sku-txt,
.ph-upc-txt,
.ph-ean-txt,
.ph-jan-txt,
.ph-isbn-txt,
.ph-mpn-txt,
.ph-serial-number-txt,
.ph-min-qty-txt {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Hodnota nesie informáciu — nech je čitateľnejšia než popisok pri nej. */
.ph-sku,
.ph-upc,
.ph-ean,
.ph-jan,
.ph-isbn,
.ph-mpn,
.ph-serial-number,
.ph-min-qty {
    font-weight: var(--font-weight-medium);
    color: var(--color-heading);
}

.ph-manufacturer-box a,
.ph-manufacturer a {
    color: var(--color-heading);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.ph-manufacturer-box a:hover,
.ph-manufacturer a:hover {
    color: var(--color-primary);
}

/* ----- Stock status chip -----
 * Phoca Cart renders TWO nested .ph-item-stock-box elements (outer wrapper
 * with id="phItemStockBoxItemX" and inner duplicate). We reset the outer
 * to be invisible and style only the inner one — the one that has
 * `.ph-stock` as a direct child — via :has(> .ph-stock).
 *
 * Borderless pill with tinted background, colour changes based on
 * Phoca Cart's pc-status-* status class. "In stock" gets a pulsing
 * green tint that subtly breathes to draw attention. */

/* Outer wrapper reset — fully transparent, no padding/border */
.ph-item-stock-box {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Style only the box that directly contains .ph-stock (the inner one) */
.ph-item-stock-box:has(> .ph-stock) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4em 0.9em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.04));
    color: var(--color-text);
}

.ph-item-stock-box .ph-stock-txt {
    display: none;
}

.ph-item-stock-box .ph-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: inherit;
}

.ph-item-stock-box .ph-stock::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    flex-shrink: 0;
}

/* In-stock — green tint + pulsing dot */
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-dostupn"]),
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-sklad"]),
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-in"]) {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.ph-item-stock-box .ph-stock[class*="pc-status-dostupn"]::before,
.ph-item-stock-box .ph-stock[class*="pc-status-sklad"]::before,
.ph-item-stock-box .ph-stock[class*="pc-status-in"]::before {
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: es-stock-pulse 2s infinite;
}

@keyframes es-stock-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.6); }
    60%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0); }
}

/* Out of stock — red tint */
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-vypred"]),
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-sold"]),
.ph-item-stock-box:has(> .ph-stock[class*="pc-status-out"]) {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.ph-item-stock-box .ph-stock[class*="pc-status-vypred"]::before,
.ph-item-stock-box .ph-stock[class*="pc-status-sold"]::before,
.ph-item-stock-box .ph-stock[class*="pc-status-out"]::before {
    background: #dc2626;
}

/* Respect user "reduce motion" preference — no pulse animation */
@media (prefers-reduced-motion: reduce) {
    .ph-item-stock-box .ph-stock::before {
        animation: none !important;
    }
}

/* Attributes / options select */
.ph-attribute-box {
    margin: var(--space-md) 0;
}

.ph-attribute-box label,
.ph-attribute-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.ph-attribute-box select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
}

.ph-attribute-box select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ----- Item view add-to-cart row (quantity pill + cart button) -----
 * Phoca Cart renders:
 *   .ph-item-add-to-cart-box.ph-pull-right.form-group (wrapper)
 *     .form-group.ph-form-quantity (contains the number input)
 *     .form-group.ph-form-button
 *       button.btn-primary.ph-btn
 *
 * We neutralize the floats and turn it into a flex row where the
 * quantity picker sits left and the cart button grows to fill. */
.ph-item-add-to-cart-box {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    float: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.ph-item-add-to-cart-box .form-group {
    margin: 0 !important;
    padding: 0 !important;
}

/* Quantity picker — inline pill with minus/input/plus, radius matches
 * the rest of the template (--card-radius) for visual consistency.
 * "Množstvo:" label is visually-hidden (redundant — +/- widget is self-explanatory). */
.ph-item-price-panel .ph-form-quantity,
#ph-pc-item-box .ph-form-quantity {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    overflow: hidden;
}

.ph-item-price-panel .ph-form-quantity > label,
#ph-pc-item-box .ph-form-quantity > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ph-item-price-panel .ph-form-quantity input,
.ph-item-price-panel .ph-form-quantity .form-control,
#ph-pc-item-box .ph-form-quantity input {
    width: 3.25rem;
    min-width: 3.25rem;
    padding: 0 0.25rem;
    background: transparent;
    border: 0;
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ph-item-price-panel .ph-form-quantity input::-webkit-outer-spin-button,
.ph-item-price-panel .ph-form-quantity input::-webkit-inner-spin-button,
#ph-pc-item-box .ph-form-quantity input::-webkit-outer-spin-button,
#ph-pc-item-box .ph-form-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ph-item-price-panel .ph-form-quantity input:focus {
    outline: none;
}

/* −/+ buttons injected by ItemQtyEnhancer JS */
.ph-form-quantity__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: 0;
    background: transparent;
    color: var(--color-heading);
    border: 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ph-form-quantity__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.ph-form-quantity__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.ph-form-quantity__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Cart button — large, rounded-full, icon+label, hover lift, shadow */
.ph-item-price-panel .ph-form-button {
    flex: 1 1 auto;
    display: flex;
}

.ph-item-price-panel .ph-btn,
.ph-item-price-panel .phCartButton,
.ph-item-price-panel button.ph-btn,
.ph-item-price-panel .btn-primary.ph-btn,
#ph-pc-item-box .ph-form-button .ph-btn,
#ph-pc-item-box .ph-form-button .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 3rem;
    padding: 0 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--card-radius);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.ph-item-price-panel .ph-btn:hover,
#ph-pc-item-box .ph-form-button .ph-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.ph-item-price-panel .ph-btn:active,
#ph-pc-item-box .ph-form-button .ph-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ph-item-price-panel .ph-btn > svg,
.ph-item-price-panel .ph-btn > i,
#ph-pc-item-box .ph-form-button .ph-btn > svg,
#ph-pc-item-box .ph-form-button .ph-btn > i {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.1em;
}

/* Compare & Wishlist buttons — outline secondary style */
.ph-item-price-panel .ph-compare-box,
.ph-item-price-panel .ph-wishlist-box {
    display: inline-flex;
    gap: var(--space-sm);
}

.ph-item-price-panel .ph-compare-box button,
.ph-item-price-panel .ph-wishlist-box button,
.ph-item-price-panel .ph-compare-box a,
.ph-item-price-panel .ph-wishlist-box a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.ph-item-price-panel .ph-compare-box button:hover,
.ph-item-price-panel .ph-wishlist-box button:hover,
.ph-item-price-panel .ph-compare-box a:hover,
.ph-item-price-panel .ph-wishlist-box a:hover {
    background: var(--color-gray-100, rgba(0, 0, 0, 0.04));
    color: var(--color-heading);
    border-color: var(--color-text-muted);
}

/* Ask a question button — ghost style (ID specificity to beat #ph-pc-item-box .btn-primary) */
#ph-pc-item-box .ph-button-ask-question-box .ph-btn,
#ph-pc-item-box .ph-button-ask-question-box .btn-primary,
#ph-pc-item-box .ph-button-ask-question-box .btn {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

#ph-pc-item-box .ph-button-ask-question-box .ph-btn:hover,
#ph-pc-item-box .ph-button-ask-question-box .btn-primary:hover,
#ph-pc-item-box .ph-button-ask-question-box .btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-heading);
    border-color: var(--color-text-muted);
}

/* SKU, EAN display */
.ph-item-id-box {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
}

.ph-item-id-box .ph-id-title {
    font-weight: var(--font-weight-medium);
}

/* ----- 9. Product Tabs ----- */

.ph-item-bottom-box {
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
    width: 100%;
    clear: both;
}

/* Tab navigation */
.ph-item-bottom-box .nav-tabs,
.ph-item-bottom-box ul[role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
}

.ph-item-bottom-box .nav-tabs .nav-item {
    margin-bottom: -2px;
}

.ph-item-bottom-box .nav-tabs .nav-link,
.ph-item-bottom-box .nav-tabs a {
    display: block;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.ph-item-bottom-box .nav-tabs .nav-link:hover,
.ph-item-bottom-box .nav-tabs a:hover {
    color: var(--color-heading);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.02));
}

.ph-item-bottom-box .nav-tabs .nav-link.active,
.ph-item-bottom-box .nav-tabs .active > a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Tab content */
.ph-item-bottom-box .tab-content {
    padding: var(--space-lg) 0;
}

.ph-item-bottom-box .tab-pane,
.ph-item-bottom-box .ph-tab-pane {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    max-width: 80ch;
    margin: 0 auto;
}

/* Content typography inside tab panes */
.ph-item-bottom-box .ph-tab-pane h2,
.ph-item-bottom-box .ph-tab-pane h3,
.ph-item-bottom-box .ph-tab-pane h4 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    margin: var(--space-lg) 0 var(--space-sm) 0;
}

.ph-item-bottom-box .ph-tab-pane h2 { font-size: var(--font-size-xl); }
.ph-item-bottom-box .ph-tab-pane h3 { font-size: var(--font-size-lg); }
.ph-item-bottom-box .ph-tab-pane h4 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }

.ph-item-bottom-box .ph-tab-pane h2:first-child,
.ph-item-bottom-box .ph-tab-pane h3:first-child,
.ph-item-bottom-box .ph-tab-pane h4:first-child {
    margin-top: 0;
}

.ph-item-bottom-box .ph-tab-pane p {
    margin: 0 0 var(--space-md) 0;
}

.ph-item-bottom-box .ph-tab-pane p:last-child {
    margin-bottom: 0;
}

.ph-item-bottom-box .ph-tab-pane ul,
.ph-item-bottom-box .ph-tab-pane ol {
    margin: 0 0 var(--space-md) 0;
    padding-left: 1.25rem;
}

.ph-item-bottom-box .ph-tab-pane ul li,
.ph-item-bottom-box .ph-tab-pane ol li {
    margin-bottom: var(--space-xs);
}

.ph-item-bottom-box .ph-tab-pane ul li::marker {
    color: var(--color-primary);
}

.ph-item-bottom-box .ph-tab-pane strong {
    color: var(--color-heading);
    font-weight: var(--font-weight-semibold);
}

.ph-item-bottom-box .ph-tab-pane a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.ph-item-bottom-box .ph-tab-pane a:hover {
    text-decoration-thickness: 2px;
}

/* Tables inside tabs (e.g. specifications) */
.ph-item-bottom-box .ph-tab-pane table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-md) 0;
}

.ph-item-bottom-box .ph-tab-pane table th,
.ph-item-bottom-box .ph-tab-pane table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.ph-item-bottom-box .ph-tab-pane table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    width: 30%;
}

/* Specifications table */
.ph-spec-group-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: var(--space-lg) 0 var(--space-md) 0;
    color: var(--color-heading);
}

.ph-spec-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
}

.ph-spec-value {
    padding: var(--space-sm) 0;
}

/* ============================================================
   Item tabs → accordion takeover
   JS injects `.es-tab-accordion-head` buttons; body class chooses mode.
   Joomla 6 drops Bootstrap JS so our TabsAccordion also wires tab clicks.
   ============================================================ */

/* Tab pane visibility — BS5 CSS isn't loaded in Joomla 6.
   All rules use !important because some script/legacy CSS sets
   display:block on panes with priority that beats plain selectors.
   JS manipulates visibility via classes only (.is-accordion-open),
   never inline style, so !important is safe. */
.ph-item-bottom-box .ph-tab-pane,
.ph-item-bottom-box .tab-pane {
    display: none !important;
}
.ph-item-bottom-box .ph-tab-pane.active,
.ph-item-bottom-box .ph-tab-pane.show,
.ph-item-bottom-box .tab-pane.active,
.ph-item-bottom-box .tab-pane.show {
    display: block !important;
}
/* Accordion mode — .is-accordion-mode hides, .is-accordion-open shows */
.ph-item-bottom-box .ph-tab-pane.is-accordion-mode {
    display: none !important;
}
.ph-item-bottom-box .ph-tab-pane.is-accordion-mode.is-accordion-open {
    display: block !important;
}

.es-tab-accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 6px);
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.es-tab-accordion-head + .ph-tab-pane {
    margin-top: -1px;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--card-radius, 6px) var(--card-radius, 6px);
}

.es-tab-accordion-head:hover,
.es-tab-accordion-head[aria-expanded="true"] {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
}

.es-tab-accordion-head__label {
    flex: 1;
    min-width: 0;
}

.es-tab-accordion-head__chev {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-right: 0.2rem;
}

.es-tab-accordion-head[aria-expanded="true"] .es-tab-accordion-head__chev {
    transform: rotate(-135deg);
}

/* Accordion mode panels — visibility controlled inline by JS (style.display);
   these only handle padding/margins */
.ph-tab-pane.is-accordion-mode {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.ph-tab-pane.is-accordion-mode + .es-tab-accordion-head {
    margin-top: var(--space-md);
}

/* Review summary dashboard — avg score + distribution bars */
.ph-review-summary {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 6px);
}

.ph-review-summary-avg {
    text-align: center;
    border-right: 1px solid var(--color-border);
    padding-right: var(--space-lg);
}

.ph-review-summary-score {
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-heading);
    margin-bottom: var(--space-xs);
}

.ph-stars-lg {
    width: 100px;
    height: 20px;
}

.ph-review-summary-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.ph-review-summary-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ph-review-summary-row {
    display: grid;
    grid-template-columns: 1.25rem 1fr 2rem;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--font-size-sm);
}

.ph-review-summary-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.ph-review-summary-bar {
    height: 8px;
    background: var(--color-gray-200, #e5e5e5);
    border-radius: 4px;
    overflow: hidden;
}

.ph-review-summary-bar > div {
    height: 100%;
    background: #F59E0B;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ph-review-summary-num {
    color: var(--color-text-muted);
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.ph-review-summary-empty {
    display: block;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
}

.ph-review-summary-empty-icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.ph-review-summary-empty-text {
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .ph-review-summary {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .ph-review-summary-avg {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: var(--space-md);
    }
}

/* Reviews pagination */
.ph-review-item {
    display: none;
}

.ph-review-item.is-visible {
    display: block;
}

.ph-reviews-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.ph-reviews-pagination.is-active {
    display: flex;
}

.ph-reviews-pagination button {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    border-radius: var(--btn-radius, 4px);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ph-reviews-pagination button:hover:not(:disabled):not([aria-current]) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ph-reviews-pagination button[aria-current="page"] {
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    border-color: var(--color-primary);
    cursor: default;
}

.ph-reviews-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ph-reviews-pagination .ph-reviews-pagination-ellipsis {
    padding: 0 var(--space-xs);
    color: var(--color-text-muted);
}

/* Review card */
.bs-callout {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    border-radius: var(--card-radius, 6px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s ease;
}

.bs-callout:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ph-reviews-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
    color: var(--color-heading);
}

.ph-reviews-review {
    color: var(--color-text);
    margin-top: var(--space-sm);
    line-height: var(--line-height-relaxed);
}

/* Stars alignment */
.bs-callout .ph-stars {
    display: inline-flex;
    vertical-align: middle;
}

/* Barrating star colors — override Phoca Cart css-stars.css blue default */
.br-theme-css-stars .br-widget a.br-active::after,
.br-theme-css-stars .br-widget a.br-selected::after {
    color: var(--color-accent, #C5A059);
}

.br-theme-css-stars .br-widget a::after {
    color: var(--color-border, #e5e5e5);
}

/* Review message (login prompt etc.) */
.ph-message {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-alt);
    border-radius: var(--card-radius, 6px);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-md);
}

/* Review form */
.ph-review-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
}

/* ----- Related products (native Phoca Cart, inside item-view tabs) -----
 * Phoca Cart renders related products inside tab panes with IDs like
 * #phrelated-1, #phrelated-2 etc. The row uses Bootstrap col-xs12/sm3/md3
 * which resolves to empty classes in Joomla 6 (no Bootstrap frontend CSS),
 * so we take over via an auto-fill CSS grid. Cards use the specific
 * `.ph-item-thumbnail-related` class so we don't collide with category
 * `.es-product-card` styling. */

.ph-item-bottom-box [id^="phrelated-"] > .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin: 0 !important;
    padding: 0 !important;
}

.ph-item-bottom-box [id^="phrelated-"] .row-item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    display: block;
}

.ph-item-thumbnail-related {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    margin: 0;
}

.ph-item-thumbnail-related:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.ph-item-thumbnail-related .thumbnail,
.ph-item-thumbnail-related .ph-thumbnail,
.ph-item-thumbnail-related .ph-thumbnail-c {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--es-media-plate);
    border: 0;
    overflow: hidden;
    margin: 0;
}

.ph-item-thumbnail-related .ph-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}

.ph-item-thumbnail-related .ph-item-content > a:first-child {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
}

.ph-item-thumbnail-related img,
.ph-item-thumbnail-related .ph-image,
.ph-item-thumbnail-related .ph-image-full {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform var(--transition-slow);
}

.ph-item-thumbnail-related:hover img,
.ph-item-thumbnail-related:hover .ph-image-full {
    transform: scale(1.05);
}

.ph-item-thumbnail-related .caption {
    padding: var(--space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    margin: 0;
}

.ph-item-thumbnail-related .caption h4,
.ph-item-thumbnail-related .caption h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ph-item-thumbnail-related .caption h4 a,
.ph-item-thumbnail-related .caption h3 a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ph-item-thumbnail-related .caption h4 a:hover,
.ph-item-thumbnail-related .caption h3 a:hover {
    color: var(--color-primary);
}

/* Related product buttons — ghost style (ID specificity) */
#ph-pc-item-box .ph-item-thumbnail-related .ph-btn,
#ph-pc-item-box .ph-item-thumbnail-related .btn-primary,
#ph-pc-item-box .ph-item-thumbnail-related .btn {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) var(--space-md) var(--space-md);
    border-radius: var(--radius-md);
}

#ph-pc-item-box .ph-item-thumbnail-related .ph-btn:hover,
#ph-pc-item-box .ph-item-thumbnail-related .btn-primary:hover,
#ph-pc-item-box .ph-item-thumbnail-related .btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Mobile: 2 columns on small viewports */
@media (max-width: 575.98px) {
    .ph-item-bottom-box [id^="phrelated-"] > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
    }
}

/* ----- 10. Cart Module (Offcanvas) ----- */

/*
 * Phoca Cart renders cart with Bootstrap .row/.col-* classes.
 * After AJAX add-to-cart, the entire #phItemCartBox is replaced.
 * We must ensure Bootstrap grid works properly inside the offcanvas
 * and override our own grid resets that could conflict.
 */

/* Reset: ensure .row inside cart stays Bootstrap flex, not our grid */
#phItemCartBox .row,
.ph-item-cart-box .row,
.ph-cart-small-box .row {
    display: flex !important;
    flex-wrap: wrap;
    float: none;
    margin: 0;
}

#phItemCartBox [class*="col-"],
.ph-item-cart-box [class*="col-"],
.ph-cart-small-box [class*="col-"] {
    float: none;
    padding: 0;
    flex: 1;
    min-width: 0;
}

/* Cart container */
.ph-cart-small-box {
    font-size: var(--font-size-sm);
}

/* Cart header row */
.ph-cart-cart-row-header {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Cart separator */
.ph-cart-cart-row-hr {
    border: none;
    height: 0;
    margin: 0;
    padding: 0;
}

.ph-cart-cart-row-hr .row {
    display: none !important;
}

/* Cart item row */
.ph-cart-cart-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-sm);
}

/* Cart item image */
.ph-cart-cart-row-item .ph-mod-cart-image,
.ph-cart-cart-row-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Cart item title */
.ph-cart-cart-row-item a {
    color: var(--color-heading);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-cart-cart-row-item a:hover {
    color: var(--color-primary);
}

/* Cart item quantity */
.ph-cart-small-quantity {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Cart item price */
.ph-cart-small-price {
    flex-shrink: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    text-align: right;
}

/* Cart item remove (1.29.0 – layout override cart_cart.php) */
.ph-cart-cart-row-item .es-cart-remove {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1;
}

.es-cart-remove__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.es-cart-remove__btn:hover,
.es-cart-remove__btn:focus-visible {
    background: var(--color-primary-light, rgba(0, 0, 0, 0.06));
    color: var(--color-primary);
    outline: none;
}

/* Cart item attributes */
.ph-cart-cart-row-attributes {
    padding: 0 0 var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.ph-cart-cart-row-attributes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Cart totals section */
.ph-cart-cart-row-netto,
.ph-cart-cart-row-tax,
.ph-cart-cart-row-discount-product,
.ph-cart-cart-row-discount-cart,
.ph-cart-cart-row-discount-coupon,
.ph-cart-cart-row-discount-reward,
.ph-cart-cart-row-shipping-box,
.ph-cart-cart-row-payment-box {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Discount values - highlight */
.ph-cart-product-discount,
.ph-cart-cart-discount,
.ph-cart-coupon,
.ph-cart-reward-discount {
    color: var(--color-success);
}

/* Cart grand total */
.ph-cart-cart-row-total-box {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    border-top: 2px solid var(--color-heading);
    margin-top: var(--space-sm);
}

/* Currency & rounding in cart module */
.ph-cart-cart-row-currency-box,
.ph-cart-cart-row-currency-rounding-box {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Checkout link button */
.ph-cart-link-checkout {
    margin-top: var(--space-md);
}

.ph-cart-link-checkout a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.ph-cart-link-checkout a:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
}

/* Empty cart state */
.ph-cart-small-box:empty::before,
.ph-item-cart-box:empty::before {
    content: attr(data-empty-text);
    display: block;
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Cart offcanvas body styling */
.es-cart-offcanvas__body .ph-cart-small-box {
    font-size: var(--font-size-sm);
}

/* Phoca Cart utility alignment classes inside cart */
.ph-cart-small-box .ph-right {
    text-align: right;
    margin-left: auto;
}

.ph-cart-small-box .ph-small {
    font-size: var(--font-size-sm);
}

.ph-cart-small-box .ph-b {
    font-weight: var(--font-weight-bold);
}

/* Prevent Phoca clearfix divs from breaking layout */
.ph-cart-small-box .ph-cb,
.ph-item-cart-box .ph-cb {
    display: none;
}

/* Add to cart popup modal */
#phAddToCartPopup {
    font-family: var(--font-body);
}

#phAddToCartPopup .modal-content {
    border-radius: var(--card-radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

#phAddToCartPopup .modal-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

#phAddToCartPopup .modal-body {
    padding: var(--space-lg);
}

#phAddToCartPopup .modal-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    gap: var(--space-sm);
}

#phAddToCartPopup .modal-footer .ph-btn,
#phAddToCartPopup .modal-footer .btn {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
}

/* Full-page overlay during cart operations */
#phContainerOverlay {
    background: rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal);
}

/* ----- 11. Bootstrap Overrides ----- */

/* Override Bootstrap form elements used by Phoca Cart */
#ph-pc-item-box .form-control,
#ph-pc-item-box .inputbox,
#ph-pc-category-box .form-control,
#ph-pc-category-box .inputbox {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

#ph-pc-item-box .form-control:focus,
#ph-pc-category-box .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

/* Override Bootstrap buttons — item detail keeps solid primary */
#ph-pc-item-box .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

#ph-pc-item-box .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Category buttons — neutral / ghost */
#ph-pc-category-box .btn-primary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

#ph-pc-category-box .btn-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

#ph-pc-item-box .btn-secondary,
#ph-pc-category-box .btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

#ph-pc-item-box .btn-secondary:hover,
#ph-pc-category-box .btn-secondary:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Hide Phoca Cart spacer elements */
.ph-hr {
    border: none;
    height: 1px;
    background: var(--color-border);
    margin: var(--space-lg) 0;
}

.ph-top-space {
    height: var(--space-md);
}

/* ----- 12. Responsive ----- */

@media (min-width: 768px) {
    #ph-pc-item-box > .row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    #ph-pc-item-box > .row {
        grid-template-columns: 5fr 7fr;
    }
}

@media (max-width: 767px) {
    /* Stack toolbar sections vertically; sort + limit on their own rows
     * and the layout switcher also on its own row, left-aligned. */
    .ph-pagination-top {
        gap: var(--space-sm);
    }

    /* Bottom toolbar grid collapses to a single column on mobile. */
    .ph-pagination {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
    }

    /* Each toolbar section (label + select pair) takes a full row AND
     * stacks its own children vertically — label on top, select below.
     * Without this the label and select sit side-by-side in a flex row
     * and the combined width blows out the mobile viewport. */
    .ph-pagination-top > .ph-pag-top-row,
    .ph-pagination > .ph-center-pagination {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.25rem !important;
    }

    /* Exception — the section holding the grid/gridlist/list switch
     * buttons keeps flex-direction: row so the three icons sit side by
     * side instead of stacking vertically. */
    .ph-pagination-top > .ph-pag-top-row:has(.phItemSwitchLayoutType) {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .ph-pagination-top > .ph-pag-top-row:last-of-type {
        margin-left: 0 !important;
    }

    /* Selects take the full section width — hard-capped to viewport so
     * long options can't blow out the layout */
    .ph-pagination-top select,
    .ph-pagination select {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ph-item-bottom-box .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .ph-item-bottom-box .nav-tabs .nav-link,
    .ph-item-bottom-box .nav-tabs a {
        padding: var(--space-sm) var(--space-md);
        white-space: nowrap;
    }
}

/* ============================================
   13. Checkout Page
   ============================================ */

/* Limit size of Phoca Cart SVG/icon glyphs inside checkout & account views
   (default Phoca icons are rendered huge when used inline) */
#ph-pc-checkout-box svg,
#ph-pc-account-box svg,
.ph-checkout-box-header svg,
.ph-checkout-box-header-pas svg,
.ph-account-box-header svg,
.ph-account-box-header-pas svg,
.ph-checkout-box-row svg,
.ph-account-box-row svg {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

/* User/login icon near "Login" heading */
#ph-pc-checkout-box .ph-icon-user,
#ph-pc-checkout-box [class*="icon-user"],
#ph-pc-account-box .ph-icon-user,
#ph-pc-account-box [class*="icon-user"] {
    font-size: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* Phoca Cart section icons in headers (checkout steps) — circular step badge */
.ph-checkout-icon-spec-finished,
.ph-checkout-icon-spec-pending {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    border-radius: 50%;
    border: 2px solid currentColor;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ph-checkout-icon-spec-finished svg,
.ph-checkout-icon-spec-pending svg {
    max-width: 18px;
    max-height: 18px;
}


#ph-pc-checkout-box {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* Checkout step sections — tighter radius than --card-radius (0.5rem)
   so the section frames don't feel like baby cards (1.16.2). */
.ph-checkout-box-row {
    margin-bottom: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Step wrappers — contain floated .ph-pull-right children (edit/save buttons)
   so they don't escape into the next step and push its header to a narrow
   column. Using display:flow-root (modern clearfix) preserves layout. */
.ph-checkout-box-login,
.ph-checkout-box-address,
.ph-checkout-box-shipping,
.ph-checkout-box-payment,
.ph-checkout-confirm-box-row {
    display: flow-root;
    margin-bottom: var(--space-md);
}

/* The action area inside a step also needs to contain its own floats
   (save button, edit button, checkbox rows) */
.ph-checkout-box-action {
    display: flow-root;
}

.ph-checkout-box-row.ph-checkout-box-status-finished {
    border-color: var(--color-success);
}

/* Checkout section headers — compact, single line.
   1.16.4: padding reduced to space-sm vertical / space-md horizontal so the
   step bar doesn't stretch the checkout vertically. Mobile users were
   scrolling more than necessary.
   1.16.5: zero out margin-top — Phoca main.css forces +20px above every
   .ph-checkout-box-header (and -5px on .ph-account-box-header), which
   visually disconnects the header from its own box. */
.ph-checkout-box-header,
.ph-checkout-box-header-pas {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: 0 !important;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.3;
}

.ph-checkout-box-header-pas {
    color: var(--color-text-muted);
    background: transparent;
    border-bottom-color: transparent;
}

/* Checkout status icons — filled on finished, outline on pending */
.ph-checkout-icon-spec-finished {
    color: #fff;
    background: var(--color-success);
    border-color: var(--color-success);
}

.ph-checkout-icon-spec-pending {
    color: var(--color-text-muted);
    background: transparent;
    border-color: var(--color-border);
}

/* Push step badge to the right side of the header, keep h3 (with inline "N.") on the left */
.ph-checkout-box-header .ph-checkout-icon-spec-box,
.ph-checkout-box-header-pas .ph-checkout-icon-spec-box,
.ph-account-box-header .ph-checkout-icon-spec-box,
.ph-account-box-header-pas .ph-checkout-icon-spec-box {
    margin-left: auto;
    order: 2;
}

.ph-checkout-box-header h3,
.ph-checkout-box-header-pas h3,
.ph-account-box-header h3,
.ph-account-box-header-pas h3 {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    flex: 1 1 auto;
}

/* Checkout action area — tighter vertical rhythm */
.ph-checkout-box-action {
    padding: var(--space-md);
}

/* Address forms in checkout */
.ph-checkout-billing-row,
.ph-checkout-shipping-row {
    padding: var(--space-md);
}

.ph-checkout-box-address {
    margin-bottom: var(--space-md);
}

.ph-checkout-box-address label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.ph-checkout-box-address input[type="text"],
.ph-checkout-box-address input[type="email"],
.ph-checkout-box-address input[type="tel"],
.ph-checkout-box-address select,
.ph-checkout-box-address textarea,
#ph-pc-checkout-box .form-control,
#ph-pc-checkout-box .inputbox {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
}

.ph-checkout-box-address input:focus,
.ph-checkout-box-address select:focus,
.ph-checkout-box-address textarea:focus,
#ph-pc-checkout-box .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

/* Same as shipping checkbox */
.ph-checkout-billing-same-as-shipping,
.ph-checkout-check-box {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.ph-checkout-check-box input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
}

/* Save/Edit address buttons */
.ph-checkout-address-save,
.ph-checkout-address-edit {
    margin-top: var(--space-md);
}

/* Shipping method selection */
.ph-checkout-shipping-items-box,
.ph-checkout-payment-items-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.ph-checkout-shipping-item,
.ph-checkout-payment-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ph-checkout-shipping-item:hover,
.ph-checkout-payment-item:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-alt);
}

.ph-checkout-shipping-item input[type="radio"],
.ph-checkout-payment-item input[type="radio"] {
    margin-top: 0.25rem;
    accent-color: var(--color-primary);
}

.ph-shipping-title-box,
.ph-payment-title-box {
    flex: 1;
}

.ph-shipping-title,
.ph-payment-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

.ph-shipping-price-box,
.ph-payment-price-box {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    white-space: nowrap;
}

.ph-checkout-shipping-desc,
.ph-checkout-payment-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.ph-checkout-shipping-additional-info,
.ph-checkout-payment-add-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Payment cost breakdown */
.ph-checkout-payment-netto-txt,
.ph-checkout-payment-tax-txt,
.ph-checkout-payment-brutto-txt,
.ph-checkout-payment-free-txt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Edit shipping/payment links */
.ph-checkout-shipping-edit,
.ph-checkout-payment-edit {
    padding: var(--space-md) var(--space-lg);
}

.ph-checkout-shipping-edit a,
.ph-checkout-payment-edit a {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: underline;
}

/* Checkout cart display */
.ph-checkout-cart-box {
    padding: var(--space-lg);
}

.ph-checkout-cart-image img,
.ph-img-cart-checkout {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.ph-checkout-cart-quantity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Checkout info boxes */
.ph-checkout-shipping-info-box,
.ph-checkout-payment-info-box {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

/* Checkout buttons — main actions stay primary */
#ph-pc-checkout-box .ph-btn,
#ph-pc-checkout-box .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

#ph-pc-checkout-box .ph-btn:hover,
#ph-pc-checkout-box .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Secondary checkout buttons (edit, cancel, secondary actions) — ghost
   Phoca uses btn-success for edit buttons ("Upraviť adresu/dopravu/platbu")
   — these are SECONDARY actions despite Bootstrap semantics. Only the
   final "Potvrdiť objednávku" (submit / btn-primary + type=submit in
   confirm form) stays solid primary. */
#ph-pc-checkout-box .btn-secondary,
#ph-pc-checkout-box .btn-default,
#ph-pc-checkout-box .btn-info,
#ph-pc-checkout-box .ph-checkout-address-edit .ph-btn,
#ph-pc-checkout-box .ph-checkout-shipping-edit .ph-btn,
#ph-pc-checkout-box .ph-checkout-payment-edit .ph-btn,
#ph-pc-checkout-box .ph-checkout-address-save .ph-btn,
#ph-pc-checkout-box .ph-checkout-shipping-save .ph-btn,
#ph-pc-checkout-box .ph-checkout-payment-save .ph-btn,
#ph-pc-checkout-box .btn-success.ph-btn:not([name="Submit"]):not(.ph-checkout-btn-confirm) {
    background: transparent !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

#ph-pc-checkout-box .btn-secondary:hover,
#ph-pc-checkout-box .btn-default:hover,
#ph-pc-checkout-box .btn-info:hover,
#ph-pc-checkout-box .ph-checkout-address-edit .ph-btn:hover,
#ph-pc-checkout-box .ph-checkout-shipping-edit .ph-btn:hover,
#ph-pc-checkout-box .ph-checkout-payment-edit .ph-btn:hover,
#ph-pc-checkout-box .ph-checkout-address-save .ph-btn:hover,
#ph-pc-checkout-box .ph-checkout-shipping-save .ph-btn:hover,
#ph-pc-checkout-box .ph-checkout-payment-save .ph-btn:hover,
#ph-pc-checkout-box .btn-success.ph-btn:not([name="Submit"]):not(.ph-checkout-btn-confirm):hover {
    background: var(--color-surface-alt);
    color: var(--color-heading);
    border-color: var(--color-text-muted);
}

/* Checkout cart — quantity controls in product table */
#ph-pc-checkout-box .ph-checkout-cart-quantity .btn,
#ph-pc-checkout-box .ph-cart-quantity-box .btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 0.8rem;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ph-pc-checkout-box .ph-checkout-cart-quantity .btn:hover,
#ph-pc-checkout-box .ph-cart-quantity-box .btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Remove item button in checkout cart — subtle */
#ph-pc-checkout-box .ph-btn-remove,
#ph-pc-checkout-box [class*="delete"],
#ph-pc-checkout-box [class*="remove"] {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ph-pc-checkout-box .ph-btn-remove:hover,
#ph-pc-checkout-box [class*="delete"]:hover,
#ph-pc-checkout-box [class*="remove"]:hover {
    background: var(--color-danger, #8a1c25);
    color: var(--color-white);
    border-color: var(--color-danger, #8a1c25);
}

/* Guest checkout button — accent style to stand out */
#ph-pc-checkout-box .btn-success,
#ph-pc-checkout-box [class*="guest"] .btn {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

#ph-pc-checkout-box .btn-success:hover,
#ph-pc-checkout-box [class*="guest"] .btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Danger buttons in checkout (cancel guest etc.) — ghost red */
#ph-pc-checkout-box .btn-danger {
    background: transparent;
    color: var(--color-danger, #8a1c25);
    border: 1px solid var(--color-danger, #8a1c25);
}

#ph-pc-checkout-box .btn-danger:hover {
    background: var(--color-danger, #8a1c25);
    color: var(--color-white);
}

/* Login form in checkout — cleaner */
#ph-pc-checkout-box .ph-login-box {
    max-width: 28rem;
}

#ph-pc-checkout-box .ph-login-box label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    display: block;
}

#ph-pc-checkout-box .ph-login-box input[type="text"],
#ph-pc-checkout-box .ph-login-box input[type="password"],
#ph-pc-checkout-box .ph-login-box input[type="email"] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    margin-bottom: var(--space-md);
}

/* Checkout product row image — consistent size */
#ph-pc-checkout-box .ph-checkout-cart-image img {
    width: 4rem;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 0.25rem;
}

/* Subtotal / Total row styling */
#ph-pc-checkout-box .ph-checkout-cart-total,
#ph-pc-checkout-box [class*="subtotal"],
#ph-pc-checkout-box [class*="total-box"] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

/* ============================================
   Checkout cart — rebuild layout
   Phoca renders cart as div grid with col-xs2/sm2/md2 classes.
   Joomla 6 has no Bootstrap frontend CSS, so these cols are empty hooks
   and cells collapse to full-width blocks. Rebuild with flex/grid.
   ============================================ */

/* Every "row" inside the checkout cart uses flex */
.ph-checkout-cart-box .row,
.ph-checkout-cart-row-header,
.ph-checkout-cart-row-item,
.ph-checkout-cart-row-attributes,
.ph-checkout-cart-row-subtotal,
.ph-cart-subtotal-box,
.ph-cart-shipping-box,
.ph-cart-payment-box,
.ph-cart-discount-box,
.ph-cart-coupon-box,
.ph-cart-tax-box,
.ph-cart-reward-discount-box,
.ph-cart-product-discount-box,
.ph-cart-total-box {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    float: none;
}

/* Reset inner col divs */
.ph-checkout-cart-box [class*="col-"] {
    float: none;
    padding: 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

/* Column widths (desktop) */
.ph-checkout-cart-box .ph-checkout-cart-image {
    flex: 0 0 4.5rem;
    text-align: center;
}
.ph-checkout-cart-box .ph-checkout-cart-product,
.ph-checkout-cart-box .ph-checkout-cart-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.ph-checkout-cart-box .ph-checkout-cart-quantity {
    flex: 0 0 auto;
    text-align: center;
}
.ph-checkout-cart-box .ph-checkout-cart-brutto,
.ph-checkout-cart-box .ph-checkout-cart-netto,
.ph-checkout-cart-box .ph-checkout-cart-tax {
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: right;
    font-weight: var(--font-weight-semibold);
}

/* Header row — column labels (single line on desktop, hidden on mobile) */
.ph-checkout-cart-row-header {
    flex-wrap: nowrap;
    padding: var(--space-sm) 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Item rows — single line on desktop, grid on mobile */
.ph-checkout-cart-row-item {
    flex-wrap: nowrap;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.ph-checkout-cart-row-item:last-of-type {
    border-bottom: none;
}

/* HR separator rows — we use borders instead */
.ph-checkout-cart-row-hr {
    display: none !important;
}

/* Product title link */
.ph-checkout-cart-title a {
    color: var(--color-heading);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}
.ph-checkout-cart-title a:hover {
    color: var(--color-primary);
}

/* Subtotal / shipping / payment / discount rows — label left, value right */
.ph-cart-subtotal-box,
.ph-cart-shipping-box,
.ph-cart-payment-box,
.ph-cart-discount-box,
.ph-cart-coupon-box,
.ph-cart-tax-box,
.ph-cart-reward-discount-box,
.ph-cart-product-discount-box {
    padding: var(--space-xs) 0;
    justify-content: flex-end;
    font-size: var(--font-size-base);
}

/* The first child in these total rows is the empty spacer (col-xs0),
   second is the title, third is the price — keep only title+price visible */
.ph-cart-subtotal-box > :nth-child(1),
.ph-cart-shipping-box > :nth-child(1),
.ph-cart-payment-box > :nth-child(1),
.ph-cart-discount-box > :nth-child(1),
.ph-cart-coupon-box > :nth-child(1),
.ph-cart-tax-box > :nth-child(1),
.ph-cart-reward-discount-box > :nth-child(1),
.ph-cart-product-discount-box > :nth-child(1) {
    display: none;
}

.ph-cart-subtotal-box > *:not(:first-child),
.ph-cart-shipping-box > *:not(:first-child),
.ph-cart-payment-box > *:not(:first-child),
.ph-cart-discount-box > *:not(:first-child),
.ph-cart-coupon-box > *:not(:first-child),
.ph-cart-tax-box > *:not(:first-child),
.ph-cart-reward-discount-box > *:not(:first-child),
.ph-cart-product-discount-box > *:not(:first-child) {
    flex: 0 0 auto;
    text-align: right;
}

/* Total row — highlight */
.ph-cart-total-box {
    padding: var(--space-md) 0;
    margin-top: var(--space-sm);
    border-top: 2px solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    justify-content: flex-end;
}
.ph-cart-total-box > :nth-child(1) {
    display: none;
}

/* Image size in item row */
.ph-checkout-cart-row-item .ph-checkout-cart-image img,
.ph-checkout-cart-row-item .ph-img-cart-checkout {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
}

/* ----- Mobile cart: compact grid per item (≤600px) -----
   Note: these rules MUST be prefixed with .ph-checkout-cart-box to match
   the desktop base rule's specificity (0,2,0). The desktop base uses a
   comma list `.ph-checkout-cart-box .row, .ph-checkout-cart-row-item, ...`
   and CSS picks the most specific matching selector per element. Without
   this prefix, desktop `display:flex !important` wins over mobile
   `display:grid !important` due to specificity — both are !important. */
@media (max-width: 600px) {
    /* Hide desktop column header — cells have data-pc-label attrs */
    .ph-checkout-cart-box .ph-checkout-cart-row-header {
        display: none !important;
    }

    /* Each item = 2-row grid: image column (spans rows) | title (top) + qty|price (bottom) */
    .ph-checkout-cart-box .ph-checkout-cart-row-item {
        display: grid !important;
        grid-template-columns: 3.5rem 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "image title title"
            "image qty   price";
        column-gap: var(--space-md);
        row-gap: var(--space-xs);
        align-items: center;
        padding: var(--space-md) 0;
        flex-wrap: initial;
    }

    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-image {
        grid-area: image;
        flex: none;
    }
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-title,
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-product {
        grid-area: title;
        align-self: start;
    }
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-quantity {
        grid-area: qty;
        justify-self: start;
        align-self: center;
    }
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-brutto,
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-netto,
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-tax {
        grid-area: price;
        justify-self: end;
        align-self: center;
        min-width: 0;
    }

    /* Attribute rows (if product has variants) — full width below item */
    .ph-checkout-cart-box .ph-checkout-cart-row-attributes {
        padding-left: calc(3.5rem + var(--space-md));
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    /* Smaller image on mobile */
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-checkout-cart-image img,
    .ph-checkout-cart-box .ph-checkout-cart-row-item .ph-img-cart-checkout {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* ============================================
   14. Full Cart Page
   ============================================ */

/* Cart table layout */
.ph-cart-small-box .table,
.ph-cart-small-box table {
    width: 100%;
    border-collapse: collapse;
}

.ph-cart-small-box th {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.ph-cart-small-box td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Cart item image */
.ph-mod-cart-image img,
.ph-img-cart-cart {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* Cart item title */
.ph-cart-small-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-heading);
}

.ph-cart-small-title a {
    color: var(--color-heading);
    text-decoration: none;
}

.ph-cart-small-title a:hover {
    color: var(--color-primary);
}

/* Cart item attributes */
.ph-cart-small-attribute,
.ph-cart-attribute-box {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.ph-cart-attribute-item {
    display: inline;
}

/* Cart quantity input */
.ph-cart-small-quantity input[type="number"],
.ph-cart-small-quantity .ph-input-quantity {
    width: 4rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
}

.ph-cart-small-quantity input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Cart item price */
.ph-cart-small-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    white-space: nowrap;
}

/* Cart remove button */
.ph-cart-small-box .ph-btn-remove,
.ph-cart-small-box [class*="delete"],
.ph-cart-small-box [class*="remove"] {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.ph-cart-small-box .ph-btn-remove:hover,
.ph-cart-small-box [class*="delete"]:hover,
.ph-cart-small-box [class*="remove"]:hover {
    color: var(--color-danger);
}

/* Cart attributes list in module */
.ph-cart-cart-row-attributes {
    margin-top: var(--space-xs);
}

/* Cart coupon input */
.ph-cart-coupon-box {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-md) 0;
}

.ph-cart-coupon-box input[type="text"] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
}

.ph-cart-coupon-box input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Cart currency & rounding */
.ph-cart-cart-row-currency-box,
.ph-cart-cart-row-currency-rounding-box {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================
   15. Account & Orders
   ============================================ */

#ph-pc-account-box {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* Account section structure (reuses checkout pattern). 1.16.2: same radius
   + same single-surface header treatment as checkout for consistency. */
.ph-account-box-row {
    margin-bottom: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.ph-account-box-header,
.ph-account-box-header-pas {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: 0 !important;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}

.ph-account-box-header-pas {
    color: var(--color-text-muted);
    border-bottom-color: transparent;
}

.ph-account-box-action {
    padding: var(--space-lg);
}

/* Account address forms */
.ph-account-billing-row,
.ph-account-shipping-row {
    padding: var(--space-lg);
}

.ph-account-check-box {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.ph-account-address-save {
    margin-top: var(--space-md);
}

/* Account form inputs */
#ph-pc-account-box input[type="text"],
#ph-pc-account-box input[type="email"],
#ph-pc-account-box input[type="tel"],
#ph-pc-account-box input[type="password"],
#ph-pc-account-box select,
#ph-pc-account-box textarea,
#ph-pc-account-box .form-control {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
}

#ph-pc-account-box input:focus,
#ph-pc-account-box select:focus,
#ph-pc-account-box textarea:focus,
#ph-pc-account-box .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

/* Account buttons */
#ph-pc-account-box .ph-btn,
#ph-pc-account-box .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

#ph-pc-account-box .ph-btn:hover,
#ph-pc-account-box .btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Orders list */
.ph-orders-item-box-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.ph-orders-item-box-row:hover {
    background: var(--color-surface-alt);
}

.ph-orders-item-box-row:last-child {
    border-bottom: none;
}

/* Orders table */
#ph-pc-account-box .table,
#ph-pc-account-box table {
    width: 100%;
    border-collapse: collapse;
}

#ph-pc-account-box th {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-surface-alt);
}

#ph-pc-account-box td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Order status badges */
.ph-order-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
}

/* ============================================
   16. Search
   ============================================ */

.ph-search-box,
.phSearchBox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    max-width: 480px;
}

/* Živé hľadanie (plg_system_wplivesearch) pripája zoznam výsledkov ako súrodenca
   vstupu. V pružnom riadku si sadol VEDĽA neho a keďže riadok centruje na výšku,
   vstup sa zosunul do polovice panela. Necháme ho zalomiť na vlastný riadok
   v plnej šírke – vstup tak ostane hore a výsledky pod ním. */
.ph-search-box > .wpls-results,
.phSearchBox > .wpls-results {
    flex: 0 0 100%;
    width: 100%;
}

.phSearchBoxSearchInput,
.ph-search-box input[type="text"],
.ph-search-box input[type="search"] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
}

.phSearchBoxSearchInput:focus,
.ph-search-box input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.ph-search-box .ph-btn,
.phSearchBox .ph-btn,
.ph-search-box button,
.phSearchBox button {
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ph-search-box .ph-btn:hover,
.phSearchBox .ph-btn:hover,
.ph-search-box button:hover,
.phSearchBox button:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Search radio filters */
.ph-radio-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
}

.ph-radio-container label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

.ph-radio-container input[type="radio"] {
    accent-color: var(--color-primary);
}

/* ============================================
   17. Success / Messages
   ============================================ */

.ph-msg-success-box {
    padding: var(--space-lg);
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--card-radius);
    color: var(--color-success);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* ============================================
   18. Phoca Cart Utility Classes
   ============================================ */

.ph-right {
    text-align: right;
}

.ph-small {
    font-size: var(--font-size-sm);
}

.ph-netto,
.ph-brutto,
.ph-tax {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.ph-box-header {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

/* ============================================
   19. Checkout & Cart Responsive
   ============================================ */

@media (min-width: 768px) {
    /* (Removed in 1.16.2) — the grid rule on .ph-checkout-box-address split
       the whole step (header + form) into two columns, leaving the heading
       in a narrow left half and the form crammed into the right half, which
       then re-split billing/shipping into ~25%-wide columns. The correct
       grid is applied to .ph-checkout-box-action only (see post-1.15.1
       block near the end of this file) so the header spans full width and
       billing/shipping share 50/50 underneath. */

    .ph-orders-item-box-row {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        align-items: center;
    }
}

@media (max-width: 767px) {
    .ph-checkout-box-header,
    .ph-checkout-box-header-pas,
    .ph-account-box-header,
    .ph-account-box-header-pas {
        font-size: var(--font-size-base);
        padding: var(--space-md);
    }

    .ph-checkout-box-action,
    .ph-checkout-billing-row,
    .ph-checkout-shipping-row,
    .ph-checkout-shipping-items-box,
    .ph-checkout-payment-items-box,
    .ph-checkout-cart-box,
    .ph-account-billing-row,
    .ph-account-shipping-row,
    .ph-account-box-action {
        padding: var(--space-md);
    }

    .ph-checkout-shipping-item,
    .ph-checkout-payment-item {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .ph-cart-small-box .table,
    .ph-cart-small-box table,
    #ph-pc-account-box .table,
    #ph-pc-account-box table {
        font-size: var(--font-size-sm);
    }

    .ph-cart-small-box th,
    .ph-cart-small-box td,
    #ph-pc-account-box th,
    #ph-pc-account-box td {
        padding: var(--space-sm);
    }

    .ph-search-box,
    .phSearchBox {
        flex-direction: column;
        /* v stĺpci centruje align-items VODOROVNE – vstup potom stál úzky
           uprostred, kým výsledky pod ním boli cez celú šírku */
        align-items: stretch;
        max-width: 100%;
    }

    .phSearchBoxSearchInput,
    .ph-search-box input {
        width: 100%;
    }
}

/* ============================================
   20. Wishlist
   ============================================ */

.ph-wishlist-box {
    font-family: var(--font-body);
}

/* Wishlist uses same product grid or table layout */
.ph-wishlist-box .row,
.ph-wishlist-items .row {
    display: grid !important;
    grid-template-columns: repeat(var(--product-columns, 3), 1fr);
    gap: var(--card-gap);
    float: none;
}

.ph-wishlist-box [class*="col-xs"],
.ph-wishlist-box [class*="col-sm"],
.ph-wishlist-box [class*="col-md"],
.ph-wishlist-items [class*="col-"] {
    width: 100%;
    float: none;
    padding: 0;
    max-width: none;
    flex: none;
}

/* Wishlist table view */
.ph-wishlist-box .table,
.ph-wishlist-box table {
    width: 100%;
    border-collapse: collapse;
}

.ph-wishlist-box th {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
}

.ph-wishlist-box td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Wishlist remove button */
.ph-wishlist-box .ph-btn-remove,
.ph-wishlist-box [class*="delete"],
.ph-wishlist-box [class*="remove"] {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.ph-wishlist-box .ph-btn-remove:hover,
.ph-wishlist-box [class*="delete"]:hover,
.ph-wishlist-box [class*="remove"]:hover {
    color: var(--color-danger);
}

/* Wishlist icon active state */
.ph-wishlist-active,
.ph-icon-wishlist-active {
    color: var(--color-danger);
}

@media (max-width: 767px) {
    .ph-wishlist-box .row,
    .ph-wishlist-items .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .ph-wishlist-box .row,
    .ph-wishlist-items .row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   21. Compare
   ============================================ */

.ph-compare-box {
    font-family: var(--font-body);
    overflow-x: auto;
}

.ph-compare-box .table,
.ph-compare-box table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.ph-compare-box th {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-surface-alt);
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 140px;
}

.ph-compare-box td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    text-align: center;
    min-width: 200px;
}

.ph-compare-box img {
    max-width: 150px;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 0 auto;
}

.ph-compare-box .ph-price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

/* Compare icon active state */
.ph-compare-active,
.ph-icon-compare-active {
    color: var(--color-accent);
}

/* Compare remove button */
.ph-compare-box .ph-btn-remove,
.ph-compare-box [class*="delete"],
.ph-compare-box [class*="remove"] {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.ph-compare-box .ph-btn-remove:hover,
.ph-compare-box [class*="delete"]:hover,
.ph-compare-box [class*="remove"]:hover {
    color: var(--color-danger);
}

/* ============================================
   22. Category Module
   ============================================ */

.es-category-module {
    font-family: var(--font-body);
}

/* Category tree list (simple_layout=1) */
.es-category-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.es-category-tree > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--card-gap);
}

.es-category-tree > ul > li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.es-category-tree > ul > li:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.es-category-tree > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--color-heading);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-align: center;
    gap: var(--space-sm);
}

.es-category-tree > ul > li > a:hover {
    color: var(--color-primary);
}

.es-category-tree > ul > li > a img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Subcategories inside category tree */
.es-category-tree > ul > li > ul {
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.es-category-tree > ul > li > ul > li > a {
    display: block;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.es-category-tree > ul > li > ul > li > a:hover {
    color: var(--color-primary);
}

/* jsTree override (simple_layout=0) */
.es-category-tree .jstree-default .jstree-anchor {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

.es-category-tree .jstree-default .jstree-anchor:hover,
.es-category-tree .jstree-default .jstree-hovered {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}

.es-category-tree .jstree-default .jstree-clicked {
    background: var(--color-surface-alt);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Sidebar category list (when inside sidebar) */
.es-sidebar .es-category-tree > ul {
    grid-template-columns: 1fr;
    gap: 0;
}

.es-sidebar .es-category-tree > ul > li {
    border-radius: 0;
    border-bottom: none;
}

.es-sidebar .es-category-tree > ul > li:first-child {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.es-sidebar .es-category-tree > ul > li:last-child {
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    border-bottom: 1px solid var(--color-border);
}

.es-sidebar .es-category-tree > ul > li > a {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-md);
    font-size: var(--font-size-sm);
}

.es-sidebar .es-category-tree > ul > li > a img {
    width: 40px;
    height: 40px;
}

.es-sidebar .es-category-tree > ul > li:hover {
    transform: none;
}

/* ============================================
   23. Filter Module (Sidebar)
   ============================================ */

.es-filter {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
}

/* Filter group panels */
.es-filter .panel,
.es-filter .ph-filter-panel,
.es-filter .accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    background: var(--color-surface);
}

.es-filter .panel-heading,
.es-filter .ph-filter-header,
.es-filter .accordion-header {
    padding: 0;
}

/* Phoca Cart filter panel-title has TWO <a> children: icon toggle + label */
.es-filter .panel-title {
    display: flex;
    align-items: center;
    margin: 0;
}

.es-filter .panel-title a,
.es-filter .ph-filter-header a,
.es-filter .accordion-button {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    background: var(--color-surface-alt);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.es-filter .ph-filter-header a,
.es-filter .accordion-button {
    justify-content: space-between;
    width: 100%;
}

/* Icon toggle (first <a>) — compact, no padding-right */
.es-filter .panel-title a:first-child {
    padding-right: 0;
    flex-shrink: 0;
}

/* Label link (second <a>) — takes remaining space */
.es-filter .panel-title a:last-child {
    flex: 1;
    padding-left: var(--space-sm);
}

/* SVG toggle icon */
.es-filter .panel-title a svg,
.es-filter .panel-title a .pc-si {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Rotate icon when collapsed */
.es-filter .panel-title a.collapsed svg,
.es-filter .panel-title a.collapsed .pc-si {
    transform: rotate(-90deg);
}

.es-filter .panel-title a:hover,
.es-filter .ph-filter-header a:hover,
.es-filter .accordion-button:hover {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}

.es-filter .panel-body,
.es-filter .ph-filter-body,
.es-filter .accordion-body {
    padding: var(--space-md);
}

/* Filter checkboxes & radio buttons */
.es-filter label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.es-filter label:hover {
    color: var(--color-heading);
}

.es-filter input[type="checkbox"],
.es-filter input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Filter count badge */
.es-filter .badge,
.es-filter .ph-filter-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Price range filter */
.es-filter .ph-filter-price-box {
    padding: var(--space-sm) 0;
}

/* Native range input */
.es-filter input[type="range"] {
    width: 100%;
    accent-color: var(--color-primary);
}

/* jQuery UI Slider (Phoca Cart price filter) — override jquery-ui.slider.min.css */
#phFilterBox .ui-slider.ui-widget.ui-widget-content {
    background: var(--color-border);
    border: none;
    border-radius: 3px;
    height: 6px;
    margin: var(--space-md) 0.5rem;
}

#phFilterBox .ui-slider .ui-slider-range {
    background: var(--color-primary);
    border-radius: 3px;
}

#phFilterBox .ui-slider .ui-slider-handle {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    top: -0.4rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    outline: none;
}

#phFilterBox .ui-slider .ui-slider-handle:hover,
#phFilterBox .ui-slider .ui-slider-handle:focus,
#phFilterBox .ui-slider .ui-slider-handle.ui-state-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(100, 13, 20, 0.15);
}

/* Price display text */
#phFilterBox #phPriceFilterPrice,
.es-filter #phPriceFilterPrice {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.es-filter .ph-filter-price-inputs {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-sm);
}

.es-filter .ph-filter-price-inputs input[type="text"],
.es-filter .ph-filter-price-inputs input[type="number"] {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    text-align: center;
}

.es-filter .ph-filter-price-inputs input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Color swatches filter */
.es-filter .ph-filter-color-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
}

.es-filter .ph-filter-color-box label {
    padding: 0;
}

.es-filter .ph-filter-color {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.es-filter .ph-filter-color:hover {
    transform: scale(1.15);
}

.es-filter .ph-filter-color.active,
.es-filter input:checked + .ph-filter-color {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

/* Image swatches filter */
.es-filter .ph-filter-image-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.es-filter .ph-filter-image {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    object-fit: cover;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.es-filter .ph-filter-image:hover,
.es-filter .ph-filter-image.active {
    border-color: var(--color-primary);
}

/* Filter buttons — small, ghost style */
.es-filter .ph-btn,
.es-filter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.es-filter .ph-btn:hover,
.es-filter .btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-heading);
    border-color: var(--color-text-muted);
}

/* Override Bootstrap btn-success / btn-danger in filter */
.es-filter .btn-success,
.es-filter .btn-danger {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.es-filter .btn-success:hover {
    background: var(--color-success, #2C4C3B);
    color: var(--color-white);
    border-color: var(--color-success, #2C4C3B);
}

.es-filter .btn-danger:hover {
    background: var(--color-danger, #8a1c25);
    color: var(--color-white);
    border-color: var(--color-danger, #8a1c25);
}

/* Price slider button row — inline */
.es-filter .btn-group {
    display: inline-flex;
    gap: 0.25rem;
}

/* Active filters tags */
.es-filter .ph-filter-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.es-filter .ph-filter-active-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text);
}

.es-filter .ph-filter-active-tag a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.es-filter .ph-filter-active-tag a:hover {
    color: var(--color-danger);
}

/* ============================================
   24. Product Module
   ============================================ */

.ph-product-module-box {
    font-family: var(--font-body);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--card-gap);
}

/* Module class suffixes for explicit column counts
   Use in Joomla: Module → Advanced → Module Class Suffix → " columns-4" */
.ph-product-module-box.columns-2 { grid-template-columns: repeat(2, 1fr); }
.ph-product-module-box.columns-3 { grid-template-columns: repeat(3, 1fr); }
.ph-product-module-box.columns-4 { grid-template-columns: repeat(4, 1fr); }
.ph-product-module-box.columns-5 { grid-template-columns: repeat(5, 1fr); }
.ph-product-module-box.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Tablet - max 3 columns */
@media (max-width: 1023px) {
    .ph-product-module-box,
    .ph-product-module-box.columns-4,
    .ph-product-module-box.columns-5,
    .ph-product-module-box.columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small tablet - max 2 columns */
@media (max-width: 767px) {
    .ph-product-module-box,
    .ph-product-module-box.columns-3,
    .ph-product-module-box.columns-4,
    .ph-product-module-box.columns-5,
    .ph-product-module-box.columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - single column */
@media (max-width: 479px) {
    .ph-product-module-box,
    .ph-product-module-box.columns-2,
    .ph-product-module-box.columns-3,
    .ph-product-module-box.columns-4,
    .ph-product-module-box.columns-5,
    .ph-product-module-box.columns-6 {
        grid-template-columns: 1fr;
    }
}

/* Module description (above grid) - span full width */
.ph-product-module-box .ph-mod-desc {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
}

.ph-product-module-box .ph-item-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.ph-product-module-box .ph-item-box:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.ph-product-module-box .ph-thumbnail {
    overflow: hidden;
    background: var(--color-gray-100);
}

.ph-product-module-box .ph-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
}

.ph-product-module-box .ph-item-box:hover .ph-thumbnail img {
    transform: scale(1.03);
}

/* Unified content wrapper — same padding + typography across both modules */
.ph-product-module-box .ph-item-content,
.ph-product-scroller-module-box .ph-item-content,
.phProductScrollerModuleBox .ph-item-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.ph-product-module-box .ph-item-content h3,
.ph-product-module-box .ph-item-content h4,
.ph-product-scroller-module-box .ph-item-content h3,
.ph-product-scroller-module-box .ph-item-content h4,
.phProductScrollerModuleBox .ph-item-content h3,
.phProductScrollerModuleBox .ph-item-content h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin: 0;
}

.ph-product-module-box .ph-item-content a,
.ph-product-scroller-module-box .ph-item-content a,
.phProductScrollerModuleBox .ph-item-content a {
    color: var(--color-heading);
    text-decoration: none;
}

.ph-product-module-box .ph-item-content a:hover,
.ph-product-scroller-module-box .ph-item-content a:hover,
.phProductScrollerModuleBox .ph-item-content a:hover {
    color: var(--color-primary);
}

.ph-product-module-box .ph-item-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

/* ============================================
   25. Product Scroller / Brands (Swiper)
   ============================================ */

.ph-product-scroller-module-box,
.phProductScrollerModuleBox,
.ph-brands-module-box,
.phBrandsModuleBox {
    font-family: var(--font-body);
    position: relative;
}

/* Swiper slide items */
.ph-product-scroller-module-box .swiper-slide .ph-item-box,
.phProductScrollerModuleBox .swiper-slide .ph-item-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
}

.ph-product-scroller-module-box .swiper-slide .ph-item-box:hover,
.phProductScrollerModuleBox .swiper-slide .ph-item-box:hover {
    box-shadow: var(--card-shadow-hover);
}

.ph-product-scroller-module-box .ph-thumbnail,
.phProductScrollerModuleBox .ph-thumbnail {
    overflow: hidden;
    background: var(--color-gray-100);
}

.ph-product-scroller-module-box .ph-thumbnail img,
.phProductScrollerModuleBox .ph-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* (content + title + link styling is unified above in the .ph-product-module-box
   rule that targets both classic and scroller modules) */

/* Brands carousel */
.ph-brands-module-box .swiper-slide,
.phBrandsModuleBox .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.ph-brands-module-box .ph-brand-name,
.phBrandsModuleBox .ph-brand-name {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-brands-module-box .ph-brand-name img,
.phBrandsModuleBox .ph-brand-name img {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

.ph-brands-module-box .ph-brand-name:hover img,
.phBrandsModuleBox .ph-brand-name:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.ph-brands-module-box .ph-brand-name a,
.phBrandsModuleBox .ph-brand-name a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.ph-brands-module-box .ph-brand-name a:hover,
.phBrandsModuleBox .ph-brand-name a:hover {
    color: var(--color-heading);
}

/* Swiper navigation - shared styling */
.ph-product-scroller-module-box .swiper-button-prev,
.ph-product-scroller-module-box .swiper-button-next,
.phProductScrollerModuleBox .swiper-button-prev,
.phProductScrollerModuleBox .swiper-button-next,
.ph-brands-module-box .swiper-button-prev,
.ph-brands-module-box .swiper-button-next,
.phBrandsModuleBox .swiper-button-prev,
.phBrandsModuleBox .swiper-button-next {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--card-shadow);
    color: var(--color-heading);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ph-product-scroller-module-box .swiper-button-prev:hover,
.ph-product-scroller-module-box .swiper-button-next:hover,
.phProductScrollerModuleBox .swiper-button-prev:hover,
.phProductScrollerModuleBox .swiper-button-next:hover,
.ph-brands-module-box .swiper-button-prev:hover,
.ph-brands-module-box .swiper-button-next:hover,
.phBrandsModuleBox .swiper-button-prev:hover,
.phBrandsModuleBox .swiper-button-next:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.ph-product-scroller-module-box .swiper-button-prev::after,
.ph-product-scroller-module-box .swiper-button-next::after,
.phProductScrollerModuleBox .swiper-button-prev::after,
.phProductScrollerModuleBox .swiper-button-next::after,
.ph-brands-module-box .swiper-button-prev::after,
.ph-brands-module-box .swiper-button-next::after,
.phBrandsModuleBox .swiper-button-prev::after,
.phBrandsModuleBox .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}

/* Swiper pagination dots */
.ph-product-scroller-module-box .swiper-pagination-bullet,
.phProductScrollerModuleBox .swiper-pagination-bullet,
.ph-brands-module-box .swiper-pagination-bullet,
.phBrandsModuleBox .swiper-pagination-bullet {
    background: var(--color-gray-300);
    opacity: 1;
}

.ph-product-scroller-module-box .swiper-pagination-bullet-active,
.phProductScrollerModuleBox .swiper-pagination-bullet-active,
.ph-brands-module-box .swiper-pagination-bullet-active,
.phBrandsModuleBox .swiper-pagination-bullet-active {
    background: var(--color-primary);
}


/* ===================================================================
   ITEM DETAIL — Quick Facts
   =================================================================== */

.es-quick-facts {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
}

.es-quick-facts__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted, #888);
    margin: 0 0 0.75rem;
}

.es-quick-facts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem 1.25rem;
    margin: 0;
    padding: 0;
}

.es-quick-facts__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.es-quick-facts__item dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted, #888);
    margin: 0;
}

.es-quick-facts__item dd {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
    margin: 0;
}


/* ===================================================================
   ITEM DETAIL — Sensory Profile
   =================================================================== */

.es-sensory-profile {
    padding: 3rem 0 3.5rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
    border-bottom: 1px solid var(--color-border, #e5e5e5);
    margin-top: 0.5rem;
}

.es-sensory-profile__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted, #888);
    margin: 0 0 2rem;
    text-align: center;
}

.es-sensory-profile__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}

.es-sensory-card {
    text-align: center;
    padding: 2rem 1.25rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--card-radius, 6px);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.es-sensory-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.es-sensory-card__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--color-sensory-icon-bg, var(--color-surface-alt, #f5f0eb));
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-sensory-card__icon::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: currentColor;
    -webkit-mask: var(--sensory-icon) no-repeat center / contain;
    mask: var(--sensory-icon) no-repeat center / contain;
}

/* Default icons per sensory type (Lucide-style line icons) */
.es-sensory-card[data-sensory="aroma"]     { --sensory-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.8 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10-1 0-2-.2-2-.2'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>"); }
.es-sensory-card[data-sensory="taste"]     { --sensory-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M8 22h8'/><path d='M7 10h10'/><path d='M12 15v7'/><path d='M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5z'/></svg>"); }
.es-sensory-card[data-sensory="colour"]    { --sensory-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.69l5.66 5.66a8 8 0 1 1 -11.31 0z'/></svg>"); }
.es-sensory-card[data-sensory="character"] { --sensory-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.5 5.5L20 10l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-1.5z'/></svg>"); }

.es-sensory-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted, #888);
    margin: 0 0 0.5rem;
}

.es-sensory-card__value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
    margin: 0;
    line-height: 1.5;
}

/* Responsive: 2 cols on small screens */
@media (max-width: 767px) {
    .es-sensory-profile {
        padding: 2rem 0 2.5rem;
    }
    .es-sensory-profile__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .es-sensory-card__icon {
        width: 3.5rem;
        height: 3.5rem;
    }
    .es-sensory-card__icon::after {
        font-size: 1.5rem;
    }
}

@media (max-width: 479px) {
    .es-quick-facts__grid {
        grid-template-columns: 1fr;
    }
    .es-sensory-profile__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Category box module (mod_phocacart_category box layout)
   Override renders category cards with large imagery.
   Desktop: grid 4–5 columns. Tablet+: horizontal scroll-snap slider.
   ============================================================ */

.es-cat-grid {
    --es-cat-card-min: 220px;
    /* Horný strop šírky karty. Bez neho `auto-fit` pri malom počte kategórií
       zruší prázdne stĺpce a zvyšné karty roztiahne cez celú šírku stránky —
       dve kategórie na širokom monitore vyzerali ako dva plagáty. */
    --es-cat-card-max: 300px;
    --es-cat-card-gap: var(--space-md);
    padding: var(--space-md) 0;
}

.es-cat-grid__track {
    padding: 0;
    margin: 0;
}

/* Počet stĺpcov: predvolene sa dopočíta z šírky karty (auto-fit). Keď má Phoca
   Cart nastavený počet stĺpcov (`columns_subcat_cat`, resp. `columns_cats`),
   override ho pošle v premenných priamo na element — vtedy sa dodrží presne
   a karty sa rozdelia rovnomerne (`minmax(0, 1fr)` namiesto stropu šírky).
   Bez toho bolo to nastavenie v administrácii tichý klam: dalo sa zmeniť
   a mriežka si aj tak počítala stĺpce po svojom. */
.es-cat-grid__track ul {
    display: grid;
    grid-template-columns: repeat(
        var(--es-cat-cols, auto-fit),
        minmax(var(--es-cat-track-min, var(--es-cat-card-min)), var(--es-cat-track-max, var(--es-cat-card-max)))
    );
    /* Karty majú strop, takže pri malom počte zostane voľné miesto po bokoch —
       vycentrovaním sedia pod vycentrovaným nadpisom sekcie. */
    justify-content: center;
    gap: var(--es-cat-card-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Na užšom okne by sa šesť stĺpcov stlačilo na nečitateľné prúžky — override
   posiela aj zmenšený počet pre tento rozsah. Pod 900 px preberá vodorovný
   posuvník nižšie, tam počet stĺpcov zmysel nemá. */
@media (max-width: 1200px) {
    .es-cat-grid__track ul {
        grid-template-columns: repeat(
            var(--es-cat-cols-md, var(--es-cat-cols, auto-fit)),
            minmax(var(--es-cat-track-min, var(--es-cat-card-min)), var(--es-cat-track-max, var(--es-cat-card-max)))
        );
    }
}

.es-cat-grid__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.es-cat-grid__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
    transition: transform 0.2s ease;
}

.es-cat-grid__link:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--color-text);
}

/* Rám obrázka kategórie.
   Pomer je premenná, aby sa dal na konkrétnom webe zladiť s rozmerom náhľadov
   z Phoca nastavení (napr. `--es-cat-image-ratio: 11 / 10` pri náhľadoch
   330×300) bez zásahu do šablóny. Podklad je rovnaký ako povrch karty —
   náhľady sa generujú s bielou výplňou, takže na sivom podklade by okolo
   obrázka svietil svetlý obdĺžnik. */
.es-cat-grid__image {
    position: relative;
    aspect-ratio: var(--es-cat-image-ratio, 1 / 1);
    overflow: hidden;
    border-radius: var(--card-radius, 6px);
    background: var(--es-media-plate);
    border: 1px solid var(--color-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* `contain`, nie `cover`: náhľady sú pregenerované bez orezania a `cover` by
   ich v štvorcovom ráme orezal znova — teda presne to, čo sa v Phoca
   nastaveniach vypínalo. */
.es-cat-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.es-cat-grid__image--empty::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='0.3'><path d='M21 15V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4'/><polyline points='3 17 9 11 13 15'/><circle cx='18' cy='18' r='3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}

.es-cat-grid__link:hover .es-cat-grid__image {
    border-color: var(--color-primary);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.es-cat-grid__link:hover .es-cat-grid__image img {
    transform: scale(1.05);
}

.es-cat-grid__title {
    padding: 0 var(--space-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    text-align: center;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.es-cat-grid__link:hover .es-cat-grid__title {
    color: var(--color-primary);
}

.es-cat-grid__item.is-active .es-cat-grid__image {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(100, 13, 20, 0.12);
}

.es-cat-grid__item.is-active .es-cat-grid__title {
    color: var(--color-primary);
}

/* Horizontal scroll slider variant — auto-activates on medium screens.
   Use `moduleclass_sfx`=" es-cat-grid--scroll" to force slider at all sizes. */
@media (max-width: 900px) {
    .es-cat-grid__track ul {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-xs);
        margin: 0 calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        gap: var(--space-sm);
    }

    .es-cat-grid__track ul::-webkit-scrollbar {
        display: none;
    }

    .es-cat-grid__item {
        flex: 0 0 auto;
        width: calc(50% - var(--space-sm) / 2);
        scroll-snap-align: start;
    }
}

@media (max-width: 600px) {
    .es-cat-grid__item {
        width: 45%;   /* Peek next card on mobile */
    }
}

.es-cat-grid--scroll .es-cat-grid__track ul {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-sm);
    gap: var(--space-md);
}

.es-cat-grid--scroll .es-cat-grid__track ul::-webkit-scrollbar {
    display: none;
}

.es-cat-grid--scroll .es-cat-grid__item {
    flex: 0 0 calc((100% - 3 * var(--space-md)) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .es-cat-grid--scroll .es-cat-grid__item { flex-basis: calc((100% - 2 * var(--space-md)) / 3); }
}
@media (max-width: 800px) {
    .es-cat-grid--scroll .es-cat-grid__item { flex-basis: calc((100% - var(--space-md)) / 2); }
}
@media (max-width: 500px) {
    .es-cat-grid--scroll .es-cat-grid__item { flex-basis: 70%; }
}

/* --------------------------------------------------------------
   Catalog landing variant (added in 1.16.3)
   Used by html/com_phocacart/category/default_subcategories.php
   when the /eshop page lists its top-level categories. Bumps the
   card sizing and centers a serif heading above so the landing
   feels intentional, not like a sidebar widget.
   -------------------------------------------------------------- */
.es-cat-grid--catalog {
    --es-cat-card-min: 240px;
    --es-cat-card-max: 340px;
    --es-cat-card-gap: var(--space-lg);
    /* Hore len drobné odsadenie: mriežka ide hneď pod nadpis kategórie, ktorý
       už má vlastný spodný odstup — plus odsadenie .es-main nad ním. */
    padding: 0 0 var(--space-lg);
}

.es-cat-grid__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    text-align: center;
    margin: 0 0 var(--space-lg);
    position: relative;
    padding-bottom: var(--space-md);
}

.es-cat-grid__heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 3rem;
    height: 2px;
    background: var(--color-accent, var(--color-primary));
    border-radius: 9999px;
}

.es-cat-grid--catalog .es-cat-grid__image {
    border-radius: 0.75rem;
}

.es-cat-grid--catalog .es-cat-grid__title {
    font-size: var(--font-size-lg);
    margin-top: var(--space-xs);
}

/* On wide screens, lift cards slightly above the page background so the
   landing has the same visual rhythm as the homepage module. */
.es-cat-grid--catalog .es-cat-grid__link:hover .es-cat-grid__image {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .es-cat-grid--catalog .es-cat-grid__link:hover .es-cat-grid__image {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Improved Checkout Flow (tpleshop 1.15.0+)
   ========================================================================== */

/* Wider checkout view for 2-column layout */
.pc-checkout-view {
    max-width: 1200px;
    margin-inline: auto;
}

/* --- Progress indicator --- */
.pc-progress {
    margin-bottom: var(--space-2xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pc-progress::-webkit-scrollbar { display: none; }

.pc-progress__list {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: max-content;
}

.pc-progress__step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding: var(--space-md) var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.pc-progress__step + .pc-progress__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--space-sm);
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
}

.pc-progress__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pc-progress__step--active { color: var(--color-primary); }
.pc-progress__step--active .pc-progress__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.pc-progress__step--done { color: var(--color-text); }
.pc-progress__step--done .pc-progress__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0;
}
.pc-progress__step--done .pc-progress__num::before {
    content: "✓";
    font-size: var(--font-size-sm);
}

.pc-progress__step--done + .pc-progress__step::before,
.pc-progress__step--active + .pc-progress__step::before {
    background: var(--color-primary);
}

/* --- 2-column layout --- */
.pc-checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 1024px) {
    .pc-checkout-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }
}

.pc-checkout-main { min-width: 0; }

.pc-checkout-aside { position: relative; }

/* Súhrn objednávky (1.29.0): nadpis je prepínač so sumou. Desktop = obyčajný nadpis (bez sumy a šípky),
   mobil = blok hore pod krokmi (order:-1 v gride), rozbalený, dá sa zbaliť. Spodná lišta „Zobraziť súhrn“ zrušená –
   zákazníci ju nenachádzali a nevedeli zmeniť množstvo. */
.pc-summary-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
    pointer-events: none;
}

.pc-summary-toggle__label { flex: 1 1 auto; }

.pc-summary-toggle__total,
.pc-summary-toggle__chevron { display: none; }

@media (max-width: 1023.98px) {
    .pc-checkout-aside {
        display: block;
        order: -1;
        position: static;
    }

    .pc-checkout-aside__inner { padding: var(--space-md) var(--space-lg); }

    .pc-checkout-aside__title {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .pc-summary-toggle {
        cursor: pointer;
        pointer-events: auto;
    }

    .pc-summary-toggle__total {
        display: block;
        color: var(--color-primary);
        white-space: nowrap;
    }

    .pc-summary-toggle__chevron {
        display: block;
        flex: none;
        transition: transform 0.2s ease;
    }

    .pc-summary-toggle[aria-expanded="false"] .pc-summary-toggle__chevron { transform: rotate(-90deg); }

    .pc-summary-body {
        margin-top: var(--space-md);
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-border);
    }

    .pc-checkout-aside.pc-summary-collapsed .pc-summary-body { display: none; }
}

/* Košík v pokladni: množstvo cez stepper −/+ (1.29.1, layout cart_checkout.php) */
.ph-checkout-cart-box .es-qty--cart {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
    background: var(--color-surface);
}

.ph-checkout-cart-box .es-qty--cart .es-qty__btn {
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-text);
}

.ph-checkout-cart-box .es-qty--cart .es-qty__btn:hover {
    background: var(--color-primary-light, rgba(0, 0, 0, 0.06));
    color: var(--color-primary);
}

#ph-pc-checkout-box .ph-checkout-cart-box .es-qty--cart .es-qty__input {
    width: 2.6rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    text-align: center;
    font-weight: var(--font-weight-semibold);
    -moz-appearance: textfield;
    appearance: textfield;
}

#ph-pc-checkout-box .ph-checkout-cart-quantity .input-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-xs);
    width: auto;
}

/* s JS sa množstvo ukladá samo – tlačidlo „obnoviť“ len bez JS */
#ph-pc-checkout-box.pc-js .phItemCartUpdateBoxForm button[value="update"] { display: none !important; }

.ph-checkout-cart-box.pc-saving { opacity: 0.6; pointer-events: none; }

/* Krátke stlmenie sekcie počas ukladania dopravy/platby na pozadí */
.pc-checkout-section.pc-saving { opacity: 0.6; pointer-events: none; }

@media (min-width: 1024px) {
    .pc-checkout-aside {
        position: sticky;
        top: var(--space-xl);
        align-self: start;
    }
}

.pc-checkout-aside__inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.pc-checkout-aside__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
}

.pc-checkout-aside .phCheckoutCartBox {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

/* --- Coupon expandable --- */
.pc-coupon-toggle {
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.pc-coupon-toggle > summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.pc-coupon-toggle > summary::-webkit-details-marker { display: none; }

.pc-coupon-toggle > summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.pc-coupon-toggle[open] > summary::before { content: "−"; }

.pc-coupon-toggle[open] {
    background: var(--color-surface);
    border-style: solid;
}

.pc-coupon-toggle .ph-checkout-box-apply-coupon { margin-top: var(--space-md); }

.pc-checkout-section { margin-bottom: var(--space-md); }

/* --- Login: guest-first reorder --- */
.ph-checkout-box-login .ph-checkout-box-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.ph-checkout-box-login .ph-right-border,
.ph-checkout-box-login .ph-left-border {
    border: 0 !important;
    padding: 0 !important;
    flex: 1 1 280px;
    min-width: 0;
}

/* Guest section visually primary */
.ph-checkout-box-login .ph-left-border {
    order: -1;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)) !important;
    border-radius: var(--radius-md);
    padding: var(--space-lg) !important;
    flex: 1 1 100%;
}

.ph-checkout-box-login .ph-left-border .ph-box-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.ph-checkout-box-login .ph-checkout-btn-login {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ph-checkout-box-login .ph-checkout-btn-login:hover {
    background: var(--color-primary-hover);
}

/* Login form de-emphasized */
.ph-checkout-box-login .ph-right-border {
    flex: 1 1 100%;
    padding: var(--space-md) 0 0 !important;
    border-top: 1px solid var(--color-border) !important;
}

/* --- Shipping / Payment: enhance existing cards with :has(checked) highlight --- */
.ph-checkout-shipping-item:has(input[type="radio"]:checked),
.ph-checkout-payment-item:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Make shipping/payment items into a 2-col grid when there's room */
@media (min-width: 640px) {
    .ph-checkout-shipping-items-box,
    .ph-checkout-payment-items-box {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Trust signals --- */
.pc-trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.pc-trust-signals__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.pc-trust-signals__item svg {
    color: var(--color-success);
    flex-shrink: 0;
}

/* --- Mobile sticky CTA (1.28 a staršie) --- odstránená v 1.29.0, súhrn je hore pod krokmi (.pc-summary-*) */

/* --- Inline validation --- */
.pc-field-error {
    display: block;
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

#ph-pc-checkout-box input.pc-invalid,
#ph-pc-checkout-box select.pc-invalid,
#ph-pc-checkout-box textarea.pc-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 10%, transparent);
}

/* --- Loading state --- */
.pc-loading {
    position: relative;
    pointer-events: none;
}

.pc-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    border-radius: inherit;
    z-index: 1;
}

.pc-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pc-spin 0.7s linear infinite;
    z-index: 2;
}

@keyframes pc-spin { to { transform: rotate(360deg); } }

/* --- Confirm checkboxes --- */
.ph-checkout-confirm-box-row-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.ph-checkout-checkbox-confirm {
    display: flex !important;
    align-items: flex-start;
    gap: var(--space-sm);
    float: none !important;
    font-size: var(--font-size-sm);
}

.ph-checkout-checkbox-confirm input[type="checkbox"] {
    margin-top: 0.25em;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* Hide Phoca's built-in step icons - we use our own progress bar */
#ph-pc-checkout-box .ph-checkout-icon-spec-box,
#ph-pc-checkout-box .ph-checkout-icon-spec-finished,
#ph-pc-checkout-box .ph-checkout-icon-spec-pending {
    display: none;
}

/* ==========================================================================
   Account, Orders & Order detail (tpleshop 1.15.0+)
   ========================================================================== */

/* Shared page container */
.pc-account-view,
.pc-orders-view,
.pc-order-view {
    max-width: 1100px;
    margin-inline: auto;
}

/* --- Section card style (shared) --- */
#ph-pc-account-box .ph-account-box-row,
#ph-pc-orders-box .ph-orders-header-box-row,
#ph-pc-orders-box .ph-orders-item-box-row {
    margin-bottom: var(--space-md);
}

#ph-pc-account-box .ph-account-box-header,
#ph-pc-account-box .ph-account-box-header-pas {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-md);
}

#ph-pc-account-box .ph-account-box-header h3,
#ph-pc-account-box .ph-account-box-header-pas h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin: 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

#ph-pc-account-box .ph-account-box-action {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

/* Billing + Shipping address two-column on desktop */
@media (min-width: 768px) {
    #ph-pc-account-box .ph-account-box-action {
        grid-template-columns: 1fr 1fr;
    }
    #ph-pc-account-box .ph-account-check-box,
    #ph-pc-account-box .ph-account-address-save,
    #ph-pc-account-box [class*="col.xs12.sm12.md12"] {
        grid-column: 1 / -1;
    }
}

#ph-pc-account-box .ph-account-billing-row,
#ph-pc-account-box .ph-account-shipping-row {
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

#ph-pc-account-box .ph-account-billing-row .ph-box-header,
#ph-pc-account-box .ph-account-shipping-row .ph-box-header {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

/* Form fields inside account view */
#ph-pc-account-box input[type="text"],
#ph-pc-account-box input[type="email"],
#ph-pc-account-box input[type="tel"],
#ph-pc-account-box select,
#ph-pc-account-box textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#ph-pc-account-box input:focus,
#ph-pc-account-box select:focus,
#ph-pc-account-box textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

#ph-pc-account-box label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

#ph-pc-account-box .ph-account-check-box {
    display: flex;
    justify-content: flex-end;
}

#ph-pc-account-box .ph-account-check-box label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

#ph-pc-account-box .ph-account-address-save,
#ph-pc-account-box .ph-account-address-save .ph-btn,
#ph-pc-account-box .ph-account-address-save button {
    display: inline-flex;
}

#ph-pc-account-box .ph-account-address-save {
    justify-content: flex-end;
}

#ph-pc-account-box .ph-account-address-save .ph-btn,
#ph-pc-account-box .ph-account-address-save button {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.625rem 1.5rem;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    align-items: center;
    gap: var(--space-sm);
}

#ph-pc-account-box .ph-account-address-save .ph-btn:hover,
#ph-pc-account-box .ph-account-address-save button:hover {
    background: var(--color-primary-hover);
}

/* Reward points info (always before address) */
#ph-pc-account-box #phaccountrewardpoints + .ph-account-box-action,
#ph-pc-account-box [id*="rewardpoints"] {
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
}

/* Profile / edit links area */
#ph-pc-account-box .ph-account-profile-box,
#ph-pc-account-box .ph-account-profile-edit-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* --- Orders list (#ph-pc-orders-box) --- */
#ph-pc-orders-box .ph-orders-header-box-row {
    display: none; /* hide on mobile, show as table head on desktop */
}

@media (min-width: 768px) {
    #ph-pc-orders-box .ph-orders-header-box-row {
        display: grid;
        grid-template-columns: 1.5fr 1.5fr 2fr 1.5fr 2fr;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
        background: var(--color-surface-alt);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    #ph-pc-orders-box .ph-orders-header-box-row > div {
        padding: 0 !important;
    }
}

#ph-pc-orders-box .ph-orders-item-box-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-sm);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#ph-pc-orders-box .ph-orders-item-box-row:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    #ph-pc-orders-box .ph-orders-item-box-row {
        grid-template-columns: 1.5fr 1.5fr 2fr 1.5fr 2fr;
        align-items: center;
        gap: var(--space-md);
        border-radius: 0;
        margin-bottom: 0;
        border-top: 0;
    }

    #ph-pc-orders-box .ph-orders-item-box-row:first-of-type {
        border-radius: 0;
    }

    #ph-pc-orders-box .ph-orders-item-box-row:last-of-type {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    #ph-pc-orders-box .ph-orders-item-box-row > div {
        padding: 0 !important;
    }
}

/* Mobile: prepend labels via ::before on Phoca's bare divs is unreliable;
   instead just show stacked rows with subtle borders */
@media (max-width: 767.98px) {
    #ph-pc-orders-box .ph-orders-item-box-row > div {
        padding: var(--space-xs) 0 !important;
        border-bottom: 1px dashed var(--color-border);
    }
    #ph-pc-orders-box .ph-orders-item-box-row > div:last-child {
        border-bottom: 0;
        padding-top: var(--space-sm) !important;
    }
}

/* Status badges from PhocacartUtilsSettings::getOrderStatusBadge */
#ph-pc-orders-box .label,
#ph-pc-orders-box .badge,
#ph-pc-orders-box [class*="label-"],
#ph-pc-orders-box [class*="badge-"] {
    display: inline-block;
    padding: 0.25em 0.625em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1.4;
}

#ph-pc-orders-box .label-success,
#ph-pc-orders-box .badge-success {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

#ph-pc-orders-box .label-warning,
#ph-pc-orders-box .badge-warning {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

#ph-pc-orders-box .label-danger,
#ph-pc-orders-box .badge-danger {
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    color: var(--color-danger);
}

#ph-pc-orders-box .label-info,
#ph-pc-orders-box .badge-info {
    background: color-mix(in srgb, var(--color-info) 15%, transparent);
    color: var(--color-info);
}

/* Action buttons in orders */
#ph-pc-orders-box .ph-orders-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.4rem 0.75rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-decoration: none;
    margin-right: var(--space-xs);
    margin-bottom: var(--space-xs);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

#ph-pc-orders-box .ph-orders-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

#ph-pc-orders-box .ph-orders-btn .ph-icon-pdf-text {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    opacity: 0.7;
}

/* Order total cell */
#ph-pc-orders-box .ph-right {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    text-align: right;
}

/* Shipping tracking box inside orders */
#ph-pc-orders-box .ph-shipping-info-box {
    grid-column: 1 / -1;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
}

#ph-pc-orders-box .ph-shipping-info-header {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-xs);
}

#ph-pc-orders-box .ph-tracking-link a {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

/* Reward points row in orders */
#ph-pc-orders-box .approved {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
}

#ph-pc-orders-box .not-approved {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

/* --- Order detail (#ph-pc-order-box) --- */
#ph-pc-order-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

#ph-pc-order-box h2,
#ph-pc-order-box h3 {
    color: var(--color-heading);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

#ph-pc-order-box h2:first-child,
#ph-pc-order-box h3:first-child {
    margin-top: 0;
}

#ph-pc-order-box table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
}

#ph-pc-order-box th,
#ph-pc-order-box td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

#ph-pc-order-box th {
    background: var(--color-surface-alt);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs);
}

/* Empty state alerts */
#ph-pc-orders-box .alert-error,
#ph-pc-orders-box .alert-danger,
#ph-pc-account-box .alert-error,
#ph-pc-account-box .alert-danger {
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    color: var(--color-text);
    text-align: center;
}

/* ==========================================================================
   com_users (Joomla native: registration, login, profile, remind, reset)
   ========================================================================== */

.com-users-login,
.com-users-registration,
.com-users-profile,
.com-users-remind,
.com-users-reset,
.com-users-profile-edit,
.profile-edit {
    max-width: 600px;
    margin-inline: auto;
}

.com-users-profile,
.com-users-profile-edit {
    max-width: 900px;
}

.com-users-login .login,
.com-users-registration form,
.com-users-profile .profile,
.com-users-remind form,
.com-users-reset form,
.com-users-profile-edit form,
.profile-edit form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Fieldset: prehliadač mu sám kreslí sivý rám s výrezom na legendu. V karte šablóny to vyzerá
   ako tabuľka z roku 2005 zasadená do moderného boxu – a Joomla ho v registrácii vypisuje holý,
   bez triedy, takže sa naň nedá chytiť inak než cez `.com-users-*`. Legenda ostáva, len sa
   správa ako nadpis skupiny. (Robert to hlásil zo screenshotu registrácie, 23. 9. 2026.) */
.com-users-login fieldset,
.com-users-registration fieldset,
.com-users-profile fieldset,
.com-users-remind fieldset,
.com-users-reset fieldset,
.com-users-profile-edit fieldset,
.profile-edit fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;   /* fieldset má vlastné min-width, inak sa nezmestí na mobile */
}

.com-users-login fieldset > legend,
.com-users-registration fieldset > legend,
.com-users-profile fieldset > legend,
.com-users-remind fieldset > legend,
.com-users-reset fieldset > legend,
.com-users-profile-edit fieldset > legend,
.profile-edit fieldset > legend {
    float: none;
    width: auto;
    margin-bottom: var(--space-md);
    padding: 0;
    border: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

/* Meradlo sily hesla. Joomla doplní do `.password-group` natívny `<meter>` a `<output>`, oba
   bez triedy – a `<meter>` má predvolenú šírku 80 px, takže pod 474 px poľom visel krátky sivý
   pásik bez popisu a vyzeral ako artefakt, nie ako informácia (Robert zo screenshotu, 23. 9. 2026).
   Funguje pritom dobre: pri prázdnom poli 0, pri krátkom hesle 37,5 a „nespĺňa požiadavky",
   po dosiahnutí minima 100 a „heslo bolo prijaté". Preto ho neskrývame, ale dokreslíme.
   Pozor pri overovaní: Joomla počúva na skutočné klávesy, `fill()` meradlom nepohne. */
.password-group meter {
    display: block;
    width: 100%;
    height: .5rem;
    margin-top: .45rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-alt);
    appearance: none;
}

.password-group meter::-webkit-meter-bar {
    height: .5rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-alt);
}

.password-group meter::-webkit-meter-optimum-value,
.password-group meter::-webkit-meter-suboptimum-value,
.password-group meter::-webkit-meter-even-less-good-value {
    border-radius: 999px;
}

.password-group meter::-webkit-meter-optimum-value { background: var(--color-success, #2e7d32); }
.password-group meter::-webkit-meter-suboptimum-value { background: var(--color-warning, #d29200); }
.password-group meter::-webkit-meter-even-less-good-value { background: var(--color-danger, #c0392b); }

/* Firefox kreslí výplň jedným pseudoprvkom, stav sa číta zo psedotriedy na samotnom `meter` */
.password-group meter::-moz-meter-bar { border-radius: 999px; }
.password-group meter:-moz-meter-optimum::-moz-meter-bar { background: var(--color-success, #2e7d32); }
.password-group meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--color-warning, #d29200); }
.password-group meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-danger, #c0392b); }

.password-group output {
    display: block;
    margin-top: .25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Headings */
.com-users-login .page-header,
.com-users-registration .page-header,
.com-users-profile .page-header,
.com-users-remind .page-header,
.com-users-reset .page-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
}

.com-users-login h1,
.com-users-registration h1,
.com-users-profile h1,
.com-users-remind h1,
.com-users-reset h1,
.com-users-login .page-header h1,
.com-users-login .page-header h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin: 0;
}

/* Field rows */
.com-users-login .control-group,
.com-users-registration .control-group,
.com-users-profile .control-group,
.com-users-remind .control-group,
.com-users-reset .control-group,
.com-users-login .form-group,
.com-users-registration .form-group,
.com-users-profile .form-group,
.com-users-remind .form-group,
.com-users-reset .form-group {
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.com-users-login .control-label,
.com-users-registration .control-label,
.com-users-profile .control-label,
.com-users-remind .control-label,
.com-users-reset .control-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.com-users-login .control-label label,
.com-users-registration .control-label label,
.com-users-profile .control-label label,
.com-users-remind .control-label label,
.com-users-reset .control-label label {
    margin: 0;
}

/* required star */
.com-users-login .star,
.com-users-registration .star,
.com-users-profile .star,
.com-users-remind .star,
.com-users-reset .star {
    color: var(--color-danger);
    margin-left: 2px;
}

/* Inputs */
.com-users-login input[type="text"],
.com-users-login input[type="email"],
.com-users-login input[type="password"],
.com-users-registration input[type="text"],
.com-users-registration input[type="email"],
.com-users-registration input[type="password"],
.com-users-registration input[type="tel"],
.com-users-profile input[type="text"],
.com-users-profile input[type="email"],
.com-users-profile input[type="password"],
.com-users-profile input[type="tel"],
.com-users-remind input[type="text"],
.com-users-remind input[type="email"],
.com-users-reset input[type="text"],
.com-users-reset input[type="email"],
.com-users-reset input[type="password"],
.com-users-login select,
.com-users-registration select,
.com-users-profile select,
.com-users-login textarea,
.com-users-registration textarea,
.com-users-profile textarea,
.com-users-login .form-control,
.com-users-registration .form-control,
.com-users-profile .form-control,
.com-users-remind .form-control,
.com-users-reset .form-control,
.com-users-login .inputbox,
.com-users-registration .inputbox,
.com-users-profile .inputbox,
.com-users-remind .inputbox,
.com-users-reset .inputbox {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.com-users-login input:focus,
.com-users-registration input:focus,
.com-users-profile input:focus,
.com-users-remind input:focus,
.com-users-reset input:focus,
.com-users-login select:focus,
.com-users-registration select:focus,
.com-users-profile select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Buttons */
.com-users-login .btn-primary,
.com-users-registration .btn-primary,
.com-users-profile .btn-primary,
.com-users-remind .btn-primary,
.com-users-reset .btn-primary,
.com-users-login button[type="submit"],
.com-users-registration button[type="submit"],
.com-users-profile button[type="submit"],
.com-users-remind button[type="submit"],
.com-users-reset button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
}

.com-users-login .btn-primary:hover,
.com-users-registration .btn-primary:hover,
.com-users-profile .btn-primary:hover,
.com-users-remind .btn-primary:hover,
.com-users-reset .btn-primary:hover,
.com-users-login button[type="submit"]:hover,
.com-users-registration button[type="submit"]:hover {
    background: var(--color-primary-hover);
}

/* Form actions row */
.com-users-login .form-actions,
.com-users-registration .form-actions,
.com-users-profile .form-actions,
.com-users-remind .form-actions,
.com-users-reset .form-actions {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* Secondary helper links list under login form */
.com-users-login__lost-password,
.com-users-login__lost-username,
.com-users-login__register,
.com-users-login ul.nav,
.com-users-login__options {
    margin-top: var(--space-lg);
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: var(--font-size-sm);
}

.com-users-login__options li,
.com-users-login ul.nav li {
    margin: var(--space-xs) 0;
}

.com-users-login__options a,
.com-users-login ul.nav a,
.com-users-login__lost-password a,
.com-users-login__lost-username a,
.com-users-login__register a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.com-users-login__options a:hover,
.com-users-login ul.nav a:hover,
.com-users-login__lost-password a:hover,
.com-users-login__lost-username a:hover,
.com-users-login__register a:hover {
    text-decoration: underline;
}

/* Remember me */
.com-users-login__remember,
.com-users-login input[type="checkbox"] + label,
.com-users-registration input[type="checkbox"] + label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.com-users-login input[type="checkbox"],
.com-users-registration input[type="checkbox"] {
    accent-color: var(--color-primary);
}

/* Profile (read view): 2-col layout */
.com-users-profile .profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .com-users-profile .profile {
        grid-template-columns: 200px 1fr;
        gap: var(--space-md) var(--space-xl);
    }

    .com-users-profile dt {
        text-align: right;
    }
}

.com-users-profile dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.com-users-profile dd {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
}

.com-users-profile fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-xl);
}

.com-users-profile legend {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
    width: 100%;
}

/* Profile edit: tabs / fieldset stacking */
.com-users-profile-edit fieldset,
.profile-edit fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-xl);
}

.com-users-profile-edit legend,
.profile-edit legend {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

/* Joomla validation tooltips */
.com-users-login .invalid,
.com-users-registration .invalid,
.com-users-profile .invalid,
.com-users-remind .invalid,
.com-users-reset .invalid {
    border-color: var(--color-danger) !important;
}

.com-users-login .form-feedback,
.com-users-registration .form-feedback,
.com-users-profile .form-feedback {
    margin-bottom: var(--space-md);
}

/* Alert messages (Joomla system messages inside views) */
.com-users-login .alert,
.com-users-registration .alert,
.com-users-profile .alert,
.com-users-remind .alert,
.com-users-reset .alert {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border: 1px solid transparent;
}

.com-users-login .alert-success,
.com-users-registration .alert-success {
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border));
    color: var(--color-success);
}

.com-users-login .alert-warning,
.com-users-registration .alert-warning {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
    color: var(--color-warning);
}

.com-users-login .alert-error,
.com-users-login .alert-danger,
.com-users-registration .alert-error,
.com-users-registration .alert-danger {
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
    color: var(--color-danger);
}

/* Page intro text under heading */
.com-users-login .page-header + p,
.com-users-registration .page-header + p,
.com-users-remind .page-header + p,
.com-users-reset .page-header + p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* "Required field" helper note */
.com-users-registration .helptext,
.com-users-profile-edit .helptext {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* ==========================================================================
   Checkout & account layout fixes (post-1.15.1 test feedback)
   ========================================================================== */

/* Billing + Shipping addresses side-by-side on tablet+, on a real grid
   (Phoca's col-xs12/col-sm6 classes don't resolve in J6 without Bootstrap). */
@media (min-width: 768px) {
    .ph-checkout-box-address .ph-checkout-box-action,
    #ph-pc-account-box .ph-account-box-action {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    /* Full-width children inside the grid (header, save button, "same as" checkbox) */
    .ph-checkout-box-address .ph-checkout-box-action > [class*="col.xs12.sm12.md12"],
    .ph-checkout-box-address .ph-checkout-box-action > .ph-checkout-check-box,
    .ph-checkout-box-address .ph-checkout-box-action > .ph-checkout-address-save,
    #ph-pc-account-box .ph-account-box-action > [class*="col.xs12.sm12.md12"],
    #ph-pc-account-box .ph-account-box-action > .ph-account-check-box,
    #ph-pc-account-box .ph-account-box-action > .ph-account-address-save {
        grid-column: 1 / -1;
    }
}

/* com_users login: passkey button has a giant SVG icon by default — constrain it */
.com-users-login button[type="button"],
.com-users-login .login-button,
.com-users-login .webauthn-button,
.com-users-login [class*="webauthn"] button,
.com-users-login [class*="passkey"] button,
.com-users-login form button:not([type="submit"]) {
    width: auto;
    max-width: 100%;
    padding: 0.5rem 1rem;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.com-users-login button[type="button"]:hover,
.com-users-login form button:not([type="submit"]):hover {
    background: var(--color-border);
}

/* Constrain any SVG inside login that doesn't have explicit sizing */
.com-users-login form svg,
.com-users-login form img,
.com-users-login button svg,
.com-users-login button img {
    width: 1.25em;
    height: 1.25em;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

/* Passkey block wrapper (button + label) — center and shrink */
.com-users-login .passkey,
.com-users-login [class*="passkey"],
.com-users-login [id*="passkey"],
.com-users-login .webauthn,
.com-users-login [class*="webauthn"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Lost password / username / register links: nicer grouping */
.com-users-login__options,
.com-users-login ul,
.com-users-login p:has(a[href*="remind"]),
.com-users-login p:has(a[href*="reset"]),
.com-users-login p:has(a[href*="registration"]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-lg);
    margin-top: var(--space-lg);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    text-align: center;
}

.com-users-login__options li {
    margin: 0;
}

/* The Phoca checkout login also has a stray passkey wrapper from mod_login */
.ph-checkout-box-login .passkey,
.ph-checkout-box-login [class*="passkey"],
.ph-checkout-box-login [id*="passkey"] {
    margin: var(--space-sm) 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.ph-checkout-box-login .passkey button,
.ph-checkout-box-login [class*="passkey"] button {
    width: auto;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.ph-checkout-box-login .passkey svg,
.ph-checkout-box-login .passkey img,
.ph-checkout-box-login [class*="passkey"] svg,
.ph-checkout-box-login [class*="passkey"] img {
    width: 1em;
    height: 1em;
    max-width: 20px;
    max-height: 20px;
}

/* --- Dark mode fine-tuning for account/orders/com_users --- */
[data-theme="dark"] .com-users-login .login,
[data-theme="dark"] .com-users-registration form,
[data-theme="dark"] .com-users-profile .profile,
[data-theme="dark"] .com-users-remind form,
[data-theme="dark"] .com-users-reset form,
[data-theme="dark"] .com-users-profile-edit form,
[data-theme="dark"] .profile-edit form {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #ph-pc-orders-box .ph-orders-item-box-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #ph-pc-orders-box .ph-orders-btn:hover,
[data-theme="dark"] .com-users-login button[type="submit"]:hover,
[data-theme="dark"] .com-users-registration button[type="submit"]:hover,
[data-theme="dark"] .com-users-profile button[type="submit"]:hover,
[data-theme="dark"] .com-users-remind button[type="submit"]:hover,
[data-theme="dark"] .com-users-reset button[type="submit"]:hover,
[data-theme="dark"] #ph-pc-account-box .ph-account-address-save button:hover {
    color: var(--color-white);
}

/* ============================================================
   Phoca Cart 6.1.0 compatibility (added in tpleshop 1.16.0)
   - Subscriptions (plg_system_phocacartsubscription)
   - EU Right of Withdrawal (cancellation view)
   - Maximum order quantity stock-status label
   - New ph-category-item-image / ph-category-item-body wrappers
   - Bootstrap fallback for tables/buttons emitted by Phoca
   ============================================================ */

/* --- Status badges (subscriptions, orders) --- */
.ph-status-label {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.8125em;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-border);
}
.ph-status-label-status-active,
.ph-status-label-status-in-trial {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
}
.ph-status-label-status-pending,
.ph-status-label-status-future {
    background: color-mix(in srgb, var(--color-info) 15%, transparent);
    color: var(--color-info);
    border-color: color-mix(in srgb, var(--color-info) 40%, transparent);
}
.ph-status-label-status-on-hold {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
}
.ph-status-label-status-canceled,
.ph-status-label-status-expired,
.ph-status-label-status-failed,
.ph-status-label-status-card-expired {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

/* --- Subscription price block (rendered inside ph-item-price-box / ph-category-price-box) --- */
.ph-price-subscription-base-price,
.ph-price-subscription-signup-fee,
.ph-price-subscription-renewal-discount {
    display: inline-block;
    margin-right: var(--space-sm);
}
.ph-price-txt.ph-price-subscription-base-price,
.ph-price-txt.ph-price-subscription-signup-fee,
.ph-price-txt.ph-price-subscription-renewal-discount {
    color: var(--color-text-muted);
    font-size: 0.85em;
    font-weight: 500;
}
.ph-price-netto.ph-price-subscription-signup-fee {
    color: var(--color-warning);
    font-weight: 600;
}
.ph-price-netto.ph-price-subscription-renewal-discount {
    color: var(--color-success);
    font-weight: 600;
}

.ph-subscription-period-header,
.ph-active-subscription-period-header,
.ph-potentional-subscription-period-header {
    display: inline-block;
    color: var(--color-text-muted);
    font-size: 0.85em;
    margin-top: var(--space-xs);
    margin-right: var(--space-xs);
}
.ph-subscription-period,
.ph-active-subscription-period,
.ph-potentional-subscription-period {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text);
}

.ph-subscription-breakdown {
    margin-top: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent);
}
.ph-subscription-breakdown.ph-small small {
    font-size: 0.8125em;
    color: var(--color-text-muted);
}

/* --- Subscriptions section in account view (Phoca emits Bootstrap table/btn classes) --- */
#ph-pc-account-box #phaccountsubscriptions + .ph-account-box-action .table,
#ph-pc-account-box .ph-account-box-action > div > table {
    width: 100%;
    margin-top: var(--space-md);
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#ph-pc-account-box .ph-account-box-action table th,
#ph-pc-account-box .ph-account-box-action table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: 0.9375em;
}
#ph-pc-account-box .ph-account-box-action table th {
    background: var(--color-surface-alt);
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.8125em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--color-border);
}
#ph-pc-account-box .ph-account-box-action table tr:last-child td {
    border-bottom: 0;
}
#ph-pc-account-box .ph-account-box-action table.table-striped tbody tr:nth-of-type(odd) {
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}
#ph-pc-account-box .ph-account-box-action table.table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Bootstrap button fallback (Phoca emits btn btn-success btn-small for renew action) */
#ph-pc-account-box .ph-account-box-action .btn,
#ph-pc-account-box .ph-account-box-action a.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4em 0.9em;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}
#ph-pc-account-box .btn-small {
    padding: 0.3em 0.7em;
    font-size: 0.8125em;
}
#ph-pc-account-box .btn-success {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}
#ph-pc-account-box .btn-success:hover {
    background: color-mix(in srgb, var(--color-success) 85%, black);
    color: var(--color-white);
    transform: translateY(-1px);
}

.ph-account-subscription-description {
    color: var(--color-text-muted);
    font-size: 0.9375em;
    margin-bottom: var(--space-sm);
}

/* --- EU Right of Withdrawal (cancellation view) --- */
.pc-cancellation-view,
#ph-pc-cancellation-box {
    max-width: 760px;
    margin: var(--space-lg) auto;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ph-cancellation-intro {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.ph-cancellation-section {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-accent);
}
.ph-cancellation-section h3,
.ph-cancellation-section h4 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: 1.0625em;
    color: var(--color-heading);
}
.ph-cancellation-back-box {
    margin-top: var(--space-md);
    text-align: center;
}

/* Withdrawal action button on order list */
.pc-cancellation-action-box {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}
.ph-orders-btn.ph-cancellation-btn,
a.ph-cancellation-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4em 0.9em;
    font-size: 0.875em;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.ph-orders-btn.ph-cancellation-btn:hover,
a.ph-cancellation-btn:hover {
    background: var(--color-danger);
    color: var(--color-white);
    border-color: var(--color-danger);
}
.pc-cancellation-badge,
.label.label-warning.pc-cancellation-badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
}

/* --- New category list/grid wrappers (6.1.0 markup) --- */
/* These are additive — Phoca added them as extra hooks; we just ensure
   they don't break our existing es-product-card grid by giving them
   neutral behavior. */
.ph-category-item-image {
    position: relative;
}
.ph-category-item-body {
    /* No layout override — already styled via .es-product-card__body */
}

/* --- Dark-mode tweaks --- */
[data-theme="dark"] .ph-status-label {
    background: var(--color-gray-800);
    color: var(--color-gray-300);
    border-color: var(--color-gray-700);
}
[data-theme="dark"] #ph-pc-account-box .ph-account-box-action table {
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] #ph-pc-account-box .ph-account-box-action table th {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .pc-cancellation-view,
[data-theme="dark"] #ph-pc-cancellation-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .ph-subscription-breakdown {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .ph-orders-btn.ph-cancellation-btn,
[data-theme="dark"] a.ph-cancellation-btn {
    background: var(--color-surface);
}

/* ============================================================
   Dark mode :disabled / :read-only inputs (1.16.2)
   When checkout user ticks "shipping = billing", Phoca disables
   the shipping fields. Default browser styling for :disabled in
   dark mode produces light-gray boxes that clash with the rest
   of the form. We unify them to a slightly recessed surface.
   ============================================================ */
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] input[readonly],
[data-theme="dark"] select[readonly],
[data-theme="dark"] textarea[readonly],
[data-theme="dark"] #ph-pc-checkout-box input:disabled,
[data-theme="dark"] #ph-pc-checkout-box select:disabled,
[data-theme="dark"] #ph-pc-checkout-box textarea:disabled,
[data-theme="dark"] #ph-pc-account-box input:disabled,
[data-theme="dark"] #ph-pc-account-box select:disabled,
[data-theme="dark"] #ph-pc-account-box textarea:disabled {
    background-color: color-mix(in srgb, var(--color-surface) 60%, transparent) !important;
    color: var(--color-text-muted) !important;
    border-color: color-mix(in srgb, var(--color-border) 60%, transparent) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

[data-theme="dark"] .ph-checkout-shipping-row:has(input:disabled) .ph-box-header,
[data-theme="dark"] .ph-account-shipping-row:has(input:disabled) .ph-box-header {
    opacity: 0.6;
}

/* Browser autofill in dark mode — Chrome paints a yellow-ish overlay over
   filled fields. The -webkit-autofill pseudo-class lets us repaint it. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    caret-color: var(--color-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
   Hide shipping address when "same as billing" is checked (1.16.4)
   CSS-only via :has() — saves mobile users from scrolling past
   a column of disabled fields they're not going to fill in.
   Browser support: Chrome 105+ / Safari 15.4+ / Firefox 121+
   (~95%). On older browsers shipping stays visible but disabled,
   which is the previous behavior — no regression.
   Phoca uses the same checkbox id ("phCheckoutBillingSameAsShipping")
   in both /checkout and /account address forms.
   ============================================================ */
.ph-checkout-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-checkout-shipping-row,
.ph-account-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-account-shipping-row {
    display: none !important;
}

/* When shipping is hidden, billing column gets the full row width
   (overrides the 1fr 1fr grid set in the post-1.15.1 block). */
@media (min-width: 768px) {
    .ph-checkout-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-checkout-billing-row,
    .ph-account-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-account-billing-row {
        grid-column: 1 / -1;
    }
}

/* Highlight the "same as billing" checkbox container subtly when it's
   the active state, so users notice why shipping disappeared. */
.ph-checkout-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-checkout-check-box,
.ph-account-box-action:has(#phCheckoutBillingSameAsShipping:checked) .ph-account-check-box {
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
}

/* ============================================================
   Ask a Question — Bootstrap modal wrapper (1.17.5)
   When Phoca's "Ask a Question (popup_askquestion)" = 2 (Modal),
   it injects #phAskAQuestionPopup as a Bootstrap 5 .modal with
   an iframe loading /question. We just need to style the modal
   chrome (overlay, dialog, close button) since the iframe content
   already inherits our #ph-pc-question-box styles via tpleshop CSS.
   Same for #phPhocaCartPopup (generic Phoca modal — used by other
   inline popups so a single style block covers both.).
   ============================================================ */
#phAskAQuestionPopup.modal,
#phPhocaCartPopup.modal,
.modal[id*="PhocaCart"] {
    /* Backdrop tint */
    background: rgba(20, 14, 15, 0.55);
}

#phAskAQuestionPopup .modal-dialog,
#phPhocaCartPopup .modal-dialog {
    max-width: 900px;
    margin: 5vh auto;
}

#phAskAQuestionPopup .modal-content,
#phPhocaCartPopup .modal-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#phAskAQuestionPopup .modal-header,
#phPhocaCartPopup .modal-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

#phAskAQuestionPopup .modal-title,
#phPhocaCartPopup .modal-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin: 0;
}

#phAskAQuestionPopup .modal-body,
#phPhocaCartPopup .modal-body {
    padding: 0;       /* iframe handles its own padding via #ph-pc-question-box */
}

#phAskAQuestionPopup .modal-body iframe,
#phPhocaCartPopup .modal-body iframe {
    width: 100%;
    min-height: 70vh;
    border: 0;
    display: block;
}

#phAskAQuestionPopup .modal-footer,
#phPhocaCartPopup .modal-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-alt);
}

/* Close button — Bootstrap default is a tiny gray X; make it visible */
#phAskAQuestionPopup .btn-close,
#phPhocaCartPopup .btn-close {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.7;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
#phAskAQuestionPopup .btn-close:hover,
#phPhocaCartPopup .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Dark mode */
[data-theme="dark"] #phAskAQuestionPopup.modal,
[data-theme="dark"] #phPhocaCartPopup.modal,
[data-theme="dark"] .modal[id*="PhocaCart"] {
    background: rgba(8, 5, 6, 0.7);
}
[data-theme="dark"] #phAskAQuestionPopup .modal-content,
[data-theme="dark"] #phPhocaCartPopup .modal-content {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] #phAskAQuestionPopup .btn-close,
[data-theme="dark"] #phPhocaCartPopup .btn-close {
    filter: invert(1);          /* turn the dark X icon white on dark bg */
}

/* Mobile — full-bleed modal */
@media (max-width: 600px) {
    #phAskAQuestionPopup .modal-dialog,
    #phPhocaCartPopup .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    #phAskAQuestionPopup .modal-content,
    #phPhocaCartPopup .modal-content {
        border-radius: 0;
        height: 100%;
    }
    #phAskAQuestionPopup .modal-body iframe,
    #phPhocaCartPopup .modal-body iframe {
        min-height: calc(100vh - 4rem);
    }
}

/* ============================================================
   Ask a Question form (1.17.2)
   Phoca's question view ships Bootstrap-2 markup (.control-group,
   .control-label, .controls, .btn-toolbar > .btn-group) which in
   Joomla 6 (no Bootstrap CSS) renders as plain stacked blocks.
   Restyle it as a 2-col card: product image left, form right.
   ============================================================ */
#ph-pc-question-box.pc-question-view {
    max-width: 960px;
    margin-inline: auto;
    padding: var(--space-lg) 0 var(--space-2xl);
}

#ph-pc-question-box > h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-md);
    color: var(--color-heading);
}

#ph-pc-question-box > h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-lg);
}

#ph-pc-question-box .ph-desc {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

/* 2-col card wrap: image left, form right (Phoca emits two .row > .col blocks) */
@media (min-width: 768px) {
    #ph-pc-question-box > .row {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: var(--space-xl);
        align-items: start;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: var(--space-lg);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    /* Merge consecutive .row blocks visually — Phoca emits image
       in one .row and form in another. We make the second one borderless
       and slot it into the same card by lifting it with margin-top. */
    #ph-pc-question-box > .row + .row {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-top: calc(-1 * var(--space-xl));
        border-radius: 0;
    }
}

/* Product image full box already styled by .ph-item-image-full-box rules earlier in the file —
   just make sure it doesn't stretch too tall in the question card */
#ph-pc-question-box .ph-item-image-full-box {
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin: 0 auto;
}

/* Form rows — convert Phoca's Bootstrap-2 control-group to vertical stack */
#ph-pc-question-box form .control-group,
#ph-pc-question-box form .form-group {
    margin-bottom: var(--space-md);
    display: block;
}

#ph-pc-question-box form .control-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

#ph-pc-question-box form .control-label label {
    margin: 0;
    color: inherit;
    font-weight: inherit;
}

#ph-pc-question-box form .controls {
    display: block;
    width: 100%;
}

#ph-pc-question-box form input[type="text"],
#ph-pc-question-box form input[type="email"],
#ph-pc-question-box form input[type="tel"],
#ph-pc-question-box form textarea,
#ph-pc-question-box form select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#ph-pc-question-box form textarea {
    min-height: 8rem;
    resize: vertical;
}

#ph-pc-question-box form input:focus,
#ph-pc-question-box form textarea:focus,
#ph-pc-question-box form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Required asterisk Joomla emits as <span class="star"> */
#ph-pc-question-box form .star {
    color: var(--color-danger);
    margin-left: 0.15em;
}

/* Privacy checkbox row */
#ph-pc-question-box .ph-askquestion-checkbox-confirm,
#ph-pc-question-box .ph-checkout-check-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

#ph-pc-question-box .ph-askquestion-checkbox-confirm input[type="checkbox"] {
    margin-top: 0.2em;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* Submit button — kill .btn-toolbar / .btn-group bootstrap wrapping, render as flat row */
#ph-pc-question-box .btn-toolbar,
#ph-pc-question-box .btn-group {
    display: block;
    margin: var(--space-lg) 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

#ph-pc-question-box button[type="submit"],
#ph-pc-question-box .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.7em 1.5em;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

#ph-pc-question-box button[type="submit"]:hover,
#ph-pc-question-box .btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

/* Mobile — stack image above form */
@media (max-width: 767px) {
    #ph-pc-question-box {
        padding: var(--space-md);
    }
    #ph-pc-question-box .ph-item-image-full-box {
        max-width: 240px;
        margin-bottom: var(--space-md);
    }
}

/* Dark mode polish */
[data-theme="dark"] #ph-pc-question-box > .row {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Magnific Popup (image lightbox) backdrop override (1.17.2)
   The PCV Image Photoswipe / Magnific Popup plugin paints
   .mfp-figure / .mfp-content with a default grey-444 background
   that clashes with vinarstvo's warm palette and reads as a
   dirty dark patch behind transparent-webp bottle photos.
   Repaint to match the same wine-cellar gradient we use on
   product detail image boxes.
   ============================================================ */
.mfp-bg {
    background: rgba(20, 14, 15, 0.85);
}

.mfp-figure,
.mfp-figure::after,
.mfp-content figure {
    background: linear-gradient(135deg, #fdfbf7 0%, #f0e9dc 100%) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    border-radius: 0.5rem;
}

.mfp-figure img {
    background: transparent !important;
}

.mfp-title,
.mfp-counter {
    color: var(--color-white);
    font-family: var(--font-body);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mfp-arrow::before,
.mfp-arrow::after,
.mfp-close {
    color: var(--color-white) !important;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.mfp-arrow:hover::before,
.mfp-arrow:hover::after,
.mfp-close:hover {
    opacity: 1;
}

/* Dark mode — switch the backdrop to wine-cellar warm tone so
   bottle silhouettes pop against the same cellar ambiance as
   the rest of the dark theme. */
[data-theme="dark"] .mfp-bg {
    background: rgba(15, 10, 11, 0.92);
}

[data-theme="dark"] .mfp-figure,
[data-theme="dark"] .mfp-figure::after,
[data-theme="dark"] .mfp-content figure {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(197, 160, 89, 0.10) 0%, transparent 65%),
        linear-gradient(135deg, #4a3a3e 0%, #382c2f 100%) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        inset 0 -40px 80px -40px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   plg_system_phocacartreview reply card override (1.17.1)
   The reply plugin ships a hardcoded dark background on
   .es-review-card__reply which in light mode reads as a
   blackout block under the review. Rebind it to our theme
   surface tokens so it adapts to both light and dark.
   ============================================================ */
.es-review-card__reply {
    background: var(--color-surface-alt) !important;
    color: var(--color-text);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
}

.es-review-card__reply *,
.es-review-card__reply p,
.es-review-card__reply span {
    color: inherit;
}

/* Optional "Odpoveď" label if the plugin renders one */
.es-review-card__reply::before,
.es-review-card__reply-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Kill Phoca's flex:1 1 100% on grid item boxes (1.17.1)
   Phoca main.css forces `display: flex; flex: 1 1 100%;
   flex-direction: column` on `.ph-row-flex.grid .row-item
   .ph-item-box` and its `.ph-thumbnail-c`. The flex-grow=1
   stretches our es-product-card layout in odd ways inside
   the category grid (Robert saw it improve when he commented
   it out locally). We keep flex-direction:column intact and
   just neutralize the grow/shrink basis so the card honors
   its own aspect ratio + content height.
   ============================================================ */
.ph-row-flex.grid .row-item .ph-item-box,
.ph-row-flex.grid .row-item .ph-item-box .ph-thumbnail-c {
    flex: initial !important;
}

/* ============================================================
   B2B compact order list (added in 1.17.0)
   Activated by Joomla menu item Page Class = "es-b2b-list" on
   a Phoca Cart Items View with Layout=List. Transforms the
   default Phoca list markup into a single-line per-product
   row optimized for B2B bulk ordering: 80×80 thumb, inline
   SKU + short description, inline qty stepper + add-to-cart,
   sticky cart total bar at bottom.
   See vystupy/b2b-eshop-setup-navod.md for admin setup.
   ============================================================ */

/* Container — narrower max-width, breathing room for sticky bar */
body.es-b2b-list #ph-pc-items-box,
.pc-items-view.es-b2b-list,
.es-b2b-list .pc-items-view {
    max-width: 1100px;
    margin-inline: auto;
    padding-bottom: calc(var(--space-2xl) + 4rem);   /* room for sticky bar */
}

/* Headline polish */
body.es-b2b-list .pc-items-view > h1,
body.es-b2b-list #ph-pc-items-box > h1 {
    font-family: var(--font-heading);
    margin-bottom: var(--space-lg);
}

/* Hide pieces that don't belong in a B2B order list */
body.es-b2b-list .ph-pagination,
body.es-b2b-list .ph-pagination-top,
body.es-b2b-list .ph-category-action-box-icons,
body.es-b2b-list .ph-category-action-box-fade-icons,
body.es-b2b-list .ph-label-box,
body.es-b2b-list .ph-tag-box,
body.es-b2b-list .ph-manufacturer-box,
body.es-b2b-list .ph-review-stars,
body.es-b2b-list .ph-rating {
    display: none !important;
}

/* Single product row — flex layout overriding Phoca's col-xs/sm/md */
body.es-b2b-list .ph-items.list .ph-item-box {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    margin: 0 0 var(--space-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: none;
    transition: border-color var(--transition-fast);
}

body.es-b2b-list .ph-items.list .ph-item-box:hover {
    border-color: var(--color-primary);
}

/* Reset the Phoca inner wrapper chain to flow into our 3-col grid */
body.es-b2b-list .ph-items.list .ph-item-box > .row-item,
body.es-b2b-list .ph-items.list .ph-item-box > .ph-thumbnail,
body.es-b2b-list .ph-items.list .ph-item-content,
body.es-b2b-list .ph-items.list .ph-item-content-row {
    display: contents;
}

/* Column 1 — 80×80 thumbnail */
body.es-b2b-list .ph-category-item-image {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    padding: 0;
}
body.es-b2b-list .ph-category-item-image a,
body.es-b2b-list .ph-category-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Column 2 — title + SKU + short description (vertically stacked) */
body.es-b2b-list .ph-category-item-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

body.es-b2b-list .ph-category-item-title h3,
body.es-b2b-list .ph-category-item-title .ph-header h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    line-height: 1.25;
    color: var(--color-heading);
}

body.es-b2b-list .ph-category-item-title h3 a {
    color: inherit;
    text-decoration: none;
}

body.es-b2b-list .ph-category-item-title h3 a:hover {
    color: var(--color-primary);
}

/* SKU + short desc on a meta line */
body.es-b2b-list .ph-sku,
body.es-b2b-list .ph-category-item-title .ph-sku {
    display: inline;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

body.es-b2b-list .ph-category-item-title .ph-desc,
body.es-b2b-list .ph-category-item-title .ph-short-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin: 0;
    /* Clamp to 2 lines so rows stay uniform-height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Column 3 — price + qty + add-to-cart, all inline */
body.es-b2b-list .ph-category-item-body {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0;
    flex-shrink: 0;
}

/* Compact price */
body.es-b2b-list .ph-item-price-box,
body.es-b2b-list .ph-category-price-box {
    margin: 0;
    padding: 0;
    background: transparent;
}

body.es-b2b-list .ph-price-brutto,
body.es-b2b-list .ph-price-netto {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    min-width: 5.5rem;
    text-align: right;
}

body.es-b2b-list .ph-price-txt,
body.es-b2b-list .ph-price-base {
    display: none;
}

/* Hide stock status text in tight layout — keep only visual icon */
body.es-b2b-list .ph-stock-status > span {
    font-size: 0;
}
body.es-b2b-list .ph-stock-status::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    margin-right: var(--space-xs);
}
body.es-b2b-list .ph-stock-out::after { background: var(--color-danger); }
body.es-b2b-list .ph-stock-low::after { background: var(--color-warning); }

/* Quantity stepper — render Phoca's quantity input as a tight stepper */
body.es-b2b-list .ph-quantity-box,
body.es-b2b-list .ph-form-quantity {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}

body.es-b2b-list .ph-quantity-box input[name="quantity"],
body.es-b2b-list .ph-form-quantity input[name="quantity"],
body.es-b2b-list input[name="quantity"] {
    width: 3rem;
    height: 2.25rem;
    padding: 0;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    -moz-appearance: textfield;
}

body.es-b2b-list input[name="quantity"]::-webkit-outer-spin-button,
body.es-b2b-list input[name="quantity"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.es-b2b-list .ph-quantity-box button,
body.es-b2b-list .ph-form-quantity button,
body.es-b2b-list .ph-form-quantity__btn {
    width: 2rem;
    height: 2.25rem;
    background: var(--color-surface-alt);
    border: 0;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
body.es-b2b-list .ph-quantity-box button:hover,
body.es-b2b-list .ph-form-quantity button:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

/* Add-to-cart button — compact, primary */
body.es-b2b-list .ph-btn-add-to-cart,
body.es-b2b-list .phCartButton {
    height: 2.25rem;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: none;
}

/* "Cena na vyžiadanie" / empty price → muted, italic */
body.es-b2b-list .ph-price-empty,
body.es-b2b-list .ph-price-zero {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Sticky quick-order bar at bottom — JS-injected by B2BQuickOrder module */
.es-b2b-quickbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.es-b2b-quickbar.is-active {
    transform: translateY(0);
}

.es-b2b-quickbar__inner {
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.es-b2b-quickbar__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    font-size: var(--font-size-base);
}

.es-b2b-quickbar__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.es-b2b-quickbar__count {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.es-b2b-quickbar__total {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.es-b2b-quickbar__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.es-b2b-quickbar__cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Mobile — stack summary above CTA, reduce padding */
@media (max-width: 600px) {
    body.es-b2b-list .ph-items.list .ph-item-box {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "img   info"
            "img   info"
            "body  body";
        gap: var(--space-sm);
    }
    body.es-b2b-list .ph-category-item-image { grid-area: img; width: 64px; height: 64px; }
    body.es-b2b-list .ph-category-item-title { grid-area: info; }
    body.es-b2b-list .ph-category-item-body {
        grid-area: body;
        justify-content: space-between;
        padding-top: var(--space-xs);
        border-top: 1px solid var(--color-border);
    }

    .es-b2b-quickbar__inner {
        flex-direction: column;
        gap: var(--space-xs);
    }
    .es-b2b-quickbar__summary {
        justify-content: center;
        font-size: var(--font-size-sm);
    }
    .es-b2b-quickbar__cta {
        width: 100%;
        justify-content: center;
    }
}

/* Dark mode polish */
[data-theme="dark"] .es-b2b-quickbar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] body.es-b2b-list .ph-items.list .ph-item-box {
    background: var(--color-surface);
}

/* ============================================================
   Kategória bez vlastných produktov (1.19.2)

   Phoca vykreslí lištu s triedením, počtom položiek na stránku a prepínačom
   rozloženia vždy — aj keď zoznam produktov ostane prázdny. Na značkách
   a medziuzloch stromu (kategórie, ktoré majú len podkategórie) tak visí
   ovládanie, ktoré nemá čo ovládať.

   Riešené cez :has() na prázdny #phItemsBox namiesto PHP override — Phoca
   markup zostáva nedotknutý, takže to prežije aktualizáciu komponentu.
   Bez podpory :has() (staršie prehliadače) sa lišta jednoducho zobrazí ako
   doteraz, nič sa nerozbije.
   ============================================================ */
#ph-pc-category-box:has(#phItemsBox:empty) #phItemTopBoxForm,
.pc-category-view:has(#phItemsBox:empty) #phItemTopBoxForm {
    display: none;
}

/* ============================================================
   Filter — rolovanie dlhých zoznamov (1.26.0)

   Špecifikácie vedia narásť do stoviek hodnôt (na obutexe má samotná Farba
   56 položiek, celý filter na /katalog 119 zaškrtávacích políčok) a bočný
   panel sa natiahne na niekoľko obrazoviek. Phoca to nevie obmedziť:
   `limit_tag_count`, `limit_manufacturer_count`, `limit_parameter_count`
   a `limit_category_count` existujú, ale `limit_specification_count` nie.

   Preto sa telo sekcie obmedzí na výšku a roluje. Hodnota je premenná, aby
   sa dala doladiť parametrom šablóny alebo vo Vlastnom CSS bez zásahu sem.
   ============================================================ */

.es-filter .panel-body {
    max-height: var(--es-filter-max-height, 17rem);
    overflow-y: auto;
    /* aby sa po dorolovaní zoznamu nezačala posúvať celá stránka */
    overscroll-behavior: contain;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

/* Hustejší riadkovací krok — pri desiatkach položiek sa tým ušetrí
   podstatná časť výšky bez straty čitateľnosti. */
.es-filter .panel-body label,
.es-filter .panel-body .form-check {
    margin-bottom: 0.1rem;
    line-height: 1.3;
    font-size: 0.92em;
}

.es-filter .panel-title a {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.es-filter .panel-body::-webkit-scrollbar {
    width: 8px;
}

.es-filter .panel-body::-webkit-scrollbar-thumb {
    /* cez currentColor, nech posuvník nesvieti v tmavom režime */
    background: color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 4px;
}

/* ============================================================
   Odhlásenie (com_users, view=logout) — 1.28.1

   V rodine com_users vyššie logout chýbal, takže stránka odhlásenia bola
   jediná bez karty a jej tlačidlo vyzeralo ako obyčajný odkaz. Pritom je to
   jediná akcia na stránke — má byť zreteľná.
   ============================================================ */

.com-users-logout {
    max-width: 600px;
    margin-inline: auto;
}

.com-users-logout .logout,
.com-users-logout form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.com-users-logout .page-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
}

.com-users-logout h1,
.com-users-logout .page-header h1,
.com-users-logout .page-header h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin: 0;
}

/* Hlavná akcia stránky — plná značková farba, dosť veľká na dotyk.
   Pokrýva aj tlačidlo odhlásenia v module prihlásenia, nech vyzerá rovnako
   nech už je kdekoľvek. */
.com-users-logout button,
.com-users-logout .btn,
.com-users-logout input[type="submit"],
.mod-login-logout__button,
.mod-login-logout .btn,
form[action*="task=user.logout"] .btn,
form[action*="task=user.logout"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 2.75rem;
    padding: 0.75rem 1.75rem;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.com-users-logout button:hover,
.com-users-logout .btn:hover,
.com-users-logout input[type="submit"]:hover,
.mod-login-logout__button:hover,
.mod-login-logout .btn:hover,
form[action*="task=user.logout"] .btn:hover,
form[action*="task=user.logout"] button:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
}

/* ============================================================
   Bublinové popisky (tooltip) — 1.28.1

   Šablóna načítava Bootstrap JS (modal, tab), ale zámerne NIE Bootstrap CSS.
   Phoca Cart aj Phoca Download pritom vešajú na ikony `hasTooltip*` a tie sa
   cez Bootstrap JS vykreslia — bez štýlov ale ako holý text bez podkladu,
   ktorý splynie s obsahom pod ním.

   Doplniť celé Bootstrap CSS kvôli bubline by bolo 200 kB navyše, preto len
   tieto pravidlá. Farby cez tokeny, takže tmavý režim funguje sám.
   ============================================================ */

.tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    text-align: start;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-inner {
    max-width: 18rem;
    padding: 0.45rem 0.7rem;
    /* Zámerne tmavý podklad aj vo svetlom režime — bublina musí byť zreteľne
       „nad" obsahom, nie ďalšia biela plocha na bielej karte. */
    background: var(--color-gray-900);
    color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    text-align: center;
}

[data-theme="dark"] .tooltip .tooltip-inner {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent;
}

.tooltip[data-popper-placement^="top"] .tooltip-arrow {
    bottom: -0.4rem;
}

.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    top: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: var(--color-gray-900);
}

.tooltip[data-popper-placement^="bottom"] .tooltip-arrow {
    top: -0.4rem;
}

.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    bottom: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: var(--color-gray-900);
}

.tooltip[data-popper-placement^="left"] .tooltip-arrow {
    right: -0.4rem;
    width: 0.4rem;
    height: 0.8rem;
}

.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    left: 0;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-left-color: var(--color-gray-900);
}

.tooltip[data-popper-placement^="right"] .tooltip-arrow {
    left: -0.4rem;
    width: 0.4rem;
    height: 0.8rem;
}

.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    right: 0;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: var(--color-gray-900);
}

[data-theme="dark"] .tooltip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--color-gray-200); }
[data-theme="dark"] .tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--color-gray-200); }
[data-theme="dark"] .tooltip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--color-gray-200); }
[data-theme="dark"] .tooltip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--color-gray-200); }

/* ==========================================================================
   tpleshop 1.30 – karty produktov a odznaky (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 253-336)
   ========================================================================== */
/* =========================================
   Product cards
   ========================================= */

.es-product-card,
.ph-product-module-box .ph-item-box {
    border-radius: var(--card-radius);
    border-color: var(--color-border);
    background: var(--color-surface);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.es-product-card:hover,
.ph-product-module-box .ph-item-box:hover {
    border-color: var(--color-accent);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Fotka v karte: biely podklad, vnútorný okraj ako WP (5 %), contain */
.es-product-card__image,
.ph-item-image-box {
    background: var(--es-media-plate);
    padding: 5%;
}

.es-product-card__image img,
.ph-item-image-box img {
    object-fit: contain;
}

/* Názov: normálne písmo, semibold, celý (3 riadky) — boatdiesel pasca:
   clamp je na .ph-product-header, nie na .es-product-card__header */
.es-product-card__header h3,
.ph-item-header h3,
.ph-product-module-box h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
}

.ph-product-header {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Cena - espresso bold */
.ph-price {
    color: var(--color-primary);
    font-weight: 700;
}

/* =========================================
   Phoca Cart labels - odznaky
   ========================================= */

.ph-label {
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.35em 0.7em;
}

.ph-label-feat,
.ph-label-new,
.ph-label-hot {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ph-label-discount,
.ph-label-sale {
    background: var(--color-accent);
    color: #ffffff;
}

[data-theme="dark"] .ph-label-feat,
[data-theme="dark"] .ph-label-new,
[data-theme="dark"] .ph-label-hot {
    color: #0f1117;
}

/* ==========================================================================
   tpleshop 1.30 – dlaždice kategórií (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 360-407)
   ========================================================================== */
/* =========================================
   Kategórie - malé dlaždice vedľa seba (boatdiesel vzor)
   ========================================= */

.es-cat-grid__title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
    font-size: 0.875rem;
}

.es-cat-grid__image {
    background: var(--es-media-plate);
    border: 1px solid var(--color-border);
}

.es-cat-grid__link:hover .es-cat-grid__image {
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(74, 24, 0, 0.12);
}

/* Kategória bez fotky: jemná latte dlaždica, nie "chýba obrázok" */
.es-cat-grid__image--empty {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-surface-alt));
}

.es-cat-grid__image--empty::after {
    color: var(--color-accent);
}

/* Vodorovná dráha: 168 px desktop, 124 px mobil = 3 na obrazovku */
.es-cat-grid--scroll .es-cat-grid__item {
    flex: 0 0 168px !important;
}

@media (max-width: 767px) {
    .es-cat-grid--scroll .es-cat-grid__item,
    .es-cat-grid__item {
        flex: 0 0 124px !important;
        width: 124px !important;
    }

    .es-cat-grid__title {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   tpleshop 1.30 – cena s DPH, podkategórie ako boxy (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 981-1135)
   ========================================================================== */
/* ============================================
   Zobrazenie ceny ako na boatdiesel / web6 (Robert 12.9.: „ak DPH, mrkni web6").
   Karty: jedna cena s DPH bez rozpisu. Detail: veľká cena s DPH, pod ňou malým
   „bez DPH". Phoca po zapnutí dane vypisuje 3 riadky s popiskami — v kategórii
   nečitateľné, v detaile zbytočné.
   ============================================ */
.ph-category-price-box .ph-price-netto,
.ph-category-price-box .ph-price-netto-txt,
.ph-category-price-box .ph-tax,
.ph-category-price-box .ph-tax-txt,
.ph-category-price-box .ph-price-brutto-txt,
.ph-category-price-box .ph-price-original-txt {
    display: none !important;
}

.ph-category-price-box .ph-price-brutto {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-primary);
}

.ph-item-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.ph-item-price-box .ph-price-netto-txt,
.ph-item-price-box .ph-tax,
.ph-item-price-box .ph-tax-txt,
.ph-item-price-box .ph-price-brutto-txt,
.ph-item-price-box .ph-price-original-txt {
    display: none !important;
}

.ph-item-price-box .ph-price-original,
.ph-item-price-box .ph-price-old { order: 0; }
.ph-item-price-box .ph-price-brutto { order: 1; }
.ph-item-price-box .ph-price-netto {
    order: 2;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.ph-item-price-box .ph-price-netto::after {
    content: " bez DPH";
    font-size: 0.85em;
}

/* ============================================
   Podkategórie v kategórii ako kompaktné boxy (boatdiesel, bod 9.2 klientky;
   Robert 12.9.: „kategórie z boatdiesel na mobile aj na PC").
   PC: malý štvorcový náhľad vľavo + názov, 3 v rade (4 od 1200 px — gastro má
   až 16 podkategórií). Mobil: zoznam pod sebou, nič sa neskrýva za okrajom.
   Úvodky (.ph-categories-box / modul) sa to netýka.
   ============================================ */
.view-category .ph-category-module-box,
.view-category .ph-category-module-box .es-cat-grid__track {
    width: 100%;
    max-width: none;
    overflow: visible;
}

.view-category .ph-category-module-box .es-cat-grid__track > ul {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible !important;
}

@media (min-width: 768px) {
    .view-category .ph-category-module-box .es-cat-grid__track > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem;
    }
}

@media (min-width: 1200px) {
    .view-category .ph-category-module-box .es-cat-grid__track > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.view-category .ph-category-module-box .es-cat-grid__item {
    width: auto !important;
    flex: none !important;
    min-width: 0;
    margin: 0;
}

.view-category .ph-category-module-box .es-cat-grid__link {
    display: flex !important;
    flex-direction: row !important;   /* base má stĺpec (obrázok nad názvom) */
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    transform: none !important;
}

.view-category .ph-category-module-box .es-cat-grid__link:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(74, 24, 0, 0.08);
}

.view-category .ph-category-module-box .es-cat-grid__image {
    flex: 0 0 auto !important;
    max-width: none;
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1 / 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--es-media-plate);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
}

.view-category .ph-category-module-box .es-cat-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.view-category .ph-category-module-box .es-cat-grid__title {
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

/* nadpis „Kategórie" nad boxami — menší, zarovnaný vľavo ako na boatdiesel */
.view-category .ph-category-module-box .es-cat-grid__heading {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   tpleshop 1.30 – posuvné pásy produktov (swipe) (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1136-1417)
   ========================================================================== */
/* ============================================================
   Swipe dráha produktov na úvodke — port z boatdiesel (Robert 12.9.:
   „spravme swipe aj na produkty ako na boat"). Override
   html/mod_phocacart_product/swipe.php + js/bd-swipe.js (názvy bd-* ponechané
   1:1, aby sa dali obe verzie porovnávať). Kandidát do jadra tpleshopu.
   ============================================================ */

/* ============================================================
   Swipe produktové kartičky (úvodka) — layout "swipe" modulu
   mod_phocacart_product. Posúvanie prstom rieši prehliadač
   (overflow-x + scroll-snap), šípky pridáva bd-swipe.js.
   ============================================================ */
.bd-swipe {
    position: relative;
    display: block;
}

.bd-swipe__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0.125rem;
    padding: 0.25rem 0.125rem 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.bd-swipe__track::-webkit-scrollbar {
    display: none;
}

.bd-swipe__track:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-md, 8px);
}

.bd-swipe__item {
    flex: 0 0 auto;
    width: 232px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

/* Karta v dráhe: obrázok s pevným pomerom, telo dorovná výšku */
.bd-swipe__item .es-product-card__image {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.bd-swipe__item .es-product-card__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bd-swipe__item .es-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    padding: 0.75rem;
}

.bd-swipe__item .ph-product-header {
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0;
}

.bd-swipe__item .es-product-card__sku,
.bd-swipe__item .es-product-card__stock {
    font-size: 0.75rem;
}

.bd-swipe__item .es-product-card__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Odznak zľavy */
.bd-swipe__item .es-product-card__labels {
    position: absolute;
    z-index: 2;
    top: 0.5rem;
    left: 0.5rem;
}

.bd-badge--sale {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--color-accent);   /* ZĽAVA = akcent s tmavým písmom (ako WP) */
    color: var(--color-on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.bd-swipe__item {
    position: relative;
}

/* Šípky — len pre myš; na dotyku sa posúva prstom */
.bd-swipe__nav {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .bd-swipe__nav {
        display: grid;
        place-items: center;
        position: absolute;
        top: 38%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
        border-radius: 50%;
        background: var(--color-body-bg, #fff);
        color: var(--text-primary, #111);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
        cursor: pointer;
        z-index: 3;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .bd-swipe__nav[hidden] {
        display: none;
    }

    .bd-swipe__nav:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-on-primary);
    }

    .bd-swipe__nav--prev {
        left: -14px;
    }

    .bd-swipe__nav--next {
        right: -14px;
    }
}

@media (max-width: 767.98px) {
    .bd-swipe__item {
        width: clamp(152px, 45vw, 200px);
    }

    .bd-swipe__track {
        gap: 0.625rem;
    }
}

/* Cena v swipe karte: veľká aktuálna + preškrtnutá pôvodná vedľa,
   bez popiskov "Pôvodná cena / Cena" (v úzkej karte zaberali 4 riadky). */
.bd-swipe__item .ph-category-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
}

.bd-swipe__item .ph-price-txt,
.bd-swipe__item .ph-cb {
    display: none;
}

.bd-swipe__item .ph-price-brutto {
    order: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.bd-swipe__item .ph-price-original {
    order: 2;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: line-through;
    color: var(--color-text-muted);
    line-height: 1.2;
}

/* Karta v dráhe: od 22. 9. 2026 na stred ako všetky karty (Robert – „na úvodke kartičky produkty tiež na stred");
   cena je tiež na strede, takže nič neskáče. */
.bd-swipe__item .es-product-card__sku,
.bd-swipe__item .es-product-card__stock,
.bd-swipe__item .es-product-card__header {
    text-align: center;
}

/* Swipe karty rovnako vysoké (názvy majú 1–2 riadky) a cena dole. */
.bd-swipe__track {
    align-items: stretch !important;
}
.bd-swipe__item {
    display: flex;
    flex-direction: column;
    height: auto !important;
    align-self: stretch;
}
.bd-swipe__item .es-product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.bd-swipe__item .es-product-card__actions {
    margin-top: auto;
}

/* Stav skladu v kartách (swipe + kategória): farba podľa aliasu stavu (pc-stock-<alias>). */
.ph-stock { font-size: 0.8125rem; font-weight: 600; }
.ph-stock.pc-stock-skladom { color: var(--color-success); }
.ph-stock.pc-stock-do-2-3-dni { color: #a06a00; }
.ph-stock.pc-stock-na-objednavku { color: var(--color-text-muted); }
.ph-stock.pc-stock-nie-je-skladom { color: var(--color-danger); }
.ph-stock.pc-stock-vypredane { color: var(--color-text-muted); text-decoration: line-through; }   /* vypadnutý tovar z feedu v karanténe (ariane_feed) */

/* ============================================================
   Swipe: šípky na PC vždy (nie len pri hover:hover — na notebooku s dotykom
   by zmizli), na mobile tenký posuvník + závoj na pravom okraji ako náznak
   pokračovania (Robert 12.9.). Triedy is-at-end / bd-swipe--nescroll dáva bd-swipe.js.
   ============================================================ */
@media (min-width: 768px) {
    .bd-swipe__nav {
        display: grid;
        place-items: center;
        position: absolute;
        top: 38%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-heading);
        box-shadow: 0 2px 10px rgba(74, 24, 0, 0.14);
        cursor: pointer;
        z-index: 3;
    }
    .bd-swipe__nav--prev { left: -12px; }
    .bd-swipe__nav--next { right: -12px; }
    .bd-swipe__nav[hidden] { display: none; }
    .bd-swipe__nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
}

@media (max-width: 767.98px) {
    .bd-swipe__track {
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent) transparent;
        padding-bottom: 0.5rem;
    }
    .bd-swipe__track::-webkit-scrollbar { display: block; height: 4px; }
    .bd-swipe__track::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 2px; }
    .bd-swipe__track::-webkit-scrollbar-track { background: transparent; }
}

.bd-swipe { position: relative; }
/* závoj vpravo cez masku dráhy (nie farebný prekryv) — funguje na krémovom aj béžovom páse aj v tme (Robert 14.9.) */
.bd-swipe::after { content: none; }
.bd-swipe .bd-swipe__track {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}
.bd-swipe.is-at-end .bd-swipe__track,
.bd-swipe.bd-swipe--nescroll .bd-swipe__track { -webkit-mask-image: none; mask-image: none; }

/* ==========================================================================
   tpleshop 1.30 – pätička na odklik, popis kategórie, filter na mobile (FAB) (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1418-1473)
   ========================================================================== */
/* ---- Pätička na mobile na odklik (cf-ui.js) ---- */
.bd-foot-toggle { display: none; }
@media (max-width: 767.98px) {
    .bd-foot-collapsible .es-module__header { display: none; }
    .bd-foot-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        gap: 0.5rem; padding: 0.7rem 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
    }
    .bd-foot-toggle__ico { flex: 0 0 auto; transition: transform 0.2s ease; }
    .bd-foot-collapsible.is-open .bd-foot-toggle__ico { transform: rotate(180deg); }
    .bd-foot-collapsible .es-module__body { display: none; }
    .bd-foot-collapsible.is-open .es-module__body { display: block; padding-top: 0.5rem; }
    .bd-foot-collapsible { margin-bottom: 0 !important; }
}

/* ---- Popis kategórie na mobile: 4 riadky + „Čítať viac" ---- */
@media (max-width: 767.98px) {
    .es-category-header__desc {
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .es-category-header__desc.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .bd-desc-toggle {
        display: inline-block; margin: 0.25rem 0 0.75rem; padding: 0; border: 0; background: none;
        color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer;
    }
}

/* ---- Filter: PC v ľavom stĺpci, mobil vysúvací panel + plávajúce tlačidlo (cf-ui.js) ---- */
.bd-filter-fab, .bd-filter-close, .bd-filter-backdrop { display: none; }
@media (max-width: 767.98px) {
    /* Phoca stránky: panel je mimo obrazovky hneď z CSS (nie až keď cf-ui.js pridá .bd-filter-panel) —
       inak na mobile pri načítaní prebleskne v obsahu (Robert 14.9.). Animácia až po inicializácii. */
    .com-phocacart .es-sidebar--left,
    .bd-filter-panel {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px); z-index: 1200;
        background: var(--color-surface); overflow-y: auto; padding: 3rem 1rem 1.5rem;
        transform: translateX(-100%); transition: none; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
    }
    .bd-filter-panel { transition: transform 0.25s ease; }
    body.bd-filter-open .es-sidebar--left.bd-filter-panel, body.bd-filter-open .bd-filter-panel { transform: translateX(0); }
    .bd-filter-close {
        display: grid; place-items: center; position: absolute; top: 0.6rem; right: 0.6rem; width: 36px; height: 36px;
        border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-heading); cursor: pointer;
    }
    .bd-filter-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1150; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    body.bd-filter-open .bd-filter-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .bd-filter-fab {
        position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1100;
        display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border: 0; border-radius: 999px;
        background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: 600; box-shadow: 0 6px 20px rgba(74, 24, 0, 0.35); cursor: pointer;
    }
    body.bd-filter-open .bd-filter-fab { display: none; }
    body.view-checkout .bd-filter-fab { display: none; }
}

/* ==========================================================================
   tpleshop 1.30 – naposledy prezerané (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1474-1603)
   ========================================================================== */
/* ============================================================
   Naposledy prezerané — pás sa dokresľuje v prehliadači z localStorage
   (bd-recent.js), preto tu ide len o vzhľad. Kartička je zámerne menšia
   než produktová: je to pomôcka na návrat, nie ďalší výpis tovaru.
   ============================================================ */
.bd-recent__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 150px;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 8px);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.bd-recent__item:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.bd-recent__img {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.bd-recent__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.bd-recent__nazov {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.25;
}

.bd-recent__cena {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
}

@media (max-width: 767.98px) {
    .bd-recent__item {
        width: 122px;
    }
}

/* mazanie: krížik na kartičke a odkaz na vymazanie celého pásu */
.bd-recent__item {
    position: relative;
}

.bd-recent__odkaz {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

.bd-recent__zmaz {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.bd-recent__item:hover .bd-recent__zmaz,
.bd-recent__zmaz:focus-visible {
    opacity: 1;
}

/* na dotyku nie je hover — tam nech je krížik vidno vždy */
@media (hover: none) {
    .bd-recent__zmaz {
        opacity: 1;
    }
}

.bd-recent__zmaz:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.bd-recent__akcie {
    margin: 0.25rem 0 0;
    text-align: center;
}

.bd-recent__zmaz-vsetko {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary, #6b7280);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

.bd-recent__zmaz-vsetko:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   tpleshop 1.30 – pravý stĺpec (články, značky) (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1604-1676)
   ========================================================================== */
/* ============================================================
   Pravý stĺpec (blog, značky): zoznam článkov je v 300 px stĺpci
   nepoužiteľný — obrázok si bral 210 px a na názov ostalo 90,
   takže sa lámal po slovách. Malý štvorcový náhľad vľavo, názov
   dostane zvyšok.
   ============================================================ */


@media (max-width: 767.98px) {
    .es-bottom__grid { gap: 0; }
    .es-bottom__col:not(.bd-foot-collapsible) { margin-top: 1.25rem; }
}

/* Naposledy prezerané — menšie (Robert 12.9.): kartička 120 px (mobil 96 px),
   drobný názov, malá cena, menší nadpis pásu. Pravidlá swipe kariet majú
   rovnakú špecificitu a boli neskôr → tu vyššia špecificita. */
.bd-recent .bd-swipe__item.bd-recent__item {
    width: 120px !important;
    flex: 0 0 120px !important;
    padding: 0.4rem;
    gap: 0.25rem;
}
.bd-recent .bd-recent__nazov {
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bd-recent .bd-recent__cena {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
}
.bd-recent .bd-recent__img img {
    max-height: 100%;
    object-fit: contain;
}
.bd-recent .bd-swipe__track {
    gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
}
.es-showcase .es-module:has(> .es-module__body [data-bd-recent]) .es-module__title--xl,
[data-bd-recent] .es-module__title {
    font-size: 1.125rem !important;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
[data-bd-recent] .es-module__title::after { width: 2rem; height: 2px; }
.bd-recent__akcie { margin: 0.25rem 0 0; font-size: 0.75rem; }
@media (max-width: 767.98px) {
    .bd-recent .bd-swipe__item.bd-recent__item {
        width: 96px !important;
        flex: 0 0 96px !important;
    }
}

/* Hero „contained" zarovno s kontajnerom (Robert 12.9.): base dáva len zvislý
   padding, hero teda šiel od okraja k okraju so zaoblením — tu rovnaká šírka
   a odsadenie ako .es-container, aby lícoval s obsahom pod ním. */
.es-hero--contained {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-md) 0 0;   /* vodorovné odsadenie dáva vnútorný .es-container */
}
.es-hero--contained .wp-showcase--hero {
    margin-inline: 0 !important;   /* base hero „bleeduje" cez max(-10%, 50%-50vw) → zarovno s obsahom */
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ==========================================================================
   tpleshop 1.30 – poradie filtra: Dostupnosť za kategóriou a cenou (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1677-1686)
   ========================================================================== */
/* ---- Filter: Dostupnosť hneď za kategóriou a cenou (boatdiesel bod 9.3).
   Phoca kreslí parametre až za výrobcami; poradie prehadzujeme flexom. ---- */
#phFilterBox { display: flex; flex-direction: column; }
#phFilterBox > .panel              { order: 5; }
#phFilterBox > .panel-id           { order: 1; }
#phFilterBox > .panel-price_from   { order: 2; }
#phFilterBox > .panel-dostupnost   { order: 3; }
#phFilterBox > .panel-manufacturer { order: 4; }
#phFilterBox .panel-body { max-height: 17rem; overflow-y: auto; scrollbar-width: thin; }

/* ==========================================================================
   tpleshop 1.30 – výpis kategórie: karta s Do košíka; úvodka dlaždice a pásy na mobile (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 3756-3815)
   ========================================================================== */
/* ==========================================================================
   VÝPIS KATEGÓRIE — karta len s „Do košíka" (Robert 13.9.): tlačidlo „Zobraziť produkt"
   vypína Phoca (display_view_product_button=0), počet kusov skryjeme (formulár pošle 1)
   ========================================================================== */
.ph-category-action-box-buttons .ph-form-quantity,
.ph-items-action-box-buttons .ph-form-quantity { display: none !important; }

.ph-category-action-box-buttons .ph-form-button,
.ph-category-action-box-buttons .ph-form-button .ph-btn { width: 100%; }

/* ==========================================================================
   ÚVODKA — dlaždice kategórií vyplnia šírku kontajnera na PC (Robert 13.9.: „väčšie, nech vyplnia šírku")
   ========================================================================== */
@media (min-width: 992px) {
    :not(.view-category) .ph-category-module-box.es-cat-grid {
        --es-cat-card-min: 150px;
        --es-cat-track-max: 1fr;      /* auto-fit + 1fr = 7 dlaždíc sa natiahne cez celú šírku */
        --es-cat-card-gap: var(--space-lg, 1.5rem);
    }

    :not(.view-category) .ph-category-module-box.es-cat-grid .es-cat-grid__title { font-size: 1rem; text-align: center; }
}

/* ==========================================================================
   MOBIL (< 768 px): „Čo u nás nájdete" a recenzie na úvodke ako posuvný pás (Robert 14.9.),
   rovnaké správanie ako produktové kartičky; súhrn hodnotenia ostáva stabilný nad pásom.
   Len na úvodke (.is-home) – na stránke Recenzie a O nás idú karty pod seba (Robert 16. 9.)
   ========================================================================== */
@media (max-width: 767.98px) {
    .wp-showcase--features .wp-showcase__grid,
    .is-home .es-reviews-wall .es-reviews-grid {
        display: flex !important;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 0.125rem;
        padding: 0.25rem 0.125rem 0.75rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* závoj vpravo = „pokračuje to" */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

    .wp-showcase--features .wp-showcase__grid::-webkit-scrollbar,
    .is-home .es-reviews-wall .es-reviews-grid::-webkit-scrollbar { display: none; }

    .wp-showcase--features .wp-showcase__feature {
        flex: 0 0 min(72vw, 260px);
        scroll-snap-align: start;
    }

    .is-home .es-reviews-wall .es-review-card {
        flex: 0 0 min(82vw, 320px);
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   tpleshop 1.30 – kategórie v dráhe so šípkami, mobil (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4285-4325)
   ========================================================================== */
/* ---- úvodka PC: kategórie väčšie, v jednej dráhe so šípkami (ar-kategorie.js) ---- */
@media (min-width: 768px) {
    .is-home .es-showcase--1 .ph-category-module-box { position: relative; }
    .is-home .es-showcase--1 .es-cat-grid__track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
    .is-home .es-showcase--1 .es-cat-grid__track::-webkit-scrollbar { display: none; }
    .is-home .es-showcase--1 .es-cat-grid__track > ul { display: flex !important; flex-wrap: nowrap !important; gap: 1.25rem !important; width: max-content; padding: .25rem 0 .75rem; justify-content: flex-start !important; }
    .is-home .es-showcase--1 .es-cat-grid__item { flex: 0 0 auto !important; width: 228px !important; max-width: none !important; scroll-snap-align: start; }
    .is-home .es-showcase--1 .es-cat-grid__image { width: 100% !important; max-width: none !important; height: 228px !important; }
    .is-home .es-showcase--1 .es-cat-grid__title { font-size: 1rem; }
    .ar-kat-btn { position: absolute; top: 96px; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-heading); box-shadow: 0 4px 14px rgba(0,0,0,.14); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
    .ar-kat-btn:hover { background: var(--color-primary); color: var(--color-on-primary); }
    [data-theme="dark"] .ar-kat-btn:hover { color: var(--color-on-accent); }
    .ar-kat-btn--prev { left: -1.25rem; } .ar-kat-btn--next { right: -1.25rem; }
    .ar-kat-btn[hidden] { display: none; }
    .ar-kat--nescroll .ar-kat-btn { display: none; }
}

/* ---- košík: počet položiek nad ikonou žltý s čiernym číslom (bol červený) ---- */
.es-header-icon-count, .es-cart-count { background: var(--color-accent) !important; color: var(--color-on-accent) !important; }
/* ---- mobil: šípky kategórií len na PC; články v dráhe po jednom; čísla prednosti menšie ---- */
@media (max-width: 767.98px) {
    .ar-kat-btn { display: none !important; }
    .bd-swipe--articles .bd-swipe__item, .bd-swipe__item--article { flex: 0 0 calc(100% - 1.5rem) !important; width: calc(100% - 1.5rem) !important; max-width: none !important; }
    .wp-showcase__stat-number { font-size: 1.6rem !important; }
    .wp-showcase__stat-label { font-size: .8rem; }
    .wp-showcase__stats-row { gap: .75rem !important; }
}
/* mobil: celé logo, ale malé – nesmie roztiahnuť hlavičku (Robert) */
@media (max-width: 767.98px) {
    .es-header__logo img, .es-header__brand img { height: 20px !important; width: auto !important; max-width: 150px !important; }
    .es-header__brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
}
@media (max-width: 400px) { .es-header__logo img, .es-header__brand img { height: 18px !important; max-width: 132px !important; } }
/* mobil: ikony v hlavičke ďalej od seba a väčšie cieľové plochy (Robert: klikám omylom na tému namiesto košíka; logo je už malé, miesto je) */
@media (max-width: 767.98px) {
    .es-header__actions { gap: .55rem !important; }
    .es-header__actions .es-header-icon-btn { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; }
    .es-header__actions .es-theme-toggle { margin-left: .35rem; }
}
@media (max-width: 360px) { .es-header__actions { gap: .35rem !important; } }

/* ==========================================================================
   tpleshop 1.30 – prečiarknutá cena, náhľad neorezať, odznak Obľúbené (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4502-4521)
   ========================================================================== */
/* ---- prečiarknutá pôvodná cena vo výpise: Phoca ju farbí červenou (--ph-error) – tlmená sivá, nech nekričí (Robert 16. 9.) ---- */
.ph-category-price-box .ph-price-original,
.ph-item-price-box .ph-price-original,
.es-product-card .ph-price-original { color: var(--color-text-muted, #6b7785) !important; font-weight: 500; }
/* overline 1. slidu: téma farbí .wp-hero__overline akcentom, prvý slide má byť biely tenký (modul 1.2.5) */
.wp-hero__overline--first { color: rgba(255, 255, 255, .82); font-weight: 500; }

/* ---- výpis kategórie: náhľad sa nesmie orezať (Robert 16. 9.) – Phoca náhľad m je 360 px na výšku (crop_thumbnail=0), box karty je štvorec,
   obrázok mal height:auto → pretŕčal a orezal sa. Obrázok vpasovať do štvorca (contain), ako na boat/cofex. ---- */
.es-product-card .phIBox, .es-product-card .phIBoxOH { aspect-ratio: 1 / 1; overflow: hidden; }
.es-product-card .phIBox picture, .es-product-card .phIBox img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain !important; }
.bd-znacky__pas .bd-swipe[hidden] { display: none; }   /* po rozbalení mriežky sa pás skryje (skript dáva hidden, .bd-swipe má display:flex) */

/* ---- odznak „Obľúbené" (Phoca hot = predaje ≥ 7; text cez override COM_PHOCACART_HOT): rovnaká veľkosť a tvar ako ZĽAVA,
   čierny s bielym písmom, aby sa líšil od akcentovej zľavy (Robert 16. 9.) ---- */
.ph-corner-icon-wrapper { display: inline-block; margin: 0 .25rem 0 0; }
.ph-corner-icon, .ph-corner-icon1, .ph-corner-icon2 { display: inline-block; padding: .2rem .5rem; border-radius: .25rem; background: var(--ar-dark, #111); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; width: auto; height: auto; position: static; }
[data-theme="dark"] .ph-corner-icon { background: var(--color-primary); color: var(--color-on-primary); }
.es-product-card__labels { display: flex; flex-wrap: wrap; gap: .25rem; align-items: flex-start; }

/* ==========================================================================
   tpleshop 1.30 – filter: parametre, poradie Značka za Farbou (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4650-4663)
   ========================================================================== */
/* ---- filter (Robert 17. 9.): parametre Veľkosť/Farba namiesto atribútov (parametre_filter.php), Značka až za Farbou – poradie blokov
   Phoca je pevné (kategória, cena, značka, …, parametre) → flex order ---- */
#phFilterBox { display: flex; flex-direction: column; }
#phFilterBox > .panel { order: 6; }
#phFilterBox > .panel-id { order: 1; }
#phFilterBox > .panel-price_from { order: 2; }
#phFilterBox > .panel-dostupnost { order: 3; }   /* parameter z údržby e-shopu (wpudrzba) */
#phFilterBox > .panel-velkost { order: 4; }
#phFilterBox > .panel-farba { order: 5; }
#phFilterBox > .panel-manufacturer { order: 7; }
/* dlhý zoznam hodnôt (čísla obuvi, oz, cm) – dva stĺpce, aby filter nebol na 3 obrazovky */
#phFilterBox > .panel-velkost .panel-body { columns: 2; column-gap: .75rem; max-height: none !important; height: auto !important; overflow: visible !important; }
#phFilterBox > .panel-velkost .panel-body .controls { break-inside: avoid; }

/* ==========================================================================
   tpleshop 1.30 – detail produktu: rozloženie (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 408-541)
   ========================================================================== */
/* =========================================
   Phoca Cart product detail
   ========================================= */

#ph-pc-item-box h1,
.ph-item-price-panel h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-heading);
    font-size: 1.875rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    #ph-pc-item-box h1,
    .ph-item-price-panel h1 {
        font-size: 2.25rem;
    }
}

.ph-item-image-full-box {
    border-radius: var(--card-radius);
    border: 1px solid var(--color-border);
    background: var(--es-media-plate);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(74, 24, 0, 0.04);
}

.ph-item-image-full-box img {
    max-height: 500px;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.ph-item-image-full-box:hover img {
    transform: scale(1.04);
}

/* Thumbnail gallery */
.ph-item-image-add-box > div,
.ph-item-image-box {
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    padding: 0.5rem;
    background: var(--es-media-plate);
    transition: border-color 0.2s;
}

.ph-item-image-box:hover {
    border-color: var(--color-accent);
}

/* Item price - big bold espresso */
.ph-item-price-box .ph-price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-body);
}

/* Stock status */
.ph-stock-in-stock,
.ph-stock-status-in-stock {
    background: rgba(46, 107, 58, 0.1);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Quantity input */
.ph-quantity-input,
input[name="quantity"] {
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border-color: var(--color-border);
    padding: 0.75rem 1rem;
    height: 3rem;
    font-weight: 500;
}

/* Item view add-to-cart - large */
.ph-item-price-panel .ph-btn,
.ph-item-price-panel .phCartButton {
    border-radius: var(--radius-md);
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(74, 24, 0, 0.22);
}

/* Mobile - smaller buttons */
@media (max-width: 767px) {
    .ph-btn,
    .ph-btn-add-to-cart,
    .phCartButton,
    .btn.ph-btn,
    button.ph-btn,
    .es-btn,
    .wp-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    .es-btn--lg,
    .wp-btn--lg {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .ph-quantity-input,
    input[name="quantity"] {
        height: 2.5rem;
        padding: 0.5rem 0.75rem;
    }

    .ph-item-price-panel .ph-btn,
    .ph-item-price-panel .phCartButton {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .ph-item-price-box .ph-price {
        font-size: 1.75rem;
    }

    .wp-hero__buttons .wp-btn--lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   tpleshop 1.30 – detail: taby/akordeón, špecifikácie, parametre ako odznaky, filter (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 542-652)
   ========================================================================== */
/* =========================================
   Phoca Cart tabs / accordion
   ========================================= */

.ph-item-bottom-box .tab-pane::before {
    content: attr(data-title);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-heading);
    cursor: pointer;
}

.ph-item-bottom-box .ph-desc,
.ph-item-bottom-box .tab-pane > div {
    color: var(--color-text);
    line-height: 1.7;
    padding-bottom: 1.5rem;
}

/* =========================================
   Specifications grid
   ========================================= */

.ph-spec-group-title {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 700;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.ph-item-view-data-box table,
.ph-spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ph-item-view-data-box table tr,
.ph-spec-table tr {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ph-item-view-data-box table tr:last-child,
.ph-spec-table tr:last-child {
    border-bottom: none;
}

.ph-spec-title {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0 0 0.25rem 0;
}

.ph-spec-value {
    color: var(--color-heading);
    font-weight: 500;
    padding: 0;
}

/* =========================================
   Parameters - latte badges
   ========================================= */

.ph-item-parameters-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
    padding: 0;
    border: none;
}

.ph-parameter-box {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4em 0.85em;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

[data-theme="dark"] .ph-parameter-box {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* =========================================
   Filter
   ========================================= */

.es-filter input[type="checkbox"],
.es-filter input[type="radio"] {
    accent-color: var(--color-primary);
}

/* ==========================================================================
   tpleshop 1.30 – pokladňa v tmavom režime ([data-bs-theme] ↔ [data-theme]) (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 862-980)
   ========================================================================== */
/* =========================================
   Pokladňa v tmavej - Phoca prepína cez [data-bs-theme], my cez [data-theme]
   (boatdiesel: formulár adresy bol biela karta s bielym písmom)
   ========================================= */

[data-theme="dark"] {
    --ph-grey-bg: var(--color-surface-alt);
    --ph-white-bg: var(--color-surface);
    --ph-grey-border: var(--color-border);
}

/* Statické stránky (Kontakt, OP…) majú info blok vypnutý, ale šablóna aj tak
   vypíše „1 min čítania" (default.php: `$showMeta || $readingTime > 0`).
   Samotný čas čítania bez dátumu/autora nedáva zmysel → skryť, ak je v bloku sám. */
.wp-article__meta:has(> .wp-article__reading-time:only-child) {
    display: none;
}

/* Úvodka bez obsahu komponentu (hideComponentHome): prázdny <main> držal ~300 px
   bielej medzery medzi hero a výkladnými sekciami. Skryť, keď je naozaj prázdny
   (nič okrem prázdneho kontajnera systémových správ). */
.is-home .es-main:not(:has(.es-container > :not(#system-message-container), #system-message-container > *)) {
    display: none;
}

/* Mobilná hlavička: logo + 4 ikony + hamburger sa na 390 px nezmestili
   (scrollWidth 424 → stránka sa dala posúvať do boku, vpravo vykúkal okraj
   košíkovej zásuvky). Na úzkych displejoch skryť obľúbené (sú v pätičke aj v účte)
   a stiahnuť rozostupy. */
@media (max-width: 480px) {
    .es-header__actions {
        gap: 0.125rem;
    }
    /* obľúbené (ikona bez .es-cart-btn-wrap) a prepínač témy — na mobile
       tmavý režim aj tak ide podľa systému, obľúbené sú v pätičke a v účte */
    .es-header__actions .es-header-icon-wrap:not(.es-cart-btn-wrap) {
        display: none;
    }
    /* prepínač témy ostáva aj na mobile (Robert 14.9.) — miesto spraví menšie logo */
    .es-header__logo img { --es-logo-height-mobile: 1.9em; }
    .es-topbar .cf-len-pc {
        display: none;
    }
}

/* Dlaždice kategórií v katalógu a v kategórii — malé ako na boatdiesel (Robert 11.9.:
   „veľkostne ako boatdiesel, vedľa seba, malé fotky"). Base variant --catalog ich
   nafukuje na 240–340 px; tu 150–168 px, hustejšia mriežka, menší popisok. */
.es-cat-grid,
.es-cat-grid--catalog {
    --es-cat-card-min: 150px;
    --es-cat-card-max: 168px;
    --es-cat-card-gap: var(--space-md);
}

.es-cat-grid--catalog .es-cat-grid__title {
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .es-cat-grid--catalog .es-cat-grid__item {
        width: 124px !important;
        flex: 0 0 124px !important;
    }
}

/* Hlavička s 8 kategóriami + Blog + Kontakt sa do 1365 px nezmestí (na 1440 pri
   základných rozostupoch liezli položky na logo a Kontakt na lupu — rovnaká pasca
   ako boatdiesel). Do 1365 px hamburger, od 1366 px stiahnuté rozostupy a písmo.
   template.min.css sa načítava AŽ ZA témou → !important. */
/* 17. 9.: navbar má už len E-shop · Novinky a rady · O nás · Kontakt (strom je pod E-shopom) → hamburger stačí do 1023 px (hranica šablóny, ako cofex). */
@media (max-width: 1023px) {
    .es-header__nav {
        display: none !important;
    }
    .es-header__toggle {
        display: inline-flex !important;
    }
}

@media (min-width: 1024px) {
    .es-header__nav ul {
        gap: 0;
    }
    .es-header__nav a,
    .es-phoca-nav--navbar .es-phoca-nav__list--root > .es-phoca-nav__item > .es-phoca-nav__link {
        padding: var(--space-sm) 0.55rem !important;
        font-size: 0.8125rem !important;
        letter-spacing: -0.01em;
    }
    .es-header__logo img {
        height: 2.6em;
    }
}

@media (min-width: 1600px) {
    .es-header__nav a,
    .es-phoca-nav--navbar .es-phoca-nav__list--root > .es-phoca-nav__item > .es-phoca-nav__link {
        padding: var(--space-sm) 0.8rem !important;
        font-size: 0.875rem !important;
    }
}


/* Fotky rôznych rozmerov: Phoca ich už neoreže (crop_thumbnail=0, štvorcové boxy
   1000/500/240), šablóna ich vpasuje (object-fit: contain) — tu doplnené aj miesta,
   kde base používa cover (košík, pokladňa, karty podkategórií). */
.ph-cart-cart-row-item img,
.ph-mod-cart-image img,
.ph-img-cart-cart,
.ph-checkout-cart-image img,
.ph-img-cart-checkout,
.ph-checkout-cart-row-item .ph-checkout-cart-image img,
.es-subcategory-card__image img {
    object-fit: contain;
    background: var(--es-media-plate);
}

/* ==========================================================================
   tpleshop 1.30 – pokladňa a košík: mobil, hosť prvý, formuláre, kroky, hlášky, súhrn, mini košík, boxy dopravy/platby, tlačidlá, Lighthouse (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 1687-2715)
   ========================================================================== */
/* ============================================================
   POKLADŇA A KOŠÍK — port z boatdiesel (web6, 12.–13. 9. 2026; Robert: „hlavne pokladňa sa riešila").
   Bloky 1:1 s .theme-boatdiesel → body, farby na tokeny témy.
   ============================================================ */

/* ============================================================
   POKLADŇA NA MOBILE (5. 9.)
   Šablóna tam drží dole lištu „Zobraziť súhrn" (.pc-mobile-cta, telo si
   rezervuje 80 px). Na nej ležala bublina poradcu aj ikonka cookies.
   V pokladni ide o dokončenie nákupu — plávajúce prvky preč, aby nič
   neprekrývalo súhrn a tlačidlo. Šípku „hore" dvíhame nad lištu.
   ============================================================ */
@media (max-width: 1023.98px) {
    body.view-checkout .wpp-bublina,
    body.pc-has-mobile-cta .wpp-bublina,
    body.view-checkout .cc-trigger,
    body.view-checkout .cc-trigger-icon,
    body.pc-has-mobile-cta .cc-trigger,
    body.pc-has-mobile-cta .cc-trigger-icon {
        display: none !important;
    }

    body.view-checkout .es-back-to-top,
    body.view-checkout .es-back-to-top,
    body.pc-has-mobile-cta .es-back-to-top {
        bottom: calc(80px + 1rem) !important;
    }

    /* rozbalený súhrn siaha do polovice obrazovky — nech je nad ním
       ešte vidno hlavičku kroku, nie plávajúce ozdoby */
    body.view-checkout .bd-filter-fab {
        display: none !important;
    }
}

/* ============================================================
   POKLADŇA: nákup ako hosť ako hlavná voľba (5. 9.)
   Phoca dáva prihlásenie prvé a hosťa do rohu; pri sezónnom nákupe
   je to naopak — účet chce málokto. Override šablóny dvíha hosťa hore,
   tu mu dávame váhu a prihlásenie stlmíme.
   ============================================================ */
.bd-hostuje {
    margin-bottom: 1.5rem;
}

.bd-hostuje__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--card-radius, 0.5rem);
    background: var(--color-surface);
}

.bd-hostuje__btn {
    padding: 0.65rem 1.4rem;
    font-weight: 600;
    font-size: 1rem;
}

.bd-hostuje__popis {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

/* Prihlásenie a registrácia sú sekundárne. Základná template.css sa načítava
   po téme, preto tu potrebujeme !important — inak ostanú plné červené. */
.ph-checkout-box-login button.ph-checkout-btn-login,
.ph-checkout-box-login .ph-login-form button[type="submit"],
.ph-checkout-box-login form:not(.bd-hostuje__form) button.btn-primary,
.ph-checkout-box-login a.btn-primary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    font-weight: 500;
}

.ph-checkout-box-login button.ph-checkout-btn-login:hover,
.ph-checkout-box-login .ph-login-form button[type="submit"]:hover,
.ph-checkout-box-login form:not(.bd-hostuje__form) button.btn-primary:hover,
.ph-checkout-box-login a.btn-primary:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

/* registračná krabica nech nekričí červeným pozadím */
.ph-checkout-box-login .ph-box-header,
.ph-checkout-box-login .ph-left-border {
    background: transparent !important;
}

/* hlavné tlačidlo hosťa musí ostať plné */
.bd-hostuje__form button.bd-hostuje__btn {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

@media (max-width: 575.98px) {
    .bd-hostuje__form { flex-direction: column; align-items: stretch; text-align: center; }
    .bd-hostuje__btn { width: 100%; }
}

/* Nastavenia cookies v pätičke (5. 9.) — rovnaký prístup ako v tpl_magazin:
   tlačidlo vykresľuje šablóna, nie obsah modulu. */
.es-footer__cookies {
    display: flex;
    justify-content: center;
    padding: .35rem 0 1rem;
    grid-column: 1 / -1;   /* pätička je mriežka, inak by tlačidlo sedelo v prvom stĺpci */
}

.es-footer__cookie-btn {
    background: none;
    border: 0;
    padding: .25rem .5rem;
    font: inherit;
    font-size: .85rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.es-footer__cookie-btn:hover,
.es-footer__cookie-btn:focus-visible {
    color: var(--color-primary);
}

/* Autorizované značky sú teraz preklik na tovar danej značky (5. 9.) */
.bd-auth__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.bd-auth__card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--card-shadow-hover);
}

.bd-auth__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}


/* ---- telefón: formuláre nech nezužujú priestor (Robert 12. 9.) ----
   Pokladňa: Phoca dáva riadku aj stĺpcu 16 px zboku (spolu 64 px z 390),
   formuláre v článkoch: obal 20 px + fieldset 21,6 px. Necháme 12 px. */
@media (max-width: 575.98px) {
    .pc-checkout-view .ph-checkout-box-action {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .pc-checkout-view .ph-checkout-box-action > [class*="col-"],
    .pc-checkout-view .ph-checkout-billing-row,
    .pc-checkout-view .ph-checkout-shipping-row {
        padding-left: 0;
        padding-right: 0;
    }

    .pc-checkout-view .row.form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .pc-checkout-view .row.form-group > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .pc-checkout-view .ph-checkout-box-login .ph-checkout-box-action > div > div {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .wp-formular {
        padding: .75rem;
    }

    .wp-formular fieldset,
    .wp-formular .m-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .wp-formular legend {
        padding-left: 0;
    }
}


/* ---- pokladňa na telefóne (Robert 12. 9.): kroky, hosť, „Nakupujem na firmu" ---- */
@media (max-width: 575.98px) {
    /* kroky: len čísla s jednou spojitou linkou, názov len pri aktívnom kroku
       (pôvodne sa nezalomené názvy prekrývali a spojnice vyzerali ako pomlčky) */
    .pc-progress__list {
        position: relative;
        justify-content: space-between;
        align-items: center;
    }

    .pc-progress__list::before {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        top: 50%;
        height: 2px;
        background: var(--color-border, #e5e7eb);
        transform: translateY(-50%);
    }

    .pc-progress__step {
        flex: 0 1 auto;
        padding: .4rem 0;
        gap: .4rem;
        z-index: 1;
    }

    .pc-progress__step + .pc-progress__step::before {
        display: none;
    }

    .pc-progress__step:not(.pc-progress__step--active) .pc-progress__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .pc-progress__step--active {
        padding-right: .5rem;
        background: var(--color-body-bg, #fff);
    }

    /* čakajúce kroky prekryjú linku bielym kruhom; hotové/aktívne ostávajú červené */
    .pc-progress__step:not(.pc-progress__step--done):not(.pc-progress__step--active) .pc-progress__num {
        background: var(--color-body-bg, #fff);
    }
}

/* hosť: text „Nákup ako hosť" nad tlačidlom Zrušiť je duplicita hlavičky sekcie → nech je to jeden riadok s odstupom */
.ph-checkout-add-guest > div:first-child {
    margin-bottom: .6rem;
    color: var(--color-text-muted, #6b7280);
    font-size: .9rem;
}

.ph-checkout-add-guest .ph-checkout-btn-login-box {
    float: none;
    margin-top: .25rem;
}

/* „Nakupujem na firmu": políčko s odstupom od poľa nad ním a pod ním */
.bd-na-firmu {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .6rem 0 .9rem;
    cursor: pointer;
}

.bd-na-firmu input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--color-primary);
}


/* ---- systémové hlášky (napr. „Produkt bol pridaný do košíka") v tmavej téme ----
   Joomla dáva svetlé pastelové pozadie, na tmavom je to rušivé → tmavé tónované varianty. */
[data-theme="dark"] joomla-alert,
[data-theme="dark"] .alert {
    --bd-al-bg: var(--color-surface-alt);
    --bd-al-fg: var(--color-text, #e2e8f0);
    --bd-al-bd: #2e3a5c;
    background: var(--bd-al-bg) !important;
    color: var(--bd-al-fg) !important;
    border: 1px solid var(--bd-al-bd) !important;
    box-shadow: none;
}

[data-theme="dark"] joomla-alert[type="success"],
[data-theme="dark"] .alert-success {
    --bd-al-bg: #14301f;
    --bd-al-fg: #bfe8c9;
    --bd-al-bd: #1f5a30;
}

[data-theme="dark"] joomla-alert[type="warning"],
[data-theme="dark"] .alert-warning {
    --bd-al-bg: #3a2c0f;
    --bd-al-fg: #f3d58a;
    --bd-al-bd: #6b5215;
}

[data-theme="dark"] joomla-alert[type="danger"],
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    --bd-al-bg: #3b1218;
    --bd-al-fg: #f4b8c0;
    --bd-al-bd: #7a1f2b;
}

[data-theme="dark"] joomla-alert .joomla-alert--close,
[data-theme="dark"] joomla-alert button.joomla-alert--close,
[data-theme="dark"] joomla-alert .alert-message {
    color: inherit !important;
}


/* ---- súhrn košíka v pokladni (Robert 12. 9.: „neprehľadný") ----
   Phoca skladá 6 stĺpcov do 300 px. Namiesto tabuľky: obrázok · názov · množstvo · cena s DPH;
   stĺpce „bez dane" a „daň" preč (DPH je v rekapitulácii), hlavička preč. */
.ph-checkout-cart-box .ph-checkout-cart-row-header,
.ph-checkout-cart-box .ph-checkout-cart-netto,
.ph-checkout-cart-box .ph-checkout-cart-tax,
.ph-checkout-cart-box .ph-checkout-cart-row-hr {
    display: none !important;
}

.ph-checkout-cart-box .ph-checkout-cart-row-item {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "obr nazov" "akcie akcie";
    column-gap: .75rem;
    row-gap: .35rem;
    align-items: center;
    margin: 0 0 .5rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.ph-checkout-cart-box .ph-checkout-cart-row-item > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ph-checkout-cart-box .ph-checkout-cart-row-item > .ph-checkout-cart-image { grid-area: obr; }
.ph-checkout-cart-box .ph-checkout-cart-row-item > .ph-checkout-cart-title { grid-area: nazov; font-size: .9rem; line-height: 1.3; }
.ph-checkout-cart-box .ph-checkout-cart-row-item > .ph-checkout-cart-quantity { grid-area: akcie; justify-self: start; }
.ph-checkout-cart-box .ph-checkout-cart-row-item > .ph-checkout-cart-brutto { grid-area: akcie; justify-self: end; text-align: right; }

.ph-checkout-cart-box .ph-img-cart-checkout {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: .35rem;
    background: #fff;
}

.ph-checkout-cart-box .ph-checkout-cart-quantity .input-group {
    flex-wrap: nowrap;
    width: auto;
}

.ph-checkout-cart-box .ph-input-quantity {
    width: 3.2rem !important;
    text-align: center;
    padding: .25rem .3rem;
}

.ph-checkout-cart-box .ph-checkout-cart-quantity .ph-btn {
    padding: .25rem .45rem;
}

.bd-cart-suma {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.bd-cart-kus {
    display: block;
    font-size: .78rem;
    color: var(--color-text-muted, #6b7280);
    white-space: nowrap;
}

/* rekapitulácia: text vľavo, suma vpravo, bez prázdneho stĺpca */
.ph-checkout-cart-box .ph-checkout-cart-row-subtotal {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding: .2rem 0;
}

.ph-checkout-cart-box .ph-checkout-cart-row-subtotal > .col-0 {
    display: none;
}

.ph-checkout-cart-box .ph-checkout-cart-row-subtotal > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

.ph-checkout-cart-box .ph-cart-total-box {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: 1.05rem;
    font-weight: 700;
}


/* ---- mini košík v hlavičke: „2× · názov · cena s DPH" (šablóna vnucuje #phItemCartBox .row flex
   a stĺpcom flex:1 → treba id v selektore; názov sa zalamuje, nie orezáva) ---- */
#phItemCartBox .ph-cart-cart-row-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .6rem;
    align-items: start;
    padding: .55rem 0;
}

#phItemCartBox .ph-cart-cart-row-item > [class*="col-"] {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    min-width: 0;
}

#phItemCartBox .ph-cart-small-quantity {
    white-space: nowrap;
    color: var(--color-text-muted, #6b7280);
}

#phItemCartBox .ph-cart-small-title,
#phItemCartBox .ph-cart-small-title a {
    font-size: .9rem;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: block;
}

#phItemCartBox .ph-cart-small-price {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

#phItemCartBox .ph-cart-cart-row-header {
    display: none !important;
}

/* mini košík: bez linky pod hlavičkou „Nákupný košík" (Robert 12. 9.) */
.es-cart-offcanvas__header {
    border-bottom: 0;
}

#phItemCartBox .ph-cart-cart-row-item:first-of-type {
    padding-top: 0;
}

/* mini košík: prvá položka mala nad sebou linku z prázdneho oddeľovacieho riadku (ph-hr) — oddeľovače riešia položky samy */
#phItemCartBox .ph-cart-cart-row-hr,
#phItemCartBox .ph-cart-cart-row-hr .ph-hr {
    display: none !important;
    height: 0;
    border: 0;
}


/* ---- Pokladňa: spôsoby dopravy a platby – celý box je klikateľný (JS v bd-pas.js), kompaktnejší, vybraný zvýraznený ---- */
.ph-checkout-shipping-item,
.ph-checkout-payment-item {
    cursor: pointer;
    padding: .65rem .9rem;
    min-height: 0;
    transition: border-color .15s, background-color .15s;
}

.ph-checkout-shipping-item:hover,
.ph-checkout-payment-item:hover {
    border-color: var(--color-primary, var(--color-primary));
}

.ph-checkout-shipping-item:has(input:checked),
.ph-checkout-payment-item:has(input:checked) {
    border-color: var(--color-primary, var(--color-primary));
    box-shadow: inset 0 0 0 1px var(--color-primary, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary, var(--color-primary)) 5%, transparent);
}

.ph-checkout-shipping-item .controls,
.ph-checkout-payment-item .controls,
.ph-checkout-shipping-item .radio,
.ph-checkout-payment-item .radio {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.ph-checkout-shipping-item label,
.ph-checkout-payment-item label {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ph-checkout-shipping-item label input,
.ph-checkout-payment-item label input {
    margin: 0;
    flex: 0 0 auto;
}

.ph-checkout-shipping-item .ph-shipping-title,
.ph-checkout-payment-item .ph-payment-title {
    padding: 0;
    line-height: 1.35;
}

/* súhrn vpravo: názov dopravy/platby vľavo, nie pri cene */
.ph-cart-shipping-txt,
.ph-cart-payment-txt,
.ph-cart-shipping-netto-txt,
.ph-cart-payment-netto-txt {
    text-align: left;
}

/* cena: bez rozpisu DPH (tax_hide 9/11) ostane jeden riadok – popisok je prázdny, cena vpravo */
.ph-shipping-price-box .row,
.ph-payment-price-box .row {
    display: flex;
    justify-content: flex-end;
}

.ph-shipping-price-box [class*="-txt"]:empty,
.ph-payment-price-box [class*="-txt"]:empty {
    display: none;
}

.ph-checkout-shipping-brutto,
.ph-checkout-payment-brutto,
.ph-checkout-shipping-free,
.ph-checkout-payment-free {
    width: auto;
    flex: 0 0 auto;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* súhlas s podmienkami + poznámka o osobných údajoch (bez ďalšieho políčka) */
.ph-checkout-checkbox-confirm {
    display: block;
}

.ph-checkout-checkbox-confirm label {
    display: block;
    cursor: pointer;
    line-height: 1.5;
}

.ph-checkout-checkbox-confirm label input {
    margin: 0 .5rem 0 0;
    vertical-align: -.1em;
}

.bd-pokladna-gdpr {
    margin: .35rem 0 .75rem 1.55rem;
    font-size: .875rem;
    color: var(--color-text-muted, #6b7280);
}

.bd-pokladna-gdpr a {
    color: inherit;
    text-decoration: underline;
}


/* ---- Pokladňa: box dopravy/platby vždy v jednom riadku (názov | cena), aj na telefóne; „Zadarmo" netučné ---- */
.ph-checkout-shipping-item,
.ph-checkout-payment-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .75rem;
    margin-left: 0;
    margin-right: 0;
}

.ph-checkout-shipping-item > [class*="col-"],
.ph-checkout-payment-item > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    flex: 0 0 auto;
}

.ph-checkout-shipping-item > .ph-shipping-title-box,
.ph-checkout-payment-item > .ph-payment-title-box {
    flex: 1 1 auto;
    min-width: 0;
}

.ph-shipping-price-box .row,
.ph-payment-price-box .row {
    margin: 0;
}

.ph-shipping-price-box .row > [class*="col-"],
.ph-payment-price-box .row > [class*="col-"] {
    padding: 0;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.ph-checkout-shipping-free,
.ph-checkout-payment-free {
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
}

/* doplnkové info dopravy (výdajné miesto SPS/GLS/PostaPont) pod názvom, cez celú šírku */
.ph-checkout-shipping-item > .ph-checkout-shipping-additional-info,
.ph-checkout-shipping-item .ph-checkout-sps-box,
.ph-checkout-shipping-item .ph-checkout-gls-box,
.ph-checkout-shipping-item .ph-checkout-postapont-box,
.ph-checkout-shipping-item .ph-checkout-zasilkovna-box {
    flex-basis: 100%;
    margin-left: 0;
}

.ph-checkout-shipping-item:has(.ph-checkout-shipping-additional-info) {
    align-items: flex-start;
}

.ph-checkout-shipping-item:has(.ph-checkout-shipping-additional-info) > .ph-shipping-price-box {
    margin-top: .15rem;
}

.ph-checkout-shipping-additional-info {
    color: inherit;
}

.ph-btn-sps-select-pickup-point,
.ph-btn-gls-select-pickup-point,
.ph-btn-postapont-select-pickup-point,
.ph-btn-zasilkovna-select-pickup-point {
    margin: .35rem 0 .25rem;
    padding: .35rem .8rem;
    border: 1px solid var(--color-primary, var(--color-primary));
    border-radius: .375rem;
    background: transparent;
    color: var(--color-primary, var(--color-primary));
    font-weight: 600;
    cursor: pointer;
}

.ph-btn-sps-select-pickup-point:hover,
.ph-btn-gls-select-pickup-point:hover,
.ph-btn-postapont-select-pickup-point:hover,
.ph-btn-zasilkovna-select-pickup-point:hover {
    background: var(--color-primary, var(--color-primary));
    color: var(--color-on-primary);
}

[data-theme="dark"] .ph-btn-sps-select-pickup-point,
[data-theme="dark"] .ph-btn-gls-select-pickup-point,
[data-theme="dark"] .ph-btn-postapont-select-pickup-point,
[data-theme="dark"] .ph-btn-zasilkovna-select-pickup-point {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* vybrané výdajné miesto: farby z témy, nie natvrdo tmavomodrá (na tmavej téme nebolo vidieť) */
.ph-checkout-sps-info-name,
.ph-checkout-gls-info-name,
.ph-checkout-postapont-info-name,
.ph-checkout-zasilkovna-info-name {
    color: inherit;
}

.ph-order-sps-branch,
.ph-order-gls-branch,
.ph-order-postapont-branch {
    color: var(--color-text-muted, #444);
}

.ph-sps-map-close,
.ph-gls-map-close,
.ph-postapont-map-close {
    background: var(--color-primary, var(--color-primary));
}


/* ---- Pokladňa: tlačidlá krokov – „Pokračovať" plné (hlavná akcia), „Upraviť …" obrysové vedľajšie; vždy vpravo, na telefóne cez šírku ---- */
.ph-checkout-address-save,
.ph-checkout-shipping-save,
.ph-checkout-payment-save,
.ph-checkout-address-edit,
.ph-checkout-shipping-edit,
.ph-checkout-payment-edit,
.ph-checkout-btn-login-box {
    float: none;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 0;
    margin-top: .75rem;
}

.ph-checkout-address-save .btn,
.ph-checkout-shipping-save .btn,
.ph-checkout-payment-save .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-primary, var(--color-primary));
    border: 1px solid var(--color-primary, var(--color-primary));
    color: var(--color-on-primary);
    border-radius: .5rem;
}

.ph-checkout-address-save .btn:hover,
.ph-checkout-shipping-save .btn:hover,
.ph-checkout-payment-save .btn:hover {
    background: var(--color-primary-hover, #a10820);
    border-color: var(--color-primary-hover, #a10820);
    color: var(--color-on-primary);
}

.ph-checkout-address-edit .btn,
.ph-checkout-shipping-edit .btn,
.ph-checkout-payment-edit .btn,
.ph-checkout-btn-login-box .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    font-size: .9375rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--color-border-strong, #9ca3af);
    color: var(--color-text, #111);
    border-radius: .5rem;
}

.ph-checkout-address-edit .btn:hover,
.ph-checkout-shipping-edit .btn:hover,
.ph-checkout-payment-edit .btn:hover,
.ph-checkout-btn-login-box .btn:hover {
    border-color: var(--color-primary, var(--color-primary));
    color: var(--color-primary, var(--color-primary));
    background: transparent;
}

[data-theme="dark"] .ph-checkout-address-edit .btn,
[data-theme="dark"] .ph-checkout-shipping-edit .btn,
[data-theme="dark"] .ph-checkout-payment-edit .btn,
[data-theme="dark"] .ph-checkout-btn-login-box .btn {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

[data-theme="dark"] .ph-checkout-address-edit .btn:hover,
[data-theme="dark"] .ph-checkout-shipping-edit .btn:hover,
[data-theme="dark"] .ph-checkout-payment-edit .btn:hover,
[data-theme="dark"] .ph-checkout-btn-login-box .btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (max-width: 575.98px) {
    .ph-checkout-address-save .btn,
    .ph-checkout-shipping-save .btn,
    .ph-checkout-payment-save .btn {
        width: 100%;
        justify-content: center;
    }
}

/* šablóna má na telefóne stĺpec + centrovanie – chceme jeden riadok: názov vľavo, cena vpravo */
.ph-checkout-shipping-item,
.ph-checkout-payment-item {
    flex-direction: row;
}

.ph-shipping-title-box,
.ph-payment-title-box {
    display: block;
    justify-content: flex-start;
    text-align: left;
}

.ph-shipping-price-box,
.ph-payment-price-box {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.ph-shipping-price-box .radio,
.ph-payment-price-box .radio {
    width: auto;
}

.ph-checkout-shipping-item > [class*="col-"],
.ph-checkout-payment-item > [class*="col-"] {
    margin: 0;
}

/* šablóna dáva „#ph-pc-checkout-box .btn-sm { background: transparent !important }" – hlavné tlačidlo kroku musí byť plné */
#ph-pc-checkout-box .ph-checkout-address-save .btn,
#ph-pc-checkout-box .ph-checkout-shipping-save .btn,
#ph-pc-checkout-box .ph-checkout-payment-save .btn {
    background: var(--color-primary, var(--color-primary)) !important;
    color: var(--color-on-primary) !important;
    border-color: var(--color-primary, var(--color-primary)) !important;
    max-width: 100%;
}

#ph-pc-checkout-box .ph-checkout-address-save .btn:hover,
#ph-pc-checkout-box .ph-checkout-shipping-save .btn:hover,
#ph-pc-checkout-box .ph-checkout-payment-save .btn:hover {
    background: var(--color-primary-hover, #a30820) !important;
    border-color: var(--color-primary-hover, #a30820) !important;
}

.ph-checkout-address-save,
.ph-checkout-shipping-save,
.ph-checkout-payment-save {
    max-width: 100%;
    box-sizing: border-box;
}

/* poznámka k objednávke: nadpis ako ostatné kroky, odsadený text, na telefóne menší */
#phConfirm .ph-box-header {
    padding: .85rem 1rem .5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

#phConfirm textarea.form-control {
    display: block;
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem;
    padding: .65rem .8rem;
    min-height: 5.5rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #111);
}

#phConfirm textarea.form-control::placeholder {
    color: var(--color-text-muted, #6b7280);
}

@media (max-width: 575.98px) {
    #phConfirm .ph-box-header {
        font-size: .95rem;
        padding: .7rem .85rem .4rem;
    }

    #phConfirm textarea.form-control {
        width: calc(100% - 1.7rem);
        margin: 0 .85rem .85rem;
    }
}

/* obaly tlačidiel mali bočné okraje 16 px + šírku 100 % → tlačidlá liezli za rám boxu */
.ph-checkout-address-save,
.ph-checkout-shipping-save,
.ph-checkout-payment-save,
.ph-checkout-address-edit,
.ph-checkout-shipping-edit,
.ph-checkout-payment-edit,
.ph-checkout-btn-login-box,
.ph-checkout-confirm {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ph-checkout-confirm {
    float: none;
    display: flex;
    justify-content: flex-end;
}

.ph-checkout-confirm .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

@media (max-width: 575.98px) {
    .ph-checkout-confirm .btn {
        width: 100%;
        font-size: .9rem;
        padding: .7rem .9rem;
        justify-content: center;
    }

    .ph-checkout-address-edit .btn,
    .ph-checkout-shipping-edit .btn,
    .ph-checkout-payment-edit .btn {
        padding: .5rem .9rem;
        font-size: .875rem;
    }
}

/* poznámka + potvrdenie: rovnaká šírka ako ostatné kroky (Phoca tam mala okraj 25 px) */
.ph-checkout-box-action-raw {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* nadpisy v boxoch (ADRESA PRE FAKTURÁCIU, SPÔSOBY DORUČENIA…) na telefóne menšie */
@media (max-width: 575.98px) {
    #ph-pc-checkout-box .ph-box-header {
        font-size: .95rem;
        letter-spacing: .02em;
    }

    #ph-pc-checkout-box .ph-checkout-box-header h3,
    #ph-pc-checkout-box [class*="ph-checkout-box-header"] h3 {
        font-size: .95rem;
    }

    .wp-products__title {
        font-size: 1.6rem;
    }
}


/* ---- pokladňa: krátke zvýraznenie po zmene dopravy/platby (nahrádza 4 s „pc-loading" v template.js) ---- */
.pc-changed {
    transition: box-shadow .3s;
}


/* ---- Lighthouse (Robert 12. 9. večer): kontrast, miesta dotyku, tlačidlá namiesto JS odkazov ---- */
/* „Na sklade" zelená 4,08:1 na svetlom podklade → tmavšia (≥ 4,5:1); tmavá téma má vlastné farby */
html:not([data-theme="dark"]) .ph-stock.pc-status-na-sklade,
html:not([data-theme="dark"]) .pc-stock-bd-na-sklade {
    color: var(--color-success);
}

/* „Nastavenia cookies" v päte mala farbu muted zo svetlej témy na tmavom podklade päty (2,4:1) */
.es-footer__cookie-btn {
    color: var(--footer-text, #9fb1bf);
}

/* obľúbené / porovnať: <button> namiesto <a href="javascript:"> – vzhľad ostáva pilulka */
button.bd-ikona-tlacidlo {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* bodky galérie na telefóne: 24×24 miesto dotyku, bodka vnútri ostáva malá */
@media (max-width: 767.98px) {
    .bd-galeria-m__bodky {
        gap: .25rem;
    }

    .bd-galeria-m__bodka {
        position: relative;
        width: 24px;
        height: 24px;
        background: transparent;
        border-radius: 50%;
    }

    .bd-galeria-m__bodka::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: .6rem;
        height: .6rem;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: var(--color-border, #cfd8e3);
    }

    .bd-galeria-m__bodka.is-active {
        background: transparent;
    }

    .bd-galeria-m__bodka.is-active::before {
        background: var(--color-primary);
    }
}

/* ==========================================================================
   tpleshop 1.30 – detail: želania a zdieľanie, galéria (PC + mobil), ceny vedľa seba, logo výrobcu, strážiť cenu (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 2716-3014)
   ========================================================================== */
/* ============================================================
   DETAIL PRODUKTU — port z boatdiesel (galéria swipe, želania vedľa zdieľania, cena vedľa seba, logo výrobcu, sledovať cenu).
   ============================================================ */

/* ---- „Pridať do zoznamu želaní" v riadku so zdieľaním (12. 9.) ----
   Presúva ho bd-zelania.js; tu len vzhľad: pilulka s červeným srdiečkom,
   rovnako vysoká ako kruhové tlačidlá zdieľania, zarovnaná vpravo. */
/* 20. 9. 2026: riadok akcií (želania, stráženie ceny) sa štýluje aj bez pcshare obalu – na deme bez pkg_pcshare mala ikona 0 px, vidno bol len text */
.view-item .bd-item-actions-row {
    margin: 0 0 0 auto;
    gap: .5rem;
}

.view-item .bd-item-actions-row :is(a, button.bd-ikona-tlacidlo) {
    height: 36px;
    padding: 0 .9rem 0 .7rem;
    border-radius: 999px;
    gap: .45rem;
    font-size: .8125rem;
}

.view-item .bd-item-actions-row :is(a, button.bd-ikona-tlacidlo) svg.pc-si {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary);
}

.view-item .bd-item-actions-row :is(a, button.bd-ikona-tlacidlo):hover svg.pc-si {
    color: #fff;
}

.view-item .bd-item-actions-row :is(a, button.bd-ikona-tlacidlo):hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

@media (max-width: 575.98px) {
    .view-item .bd-item-actions-row {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: .25rem;
    }
}


/* ---- galéria v detaile: náhľady v jednom posuvnom rade (pripomienka 11.6) ---- */
.bd-galeria {
    position: relative;
    margin: .75rem 0 0;
}

.bd-galeria .ph-item-image-add-box.bd-swipe__track {
    flex-wrap: nowrap;
    gap: .6rem;
    margin: 0;
    padding: .25rem .125rem .5rem;
    scroll-snap-type: x proximity;
}

.bd-galeria .ph-item-image-box {
    scroll-snap-align: start;
    flex: 0 0 88px;
}

.bd-galeria .bd-swipe__nav {
    width: 2rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.bd-galeria .bd-swipe__nav--prev { left: -.5rem; }
.bd-galeria .bd-swipe__nav--next { right: -.5rem; }

.bd-galeria .bd-swipe__nav svg {
    width: 16px;
    height: 16px;
}

/* nowrap dráha náhľadov nesmie roztiahnuť stĺpec s fotkou */
.pc-item-view #phImageBox {
    min-width: 0;
}

.bd-galeria {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.bd-galeria .ph-item-image-add-box.bd-swipe__track {
    width: 100%;
    max-width: 100%;
}

/* šípky galérie vnútri dráhy (obal má overflow hidden) */
.bd-galeria .bd-swipe__nav--prev { left: .15rem; }
.bd-galeria .bd-swipe__nav--next { right: .15rem; }


/* ---- detail: akciová a pôvodná cena vedľa seba (pripomienka 11.7) ----
   Doteraz bola pôvodná cena nad novou; teraz veľká nová a vedľa nej preškrtnutá
   pôvodná, cena bez DPH pod nimi na novom riadku. Rovnako ako v kartičkách. */
.ph-item-price-box {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
    row-gap: .15rem;
}

.ph-item-price-box .ph-price-brutto {
    order: 1;
}

.ph-item-price-box .ph-price-original,
.ph-item-price-box .ph-price-old {
    order: 2;
    margin: 0;
    font-size: 1.15rem;
    text-decoration: line-through;
    color: var(--color-text-muted, #6b7785);
}

.ph-item-price-box .ph-price-netto {
    order: 3;
    flex-basis: 100%;
}

/* filter Výkon (HP) pred výrobcami — pri motoroch je dôležitejší */
#phFilterBox > .panel-vykon        { order: 4; }
#phFilterBox > .panel-manufacturer { order: 5; }
#phFilterBox > .panel              { order: 6; }
#phFilterBox > .panel-id           { order: 1; }
#phFilterBox > .panel-price_from   { order: 2; }
#phFilterBox > .panel-dostupnost   { order: 3; }


/* ---- galéria na mobile: fotka sa posúva prstom, bodky pod ňou ---- */
@media (max-width: 767.98px) {
    .bd-galeria-m--skryta {
        display: none !important;
    }

    .bd-galeria-m {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
        border: 1px solid var(--color-border);
        border-radius: var(--card-radius, 8px);
        background: #fff;
    }

    .bd-galeria-m::-webkit-scrollbar { display: none; }

    .bd-galeria-m__slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        aspect-ratio: 1 / 1;
        display: grid;
        place-items: center;
        padding: .75rem;
    }

    .bd-galeria-m__slide img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .bd-galeria-m__bodky {
        display: flex;
        justify-content: center;
        gap: .5rem;
        padding: .75rem 0 .25rem;
    }

    .bd-galeria-m__bodka {
        width: .6rem;
        height: .6rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-border, #cfd8e3);
        cursor: pointer;
    }

    .bd-galeria-m__bodka.is-active {
        background: var(--color-primary);
    }
}


/* ---- logo výrobcu nad názvom produktu (mockup klientky 12. 9.) ----
   Panel s cenou je flex stĺpec → blok výrobcu ide poradím pred H1.
   Bez loga (7 značiek) ostane len meno výrobcu, malým, tiež hore. */
.pc-item-view .ph-item-price-panel .ph-item-manufacturer-box {
    order: -1;
    margin: 0 0 .5rem;
}

.pc-item-view .ph-item-manufacturer-box .ph-manufacturer-txt {
    display: none;
}

.pc-item-view .ph-item-manufacturer-box .ph-manufacturer {
    gap: .75rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6b7785);
}

.pc-item-view .es-manufacturer-logo {
    height: 3rem;
    max-width: 12rem;
}

@media (max-width: 575.98px) {
    .pc-item-view .es-manufacturer-logo {
        height: 2.4rem;
        max-width: 10rem;
    }
}

/* keď má výrobca logo, meno vedľa neho netreba (ostáva pre čítačky v alt) */
.pc-item-view .ph-item-manufacturer-box .ph-manufacturer:has(.es-manufacturer-logo) {
    font-size: 0;
}

.pc-item-view .es-manufacturer-logo {
    height: 3.5rem;
    max-width: 14rem;
}


/* ---- detail: „Pridať do zoznamu želaní" + „Sledovať cenu" (wppush) ako dvojica ----
   rovnaký tvar (oblé rohy ako všade, nie pilulka), rovnaká výška, červená ikona,
   pri hover červená výplň. Na PC vedľa seba vpravo v riadku so zdieľaním. */
.view-item .bd-item-actions-row :is(a, button.bd-ikona-tlacidlo),
.view-item .bd-item-actions-row .wppush-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 .9rem 0 .7rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-heading, var(--color-surface-alt));
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.view-item .bd-item-actions-row .wppush-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary);
}

.view-item .bd-item-actions-row .wppush-btn:hover,
.view-item .bd-item-actions-row .wppush-btn:focus-visible,
.view-item .bd-item-actions-row .wppush-btn--aktivne {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.view-item .bd-item-actions-row .wppush-btn:hover svg,
.view-item .bd-item-actions-row .wppush-btn--aktivne svg {
    color: #fff;
}

[data-theme="dark"] .view-item .bd-item-actions-row .wppush-btn {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

[data-theme="dark"] .view-item .bd-item-actions-row .wppush-btn:hover,
[data-theme="dark"] .view-item .bd-item-actions-row .wppush-btn--aktivne {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* ==========================================================================
   tpleshop 1.30 – plávajúce prvky v rohu, riadok Doručenie (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 3865-3894)
   ========================================================================== */
/* ---- Plávajúce prvky v rohu (Robert 14.9.: „šípka hore sa bije s pomocníkom") — port z boatdiesel:
   zdola poradca, nad ním šípka; pri otvorenom chate šípka a filter zmiznú; cookie ikonka pod chat ---- */
.es-back-to-top { bottom: 4.75rem !important; z-index: 1150; }
body.wpp-otvorene .es-back-to-top { opacity: 0; pointer-events: none; }

@media (max-width: 767.98px) {
    .bd-filter-fab { bottom: 1rem; }
    body.wpp-otvorene .bd-filter-fab { opacity: 0; pointer-events: none; }
}

.cc-trigger, .cc-trigger-icon { z-index: 1100 !important; }
body.wpp-otvorene .cc-trigger, body.wpp-otvorene .cc-trigger-icon { opacity: 0; pointer-events: none; }

/* fieldset kontaktného formulára: vnútorné odsadenie aj na mobile (šablóna ho nuluje) */
.contact-form fieldset { padding-inline: .75rem !important; }
@media (min-width: 768px) { .contact-form fieldset { padding-inline: 1.35rem !important; } }

/* ---- detail: riadok „Doručenie" pod stavom skladu — ikona vedľa textu (chýbalo z portu web6; Robert 14.9.) ---- */
.bd-dorucenie {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .35rem 0 .5rem;
    font-size: .92rem;
    color: var(--color-text-muted);
}

.bd-dorucenie svg { flex: 0 0 auto; color: var(--color-accent); }
.bd-dorucenie strong { color: var(--color-text); font-weight: 600; }

/* ==========================================================================
   tpleshop 1.30 – detail: ikony zdieľania, vypredaný produkt (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4013-4029, 4384-4407)
   ========================================================================== */
/* ---- detail: ikony zdieľania v rovnakom štýle ako Strážiť cenu / želania (Robert 14.9.: „share má inú farbu") ---- */
.view-item .pcshare .pcshare__btn {
    width: 36px; height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-heading);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.view-item .pcshare .pcshare__btn:hover,
.view-item .pcshare .pcshare__btn:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
}


/* ---- ARIANE: vypredaný produkt (16. 9.) ----
   Phoca skrýva množstvo + „Do košíka" cez visibility:hidden → ostávalo 48 px prázdneho miesta pod SKU.
   Trieda sa pri prepočte variantu odoberie, takže display:none je bezpečné. */
.phItemCartBoxForm .ph-visibility-hidden { display: none !important; }
.phItemCartBoxForm:has(> div > div.ph-form-quantity.ph-visibility-hidden, > div > .ph-form-button > .ph-visibility-hidden) { display: none; } /* aj medzery rodiča (flex gap) */

/* mobil: „Strážiť cenu/dostupnosť" + „Pridať do obľúbených" vedľa seba na pol šírky, na užších telefónoch
   sa druhé zalomí pod prvé na celú šírku (predtým pretekalo vpravo mimo riadok) */
@media (max-width: 575.98px) {
    .view-item .bd-item-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
    .view-item .bd-item-actions-row .ph-category-item-wishlist-box,
    .view-item .bd-item-actions-row .ph-category-item-wishlist,
    .view-item .bd-item-actions-row .phItemWishListBoxForm { display: block; width: 100%; float: none; margin: 0; }
    .view-item .bd-item-actions-row .ph-category-item-wishlist-box { flex: 1 1 150px; }
    .view-item .bd-item-actions-row .wppush-btn { flex: 1 1 130px; }
    .view-item .bd-item-actions-row .wppush-btn,
    .view-item .bd-item-actions-row button.bd-ikona-tlacidlo { width: 100%; justify-content: center; padding: 0 .5rem; }
    .view-item .bd-item-actions-row .bd-ikona-text { font-size: .74rem; margin-left: .35rem; }
    .view-item .bd-item-actions-row .wppush-btn { font-size: .74rem; gap: .35rem; }
    .view-item .bd-item-actions-row > * { min-width: 0; }
    .view-item .bd-item-actions-row button.bd-ikona-tlacidlo svg.pc-si { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
    .view-item .bd-item-actions-row .ph-category-item-wishlist-box { order: 2; }
}

/* ==========================================================================
   tpleshop 1.30 – prepínač Nakupujem na firmu, mobilné menu bez duplicitných kategórií (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4423-4430)
   ========================================================================== */
/* ---- mobilné menu: kategórie dáva Phoca nav (offcanvas), položka „Produkty" s rozbaľovačkou by ich zdvojila ---- */
.es-offcanvas .mod-menu > li.dropdown.parent:not(:has(> .dropdown-2col)) { display: none; }   /* rozbaľovačka Informácie (dropdown-2col) ostáva */

/* ---- pokladňa: prepínač „Nakupujem na firmu" (setup_firma_polia.php, skript v module Firma prepínač) ---- */
.ar-na-firmu-riadok { margin-bottom: 1rem; }
.ar-na-firmu { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.ar-na-firmu input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); margin: 0; }

/* ==========================================================================
   tpleshop 1.30 – košík ×, doprava/platba na celú šírku, wpdovera vs FAB, tmavý režim pokladne (tlačidlá, checkboxy, box prihlásenia, webauthn) (prevzaté z klientskych tém ariane/cofex/boatdiesel, riadky ariane.css 4677-4764)
   ========================================================================== */
/* ---- košík (offcanvas modul): × na odstránenie položky (Robert 18. 9.) – 4. stĺpec mriežky riadku (množstvo · názov · cena · ×) ---- */
#phItemCartBox .ph-cart-cart-row-item { grid-template-columns: auto minmax(0, 1fr) auto auto; }
#phItemCartBox .ph-cart-cart-row-item .ar-kosik-zmaz { margin: 0; padding: 0; align-self: start; order: 9; }   /* formulár je v HTML pred množstvom → mriežkou na koniec */
.ar-kosik-zmaz__btn { border: 0; background: none; color: var(--color-text-muted); font-size: 1.3rem; line-height: 1; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-top: -.15rem; cursor: pointer; border-radius: 50%; }
.ar-kosik-zmaz__btn:hover { color: #dc2626; background: rgba(220,38,38,.08); }

/* ---- pokladňa: doprava a platba pod sebou na celú šírku (Robert 18. 9.: úzke boxy, dlhý popis IBAN ich rozťahoval do výšky,
   cena dobierky mala 3 riadky netto/DPH/brutto v jednom) ---- */
.ph-checkout-shipping-items-box,
.ph-checkout-payment-items-box { display: block; margin: 0; }
.ph-checkout-shipping-items-box > .ph-checkout-shipping-item,
.ph-checkout-payment-items-box > .ph-checkout-payment-item {
    display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; max-width: none; margin: 0 0 .6rem; padding: .7rem 1rem;
    border: 1px solid var(--color-border); border-radius: var(--card-radius, .6rem); background: var(--color-surface);
}
.ph-checkout-payment-item > .ph-payment-title-box,
.ph-checkout-shipping-item > .ph-shipping-title-box,
.ph-checkout-shipping-item > .ph-checkout-shipping-row-item { flex: 1 1 0; min-width: 0; padding: 0; text-align: left; width: auto !important; max-width: none !important; }
.ph-checkout-payment-item > .ph-payment-price-box,
.ph-checkout-shipping-item > .ph-shipping-price-box { flex: 0 0 auto; width: auto; padding: 0 0 0 1rem; margin-left: auto; text-align: right; }
.ph-checkout-payment-desc,
.ph-checkout-shipping-desc { font-size: .85rem; line-height: 1.4; color: var(--color-text-muted); margin: .25rem 0 0 1.6rem; font-style: normal; }
/* cena: len s DPH (bez riadkov „bez dane" a „DPH") */
.ph-payment-price-box .ph-checkout-payment-netto-txt, .ph-payment-price-box .ph-checkout-payment-netto,
.ph-payment-price-box .ph-checkout-payment-tax-txt, .ph-payment-price-box .ph-checkout-payment-tax,
.ph-payment-price-box .ph-checkout-payment-brutto-txt,
.ph-shipping-price-box .ph-checkout-shipping-netto-txt, .ph-shipping-price-box .ph-checkout-shipping-netto,
.ph-shipping-price-box .ph-checkout-shipping-tax-txt, .ph-shipping-price-box .ph-checkout-shipping-tax,
.ph-shipping-price-box .ph-checkout-shipping-brutto-txt { display: none !important; }
.ph-payment-price-box .radio, .ph-shipping-price-box .radio { width: auto; }
.ph-payment-price-box .row, .ph-shipping-price-box .row { margin: 0; }
.ph-checkout-payment-brutto, .ph-checkout-payment-free,
.ph-checkout-shipping-brutto, .ph-checkout-shipping-free { padding: 0; }
#ph-pc-checkout-box .ph-checkout-shipping-items-box,
#ph-pc-checkout-box .ph-checkout-payment-items-box { display: block !important; grid-template-columns: none !important; }
#ph-pc-checkout-box .ph-checkout-shipping-items-box > .ph-checkout-shipping-item,
#ph-pc-checkout-box .ph-checkout-payment-items-box > .ph-checkout-payment-item { width: 100% !important; max-width: none !important; }
#ph-pc-checkout-box .ph-checkout-payment-items-box > .col-12 { padding: 0; margin-top: .5rem; }
/* súhrn vpravo: doprava/platba len jedna suma s DPH (riadky „bez dane" a „DPH" preč) */
.ph-cart-shipping-netto-txt, .ph-cart-shipping-netto, .ph-cart-shipping-tax-txt, .ph-cart-shipping-tax,
.ph-cart-payment-netto-txt, .ph-cart-payment-netto, .ph-cart-payment-tax-txt, .ph-cart-payment-tax { display: none !important; }
@media (max-width: 575.98px) {
    .ph-checkout-payment-item, .ph-checkout-shipping-item { position: relative; display: block !important; }
    .ph-checkout-payment-item > .ph-payment-title-box,
    .ph-checkout-shipping-item > .ph-checkout-shipping-row-item,
    .ph-checkout-shipping-item > .ph-shipping-title-box { width: 100% !important; padding-right: 4.2rem !important; }
    .ph-checkout-payment-item > .ph-payment-price-box,
    .ph-checkout-shipping-item > .ph-shipping-price-box { position: absolute; right: 1rem; top: .7rem; width: auto !important; padding: 0 !important; margin: 0; }
    .ph-checkout-payment-desc, .ph-checkout-shipping-desc { margin-left: 0; margin-right: -3.2rem; padding-right: 0; width: auto !important; max-width: none !important; }   /* popis pod názvom na celú šírku boxu (cena je len pri názve) */
    .ph-checkout-payment-item .controls, .ph-checkout-shipping-item .controls { width: auto !important; }
}

/* ---- wpdovera vs. tlačidlo „Filtrovať" na mobile: kontajner kariet je vľavo dole nad FAB filtra a zachytával ťuknutia aj zasunutý
   (Robert 18. 9.: „na mobile nejde kliknúť na filter") – kontajner priepustný, klikateľná je len vysunutá karta / bublina ---- */
.wpd, .wpd__karty { pointer-events: none; }
.wpd--von .wpd__karta:not([hidden]), .wpd__nudge:not([hidden]), .wpd__panel, .wpd__pecat, .wpd__pecat-zavri, .wpd__karta-zavri, .wpd__nudge-zavri { pointer-events: auto; }   /* 20. 9. 2026: krížik pečate je mimo karty (absolute) – dedil pointer-events:none z .wpd a nedal sa zavrieť (Robert, obe stránky) */
@media (max-width: 767.98px) { .wpd { --wpd-offset-y: 4.5rem; }   /* vysunutá karta nad tlačidlom Filtrovať (FAB ~48 px + okraj) */ }

/* ---- TMAVÝ REŽIM – pokladňa (Robert 18. 9. noc): tlačidlá s priehľadným pozadím dostávali z pravidla „primárna je svetlá → tmavé písmo"
   (#111) aj keď nemajú svetlé pozadie → „Prihlásiť", „Zrušiť nákup ako hosť", kôš v súhrne boli neviditeľné; plné „Pokračovať"/„Uložiť"
   malo biele písmo na svetlej primárnej (pravidlo s #ph-pc-checkout-box má vyššiu váhu). Stepper −/+ pre istotu explicitne svetlý.
   → tpleshop 1.30: v základe riešiť tokenom --color-on-primary a nikdy nefarbiť text podľa triedy, ale podľa pozadia. ---- */
[data-theme="dark"] #ph-pc-checkout-box :is(.ph-checkout-address-save, .ph-checkout-shipping-save, .ph-checkout-payment-save) .btn,
[data-theme="dark"] #ph-pc-checkout-box :is(.ph-checkout-address-save, .ph-checkout-shipping-save, .ph-checkout-payment-save) .btn:hover { color: var(--color-on-primary) !important; }
[data-theme="dark"] #ph-pc-checkout-box :is(.ph-checkout-address-save, .ph-checkout-shipping-save, .ph-checkout-payment-save) .btn svg { color: var(--color-on-primary); stroke: currentColor; }
[data-theme="dark"] #ph-pc-checkout-box :is(.btn-sm.ph-btn, button.ph-checkout-btn-login, .ph-login-form button[type="submit"], .btn-danger):not(.bd-hostuje__btn) {
    color: #f0f0f0 !important; border-color: #9aa0a8 !important; background: transparent !important; }
[data-theme="dark"] #ph-pc-checkout-box :is(.btn-sm.ph-btn, button.ph-checkout-btn-login, .ph-login-form button[type="submit"], .btn-danger):not(.bd-hostuje__btn) svg { color: #f0f0f0; stroke: currentColor; }
[data-theme="dark"] #ph-pc-checkout-box :is(.btn-sm.ph-btn, button.ph-checkout-btn-login, .ph-login-form button[type="submit"]):not(.bd-hostuje__btn):hover {
    background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-on-accent) !important; }
[data-theme="dark"] #ph-pc-checkout-box .btn-danger:hover { background: var(--color-danger) !important; border-color: var(--color-danger) !important; color: #fff !important; }
[data-theme="dark"] .es-qty--cart { border-color: #9aa0a8; }
[data-theme="dark"] .es-qty--cart .es-qty__btn { color: #f0f0f0; }
[data-theme="dark"] .es-qty--cart .es-qty__btn:hover { background: var(--color-accent); color: var(--color-on-accent); }
[data-theme="dark"] #ph-pc-checkout-box .ph-checkout-cart-box .es-qty--cart .es-qty__input { color: #f0f0f0; background: transparent; border-color: #9aa0a8; }
[data-theme="dark"] #ph-pc-checkout-box .ph-checkout-box-login form:not(.bd-hostuje__form) button.btn-primary,
[data-theme="dark"] #ph-pc-checkout-box .ph-checkout-box-login a.btn-primary { color: #f0f0f0 !important; border-color: #9aa0a8 !important; background: transparent !important; }
[data-theme="dark"] #ph-pc-checkout-box .ph-checkout-box-login form:not(.bd-hostuje__form) button.btn-primary:hover,
[data-theme="dark"] #ph-pc-checkout-box .ph-checkout-box-login a.btn-primary:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-on-accent) !important; }
/* pokladňa, krok 1: Phoca ľavý stĺpec .ph-left-border v boxe prihlásenia je prázdny (hosť má vlastný blok nad ním) → vyzeral ako prázdny nadpis (Robert 18. 9. noc) */
.ph-checkout-box-login .ph-left-border:not(:has(*)) { display: none !important; }
/* tmavý režim: natívne zaškrtávacie políčka a prepínače (Pamätaj si ma, súhlasy, Heureka) boli čierne na tmavom → tmavá schéma + akcentová farba zaškrtnutia (Robert 18. 9. noc) */
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { color-scheme: dark; accent-color: var(--color-accent); }
/* pokladňa, krok 1: box prihlásenia mal hore hranaté rohy (Phoca počíta s hlavičkou nad ním, tú máme priehľadnú) → zaoblený celý ako ostatné karty (Robert 18. 9. noc) */
.ph-checkout-box-login .ph-checkout-box-action { border-radius: var(--card-radius, .5rem) !important; border: 1px solid var(--color-border); overflow: hidden; }
/* prihlásenie prístupovým kľúčom (Joomla webauthn): ikona a text v jednom riadku, ikona vo farbe textu (v tme bola čierna) */
.plg_system_webauthn_login_button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.plg_system_webauthn_login_button svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; fill: currentColor; }

/* ============================================
   Preškrtnutá cena s popisom (Ariane 19. 9. 2026, zákon 108/2024 § 7): popis .ph-price-original-txt
   („Pôvodná cena" z Phocy, alebo prepis COM_PHOCACART_ORIGINAL_PRICE = „Odporúčaná cena", ak ide o MOC dodávateľa,
   nie o zľavu) je viditeľný malým písmom – preškrtnutá cena bez popisu sa berie ako oznámenie zľavy.
   Karty: nad cenou, detail: vedľa preškrtnutej ceny. Štítok ZĽAVA (.bd-badge--sale) si téma skryje, ak nejde o zľavu.
   ============================================ */
.ph-category-price-box .ph-price-original-txt,
.ph-item-price-box .ph-price-original-txt,
.bd-swipe__item .ph-price-original-txt { display: block !important; order: 0; width: 100%; font-size: .7rem; line-height: 1.2; color: var(--color-text-muted, #6b7785); text-align: center; margin: 0; }
.ph-item-price-box .ph-price-original-txt { order: 2; width: auto; text-align: left; align-self: baseline; margin-left: .25rem; }
.ph-item-price-box .ph-price-original { order: 3; }
.ph-item-price-box .ph-price-netto { order: 4; width: 100%; }
.ph-category-price-box .ph-price-original-txt:not(:has(+ .ph-price-original)) { display: none !important; }

/* ---- výber variantu v detaile ako chipy (template.js ar-chips); natívny select skrytý; presunuté z témy Ariane do základu 22. 9. 2026 ---- */
.ph-item-attributes-box .ph-available-options-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 1.25rem 0 .5rem; }
.ph-item-attributes-box .ph-attribute-title { font-weight: 600; margin: .75rem 0 .4rem; }
.ph-item-attributes-box .ph-attribute-title .ph-req { color: var(--color-danger); }
select.ar-chips__select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ar-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.ar-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.25rem; padding: .5rem .9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ar-chip:hover { border-color: var(--color-primary); }
.ar-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .ar-chip.is-active { color: #111; }
.ar-chip__cena { font-size: .72rem; font-weight: 400; opacity: .8; margin-top: .15rem; }
/* select, ktorý ostane natívny (iné atribúty, formuláre v detaile) – rozmer, rám a šípka ako ostatné polia */
.ph-item-attributes-box .form-select:not(.ar-chips__select),
.ph-item-attributes-box select:not(.ar-chips__select) { display: block; width: 100%; max-width: 20rem; min-height: 2.75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem 2.25rem .5rem .75rem; font: inherit; color: var(--color-text); background-color: var(--color-surface); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.ph-item-attributes-box select:not(.ar-chips__select):focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }

/* ---- karty produktov: celý obsah na stred (Robert 22. 9. 2026 – „na stred produkty aj v kartičkách"): názov, hviezdy, popis,
   výrobca, cena aj tlačidlá; množstvo + Do košíka ostávajú v riadku ---- */
.es-product-card__body { text-align: center; align-items: center; }
.es-product-card__body > *, .es-product-card__header, .es-product-card__desc, .ph-item-desc, .es-product-card__manufacturer, .es-product-card__rating { width: 100%; }
.es-product-card__rating .ph-stars-box { display: flex; justify-content: center; }
.es-product-card .ph-category-price-box { display: flex; flex-direction: column; align-items: center; text-align: center; }   /* flex položky ignorujú Phoca float:right na cene */
.es-product-card .ph-category-price-box > * { float: none; width: auto; }
.es-product-card .ph-price-box { justify-content: center; text-align: center; }
.es-product-card .ph-price-box { align-items: center; }
.es-product-card__actions { justify-content: center; }

/* počet v záložke detailu (Recenzie 4) – malá pilulka */
.es-tab-count { display: inline-block; min-width: 1.35em; padding: 0 .4em; margin-left: .35em; border-radius: 999px; background: var(--color-surface-alt, #eef1f5); color: var(--color-text-muted); font-size: .75em; font-weight: 600; line-height: 1.6; text-align: center; vertical-align: 1px; }
.nav-link.active .es-tab-count { background: var(--color-primary); color: #fff; }