/* Nerds Technology eShop - public read-only storefront.
   Colors/font matched to the internal app's own design-system.css tokens
   (--hsl-brand-orange / --hsl-brand-blue), not invented separately.

   Structure:
   1. Tokens & base
   2. Masthead (header)
   3. Category bar - quick pills + searchable panel for the full ~430 list
   4. Product grid & cards (incl. "no photo" placeholder tile)
   5. Empty / loading / error state
   6. Pagination
   7. Product detail page
   8. Footer
*/

:root {
    --shop-bg: #f6f7f9;
    --shop-surface: #ffffff;
    --shop-border: #e4e7ec;
    --shop-text: #1a1d24;
    --shop-text-muted: #6b7280;

    --shop-orange: #fda01f;
    --shop-orange-dark: #e08a0f;
    --shop-orange-tint: rgba(253, 160, 31, .12);
    --shop-blue: #01a7e9;
    --shop-blue-dark: #0186bd;
    --shop-blue-tint: rgba(1, 167, 233, .10);

    --shop-radius: 14px;
    --shop-radius-sm: 10px;
    --shop-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shop-shadow-lg: 0 12px 28px rgba(16, 24, 40, .10), 0 4px 10px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body.l-shop {
    margin: 0;
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.u-hidden { display: none !important; }
.u-w-100 { width: 100%; }

/* ======================================================================
   2. Masthead
   ====================================================================== */
.l-shop-header {
    position: sticky;
    top: 0;
    z-index: 10;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(120deg, #017cad 0%, var(--shop-blue) 52%, #029fd4 100%);
    padding: 26px 16px 34px;
}

.l-shop-header::before,
.l-shop-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.l-shop-header::before {
    width: 280px;
    height: 280px;
    top: -130px;
    right: -70px;
    background: radial-gradient(circle at 30% 30%, rgba(253, 160, 31, .55), rgba(253, 160, 31, 0) 70%);
}

.l-shop-header::after {
    width: 220px;
    height: 220px;
    bottom: -130px;
    left: 8%;
    background: radial-gradient(circle at 60% 60%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}

.l-shop-header__inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
}

.c-shop-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    margin-bottom: 20px;
}

.c-shop-brand__mark {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 6px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(2, 40, 60, .25);
}

.c-shop-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.c-shop-brand__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.c-shop-brand__name {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.c-shop-brand__tagline {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    letter-spacing: .01em;
}

/* Compact variant - product.php header */
.c-shop-brand--compact { margin-bottom: 0; gap: 12px; }
.c-shop-brand--compact .c-shop-brand__mark { width: 44px; height: 44px; border-radius: 14px; padding: 5px; box-shadow: 0 4px 10px rgba(2, 40, 60, .22); }
.c-shop-brand--compact .c-shop-brand__name { font-size: 1.05rem; }

.c-search-bar {
    position: relative;
    max-width: 560px;
}

.c-search-bar i.fa-search {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shop-text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.c-search-bar input[type="search"] {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border-radius: 999px;
    border: none;
    font-size: .95rem;
    font-family: inherit;
    background: var(--shop-surface);
    color: var(--shop-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.c-search-bar input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 160, 31, .5), 0 4px 14px rgba(0, 0, 0, .14);
}

/* ======================================================================
   3. Category bar - curated quick pills + searchable panel
   ====================================================================== */
.c-category-bar {
    background: var(--shop-surface);
    border-bottom: 1px solid var(--shop-border);
}

.c-category-bar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 16px;
}

.c-category-quick {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}

.c-category-quick::-webkit-scrollbar { display: none; }
.c-category-quick:empty { display: none; }

.c-chip-quick {
    flex: 0 0 auto;
    max-width: 200px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.c-chip-quick:hover {
    border-color: var(--shop-blue);
    color: var(--shop-blue-dark);
    transform: translateY(-1px);
}

.c-chip-quick.is-active {
    background: linear-gradient(120deg, var(--shop-orange), var(--shop-blue));
    border-color: transparent;
    color: #fff;
}

.c-category-bar__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: #fff;
    color: var(--shop-text);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, color .15s;
}

.c-category-bar__toggle:hover { border-color: var(--shop-orange); color: var(--shop-orange-dark); }

.c-category-bar__toggle[aria-expanded="true"] {
    border-color: var(--shop-orange);
    color: var(--shop-orange-dark);
    box-shadow: 0 0 0 3px var(--shop-orange-tint);
}

.c-category-bar__toggle .fa-chevron-down {
    font-size: .65rem;
    transition: transform .15s;
}

.c-category-bar__toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* "Διαθέσιμα" quick toggle - same pill shape as the filters button, but a
   real on/off switch (not a modal launcher), so its active state uses a
   solid fill instead of just a highlighted border. */
.c-availability-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: #fff;
    color: var(--shop-text-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.c-availability-toggle:hover { border-color: #12805c; color: #12805c; }

.c-availability-toggle.is-active {
    background: #12805c;
    border-color: #12805c;
    color: #fff;
}

/* ======================================================================
   Sheet - generic full-screen (mobile) / large centered (desktop) modal.
   Shared by the category filter and the cart. Body content and footer
   buttons are supplied by whatever uses it (#categorySheet, #cartSheet).
   ====================================================================== */
body.u-sheet-open { overflow: hidden; }

.c-sheet { position: fixed; inset: 0; z-index: 40; }
.c-sheet[hidden] { display: none; }

.c-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
}

.c-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 8%;
    display: flex;
    flex-direction: column;
    background: var(--shop-surface);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shop-shadow-lg);
    overflow: hidden;
}

@media (min-width: 640px) {
    .c-sheet__panel {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(560px, 92vw);
        max-height: 82vh;
        border-radius: var(--shop-radius);
    }
}

.c-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--shop-border);
    flex: 0 0 auto;
}

