/*
  City Tech Store — shared theme tokens and header/footer component styles.
  Every color/font used across the redesigned UI should come from these
  custom properties rather than a hardcoded hex value in a page file.
*/

:root {
    --color-primary: #E31E24;
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 82%, black);
    --color-navy: #0F172A;
    --color-navy-light: #1E293B;
    --color-bg: #F8FAFC;
    --color-bg-secondary: #F8F9FA;
    --color-border: #E2E8F0;
    --color-text: #1F2937;
    --color-text-muted: #64748B;
    --color-text-muted-dark: #94A3B8;
    --color-star: #F59E0B;
    --color-dark: #0A0F1D;
    --color-accent-soft-bg: #FFF1EE;
    --color-white: #FFFFFF;
    --font-family-heading: 'Outfit', sans-serif;
    --font-family-base: 'Geist', sans-serif;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-dark);
}

/* ---------- Top utility bar ---------- */
.top-utility-bar {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.top-utility-bar a {
    color: var(--color-white);
    text-decoration: underline;
}

.top-utility-bar a:hover {
    color: var(--color-primary);
}

/* ---------- Main header ---------- */
/* .site-header (logo/search/account row) and .site-nav (category links row,
   further down) both live inside this wrapper as plain in-flow siblings; it's
   the WRAPPER that's sticky (top:0), not either bar individually. That's
   deliberate, not just where the class happened to land: sticking each bar
   separately would need .site-nav's own "top" hardcoded to .site-header's
   exact rendered height in pixels, which silently breaks the moment that
   height ever changes (a longer nav link wrapping, a font-size tweak, and so
   on). Stuck as one unit, they always scroll together correctly with no
   pixel math to keep in sync - the whole point of the request that added
   this ("both nav bars fixed, together, like Konga's"), which a single
   sticky-top on .site-header alone did not deliver (the header stuck, the
   category row above simply scrolled away underneath it). The shadow that
   used to sit on .site-header directly moved here too, so it reads as one
   shadow under the combined block's real bottom edge (under .site-nav), not
   a shadow sitting in the middle between the two bars.
*/
.site-header-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 1020; /* matches Bootstrap's own .sticky-top z-index */
}

.site-header {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-bg-secondary);
}

.site-brand {
    color: var(--color-primary) !important;
    text-decoration: none;
}

/* The "CITY TECH STORE" wordmark beside the CTS mark, everywhere it appears
   (header, phone menu, footer, checkout header, log-in / forgot / reset
   password pages): Ubuntu Bold, compact and tightly spaced. Each place keeps
   its own colour and size; the header's is set here. includes/cdn_header.php
   loads the font. */
.site-brand-text {
    font-family: 'Ubuntu', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.site-brand .site-brand-text {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.site-brand-text-menu {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.site-header-search .form-control {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-right: none;
}

.site-header-search .site-search-btn {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: none;
    color: var(--color-text-muted);
}

.site-header-icons {
    color: var(--color-navy);
}

.site-header-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-navy);
    text-decoration: none;
    font-size: 0.9rem;
}

.site-header-icon i {
    font-size: 1.1rem;
}

.site-header-icon:hover {
    color: var(--color-primary);
}

.site-header-textlink {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.site-header-textlink i {
    font-size: 0.85rem;
}

.site-header-textlink:hover {
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .site-header-icon {
        flex-direction: column;
        gap: 2px;
        text-align: center;
        font-size: 0.85rem;
    }

    .site-header-icon i {
        font-size: 1.25rem;
    }
}

/* ---------- Mobile header (< md), Konga-style single compact row ---------- */
.site-header-mobile {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-bg-secondary);
}

/* Phone/tablet header: hamburger and logo side by side on the left. */
.site-mobile-start {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    /* -5px top/bottom: the 44px tap areas take no more row height than the old
       34px logo, so the search bar and category row below don't move. -0.5rem
       left: the button's own padding lines the icon up with the page edge. */
    margin: -5px 0 -5px -0.5rem;
}

.site-mobile-menu-btn {
    background: none;
    border: none;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.35rem;
    color: var(--color-navy);
    line-height: 1;
}

.site-brand-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    text-decoration: none;
}

.site-mobile-menu-btn:focus-visible,
.site-brand-mobile:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.site-mobile-icons {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.site-mobile-icon {
    position: relative;
    color: var(--color-navy);
    font-size: 1.25rem;
    text-decoration: none;
}

/* A bigger, invisible tap area (40 x 44) around the small icon; the icon and
   the layout stay exactly the same. */
.site-mobile-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.site-mobile-icon:hover,
.site-mobile-icon:active {
    color: var(--color-primary);
}

.site-nav-mobile-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0 0.75rem 0.75rem;
}

.site-nav-mobile-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.site-nav-mobile-link.site-nav-mobile-all {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
}

.site-nav-mobile-link:hover,
.site-nav-mobile-link:active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Mobile hamburger sidebar (offcanvas) ---------- */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu-link i {
    width: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary);
}

.mobile-menu-link:hover i,
.mobile-menu-link:active i {
    color: var(--color-primary);
}

.mobile-menu-link-bold {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-dark);
    font-size: 1.05rem;
}

.mobile-menu-link-bold i:first-child {
    color: var(--color-primary);
}

.mobile-menu-chevron {
    margin-left: auto;
    width: auto !important;
    font-size: 0.8rem !important;
    color: var(--color-text-muted) !important;
}

.mobile-menu-section-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 1rem 1rem 0.5rem;
}

/* ---------- Nav tabs ---------- */
.site-nav {
    /* --color-accent-soft-bg is the site's existing "red at low opacity" tint
       (already used for the active-category icon, hover states, etc.) -
       reused here rather than a new one-off color. */
    background-color: var(--color-accent-soft-bg);
    border-bottom: 1px solid var(--color-bg-secondary);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.185);
}

.site-nav-link {
    color: var(--color-text) !important;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.site-nav-link:hover {
    color: var(--color-primary) !important;
}

.site-nav-link.active,
.site-nav-link[aria-current="page"] {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary);
}

.site-nav-all-categories {
    font-weight: 700 !important;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    margin-right: 0.5rem;
}

.site-nav-all-categories i {
    color: var(--color-primary);
    margin-right: 0.4rem;
}

/* ---------- Section headings (Flash Deals, Shop by Brand, etc.) ----------
   h1.fs-4: a page's own title in the same style (Shop, Brands, Visit Our Store). */
h4.fs-4,
h1.fs-4 {
    font-size: 28px;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    h4.fs-4,
    h1.fs-4 {
        font-size: 20px;
    }
}

/* ---------- Product strip header banner (Konga-style colored bar) ---------- */
.strip-header {
    background-color: var(--color-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
}

.strip-header-title {
    color: var(--color-white);
}

.strip-header-link {
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.strip-header-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--color-navy);
    color: #CBD5E1;
}

.site-footer h6 {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 1rem;
}

.site-footer a {
    color: #CBD5E1;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-primary);
}

/* Small phones: the logo name may wrap instead of running into the next column. */
@media (max-width: 575.98px) {
    .site-footer .navbar-brand {
        white-space: normal;
        line-height: 1.25;
    }
}

.site-footer .site-footer-copyright {
    border-top: 1px solid var(--color-navy-light);
    color: var(--color-text-muted-dark);
}

/* "Developed by ..." (includes/developer_credit.php): one small, muted line
   under the copyright, so it never competes with it. Storefront (navy) here;
   admin (white) under .admin-footer below. */
.developer-credit {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.site-footer .developer-credit {
    color: var(--color-text-muted-dark);
    opacity: 0.85;
}
.site-footer .developer-credit a,
.site-footer .developer-credit .developer-credit-name {
    color: #CBD5E1;
    font-weight: 600;
    text-decoration: none;
}
.site-footer .developer-credit a:hover,
.site-footer .developer-credit a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-navy-light);
    margin-right: 0.5rem;
}

.site-footer-social a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Navy page-heading band (views.blog.php, views.blog_archive.php) ---------- */
.about-hero {
    background-color: var(--color-navy);
    color: var(--color-white);
    padding: 3.5rem 0;
    text-align: center;
    border-bottom: 4px solid var(--color-primary);
}

.about-hero h1 {
    color: var(--color-white);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    margin-bottom: 0.75rem;
}

.about-hero .lead {
    color: #CBD5E1;
}

/* Newsletter sign-up band at the top of the footer (includes/newsletter_form.php). */
.site-footer-newsletter {
    border-bottom: 1px solid var(--color-navy-light);
}

.site-footer .newsletter-consent {
    color: var(--color-text-muted-dark);
}

.site-footer .newsletter-consent a {
    text-decoration: underline;
}

/* ---------- Product card (shared by /shop and the homepage) ---------- */
.product-card {
    max-width: 302px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

/* Square image area on every card, whatever shape the photo is, so all cards
   in a row line up. contain (never cover): the whole product stays visible,
   scaled down and centered on white - no cropping, no stretching. */
.product-card-image-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0.75rem;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card-title {
    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card-price {
    font-weight: 700;
    color: var(--color-text);
}

/* Price and "+ Add" side by side; on a narrow (2-per-row phone) card a long
   price like N6,000,000.00 left no room and pushed the button past the
   card's edge, so there they stack instead - on every card, so each card in
   a row keeps the same layout. */
.product-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .product-card-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.product-card-add-btn {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.product-card-add-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Product detail page ---------- */
/* Square, capped at 480px so a tall phone photo can't blow up to fill a wide
   column. max-width/max-height (not width/height:100%) so a small source
   image is shown at its own size instead of being upscaled blurry. */
.product-detail-image-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-detail-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* "Product Description" card under the image/price area (views.product.php):
   highlights -> specs table -> description. City Tech Store tokens, not Konga's. */
.product-desc-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
}

.product-desc-heading {
    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.product-desc-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    color: var(--color-dark);
    font-weight: 600;
    line-height: 1.8;
}

.product-desc-specs {
    width: auto;
    min-width: 280px;
    max-width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.product-desc-specs th,
.product-desc-specs td {
    border: 1px solid var(--color-border);
    padding: 0.45rem 0.9rem;
    vertical-align: top;
}

.product-desc-specs th {
    background-color: var(--color-bg);
    color: var(--color-dark);
    font-weight: 600;
    white-space: nowrap;
}

.product-desc-specs td {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.product-desc-body {
    color: var(--color-text);
    line-height: 1.7;
}

.product-desc-body p {
    margin: 0 0 1rem;
}

.product-desc-body p:last-child,
.product-desc-body ul:last-child,
.product-desc-body ol:last-child {
    margin-bottom: 0;
}

.product-desc-body ul,
.product-desc-body ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

@media (max-width: 575.98px) {
    .product-desc-card {
        padding: 1.1rem 1rem;
    }

    .product-desc-specs {
        min-width: 0;
        width: 100%;
    }

    .product-desc-specs th {
        white-space: normal;
    }
}

/* ---------- Single product page (views.product.php) ----------
   Konga-style layout in City Tech Store colors: white main card (gallery +
   info), Delivery & Returns sidebar, description card below; one column and a
   sticky buy bar on mobile. */
.pdp-breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.pdp-breadcrumb .breadcrumb-item {
    white-space: nowrap;
    flex-shrink: 0; /* only the current (last) item gives up width */
}

.pdp-breadcrumb .breadcrumb-item.active {
    flex-shrink: 1;
}

.pdp-breadcrumb .breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.pdp-breadcrumb .breadcrumb-item a:hover {
    color: var(--color-primary);
}

.pdp-breadcrumb .breadcrumb-item.active {
    color: var(--color-primary);
    font-weight: 600;
    display: flex;
    min-width: 0;
}

/* Clip the long product name on its own span, not the <li>, so the "/"
   separator (the <li>'s ::before) is never clipped or overlapped. */
.pdp-crumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pdp-main-card,
.pdp-side-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
}

/* Gallery */
.pdp-gallery-main {
    position: relative;
}

.pdp-gallery-main .product-detail-image-wrap {
    max-width: none;
    border-radius: 12px;
}

.pdp-wishlist-btn {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    transition: color 0.15s, transform 0.15s;
}

.pdp-wishlist-btn:hover,
.pdp-wishlist-btn.is-saved {
    color: var(--color-primary);
}

.pdp-wishlist-btn:active {
    transform: scale(0.92);
}

.pdp-heart-on,
.pdp-wishlist-btn.is-saved .pdp-heart-off {
    display: none;
}

.pdp-wishlist-btn.is-saved .pdp-heart-on {
    display: inline;
}

.pdp-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.pdp-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-border);
    transition: width 0.2s, background-color 0.2s;
}

.pdp-dot.is-active {
    width: 22px;
    background-color: var(--color-primary);
}

.pdp-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.pdp-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-white);
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdp-thumb.is-active {
    border-color: var(--color-primary);
}

