/* ============================================
   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;
}

.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);
}

.ph-stars {
    display: inline-block;
    width: 80px;
    height: 16px;
    background: var(--color-gray-200);
    position: relative;
}

.ph-stars span {
    display: block;
    height: 100%;
    background: #F59E0B;
}

/* 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 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;
    gap: var(--space-sm);
    align-items: center;
    max-width: 480px;
}

.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;
        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; }

@media (max-width: 1023.98px) {
    .pc-checkout-aside { display: 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 --- */
.pc-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: var(--space-sm) var(--space-md);
    z-index: 100;
    display: none;
}

@media (max-width: 1023.98px) {
    .pc-mobile-cta { display: block; }
    body.pc-has-mobile-cta { padding-bottom: 80px; }
}

.pc-mobile-cta__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-md);
    background: transparent;
    border: 0;
    padding: var(--space-sm) 0;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.pc-mobile-cta__label {
    font-weight: var(--font-weight-medium);
    flex: 1;
    text-align: left;
}

.pc-mobile-cta__total {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.pc-mobile-cta__chevron {
    transition: transform var(--transition-fast);
}

.pc-mobile-cta__toggle[aria-expanded="true"] .pc-mobile-cta__chevron {
    transform: rotate(180deg);
}

.pc-mobile-cta__summary {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-sm);
    max-height: 50vh;
    overflow-y: auto;
}

.pc-mobile-cta__summary[hidden] { display: none; }

/* --- 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);
}

/* 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;
}