@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-icon {
    animation: spin 1s linear infinite;
}

/* Skeleton Loading Animation */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-line, .skeleton-image-box, .skeleton-card {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-color) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s infinite ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line, .skeleton-image-box, .skeleton-card {
        animation: none;
        background: var(--bg-subtle);
    }
}

/* 1. Header & Navigation Bar */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    height: 62px;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    text-decoration: none;
    /* Never let the flex header squeeze the brand into a wrap/ellipsis. */
    flex-shrink: 0;
}

.brand-logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: transparent;
}

.brand-logo-placeholder {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--accent-amber));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
}

.brand-title-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.brand-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-rose) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.15;
    /* Narrow screens must never break "Billo Bazar" onto two lines. */
    white-space: nowrap;
}

/* "Bazar" paints solid near-black: the parent's gradient relies on
   background-clip:text plus an inherited transparent text fill, so both must
   be reset here or the word stays invisible. The value is the theme's own text
   colour — #0f172a on the light header the owner asked for, and light on the
   dark theme, where a hard-coded near-black would vanish. */
.brand-title-accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}

.brand-subtitle {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

/* Compact search row directly under the brand/action row */
.header-search-row {
    padding-bottom: 0.6rem;
}

/* The search page skips the header search row (one bar per viewport, see
   renderHeader); carry the row's bottom padding onto the header itself so
   the single brand row keeps the same visual rhythm with no empty gap. */
.site-header--single-row {
    padding-bottom: 0.6rem;
}

.header-search-wrap {
    flex: 1;
    max-width: 620px;
    position: relative;
}

.header-search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.header-search-input {
    width: 100%;
    height: 40px;
    padding: 0 84px 0 40px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-color);
    background: var(--bg-subtle);
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}

.header-search-clear {
    position: absolute;
    right: 46px;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-search-clear:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.header-search-clear[hidden] {
    display: none;
}

.header-search-input:focus {
    border-color: var(--primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.header-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.header-search-btn {
    position: absolute;
    right: 4px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--accent-rose));
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.header-search-btn:hover {
    transform: scale(1.05);
}

/* Search Suggestions dropdown */
.search-suggestions-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    max-height: 360px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-suggestion-item:hover {
    background: var(--bg-subtle);
}

.search-suggestion-img {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-subtle);
}

/* Header Action Icons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.header-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-rose);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-surface);
}

/* Desktop Navigation Menu Links */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.nav-link {
    color: var(--text-secondary);
    transition: var(--transition);
    position: relative;
    padding: 0.35rem 0;
}

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

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

/* 2. Product Card Component */
.product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 106, 0, 0.4);
}

.product-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background: var(--bg-subtle);
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.product-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card-img {
    transform: scale(1.05);
}

/* ------------------------------------------------------------------ *
 * Admin-managed advertisement blocks (Settings → Advertisement settings).
 * A grid slot reuses the product-card frame so the layout cannot shift; the
 * standalone slot is a wide band, because a 1:1 image across the checkout
 * column would push the pay button off the screen. The frame is dashed and
 * labelled so a banner can never be mistaken for a product.
 * ------------------------------------------------------------------ */
.store-ad-card {
    border-style: dashed;
    box-shadow: none;
}

.store-ad-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 106, 0, 0.45);
}

.store-ad-link {
    position: relative;
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.store-ad-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--bg-subtle);
}

.store-ad-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
}

.store-ad-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.store-ad-cta-arrow {
    font-size: 0.85rem;
    line-height: 1;
}

.store-ad-label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    /* "বিজ্ঞাপন" — at 0.65rem the Bengali matras collapse together. */
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
}

/* The banner is still fetching: a pulse behind the picture, never a fake product. */
.store-ad-card.is-loading .store-ad-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--bg-subtle) 30%, rgba(255, 106, 0, 0.12) 50%, var(--bg-subtle) 70%);
    background-size: 200% 100%;
    animation: store-ad-pulse 1.2s ease-in-out infinite;
}

@keyframes store-ad-pulse {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .store-ad-card.is-loading .store-ad-link::before {
        animation: none;
    }
}

.store-ad-full {
    width: 100%;
}

/* The standalone band keeps the creative's own proportions: an admin can upload
   a wide banner or a tall poster, and neither one gets sliced to a strip. */
.store-ad-full .store-ad-img {
    aspect-ratio: auto;
    height: auto;
    min-height: 96px;
    max-height: 260px;
}

.product-card-content {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.product-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-height: 2.4rem;
}