.pdp-share {
    margin-top: 1.25rem;
}

.pdp-share-label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.pdp-share-icons {
    display: flex;
    gap: 0.5rem;
}

.pdp-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--color-navy);
    color: var(--color-white);
    text-decoration: none;
}

.pdp-share-icon:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Info column */
.pdp-title {
    font-family: var(--font-family-heading);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
    overflow-wrap: anywhere;
}

.pdp-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.pdp-meta strong {
    color: var(--color-dark);
}

.pdp-brand-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.pdp-brand-link:hover {
    text-decoration: underline;
}

.pdp-price-block {
    margin-top: 1rem;
}

.pdp-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pdp-price {
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

.pdp-old-price {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.pdp-save-badge {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
}

.pdp-divider {
    border-color: var(--color-border);
    opacity: 1;
    margin: 1.1rem 0;
}

.pdp-qty-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pdp-qty-label {
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 0;
}

.pdp-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.pdp-stepper-btn {
    width: 36px;
    border: 0;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-size: 1.1rem;
    line-height: 1;
}

.pdp-stepper-btn:hover:not(:disabled) {
    background-color: var(--color-bg);
}

.pdp-stepper-btn:disabled {
    color: var(--color-text-muted-dark);
}

.pdp-stepper-input {
    width: 52px;
    height: 36px;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pdp-stepper-input::-webkit-outer-spin-button,
.pdp-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdp-stock {
    font-size: 0.85rem;
    font-weight: 600;
}

.pdp-stock-low {
    color: #B45309;
}

.pdp-stock-out {
    color: var(--color-primary);
}

.pdp-bulk-box {
    display: inline-flex;
    flex-direction: column;
    margin-top: 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background-color: var(--color-accent-soft-bg);
    font-size: 0.85rem;
    color: var(--color-dark);
}

.pdp-bulk-box a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.pdp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pdp-btn-outline,
.pdp-btn-filled {
    font-weight: 600;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-primary);
}

.pdp-btn-outline {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.pdp-btn-outline:hover {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pdp-btn-filled {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pdp-btn-filled:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.pdp-btn-outline:disabled,
.pdp-btn-filled:disabled {
    opacity: 0.55;
}

.pdp-selling-points {
    list-style: none;
    padding: 0.9rem 0 0;
    margin: 1rem 0 0;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.pdp-selling-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pdp-sp-icon {
    flex: 0 0 auto;
    color: var(--color-primary);
    width: 1.1rem;
    text-align: center;
    margin-top: 0.15rem;
}

/* Delivery & Returns sidebar */
.pdp-side-heading {
    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.1rem;
}

.pdp-side-item {
    display: flex;
    gap: 0.75rem;
}

.pdp-side-item + .pdp-side-item {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
}

.pdp-side-icon {
    color: var(--color-primary);
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    margin-top: 0.15rem;
}

.pdp-side-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.3rem;
}

.pdp-side-text {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.pdp-side-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-primary);
}

.pdp-warranty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.pdp-warranty-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-dark);
    margin-bottom: 0.15rem;
}

/* Sticky buy bar: mobile/tablet only */
.pdp-sticky-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .pdp-main-card,
    .pdp-side-card {
        padding: 1rem;
        height: auto;
    }

    .pdp-gallery-main .product-detail-image-wrap {
        max-width: 420px;
    }

    .pdp-title {
        font-size: 1.2rem;
    }

    .pdp-price {
        font-size: 1.5rem;
    }

    .pdp-sticky-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
    }

    .pdp-sticky-price {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
    }

    .pdp-sticky-price .pdp-price {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .pdp-sticky-price .pdp-old-price {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .pdp-sticky-actions {
        display: flex;
        gap: 0.5rem;
        flex: 0 0 auto;
    }

    .pdp-sticky-actions .btn {
        padding: 0.55rem 0.8rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Room for the sticky bar so it never covers the footer's last line. */
    body.pdp-has-sticky-bar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 374.98px) {
    .pdp-selling-points {
        grid-template-columns: 1fr;
    }
}

/* ---------- Homepage: hero banner ---------- */
/* .hero-banner is shared by three contexts: the homepage carousel's real
   slides, the homepage's no-slides-configured placeholder (further below,
   which still overlays real welcome text/button and is the only one of the
   three that still uses .hero-banner-content), and the shop page's category
   banner (views.shop.php). All three are now plain, un-overlaid images or
   (placeholder only) a branded panel with no photo - none of them draw
   overlay text on top of a photo any more, so there's no dark scrim to
   worry about keeping in sync here. */
.hero-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-navy);
    background-size: cover;
    background-position: center;
    min-height: 360px;
    display: flex;
    align-items: center;
}

/* The homepage carousel's real slide images are un-overlaid now (see above),
   so their own baked-in text/pricing is the ONLY text on the slide - it has
   to never be cropped. The uploaded hero images are designed at a 2:1 ratio
   (1440x720, 1400x700); a fixed min-height regardless of width forced this
   box into whatever shape the viewport happened to give it (near-square on
   a phone), and background-size:cover then zoomed in and cut off the sides
   to fill that mismatched shape - which is what was cropping text off the
   left/right edges on narrow screens. Matching the box's own aspect ratio to
   the image's real one means cover never has to crop anything, at any width. */
.hero-carousel .hero-banner {
    min-height: 0;
    aspect-ratio: 2 / 1;
}

/* A hero slide can be a short looping video instead of a static image (same
   idea as .hero-promo-tile-video) - a real <video> fills the slide behind
   nothing else (no gradient/headline here, this slide has neither), playing
   autoplay/muted/loop with no controls. .hero-banner's own overflow:hidden
   clips it to the rounded corners, since a child element isn't auto-clipped
   to its parent's border-radius the way a CSS background-image is. */
.hero-carousel .hero-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shop page's OWN "all products" banner carousel (includes/shop_carousel.php,
   ShopBanner model) - same plain-image/video, no-overlay treatment as the
   homepage hero carousel above, just a different aspect ratio: this page is
   full-page-width with no side column narrowing it, so reusing the
   homepage's 2:1 hero images made the banner far too tall (a 2:1 image
   spanning the FULL page width is a lot more pixels tall than the same
   image inside the homepage's narrower hero column). 1920/420 matches the
   Category Banner's own established "full-width banner" ratio instead. */
.shop-carousel .hero-banner {
    min-height: 0;
    aspect-ratio: 1920 / 420;
}

.shop-carousel .hero-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shop page category banner (views.shop.php) - same box-shape problem the
   homepage hero had: a fixed min-height regardless of width forced this into
   a near-square shape on a phone, and background-size:cover then cropped the
   image to fill it. Most of the uploaded category banners are 1920x420
   (checked via getimagesize on the actual files in assets/img/category_banners)
   - matching that ratio here means cover rarely has to crop. Unlike the
   homepage hero this one keeps real overlay text (headline/subtext/button),
   which still needs a usable minimum height on a narrow phone even though the
   image "wants" to be very short at that width - min-height acts as a floor
   the aspect-ratio can't shrink below, so on a narrow screen this ends up
   shorter than desktop's ratio-matched height but never so short the text
   stops fitting. */
.category-banner {
    width: 100%;
    min-height: 160px;
    aspect-ratio: 1920 / 420;
}

.hero-banner-content {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    padding: 2.5rem;
    max-width: 560px;
}

.hero-badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.hero-banner-content h1 {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .hero-banner-content {
        padding: 1.5rem;
    }

    .hero-banner-content h1 {
        font-size: 28px;
    }
}

.hero-banner-content p {
    color: var(--color-border);
    margin-bottom: 1.5rem;
}

.hero-shop-btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
}

.hero-shop-btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* ---------- Homepage: hero carousel + placeholder panel ---------- */
/* Used until real product photography replaces the scraped Samsung/Apple
   marketing images and unrelated screenshot currently in the products
   table — see product_picture_url. No background-image, just a branded
   panel, so it never looks like a broken/missing image. */
.hero-banner-placeholder {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-dark) 100%);
    justify-content: center;
}

.hero-banner-placeholder-icon {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11rem;
    color: rgba(255, 255, 255, 0.08);
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .hero-banner-placeholder-icon {
        font-size: 7rem;
    }
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    border-radius: 12px;
}

.hero-carousel .carousel-indicators {
    margin-bottom: 0.75rem;
}

.hero-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
    margin: 0 4px;
}

.hero-carousel .carousel-indicators .active {
    background-color: var(--color-primary);
}

/* ---------- Homepage: hero side promo tiles ---------- */
/* Konga's own tile structure (see reference screenshots): a plain square
   (icon, photo or video, never text drawn on top of it) with a caption
   sitting BELOW it in the page's ordinary text color - .promo-tile-cell is
   the whole clickable region (square + caption stacked), .hero-promo-tile
   is just the square itself, and .hero-promo-tile-label is the caption. */
.promo-tile-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
}

.hero-promo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background-color: var(--color-dark);
    color: var(--color-white);
    overflow: hidden;
}

.hero-promo-tile i {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.promo-tile-cell:hover .hero-promo-tile {
    background-color: var(--color-navy-light);
}

.hero-promo-tile-label {
    margin-top: 0.5rem;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--color-text);
}

/* Below md, the promo row (col-3, see views.index.php) is at its narrowest -
   shrink the icon/caption to match Konga's small mobile tile size. From md
   up through xl the row is still 4-across but with a lot more room per
   tile, so it keeps the larger default sizing above (matching Konga's
   bigger tablet tiles) instead of staying pinned to the phone size. */
@media (max-width: 767.98px) {
    .hero-promo-tile i {
        font-size: 1.35rem;
    }

    .hero-promo-tile-label {
        margin-top: 0.35rem;
        font-size: 0.75rem; /* 12px: the smallest comfortable size on a phone */
    }
}

/* Image-backed variant (1 admin-uploaded slide in a slot): the tile becomes
   a flat photo fill - no overlay/gradient needed since its caption (if any)
   now lives outside in .hero-promo-tile-label instead of drawn on top. */
.hero-promo-tile-image {
    background-size: cover;
    background-position: center;
}

/* Video-backed variant (a promo tile slide can be a short video instead of
   a static image) - a real <video> element fills the square behind it,
   playing autoplay/muted/loop with no controls (background-video style).
   overflow:hidden on .hero-promo-tile (not here) clips it to the rounded
   corners, since (unlike a CSS background-image) a real child element isn't
   auto-clipped to its parent's border-radius on its own. */