.c-sheet__header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.c-sheet__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--shop-border);
    background: var(--shop-bg);
    color: var(--shop-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s;
}

.c-sheet__close:hover { border-color: var(--shop-orange); color: var(--shop-orange-dark); }

.c-sheet__search {
    position: relative;
    flex: 0 0 auto;
    padding: 14px 18px 0;
}

.c-sheet__search i {
    position: absolute;
    left: 31px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shop-text-muted);
    font-size: .8rem;
}

.c-sheet__search input {
    width: 100%;
    padding: 10px 14px 10px 34px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: var(--shop-bg);
    font-family: inherit;
    font-size: .9rem;
    color: var(--shop-text);
}

.c-sheet__search input:focus {
    outline: none;
    border-color: var(--shop-blue);
    box-shadow: 0 0 0 3px var(--shop-blue-tint);
}

.c-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px 18px;
}

.c-sheet__footer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--shop-border);
    background: var(--shop-surface);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.c-sheet__footer .c-btn--primary { flex: 1; }

/* Two-panel category browser (Skroutz/Amazon-style mega-menu), inside the
   sheet body. Left = top-level categories with icons; right = the selected
   top-level's "view all" + children. Both panels sit side by side on wide
   sheets; on narrow (mobile, full-screen) sheets only one shows at a time,
   toggled by .is-drilled-in, since there isn't room for both. */
.c-sheet__body--nopad { padding: 0; }

.c-cat-browser {
    display: flex;
    height: 100%;
    min-height: 0;
}

.c-cat-panel {
    overflow-y: auto;
    padding: 8px;
}

.c-cat-panel--left {
    flex: 0 0 auto;
    width: 100%;
    border-right: 1px solid var(--shop-border);
}

.c-cat-panel--right { flex: 1 1 auto; width: 100%; }

@media (max-width: 639px) {
    .c-cat-panel--left, .c-cat-panel--right { flex: 0 0 100%; width: 100%; }
    .c-cat-panel--right { display: none; }
    .c-cat-browser.is-drilled-in .c-cat-panel--left { display: none; }
    .c-cat-browser.is-drilled-in .c-cat-panel--right { display: block; }
}

@media (min-width: 640px) {
    .c-cat-panel--left { width: 260px; }
}

.c-cat-panel__mobile-head {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 12px;
    font-weight: 800;
}

@media (max-width: 639px) {
    .c-cat-panel__mobile-head { display: flex; }
}

.c-cat-back {
    border: none;
    background: var(--shop-bg);
    border-radius: 999px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--shop-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.c-cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    background: none;
    border-radius: var(--shop-radius-sm);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--shop-text);
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.c-cat-row.u-hidden { display: none; }
.c-cat-row:hover { background: var(--shop-bg); }
.c-cat-row.is-active { background: var(--shop-blue-tint); color: var(--shop-blue-dark); }

.c-cat-row--all,
.c-cat-row--viewall {
    font-weight: 800;
    border-bottom: 1px solid var(--shop-border);
    border-radius: 0;
    margin-bottom: 4px;
}

.c-cat-row__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-bg);
    color: var(--shop-text-muted);
    font-size: .95rem;
}

.c-cat-row__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-cat-row__count { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--shop-text-muted); }
.c-cat-row__chevron { flex: 0 0 auto; font-size: .75rem; color: var(--shop-text-muted); }

/* Deterministic color rotation for category icon circles - inv_categories
   has no icon_color for most rows, so this stands in for it. */
