/* e-5HOP storefront card styles.
   One copy of the product-card rules that index.php, products.php,
   category.php and search.php each carried inline. Loaded from
   templates/header.php before any page's own <style>, so a page that
   still overrides a card rule keeps winning. */

.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.product-img-wrapper {
    position: relative;
    height: 240px;
    background: var(--background-color);
    overflow: hidden;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.product-item:hover .product-img {
    transform: scale(1.05);
}
.restriction-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: linear-gradient(45deg, #dc3545, #c82333);
    color: white;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
    letter-spacing: 1px;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
.product-item.restricted .product-img {
    opacity: 0.5;
    filter: grayscale(50%);
}
.product-item.restricted .cart-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}
.wishlist-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 10;
}
.wishlist-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.wishlist-toggle.active {
    background: #fee2e2;
}
.wishlist-toggle .wishlist-icon {
    font-size: 16px;
    transition: all 0.3s ease;
}
.wishlist-toggle:not(.active) .wishlist-icon {
    color: #94a3b8;
}
.wishlist-toggle.active .wishlist-icon {
    color: #ef4444;
}
.product-tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}
.product-tag {
    padding: 3px 8px;
    border-radius: calc(var(--button-radius) * 0.5);
    font-size: calc(var(--font-size-base) * 0.625);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    font-family: var(--font-family);
}
.tag-featured {
    background: var(--accent-color);
    color: white;
    opacity: 0.9;
}
.tag-sale {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}
.product-title {
    font-size: calc(var(--font-size-base) * 0.9375);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: var(--font-family);
}
.product-desc {
    color: var(--text-color);
    opacity: 0.7;
    font-size: calc(var(--font-size-base) * 0.8125);
    margin-bottom: 10px;
    display: none;
    line-height: 1.5;
    font-family: var(--font-family);
}
.product-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: calc(var(--font-size-base) * 0.75);
    font-family: var(--font-family);
}
.product-sku {
    color: var(--text-color);
    opacity: 0.5;
}
.stock-badge {
    padding: 2px 6px;
    border-radius: calc(var(--button-radius) * 0.4);
    font-size: calc(var(--font-size-base) * 0.6875);
    font-weight: 600;
    font-family: var(--font-family);
}
.stock-in {
    background: #d1fae5;
    color: #065f46;
}
.stock-low {
    background: #fed7aa;
    color: #92400e;
}
.stock-out {
    background: #fee2e2;
    color: #991b1b;
}
.product-price-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.product-current-price {
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--font-family);
}
.product-old-price {
    font-size: calc(var(--font-size-base) * 1);
    color: var(--text-color);
    opacity: 0.5;
    text-decoration: line-through;
    font-family: var(--font-family);
}
.discount-percent {
    padding: 2px 6px;
    background: #fee2e2;
    color: #ef4444;
    border-radius: calc(var(--button-radius) * 0.4);
    font-size: calc(var(--font-size-base) * 0.6875);
    font-weight: 700;
    font-family: var(--font-family);
}
.product-actions-group {
    display: flex;
    gap: 8px;
}
.cart-btn {
    flex: 1;
    padding: 8px 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--button-radius);
    font-size: calc(var(--font-size-base) * 0.8125);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
}
.cart-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--primary-color-rgb, 255, 152, 0), 0.3);
}
.cart-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .product-img-wrapper {
        height: 180px;
    }
    .product-details {
        padding: 12px;
    }
    .product-title {
        font-size: calc(var(--font-size-base) * 0.875);
    }
    .product-current-price {
        font-size: calc(var(--font-size-base) * 1.125);
    }
    .cart-btn {
        font-size: calc(var(--font-size-base) * 0.75);
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .product-img-wrapper {
        height: 160px;
    }
    .product-details {
        padding: 10px;
    }
    .product-title {
        font-size: calc(var(--font-size-base) * 0.8125);
        -webkit-line-clamp: 1;
    }
    .product-current-price {
        font-size: calc(var(--font-size-base) * 1);
    }
    .cart-btn {
        font-size: calc(var(--font-size-base) * 0.6875);
        padding: 6px 8px;
    }
    .restriction-badge {
        font-size: 10px;
        padding: 8px 20px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 375px) {
    .restriction-badge {
        font-size: 9px;
        padding: 6px 15px;
        transform: translate(-50%, -50%) rotate(-15deg) scale(0.9);
    }
}


/* ===================================================================
   Direction A card skin, v2.4.13.

   Keyed on the canonical class plus the product-id attribute, which
   makes these rules one step more specific than the per-page legacy
   rules that are still in each page's own style element. Those pages
   load after this sheet, so a plain single-class selector here would
   lose every tie to them.

   Grid only. The list variant keeps its own layout rules, which are
   two classes deep and therefore still win - a list row must stay a
   list row.

   Colours resolve from theme custom properties throughout: the card
   surface, the hairline, the radii, the primary and the secondary all
   follow whichever preset is applied. The stock pill uses the theme
   stock colours that already exist.
   =================================================================== */

.e5-card[data-product-id] {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
    overflow: hidden;
}

.e5-card--grid[data-product-id] .e5-card__media {
    height: 160px;
    overflow: hidden;
    position: relative;
}

.e5-card--grid[data-product-id] .e5-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* status pills, top left */
.e5-card[data-product-id] .e5-card__badges {
    top: 10px;
    left: 10px;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.e5-card[data-product-id] .e5-card__badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* v2.4.70: the product-detail hero uses these same classes now, and it is not
   inside .e5-card[data-product-id] - so every badge rule below names the hero
   container as a second context. One declaration block, both places, which is
   the whole point: before this release the hero painted FEATURED #ff6b6b red
   with !important while every card painted it the theme colour. */
.e5-card[data-product-id] .e5-card__badge--featured,
.e5-card__badges .e5-card__badge--featured {
    background: var(--secondary-color, #e07b00);
    color: #fff;
}

/* SALE and BUNDLE had no canonical rule at all - the cards were getting their
   colour from the per-page legacy classes this release deletes, so the two
   kinds need a home here or they would lose their styling entirely. The
   values are the ones index.php and product-detail.php already used. */
.e5-card[data-product-id] .e5-card__badge--sale,
.e5-card__badges .e5-card__badge--sale {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

.e5-card[data-product-id] .e5-card__badge--bundle,
.e5-card__badges .e5-card__badge--bundle {
    background: linear-gradient(135deg, var(--primary-color, #ff9800) 0%, var(--secondary-color, #e07b00) 100%);
    color: #fff;
}

/* the hero's pills need the shape the cards get from the .e5-card__badge base
   rule above, which is card-scoped */
.e5-card__badges .e5-card__badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
}

.e5-card[data-product-id] .e5-card__badge--new,
.e5-card__badges .e5-card__badge--new {
    /* The tint sits on top of the product image, so it has to be opaque or
       the photo shows through the label. The first declaration is the
       fallback for engines without color-mix; the second wins where it is
       supported. Both derive from the primary, so the pill follows the
       preset either way. */
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .92);
    background: color-mix(in srgb, var(--primary-color, #ff9800) 16%, #ffffff);
    color: var(--primary-color, #ff9800);
}

/* circular heart, top right */
.e5-card[data-product-id] .wishlist-button,
.e5-card[data-product-id] .wishlist-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Body. The two wrapper elements are dropped out of the box tree so the
   price and the stock pill become siblings and can share a row without
   the markup changing - this is a skin, so the partial keeps emitting
   exactly the elements it emitted before. */
.e5-card--grid[data-product-id] .e5-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 14px;
}

.e5-card--grid[data-product-id] .e5-card__meta,
.e5-card--grid[data-product-id] .e5-card__pricing {
    display: contents;
}

.e5-card--grid[data-product-id] .e5-card__category {
    order: 1;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    color: var(--muted-text, #726D64);
    margin: 0;
}

/* v2.4.42: the card title is a real link on every page now. index.php
   already neutralised its own title link (.product-name a); this is the
   same rule for the shared card, so the title keeps the colour and the
   plain face it had when it was inert text - the anchor is for keyboard
   users and crawlers, not a visual change. */
.e5-card__title a {
    color: inherit;
    text-decoration: none;
}
.e5-card__title a:hover {
    text-decoration: underline;
}

.e5-card--grid[data-product-id] .e5-card__title {
    order: 2;
    width: 100%;
    margin: 0;
    font-size: calc(var(--font-size-base, 16px) * .95);
    font-weight: 600;
    color: var(--text-color, #333333);
}

.e5-card--grid[data-product-id] .e5-card__price {
    order: 3;
    font-weight: 700;
    color: var(--primary-color, #ff9800);
}

.e5-card--grid[data-product-id] .e5-card__old-price {
    order: 3;
    text-decoration: line-through;
    color: var(--muted-text, #726D64);
    font-size: 12px;
}

.e5-card--grid[data-product-id] .e5-card__stock {
    order: 4;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}

.e5-card--grid[data-product-id] .e5-card__sku {
    order: 5;
    width: 100%;
    font-size: 11px;
    color: var(--muted-text, #726D64);
}

.e5-card--grid[data-product-id] .e5-card__actions {
    order: 6;
    width: 100%;
}

.e5-card--grid[data-product-id] .e5-card__actions .add-to-cart,
.e5-card--grid[data-product-id] .e5-card__actions .cart-btn {
    width: 100%;
    background: var(--primary-color, #ff9800);
    color: #fff;
    border: none;
    border-radius: var(--button-radius, 8px);
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.e5-card--grid[data-product-id] .e5-card__actions .add-to-cart:disabled,
.e5-card--grid[data-product-id] .e5-card__actions .cart-btn:disabled {
    background: var(--stock-out, #726D64);
    cursor: not-allowed;
}

/* -------------------------------------------------------------------
   The wishlist variant.

   wishlist.php keeps its own markup: its card is a different layout,
   not a variant of the grid one - the sku sits above the price, the
   stock line below it, the image is wrapped in a link, and the two
   controls carry icons. Build 1 measured that and left it alone. What
   it now shares is the SKIN: the surface, the hairline, the radii and
   the button treatment all come from the same properties as the grid
   card, so the two read as one family without the markup being forced
   into one shape.
   ------------------------------------------------------------------- */

.e5-card--wishlist[data-product-id] .e5-card__media {
    height: 160px;
    overflow: hidden;
}

.e5-card--wishlist[data-product-id] .e5-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.e5-card--wishlist[data-product-id] .e5-card__body {
    padding: 14px;
}

.e5-card--wishlist[data-product-id] .e5-card__title {
    font-size: calc(var(--font-size-base, 16px) * .95);
    font-weight: 600;
}

.e5-card--wishlist[data-product-id] .e5-card__sku {
    font-size: 11px;
    color: var(--muted-text, #726D64);
}

.e5-card--wishlist[data-product-id] .e5-card__price {
    font-weight: 700;
    color: var(--primary-color, #ff9800);
}

.e5-card--wishlist[data-product-id] .e5-card__stock-row .in-stock,
.e5-card--wishlist[data-product-id] .e5-card__stock-row .out-of-stock {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
}

.e5-card--wishlist[data-product-id] .e5-card__actions .btn-add-cart {
    width: 100%;
    background: var(--primary-color, #ff9800);
    color: #fff;
    border: none;
    border-radius: var(--button-radius, 8px);
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.e5-card--wishlist[data-product-id] .e5-card__actions .btn-add-cart:disabled {
    background: var(--stock-out, #726D64);
    cursor: not-allowed;
}

.e5-card--wishlist[data-product-id] .btn-remove-circle {
    border-radius: 50%;
}

/* ===================================================================
   Direction A homepage sections, v2.4.14.

   Everything here is scoped to the homepage container, which index.php
   already emits. Two reasons: this sheet is also linked on the product,
   category, search and wishlist pages, and the section class names are
   NOT unique to the homepage - products.php and wishlist.php both carry
   a section heading of their own. An unscoped rule would restyle those
   too. The scope also carries the extra specificity needed to win
   against index.php's own style element, which loads after this sheet.

   Colours resolve from theme properties throughout: the dark band is
   the primary under a flat black veil, the tints are the primary rgb
   triplet the theme already emits, and the chips cycle through tints
   derived from the primary and the secondary. Nothing here is a fixed
   hue, so the whole homepage follows the applied preset.
   =================================================================== */

.homepage-container .section {
    padding: 56px 0;
}

.homepage-container .section-header {
    /* A grid, not a row. The heading, the subtitle and the optional link are
       SIBLINGS in the markup, so a plain row put the subtitle out to the right
       beside the heading. Placing them explicitly keeps the subtitle under the
       title and sends only the link to the far edge, and it behaves the same
       whether or not a section has a link. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 16px;
    text-align: left;
    margin-bottom: 28px;
}

.homepage-container .section-header > .section-title    { grid-column: 1; grid-row: 1; }
.homepage-container .section-header > .section-subtitle { grid-column: 1; grid-row: 2; }
.homepage-container .section-header > .section-link     { grid-column: 2; grid-row: 1; justify-self: end; }

.homepage-container .section-title {
    font-family: var(--heading-font, var(--font-family));
    font-size: calc(var(--font-size-base, 16px) * 1.45);
    font-weight: 700;
    color: var(--text-color, #333333);
    margin: 0;
}

.homepage-container .section-subtitle {
    margin: 6px 0 0;
    font-size: calc(var(--font-size-base, 16px) * 0.9);
    color: var(--muted-text, #726D64);
    opacity: 1;
    max-width: 640px;
}

/* the "view all" affordance beside a heading */
.homepage-container .section-link {
    flex: 0 0 auto;
    color: var(--primary-color, #ff9800);
    font-weight: 600;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    text-decoration: none;
    white-space: nowrap;
}

.homepage-container .section-link:hover {
    text-decoration: underline;
}

/* the hero sits in the page rather than spanning it edge to edge */
.homepage-container .slider-section {
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    max-width: var(--container-max-width, 1400px);
    margin: 24px auto 0;
    width: calc(100% - 40px);
}

/* Special Offers reads as the one dark band on the page */
.homepage-container .offers-section {
    background-color: var(--primary-color, #ff9800);
    background-image: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58));
}

.homepage-container .offers-section .section-title,
.homepage-container .offers-section .section-subtitle {
    color: #ffffff;
}

.homepage-container .offers-section .section-link {
    color: #ffffff;
}

/* the New band keeps a plain surface so it separates from the one above */
.homepage-container .section[style*="background"] {
    background: var(--surface, #ffffff) !important;
}

/* ---- the categories grid ---- */

.homepage-container .e5-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.homepage-container .e5-cat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.homepage-container .e5-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

.homepage-container .e5-cat-chip {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--button-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--primary-color, #ff9800);
    font-size: 20px;
}

.homepage-container .e5-cat-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Four tints, all derived - two from the primary, two from the secondary -
   so a row of chips has some variety without any of them being a fixed
   hue that would survive a change of preset. */
.homepage-container .e5-cat-chip--0 { background: rgba(var(--primary-color-rgb, 255, 152, 0), .12); }
.homepage-container .e5-cat-chip--1 { background: rgba(var(--primary-color-rgb, 255, 152, 0), .22); }
.homepage-container .e5-cat-chip--2 { background: var(--secondary-color, #e07b00); color: #ffffff; }
.homepage-container .e5-cat-chip--3 { background: rgba(var(--primary-color-rgb, 255, 152, 0), .07); }

.homepage-container .e5-cat-name {
    font-weight: 600;
    color: var(--text-color, #333333);
    display: block;
}

.homepage-container .e5-cat-count {
    display: block;
    font-size: calc(var(--font-size-base, 16px) * 0.78);
    color: var(--muted-text, #726D64);
}

@media (max-width: 992px) {
    .homepage-container .e5-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .homepage-container .e5-cat-grid { grid-template-columns: 1fr; }
    .homepage-container .section { padding: 36px 0; }
    .homepage-container .section-header { grid-template-columns: 1fr; }
    .homepage-container .slider-section { width: calc(100% - 24px); }
}

/* Special Offers: same rhythm as the other sections, and its call to action
   is the one accent-coloured control on the page. The accent property is the
   one whose default is the orange the mockup shows; the secondary defaults to
   green, so wiring it there would lose the button against the band. */
.homepage-container .offers-section {
    padding: 56px 0;
}

.homepage-container .offers-section .offer-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--accent-color, #FF9800);
    color: #ffffff;
    border-radius: var(--button-radius, 8px);
    font-weight: 600;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
}

.homepage-container .offers-section .offer-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
}

/* ===================================================================
   Direction A inner pages, v2.4.16.
   products, category, about and contact.

   All four carry the SAME page-header component - a page root, then a
   page header wrapping the info block with a breadcrumb, a title, a
   description and a stats row - so one rule set gives them a single
   look. Every rule is scoped to a page root, because this sheet is
   also linked on the homepage, the wishlist and the card pages, and
   names this general would otherwise reach them.

   Colours resolve from theme properties. State colours (validation,
   alerts) and social brand colours are deliberately NOT themed: an
   error should not turn green because the shop chose a green preset,
   and a network's brand colour is not the merchant's to pick.
   =================================================================== */

.products-page .products-header,
.category-page .category-header,
.about-page .about-header,
.contact-page .contact-header {
    /* The page that owns these headers declares the old gradient with an
       important flag, so the surface has to carry one too. Weight, not
       specificity, is what decides this one - the rest of the block wins on
       the page scope alone and is left unflagged. */
    background: var(--surface, #ffffff) !important;
    background-image: none !important;
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: none;
    color: var(--text-color, #333333);
    padding: 18px 22px;
    margin-bottom: 20px;
    min-height: 0;
    overflow: visible;
}

/* the header carried a decorative wash behind its content */
.products-page .products-header::before,
.products-page .products-header::after,
.category-page .category-header::before,
.category-page .category-header::after,
.about-page .about-header::before,
.about-page .about-header::after,
.contact-page .contact-header::before,
.contact-page .contact-header::after {
    display: none;
}

.products-page .products-header-content,
.category-page .category-header-content,
.about-page .about-header-content,
.contact-page .contact-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
}

.products-page .header-breadcrumb,
.category-page .header-breadcrumb,
.category-page .category-breadcrumb,
.about-page .header-breadcrumb,
.contact-page .header-breadcrumb {
    font-size: calc(var(--font-size-base, 16px) * 0.8);
    color: var(--muted-text, #726D64);
    margin-bottom: 6px;
    opacity: 1;
}

.products-page .header-breadcrumb a,
.category-page .header-breadcrumb a,
.category-page .category-breadcrumb a,
.about-page .header-breadcrumb a,
.contact-page .header-breadcrumb a {
    color: var(--primary-color, #ff9800);
    text-decoration: none;
}

.products-page .products-header h1,
.category-page .category-header h1,
.about-page .about-header h1,
.contact-page .contact-header h1 {
    font-family: var(--heading-font, var(--font-family));
    font-size: calc(var(--font-size-base, 16px) * 1.45);
    font-weight: 700;
    color: var(--text-color, #333333);
    margin: 0 0 4px;
    text-shadow: none;
}

.products-page .header-description,
.category-page .header-description,
.about-page .header-description,
.contact-page .header-description {
    margin: 0;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    color: var(--muted-text, #726D64);
    opacity: 1;
    max-width: 70ch;
}

/* the stat pills stay - they are existing content - but read as quiet
   chips rather than as the loudest thing in the header */
.products-page .header-stats,
.category-page .header-stats,
.about-page .header-stats,
.contact-page .header-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.products-page .header-stats > div,
.category-page .header-stats > div,
.about-page .header-stats > div,
.contact-page .header-stats > div {
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .08);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    color: var(--text-color, #333333);
    padding: 8px 12px;
    min-width: 0;
    backdrop-filter: none;
}

.products-page .header-stats .stat-value,
.category-page .header-stats .stat-value,
.about-page .header-stats .stat-value,
.contact-page .header-stats .stat-value {
    color: var(--primary-color, #ff9800);
    font-size: calc(var(--font-size-base, 16px) * 1.05);
}

.products-page .header-stats .stat-label,
.products-page .header-stats .stat-text,
.category-page .header-stats .stat-label,
.about-page .header-stats .stat-text,
.contact-page .header-stats .stat-text {
    color: var(--muted-text, #726D64);
}

/* ---- the control row: sort and the view toggle ---- */

.products-page .products-toolbar,
.category-page .category-toolbar {
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: none;
    padding: 12px 16px;
}

.products-page .showing-results,
.category-page .showing-results {
    color: var(--muted-text, #726D64);
    font-size: calc(var(--font-size-base, 16px) * 0.875);
}

/* The toggle buttons are view-option, NOT view-btn. view-btn is the CARD's
   list-mode View control, which is why these rules are scoped under the
   switcher as well - the two classes live on the same page and a loose
   rule would repaint the wrong control. */
.products-page .view-switcher,
.category-page .view-switcher {
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    overflow: hidden;
    background: var(--surface, #ffffff);
}

.products-page .view-switcher .view-option,
.category-page .view-switcher .view-option {
    background: transparent;
    color: var(--muted-text, #726D64);
    border: none;
    border-radius: 0;
    padding: 7px 11px;
}

.products-page .view-switcher .view-option.active,
.category-page .view-switcher .view-option.active {
    background: var(--primary-color, #ff9800);
    color: #ffffff;
}

.products-page .select-option,
.category-page .select-option,
.products-page .toolbar-options select,
.category-page .toolbar-options select {
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    background: var(--surface, #ffffff);
    color: var(--text-color, #333333);
    padding: 7px 10px;
}

/* ---- the filters, as one bordered card ---- */

.products-page .filters-panel,
.category-page .filters-panel {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
    padding: 16px;
}

.products-page .filter-title,
.category-page .filter-title {
    font-size: calc(var(--font-size-base, 16px) * 0.72);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-text, #726D64);
    font-weight: 700;
}

.products-page .filter-group,
.category-page .filter-group {
    border-bottom: 1px solid var(--line, #e0e0e0);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.products-page .filter-group:last-of-type,
.category-page .filter-group:last-of-type {
    border-bottom: none;
}

.products-page .filter-input,
.category-page .filter-input {
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    background: var(--surface, #ffffff);
    color: var(--text-color, #333333);
    padding: 8px 10px;
}

.products-page .filter-input:focus,
.category-page .filter-input:focus {
    outline: none;
    border-color: var(--primary-color, #ff9800);
}

.products-page .filter-btn,
.category-page .filter-btn {
    background: var(--primary-color, #ff9800);
    color: #ffffff;
    border: none;
    border-radius: var(--button-radius, 8px);
    padding: 10px 14px;
    font-weight: 600;
    width: 100%;
}

.products-page .filter-tag,
.category-page .filter-tag {
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .10);
    color: var(--primary-color, #ff9800);
    border-radius: 999px;
    border: none;
}

/* ---- about and contact: content cards and the form ---- */

/* v2.4.32: .info-item is no longer in this list. A contact row inside the
   white section card was a card inside a card; the rows are separated by a
   hairline now, below. The other three ARE cards - the stat tiles, the
   Mission/Vision/Values cards and the Email/Call/Chat/Visit cards - and keep
   their box. */
.about-page .stat-card,
.about-page .mvv-card,
.contact-page .stat-card,
.contact-page .quick-contact-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
}

/* v2.4.32: ONE contact-row treatment, shared by about.php's "Our Office" and
   contact.php's "Contact Information" so the two read as siblings. No box: a
   hairline in --line between rows, none after the last. The icon tile, the
   link colour and the hairline are theme tokens; nothing here is a literal. */
.about-page .info-item,
.contact-page .info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, #e0e0e0);
}

.about-page .info-item:last-child,
.contact-page .info-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.about-page .info-item:first-child,
.contact-page .info-item:first-child {
    padding-top: 0;
}

.about-page .info-icon,
.contact-page .info-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color, #ff9800) 0%, var(--secondary-color, #e07b00) 100%);
    border-radius: var(--button-radius, 8px);
}

.about-page .info-content,
.contact-page .info-content {
    flex: 1;
    min-width: 0;
}

.about-page .info-label,
.contact-page .info-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-text, #726D64);
    margin-bottom: 5px;
    font-family: var(--font-family);
}

.about-page .info-value,
.contact-page .info-value {
    color: var(--text-color, #333333);
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    line-height: 1.6;
    font-family: var(--font-family);
    word-break: break-word;
}

/* Only what is genuinely clickable reads as a link: the mailto: and the tel:.
   The address and the opening hours are plain text on both pages. */
.about-page .info-value a,
.contact-page .info-value a {
    color: var(--primary-color, #ff9800);
    text-decoration: none;
}

.about-page .info-value a:hover,
.contact-page .info-value a:hover {
    text-decoration: underline;
}

.about-page .mvv-icon,
.contact-page .quick-contact-icon {
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .12);
    color: var(--primary-color, #ff9800);
    border-radius: var(--button-radius, 8px);
}

.contact-page .form-label {
    font-size: calc(var(--font-size-base, 16px) * 0.72);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-text, #726D64);
    font-weight: 700;
}

/* The form fields are deliberately NOT restyled here. Field appearance is a
   shop-wide setting - includes/input-style.php renders the chosen treatment
   on every storefront form, already drawn from the theme line and primary,
   and it marks its declarations important. Boxing the fields on this one
   page would both lose that fight and break the consistency the setting
   exists to guarantee. Only the labels, which it does not govern, are
   styled above. */

@media (max-width: 768px) {
    .products-page .products-header-content,
    .category-page .category-header-content,
    .about-page .about-header-content,
    .contact-page .contact-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================================================
   Direction A order flow, v2.4.17.
   product-detail, cart and checkout.

   Every rule is scoped to a page root, because this sheet is shared
   with the homepage, the card pages and the inner pages, and names
   like section-header, form-group and total-row are common enough to
   reach all of them.

   PRESENTATION ONLY. These three pages carry the money path and the
   variant picker, so nothing here renames or restructures anything:
   the picker's hooks, the quantity control, the field names and the
   submit path are all left exactly as they are and merely painted.

   Field appearance is deliberately absent. It is a shop-wide setting
   rendered by the shared input treatment, already drawn from the
   theme and marked important; boxing fields on these pages would
   both lose that fight and break the consistency it guarantees.
   Labels and layout, which it does not govern, are styled here.
   =================================================================== */

/* ---- shared surfaces across the three ---- */

.product-detail-container .product-main,
.product-detail-container .product-tabs,
.product-detail-container .related-products,
.cart-page .cart-items,
.cart-page .cart-summary,
.checkout-page .checkout-section,
.checkout-page .order-summary {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
}

/* ---- product detail ---- */

.product-detail-container .product-title,
.product-detail-container h1 {
    font-family: var(--heading-font, var(--font-family));
    color: var(--text-color, #333333);
}

.product-detail-container .thumbnail {
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    overflow: hidden;
}

.product-detail-container .thumbnail.active {
    border-color: var(--primary-color, #ff9800);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 255, 152, 0), .25);
}

.product-detail-container .price-item .price-label {
    color: var(--muted-text, #726D64);
    font-size: calc(var(--font-size-base, 16px) * 0.78);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.product-detail-container .current-price,
.product-detail-container .price-value {
    color: var(--primary-color, #ff9800);
    font-weight: 700;
}

/* The picker is driven by JavaScript that reads these exact classes, so
   they are painted and nothing more - no renaming, no restructuring. */
.product-detail-container .variant-axis {
    border-top: 1px solid var(--line, #e0e0e0);
    padding-top: 12px;
    margin-top: 12px;
}

.product-detail-container .variant-option .variant-option-body {
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    background: var(--surface, #ffffff);
    color: var(--text-color, #333333);
    padding: 8px 12px;
}

.product-detail-container .variant-option input:checked + .variant-option-body {
    border-color: var(--primary-color, #ff9800);
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .10);
    color: var(--primary-color, #ff9800);
    font-weight: 600;
}

.product-detail-container .tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted-text, #726D64);
    font-weight: 600;
    padding: 10px 14px;
}

.product-detail-container .tab-btn.active {
    color: var(--primary-color, #ff9800);
    border-bottom-color: var(--primary-color, #ff9800);
}

.product-detail-container .tier-price-table th,
.product-detail-container .tier-price-table td,
.product-detail-container table th,
.product-detail-container table td {
    border-color: var(--line, #e0e0e0);
}

.product-detail-container .btn-primary,
.cart-page .checkout-btn,
.checkout-page .place-order-btn {
    background: var(--primary-color, #ff9800);
    border: none;
    color: #ffffff;
    border-radius: var(--button-radius, 8px);
    font-weight: 600;
}

/* ---- cart ---- */

.cart-page .cart-item {
    border-bottom: 1px solid var(--line, #e0e0e0);
}

.cart-page .qty-btn {
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #e0e0e0);
    color: var(--text-color, #333333);
    border-radius: var(--button-radius, 8px);
}

.cart-page .qty-btn:hover {
    border-color: var(--primary-color, #ff9800);
    color: var(--primary-color, #ff9800);
}

.cart-page .summary-row {
    color: var(--text-color, #333333);
    border-bottom: 1px solid var(--line, #e0e0e0);
}

.cart-page .summary-title {
    font-family: var(--heading-font, var(--font-family));
    color: var(--text-color, #333333);
}

.cart-page .price-display,
.cart-page .price-wrapper {
    color: var(--primary-color, #ff9800);
    font-weight: 700;
}

.cart-page .price-tax-info {
    color: var(--muted-text, #726D64);
    font-weight: 400;
}

/* ---- checkout ---- */

.checkout-page .section-header {
    border-bottom: 1px solid var(--line, #e0e0e0);
    color: var(--text-color, #333333);
}

.checkout-page .section-icon {
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .12);
    color: var(--primary-color, #ff9800);
    border-radius: var(--button-radius, 8px);
}

.checkout-page .form-label {
    font-size: calc(var(--font-size-base, 16px) * 0.72);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-text, #726D64);
    font-weight: 700;
}

.checkout-page .total-row {
    color: var(--text-color, #333333);
    border-bottom: 1px solid var(--line, #e0e0e0);
}

.checkout-page .order-item {
    border-bottom: 1px solid var(--line, #e0e0e0);
}

.checkout-page .item-name {
    color: var(--text-color, #333333);
    font-weight: 600;
}

@media (max-width: 768px) {
    .product-detail-container .product-main,
    .cart-page .cart-summary,
    .checkout-page .order-summary {
        border-radius: var(--card-radius, 12px);
    }
}

/* The cart carries the same page-header component as the pages skinned in
   v2.4.16 - a page header wrapping the info block, a description and a stats
   row - so it gets the same slim treatment rather than keeping the one banner
   still painted the old way. Scoped to the cart root; checkout and product
   detail have no such banner. */

.cart-page .cart-header {
    background: var(--surface, #ffffff) !important;
    background-image: none !important;
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    box-shadow: none;
    color: var(--text-color, #333333);
    padding: 18px 22px;
    margin-bottom: 20px;
    min-height: 0;
}

.cart-page .cart-header::before,
.cart-page .cart-header::after {
    display: none;
}

.cart-page .cart-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
}

.cart-page .cart-header h1 {
    font-family: var(--heading-font, var(--font-family));
    font-size: calc(var(--font-size-base, 16px) * 1.45);
    font-weight: 700;
    color: var(--text-color, #333333);
    margin: 0 0 4px;
    text-shadow: none;
}

.cart-page .header-description {
    margin: 0;
    font-size: calc(var(--font-size-base, 16px) * 0.875);
    color: var(--muted-text, #726D64);
    opacity: 1;
}

.cart-page .header-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cart-page .header-stats > div {
    background: rgba(var(--primary-color-rgb, 255, 152, 0), .08);
    border: 1px solid var(--line, #e0e0e0);
    border-radius: var(--button-radius, 8px);
    color: var(--text-color, #333333);
    padding: 8px 12px;
    min-width: 0;
    backdrop-filter: none;
}

.cart-page .header-stats .stat-value {
    color: var(--primary-color, #ff9800);
    font-size: calc(var(--font-size-base, 16px) * 1.05);
}

.cart-page .header-stats .stat-text,
.cart-page .header-stats .stat-label {
    color: var(--muted-text, #726D64);
}

@media (max-width: 768px) {
    .cart-page .cart-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================================================
   Direction A order confirmation, v2.4.18.
   checkout-success.php - the page redirect payment methods return to.

   Every rule is scoped to .e5-confirm. This sheet is shared with the
   homepage, the card pages, the inner pages and the order flow, and
   this block is last in the file, so an unscoped selector here would
   reach all four.

   The panel deliberately mirrors the success panel checkout.php draws
   for card payers - same icon disc, same order-number plate, same two
   actions - so a redirect payer gets the same receipt. It is rebuilt
   rather than shared because that panel is inline in the checkout
   form, populated by the checkout script, and lifting it out would
   mean editing the money path to style a different page.

   Colour comes from the theme, not from the mockup. The failure red
   is a state colour rather than a brand one, so it should not track
   the preset - but every rule from the card-skin banner onwards has
   resolved from a theme property for four releases, and a bare hex
   here would be the first to break that. It is written as a variable
   with the red as its fallback: the red is what renders today, and a
   shop that ever gains a danger property picks it up for nothing.
   =================================================================== */

.e5-confirm {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 20px 72px;
    font-family: var(--font-family);
}

.e5-confirm .e5-confirm-panel {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 48px 36px;
    text-align: center;
}

.e5-confirm .e5-confirm-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: var(--primary-color);
}

.e5-confirm .e5-confirm-pending .e5-confirm-icon {
    background: rgba(var(--primary-color-rgb), 0.55);
}

.e5-confirm .e5-confirm-failed .e5-confirm-icon {
    background: var(--danger-color, #ef4444);
}

.e5-confirm .e5-confirm-panel h1 {
    font-family: var(--heading-font);
    color: var(--text-color);
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 12px;
}

.e5-confirm .e5-confirm-panel > p {
    color: var(--muted-text);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 46ch;
}

.e5-confirm .e5-confirm-panel > p strong {
    color: var(--text-color);
}

.e5-confirm .e5-confirm-number {
    background: rgba(var(--primary-color-rgb), 0.07);
    border: 1px solid rgba(var(--primary-color-rgb), 0.18);
    border-radius: var(--card-radius);
    padding: 20px;
    margin: 32px 0;
}

.e5-confirm .e5-confirm-number p {
    color: var(--muted-text);
    font-size: 0.875rem;
    margin: 0 0 6px;
}

.e5-confirm .e5-confirm-number h2 {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--primary-color);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    margin: 0;
    word-break: break-all;
}

.e5-confirm .e5-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

.e5-confirm .e5-confirm-btn,
.e5-confirm .e5-confirm-btn-ghost {
    display: inline-block;
    padding: 13px 26px;
    border-radius: var(--button-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.e5-confirm .e5-confirm-btn {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}

.e5-confirm .e5-confirm-btn:hover {
    background: rgba(var(--primary-color-rgb), 0.88);
}

.e5-confirm .e5-confirm-btn-ghost {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-color);
}

.e5-confirm .e5-confirm-btn-ghost:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
}

@media (max-width: 560px) {
    .e5-confirm {
        padding: 28px 14px 48px;
    }

    .e5-confirm .e5-confirm-panel {
        padding: 34px 20px;
    }

    .e5-confirm .e5-confirm-actions a {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   v2.4.74: bank-transfer scan-to-pay block (EPC QR + the details as text).
   Rendered on the checkout success box and on the customer's order page for
   bank-transfer orders still awaiting payment. Scoped to .epc-*; no page
   without the markup is affected.
   --------------------------------------------------------------------------- */
.epc-box {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid var(--line, #e6ebf3);
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    text-align: left;
}
.epc-box h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}
.epc-hint,
.epc-note {
    margin: 0 0 12px;
    color: var(--muted, #6c757d);
    font-size: 0.92rem;
}
.epc-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.epc-qr {
    flex: 0 0 auto;
    padding: 8px;
    background: #ffffff;
    border-radius: 8px;
    line-height: 0;
}
.epc-qr svg {
    display: block;
    width: 180px;
    height: 180px;
}
.epc-details {
    flex: 1 1 220px;
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    align-content: start;
}
.epc-details dt {
    color: var(--muted, #6c757d);
    font-size: 0.9rem;
}
.epc-details dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}
.epc-details dd.epc-amount {
    font-weight: 600;
}
@media (max-width: 480px) {
    .epc-details {
        grid-template-columns: 1fr;
    }
}