.hero-promo-tile-video {
    position: relative;
}

.hero-promo-tile-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A slot with 2+ active slides auto-rotates as its own small Bootstrap
   carousel (crossfade via Bootstrap's own .carousel-fade, no custom JS).
   Unlike the two single-slide variants above, this one keeps its caption
   (if any) overlaid on the slide itself - see the comment beside its markup
   in views.index.php for why. */
.hero-promo-tile-carousel {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
}

.hero-promo-tile-carousel .carousel-inner,
.hero-promo-tile-carousel .carousel-item {
    height: 100%;
}

.hero-promo-tile-carousel .hero-promo-tile {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
    position: relative;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 0.85rem;
}

.hero-promo-tile-carousel .hero-promo-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.8) 100%);
}

.hero-promo-tile-headline {
    position: relative;
    z-index: 1;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--color-white);
}

/* ---------- Homepage: category quicklinks ---------- */
.category-quicklinks {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.category-quicklink {
    scroll-snap-align: start;
}

.category-quicklink {
    flex: 0 0 auto;
    width: 96px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}

.category-quicklink-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.category-quicklink-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.category-quicklink:hover .category-quicklink-icon {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Homepage: shop by brand ---------- */
.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 146px;
    height: 72px;
    margin: 0 auto;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-family: var(--font-family-heading);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background-color: var(--color-white);
}

.brand-card:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- Contact page ---------- */
/* Light-background equivalent of .site-footer-social - same circular
   icon treatment, just on the page background instead of the navy footer. */
.contact-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    margin-right: 0.5rem;
}

.contact-social-icons a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Off-screen (not display:none - some bots skip hidden fields, but very
   few skip fields simply moved out of the visible viewport), unreachable
   by keyboard tab order (tabindex="-1" on the input) or screen readers
   (aria-hidden on the wrapper). See controllers.contact.php's honeypot check. */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ---------- Homepage: trust badges ---------- */
.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}

.trust-badge-icon {
    color: var(--color-primary);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.trust-badge-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 0.1rem;
}

.trust-badge-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ---------- Staff dashboard ---------- */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
}

.stat-card-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-white);
    background-color: var(--color-primary);
}

.stat-card-icon.stat-card-icon-navy {
    background-color: var(--color-navy);
}

.stat-card-value {
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-dark);
    line-height: 1.2;
}

.stat-card-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
}

.dashboard-panel-title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
}

/* ---------- Admin shell (opt-in per page; dashboard only for now) ---------- */
.admin-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-bg);
}

.admin-sidebar {
    width: 96px;
    flex-shrink: 0;
    background-color: var(--color-navy);
    align-items: center;
    padding: 1.25rem 0.5rem;
    gap: 0.5rem;
    /* Pinned to the viewport height independently, rather than stretched
       to match .admin-shell's auto-computed height — avoids a nested-flex
       circular-auto-height bug where a tall .admin-content (flex:1 inside
       a flex-column inside a stretched flex-row) resolves a too-short
       height for its own overflowing children on long pages. */
    align-self: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin-sidebar-brand {
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.75rem;
}

.admin-sidebar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.6rem 0.25rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
}

.admin-sidebar-link i {
    font-size: 1.15rem;
}

.admin-sidebar-link:hover {
    background-color: var(--color-navy-light);
    color: var(--color-white);
}

.admin-sidebar-link-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.admin-sidebar-label {
    line-height: 1.1;
}

.admin-sidebar-offcanvas {
    background-color: var(--color-navy);
    color: var(--color-white);
    width: 240px;
}

.admin-sidebar-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.admin-sidebar-offcanvas-brand {
    font-family: var(--font-family-heading);
    font-weight: 800;
    color: var(--color-white);
}

.admin-sidebar-offcanvas-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--color-navy-light);
}

.admin-sidebar-offcanvas-link i {
    width: 20px;
    text-align: center;
}

.admin-sidebar-offcanvas-link:hover,
.admin-sidebar-offcanvas-link-active {
    background-color: var(--color-navy-light);
    color: var(--color-white);
}

.admin-main {
    flex: 1;
    min-width: 0;
    /* Deliberately NOT display:flex/flex-direction:column — see
       .admin-sidebar's comment. Topbar/content/footer just stack in
       normal block flow, so .admin-content always sizes to its real
       content height, however tall. */
}

.admin-topbar {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 0.85rem 1.25rem;
    z-index: 5;
}

.admin-topbar-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-navy);
    padding: 0.25rem 0.5rem;
}

.admin-topbar-title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-dark);
}

.admin-topbar-profile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-content {
    padding: 1.5rem;
}

.admin-footer {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.admin-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.admin-trend-badge-up {
    background-color: rgba(34, 197, 94, 0.12);
    color: #16A34A;
}

.admin-trend-badge-down {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
}

.admin-trend-badge-flat {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
}

.admin-trend-badge-new {
    background-color: rgba(15, 23, 42, 0.08);
    color: var(--color-navy);
}

.admin-attention-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
}

.admin-attention-card:hover {
    border-color: var(--color-primary);
}

.admin-attention-value {
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-dark);
    line-height: 1.2;
}

.admin-attention-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.admin-chart-toggle .btn {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.admin-chart-toggle .btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.admin-chart-wrap {
    position: relative;
    height: 260px;
}

.admin-chart-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-chart-status-error {
    color: var(--color-primary);
}

/* ---------- Dashboard: "Website visitors" (Google Analytics) ----------
   includes/dashboard_analytics_card.php, assets/js/dashboard-analytics.js */
.ga-card-sub {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.ga-state {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background-color: var(--color-bg);
    color: var(--color-text);
}

.ga-state[hidden] {
    display: none;
}

.ga-state-icon {
    flex: none;
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}

.ga-state[data-ga-state="error"] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-white));
    background-color: var(--color-accent-soft-bg);
}

.ga-state[data-ga-state="error"] .ga-state-icon {
    color: var(--color-primary);
}

.ga-state p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.ga-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--color-star);
    border-radius: 8px;
    background-color: #FFFBEB;
    color: var(--color-text);
    font-size: 0.88rem;
}

.ga-stat {
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.ga-stat-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ga-stat-value {
    color: var(--color-dark);
    font-family: var(--font-family-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
}

.ga-stat-change {
    font-size: 0.8rem;
    font-weight: 600;
}

.ga-stat-change.is-up { color: #15803D; }
.ga-stat-change.is-down { color: var(--cts-link); }
.ga-stat-change.is-flat { color: var(--color-text-muted); }

.ga-sub-title {
    margin: 0 0 0.6rem;
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 700;
}

.ga-chart-wrap {
    position: relative;
    height: 220px;
    margin-bottom: 0.5rem;
}

.ga-pages,
.ga-bars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ga-page {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

.ga-page:first-child {
    border-top: 0;
}

.ga-page-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ga-page-title,
.ga-page-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-page-title {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.ga-page-path {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.ga-page-views {
    flex: none;
    color: var(--color-navy);
    font-weight: 700;
}

.ga-bar {
    margin-bottom: 0.6rem;
}

.ga-bar-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.86rem;
}

.ga-bar-pct {
    color: var(--color-navy);
    font-weight: 700;
}

.ga-bar-track {
    height: 8px;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--color-bg-secondary);
}

.ga-bar-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--color-primary);
}

[data-ga-devices] .ga-bar-fill {
    background-color: var(--color-navy);
}

.ga-none {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.ga-footnote {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.admin-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    background-color: var(--color-bg);
}

@media (max-width: 991.98px) {
    .admin-content {
        padding: 1rem;
    }
}

/* ---------- Admin data tables (Orders, and later Products/Categories/etc.) ---------- */
.admin-order-thumb-stack {
    display: flex;
    align-items: center;
}

.admin-order-thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--color-white);
    background-color: var(--color-bg);
    margin-left: -10px;
}

.admin-order-thumb:first-child {
    margin-left: 0;
}

.admin-order-thumb-more {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid var(--color-white);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: -10px;
}

/* ---------- One order, as a page (includes/admin_order_page.php) ---------- */
.admin-order-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.admin-order-back:hover {
    color: var(--color-primary);
}

.admin-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.admin-order-title {
    margin: 0;
    font-size: 1.6rem;
    color: var(--color-dark);
}

.admin-order-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-order-badges .badge {
    font-size: 0.8rem;
    padding: 0.45em 0.7em;
}

.admin-order-sub {
    margin: 0.35rem 0 1rem;
    color: var(--color-text-muted);
}

.admin-order-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-order-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 460px;
    border-radius: 12px;
    background-color: #F8FAFC;
    overflow: hidden;
}

.admin-order-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-order-photo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-order-photo-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background-color: #F8FAFC;
    overflow: hidden;
}

.admin-order-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-order-photo-thumb.is-active,
.admin-order-photo-thumb:hover {
    border-color: var(--color-primary);
}

.admin-order-card-title,
.admin-order-delivery h6 {
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Customer email / phone: a taller tap area on phones. */
.admin-order-card p > a {
    display: inline-block;
    padding: 0.2rem 0;
}

.admin-order-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
}

.admin-order-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0;
    margin: 0;
}

.admin-order-totals dt {
    font-weight: 400;
    color: var(--color-text-muted);
}

.admin-order-totals dd {
    margin: 0;
    padding-left: 1rem;
    text-align: right;
}

.admin-order-totals .is-total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-dark);
    font-weight: 700;
    font-size: 1.05rem;
}

.admin-order-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-order-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.admin-order-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-order-item-photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background-color: #F8FAFC;
    object-fit: contain;
}

.admin-order-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-order-item-name {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.admin-order-item-name:hover {
    color: var(--color-primary);
}

.admin-order-item-meta {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.admin-order-item-total {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--color-dark);
    white-space: nowrap;
}

.admin-order-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-order-status-row .form-select {
    width: auto;
    min-width: 180px;
}

@media (max-width: 575.98px) {
    .admin-order-title {
        font-size: 1.3rem;
    }

    .admin-order-photo {
        max-height: 320px;
    }

    .admin-order-item {
        gap: 0.75rem;
    }

    .admin-order-item-photo {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    .admin-order-status-row .form-select,
    .admin-order-status-row .btn {
        flex: 1 1 100%;
    }
}

/* ---------- Messages > Chat (includes/chat_messages_page.php) ---------- */
.chat-admin-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.chat-admin-facts dt {
    font-weight: 400;
    color: var(--color-text-muted);
}

.chat-admin-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.chat-admin-topics {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-admin-topics li {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr 2.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.chat-admin-topics a {
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 600;
}

.chat-admin-topics a:hover {
    color: var(--color-primary);
}

.chat-admin-bar {
    height: 8px;
    border-radius: 999px;
    background-color: #F1F5F9;
    overflow: hidden;
}

.chat-admin-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--color-primary);
}

.chat-admin-num {
    text-align: right;
    font-weight: 700;
}

.chat-admin-top li {
    padding: 0.25rem 0;
}

.chat-admin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.chat-admin-filters .form-select {
    width: auto;
    min-width: 170px;
}

.chat-admin-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-admin-msg {
    max-width: 80%;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.chat-admin-msg.is-customer {
    align-self: flex-end;
    background-color: #FEF2F2;
    border-color: #FECACA;
}

.chat-admin-msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.chat-admin-msg-body {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .chat-admin-msg {
        max-width: 100%;
    }

    .chat-admin-topics li {
        grid-template-columns: 1fr 2.5rem;
    }

    .chat-admin-bar {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* Overrides the page-wide .table td/th ellipsis rule (views.manage.php's
   own inline <style>) for this table only — additive, higher-specificity
   selector, the shared rule itself is untouched. */
.admin-orders-table td,
.admin-orders-table th {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    vertical-align: middle;
}

.admin-orders-table .text-muted {
    font-size: 0.8rem;
}

/* Phones and tablets (Orders, Products): the Actions column stays at the
   right edge while the rest of the row scrolls sideways under it, so View /
   Edit is always one tap away. Desktop is unchanged. */
@media (max-width: 991.98px) {
    .admin-orders-table > thead > tr > th:last-child,
    .admin-orders-table > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--color-white);
        box-shadow: -10px 0 10px -10px rgba(15, 23, 42, 0.25);
    }

    .admin-orders-table > thead > tr > th:last-child {
        background-color: #F8FAFC;
    }
}

/* ---------- Customers page ---------- */
.admin-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-navy);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.admin-avatar-initials-lg {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

.admin-avatar-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.admin-avatar-photo-lg {
    width: 72px;
    height: 72px;
}

.admin-customer-row {
    cursor: pointer;
}

.admin-customer-row:hover {
    background-color: var(--color-bg-secondary);
}

/* ---------- Storefront header account dropdown (logged-in customers) ---------- */
.site-header-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.site-mobile-icon img.site-header-avatar {
    width: 22px;
    height: 22px;
}

.mobile-menu-greeting {
    padding: 1rem 1rem 0.25rem;
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-dark);
    font-size: 0.95rem;
}

/* ---------- Storefront My Account page ---------- */
/* Same visuals as .dashboard-panel but WITHOUT height:100% — that rule is
   correct for .dashboard-panel's existing admin usage (one panel per
   flex column, stretched to match a sibling column's height) but causes
   a circular flex-stretch sizing bug when multiple panels are stacked in
   a single column, as they are here. Kept as its own class rather than
   changing .dashboard-panel, which stays exactly as-is for its current
   callers. */
.account-panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
}

.account-panel-title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
}