.c-cat-color-0 { background: #ffe9d1; color: #c9700a; }
.c-cat-color-1 { background: #dcf3fd; color: var(--shop-blue-dark); }
.c-cat-color-2 { background: #e6f7ee; color: #12805c; }
.c-cat-color-3 { background: #fdeaea; color: #b42318; }
.c-cat-color-4 { background: #f0ebfd; color: #6b3fd4; }
.c-cat-color-5 { background: #fdf3d1; color: #a17a00; }
.c-cat-color-6 { background: #ffe4ef; color: #c22a72; }
.c-cat-color-7 { background: #e3f6fd; color: #0186bd; }

/* ======================================================================
   4. Product grid & cards
   ====================================================================== */
.l-shop-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.c-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 560px) {
    .c-product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 900px) {
    .c-product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1300px) {
    .c-product-grid { grid-template-columns: repeat(5, 1fr); }
}

.c-product-card {
    position: relative;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    box-shadow: var(--shop-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.c-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shop-shadow-lg);
    border-color: rgba(1, 167, 233, .35);
}

.c-product-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Bookmark-style "add to list" toggle - overlaid on the card image, and a
   labeled variant on the product detail page. Never implies purchase. */
.c-cart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    background: var(--shop-surface);
    color: var(--shop-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, transform .15s;
}

/* Flush corner tab, not a floating circle - sits right in the image's
   bottom-right corner with no gap and no drop shadow, so it reads as an
   attached part of the card rather than a chip hovering above it. The
   single rounded corner (top-left only, away from the two edges it's
   flush against) plus a crisp border - not shadow blur - is what carries
   the "anchored" look while still staying visible against a pale tile:
   a solid border line doesn't rely on the softness/contrast a shadow
   needs to read against a near-white background. */
.c-cart-toggle--card {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 12px 0 0 0;
    border: 1px solid var(--shop-border);
    border-right: none;
    border-bottom: none;
}

.c-cart-toggle--card:active { transform: scale(.9); }

.c-cart-toggle--detail {
    padding: 12px 16px;
    border-radius: var(--shop-radius);
    border: 1px solid var(--shop-border);
    font-size: .9rem;
    font-weight: 700;
}

.c-cart-toggle.is-in-cart {
    color: var(--shop-orange);
}

.c-cart-toggle--detail.is-in-cart {
    background: var(--shop-orange-tint);
    border-color: var(--shop-orange);
    color: var(--shop-orange-dark);
}

.c-product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--shop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.c-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.c-product-card:hover .c-product-card__image img { transform: scale(1.06); }

/* "No photo" placeholder - a soft brand-tinted tile instead of a bare
   broken-image icon. Icon markup itself comes from shop.js (fa-image); this
   only restyles the tile it sits in. */
.c-product-card__image:has(.u-fallback-icon),
.c-product-detail__image:has(.u-fallback-icon) {
    background: linear-gradient(135deg, var(--shop-blue-tint), var(--shop-orange-tint));
}

.u-fallback-icon {
    color: var(--shop-blue-dark);
    opacity: .5;
    font-size: 2rem;
}

.c-product-card__image:has(.u-fallback-icon)::after {
    content: "Χωρίς φωτογραφία";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 10px;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--shop-blue-dark);
    opacity: .65;
}

.c-product-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    padding: 14px 14px 16px;
}

.c-product-card__category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--shop-blue-dark);
}

.c-product-card__category::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--shop-orange);
}

.c-product-card__name {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--shop-text);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-product-card__price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--shop-blue-dark);
}

/* Stock badge - pill with a status icon instead of a plain dot */
.c-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin-top: 2px;
}

.c-badge::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .66rem;
}