.product-card-tags {
    display: flex;
    gap: 4px;
    margin-top: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* One line per pill keeps mobile cards compact; long district labels clip
   instead of wrapping the card into a taller, uneven shape. */
.product-card-tags .pill-tag {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    gap: 0.5rem;
}

.price-group {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.current-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.old-price {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.quick-add-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(255, 106, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.quick-add-btn:hover {
    background: var(--primary);
    color: #ffffff;
    transform: scale(1.08);
}

/* Badges & Tags */
.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    /* 0.65rem clipped the matras off Bengali discount text ("৳২,২৫০ টাকা ছাড়"). */
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-discount {
    background: linear-gradient(135deg, var(--accent-rose), #ff4757);
    color: #ffffff;
}

.badge-campaign {
    background: linear-gradient(135deg, var(--primary), var(--accent-amber));
    color: #ffffff;
}

.badge-toplevel {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    /* Brand is orange/black/white; a black chip reads as the same family as
       the type, and it still inverts correctly in the dark theme. */
    background: var(--text-primary);
    color: var(--bg-surface);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

.pill-buy3 {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.pill-verified {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.pill-freedel {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.35);
}

.pill-freedel-limited {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
    border-style: dashed;
}

/* The free-delivery label belongs to the picture, not to the text block:
   anchored at the image's bottom-left corner with no offset, so there is no
   whitespace between label and image. The right side stays rounded; the two
   edges that touch the image are square. */
.card-image-free {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 11;
    max-width: calc(100% - 42px);
    padding: 2px 9px 2px 6px;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    background: rgba(255, 247, 237, 0.96);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

.dark .pill-freedel {
    color: #fdba74;
}

.dark .pill-freedel-limited {
    color: #fcd34d;
}

.stockout-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.stockout-label {
    background: var(--accent-rose);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* 3. Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #ee5a24 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-secondary {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-outline {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary-light);
}

.btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    background: #20ba59;
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

/* 4. Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    height: 44px;
    padding: 0 0.85rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

textarea.form-control {
    height: auto;
    padding: 0.75rem 0.85rem;
    resize: vertical;
}

/* 5. Quantity Control */
.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
}

.qty-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.qty-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.qty-input {
    width: 44px;
    height: 36px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    outline: none;
}

/* 6. Status Timeline Steps (Tracking & Order History) */
.timeline-container {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 1rem;
    /* The timeline is an ordered list of steps; the markers would overlap the
       connector line, and the semantics must not change the look. */
    list-style: none;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--border-color);
}

.timeline-step {
    position: relative;
    margin-bottom: 1.25rem;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 3px solid var(--border-color);
    transition: var(--transition);
}

.timeline-step.completed .timeline-dot {
    border-color: var(--accent-emerald);
    background: var(--accent-emerald);
}

.timeline-step.active .timeline-dot {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.timeline-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-time {
    font-size: 0.725rem;
    color: var(--text-muted);
}

/* 7. Modals and Drawers */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

.modal-backdrop.open {
    display: flex;
}

.modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 1.5rem;
    animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close-btn:hover {
    color: var(--text-primary);
    background: var(--border-color);
}

/* Toast Alert System */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    pointer-events: auto;
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 340px;
}

.toast.success { border-left-color: var(--accent-emerald); }
.toast.error { border-left-color: var(--accent-rose); }
.toast.info { border-left-color: var(--accent-sky); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 8. Mobile Bottom Navigation Bar */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 40;
    justify-content: space-around;
    align-items: center;
    padding: 0 0.5rem env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    flex: 1;
    height: 100%;
    transition: var(--transition);
}

.bottom-nav-item i {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}

.bottom-nav-item.active {
    color: var(--primary);
}

/* 9. Floating Customer AI Assistant Widget */
.ai-fab {
    position: fixed;
    bottom: 80px;
    left: 16px;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--accent-amber));
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    transition: var(--transition);
}

.ai-fab:hover {
    transform: scale(1.08);
}

.ai-chat-window {
    position: fixed;
    bottom: 84px;
    left: 16px;
    width: min(380px, calc(100vw - 32px));
    height: 480px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 95;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.25s ease;
}

.ai-chat-window.open {
    display: flex;
}

.ai-chat-header {
    background: linear-gradient(135deg, var(--primary), var(--accent-amber));
    color: #ffffff;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.825rem;
    background: var(--bg-subtle);
}

.ai-msg {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    max-width: 85%;
    line-height: 1.45;
}

.ai-msg.bot {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.ai-msg.user {
    background: linear-gradient(135deg, var(--primary), var(--accent-rose));
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ai-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ai-typing .dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: aiDotPulse 1.2s infinite ease-in-out;
}

.ai-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiDotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1.1); opacity: 1; }
}

.ai-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(225, 29, 72, 0.1);
    color: var(--accent-rose);
    border: 1px solid rgba(225, 29, 72, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.ai-retry-btn:hover {
    background: var(--accent-rose);
    color: #ffffff;
}

/* Human hand-off under every assistant reply */
.ai-help-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    color: #128c4a;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.ai-help-link:hover {
    background: #25D366;
    color: #ffffff;
}

.dark .ai-help-link {
    color: #4ade80;
}

.ai-chips-wrap {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ai-quick-chip {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.ai-quick-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ai-chat-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

/* 10. Footer Component */
.site-footer {
    margin-top: auto;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 3rem 0 1.5rem;
    color: var(--text-secondary);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-col h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col ul a {
    font-size: 0.825rem;
    color: var(--text-muted);
}

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

.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.775rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ==========================================================================
   11. Accessibility utilities
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 0.75rem;
    z-index: 200;
    padding: 0.5rem 1rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--secondary);
    color: #ffffff;
    font-size: 0.825rem;
    font-weight: 700;
    transform: translateY(-300%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Keyboard-only ring: brand coloured, never relies on colour alone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.ai-chat-body:focus-visible,
.ai-chat-window [role="log"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ==========================================================================
   12. Product card wishlist & stock pill
   ========================================================================== */

.wishlist-toggle-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 11;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
    transition: var(--transition);
}

.wishlist-toggle-btn:hover {
    color: var(--accent-rose);
    transform: scale(1.1);
}

.wishlist-toggle-btn.active {
    color: var(--accent-rose);
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
}

.wishlist-toggle-btn.active i {
    fill: currentColor;
}

.pill-lowstock {
    background: rgba(225, 29, 72, 0.12);
    color: var(--accent-rose);
    border: 1px solid rgba(225, 29, 72, 0.3);
}

/* ==========================================================================
   13. AI assistant header, diagnostics & answer provenance
   ========================================================================== */

.ai-head-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.ai-head-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.ai-status-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* State is also spelled out in the title attribute — colour is never the
   only signal. */
.ai-status-dot.ok {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

.ai-status-dot.down {
    background: #fca5a5;
}

/* Answer provenance — tells the customer whether a reply came from the live
   provider or from deterministic store knowledge. */
.ai-msg-source {
    margin-top: 0.4rem;
    /* These lines carry whole Bengali sentences, not a digit. */
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 0.3rem;
}

.ai-msg-source.offline {
    /* Provenance note, not an alarm: the answer really came from the shop's own
       data, and saying so in red made every fallback look like a breakdown. */
    color: var(--text-muted);
    border-top-color: var(--border-color);
    font-weight: 600;
}

.ai-warn {
    margin-top: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--accent-amber);
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ai-msg-source.cancelled {
    color: var(--accent-amber);
    border-top-color: rgba(245, 158, 11, 0.4);
    font-weight: 700;
}

.ai-msg-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ai-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 96px;
    resize: none;
    border-radius: var(--radius-md);
    font-size: 0.825rem;
}

.ai-send-btn {
    flex-shrink: 0;
    min-width: 40px;
}

/* Product cards rendered inside AI answers — a swipeable, auto-advancing rail */
.ai-product-carousel {
    --ai-card-w: 148px;
    margin-top: 0.65rem;
    min-width: 0;
}

.ai-car-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.ai-car-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.ai-car-nav {
    display: flex;
    gap: 0.25rem;
}

.ai-car-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.ai-car-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.ai-car-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ai-product-cards {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 0.1rem 0.1rem 0.5rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ai-product-cards::-webkit-scrollbar {
    height: 4px;
}

.ai-product-cards::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.ai-product-card {
    flex: 0 0 var(--ai-card-w);
    max-width: var(--ai-card-w);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ai-product-card-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.4rem 0.5rem 0.3rem;
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
}

.ai-product-card-link:hover .ai-product-card-name {
    color: var(--primary);
}

.ai-product-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
    background: var(--bg-subtle);
    margin-bottom: 0.25rem;
}

.ai-product-card-name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ai-product-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.ai-product-card-price b {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.ai-product-card-price s {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ai-product-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 0.2rem;
    min-width: 0;
    max-width: 100%;
}

.ai-product-card-meta em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    padding: 0 4px;
    border-radius: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-product-card-off {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
}

.ai-product-card-free {
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}

.ai-product-card-free.is-limited {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.ai-product-card-stock {
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.1);
}

.ai-product-card-stock.out {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.ai-product-card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 0.4rem 0.45rem;
}

.ai-product-card-view {
    flex: 0 0 auto;
    padding: 4px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.ai-product-card-view:hover {
    text-decoration: underline;
}

.ai-product-card-add,
.ai-product-card-buy {
    min-height: 30px;
    min-width: 0;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.ai-product-card-add {
    flex: 1 1 auto;
    border: 1px solid var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.ai-product-card-add:hover:not(:disabled) {
    background: var(--primary);
    color: #ffffff;
}

.ai-product-card-add:disabled {
    opacity: 0.6;
    cursor: progress;
}

.ai-product-card-buy {
    flex: 0 0 auto;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.ai-product-card-buy:hover {
    filter: brightness(1.06);
}

.ai-product-card-out {
    flex: 1 1 auto;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.ai-followup {
    margin-top: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.dark .ai-product-card-free {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.18);
}

.dark .ai-product-card-free.is-limited {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.18);
}

.dark .ai-product-card-off {
    color: #fda4af;
    background: rgba(239, 68, 68, 0.18);
}

.dark .ai-product-card-stock {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.dark .ai-product-card-stock.out {
    color: #fda4af;
    background: rgba(239, 68, 68, 0.2);
}

.ai-cursor {
    display: inline-block;
    width: 6px;
    height: 13px;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--primary);
    animation: aiCursorBlink 1s steps(2, start) infinite;
}

@keyframes aiCursorBlink {
    to { visibility: hidden; }
}

/* Search dropdown empty/error state */
.search-suggestion-empty {
    padding: 0.7rem 0.85rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

/* ==========================================================================
   14. Searchable district combobox (checkout & account address forms)
   ========================================================================== */

.district-combo {
    position: relative;
}

.district-combo-input {
    width: 100%;
}

.district-combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 230px;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.district-combo-list[hidden] {
    display: none;
}

.district-combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.district-combo-option span {
    color: var(--text-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.district-combo-option:hover,
.district-combo-option.active {
    background: var(--primary-light);
    color: var(--primary);
}

.district-combo-option.selected {
    font-weight: 800;
    color: var(--primary);
}

.district-combo-empty {
    padding: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Inline notices above the checkout form (revalidation & draft recovery) */
.checkout-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    line-height: 1.45;
    border: 1px solid;
}

.checkout-notice.warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: #b45309;
}

.dark .checkout-notice.warn {
    color: var(--accent-amber);
}

.checkout-notice.error {
    background: rgba(225, 29, 72, 0.09);
    border-color: rgba(225, 29, 72, 0.3);
    color: var(--accent-rose);
}

.checkout-notice.info {
    background: var(--bg-subtle);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.checkout-notice b {
    font-weight: 800;
}

/* 15. Order history cards (rendered by assets/js/order-utils.js) */
.order-line-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.order-line-item:last-child {
    border-bottom: none;
}

.order-line-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg-subtle);
}

.order-line-meta {
    flex: 1;
    min-width: 0;
}

.order-line-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.order-line-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* The campaign saving a delivered order was charged with, next to the price. */
.order-line-sub s {
    opacity: 0.7;
}

.order-line-offer {
    color: var(--accent-emerald);
    font-weight: 700;
    white-space: nowrap;
}

.order-line-total {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.order-finance {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.order-finance-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.order-finance-row.discount span:last-child {
    color: var(--accent-emerald);
    font-weight: 700;
}

.order-finance-row.total {
    border-top: 1px dashed var(--border-color);
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    font-size: 1rem;
    font-weight: 900;
    color: var(--primary);
}

.order-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.order-timeline-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    transition: all var(--transition);
}

.order-timeline-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 16. Catalogue filter chips (products.html, search.html) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.filter-chip {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    transition: all var(--transition);
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.28);
    color: #fff;
}

.filter-chip:focus-visible {
    outline: 3px solid var(--primary-glow);
    outline-offset: 2px;
}

.dark .filter-chip {
    background: var(--bg-elevated, #141a24);
}

.dark .filter-chip.active {
    color: #111;
}

/* 17. Category chip product count (index.html) */
.category-chip-count {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 7px;
}

/* 18. Slider fallback — used when the Swiper CDN is unavailable */
.slider-fallback {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.slider-fallback > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.slider-fallback::-webkit-scrollbar {
    height: 6px;
}

.slider-fallback::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

/* 19. Product-details gallery — self-contained, no slider library */
.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pd-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    aspect-ratio: 1 / 1;
    max-height: 460px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: zoom-in;
}

.pd-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* The free-delivery offer is a label on the picture itself: square at the two
   edges that touch the image, rounded on the outside, and narrow enough that
   the prev/next arrows and the zoom button stay clear. */
.pd-stage .free-delivery-banner.is-on-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 0;
    max-width: calc(100% - 96px);
    align-items: center;
    gap: 0.4rem;
    padding: 4px 10px 4px 8px;
    border-radius: 0 0 var(--radius-md) 0;
    background: linear-gradient(135deg, #9a3412 0%, #ea580c 60%, #f97316 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.pd-stage .free-delivery-banner.is-on-image.is-limited {
    background: linear-gradient(135deg, #92400e 0%, #d97706 60%, #f59e0b 100%);
}

.pd-stage .free-delivery-banner.is-on-image .fdb-title {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    line-height: 1.1;
}

.pd-stage .free-delivery-banner.is-on-image .fdb-text {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
}

.pd-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: -0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pd-meta-row .pd-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pd-meta-row .pd-views svg {
    width: 14px;
    height: 14px;
}

.pd-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pd-share-btn svg {
    width: 14px;
    height: 14px;
}

.pd-share-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.pd-share-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pd-seller-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pd-seller-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: #ffffff;
    border: 1px solid var(--border-color);
}

.pd-seller-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-seller-label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pd-seller-copy strong {
    font-size: 0.88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.pd-seller-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.pd-seller-link svg {
    width: 13px;
    height: 13px;
}

.pd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pd-related-more {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-full);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition);
}

.pd-related-more:hover {
    background: var(--primary);
    color: #ffffff;
}

.pd-related-empty {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pd-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.pd-prev { left: 10px; }
.pd-next { right: 10px; }

.pd-nav:hover {
    background: #ffffff;
    color: var(--primary);
}

.pd-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(17, 20, 32, 0.72);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.pd-zoom {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
}

.pd-zoom svg { width: 16px; height: 16px; }

.pd-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.pd-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 14px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-thumb.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.dark .pd-nav,
.dark .pd-zoom {
    background: rgba(24, 27, 38, 0.85);
    color: var(--text-primary);
}

/* ------------------------------------------------------------------ *
 * 20. Home hero banner
 * The slider box carried an inline height: 280px, which on a phone meant a
 * 280px band inside a ~360px wide container — taller than it was wide. The
 * height now tracks the viewport and is capped, so the banner reads as a
 * banner on every screen while keeping its full width and links.
 * ------------------------------------------------------------------ */
.hero-swiper {
    height: clamp(170px, 21vw, 260px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--bg-subtle);
}

.hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-swiper .swiper-pagination-bullet {
    opacity: 0.55;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary);
}

/* ------------------------------------------------------------------ *
 * 21. Catalog category picker (searchable, with category pictures)
 * A <select> cannot show an image, so the catalog uses this trigger + panel
 * pair. Every colour comes from the shared tokens, so light and dark themes
 * both work without extra rules.
 * ------------------------------------------------------------------ */
.cat-picker {
    position: relative;
}

.cat-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    max-width: 320px;
    padding: 0 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.cat-picker-trigger:hover {
    border-color: var(--primary);
}

.cat-picker.has-selection .cat-picker-trigger {
    border-color: var(--primary);
    background: var(--primary-light);
}

.cat-picker-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.cat-picker-mark svg {
    width: 15px;
    height: 15px;
}

.cat-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-picker-caret {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.cat-picker-trigger[aria-expanded="true"] .cat-picker-caret {
    transform: rotate(180deg);
}

.cat-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 300px;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
}

.cat-picker-panel[hidden] {
    display: none;
}

.cat-picker-search {
    width: 100%;
    height: 36px;
    margin-bottom: 0.4rem;
    padding: 0 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.825rem;
}

.cat-picker-list {
    max-height: 268px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cat-picker-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.35rem 0.45rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
}

.cat-picker-option.is-active {
    background: var(--bg-subtle);
}

.cat-picker-option.is-selected {
    background: var(--primary-light);
}

.cat-picker-option.is-selected .cat-picker-label {
    font-weight: 800;
    color: var(--primary);
}

.cat-picker-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.cat-picker-thumb,
.cat-picker-initial,
.cat-picker-all-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: cover;
    display: block;
}

.cat-picker-initial,
.cat-picker-all-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.cat-picker-label {
    min-width: 0;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cat-picker-count {
    margin-left: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.cat-picker-empty {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .cat-picker-panel {
        width: 300px;
        max-width: calc(100vw - 24px);
    }
}

/* 22. Variant choice dialog — the customer always picks the variation */
.variant-modal-content {
    max-width: 460px;
    padding-top: 1.35rem;
}

.variant-modal-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-right: 2.25rem;
}

.variant-modal-product img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.variant-modal-name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.variant-modal-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary);
    margin-top: 2px;
}

.variant-modal-title {
    font-size: 1.02rem;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.variant-modal-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.variant-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.variant-option:hover:not(:disabled) {
    border-color: var(--primary);
}

.variant-option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.variant-option.is-selected {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.variant-option.is-unavailable,
.variant-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.variant-option-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.variant-option-img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
}

#detailVariantButtons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-variant-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
}

.detail-variant-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.detail-variant-meta.out {
    color: var(--accent-rose);
}

.variant-option-meta.out {
    color: var(--accent-rose);
}

.variant-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.variant-modal-actions .btn {
    min-height: 42px;
}

@media (max-width: 480px) {
    .variant-modal {
        align-items: flex-end;
        padding: 0;
    }

    .variant-modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 88vh;
    }

    .variant-modal-actions .btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .variant-modal-content { animation: none; }
    .variant-option { transition: none; }
}

/* Variant buttons on the product page follow the dialog's language */
#detailVariantButtons .btn.is-unavailable,
#detailVariantButtons .btn:disabled {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: not-allowed;
}

#detailVariantButtons .btn[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 18. Cart page: selectable line items */
/* Always-visible cart summary. Phones get it fixed above the bottom nav so the
   payable amount and the checkout action never require scrolling; desktop uses
   the sticky sidebar that is already there. */
.cart-sticky-bar {
    display: none;
}

@media (max-width: 768px) {
    .cart-sticky-bar {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        z-index: 70;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.5rem 0.55rem 0.5rem 0.85rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .cart-sticky-bar[hidden] {
        display: none;
    }

    .cart-sticky-bar .csb-copy {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .cart-sticky-bar .csb-line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-secondary);
    }

    .cart-sticky-bar .csb-line strong {
        font-size: 1rem;
        font-weight: 900;
        color: var(--primary);
        white-space: nowrap;
    }

    .cart-sticky-bar .csb-total small {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }

    .cart-sticky-bar .csb-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.1rem 0.5rem;
        font-size: 0.66rem;
        color: var(--text-muted);
        /* This line used to be nowrap + ellipsis. text-overflow has no effect on
           flex children, so the three facts a discount cart shows together
           (সাবটোটাল ৳4,194 / ছাড় ৳198 / ডেলিভারি ফ্রি = 190px inside the
           177px column beside the checkout button) were simply chopped
           mid-word, hiding the free-delivery message. The bar is pinned by its
           bottom edge and body.has-cart-bar reserves 160px against a 61px bar,
           so one wrapped line still clears the 64px navigation. */
        white-space: normal;
    }

    .cart-sticky-bar .csb-meta span[hidden] {
        display: none;
    }

    .cart-sticky-bar .csb-meta .is-free {
        color: var(--accent-emerald);
        font-weight: 700;
    }

    .cart-sticky-bar .csb-action {
        min-height: 44px;
        padding: 0 0.9rem;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    body.has-cart-bar {
        padding-bottom: calc(76px + 84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* The order-summary sidebars used to pin with a hand-written `top: 90px`, which
   is 24px under the two-row sticky header (measured 114px tall at 1280px), so
   the card's own title slid behind it. app.js publishes the live header height
   as --bb-header-height, and phones already get a fixed summary bar of their
   own, so only tablet and desktop pin here. */
@media (min-width: 769px) {
    .summary-sticky {
        position: sticky;
        top: calc(var(--bb-header-height, 112px) + 0.75rem);
        max-height: calc(100vh - var(--bb-header-height, 112px) - 2rem);
        overflow-y: auto;
    }
}

.cart-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.cart-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.cart-select-all input,
.cart-line-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.cart-selected-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.cart-line {
    display: grid;
    grid-template-columns: auto 76px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
}

.cart-line.is-unselected {
    opacity: 0.68;
}

.cart-line-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 44px;
    cursor: pointer;
}

.cart-line-thumb {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-subtle);
    flex-shrink: 0;
}

.cart-line-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-line-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cart-line-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.cart-line-title:hover {
    color: var(--primary);
}

.cart-line-variation {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.cart-line-price {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cart-line-price b {
    color: var(--primary);
    font-weight: 800;
}

.cart-line-qty .qty-btn {
    width: 32px;
    height: 34px;
}

.cart-line-qty .qty-input {
    width: 34px;
    height: 34px;
}

.cart-line-remove {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.cart-line-remove:hover {
    background: rgba(244, 63, 94, 0.1);
    color: var(--accent-rose);
}

/* Disabled-looking checkout link when nothing is selected; click is still
   caught so the page can explain why nothing happens. */
.btn.is-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .cart-line {
        grid-template-columns: auto 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "check thumb body remove"
            "check thumb qty qty";
        row-gap: 0.5rem;
        padding: 0.7rem;
    }

    .cart-line-check { grid-area: check; }
    .cart-line-thumb { grid-area: thumb; width: 64px; height: 64px; }
    .cart-line-body { grid-area: body; }
    .cart-line-remove { grid-area: remove; align-self: start; }
    .cart-line-qty { grid-area: qty; justify-self: start; }
}

/* ------------------------------------------------------------------ *
 * 22. Product details: free-delivery offer under the gallery
 * Pure CSS: an orange-dark card, a small truck on a dashed road. It is
 * only rendered when the product data earns it (see renderFreeDeliveryBanner),
 * and every moving part stops under prefers-reduced-motion.
 * ------------------------------------------------------------------ */
.free-delivery-banner {
    position: relative;
    margin-top: 0.85rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 55%, #f97316 100%);
    box-shadow: var(--shadow-md);
    color: #fff;
}

.free-delivery-banner.is-limited {
    background: linear-gradient(135deg, #78350f 0%, #b45309 60%, #f59e0b 100%);
}

.fdb-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem 0.45rem;
}

.fdb-title {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #ffedd5;
}

.fdb-text {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fdb-scene {
    position: relative;
    height: 46px;
}

.fdb-road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
}

.fdb-road::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 14px, transparent 14px 26px);
    animation: fdb-road-move 1.1s linear infinite;
}

.fdb-truck {
    position: absolute;
    left: 16%;
    bottom: 11px;
    width: 80px;
    height: 34px;
    animation: fdb-bob 1.4s ease-in-out infinite;
}

.fdb-trailer {
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 48px;
    height: 24px;
    background: #fff7ed;
    border-radius: 4px 2px 2px 4px;
    box-shadow: inset 0 -6px 0 #fed7aa;
}

.fdb-cab {
    position: absolute;
    left: 46px;
    bottom: 8px;
    width: 26px;
    height: 18px;
    background: #ffd7b0;
    border-radius: 4px 7px 2px 2px;
}

.fdb-cab::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 10px;
    height: 7px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.55);
}

.fdb-wheel {
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1f2937;
    border: 3px solid #e5e7eb;
    box-sizing: border-box;
    animation: fdb-spin 0.8s linear infinite;
}

.fdb-wheel-a { left: 8px; }
.fdb-wheel-b { left: 52px; }

@keyframes fdb-road-move {
    from { background-position: 0 0; }
    to { background-position: -26px 0; }
}

@keyframes fdb-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes fdb-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fdb-road::before,
    .fdb-truck,
    .fdb-wheel {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .fdb-copy { padding: 0.7rem 0.85rem 0.35rem; }
    .fdb-text { font-size: 0.78rem; }
    .fdb-scene { height: 42px; }
    .fdb-truck { left: 10%; }
}

/* ------------------------------------------------------------------ *
 * 23. Product details: sticky purchase bar
 * Desktop keeps it just under the sticky header, phones keep it right
 * above the bottom navigation. Both use safe-area padding and stay below
 * the modal layer (z-index 200), so a variant dialog always wins.
 * ------------------------------------------------------------------ */
.pd-sticky-actions {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: min(100% - 1rem, 560px);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.pd-sticky-actions[hidden] {
    display: none;
}

.pd-sticky-price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.pd-sticky-price span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pd-sticky-price strong {
    font-size: 1rem;
    font-weight: 900;
    color: var(--primary);
    white-space: nowrap;
}

.pd-sticky-btns {
    margin-left: auto;
    display: flex;
    gap: 0.45rem;
}

.pd-sticky-actions .btn {
    min-height: 44px;
    padding: 0 0.9rem;
    font-size: 0.8rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

@media (min-width: 769px) {
    .pd-sticky-actions {
        top: calc(var(--bb-header-height, 112px) + 0.5rem);
        bottom: auto;
        width: min(100% - 2rem, 720px);
        padding: 0.35rem 0.5rem 0.35rem 1rem;
    }

    .has-pd-sticky {
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    .has-pd-sticky {
        padding-bottom: calc(70px + 74px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The chat launcher keeps its own corner instead of sitting on the bar. */
    .has-pd-sticky .ai-fab {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }
}

/* ------------------------------------------------------------------ *
 * 24. Recently viewed cards
 * The compact card uses its spare column for the real discount and the
 * delivery offer; only the discount chip moves, and only briefly.
 * ------------------------------------------------------------------ */
.rv-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    height: 100%;
    min-width: 0;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.rv-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg-subtle);
}

.rv-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rv-name {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.rv-price {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.rv-discount {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(225, 29, 72, 0.12);
    color: var(--accent-rose);
    white-space: nowrap;
    animation: rv-discount-nudge 4.2s ease-in-out infinite;
}

.rv-free {
    font-size: 0.7rem;
    font-weight: 700;
    color: #c2410c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-free.is-limited {
    color: #b45309;
}

.dark .rv-discount {
    color: #fda4af;
}

.dark .rv-free {
    color: #fdba74;
}

.dark .rv-free.is-limited {
    color: #fcd34d;
}

@keyframes rv-discount-nudge {
    0%, 72%, 100% { transform: translateX(0); }
    76% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    84% { transform: translateX(-1.5px); }
    88% { transform: translateX(1.5px); }
    92% { transform: translateX(0); }
}

/* ------------------------------------------------------------------ *
 * 25. Mobile product-card density
 * Two columns at 320px leave ~140px per card, so the padding, type and
 * tag gaps shrink a little while every control keeps its full size.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .product-card-content {
        padding: 0.65rem;
    }

    .product-card-title {
        font-size: 0.82rem;
        min-height: 2.15rem;
        margin-bottom: 0.35rem;
    }

    .product-card-price-row {
        gap: 0.35rem;
        padding-top: 0.35rem;
    }

    .current-price {
        font-size: 1rem;
    }

    .old-price {
        font-size: 0.7rem;
    }

    .product-card-tags {
        margin-top: 0.35rem;
        gap: 3px;
    }

    .product-card-tags .pill-tag {
        font-size: 0.7rem;
        padding: 1px 5px;
    }
}

/* Reduced motion: keep layout changes, drop the movement */
@media (prefers-reduced-motion: reduce) {
    .rv-discount,
    .product-card,
    .product-card-img,
    .wishlist-toggle-btn,
    .quick-add-btn,
    .btn,
    .modal-backdrop,
    .modal-content,
    .hero-swiper .swiper-slide,
    .ai-panel,
    .toast {
        transition: none !important;
        animation: none !important;
    }

    .product-card:hover,
    .product-card:hover .product-card-img,
    .wishlist-toggle-btn:hover,
    .quick-add-btn:hover,
    .btn:hover {
        transform: none !important;
    }

    .fdb-truck,
    .fdb-wheel,
    .fdb-road::before,
    .rv-discount {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * 25. Product details foreground layer
 * A listing page keeps running underneath; the product view is a fixed,
 * independently scrolling layer above it, so Back only removes the layer.
 * ------------------------------------------------------------------ */
.pd-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
    overscroll-behavior: contain;
}

.pd-overlay-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.35rem 0.75rem;
    padding-top: calc(0.35rem + env(safe-area-inset-top, 0px));
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.pd-overlay-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.pd-overlay-back:hover {
    background: var(--bg-subtle);
}

.pd-overlay-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pd-overlay-title {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-overlay-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.pd-overlay-content {
    padding-top: 1.25rem;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.pd-overlay .pd-sticky-actions {
    z-index: 20;
}

@media (min-width: 769px) {
    /* The overlay has its own top bar, so the standalone page's slot under
       the site header would drop the bar on top of the gallery. Anchor it to
       the bottom of the layer instead. */
    .pd-overlay .pd-sticky-actions {
        top: auto;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .pd-overlay-content {
        padding-bottom: 5.5rem;
    }
}

@media (max-width: 768px) {
    .pd-overlay .pd-sticky-actions {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Customer photos attached to a review. The review text never depends on
   these loading — a dead URL only removes its own thumbnail. */
.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.review-photo {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    cursor: zoom-in;
}

.review-photo:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.review-photo--missing {
    object-fit: contain;
    padding: 10px;
    cursor: default;
}

/* Where a review can be written, and why the form is not on the page. */
.review-policy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0.8rem 0.9rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.review-policy-note > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--accent-emerald);
}

.review-policy-note p {
    margin: 0;
}

.review-policy-note a {
    color: var(--primary);
    font-weight: 700;
}

/* Delivered-order review entry point inside "My orders". */
.order-review-box {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    background: var(--bg-subtle);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.order-review-head {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.order-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.order-review-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-review-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-emerald);
    white-space: nowrap;
}

.order-review-done svg {
    width: 14px;
    height: 14px;
}

.order-review-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.review-star-picker {
    display: flex;
    gap: 0.2rem;
}

.review-star {
    padding: 0 0.1rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--border-color);
    cursor: pointer;
}

.review-star.is-on {
    color: var(--accent-amber);
}

.review-star:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}