.account-menu {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 0.5rem;
}

.account-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.account-menu-link i {
    width: 18px;
    text-align: center;
    color: var(--color-text-muted);
}

.account-menu-link:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary);
}

.account-menu-link-active {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
}

.account-menu-link-active i {
    color: var(--color-primary);
}

.account-avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--color-navy);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.account-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar-initials {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 2rem;
}

/* ===================== Blog (app/views/views.blog.php, views.blog_post.php) ===================== */
.blog-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.blog-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-card-link:hover .blog-card {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.blog-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.blog-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted-dark);
    font-size: 2.5rem;
}

.blog-card-body {
    padding: 1rem 1.25rem 1.25rem;
}

.blog-card-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.blog-card-title {
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.blog-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The rendered post body (BlogRenderer output): only tag selectors, since the
   renderer strips every class and style attribute from the markup itself. */
.blog-post-featured-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

.blog-post-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.blog-post-body p {
    margin: 0 0 1.1rem 0;
}

.blog-post-body h2 {
    margin: 2rem 0 1rem 0;
    font-family: var(--font-family-heading);
}

.blog-post-body h3,
.blog-post-body h4 {
    margin: 1.5rem 0 0.75rem 0;
    font-family: var(--font-family-heading);
}

.blog-post-body ul,
.blog-post-body ol {
    margin: 0 0 1.1rem 1.5rem;
    padding: 0;
}

.blog-post-body li {
    margin-bottom: 0.4rem;
}

.blog-post-body blockquote {
    margin: 0 0 1.1rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 4px solid var(--color-primary);
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
}

.blog-post-body img.blog-body-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.5rem 0 1.25rem 0;
}

.blog-post-body pre {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0 0 1.1rem 0;
}

.blog-post-body code {
    background: var(--color-bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.blog-post-body pre code {
    background: none;
    padding: 0;
}

.blog-post-body table {
    width: 100%;
}

.blog-post-body a {
    color: var(--color-primary);
}

/* ===================== Blog magazine homepage (views.blog.php, views.blog_archive.php, includes/blog_sidebar.php) ===================== */
/* Hero: a "Trending Now" bar, one large lead story (image + a plain white
   content panel below it, not an overlay - it's the main headline, so it gets
   full-contrast dark-on-white text), and up to 3 smaller stories on the right
   (dark-gradient overlay text on the image itself, to fit more in less space).
   Degrades cleanly from 1 to 4 hero posts - see views.blog.php. */
.blog-trending-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.blog-trending-tag {
    flex-shrink: 0;
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
}

.blog-trending-title {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-trending-title:hover {
    color: var(--color-primary);
}

/* Dark pill category tag used on hero cards (both the main card's white panel
   and the side cards' image overlay) - distinct from the plain-text
   .blog-card-category used on grid/list cards and the sidebar elsewhere on
   this page. */
.blog-tag-pill {
    display: inline-block;
    background: var(--color-navy);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

.blog-hero-main-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.blog-hero-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-hero-main-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.blog-hero-main-img.blog-card-img-placeholder {
    height: 320px;
    font-size: 3.5rem;
}

.blog-hero-main-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.blog-hero-main-title {
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Side column: one taller card on top, up to 2 narrower cards in a row below
   (a single leftover item takes the full row width, same as the reference). */
.blog-hero-side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.blog-hero-side-row {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}

.blog-hero-side-row .blog-hero-side-item {
    flex: 1;
    min-width: 0;
}

.blog-hero-side-item {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background-color: var(--color-navy);
}

.blog-hero-side-top {
    flex: 1.4;
}

.blog-hero-side-img {
    width: 100%;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    display: block;
}

.blog-hero-side-img.blog-card-img-placeholder {
    min-height: 130px;
    font-size: 2rem;
}

.blog-hero-side-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 1rem 1rem;
    background: linear-gradient(to top, rgba(10, 15, 29, 0.92), rgba(10, 15, 29, 0));
}

.blog-hero-side-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-white);
    font-weight: 700;
    line-height: 1.3;
    font-size: 0.95rem;
}

/* Section heading with a colored category tag (color set inline per category -
   see BlogCategory::tagColor()). */
.blog-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.6rem;
}

.blog-section-tag {
    display: inline-block;
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
}

.blog-section-viewall {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.blog-section-viewall:hover {
    color: var(--color-primary);
}

/* "Don't miss" / list-layout category sections: a plain list of image + title
   rows, no card border, denser than the grid layout. */
.blog-list-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-list-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.blog-list-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.blog-list-row-excerpt {
    align-items: flex-start;
}

.blog-list-row-img {
    width: 110px;
    height: 80px;
    min-width: 110px;
    object-fit: cover;
    border-radius: 8px;
}

.blog-list-row-img.blog-card-img-placeholder {
    width: 110px;
    height: 80px;
    min-width: 110px;
    border-radius: 8px;
    font-size: 1.5rem;
}

.blog-list-row-title {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}

/* Sidebar (includes/blog_sidebar.php): Categories, Stay Connected,
   Most Popular, Latest Posts widgets. */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-widget {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.25rem;
    background: var(--color-white);
}

.blog-widget-title {
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}

.blog-widget-category-list,
.blog-widget-social-list,
.blog-widget-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-widget-category-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.blog-widget-category-list li:last-child {
    border-bottom: 0;
}

.blog-widget-category-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

.blog-widget-category-list a:hover {
    color: var(--color-primary);
}

.blog-widget-category-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.blog-widget-social-list li {
    margin-bottom: 0.6rem;
}

.blog-widget-social-list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}

.blog-widget-social-list a:hover {
    background: var(--color-accent-soft-bg);
    color: var(--color-primary);
}

.blog-widget-social-label {
    flex: 1;
}

.blog-widget-social-count {
    font-weight: 700;
    color: var(--color-primary);
}

.blog-widget-post-list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.blog-widget-post-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.blog-widget-post-list img,
.blog-widget-post-thumb-placeholder {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 6px;
    object-fit: cover;
}

.blog-widget-post-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted-dark);
    font-size: 1.1rem;
}

.blog-widget-post-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
}

.blog-widget-post-list a:hover {
    color: var(--color-primary);
}

@media (max-width: 767.98px) {
    .blog-hero-main-img,
    .blog-hero-main-img.blog-card-img-placeholder {
        height: 220px;
    }

    .blog-hero-side-row {
        flex-direction: column;
    }
}

/* ===================== Homepage side banners (views.index.php) ===================== */
/* Two "skyscraper" ads flush against the hero block, matching how Konga's own
   side ads actually behave: tall enough to run past the hero carousel itself
   and visually span the empty page margin alongside the sections below it,
   WITHOUT stretching the hero carousel's own size and WITHOUT leaving any
   blank gap in normal page flow - the trick is that the banners are taken out
   of the row's own box entirely (position:absolute against a position:relative
   .homepage-hero-row), so their height has zero effect on the row's own size
   or on anything that comes after it; they simply overlay the page's side
   margin for their own height, independent of everything else. Still normal
   document flow in the sense that matters (not fixed/sticky): a
   position:absolute element scrolls away with its positioned ancestor
   (.homepage-hero-row, an ordinary in-flow block) exactly like the rest of
   the page - it just doesn't reserve space of its own the way a static or
   grid-stretched element would.

   .container's own max-width/padding/centering is overridden to 100%/0 here
   ONLY inside this row (scoped to .homepage-hero-row > .container) so the
   hero carousel fills the gap between the two banners edge-to-edge, instead
   of floating centered with Bootstrap's own slack around it - every other
   page's .container, and this one below the wide breakpoint, is untouched.

   Below a genuinely wide desktop monitor there simply isn't room beside the
   page content for a ~260px banner on each side without overlapping it, so
   .homepage-hero-row stays a plain block (.container renders exactly as it
   did before this feature existed) and the banners stay display:none - not a
   fallback layout, just absent. Homepage-only because this markup only
   exists in views.index.php. */
.homepage-hero-row {
    display: block;
}

.side-banner {
    display: none;
    width: 260px;
    overflow: hidden;
}

.side-banner img {
    /* Square corners, no shadow - a rounded top-left/top-right corner was
       leaving the banner's own top a few pixels short of truly filling flush
       against the header above it. */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1900px) {
    .homepage-hero-row {
        /* position:relative makes this the containing block the two absolutely
           positioned banners measure top/left/right against. display:flow-root
           alongside it is NOT decorative - position:relative on its own does
           not stop a child's margin from collapsing through this element's own
           top edge, which was silently pulling the whole row (and so the
           banners, whose own top:0 is measured from here) 16px higher than the
           header's actual bottom edge. flow-root (unlike overflow:hidden, the
           other common fix for this) establishes that same containment WITHOUT
           clipping the banners, which need to visually extend past this row's
           own (much shorter) height without being cut off. */
        position: relative;
        display: flow-root;
    }

    .homepage-hero-row > .container {
        /* width:auto is REQUIRED here, not just "unnecessary to set" - .container
           is a Bootstrap class that itself declares width:100%, so without this
           override that 100% plus the 260px margin on each side overflows the
           viewport by 520px (confirmed: it did, with a real horizontal
           scrollbar, before this line was added). */
        max-width: none;
        width: auto;
        margin: 0 265px !important; /* 260px banner width + a deliberate 5px gap to each side, not flush */
        padding-left: 0;
        padding-right: 0;
        margin-top: 1.5rem !important; /* gap between the header and the hero/promo content - the side banners themselves (below) stay flush at top:0, this only pushes the hero column down */
        /* .container's OWN top edge has the same negative-margin issue the row
           had: its child .row.g-3 carries a -16px top margin (from Bootstrap's
           vertical gutter, g-3 sets --bs-gutter-y too), which - since .container
           has no padding-top and, without this, no BFC of its own - collapses
           straight through and pulls .container's own top 16px higher than
           where its visible content actually starts, eating into the margin-top
           gap above. */
        display: flow-root;
    }

    .side-banner {
        display: block;
        position: absolute;
        top: 0;
        height: 800px;
    }

    .side-banner-left {
        left: 0;
    }

    .side-banner-right {
        right: 0;
    }
}

