/* =============================================================================
 * Public Menu — Spec 057 v8.30.0
 * Scoped under .pm-* so it never collides with customer-journey.css or other layers.
 * Uses tenant theme tokens from cj-theme-vars (--cj-primary, --cj-primary-dark, --cj-primary-tint).
 * Responsive breakpoints:
 *   - Desktop (≥ 1024px): sticky sidebar + wide grid (5–6 columns)
 *   - Tablet  (768–1024px): sticky pills above grid, 3–4 columns
 *   - Mobile  (< 768px): scrollable pills, 2 columns, bottom cart FAB
 * ============================================================================= */

/* ---------- Reset ---------- */
.pm-root * { box-sizing: border-box; }
.pm-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Almarai', sans-serif; }

/* ---------- Header ---------- */
.pm-header {
    background: linear-gradient(135deg, var(--cj-primary, #4f46e5), var(--cj-primary-dark, #4338ca));
    color: #fff;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.pm-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pm-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm-header__brand h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.3px; }
.pm-header__brand p { font-size: 13px; opacity: 0.9; margin: 0; }
.pm-header__brand p i { margin-inline-end: 4px; }

.pm-header__search {
    flex: 1 1 320px;
    max-width: 460px;
    min-width: 220px;
    position: relative;
}
.pm-header__search input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border-radius: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    outline: none;
}
.pm-header__search input::placeholder { color: rgba(255, 255, 255, 0.75); }
.pm-header__search input:focus { background: rgba(255, 255, 255, 0.28); }
.pm-header__search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    pointer-events: none;
}
[dir="rtl"] .pm-header__search input { padding: 10px 40px 10px 14px; }
[dir="rtl"] .pm-header__search i { left: auto; right: 14px; }
.pm-header__right { display: flex; align-items: center; gap: 10px; }
.pm-header__table-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- QR banner ---------- */
.pm-qr-banner {
    background: linear-gradient(135deg, var(--cj-primary, #10b981), var(--cj-primary-dark, #059669));
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Main layout ---------- */
.pm-layout {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

/* ---------- Sidebar ---------- */
.pm-sidebar {
    position: sticky;
    top: 85px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pm-sidebar__title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding: 8px 12px 6px;
}
.pm-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pm-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
    transition: all 0.15s;
}
.pm-sidebar__item:hover {
    background: var(--cj-primary-tint, #eef2ff);
    color: var(--cj-primary-dark, #4338ca);
}
.pm-sidebar__item.is-active {
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}
.pm-sidebar__item.is-active .pm-sidebar__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.pm-sidebar__icon {
    width: 24px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}
.pm-sidebar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-sidebar__count {
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Mobile pill bar (fallback when sidebar hidden) */
.pm-pills {
    display: none;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 20px;
    background: #fff;
    position: sticky;
    top: 66px;
    z-index: 40;
    border-bottom: 1px solid #e5e7eb;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pm-pills::-webkit-scrollbar { display: none; }
.pm-pill {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.pm-pill.is-active {
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    border-color: var(--cj-primary, #4f46e5);
}
.pm-pill__count {
    background: rgba(255, 255, 255, 0.22);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    margin-inline-start: 4px;
}
.pm-pill:not(.is-active) .pm-pill__count { background: #e5e7eb; color: #64748b; }

/* ---------- Main content column ---------- */
.pm-main { min-width: 0; }

/* ---------- Hero band ---------- */
.pm-hero {
    background: linear-gradient(135deg, var(--cj-primary, #4f46e5), var(--cj-primary-dark, #4338ca));
    color: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.pm-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 65%);
    pointer-events: none;
}
[dir="rtl"] .pm-hero::before { right: auto; left: -10%; }
.pm-hero__eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.88;
    margin-bottom: 6px;
}
.pm-hero__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.pm-hero__subtitle {
    font-size: 14px;
    opacity: 0.92;
    margin: 0 0 16px;
    max-width: 520px;
}
.pm-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-hero__chip {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pm-hero__chip i { font-size: 11px; }

/* ---------- Loyalty teaser ---------- */
.pm-loyalty-teaser {
    background: #fff;
    border: 1px dashed var(--cj-primary, #4f46e5);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.pm-loyalty-teaser__icon {
    width: 44px;
    height: 44px;
    background: var(--cj-primary-tint, #eef2ff);
    color: var(--cj-primary, #4f46e5);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.pm-loyalty-teaser__text { flex: 1 1 240px; min-width: 0; }
.pm-loyalty-teaser__text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}
.pm-loyalty-teaser__text span { font-size: 13px; color: #64748b; }
.pm-loyalty-teaser__btn {
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pm-loyalty-teaser__btn:hover {
    background: var(--cj-primary-dark, #4338ca);
    color: #fff;
}

/* ---------- Section headers ---------- */
.pm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cj-primary-tint, #eef2ff);
    grid-column: 1 / -1;
}
.pm-section-header:first-child { margin-top: 4px; }
.pm-section-header h2 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}
.pm-section-header .pm-section-count {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 12px;
}

/* ---------- Product grid ---------- */
.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
/* Spec 076 (v8.68.0) — Smart grid density for small retail catalogs.
   When only 2-3 products are rendered, tighter columns would leave 60-70%
   horizontal whitespace. Cap column count via auto-fit + max 280px per card
   so few products still pack nicely. */
.pm-grid--small {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: start;
}
.pm-grid--small.pm-grid--perfumery { justify-content: center; }
.pm-grid--empty-pad {
    min-height: 320px;
}

/* ---------- Product card ---------- */
.pm-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.pm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    border-color: var(--cj-primary, #4f46e5);
}

.pm-card__badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}
.pm-badge {
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    text-transform: uppercase;
}
.pm-badge i { font-size: 9px; }
.pm-badge--popular { background: #f59e0b; }
.pm-badge--chefs { background: #ef4444; }
.pm-badge--new { background: #10b981; }

/* Image / placeholder */
.pm-card__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}
.pm-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.pm-card:hover .pm-card__img { transform: scale(1.05); }
.pm-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: uppercase;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pm-card__body {
    padding: 12px 14px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pm-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.pm-card__desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pm-card__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--cj-primary, #4f46e5);
}

/* Spec 076 (v8.68.0) — Retail product card extras */
.pm-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    align-items: center;
}
.pm-card__sku {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pm-card__brand {
    font-size: 10px;
    font-weight: 700;
    color: var(--cj-primary-dark, #4338ca);
    background: var(--cj-primary-tint, #eef2ff);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pm-card__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    flex-wrap: wrap;
}
.pm-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pm-card__stock--in {
    color: #14532d;
    background: #dcfce7;
    border-color: #86efac;
}
.pm-card__stock--low {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}
.pm-card__stock--out {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}
.pm-card__stock i { font-size: 9px; }
/* Disabled add button for out-of-stock */
.pm-card__add[disabled] {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
.pm-card__add[disabled]:hover { transform: none !important; }

.pm-card__add {
    display: block;
    width: 100%;
    padding: 11px 12px;
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pm-card__add:hover { background: var(--cj-primary-dark, #4338ca); }
.pm-card__add i { font-size: 12px; }

/* Expandable detail panel for items with modifiers */
.pm-card__detail {
    display: none;
    padding: 12px 14px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    font-size: 12px;
    color: #64748b;
}
.pm-card__detail.is-open { display: block; }
.pm-card__detail p { margin: 0 0 8px; }
.pm-card__mods-title {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.pm-card__mod-set { margin-bottom: 6px; }
.pm-card__mod-set-name {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.pm-card__mod-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    padding: 3px 0;
    cursor: pointer;
}
.pm-card__mod-label input { margin: 0; }
.pm-card__mod-price {
    color: var(--cj-primary, #4f46e5);
    font-weight: 700;
    margin-inline-start: auto;
}
.pm-perfume-variations {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.pm-perfume-variation-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pm-perfume-variation-option.is-selected {
    border-color: var(--cj-primary, #4f46e5);
    background: var(--cj-primary-tint, #eef2ff);
}
.pm-perfume-variation-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cj-primary, #4f46e5);
}
.pm-perfume-variation-option__label {
    display: grid;
    gap: 1px;
    min-width: 0;
}
.pm-perfume-variation-option__label strong { font-size: 13px; }
.pm-perfume-variation-option__label small {
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-perfume-variation-option__price {
    margin-inline-start: auto;
    color: var(--cj-primary-dark, #4338ca);
    font-weight: 800;
    white-space: nowrap;
}

/* ---------- Empty / no results ---------- */
.pm-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    background: #fff;
    border-radius: 16px;
    border: 1px dashed #e5e7eb;
}
.pm-empty i { font-size: 44px; margin-bottom: 14px; display: block; opacity: 0.7; }
.pm-empty h3 { font-size: 18px; font-weight: 700; color: #475569; margin: 0 0 8px; }
.pm-empty p { font-size: 14px; margin: 0 0 16px; }
.pm-empty__btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.pm-empty__btn:hover { background: var(--cj-primary-dark, #4338ca); color: #fff; }

/* ---------- Search results strip ---------- */
.pm-search-results-info {
    display: none;
    background: var(--cj-primary-tint, #eef2ff);
    color: var(--cj-primary-dark, #4338ca);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    align-items: center;
    gap: 8px;
}
.pm-search-results-info.is-visible { display: flex; }
.pm-search-results-info strong { font-weight: 800; }
.pm-search-results-info button {
    background: transparent;
    border: none;
    color: var(--cj-primary-dark, #4338ca);
    cursor: pointer;
    font-weight: 700;
    padding: 2px 8px;
    margin-inline-start: auto;
    border-radius: 6px;
    font-size: 12px;
}
.pm-search-results-info button:hover { background: rgba(79, 70, 229, 0.12); }

/* ---------- Cart FAB (always visible) ---------- */
.pm-cart-fab {
    position: fixed;
    bottom: 22px;
    inset-inline-end: 22px;
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    border-radius: 50px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.25);
    cursor: pointer;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pm-cart-fab:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.3); }
.pm-cart-fab.is-empty {
    background: #fff;
    color: var(--cj-primary, #4f46e5);
    border: 2px solid var(--cj-primary, #4f46e5);
}
.pm-cart-fab__badge {
    background: #fff;
    color: var(--cj-primary, #4f46e5);
    border-radius: 50%;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.pm-cart-fab.is-empty .pm-cart-fab__badge {
    background: var(--cj-primary-tint, #eef2ff);
    color: var(--cj-primary, #4f46e5);
}
.pm-cart-fab i { font-size: 15px; }

/* Pulse animation when first item added */
@keyframes pm-cart-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); box-shadow: 0 0 0 12px rgba(79, 70, 229, 0.18); }
    100% { transform: scale(1); }
}
.pm-cart-fab.is-pulsing { animation: pm-cart-pulse 0.6s ease; }

/* ---------- Fly-to-cart animation clone ---------- */
.pm-fly-img {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3);
    transition: transform 0.7s cubic-bezier(0.5, -0.2, 0.6, 1), opacity 0.6s ease-in;
}

/* ---------- Toast ---------- */
.pm-toast {
    position: fixed;
    top: 90px;
    inset-inline-end: 22px;
    background: #0f172a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 150;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}
.pm-toast.is-visible { transform: translateY(0); opacity: 1; }
.pm-toast i { color: #10b981; font-size: 16px; }

/* ---------- Progress bar (nudge) inside cart drawer ---------- */
.pm-progress-nudge {
    background: linear-gradient(135deg, var(--cj-primary-tint, #eef2ff), #fff);
    border: 1px solid var(--cj-primary-tint, #eef2ff);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.pm-progress-nudge__label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pm-progress-nudge__label i { color: var(--cj-primary, #4f46e5); }
.pm-progress-nudge__label strong { color: var(--cj-primary-dark, #4338ca); }
.pm-progress-nudge__bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
}
.pm-progress-nudge__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cj-primary, #4f46e5), var(--cj-primary-dark, #4338ca));
    border-radius: 20px;
    transition: width 0.35s ease;
}
.pm-progress-nudge--complete .pm-progress-nudge__fill {
    background: linear-gradient(90deg, #10b981, #059669);
}
.pm-progress-nudge--complete .pm-progress-nudge__label strong {
    color: #059669;
}

/* ---------- Responsive breakpoints ---------- */

/* Tablet — hide sidebar, show sticky pills */
@media (max-width: 1023px) {
    .pm-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .pm-sidebar { display: none; }
    .pm-pills { display: flex; }
    .pm-main { padding: 16px 20px; }
    .pm-hero { padding: 20px 22px; }
    .pm-hero__title { font-size: 21px; }
    .pm-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}

/* Mobile — tighter spacing, 2-col grid */
@media (max-width: 639px) {
    .pm-header { padding: 12px 16px; }
    .pm-header__brand h1 { font-size: 18px; }
    .pm-header__search { flex-basis: 100%; order: 3; margin-top: 6px; }
    .pm-main { padding: 12px 14px; }
    .pm-hero { padding: 18px 20px; border-radius: 12px; }
    .pm-hero__title { font-size: 19px; }
    .pm-hero__subtitle { font-size: 13px; }
    .pm-loyalty-teaser { padding: 12px 14px; }
    .pm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pm-card__name { font-size: 14px; }
    .pm-card__price { font-size: 15px; }
    .pm-card__add { padding: 10px; font-size: 12px; }
    .pm-section-header h2 { font-size: 16px; }
    .pm-cart-fab { bottom: 16px; inset-inline-end: 16px; padding: 12px 18px; font-size: 14px; }
    .pm-pills { padding: 10px 14px; }
}

/* Narrow mobile (< 380px) */
@media (max-width: 379px) {
    .pm-grid { gap: 10px; }
    .pm-card__body { padding: 10px 12px 0; }
}

/* Wide desktop — more columns */
@media (min-width: 1400px) {
    .pm-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .pm-card__badges { left: auto; right: 10px; }
[dir="rtl"] .pm-sidebar__list { text-align: right; }

/* ---------- Force light mode on body ---------- */
/* The public menu is a customer-facing surface and must stay visually consistent
 * with the tenant's brand regardless of the visitor's OS preference. No dark mode
 * here — cart drawer, portal, checkout, and this menu all stay light by design. */
.pm-body { background: #f8fafc !important; color-scheme: light; }

/* ---------- Sticky Serveotik brand footer (desktop/tablet) ---------- */
/* On desktop + tablet, pin the Serveotik wordmark at the bottom so every diner
 * sees "Powered by Serveotik" without scrolling through 200+ items. On narrow
 * mobile screens the Cart FAB already owns the bottom-right corner, so we let
 * the footer stay in normal flow to avoid overlap. */
@media (min-width: 640px) {
    .pm-body .ds-cj-brand-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 80;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.04);
        padding: 8px 16px;
    }
    .pm-body .ds-cj-brand-footer__inner {
        max-width: 1600px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 12px;
    }
    /* Reserve space at the bottom of the page so the sticky footer
     * does not cover the last row of food cards. */
    .pm-body { padding-bottom: 48px; }
    /* Lift the Cart FAB so it sits above the sticky footer */
    .pm-body .pm-cart-fab { bottom: 60px; }
}

/* =============================================================================
 * CHECKOUT PAGE — Spec 060 v8.36.0
 * Two-column layout with a sticky order summary, tenant-brand-colored service
 * type + payment method pills, ETA badge, loyalty preview, trust signals.
 * ============================================================================= */
.pm-checkout { max-width: 1280px; margin: 0 auto; padding: 20px 24px; }

/* Head — back link + title + trust row */
.pm-checkout-head {
    margin-bottom: 20px;
}
.pm-checkout-head__nav { margin-bottom: 12px; }
.pm-checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cj-primary, #4f46e5);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: all 0.15s;
}
.pm-checkout-back:hover {
    background: var(--cj-primary-tint, #eef2ff);
    border-color: var(--cj-primary, #4f46e5);
    color: var(--cj-primary-dark, #4338ca);
}
.pm-checkout-head__title h1 {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
    letter-spacing: -0.4px;
}
.pm-checkout-head__title h1 i { color: var(--cj-primary, #4f46e5); margin-inline-end: 6px; }
.pm-checkout-head__title p { font-size: 14px; color: #64748b; margin: 0 0 14px; }

.pm-trust-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pm-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.pm-trust-chip i { color: var(--cj-primary, #4f46e5); font-size: 12px; }

/* Alert error */
.pm-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
}
.pm-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.pm-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.pm-alert i { font-size: 18px; margin-top: 2px; }
.pm-alert p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }

.pm-price-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}
.pm-price-confirmation input { margin-top: 3px; }

/* ===== Grid layout ===== */
.pm-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.pm-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pm-checkout-summary {
    position: sticky;
    top: 100px;
}

/* Spec 190.10 — mobile/tablet sticky order bar: total + Place Order pinned to
   the bottom of the viewport, so the CTA is reachable from anywhere in the
   form. Hidden on desktop (the sticky summary column already keeps it visible)
   and hidden while the real in-summary button is on screen (IntersectionObserver). */
.pm-sticky-order {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}
.pm-sticky-order__total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.pm-sticky-order__total-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pm-sticky-order__total strong {
    font-size: 17px;
    color: #0f172a;
    white-space: nowrap;
}
.pm-sticky-order .pm-place-order-btn {
    width: auto;
    margin: 0;
    flex: 1;
    max-width: 320px;
    padding: 13px 16px;
    font-size: 14px;
}
/* (The ≤1023px activation lives at the END of this file — source order is
   load-bearing: the breakpoint blocks below reset .pm-checkout padding.) */

/* ===== Cards ===== */
.pm-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
    overflow: hidden;
}
.pm-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.pm-card__head i {
    color: var(--cj-primary, #4f46e5);
    font-size: 16px;
    width: 22px;
    text-align: center;
}
.pm-card__head h3 {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

/* ===== Prefill banner (logged-in customer welcome) ===== */
.pm-prefill-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--cj-primary-tint, #eef2ff), #fff);
    border: 1px dashed var(--cj-primary, #4f46e5);
    border-radius: 12px;
}
.pm-prefill-banner i {
    font-size: 20px;
    color: var(--cj-primary, #4f46e5);
    flex-shrink: 0;
}
.pm-prefill-banner strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}
.pm-prefill-banner span {
    font-size: 12px;
    color: #64748b;
}

/* ===== Service type pills ===== */
.pm-service-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.pm-service-type {
    position: relative;
    padding: 16px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
}
.pm-service-type input { position: absolute; opacity: 0; pointer-events: none; }
.pm-service-type:hover { border-color: var(--cj-primary-tint, #eef2ff); }
.pm-service-type.is-active {
    border-color: var(--cj-primary, #4f46e5);
    background: var(--cj-primary-tint, #eef2ff);
}
.pm-service-type__icon {
    font-size: 24px;
    color: var(--cj-primary, #4f46e5);
    margin-bottom: 6px;
    display: block;
}
.pm-service-type__label {
    font-weight: 800;
    color: #1e293b;
    font-size: 14px;
}
.pm-service-type__meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
}

/* ===== Form groups ===== */
.pm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pm-form-group {
    margin-bottom: 12px;
}
.pm-form-group:last-child { margin-bottom: 0; }
.pm-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pm-form-group label i { color: var(--cj-primary, #4f46e5); font-size: 11px; }
.pm-form-group input,
.pm-form-group textarea,
.pm-form-group select,
.pm-input,
.pm-select {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.15s;
    font-family: inherit;
}
.pm-form-group input:focus,
.pm-form-group textarea:focus,
.pm-form-group select:focus,
.pm-input:focus,
.pm-select:focus {
    outline: none;
    border-color: var(--cj-primary, #4f46e5);
}
.pm-input--uppercase { text-transform: uppercase; }
.pm-form-help {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* ===== Checkboxes ===== */
.pm-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    padding: 8px 0;
}
.pm-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--cj-primary, #4f46e5);
    cursor: pointer;
}
.pm-checkbox--loyalty {
    padding: 12px 14px;
    background: var(--cj-primary-tint, #eef2ff);
    border: 1px solid var(--cj-primary, #4f46e5);
    border-radius: 10px;
    margin-top: 8px;
}
.pm-checkbox--loyalty span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pm-checkbox--loyalty i { color: var(--cj-primary, #4f46e5); }
.pm-checkbox--loyalty strong { font-weight: 800; color: #0f172a; }
.pm-checkbox--loyalty em { font-style: normal; color: #64748b; font-size: 12px; font-weight: 600; }

/* Geolocation button */
.pm-geo-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--cj-primary-tint, #eef2ff);
    border: 1px solid var(--cj-primary, #4f46e5);
    border-radius: 10px;
    color: var(--cj-primary-dark, #4338ca);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.15s;
}
.pm-geo-btn:hover { background: #fff; }

/* ===== Payment methods ===== */
.pm-payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.pm-payment-method {
    position: relative;
    padding: 14px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
}
.pm-payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.pm-payment-method.is-active {
    border-color: var(--cj-primary, #4f46e5);
    background: var(--cj-primary-tint, #eef2ff);
}
.pm-payment-method__icon {
    font-size: 22px;
    color: var(--cj-primary, #4f46e5);
    margin-bottom: 4px;
    display: block;
}
.pm-payment-method__label {
    font-weight: 800;
    color: #1e293b;
    font-size: 13px;
}
.pm-payment-method__meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* Portal opt-in */
.pm-portal-optin {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
}
.pm-portal-optin input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--cj-primary, #4f46e5);
    flex-shrink: 0;
    cursor: pointer;
}
.pm-portal-optin span {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.pm-portal-optin i { color: var(--cj-primary, #4f46e5); margin-inline-end: 4px; }

/* ===== Recommended strip ===== */
.pm-recommended-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.pm-rec-card {
    flex-shrink: 0;
    width: 150px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}
.pm-rec-card__img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
.pm-rec-card__placeholder {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}
.pm-rec-card__body { padding: 8px 10px 10px; }
.pm-rec-card__name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-rec-card__price {
    font-size: 13px;
    font-weight: 800;
    color: var(--cj-primary, #4f46e5);
    margin-bottom: 6px;
}
.pm-rec-card__add {
    background: var(--cj-primary, #4f46e5);
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
}
.pm-rec-card__add:hover { background: var(--cj-primary-dark, #4338ca); }

/* ===== Sticky Summary ===== */
.pm-summary {
    padding: 0;
    overflow: hidden;
}
.pm-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--cj-primary, #4f46e5), var(--cj-primary-dark, #4338ca));
    color: #fff;
}
.pm-summary__head i { font-size: 16px; }
.pm-summary__head h3 { flex: 1; font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -0.2px; }
.pm-summary__count {
    background: rgba(255, 255, 255, 0.25);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 800;
}

.pm-summary__lines {
    padding: 12px 18px;
    max-height: 260px;
    overflow-y: auto;
}
.pm-summary__line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f5f9;
    align-items: center;
}
.pm-summary__line:last-child { border-bottom: none; }
.pm-summary__qty {
    width: 30px;
    height: 30px;
    background: var(--cj-primary-tint, #eef2ff);
    color: var(--cj-primary-dark, #4338ca);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-summary__info { min-width: 0; }
.pm-summary__name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-summary__variation {
    font-size: 11px;
    color: #64748b;
}
.pm-summary__price {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
}

.pm-summary__totals {
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}
.pm-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.pm-summary__row i { color: var(--cj-primary, #4f46e5); margin-inline-end: 4px; }
.pm-summary__total {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 4px;
    margin-top: 6px;
    border-top: 1px solid #e5e7eb;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}
.pm-summary__total span:last-child { color: var(--cj-primary, #4f46e5); }

/* ===== ETA + Loyalty preview ===== */
.pm-eta-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 18px 0;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
}
.pm-eta-badge i { color: #f59e0b; font-size: 13px; }

.pm-loyalty-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 18px 0;
    padding: 10px 14px;
    background: var(--cj-primary-tint, #eef2ff);
    border: 1px solid var(--cj-primary, #4f46e5);
    border-radius: 10px;
    color: var(--cj-primary-dark, #4338ca);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.pm-loyalty-preview i { color: var(--cj-primary, #4f46e5); font-size: 13px; }
.pm-loyalty-preview--teaser:hover {
    background: #fff;
    border-color: var(--cj-primary-dark, #4338ca);
}

/* ===== Place Order button ===== */
.pm-place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 36px);
    margin: 14px 18px 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--cj-primary, #4f46e5), var(--cj-primary-dark, #4338ca));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: -0.2px;
}
.pm-place-order-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}
.pm-place-order-btn i { font-size: 18px; }

.pm-summary__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px 16px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}
.pm-summary__trust i { color: #10b981; margin-inline-end: 3px; }

/* ===== Responsive breakpoints ===== */

/* Tablet: 800-1023px — sticky summary stays but narrower */
@media (max-width: 1023px) {
    .pm-checkout { padding: 14px 18px 60px; }
    .pm-checkout-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* Spec 190.10 — the summary used to jump ABOVE the form (a negative flex
       order), so Place Order sat at the top before the customer typed anything
       and was off-screen by the time they finished the phone field. Natural
       flow now: service type → details → summary; the sticky bar keeps the
       CTA visible the whole way. */
    .pm-checkout-summary {
        position: static;
    }
    .pm-checkout-head__title h1 { font-size: 22px; }
    .pm-form-row { grid-template-columns: 1fr; }
}

/* Mobile: < 640px */
@media (max-width: 639px) {
    .pm-checkout { padding: 12px 14px 70px; }
    .pm-checkout-head { margin-bottom: 14px; }
    .pm-checkout-head__title h1 { font-size: 19px; }
    .pm-checkout-head__title p { font-size: 13px; margin-bottom: 10px; }
    .pm-trust-row { gap: 6px; }
    .pm-trust-chip { font-size: 11px; padding: 5px 10px; }
    .pm-card { padding: 14px 16px; }
    .pm-card__head h3 { font-size: 14px; }
    .pm-service-types { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pm-service-type { padding: 12px 6px; }
    .pm-service-type__label { font-size: 12px; }
    .pm-service-type__meta { font-size: 10px; }
    .pm-payment-methods { grid-template-columns: 1fr 1fr; }
    .pm-summary__head { padding: 14px 16px; }
    .pm-summary__lines { padding: 10px 16px; }
    .pm-summary__totals { padding: 12px 16px; }
    .pm-place-order-btn {
        width: calc(100% - 28px);
        margin: 12px 14px 8px;
        padding: 14px 18px;
        font-size: 14px;
    }
    .pm-eta-badge, .pm-loyalty-preview {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pm-card, .pm-card__img, .pm-cart-fab, .pm-progress-nudge__fill, .pm-fly-img {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   SPEC 062 — Delivery zone auto-match pills
   ============================================ */
.pm-zone-pin-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: #eff6ff;
    border: 1px dashed #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.45;
}
.pm-zone-pin-hint i { color: #2563eb; }

.pm-zone-matched,
.pm-zone-outside {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pm-zone-matched {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.pm-zone-matched i { color: #059669; }

.pm-zone-outside {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}
.pm-zone-outside i { color: #d97706; }

@media (prefers-color-scheme: dark) {
    .pm-body .pm-zone-pin-hint {
        background: rgba(30, 64, 175, 0.18);
        border-color: rgba(59, 130, 246, 0.35);
        color: #bfdbfe;
    }
    .pm-body .pm-zone-matched {
        background: rgba(6, 95, 70, 0.18);
        border-color: rgba(16, 185, 129, 0.35);
        color: #a7f3d0;
    }
    .pm-body .pm-zone-outside {
        background: rgba(146, 64, 14, 0.22);
        border-color: rgba(217, 119, 6, 0.4);
        color: #fcd34d;
    }
}

/* =============================================================================
 * Perfumery product-detail modal
 * Replaces the inline expanding panel: the sizes of one fragrance are a
 * comparison, so they need a surface where price, volume and value per ml sit
 * side by side instead of stacked inside a card.
 * Bottom sheet on phones, centred dialog from 640px up.
 * ========================================================================== */
.pm-pd-backdrop {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.pm-pd-backdrop.is-open { opacity: 1; visibility: visible; }

.pm-pd {
    position: fixed; z-index: 1100;
    left: 0; right: 0; bottom: 0;
    max-height: 92vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .22);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility .26s;
}
.pm-pd.is-open { transform: translateY(0); visibility: visible; }

.pm-pd__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.pm-pd__close {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #334155;
    font-size: 15px; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
[dir="rtl"] .pm-pd__close { right: auto; left: 12px; }

/* Pinned while the size list scrolls: with a long list the picture would
   otherwise scroll away, and the whole point is that picking a size changes
   it. It shrinks once scrolling starts so the list still gets the room. */
.pm-pd__media {
    position: sticky; top: 0; z-index: 2;
    width: 100%; height: 210px;
    background: #f1f5f9; overflow: hidden;
    border-radius: 20px 20px 0 0;
    transition: height .22s ease;
}
.pm-pd.is-compact .pm-pd__media { height: 165px; }
.pm-pd.is-compact .pm-pd__ph { font-size: 34px; }
.pm-pd__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-pd__ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 700; color: #fff; letter-spacing: 1px;
}

/* The hero is a cropped band, so the whole bottle needs somewhere to live. */
.pm-pd__zoom {
    position: absolute; bottom: 10px; z-index: 2;
    right: 10px;
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: rgba(15, 23, 42, .55); color: #fff; font-size: 12px;
    cursor: pointer; backdrop-filter: blur(2px);
}
[dir="rtl"] .pm-pd__zoom { right: auto; left: 10px; }
.pm-pd__img { cursor: zoom-in; }

.pm-pd-lightbox {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(2, 6, 23, .93);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.pm-pd-lightbox.is-open { opacity: 1; visibility: visible; }
/* contain, never cover: the point is to show the bottle uncropped. */
.pm-pd-lightbox img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 8px;
}
.pm-pd-lightbox__close {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 17px; cursor: pointer;
}
[dir="rtl"] .pm-pd-lightbox__close { right: auto; left: 16px; }

.pm-pd__body { padding: 16px 18px 6px; }
.pm-pd__name { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.pm-pd__desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: #64748b; }
.pm-pd__desc:empty { display: none; }

/* Fragrance facts — concentration, maceration, family. Maturity is the pitch
   in this category, so these read as credentials, not as a warning banner. */
.pm-pd__facts {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.pm-pd__fact {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px;
    background: var(--cj-primary-tint, #f5f3ff); border: 1px solid var(--cj-primary-tint, #ede9fe); border-radius: 10px;
}
.pm-pd__fact i { color: var(--cj-primary, #7c3aed); font-size: 12px; }
.pm-pd__fact-label { font-size: 11.5px; color: #8b7fd4; }
.pm-pd__fact-value { font-size: 12.5px; color: #4c1d95; font-weight: 700; }

.pm-pd__sizes-head { margin-bottom: 10px; }
.pm-pd__sizes-title { display: block; font-size: 15px; font-weight: 700; color: #0f172a; }
.pm-pd__sizes-hint { display: block; font-size: 12.5px; color: #94a3b8; margin-top: 2px; }

.pm-pd__sizes { display: flex; flex-direction: column; gap: 9px; }

/* One row per size: volume + bottle on the left, price + value on the right,
   so two sizes can be compared by scanning a single column. */
.pm-pd__size {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 13px;
    cursor: pointer; background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pm-pd__size:hover { border-color: #c7d2fe; background: #fafaff; }
.pm-pd__size.is-selected {
    border-color: var(--cj-primary, #4f46e5); background: var(--cj-primary-tint, #f5f3ff);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.pm-pd__size input { position: absolute; opacity: 0; pointer-events: none; }

.pm-pd__size-radio {
    flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
    border: 2px solid #cbd5e1; position: relative;
}
.pm-pd__size.is-selected .pm-pd__size-radio { border-color: var(--cj-primary, #4f46e5); }
.pm-pd__size.is-selected .pm-pd__size-radio::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--cj-primary, #4f46e5);
}

.pm-pd__size-thumb {
    flex: 0 0 auto; width: 42px; height: 42px;
    border-radius: 9px; overflow: hidden; background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.pm-pd__size-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pm-pd__size-main { flex: 1 1 auto; min-width: 0; }
.pm-pd__size-vol { font-size: 15px; font-weight: 700; color: #0f172a; }
.pm-pd__size-bottle {
    display: block; font-size: 12px; color: #94a3b8; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-pd__size-right { flex: 0 0 auto; text-align: right; }
[dir="rtl"] .pm-pd__size-right { text-align: left; }
.pm-pd__size-price { font-size: 15px; font-weight: 700; color: var(--cj-primary, #4f46e5); white-space: nowrap; }
.pm-pd__size-perml { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }

.pm-pd__badge-value {
    position: absolute; top: -8px;
    left: 14px;
    padding: 2px 8px; border-radius: 999px;
    background: #10b981; color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}
[dir="rtl"] .pm-pd__badge-value { left: auto; right: 14px; }

.pm-pd__size-incart {
    display: block; font-size: 11px; font-weight: 700; color: #059669;
    margin-bottom: 2px; white-space: nowrap;
}

.pm-pd__hint {
    display: flex; align-items: center; gap: 7px;
    margin-top: 14px; padding: 9px 11px;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px;
    font-size: 12.5px; color: #047857;
}
.pm-pd__hint i { color: #10b981; }

.pm-pd__add.is-added { background: #10b981; }

.pm-pd__reassure {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin: 16px 0 4px; padding-top: 13px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px; color: #94a3b8;
}
.pm-pd__reassure i { color: #10b981; margin-right: 5px; }
[dir="rtl"] .pm-pd__reassure i { margin-right: 0; margin-left: 5px; }

.pm-pd__footer {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef2f7; background: #fff;
}
.pm-pd__qty {
    display: flex; align-items: center; gap: 4px;
    border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 3px;
}
.pm-pd__qty-btn {
    width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: #f8fafc; color: #334155; font-size: 17px; cursor: pointer;
}
.pm-pd__qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.pm-pd__qty-val { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; color: #0f172a; }

.pm-pd__add {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px; border: 0; border-radius: 12px;
    background: var(--cj-primary, #4f46e5); color: #fff;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .15s ease;
}
.pm-pd__add:hover { background: var(--cj-primary-dark, #4338ca); }
.pm-pd__add:disabled { background: #cbd5e1; cursor: not-allowed; }
.pm-pd__add-total { font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
    .pm-pd {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: 460px; max-height: 88vh;
        border-radius: 18px;
        transform: translate(-50%, -46%) scale(.97);
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease, visibility .2s;
    }
    .pm-pd.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .pm-pd__media { border-radius: 18px 18px 0 0; height: 240px; }
    .pm-pd.is-compact .pm-pd__media { height: 190px; }
}

/* ===== Spec 190.10 — storefront flow UX ===== */

/* Post-add confirmation bar: pinned between the size list and the buy bar,
   confirming the add where the customer is looking (the cart FAB is hidden
   behind the sheet on phones) and offering the two next steps. */
.pm-pd__added-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #ecfdf5;
    border-top: 1px solid #a7f3d0;
    font-size: 13px;
}
.pm-pd__added-msg {
    color: #047857;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pm-pd__added-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.pm-pd__added-continue {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.pm-pd__added-checkout {
    background: #059669;
    color: #fff !important;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}
.pm-pd__added-checkout:hover { background: #047857; }

/* Mobile: clamp long fragrance notes so "Choose your size" stays near the
   fold; "Read more" appears only when something was actually cut. */
.pm-pd__desc-more {
    background: none;
    border: none;
    padding: 0;
    margin: -6px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cj-primary, #4f46e5);
    cursor: pointer;
}
@media (max-width: 639px) {
    .pm-pd__desc.is-clamped:not(.is-expanded) {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (min-width: 640px) {
    .pm-pd__desc-more { display: none !important; }
}

/* Sticky Place Order activation — MUST stay after the breakpoint blocks
   above: they reset .pm-checkout padding and would undo the bar clearance. */
@media (max-width: 1023px) {
    .pm-sticky-order { display: flex; }
    .pm-sticky-order.is-hidden { display: none; }
    .pm-checkout { padding-bottom: 110px; }
}