.c-badge--in-stock { background: #e6f7ee; color: #12805c; }
.c-badge--in-stock::before { content: "\f00c"; }

.c-badge--low-stock { background: #fff4e5; color: var(--shop-orange-dark); }
.c-badge--low-stock::before { content: "\f071"; }

.c-badge--out-of-stock { background: #fdeaea; color: #b42318; }
.c-badge--out-of-stock::before { content: "\f00d"; }

/* ======================================================================
   5. Empty / loading / error state
   ====================================================================== */
.c-shop-state {
    text-align: center;
    padding: 60px 24px;
    margin-top: 4px;
    color: var(--shop-text-muted);
    font-size: 1rem;
    font-weight: 600;
    background: var(--shop-surface);
    border: 1px dashed var(--shop-border);
    border-radius: var(--shop-radius);
}

.c-shop-state::before {
    content: "\f49e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    font-size: 2.4rem;
    color: var(--shop-blue);
    opacity: .35;
    margin-bottom: 14px;
}

/* ======================================================================
   6. Pagination
   ====================================================================== */
.c-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.c-pagination button {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--shop-border);
    background: var(--shop-surface);
    color: var(--shop-text);
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: var(--shop-shadow);
    transition: border-color .15s, color .15s, transform .15s;
}

.c-pagination button:not(:disabled):hover {
    border-color: var(--shop-orange);
    color: var(--shop-orange-dark);
    transform: translateY(-1px);
}

.c-pagination button:disabled {
    opacity: .4;
    cursor: default;
}

.c-pagination .u-text-muted {
    color: var(--shop-text-muted);
    font-size: .85rem;
    font-weight: 600;
}

/* ======================================================================
   7. Product detail page
   ====================================================================== */
.l-product-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, #017cad 0%, var(--shop-blue) 52%, #029fd4 100%);
    padding: 14px 16px;
}

/* Optional call icon on the right of the header - used on list.php, where a
   quick "call the store" action makes sense on a shared-links landing page. */
.c-list-header__call {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.l-product-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 16px;
}

.c-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shop-text-muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 16px;
    transition: color .15s;
}

.c-back-link:hover { color: var(--shop-orange-dark); }

.c-product-detail {
    display: flex;
    flex-direction: column;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    box-shadow: var(--shop-shadow-lg);
}

.c-product-detail__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--shop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-product-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.c-product-detail__image .u-fallback-icon { font-size: 3.2rem; }

.c-product-detail__image:has(.u-fallback-icon)::after {
    content: "Χωρίς φωτογραφία";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--shop-blue-dark);
    opacity: .6;
}

.c-product-detail__body { padding: 22px; }

.c-product-detail__category {
    font-size: .78rem;
    color: var(--shop-blue-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.c-product-detail__name {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--shop-text);
}

.c-product-detail__price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--shop-blue-dark);
    margin: 0 0 12px;
}

.c-product-detail__warranty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--shop-blue-dark);
}

.c-product-detail__description {
    color: var(--shop-text-muted);
    line-height: 1.65;
    margin: 18px 0 0;
    white-space: pre-line;
}

.c-product-detail__actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--shop-radius-sm);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.c-btn--primary {
    background: var(--shop-orange);
    color: #fff;
    box-shadow: 0 4px 12px rgba(253, 160, 31, .35);
}

.c-btn--primary:hover { background: var(--shop-orange-dark); transform: translateY(-1px); }

.c-btn--secondary {
    background: var(--shop-bg);
    color: var(--shop-text);
    border: 1px solid var(--shop-border);
}

.c-btn--secondary:hover { border-color: var(--shop-blue); color: var(--shop-blue-dark); }

/* ======================================================================
   8. Footer
   ====================================================================== */
.l-shop-footer {
    text-align: center;
    padding: 30px 16px 38px;
    color: var(--shop-text-muted);
    font-size: .8rem;
    background: var(--shop-surface);
    border-top: 1px solid var(--shop-border);
}

.l-shop-footer::before {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--shop-orange), var(--shop-blue));
}

/* ======================================================================
   9. Cart (shareable list) - floating launcher + full-screen sheet, and
   the shared-list page (list.php). Never implies a purchase flow - no
   price is ever shown; it exists to be shared, not checked out.
   ====================================================================== */
.c-cart-launcher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--shop-orange), var(--shop-blue));
    color: #fff;
    font-size: 1.2rem;
    box-shadow: var(--shop-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.c-cart-launcher[hidden] { display: none; }

.c-cart-launcher__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--shop-text);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--shop-bg);
}

.c-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--shop-border);
}

.c-cart-item:last-child { border-bottom: none; }

.c-cart-item__image {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--shop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.c-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.c-cart-item__image .u-fallback-icon { color: var(--shop-border); font-size: 1.2rem; }

.c-cart-item__body { flex: 1; min-width: 0; }

.c-cart-item__name {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.c-cart-item__remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--shop-border);
    background: var(--shop-surface);
    color: var(--shop-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-cart-item__remove:hover { border-color: #b42318; color: #b42318; }

.c-sheet__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--shop-text-muted);
}

.c-sheet__empty i { font-size: 1.8rem; margin-bottom: 10px; display: block; opacity: .5; }

/* list.php - shared/saved list page */
.l-list-header {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 4px;
    text-align: center;
}

.l-list-header h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 8px 0 4px;
}

.l-list-header p { color: var(--shop-text-muted); font-size: .88rem; margin: 0 0 16px; }
.c-list-header__icon { font-size: 1.6rem; color: var(--shop-orange); }
.l-list-header .c-btn { margin: 0 4px; }