/* ---------- Page loader (includes/page_loader.php) ----------
   Gray CTS logo, gently pulsing. Hidden by JS on load, by a JS timer after 4s,
   and, if JavaScript never runs at all, by the CSS animation below after 6s,
   so it can never stay on screen. */
.cts-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    transition: opacity 0.25s ease, visibility 0.25s ease;
    animation: cts-loader-failsafe 0.3s ease 6s forwards;
}

.cts-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cts-loader-logo {
    filter: grayscale(1);
    opacity: 0.45;
    animation: cts-loader-pulse 1.4s ease-in-out infinite;
}

.cts-loader-inline {
    position: absolute;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.92);
}

@keyframes cts-loader-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.35; }
    50% { transform: scale(1.05); opacity: 0.6; }
}

@keyframes cts-loader-failsafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cts-loader-logo { animation: none; }
}

/* ---------- Checkout (views.checkout*.php) ---------- */
.checkout-page {
    background-color: var(--color-bg);
}

.checkout-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.checkout-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 68px;
}

.checkout-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--color-primary);
    text-decoration: none;
    justify-self: start;
}

.checkout-header-title {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    text-align: center;
}

.checkout-header-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
}

.checkout-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

a.checkout-header-link:hover {
    color: var(--color-primary);
}

.checkout-header-link i,
.checkout-header-link svg {
    color: var(--color-primary);
}

.checkout-main {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.checkout-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.checkout-card-muted {
    padding: 1rem 1.25rem;
    color: var(--color-text-muted);
}

.checkout-card-muted .checkout-card-title {
    color: var(--color-text-muted);
}

.checkout-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.checkout-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-dark);
    margin: 0;
}

.checkout-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-border);
    color: var(--color-dark);
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.checkout-step.is-done {
    background-color: #16A34A;
    color: var(--color-white);
}

.checkout-card-body {
    padding: 1.25rem;
}

.checkout-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

.checkout-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.checkout-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 1.25rem;
    gap: 0.5rem;
}

.checkout-tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.checkout-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.checkout-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
}

.checkout-empty > i,
.checkout-empty > svg {
    font-size: 2rem;
    color: var(--color-text-muted-dark);
    margin-bottom: 0.75rem;
}

.checkout-btn-primary,
.checkout-btn-outline {
    font-weight: 600;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--color-primary);
}

.checkout-btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.checkout-btn-primary:hover,
.checkout-btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.checkout-btn-primary:disabled {
    background-color: var(--color-text-muted-dark);
    border-color: var(--color-text-muted-dark);
    color: var(--color-white);
    opacity: 1;
}

/* Secondary: navy outline ("Storefront buttons" at the end of this file). */
.checkout-btn-outline {
    background-color: var(--color-white);
    border-color: var(--cts-navy);
    color: var(--cts-navy);
}

.checkout-btn-outline:hover {
    background-color: var(--cts-navy);
    border-color: var(--cts-navy);
    color: var(--color-white);
}

.checkout-btn-outline:active {
    background-color: var(--cts-navy-hover);
    border-color: var(--cts-navy-hover);
    color: var(--color-white);
}

.checkout-saved-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.checkout-station-summary {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
}

.checkout-selected-station {
    margin-bottom: 0.5rem;
}

.checkout-selected-station .checkout-link {
    margin-top: 0.4rem;
}

.checkout-fee {
    color: var(--color-dark);
    font-weight: 700;
    white-space: nowrap;
}

.checkout-door-fee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background-color: var(--color-accent-soft-bg);
    font-size: 0.875rem;
}

.checkout-door-fee i,
.checkout-door-fee svg {
    color: var(--color-primary);
}

.checkout-summary {
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

.checkout-summary .checkout-card-title {
    margin-bottom: 1rem;
}

.checkout-summary-rows {
    margin: 0 0 0.75rem;
}

.checkout-summary-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.checkout-summary-rows dt {
    font-weight: 400;
    color: var(--color-text);
}

.checkout-summary-rows dd {
    margin: 0;
    font-weight: 600;
}

.checkout-summary-rows .checkout-summary-total {
    border-top: 1px solid var(--color-border);
    margin-top: 0.4rem;
    padding-top: 0.75rem;
}

.checkout-summary-total dt,
.checkout-summary-total dd {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-dark);
}

.checkout-optin {
    margin: 0.75rem 0 1rem;
}

.checkout-confirm-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0.6rem 0 0;
}

.checkout-problem {
    color: var(--color-primary);
    font-weight: 600;
}

.checkout-review-method {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.checkout-window {
    font-size: 0.85rem;
    color: #15803D;
    font-weight: 600;
}

.checkout-review-address {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
}

.checkout-items {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem;
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0;
}

.checkout-item + .checkout-item {
    border-top: 1px solid var(--color-border);
}

.checkout-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-white);
    flex: 0 0 auto;
}

.checkout-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.checkout-item-name {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.checkout-item-price {
    font-weight: 700;
    white-space: nowrap;
}

.checkout-payment {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    border: 1px solid var(--color-primary);
    background-color: var(--color-accent-soft-bg);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.checkout-payment > i,
.checkout-payment > svg {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-top: 0.15rem;
}

.checkout-footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 1.5rem 0 2rem;
}

.checkout-bar {
    display: none;
}

/* Pickup station popup */
.station-modal .modal-body {
    position: relative;
}

.station-view-toggle {
    display: none;
}

.station-layout {
    position: relative;
    display: grid;
    grid-template-columns: 380px 1fr;
    height: 70vh;
    min-height: 420px;
}

.station-list-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    min-height: 0;
}

.station-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.station-list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.station-none {
    padding: 1.25rem;
    color: var(--color-text-muted);
    text-align: center;
}

.station-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    margin: 0;
}

.station-item:hover {
    background-color: var(--color-bg);
}

.station-item.is-selected {
    background-color: var(--color-accent-soft-bg);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.station-item .form-check-input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.station-item .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.station-item-body {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
}

.station-item-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.station-item-address {
    color: var(--color-text);
}

.station-item-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.station-item-window {
    color: #15803D;
}

.station-map-col {
    min-height: 0;
}

.station-map {
    width: 100%;
    height: 100%;
}

.station-error {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    color: var(--color-text-muted);
}

.station-error[hidden] {
    display: none;
}

.station-pin {
    background: none;
    border: 0;
}

.station-pin span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: var(--color-navy);
    border: 2px solid var(--color-white);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
}

.station-pin.is-selected span {
    background-color: var(--color-primary);
}

.station-bubble {
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
}

.station-bubble-fee {
    font-weight: 700;
}

.station-bubble a {
    color: var(--color-primary);
}

@media (max-width: 991.98px) {
    .checkout-header-links .checkout-header-link > span {
        display: none;
    }

    .checkout-header-links {
        gap: 0.85rem;
    }

    .checkout-header-link i,
    .checkout-header-link svg {
        font-size: 1.05rem;
    }

    /* Icon only here: a bigger, invisible tap area (36 x 44) around it. */
    .checkout-header-link {
        position: relative;
    }

    .checkout-header-link::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 36px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    .checkout-summary {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .checkout-header-brand span {
        display: none;
    }

    .checkout-header-inner {
        min-height: 56px;
    }

    .checkout-header-title {
        font-size: 1.05rem;
    }

    .checkout-card-head,
    .checkout-card-body {
        padding: 0.9rem 1rem;
    }

    .checkout-tabs {
        padding: 0 1rem;
    }

    .checkout-items {
        padding: 0 1rem;
    }

    /* Full-screen popup with a List / Map toggle */
    .station-view-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid var(--color-border);
    }

    .station-view-toggle button {
        background: var(--color-white);
        border: 0;
        border-bottom: 3px solid transparent;
        padding: 0.7rem;
        font-weight: 600;
        color: var(--color-text-muted);
    }

    .station-view-toggle button.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .station-layout {
        display: block;
        height: calc(100vh - 186px);
        height: calc(100dvh - 186px);
        min-height: 0;
    }

    .station-list-col,
    .station-map-col {
        height: 100%;
        border-right: 0;
    }

    .station-layout[data-view="list"] .station-map-col,
    .station-layout[data-view="map"] .station-list-col {
        display: none;
    }

    /* Total + Confirm order pinned to the bottom of the screen */
    .checkout-has-bar .checkout-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
    }

    .checkout-bar-label {
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    .checkout-bar-total {
        font-family: var(--font-family-heading);
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--color-dark);
    }

    .checkout-has-bar {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* ---------- Admin: Pickup Stations map picker ---------- */
.station-admin-map {
    height: 320px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* ---------- Sections with sub-categories (Phone Engineering) in the menus ---------- */
.mobile-menu-sublink {
    padding: 0.6rem 1rem 0.6rem 3rem;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.site-all-categories-menu {
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

.site-dropdown-subitem {
    padding-left: 2.25rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* Spare parts on the homepage-style card: "Fits: ..." on one line. */
.product-card-fits {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Product page: "Compatible with" for spare parts (products.compatible_models). */
.pdp-compatible {
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    background-color: var(--color-bg);
}

.pdp-compatible-label {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.4rem;
}

.pdp-compatible-label i,
.pdp-compatible-label svg {
    color: var(--color-primary);
    margin-right: 0.25rem;
}

.pdp-compatible-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pdp-compatible-list li {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
}

/* ==========================================================================
   Admin UI (2026 refresh): wide grouped sidebar with the CTS logo, clean top
   bar with profile menu, softer cards and tables, My Profile page.
   Overrides the earlier admin rules above (same selectors, later wins).
   ========================================================================== */
.admin-shell {
    background-color: #F3F5F9;
}

/* ---- Sidebar ---- */
.admin-sidebar {
    width: 264px;
    align-items: stretch;
    padding: 1rem 0.85rem;
    gap: 0;
    background: linear-gradient(180deg, #0F172A 0%, #111C33 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.5rem 1rem;
    text-decoration: none;
    color: var(--color-white);
}

.admin-brand img {
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 6px rgba(227, 30, 36, 0.35));
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.admin-brand-text strong {
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
}

.admin-brand-text small {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.admin-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 -0.35rem;
    padding: 0 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.admin-nav-group + .admin-nav-group {
    margin-top: 0.9rem;
}

.admin-nav-heading {
    padding: 0 0.75rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
}

.admin-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 2px;
    border-radius: 10px;
    color: #CBD5E1;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-nav-link > i,
.admin-nav-link > svg {
    width: 18px;
    text-align: center;
    color: #94A3B8;
    transition: color 0.15s ease;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
}

.admin-nav-link:hover > i,
.admin-nav-link:hover > svg {
    color: var(--color-white);
}

.admin-nav-link.is-active {
    background: linear-gradient(90deg, rgba(227, 30, 36, 0.95), rgba(227, 30, 36, 0.78));
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(227, 30, 36, 0.28);
}

.admin-nav-link.is-active > i,
.admin-nav-link.is-active > svg {
    color: var(--color-white);
}

.admin-nav-link:focus-visible {
    outline: 2px solid #FCA5A5;
    outline-offset: 1px;
}

.admin-nav-badge {
    margin-left: auto;
    min-width: 22px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.admin-nav-link.is-active .admin-nav-badge {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.admin-nav-store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #E2E8F0;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.admin-nav-store:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

/* Phones/tablets: the same menu in a slide-in panel. */
.admin-sidebar-offcanvas {
    width: 290px;
    background: linear-gradient(180deg, #0F172A 0%, #111C33 100%);
}

.admin-sidebar-offcanvas .offcanvas-header {
    padding: 1rem 1rem 0.5rem;
}

.admin-sidebar-offcanvas .offcanvas-header .admin-brand {
    padding: 0;
}

.admin-sidebar-offcanvas .offcanvas-body {
    padding: 0.5rem 0.85rem 1.25rem;
}

/* ---- Top bar ---- */
.admin-topbar {
    min-height: 64px;
    padding: 0.6rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid #E8ECF2;
}

.admin-topbar .min-w-0 {
    min-width: 0;
}

.admin-topbar-title {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.admin-topbar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.admin-topbar-toggle:hover {
    background-color: #F1F5F9;
}

.admin-topbar-store {
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}

.admin-topbar-store:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-topbar-profile {
    gap: 0.6rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 999px;
}

.admin-topbar-profile:hover {
    background-color: #F1F5F9;
}

.admin-topbar-avatar,
.admin-topbar-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.admin-topbar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), #B9151B);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.admin-topbar-who {
    flex-direction: column;
    line-height: 1.15;
}

.admin-topbar-who strong {
    font-size: 0.9rem;
    color: var(--color-dark);
}

.admin-topbar-who small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.admin-profile-menu {
    min-width: 240px;
    padding: 0.4rem;
    border: 1px solid #E8ECF2;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.admin-profile-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.admin-profile-menu-head {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
}

/* ---- Staff bell (admin_topbar.php, staff-notifications.js) ---- */
.admin-topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-navy);
    font-size: 1.05rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.admin-topbar-bell:hover,
.admin-topbar-bell[aria-expanded="true"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-topbar-bell:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.staff-bell-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border: 2px solid var(--color-white);
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.staff-bell-badge[hidden] {
    display: none;
}

.staff-bell-menu {
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid #E8ECF2;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.staff-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background-color: var(--color-navy);
    color: var(--color-white);
}

.staff-bell-readall {
    border: 0;
    background: none;
    color: #FCA5A5;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0;
}

.staff-bell-readall:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.staff-bell-list {
    max-height: min(440px, 65vh);
    overflow-y: auto;
}

.staff-bell-empty {
    margin: 0;
    padding: 1.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.staff-bell-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid #F1F5F9;
    background-color: var(--color-white);
    text-align: left;
}

.staff-bell-item:hover,
.staff-bell-item:focus-visible {
    background-color: #F8FAFC;
}

.staff-bell-item.is-unread {
    background-color: #FEF2F2;
}

.staff-bell-item.is-unread:hover {
    background-color: #FEE2E2;
}

.staff-bell-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.85rem;
    background-color: #E2E8F0;
    color: var(--color-navy);
}

.staff-bell-icon-urgent {
    background-color: #FEE2E2;
    color: #B91C1C;
}

.staff-bell-icon-good {
    background-color: #DCFCE7;
    color: #15803D;
}

.staff-bell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.staff-bell-title {
    color: var(--color-dark);
    font-size: 0.88rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.staff-bell-body {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.staff-bell-time {
    margin-top: 0.15rem;
    color: #94A3B8;
    font-size: 0.72rem;
}

.staff-bell-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* Pop-ups: bottom right on desktop, across the bottom on phones. */
.staff-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 360px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

.staff-toast {
    display: flex;
    align-items: flex-start;
    border-left: 4px solid var(--color-navy);
    border-radius: 12px;
    background-color: var(--color-white);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
    pointer-events: auto;
    animation: staff-toast-in 0.25s ease-out;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.staff-toast.is-urgent {
    border-left-color: var(--color-primary);
}

.staff-toast.is-leaving {
    opacity: 0;
    transform: translateY(8px);
}

.staff-toast-main {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 0.4rem 0.8rem 0.9rem;
    border: 0;
    background: none;
    text-align: left;
}

.staff-toast-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0.3rem 0.3rem 0 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text-muted);
    font-size: 1.3rem;
    line-height: 1;
}

.staff-toast-close:hover {
    background-color: #F1F5F9;
    color: var(--color-dark);
}

@keyframes staff-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .staff-toast { animation: none; transition: none; }
}

@media (max-width: 575.98px) {
    .admin-topbar-bell {
        width: 38px;
        height: 38px;
    }

    .staff-toasts {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
}

/* Site Settings -> Stock alerts */
.stock-alerts-card {
    max-width: 640px;
}

.stock-alerts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.stock-alerts-row .form-control {
    width: 110px;
}

.admin-profile-menu-head strong {
    color: var(--color-dark);
}

.admin-profile-menu-head small {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Content: cards, panels, tables ---- */
.admin-content {
    padding: 1.5rem;
}

/* A wide table scrolls sideways inside this box instead of making the whole
   page scroll. The box carries the table's bottom margin, so the spacing
   around it stays exactly as before. */
.admin-table-scroll {
    margin-bottom: 1rem;
}

.admin-table-scroll > .table {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .admin-content {
        padding: 1rem 0.75rem;
    }

    .admin-topbar {
        padding: 0.5rem 0.75rem;
    }
}

.admin-content .stat-card,
.admin-content .dashboard-panel,
.admin-content .card {
    border: 1px solid #E8ECF2;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.03);
}

.admin-content .stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-content .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.admin-content .table > thead th {
    background-color: #F8FAFC;
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #E8ECF2;
    white-space: nowrap;
}

.admin-content .table > tbody > tr:hover > * {
    background-color: #FAFBFD;
}

.admin-content .btn {
    border-radius: 8px;
}

.admin-content .form-control,
.admin-content .form-select {
    border-radius: 8px;
    border-color: #DDE3EA;
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.admin-content .alert {
    border-radius: 12px;
}

.admin-footer {
    background-color: transparent;
    border-top: 1px solid #E8ECF2;
}
.admin-footer .developer-credit {
    color: #6B7280;
}
.admin-footer .developer-credit a,
.admin-footer .developer-credit .developer-credit-name {
    color: #334155;
    font-weight: 600;
    text-decoration: none;
}
.admin-footer .developer-credit a:hover,
.admin-footer .developer-credit a:focus-visible {
    color: #BA191E;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- My Profile ---- */
.profile-card {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid #E8ECF2;
    border-radius: 18px;
    overflow: hidden;
    padding: 0 1.4rem 1.4rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.03);
}

.profile-cover {
    height: 96px;
    margin: 0 -1.4rem;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18) 0 18%, transparent 19%),
        linear-gradient(120deg, #0F172A 0%, #1E293B 45%, #E31E24 130%);
}

.profile-avatar {
    width: 104px;
    height: 104px;
    margin: -52px auto 0.75rem;
    border-radius: 50%;
    border: 4px solid var(--color-white);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), #B9151B);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: 2rem;
    font-weight: 700;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-family: var(--font-family-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.35rem;
}

.profile-role {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.profile-role-admin {
    background-color: var(--color-accent-soft-bg);
    color: var(--color-primary);
}

.profile-role-worker {
    background-color: #EEF2FF;
    color: #3730A3;
}

.profile-facts {
    margin: 1.25rem 0 1.25rem;
    text-align: left;
    border-top: 1px solid #EEF1F5;
}

.profile-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #EEF1F5;
    font-size: 0.9rem;
}

.profile-facts dt {
    font-weight: 500;
    color: var(--color-text-muted);
}

.profile-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-dark);
    text-align: right;
    overflow-wrap: anywhere;
}

.profile-photo-form {
    text-align: left;
}

/* Admin primary buttons in the brand red (Bootstrap blue clashed with the red/navy). */
.admin-content .btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 227, 30, 36;
}

/* Outline buttons (Edit, View...) in navy, so the red outline stays reserved
   for Delete (btn-outline-danger) and the two never look alike. */
.admin-content .btn-outline-primary {
    --bs-btn-color: var(--color-navy);
    --bs-btn-border-color: #CBD5E1;
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-navy);
    --bs-btn-hover-border-color: var(--color-navy);
    --bs-btn-active-bg: var(--color-navy);
    --bs-btn-active-border-color: var(--color-navy);
    --bs-btn-focus-shadow-rgb: 15, 23, 42;
}

/* Table cells that only hold action buttons stay on one line. */
.admin-content .table td:has(> .btn),
.admin-content .table td:has(> form > .btn) {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    /* Wide screens: a row's action buttons (Edit / Hide / Delete) on one line. */
    .admin-content .table td > .d-flex.flex-wrap:has(> .btn, > form) {
        flex-wrap: nowrap !important;
    }
}

/* ---------- Image placeholders (includes/image_placeholders.php) ----------
   While a product, banner or tile image loads: a light grey box with the
   faint grey CTS logo in the middle (the checkout loader's logo, grayscale),
   then the image fades in over it. The box keeps the size its own rule gives
   it, so nothing jumps. A failed image keeps the logo, never a broken icon.
   Only with JavaScript running (html.js); without it images show as normal. */
html.js .ph {
    position: relative;
    isolation: isolate;
}

/* The homepage side ads are absolutely placed beside the hero on wide
   screens; .ph above must not pull them back into the page flow. */
@media (min-width: 1900px) {
    html.js .side-banner.ph {
        position: absolute;
    }
}

html.js .ph:not(.ph-done) {
    background-color: #F1F2F4;
}

html.js .ph::before,
.ph-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/icons/android-chrome-192x192.png") center / clamp(22px, 30%, 64px) no-repeat;
    filter: grayscale(1);
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

html.js .ph::before {
    z-index: -1;
}

html.js .ph.ph-done::before {
    opacity: 0;
}

.ph-img {
    transition: opacity 0.35s ease;
}

html.js .ph-img:not(.is-loaded) {
    opacity: 0;
}

html.js .ph-img.is-broken {
    visibility: hidden;
}

/* Background-image boxes (hero slides, promo tiles, category banners). */
.ph-cover {
    display: none;
}

html.js .ph-bg {
    position: relative;
}

html.js .ph-cover {
    display: block;
    position: absolute;
    inset: 0;
    background-color: #F1F2F4;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

html.js .ph-cover::before {
    background-size: clamp(28px, 16%, 88px);
}

html.js .ph-bg.ph-done > .ph-cover {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ph-img,
    .ph-cover,
    html.js .ph::before {
        transition: none;
    }
}

/* Unread Inbox messages: red count on the account icon (header). */
.site-icon-with-badge {
    position: relative;
}

.site-header-badge {
    position: absolute;
    top: -6px;
    left: 14px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    border: 2px solid var(--color-white);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.site-mobile-icon .site-header-badge {
    top: 2px;
    left: auto;
    right: 0;
}

/* The cart badge sits on the cart's top-right corner, clear of the icon. */
.site-mobile-icon[data-cart-link] .site-header-badge {
    top: -6px;
    right: -11px;
}

.site-dropdown-count {
    background-color: var(--color-primary);
}

/* ---------- Storefront buttons, links and focus (one system) ----------
   Every customer page uses these; the staff admin (body.admin-page, the
   staff log-in page) keeps its own styles. :where() keeps the scope at zero
   specificity, so a page's own rules can still adjust a button.
     Primary   = CTS red, solid (.btn-primary and the page buttons below)
     Secondary = navy outline (.btn-outline-primary, .btn-outline-secondary)
     Ghost     = no border, navy text (.btn-ghost)
     Link      = deep red text (.btn-link and plain links)
   Shopping actions (Add to cart, Buy now) stay red: filled for the main one,
   red outline for the other (.pdp-btn-outline).
   White on CTS red is 4.7:1, deep red on white 6.3:1, navy on white 17:1. */
:root {
    --cts-red: var(--color-primary);
    --cts-red-hover: var(--color-primary-dark);
    --cts-red-active: color-mix(in srgb, var(--color-primary) 68%, black);
    --cts-link: #BA191E;
    --cts-link-hover: #8E1317;
    --cts-navy: var(--color-navy);
    --cts-navy-hover: var(--color-navy-light);
    --cts-disabled-bg: #E5E7EB;
    --cts-disabled-text: #6B7280;
    --cts-disabled-border: #D1D5DB;
    /* Keyboard focus: white then navy ring - visible on white, red and the navy footer. */
    --cts-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-navy);
    --cts-field-focus: 0 0 0 0.2rem rgba(15, 23, 42, 0.14);
}

:where(body:not(.admin-page):not(.staff-login-page)) {
    --bs-primary: #E31E24;
    --bs-primary-rgb: 227, 30, 36;
    --bs-primary-text-emphasis: #8E1317;
    --bs-primary-bg-subtle: #FDECEC;
    --bs-primary-border-subtle: #F6B8BA;
    --bs-link-color: #BA191E;
    --bs-link-color-rgb: 186, 25, 30;
    --bs-link-hover-color: #8E1317;
    --bs-link-hover-color-rgb: 142, 19, 23;
    --bs-focus-ring-color: rgba(15, 23, 42, 0.35);
}

/* Every button: the same keyboard focus ring, no faded "disabled" look. */
:where(body:not(.admin-page):not(.staff-login-page)) .btn {
    --bs-btn-focus-box-shadow: var(--cts-focus-ring);
    --bs-btn-disabled-opacity: 1;
}

:where(body:not(.admin-page):not(.staff-login-page)) .btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--cts-red);
    --bs-btn-border-color: var(--cts-red);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--cts-red-hover);
    --bs-btn-hover-border-color: var(--cts-red-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--cts-red-active);
    --bs-btn-active-border-color: var(--cts-red-active);
    --bs-btn-disabled-color: var(--cts-disabled-text);
    --bs-btn-disabled-bg: var(--cts-disabled-bg);
    --bs-btn-disabled-border-color: var(--cts-disabled-bg);
}

:where(body:not(.admin-page):not(.staff-login-page)) .btn-outline-primary,
:where(body:not(.admin-page):not(.staff-login-page)) .btn-outline-secondary {
    --bs-btn-color: var(--cts-navy);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--cts-navy);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--cts-navy);
    --bs-btn-hover-border-color: var(--cts-navy);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--cts-navy-hover);
    --bs-btn-active-border-color: var(--cts-navy-hover);
    --bs-btn-disabled-color: var(--cts-disabled-text);
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: var(--cts-disabled-border);
}

:where(body:not(.admin-page):not(.staff-login-page)) .btn-ghost {
    --bs-btn-color: var(--cts-navy);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--cts-navy);
    --bs-btn-hover-bg: #F1F5F9;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--cts-navy);
    --bs-btn-active-bg: #E2E8F0;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--cts-disabled-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

:where(body:not(.admin-page):not(.staff-login-page)) .btn-link {
    --bs-btn-color: var(--cts-link);
    --bs-btn-hover-color: var(--cts-link-hover);
    --bs-btn-active-color: var(--cts-link-hover);
    --bs-btn-disabled-color: var(--cts-disabled-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Plain links: deep red (above); a visible ring for the keyboard. */
:where(body:not(.admin-page):not(.staff-login-page)) a:focus-visible {
    outline: 2px solid var(--cts-navy);
    outline-offset: 2px;
    border-radius: 2px;
}

:where(body:not(.admin-page):not(.staff-login-page)) .nav-link:focus-visible,
:where(body:not(.admin-page):not(.staff-login-page)) .page-link:focus,
:where(body:not(.admin-page):not(.staff-login-page)) .accordion-button:focus {
    box-shadow: var(--cts-focus-ring);
    outline: 0;
}

:where(body:not(.admin-page):not(.staff-login-page)) .btn-close {
    --bs-btn-close-focus-shadow: var(--cts-focus-ring);
}

/* Form fields: navy border and a soft navy glow while typing. */
:where(body:not(.admin-page):not(.staff-login-page)) .form-control:focus,
:where(body:not(.admin-page):not(.staff-login-page)) .form-select:focus,
:where(body:not(.admin-page):not(.staff-login-page)) .form-check-input:focus {
    border-color: var(--cts-navy);
    box-shadow: var(--cts-field-focus);
}

:where(body:not(.admin-page):not(.staff-login-page)) .form-check-input:checked {
    background-color: var(--cts-red);
    border-color: var(--cts-red);
}

:where(body:not(.admin-page):not(.staff-login-page)) .form-range {
    accent-color: var(--cts-red);
}

:where(body:not(.admin-page):not(.staff-login-page)) .dropdown-menu {
    --bs-dropdown-link-active-color: var(--cts-red);
    --bs-dropdown-link-active-bg: var(--color-accent-soft-bg);
}

:where(body:not(.admin-page):not(.staff-login-page)) .pagination {
    --bs-pagination-color: var(--cts-navy);
    --bs-pagination-hover-color: var(--cts-red);
    --bs-pagination-focus-color: var(--cts-red);
    --bs-pagination-active-bg: var(--cts-red);
    --bs-pagination-active-border-color: var(--cts-red);
    --bs-pagination-focus-box-shadow: var(--cts-focus-ring);
}

:where(body:not(.admin-page):not(.staff-login-page)) .nav-pills {
    --bs-nav-pills-link-active-bg: var(--cts-red);
}

:where(body:not(.admin-page):not(.staff-login-page)) .progress,
:where(body:not(.admin-page):not(.staff-login-page)) .progress-stacked {
    --bs-progress-bar-bg: var(--cts-red);
}

/* Information boxes: a calm navy tint instead of Bootstrap's light blue. */
:where(body:not(.admin-page):not(.staff-login-page)) .alert-info,
:where(body:not(.admin-page):not(.staff-login-page)) .alert-primary {
    --bs-alert-color: var(--cts-navy);
    --bs-alert-bg: #F1F5F9;
    --bs-alert-border-color: #CBD5E1;
    --bs-alert-link-color: var(--cts-link);
}

/* The page-specific buttons (account, cart, checkout, product page, log-in)
   share the same pressed, focus and disabled states. */
.acc-btn-primary:active,
.cart-btn-primary:active,
.checkout-btn-primary:active,
.pdp-btn-filled:active,
.auth-btn:active {
    background-color: var(--cts-red-active);
    border-color: var(--cts-red-active);
    color: #FFFFFF;
}

.acc-btn:focus-visible,
.cart-btn-primary:focus-visible,
.cart-btn-outline:focus-visible,
.checkout-btn-primary:focus-visible,
.checkout-btn-outline:focus-visible,
.pdp-btn-filled:focus-visible,
.pdp-btn-outline:focus-visible,
.auth-btn:focus-visible {
    outline: 0;
    box-shadow: var(--cts-focus-ring);
}

.pdp-btn-filled:disabled,
.pdp-btn-outline:disabled,
.checkout-btn-primary:disabled,
.acc-btn:disabled {
    background-color: var(--cts-disabled-bg);
    border-color: var(--cts-disabled-bg);
    color: var(--cts-disabled-text);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

/* ---------- Top banner strip (includes/top_banner.php) ----------
   Like Konga's: the image spans the full screen width, edge to edge, at
   every size and keeps its shape (height follows the width) - the phone
   image (5:1) below 768px, the desktop image (16:1) from 768px up. Never
   stretched, squashed or cut, and no side strips. Several banners sit in
   one grid cell and fade from one to the next. */
.top-banner {
    position: relative;
    display: grid;
}

.top-banner-slide {
    grid-area: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.top-banner.is-rotating .top-banner-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.top-banner.is-rotating .top-banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s;
}

.top-banner-slide picture {
    display: block;
    width: 100%;
}

.top-banner-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.top-banner-slide:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--color-navy);
}

.top-banner-pause {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.55);
    color: var(--color-white);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.top-banner-pause:hover {
    background-color: rgba(15, 23, 42, 0.85);
}

.top-banner-pause:focus-visible {
    outline: 0;
    box-shadow: var(--cts-focus-ring);
}

@media (max-width: 767.98px) {
    .top-banner-pause {
        right: 4px;
        bottom: 4px;
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-banner.is-rotating .top-banner-slide,
    .top-banner.is-rotating .top-banner-slide.is-active {
        transition: none;
    }
}

/* ---------- Scam warning (includes/scam_notice.php) ---------- */
.scam-notice {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.45;
}

.scam-notice i {
    color: #F59E0B;
    margin-top: 0.15rem;
}

.scam-notice-line {
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted-dark);
    padding: 0.85rem 0 0.25rem;
}

.scam-notice-line a {
    color: var(--color-white);
}

.scam-notice-box {
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: #78350F;
    margin-bottom: 1.25rem;
}

.scam-notice-box a {
    color: #78350F;
    font-weight: 600;
}

/* Cloudflare Turnstile "Are you human?" (app/models/Turnstile.php). The widget
   only takes space when Cloudflare needs the visitor to click (interaction-only). */
.cts-turnstile { margin: 0.25rem 0 0.75rem; max-width: 100%; }
.cts-turnstile:empty { margin: 0; }
.cts-turnstile-note { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--color-text-muted, #64748B); }
.newsletter-form .cts-turnstile { margin-top: 0.5rem; }

/* Logout buttons (forms with the CSRF token, see controllers.logout_customer.php)
   look exactly like the links they replaced. */
.logout-form { margin: 0; }
.logout-form button {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}
.logout-form button.mobile-menu-link { border-bottom: 1px solid var(--color-border); }
.account-menu-logout .logout-form button { text-align: center; }

/* Cookie notice (includes/cookie_notice.php): one slim navy line at the very
   top of storefront pages until the visitor chooses (buttons: see "Cookie choice"
   below). In the page flow, never floating. */
.cookie-notice {
    background-color: var(--color-navy, #0F172A);
    color: #E2E8F0;
    font-size: 0.82rem;
    line-height: 1.4;
    border-bottom: 2px solid var(--color-primary, #E31E24);
}
.cookie-notice-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.5rem 16px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cookie-notice-icon { color: #FCA5A5; flex-shrink: 0; }
.cookie-notice-text { margin: 0; flex: 1; min-width: 0; }
.cookie-notice-text a { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-notice-text a:hover { color: #FECACA; }
@media (max-width: 575.98px) {
    .cookie-notice { font-size: 0.78rem; }
    .cookie-notice-icon { display: none; }
}

/* ---------- Storefront chat (includes/chat_widget.php, assets/js/chat.js) ----------
   A red round button bottom right; the panel opens above it (desktop) or
   fills the screen (phones). It opens on a welcome screen (navy band, the
   CTS logo, "Start a conversation", and for logged-in customers "Your
   conversations"); the chat thread is the second view. --cts-chat-lift (set
   by chat.js) keeps the button above the product page's / cart's bottom bar
   on phones. */
.cts-chat {
    --cts-chat-lift: 0px;
    position: fixed;
    right: 20px;
    bottom: calc(20px + var(--cts-chat-lift));
    z-index: 1035;
    font-size: 0.95rem;
}

.cts-chat-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 52px;
    padding: 0 1.2rem 0 1rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(227, 30, 36, 0.35);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.cts-chat-fab:hover {
    background-color: #C8171D;
    transform: translateY(-1px);
}

.cts-chat-fab:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 3px;
}

.cts-chat-fab .fa-comments,
.cts-chat-fab svg {
    font-size: 1.25rem;
}

.cts-chat.is-open .cts-chat-fab {
    display: none;
}

.cts-chat-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 420px;
    height: min(680px, calc(100vh - 40px - var(--cts-chat-lift)));
    border-radius: 18px;
    background-color: var(--color-bg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.cts-chat-panel[hidden],
.cts-chat-home[hidden],
.cts-chat-thread[hidden],
.cts-chat-history[hidden] {
    display: none;
}

/* The two views fill the panel. */
.cts-chat-home,
.cts-chat-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* ---- Welcome screen ---- */
.cts-chat-home {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cts-chat-hero {
    position: relative;
    flex: none;
    padding: 1.6rem 1.4rem 3.2rem;
    border-bottom: 4px solid var(--color-primary);
    background-color: var(--color-navy);
    color: var(--color-white);
}

.cts-chat-hero-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.cts-chat-hero-logo {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 0.9rem;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--color-white);
}

.cts-chat-hero-title {
    margin: 0 0 0.45rem;
    color: var(--color-white);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.cts-chat-hero-text {
    margin: 0;
    color: #CBD5E1;
    font-size: 0.9rem;
    line-height: 1.45;
}

.cts-chat-home-body {
    position: relative; /* drawn above the navy band it overlaps */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: -2.2rem; /* the first card overlaps the navy band */
    padding: 0 1rem 1rem;
}

.cts-chat-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background-color: var(--color-white);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.cts-chat-start-who {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.cts-chat-start-who img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.cts-chat-start-who strong,
.cts-chat-start-who small {
    display: block;
}

.cts-chat-start-who strong {
    color: var(--color-navy);
}

.cts-chat-start-who small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.cts-chat-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
}

.cts-chat-start-btn:hover {
    background-color: var(--color-primary-dark);
}

.cts-chat-start-btn:focus-visible,
.cts-chat-history-item:focus-visible,
.cts-chat-home-wa:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}

.cts-chat-card-title {
    margin: 0 0 0.5rem;
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 700;
}

.cts-chat-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cts-chat-history-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 52px;
    padding: 0.5rem 0.35rem;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: none;
    color: var(--color-text);
    text-align: left;
}

.cts-chat-history-list li:first-child .cts-chat-history-item {
    border-top: 0;
}

.cts-chat-history-item > i:first-child {
    color: var(--color-primary);
}

.cts-chat-history-item > i:last-child {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.cts-chat-history-item:hover {
    background-color: var(--color-bg);
}

.cts-chat-history-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.cts-chat-history-preview {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cts-chat-history-when {
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

.cts-chat-history-item.is-current .cts-chat-history-when {
    color: var(--cts-link);
    font-weight: 600;
}

.cts-chat-home-wa {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text);
    text-decoration: none;
}

.cts-chat-home-wa > .fa-whatsapp {
    color: #16A34A;
    font-size: 1.6rem;
}

.cts-chat-home-wa span {
    flex: 1 1 auto;
}

.cts-chat-home-wa strong,
.cts-chat-home-wa small {
    display: block;
}

.cts-chat-home-wa small {
    color: var(--color-text-muted);
}

.cts-chat-home-wa-go {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.cts-chat-home-note {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
}

/* ---- Chat thread ---- */
.cts-chat-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.5rem;
    border-bottom: 3px solid var(--color-primary);
    background-color: var(--color-navy);
    color: var(--color-white);
}

.cts-chat-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 50%;
    background-color: var(--color-white);
}

.cts-chat-head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cts-chat-head-text strong {
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cts-chat-head-text small {
    color: #CBD5E1;
    font-size: 0.78rem;
}

.cts-chat-icon-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-white);
    font-size: 1.05rem;
}

.cts-chat-icon-btn:hover,
.cts-chat-icon-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}

.cts-chat-note {
    margin: 0;
    padding: 0.5rem 1rem;
    background-color: #FEF3C7;
    color: #78350F;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cts-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overscroll-behavior: contain;
}

.cts-chat-msg {
    display: flex;
}

.cts-chat-msg.is-customer {
    justify-content: flex-end;
}

.cts-chat-bubble {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: 16px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.cts-chat-msg.is-assistant .cts-chat-bubble {
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.cts-chat-msg.is-customer .cts-chat-bubble {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-bottom-right-radius: 4px;
}

.cts-chat-typing .cts-chat-bubble {
    display: inline-flex;
    gap: 4px;
    padding: 0.8rem 0.9rem;
}

.cts-chat-typing .cts-chat-bubble span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #94A3B8;
    animation: cts-chat-dot 1s infinite ease-in-out;
}

.cts-chat-typing .cts-chat-bubble span:nth-child(2) { animation-delay: 0.15s; }
.cts-chat-typing .cts-chat-bubble span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cts-chat-dot {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.cts-chat-chips,
.cts-chat-handoff {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cts-chat-chip {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.cts-chat-chip:hover {
    background-color: #FEF2F2;
}

.cts-chat-handoff-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-navy);
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-navy);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}

.cts-chat-handoff-btn.is-whatsapp {
    border-color: #16A34A;
    background-color: #16A34A;
    color: var(--color-white);
}

.cts-chat-handoff-btn:hover {
    filter: brightness(0.95);
}

.cts-chat-products {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cts-chat-product {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
    background-color: var(--color-white);
    color: var(--color-dark);
    text-decoration: none;
}

.cts-chat-product:hover .cts-chat-product-name {
    color: var(--color-primary);
}

.cts-chat-product-name {
    font-weight: 600;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.cts-chat-product-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.cts-chat-stock {
    color: #15803D;
    font-weight: 600;
}

.cts-chat-stock.is-out {
    color: var(--color-primary);
}

.cts-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.cts-chat-input {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 120px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 16px; /* 16px or more, so phones don't zoom in on the field */
    line-height: 1.35;
    resize: none;
}

.cts-chat-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15);
}

.cts-chat-send {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.cts-chat-send:disabled {
    opacity: 0.55;
}

.cts-chat-count {
    padding: 0 0.9rem 0.4rem;
    background-color: var(--color-white);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .cts-chat-fab { transition: none; }
    .cts-chat-typing .cts-chat-bubble span { animation: none; }
}

/* Phones: a round button only, and the chat fills the screen when open. */
@media (max-width: 575.98px) {
    .cts-chat {
        right: 14px;
        bottom: calc(14px + var(--cts-chat-lift));
    }

    .cts-chat-fab {
        width: 54px;
        height: 54px;
        padding: 0;
        justify-content: center;
    }

    .cts-chat-fab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cts-chat-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
    }

    /* Room for the phone's home bar / rounded corners. */
    .cts-chat-form,
    .cts-chat-home-body {
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }

    .cts-chat-hero {
        padding: 1.4rem 1.2rem 3rem;
    }

    .cts-chat-hero-title {
        font-size: 1.3rem;
    }

    /* Thread header: room for the whole "City Tech Store Assistant" name. */
    .cts-chat-head {
        gap: 0.3rem;
        padding: 0.6rem 0.35rem;
    }

    .cts-chat-head .cts-chat-icon-btn {
        flex-basis: 36px;
        width: 36px;
    }

    .cts-chat-head-text strong {
        font-size: 0.92rem;
    }

    html.cts-chat-is-open,
    html.cts-chat-is-open body {
        overflow: hidden;
    }
}

/* ---------- Back to top (includes/back_to_top.php, assets/js/back-to-top.js) ----------
   A navy round button bottom right, just above the chat button. Fades in after
   about one screen of scrolling. --cts-to-top-lift (set by back-to-top.js) is
   the room the chat button or a phone bottom bar takes; .is-stacked means it
   already counts the chat button. */
.cts-to-top {
    --cts-to-top-lift: 0px;
    position: fixed;
    right: 20px;
    bottom: calc(20px + var(--cts-to-top-lift));
    z-index: 1034;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background-color: var(--color-navy);
    color: var(--color-white);
    font-size: 1.05rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color 0.15s ease;
}

.cts-to-top.is-stacked {
    bottom: var(--cts-to-top-lift);
}

.cts-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, background-color 0.15s ease;
}

.cts-to-top:hover {
    background-color: var(--color-primary);
}

.cts-to-top:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.cts-to-top[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cts-to-top,
    .cts-to-top.is-visible {
        transform: none;
        transition: none;
    }
}

/* Phones: centred over the 54px round chat button. */
@media (max-width: 575.98px) {
    .cts-to-top {
        right: 19px;
        bottom: calc(14px + var(--cts-to-top-lift));
    }

    .cts-to-top.is-stacked {
        bottom: var(--cts-to-top-lift);
    }
}

/* ---------- Help menu (includes/header.php) ----------
   Desktop: the Help dropdown lists the Help Center guides, Cookie Policy and
   Live Chat. Phone menu: "Help" opens the same list underneath it. */
.site-help-menu {
    min-width: 240px;
    padding: 0.4rem 0;
}

.site-help-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
}

.site-help-menu .dropdown-item i,
.site-help-menu .dropdown-item svg {
    width: 18px;
    color: var(--color-primary);
}

.mobile-menu-toggle {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    text-align: left;
}

.mobile-menu-toggle .mobile-menu-chevron {
    transition: transform 0.2s ease;
}

.mobile-menu-toggle:not(.collapsed) .mobile-menu-chevron {
    transform: rotate(180deg);
}

.mobile-menu-sub {
    background-color: var(--color-bg-secondary);
}

.mobile-menu-sub .mobile-menu-link {
    padding-left: 2.6rem;
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle .mobile-menu-chevron { transition: none; }
}

/* ---------- Cookie choice (includes/cookie_notice.php, assets/js/consent.js) ----------
   Same slim navy strip as the old notice, with "Reject" and "Accept" as two
   identical buttons (neither is pushed harder than the other). In the page
   flow, never floating. Hidden once chosen; "Cookie Preferences" shows it again. */
.cookie-notice[hidden] {
    display: none;
}

.cookie-consent-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.cookie-consent-btn {
    min-width: 88px;
    min-height: 36px;
    padding: 0.35rem 1rem;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: var(--color-navy, #0F172A);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.cookie-consent-btn:hover {
    background-color: #E2E8F0;
    border-color: #E2E8F0;
}

.cookie-consent-btn:focus-visible {
    outline: 2px solid var(--color-primary, #E31E24);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .cookie-consent .cookie-notice-inner {
        flex-wrap: wrap;
    }

    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-consent-btn {
        flex: 1;
        min-height: 40px;
    }
}

/* ---------- Admin lists: bigger image on hover (assets/js/admin-image-preview.js) ----------
   Thumbnails marked data-img-preview. The preview floats over the page
   (fixed), so the table never moves. Moderate size: up to 320px for a product
   photo, 480 x 300px for a banner ("wide"), always inside the window. */
[data-img-preview] {
    cursor: zoom-in;
}

.admin-img-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.admin-img-preview.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.admin-img-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(320px, calc(100vw - 32px));
    max-height: min(320px, calc(100vh - 32px));
    border-radius: 6px;
    object-fit: contain;
    background-color: var(--color-bg);
}

.admin-img-preview.is-wide img {
    max-width: min(480px, calc(100vw - 32px));
    max-height: min(300px, calc(100vh - 32px));
}

@media (prefers-reduced-motion: reduce) {
    .admin-img-preview,
    .admin-img-preview.is-visible {
        transform: none;
        transition: none;
    }
}