/* ============================================================
   storefront.css - Public storefront styles (index.html)
   Requires base.css first; theme-*.css layers on top.
   ============================================================ */

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--border-color) 25%, #f1f5f9 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, #8b5cf6 50%, var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: shimmer 4s linear infinite;
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1001;
}
.announcement-bar a { color: #fff; text-decoration: underline; }
.announcement-bar-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
}
.announcement-bar-close:hover { color: #fff; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

#main-header.header-scrolled {
    border-bottom-color: var(--border-color);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.96);
}

#main-header .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 24px;
    /* Prevent header from causing horizontal overflow */
    width: 100%;
    box-sizing: border-box;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-links a {
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.06);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
}

/* Account button */
.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-body);
}
.account-trigger:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.account-trigger svg { flex-shrink: 0; }

/* Currency toggle */
.currency-toggle {
    display: flex;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
    gap: 0;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.currency-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

.currency-toggle-btn.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
    transform: scale(1.05);
}

/* Cart button */
.cart-trigger {
    position: relative;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 700;
}

.cart-trigger:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.cart-badge {
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
    animation: pulse 2s infinite;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition-fast);
}

.mobile-menu-btn:hover { background: rgba(var(--primary-rgb), 0.06); border-color: var(--primary-color); color: var(--primary-color); }

/* On smaller screens hide desktop nav items, show hamburger */
@media (max-width: 860px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: inline-flex !important; }
    .header-actions .account-trigger span { display: none; }
    .header-actions .cart-trigger span { display: none; }
    .currency-toggle-btn { padding: 6px 10px; font-size: 0.7rem; }
    #main-header .container { gap: 8px; padding: 0 14px; }
    .header-actions { gap: 6px; margin-left: auto; }
}

.mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
    box-shadow: var(--shadow-md);
}

.mobile-nav.open { display: flex; animation: slideInUp 0.22s ease; }

.mobile-nav a {
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}

.mobile-nav a:hover {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
    border-left-color: var(--primary-color);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding: 80px 80px 80px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Animated ambient blob */
.hero-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    animation: blobPulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -80px;
    left: 0;
    animation: blobPulse 10s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
    animation: fadeIn 0.6s ease both;
}

.hero-eyebrow svg { animation: pulse 2s infinite; }

.hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
    margin-bottom: 20px;
    font-weight: 800;
    animation: fadeIn 0.6s ease 0.1s both;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.75;
    margin-bottom: 32px;
    animation: fadeIn 0.6s ease 0.2s both;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    animation: fadeIn 0.6s ease 0.3s both;
}

/* Hero Stats Row */
.hero-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
    animation: fadeIn 0.6s ease 0.4s both;
}

.hero-stat-item h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 2px;
    line-height: 1;
}

.hero-stat-item p {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Hero Image */
.hero-image-wrapper {
    position: relative;
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}

.hero-img {
    width: 100%;
    max-width: 580px;
    height: 440px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb),0.08);
    margin-left: auto;
}

.hero-img-frame {
    position: relative;
}

.hero-img-frame::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: calc(var(--radius-xl) + 12px);
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.15), rgba(139,92,246,0.1));
    z-index: -1;
}

/* Floating cards on hero */
.hero-float-card {
    position: absolute;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    z-index: 2;
    animation: scaleIn 0.5s ease both;
}

.hero-float-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* ============================================================
   MARQUEE TRUST BAR
   ============================================================ */
.trust-marquee-section {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    padding: 16px 0;
    overflow: hidden;
    position: relative;
}

.trust-marquee-track {
    display: flex;
    gap: 0;
    animation: marqueeScroll 30s linear infinite;
    width: max-content;
}

.trust-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
}

.trust-marquee-item svg { opacity: 0.7; flex-shrink: 0; }

.trust-marquee-dot {
    width: 5px;
    height: 5px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   FEATURES / WHY US STRIP
   ============================================================ */
.features-section {
    padding: 90px 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: 14px;
    font-weight: 800;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: default;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #8b5cf6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(139,92,246,0.1));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 1.4rem;
    transition: var(--transition);
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35);
}

.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.feature-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */
.how-it-works-section {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
    padding: 90px 40px;
}

.how-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Connecting line between steps */
.how-steps-grid::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(12.5% + 20px);
    right: calc(12.5% + 20px);
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--primary-rgb),0.2), rgba(139,92,246,0.2));
    z-index: 0;
}

.how-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.how-step-number {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.35);
    border: 4px solid #fff;
    position: relative;
    z-index: 1;
}

.how-step h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.how-step p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 200px;
    margin: 0 auto;
}

/* ============================================================
   CATALOG SECTION
   ============================================================ */
.catalog-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 40px;
}

.catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.catalog-title h2 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 4px;
}

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

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    transition: var(--transition-fast);
    min-width: 240px;
}

.search-box:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.search-box svg { color: var(--text-muted); flex-shrink: 0; }

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--text-dark);
    width: 100%;
}

.search-box input::placeholder { color: var(--text-muted); }

/* Category Filters */
.category-filters-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.category-btn {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 18px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition-fast);
    letter-spacing: 0.02em;
}

.category-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
}

.category-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.3);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    animation: fadeIn 0.5s ease both;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.product-img-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--bg-light);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent-color);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.digital-badge { background: linear-gradient(135deg, var(--primary-color), #8b5cf6); }

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-cat-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 6px;
    display: block;
}

.product-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.product-price {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.add-to-cart-btn {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-bounce);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.add-to-cart-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 0.2s;
}

.add-to-cart-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.45);
}

.add-to-cart-btn:hover::after {
    opacity: 1;
}

/* Empty state */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    color: var(--text-muted);
    flex: 1;
}

.cart-empty-state svg { margin-bottom: 18px; opacity: 0.3; }
.cart-empty-state h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-dark); }
.cart-empty-state p { font-size: 0.85rem; }

/* ============================================================
   ORDER TRACKING SECTION
   ============================================================ */
.tracking-section {
    background: var(--bg-card);
    padding: 80px 40px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tracking-section-inner {
    max-width: 640px;
    margin: 0 auto;
}

.tracking-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.tracking-search-row input {
    flex: 1;
    padding: 13px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--bg-card);
    color: var(--text-dark);
    transition: var(--transition-fast);
    outline: none;
}

.tracking-search-row input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.tracking-result-card {
    background: var(--bg-light);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    animation: fadeIn 0.4s ease;
}

.tracking-timeline {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position: relative;
    padding-bottom: 8px;
}

.tracking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.tracking-step-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--border-color);
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
    position: relative;
    z-index: 2;
}

.tracking-step.active .tracking-step-dot {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

.tracking-step-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.tracking-step.active .tracking-step-label { color: var(--primary-color); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section {
    padding: 90px 40px;
    background: var(--bg-light);
    max-width: 100%;
}

.testimonials-title {
    text-align: center;
    margin-bottom: 56px;
}

.testimonials-title h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: 12px; }
.testimonials-title p { color: var(--text-muted); font-size: 1rem; }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    transition: var(--transition);
    animation: fadeIn 0.5s ease both;
    position: relative;
    box-shadow: 0 10px 30px rgba(148, 163, 184, 0.08);
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 6rem;
    font-family: Georgia, serif;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.12);
}

.testimonial-stars {
    color: #f59e0b;
    font-size: 1rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.testimonial-quote {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--primary-rgb), 0.15);
    flex-shrink: 0;
}

.testimonial-author-name { font-weight: 700; font-size: 0.88rem; color: var(--text-dark); }
.testimonial-author-title { font-size: 0.75rem; color: var(--text-muted); }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
    padding: 90px 40px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.faq-inner {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: var(--transition);
    background: var(--bg-card);
}

.faq-item.open {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.08);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    transition: var(--transition-fast);
    gap: 16px;
}

.faq-question:hover { background: rgba(var(--primary-rgb), 0.03); }
.faq-item.open .faq-question { color: var(--primary-color); }

.faq-chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--primary-color); color: #fff; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer { max-height: 300px; }

.faq-answer-inner {
    padding: 0 22px 20px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.75;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
    color: #94a3b8;
    padding: 56px 40px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-brand-col p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #64748b;
    margin: 12px 0 18px;
    max-width: 280px;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-social a {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: var(--transition-fast);
}

.footer-social a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.footer-col h4 {
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

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

.footer-col a {
    color: #64748b;
    font-size: 0.84rem;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

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

.footer-bottom {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 0.78rem;
    color: #475569;
    text-align: center;
}

@media (max-width: 860px) {
    .site-footer { padding: 36px 20px 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-brand-col { grid-column: 1 / -1; }
    .footer-brand-col p { max-width: 100%; }
    .footer-bottom { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    backdrop-filter: blur(4px);
}

.cart-drawer-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 96vw;
    height: 100vh;
    background: var(--bg-card);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

.cart-drawer.active { transform: translateX(0); }

.cart-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cart-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
}

.close-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    transition: var(--transition-fast);
}

.close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: var(--danger-color); }

.cart-items-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-summary {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-card);
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

.cart-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    animation: fadeIn 0.3s ease;
}

.cart-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
}

.cart-item-details { flex: 1; min-width: 0; }
.cart-item-details h4 {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
}

.cart-item-price { font-size: 0.82rem; color: var(--primary-color); font-weight: 700; }

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.qty-btn {
    background: var(--bg-light);
    border: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

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

.qty-val {
    width: 30px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    line-height: 28px;
}

.cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    flex-shrink: 0;
    display: flex;
}

.cart-item-remove:hover { background: #fee2e2; color: var(--danger-color); }

.cart-summary {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-card);
}

.cart-subtotal-row, .coupon-discount-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.coupon-discount-line { color: var(--success-color); font-weight: 700; }

.cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    margin-bottom: 12px;
    color: var(--text-dark);
}

.cart-totals span:last-child { color: var(--primary-color); }

.cod-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.coupon-input-group {
    display: flex;
    gap: 8px;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    backdrop-filter: blur(6px);
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.25s ease;
    border: 1px solid var(--border-color);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header h3 { font-size: 1rem; font-weight: 800; }

/* Modal close (✕). Used by the auth modal, the order-detail modal and the
   replacement modal. It had no styling at all, so it rendered as a raw
   browser button; this matches .account-close-btn so every dismiss control
   in the app looks the same. */
.auth-modal-close {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}
.auth-modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

.modal-body { padding: 24px; }

.detail-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.detail-modal-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-light);
}

.detail-modal-info { display: flex; flex-direction: column; }

.detail-modal-price {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Success Modal */
.success-body {
    text-align: center;
    padding: 40px 32px;
}

.success-illustration {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, var(--success-color), #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(16,185,129,0.35);
    animation: pulse 2s infinite;
}

.success-body h3 { font-size: 1.5rem; margin-bottom: 8px; }

.success-order-id {
    display: inline-block;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    padding: 5px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 14px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.success-body p { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 24px; }

.success-actions { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   UNIVERSAL STORE: GATE / FLOAT WA / ANALYTICS NOTICE
   ============================================================ */
.store-gate {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at top, rgba(var(--primary-rgb), 0.18), transparent 50%),
        #0f172a;
}
.store-gate-card {
    background: #fff;
    color: #0f172a;
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.store-gate-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.store-gate-card h1 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    margin: 0 0 10px;
}
.store-gate-card p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
body.store-gated #storefront-main,
body.store-gated #main-header,
body.store-gated .site-footer,
body.store-gated .announcement-bar,
body.store-gated .wa-float-btn,
body.store-gated .cart-drawer,
body.store-gated .cart-drawer-overlay {
    display: none !important;
}

.wa-float-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55);
    color: #fff;
}

/* Floating cart button — sits above the WhatsApp button */
.cart-float-btn {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 899;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--primary-color, #4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(var(--primary-rgb, 79, 70, 229), 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.cart-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 34px rgba(var(--primary-rgb, 79, 70, 229), 0.55);
    color: #fff;
}
.cart-float-btn .cart-float-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    line-height: 1;
}
body.store-gated .cart-float-btn {
    display: none !important;
}

.analytics-notice {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 880;
    max-width: 360px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.78rem;
    line-height: 1.45;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.analytics-notice button {
    flex-shrink: 0;
    border: none;
    background: var(--primary-color);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.product-sold-out {
    opacity: 0.82;
}
.product-sold-out .product-img {
    filter: grayscale(0.35);
}

@media (max-width: 600px) {
    /* Full-bleed on a phone, and lifted clear of the floating cart /
       WhatsApp buttons — at bottom:86px the cart button landed on top of
       the notice's dismiss button and made it unclickable. */
    .analytics-notice {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: 156px;
    }
}

/* ============================================================
   USER ACCOUNT / AUTH MODAL
   ============================================================ */
.auth-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--border-color); }
.auth-tab { flex:1; padding:10px; text-align:center; font-weight:700; font-size:0.85rem; cursor:pointer; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:var(--transition); }
.auth-tab.active { color:var(--primary-color); border-bottom-color:var(--primary-color); }
.auth-form { display:none; }
.auth-form.active { display:block; animation:fadeIn .25s ease; }

/* ── Full-screen auth page ── */
.auth-page {
    position:fixed; inset:0; z-index:10000; display:none;
    overflow-y:auto; background:#0f172a;
}
.auth-page.active { display:block; }
.auth-page-split { display:flex; width:100%; min-height:100vh; }

/* Brand / hero side */
.auth-page-hero {
    flex:1; position:relative; display:flex; flex-direction:column; justify-content:center;
    padding:56px 60px; color:#f1f5f9; overflow:hidden;
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(var(--primary-rgb),0.28), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(56,189,248,0.18), transparent 55%),
        #0f172a;
}
.auth-page-hero-inner { display:flex; flex-direction:column; gap:20px; max-width:30em; }
.auth-page-brand { font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; color:#fff; }
.auth-page-hero h2 { font-size:2.3rem; line-height:1.12; font-weight:800; margin:0; color:#fff; max-width:11em; }
.auth-page-hero p { font-size:1rem; color:#cbd5e1; max-width:28em; line-height:1.6; margin:0; }
.auth-page-perks { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:12px; }
.auth-page-perks li { display:flex; align-items:center; gap:10px; color:#e2e8f0; font-size:0.92rem; }
.auth-page-perks li svg { color:#38bdf8; flex-shrink:0; }
.auth-page-back {
    position:absolute; top:26px; left:32px; display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:#e2e8f0;
    padding:8px 14px; border-radius:999px; font-size:0.82rem; font-weight:600; cursor:pointer;
    transition:var(--transition); z-index:2;
}
.auth-page-back:hover { background:rgba(255,255,255,0.16); color:#fff; }

/* Form side */
.auth-page-form-side {
    width:min(500px, 100%); flex-shrink:0; background:#fff;
    display:flex; flex-direction:column; justify-content:center;
    padding:48px 44px; box-shadow:-20px 0 60px rgba(0,0,0,0.25);
}
.auth-page-form-card { width:100%; max-width:380px; margin:0 auto; }

@media (max-width:860px) {
    .auth-page-hero { display:none; }
    .auth-page-form-side { width:100%; box-shadow:none; min-height:100vh; }
    .auth-page-back { background:rgba(15,23,42,0.06); border-color:rgba(15,23,42,0.12); color:var(--text-dark); }
}

/* ── Full-screen subscription checkout page ── */
.checkout-page {
    position:fixed; inset:0; z-index:9998; display:none; overflow-y:auto; background:#f4f6fb;
}
.checkout-page.active { display:block; }
.checkout-page-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; background:#fff; border-bottom:1px solid var(--border-color);
    position:sticky; top:0; z-index:3;
}
.checkout-page-back {
    display:inline-flex; align-items:center; gap:8px; background:transparent; border:none;
    color:var(--text-muted); font-size:0.86rem; font-weight:600; cursor:pointer; transition:var(--transition);
}
.checkout-page-back:hover { color:var(--primary-color); }
.checkout-page-brand { font-size:1.05rem; font-weight:800; color:var(--text-dark); }
.checkout-page-body { max-width:1000px; margin:0 auto; padding:32px 24px 64px; }
.checkout-page-grid { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.checkout-page-title { font-size:1.6rem; font-weight:800; margin:0 0 6px; color:var(--text-dark); }
.checkout-page-sub { color:var(--text-muted); font-size:0.9rem; margin:0 0 24px; line-height:1.55; }
.checkout-section { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:22px 24px; margin-bottom:18px; }
.checkout-section-title { font-size:1rem; font-weight:700; margin:0 0 16px; color:var(--text-dark); }
.checkout-pay-instructions {
    font-size:0.84rem; line-height:1.55; background:var(--bg-light,#f3f6fb);
    border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; margin-bottom:16px; color:var(--text-dark);
}
.pay-options-grid { display:flex; flex-wrap:wrap; gap:10px; }
.pay-options-grid .pay-option-btn {
    flex:1; min-width:120px; text-align:center; padding:12px 10px; border:2px solid var(--border-color);
    border-radius:var(--radius-md); font-size:0.82rem; font-weight:700; color:var(--text-muted);
    background:transparent; cursor:pointer; transition:var(--transition);
}
.pay-options-grid .pay-option-btn:hover { border-color:var(--primary-color); color:var(--primary-color); }
.pay-options-grid .pay-option-btn.active {
    border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),0.06);
}

/* Summary card */
.checkout-page-summary { position:sticky; top:88px; }
.checkout-summary-card { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:22px 24px; }
.checkout-summary-title { font-size:1rem; font-weight:700; margin:0 0 16px; color:var(--text-dark); }
.checkout-summary-plan { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.checkout-summary-plan-icon {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; background:rgba(var(--primary-rgb),0.1); flex-shrink:0;
}
.checkout-summary-plan strong { display:block; font-size:0.95rem; color:var(--text-dark); }
.checkout-summary-plan-meta { font-size:0.78rem; color:var(--text-muted); }
.checkout-summary-features { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.checkout-summary-features li { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-dark); }
.checkout-summary-features li svg { color:#10b981; flex-shrink:0; }
.checkout-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:0.86rem; }
.checkout-summary-total {
    border-top:1px solid var(--border-color); padding-top:14px; margin-top:4px;
    font-size:1.05rem; font-weight:800; color:var(--text-dark);
}
.checkout-summary-total span:last-child { color:var(--primary-color); }
.checkout-summary-note { font-size:0.72rem; color:var(--text-muted); margin:12px 0 0; text-align:center; line-height:1.5; }

@media (max-width:800px) {
    .checkout-page-grid { grid-template-columns:1fr; }
    .checkout-page-summary { position:static; order:-1; }
}

/* ============================================================
   USER DASHBOARD (account portal) — Admin-style full layout
   ============================================================ */
.account-portal { position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,0.75); backdrop-filter:blur(14px); display:none; padding:0; overflow:hidden; }
.account-portal.open { display:block; }
.account-portal-inner { display:flex; height:100vh; max-width:1280px; margin:0 auto; background:#f1f5f9; box-shadow:0 0 80px rgba(0,0,0,0.45); animation:scaleIn .22s ease; }

/* ── Standalone dashboard page (dashboard.html) ──
   The account portal is no longer a modal overlay here: it's a normal,
   full-width page below the site header. Drop the dark backdrop, the
   1280px max-width gutters, and the fixed positioning that caused the
   empty spacing on the sides. */
body[data-page="dashboard"] { background:#f1f5f9; margin:0; padding:0; }
body[data-page="dashboard"] .account-portal {
    position:static; inset:auto; z-index:auto; background:transparent;
    backdrop-filter:none; display:block; overflow:visible;
}
body[data-page="dashboard"] .account-portal-inner {
    max-width:none; width:100%; margin:0; box-shadow:none; animation:none;
    /* Fill the entire viewport since header is removed. */
    height:100vh; min-height:100vh;
}
/* When header is absent, the dashboard fills the full screen without gaps */
body[data-page="dashboard"] { min-height:100vh; }
body[data-page="dashboard"] .account-main-scroll { overflow-y:auto; }
body[data-page="dashboard"] .account-portal-inner .account-sidebar { min-height:100vh; }

/* ── Premium sidebar (matches admin dark shell) ── */
.account-sidebar { width:256px; background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%); color:#e2e8f0; display:flex; flex-direction:column; flex-shrink:0; position:relative; border-right:1px solid rgba(255,255,255,0.06); }
.account-brand { display:flex; align-items:center; gap:10px; padding:20px 20px 16px; }
.account-brand-mark { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--primary-color),#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.95rem; box-shadow:0 4px 12px rgba(var(--primary-rgb),0.4); }
.account-brand-text { font-size:0.98rem; font-weight:800; letter-spacing:-0.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.account-user-badge { margin:0 14px 8px; padding:14px; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:12px; }
.account-avatar-large { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary-color),#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; font-weight:800; flex-shrink:0; box-shadow:0 3px 10px rgba(var(--primary-rgb),0.35); }
.account-user-info { overflow:hidden; }
.account-user-info strong { display:block; font-size:0.86rem; color:#f8fafc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-user-info span { display:block; font-size:0.72rem; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; }

.account-sidebar-nav { flex:1; padding:8px 14px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.account-nav-label { padding:14px 12px 6px; font-size:0.64rem; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:#64748b; }
.account-nav-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:9px; font-size:0.85rem; font-weight:600; cursor:pointer; color:#94a3b8; transition:all .16s ease; position:relative; }
.account-nav-item:hover { background:rgba(255,255,255,0.05); color:#f1f5f9; }
.account-nav-item.active { background:rgba(var(--primary-rgb),0.16); color:#fff; }
.account-nav-item.active::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:0 3px 3px 0; background:var(--primary-color); }
.account-nav-item i { width:18px; text-align:center; font-size:0.9rem; }
.account-nav-badge { margin-left:auto; background:var(--primary-color); color:#fff; border-radius:999px; font-size:0.62rem; font-weight:800; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.account-sidebar-footer { padding:14px; border-top:1px solid rgba(255,255,255,0.07); }
.account-logout-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:11px; border-radius:9px; border:1px solid rgba(239,68,68,0.3); background:rgba(239,68,68,0.08); color:#f87171; font-size:0.84rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all .16s ease; }
.account-logout-btn:hover { background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.5); color:#fca5a5; }

/* ── Main area + topbar ── */
.account-main { flex:1; display:flex; flex-direction:column; min-width:0; background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); }

.account-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px;
    height: 60px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 1px 0 var(--border-color), 0 2px 8px rgba(0,0,0,0.04);
    flex-shrink: 0;
}

/* Left side: hamburger + back + title all in a neat row */
.account-topbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.account-topbar-title h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile toggle and back btn — styled as compact icon buttons */
.account-mobile-toggle,
#account-back-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0;
    margin: 0 !important;
    vertical-align: unset !important;
}

/* Right side actions */
.account-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Currency selector */
.currency-selector-topbar {
    display: flex;
    align-items: center;
}

.currency-selector-topbar select {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-dark);
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
    min-width: 90px;
}

.currency-selector-topbar select:hover,
.currency-selector-topbar select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

/* Continue shopping — compact icon-only button on narrow screens */
.account-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .16s ease;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28);
    white-space: nowrap;
}
.account-topbar-link:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(var(--primary-rgb),0.4); }

.account-close-btn { width:34px; height:34px; border-radius:8px; background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-muted); font-size:0.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .16s ease; flex-shrink:0; }
.account-close-btn:hover { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }

.account-main-scroll { flex:1; overflow-y:auto; padding:28px; min-width:0; }

/* ── Dashboard panel improvements ── */
.account-page-header h2 { font-size:1.4rem; }
.acct-panel { border-radius:16px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.acct-table-wrap { border-radius:14px; overflow:hidden; }
.acct-table td { vertical-align:middle; }
.acct-sub-card { border-radius:14px; }
.acct-profile-form { max-width:520px; }
.acct-profile-form .form-row-grid { gap:16px; }
.acct-profile-form hr { border:none; border-top:1px solid var(--border-color); margin:20px 0; }

.account-page { display:none; }
.account-page.active { display:block; animation:fadeIn .2s ease; }
.account-page-header { margin-bottom:24px; }
.account-page-header h2 { margin:0; font-size:1.3rem; font-weight:800; color:var(--text-dark); }
.account-page-header p { margin:4px 0 0; color:var(--text-muted); font-size:0.85rem; }

/* ── Dashboard subscription summary card ── */
.acct-dash-sub-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.acct-dash-sub-card .ds-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.acct-dash-sub-card .ds-info { flex: 1; min-width: 140px; }
.acct-dash-sub-card .ds-info h4 { margin: 0; font-size: 0.95rem; color: var(--text-dark); }
.acct-dash-sub-card .ds-info p { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.acct-dash-sub-card .ds-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }
.acct-dash-sub-card .ds-meta span { display: inline-flex; align-items: center; gap: 4px; }
.acct-dash-sub-card .ds-btn { flex-shrink: 0; }

/* ── Dashboard hero ── */
.account-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 28px; margin-bottom:22px; border-radius:18px; background:linear-gradient(120deg,#1e293b 0%,#312e81 55%,#6d28d9 100%); color:#fff; box-shadow:0 12px 32px rgba(49,46,129,0.35); position:relative; overflow:hidden; }
.account-hero::after { content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,0.07); }
.account-hero-eyebrow { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.7); }
.account-hero-text h2 { margin:4px 0 6px; font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; }
.account-hero-text p { margin:0; font-size:0.9rem; color:rgba(255,255,255,0.8); }
.account-hero-since { font-size:0.78rem; color:rgba(255,255,255,0.85); text-align:right; z-index:1; white-space:nowrap; }

/* ── Stat cards ── */
.acct-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.acct-stat-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:20px; display:flex; align-items:center; gap:15px; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:var(--transition); }
.acct-stat-card:hover { border-color:rgba(var(--primary-rgb),0.35); box-shadow:0 10px 26px rgba(15,23,42,0.1); transform:translateY(-3px); }
.acct-stat-icon { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; flex-shrink:0; }
.acct-stat-icon.primary { background:linear-gradient(135deg,var(--primary-color),#8b5cf6); }
.acct-stat-icon.success { background:linear-gradient(135deg,#10b981,#059669); }
.acct-stat-icon.info { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.acct-stat-icon.amber { background:linear-gradient(135deg,#f59e0b,#d97706); }
.acct-stat-info h3 { margin:0; font-size:1.55rem; font-weight:800; color:var(--text-dark); line-height:1; }
.acct-stat-info p { margin:6px 0 0; font-size:0.77rem; color:var(--text-muted); font-weight:600; }

/* ── Dashboard two-column grid + panels ── */
.acct-dash-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.acct-panel { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.acct-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.acct-panel-head h3 { margin:0; font-size:0.98rem; font-weight:800; color:var(--text-dark); display:flex; align-items:center; gap:8px; }
.acct-panel-head h3 i { color:var(--primary-color); }
.acct-panel-link { font-size:0.78rem; font-weight:700; color:var(--primary-color); text-decoration:none; cursor:pointer; }
.acct-panel-link:hover { text-decoration:underline; }
.acct-recent-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-color); }
.acct-recent-row:last-child { border-bottom:none; }
.acct-recent-main { min-width:0; }
.acct-recent-main strong { display:block; font-size:0.85rem; color:var(--text-dark); }
.acct-recent-main span { display:block; font-size:0.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
/* The summary line is one span, but it also carries .badge type pills built in
   JS. The rule above turns every span in this column into a block — badges
   included — so each pill stretched to the full column width and broke the
   line it was meant to sit inside. Restore the component's own display. */
.acct-recent-main span .badge { display:inline-flex; }
/* On a phone this column is about 140px wide, so a single nowrap line is
   truncated after two or three words and the order tells the customer
   nothing. Wrap to two lines instead and drop the desktop max-width, which
   is already wider than the column. */
@media (max-width: 767px) {
    .acct-recent-main span {
        white-space: normal;
        max-width: none;
        line-height: 1.45;
        max-height: 2.9em;
    }
    /* An inline-flex badge is an atomic inline box, so its own height sets the
       line box it sits in — at the inherited 1.45 it came to 19px and pushed a
       two-line clamp of 2.9em into cutting the second line in half. Pulled to
       1 it measures under the text strut, so every line is the same height and
       the clamp lands cleanly. */
    .acct-recent-main span .badge { line-height: 1; }
}
.acct-recent-right { text-align:right; white-space:nowrap; }
.acct-recent-right b { display:block; font-size:0.85rem; color:var(--text-dark); }

.acct-quick-actions { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.acct-quick-actions h3 { margin:0 0 14px; font-size:0.95rem; display:flex; align-items:center; gap:8px; }
.acct-actions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.acct-action-btn { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--border-color); border-radius:12px; font-size:0.83rem; font-weight:700; color:var(--text-dark); cursor:pointer; transition:var(--transition); text-decoration:none; background:var(--bg-light); }
.acct-action-btn i { color:var(--primary-color); }
.acct-action-btn:hover { border-color:var(--primary-color); color:var(--primary-color); background:rgba(var(--primary-rgb),0.05); transform:translateY(-2px); box-shadow:0 6px 16px rgba(var(--primary-rgb),0.14); }

/* ── In-portal Shop page ── */
.acct-shop-section { margin-bottom:28px; }
.acct-shop-heading { margin:0 0 14px; font-size:0.98rem; font-weight:800; color:var(--text-dark); display:flex; align-items:center; gap:8px; }
.acct-shop-heading i { color:var(--primary-color); }
.acct-shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.acct-shop-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:16px; display:flex; flex-direction:column; gap:8px; transition:var(--transition); box-shadow:var(--shadow-sm); }
.acct-shop-card:hover { border-color:var(--primary-color); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.acct-shop-card-icon { font-size:1.6rem; }
.acct-shop-card-img { width:100%; height:120px; object-fit:cover; border-radius:var(--radius-md); }
.acct-shop-card h4 { margin:0; font-size:0.9rem; font-weight:700; color:var(--text-dark); }
.acct-shop-card-price { font-size:1.05rem; font-weight:800; color:var(--primary-color); }
.acct-shop-card-price small { font-size:0.7rem; font-weight:600; color:var(--text-muted); }
.acct-shop-card-desc { margin:0; font-size:0.78rem; color:var(--text-muted); line-height:1.5; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acct-shop-card button { margin-top:auto; }

.acct-table-wrap { overflow-x:auto; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.acct-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.acct-table th { text-align:left; padding:10px 14px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:#f8fafc; border-bottom:1px solid var(--border-color); }
.acct-table td { padding:12px 14px; border-bottom:1px solid var(--border-color); }
.acct-table tr:last-child td { border-bottom:none; }
.acct-table .badge { font-size:0.68rem; padding:3px 10px; border-radius:999px; font-weight:700; }
.badge-pending { background:rgba(245,158,11,0.12); color:#d97706; }
.badge-shipped { background:rgba(59,130,246,0.12); color:#2563eb; }
.badge-completed { background:rgba(16,185,129,0.12); color:#059669; }
.badge-cancelled { background:rgba(239,68,68,0.12); color:#dc2626; }

.acct-subs-grid { display:flex; flex-direction:column; gap:12px; }
.acct-sub-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.acct-sub-card:hover { box-shadow:var(--shadow-md); }
.acct-sub-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.acct-sub-card-header strong { font-size:0.95rem; }
.acct-sub-badge { font-size:0.65rem; font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-left:8px; }
.acct-sub-badge.badge-completed { background:rgba(16,185,129,0.12); color:#059669; }
.acct-sub-badge.badge-pending { background:rgba(245,158,11,0.12); color:#d97706; }
.acct-sub-badge.badge-cancelled { background:rgba(239,68,68,0.12); color:#dc2626; }

/* Order detail modal (account portal) */
.acct-od-status-bar {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 0 14px; border-bottom:1px solid var(--border-color); margin-bottom:14px;
}
.acct-od-details {
    background:var(--bg-light); border-radius:var(--radius-md);
    padding:12px 16px; margin-bottom:18px;
}
.acct-od-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:7px 0; font-size:0.85rem; }
.acct-od-row:not(:last-child) { border-bottom:1px solid var(--border-color); }
.acct-od-row .acct-od-label { color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.acct-od-row .acct-od-value { text-align:right; color:var(--text-dark); font-weight:500; }
.acct-od-section-title {
    font-size:0.75rem; font-weight:800; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text-muted); margin:0 0 8px;
}
.acct-od-timeline { display:flex; justify-content:space-between; gap:6px; margin:16px 0 18px; padding:14px 10px; background:var(--bg-light); border-radius:var(--radius-md); }
.acct-od-step { flex:1; text-align:center; font-size:0.68rem; font-weight:600; color:var(--text-muted); position:relative; }
.acct-od-step .acct-od-dot { display:block; width:12px; height:12px; border-radius:50%; background:var(--border-color); margin:0 auto 5px; }
.acct-od-step.done { color:var(--text-dark); }
.acct-od-step.done .acct-od-dot { background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,0.2); }
.acct-od-step.cancelled .acct-od-dot { background:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,0.2); }
.acct-od-step .step-label { display:block; margin-top:3px; }
.acct-od-items { width:100%; border-collapse:collapse; margin:0 0 14px; font-size:0.84rem; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-color); }
.acct-od-items th { text-align:left; color:var(--text-muted); font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; padding:9px 12px; background:var(--bg-light); border-bottom:1px solid var(--border-color); }
.acct-od-items td { padding:10px 12px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.acct-od-items tr:last-child td { border-bottom:none; }
.acct-od-items .item-title { font-weight:600; color:var(--text-dark); }
.acct-od-qty { text-align:center; font-weight:600; color:var(--text-muted); width:40px; }
.acct-od-price { text-align:right; font-weight:700; color:var(--text-dark); }
.acct-od-total {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 0 0; margin-top:4px; border-top:2px solid var(--border-color);
    font-size:0.92rem; font-weight:600; color:var(--text-dark);
}
.acct-od-total strong { font-size:1.15rem; color:var(--primary-color); }
.acct-sub-progress { height:6px; background:var(--border-color); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.acct-sub-progress-fill { height:100%; background:linear-gradient(90deg,var(--primary-color),#8b5cf6); border-radius:3px; transition:width .5s; }
.acct-sub-details { display:flex; gap:20px; flex-wrap:wrap; font-size:0.8rem; color:var(--text-muted); }

/* ── Delivered account credentials ── */
.acct-cred-box { margin-top:12px; padding:14px 16px; background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.06)); border:1px solid rgba(99,102,241,0.18); border-radius:10px; }
.acct-cred-box.acct-cred-pending { background:rgba(245,158,11,0.07); border-color:rgba(245,158,11,0.25); color:#b45309; font-size:0.82rem; text-align:center; }
.acct-cred-title { font-size:0.8rem; font-weight:700; margin-bottom:10px; color:var(--text-color); }
.acct-repl-tag { font-size:0.6rem; font-weight:700; text-transform:uppercase; background:rgba(16,185,129,0.15); color:#059669; padding:2px 8px; border-radius:999px; margin-left:6px; }
.acct-cred-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; border-bottom:1px dashed rgba(0,0,0,0.06); }
.acct-cred-label { font-size:0.74rem; color:var(--text-muted); font-weight:600; }
.acct-cred-val { display:flex; align-items:center; gap:8px; }
.acct-cred-val code { font-size:0.82rem; background:#fff; padding:3px 8px; border-radius:6px; border:1px solid var(--border-color); word-break:break-all; }
.acct-copy-btn { background:none; border:none; cursor:pointer; font-size:0.85rem; padding:2px; opacity:0.7; }
.acct-copy-btn:hover { opacity:1; }
.acct-cred-note { margin-top:8px; font-size:0.76rem; color:var(--text-muted); background:#fff; padding:6px 10px; border-radius:6px; }
.acct-cred-elapsed { margin-top:8px; font-size:0.76rem; color:var(--primary-color); font-weight:600; }
.acct-req-status { margin-top:10px; padding:8px 12px; border-radius:8px; font-size:0.78rem; font-weight:600; }
.acct-req-pending { background:rgba(245,158,11,0.1); color:#b45309; }
.acct-req-done { background:rgba(16,185,129,0.1); color:#059669; }
.acct-req-rejected { background:rgba(239,68,68,0.1); color:#dc2626; }
.acct-sub-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.acct-sub-actions .btn { flex:1; min-width:140px; justify-content:center; }

/* ── Subscription refill & replacement card improvements ── */
.acct-sub-card { transition:box-shadow 0.2s; }
.acct-sub-card-header strong { font-size:1rem; color:var(--text-dark); }
.acct-sub-details span { display:inline-flex; align-items:center; gap:4px; background:var(--bg-light); padding:4px 10px; border-radius:6px; font-size:0.78rem; }
.acct-cred-val code { font-family:var(--font-body); font-weight:600; letter-spacing:0.02em; }
.acct-cred-box .acct-copy-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--bg-card); border:1px solid var(--border-color); }
.acct-cred-box .acct-copy-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }

.acct-profile-form { max-width:520px; }
.acct-profile-avatar { text-align:center; margin-bottom:20px; }
.acct-profile-avatar .account-avatar-large { width:64px; height:64px; font-size:1.6rem; margin:0 auto; }

/* ── Product card heart button ── */
.product-fav-btn {
    position: absolute; top:8px; right:8px; z-index:2;
    width:34px; height:34px; border-radius:50%;
    border:none; background:rgba(255,255,255,0.85);
    backdrop-filter:blur(4px); cursor:pointer;
    font-size:1.05rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:transform 0.2s ease, background 0.2s ease;
}
.product-fav-btn:hover { transform:scale(1.15); background:#fff; }
.product-fav-btn:active { transform:scale(0.95); }

/* ── Favorites grid ── */
.acct-fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.acct-fav-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--transition);
}
.acct-fav-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), 0.2); }
.acct-fav-card img { width:100%; height:140px; object-fit:cover; }
.acct-fav-card-body { padding:12px 14px; }
.acct-fav-card-body h4 { margin:0; font-size:0.88rem; color:var(--text-dark); }
.acct-fav-card-body .fav-price { font-size:0.95rem; font-weight:800; color:var(--primary-color); margin:4px 0 10px; }
.acct-fav-card-body .fav-actions { display:flex; gap:8px; }
.acct-fav-card-body .fav-actions .btn { flex:1; justify-content:center; font-size:0.75rem; padding:7px; }

/* ── Cart page ── */
.acct-cart-wrap { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; overflow:hidden; }
.acct-cart-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border-bottom:1px solid var(--border-color);
}
.acct-cart-item:last-child { border-bottom:none; }
.acct-cart-item img { width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.acct-cart-item-info { flex:1; min-width:0; }
.acct-cart-item-info h4 { margin:0; font-size:0.88rem; color:var(--text-dark); }
.acct-cart-item-info .cart-item-price { font-size:0.85rem; font-weight:700; color:var(--primary-color); margin-top:2px; }
.acct-cart-item-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.acct-cart-item-actions .qty-btn {
    width:30px; height:30px; border-radius:6px;
    border:1px solid var(--border-color); background:var(--bg-light);
    font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-weight:700; color:var(--text-dark); transition:var(--transition-fast);
}
.acct-cart-item-actions .qty-btn:hover { border-color:var(--primary-color); color:var(--primary-color); }
.acct-cart-item-actions .qty-val { font-weight:700; font-size:0.9rem; min-width:24px; text-align:center; }
.acct-cart-item-actions .remove-btn {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:0.85rem; padding:6px; transition:var(--transition-fast);
}
.acct-cart-item-actions .remove-btn:hover { color:#ef4444; }
.acct-cart-summary {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px;
    padding:18px 20px; margin-top:14px; max-width:380px;
}
.acct-cart-total-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:0.9rem; }
.acct-cart-total-row:last-of-type { border-top:1px solid var(--border-color); padding-top:12px; margin-top:4px; font-size:1.05rem; }
.acct-cart-total-row strong { color:var(--primary-color); }

/* ── Currency selector in dashboard topbar ── */
.currency-selector-topbar select {
    border:1px solid var(--border-color); border-radius:8px;
    padding:5px 10px; font-size:0.8rem; background:var(--bg-card);
    color:var(--text-dark); cursor:pointer; outline:none;
    transition:var(--transition-fast);
}
.currency-selector-topbar select:hover { border-color:var(--primary-color); }
.currency-selector-topbar select:focus { border-color:var(--primary-color); box-shadow:0 0 0 2px rgba(var(--primary-rgb),0.15); }

.account-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.account-empty a:not(.btn) { color:var(--primary-color); text-decoration:underline; cursor:pointer; }
.account-empty p { margin:0 0 14px; max-width:26ch; }
.account-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-size: 1.5rem;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
}

/* When empty state is inside a <td>, the cell must center it */
.acct-table td.account-empty-cell {
    text-align: center;
    padding: 0;
}
/* The wrapper div that app.js injects goes here */
.acct-table td .account-empty {
    padding: 70px 24px;
    margin: 0 auto;
}
.acct-table td .account-empty-icon { margin: 0 auto 16px; }
.acct-skeleton { padding:0; }
.acct-skeleton .sk-row { height:44px; border-radius:8px; margin-bottom:8px; background:linear-gradient(90deg,var(--border-color) 25%,rgba(148,163,184,0.15) 37%,var(--border-color) 63%); background-size:400% 100%; animation:sk-shimmer 1.3s ease infinite; }
@keyframes sk-shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.acct-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.acct-pager-btn { width:34px; height:34px; border-radius:8px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-dark); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:var(--transition-fast); }
.acct-pager-btn:hover:not(:disabled) { border-color:var(--primary-color); color:var(--primary-color); }
.acct-pager-btn:disabled { opacity:0.4; cursor:not-allowed; }
.acct-pager-info { font-size:0.82rem; color:var(--text-muted); font-weight:600; }

@media (max-width:1024px) {
    .acct-stats-grid { grid-template-columns:repeat(2,1fr); }
    .acct-dash-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .account-sidebar { width:210px; }
    .account-main-scroll { padding:20px 16px; }
    .account-topbar { padding:0 16px; gap:8px; }
    .account-topbar-link { padding:0 10px; }
    .account-topbar-link span { display:none; }
    .account-hero { flex-direction:column; align-items:flex-start; gap:12px; }
    .account-hero-since { text-align:left; }
    .acct-actions-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
    .account-sidebar {
        position:fixed; left:-280px; top:0; bottom:0; z-index:100;
        transition:left .25s ease; width:260px; height:100vh;
        flex-direction:column; flex-wrap:nowrap; padding:0;
        box-shadow:4px 0 30px rgba(0,0,0,0.3);
    }
    .account-sidebar.open { left:0; }
    .account-sidebar-nav { flex-direction:column; flex-wrap:nowrap; }
    .account-nav-label { display:block; }
    .account-nav-badge { display:inline-flex; }
    .account-user-badge { margin:0 14px 8px; padding:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); }
    .account-sidebar-footer { border-top:1px solid rgba(255,255,255,0.07); padding:14px; }
    .account-logout-btn span { display:inline; }
    .account-portal-inner { flex-direction:column; }
    body[data-page="dashboard"] .account-portal-inner { height:100vh; min-height:100vh; }
    body[data-page="dashboard"] .account-main-scroll { overflow-y:auto; }
    /* Mobile sidebar backdrop */
    .account-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:99; }
    .account-sidebar-backdrop.show { display:block; }
    /* Hamburger button for mobile in topbar */
    .account-mobile-toggle { display:inline-flex !important; }
}

@media (max-width:600px) {
    .account-main-scroll { padding:16px; }
    .acct-stats-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .acct-stat-card { padding:14px; gap:12px; }
    .acct-stat-icon { width:40px; height:40px; font-size:1rem; }
    .acct-stat-info h3 { font-size:1.2rem; }
    .acct-actions-grid { grid-template-columns:1fr; }
    .acct-sub-details { flex-direction:column; gap:6px; }
    .account-topbar-link span { display:none; }
    .account-hero { flex-direction:column; align-items:flex-start; gap:12px; }
    .account-hero-since { text-align:left; }
}

@media (max-width:420px) {
    .acct-stats-grid { grid-template-columns:1fr; gap:10px; }
    .acct-stat-card { padding:12px; }
    .account-hero { padding:18px 16px; }
    .acct-panel { padding:14px; }
    .account-main-scroll { padding:12px; }
    .account-topbar { padding:0 12px; height:56px; }
    .acct-sub-card { padding:14px; }
}

@media (max-width:767px) {
    /* Reflow dense Orders/Digital tables into stacked cards so they don't
       force horizontal scroll on phones. Cells expose their column name via
       data-label (set in app.js) shown as a leading caption.
       (This block's @media opener was missing, so the phone card layout was
       also being applied to desktop — hidden <thead> and all. Restored to
       phones only; wide screens get the real table the styles above define.) */
    .acct-table-wrap { border:none; background:transparent; overflow:visible; }
    .acct-table, .acct-table tbody, .acct-table tr, .acct-table td { display:block; width:100%; }
    .acct-table thead { display:none; }
    .acct-table tr {
        background:var(--bg-card);
        border:1px solid var(--border-color);
        border-radius:var(--radius-md);
        box-shadow:var(--shadow-sm);
        padding:6px 14px;
        margin-bottom:12px;
    }
    .acct-table td {
        border:none;
        padding:8px 0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        text-align:right;
    }
    .acct-table td:not(:last-child) { border-bottom:1px solid var(--border-color); }
    .acct-table td::before {
        content:attr(data-label);
        font-size:0.68rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.05em;
        color:var(--text-muted);
        text-align:left;
    }
    .acct-table td[data-label=""]::before { content:none; }
    /* The Items/Product cell holds a comma-separated run of titles with inline
       type badges. As a flex row each text run and badge became its own column,
       so a two-item order wrapped into four narrow stacks ~400px tall. Stack
       the caption above the content instead and let it flow as normal text. */
    .acct-table td[data-label="Items"],
    .acct-table td[data-label="Product"] {
        display:block;
        text-align:left;
        line-height:1.5;
    }
    .acct-table td[data-label="Items"]::before,
    .acct-table td[data-label="Product"]::before {
        display:block;
        margin-bottom:3px;
    }
}

/* ============================================================
   SUBSCRIPTIONS CATALOG SECTION
   ============================================================ */
.subscriptions-section { padding:60px 0; }
.subscriptions-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-top:24px; }
.sub-card-plan { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:24px; text-align:center; transition:var(--transition); position:relative; overflow:hidden; }
.sub-card-plan:hover { border-color:var(--primary-color); box-shadow:0 8px 30px rgba(var(--primary-rgb),0.1); transform:translateY(-2px); }
.sub-card-plan.featured { border-color:var(--primary-color); box-shadow:0 0 0 2px var(--primary-color); }
.sub-card-plan .popular-badge { position:absolute; top:12px; right:-28px; background:var(--primary-color); color:#fff; font-size:0.6rem; font-weight:700; padding:4px 32px; transform:rotate(45deg); }
.sub-card-plan .plan-icon { font-size:2rem; margin-bottom:10px; }
.sub-card-plan h3 { font-size:1.05rem; font-weight:800; margin:0 0 6px; }
.sub-card-plan .plan-price { font-size:1.8rem; font-weight:800; color:var(--primary-color); margin:10px 0; }
.sub-card-plan .plan-price small { font-size:0.8rem; color:var(--text-muted); font-weight:600; }
.sub-card-plan .plan-desc { font-size:0.84rem; color:var(--text-muted); margin-bottom:14px; }
.sub-card-plan .plan-features { text-align:left; font-size:0.82rem; list-style:none; padding:0; margin:0 0 16px; }
.sub-card-plan .plan-features li { padding:5px 0; display:flex; align-items:center; gap:8px; }
.sub-card-plan .plan-features li::before { content:'✓'; color:var(--primary-color); font-weight:800; }
.sub-card-plan .btn { width:100%; }

/* ============================================================
   CMS PAGE / POLICY CONTENT
   Applied to admin-authored page content (sanitized server-side)
   and to policy text. Provides sensible default typography so even
   plain-text pages read well, while allowing rich HTML to style itself.
   ============================================================ */
.cms-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-dark);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.cms-content > *:first-child { margin-top: 0; }
.cms-content > *:last-child { margin-bottom: 0; }
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
    color: var(--text-dark);
}
.cms-content h1 { font-size: 1.75rem; }
.cms-content h2 { font-size: 1.4rem; }
.cms-content h3 { font-size: 1.15rem; }
.cms-content h4 { font-size: 1rem; }
.cms-content p { margin: 0 0 1em; }
.cms-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cms-content a:hover { color: var(--primary-hover); }
.cms-content ul,
.cms-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.cms-content li { margin: 0.35em 0; }
.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 0.5em 0;
}
.cms-content blockquote {
    margin: 1em 0;
    padding: 0.6em 1.1em;
    border-left: 4px solid var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
}
.cms-content pre {
    background: var(--text-dark);
    color: #f1f5f9;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 0 0 1em;
}
.cms-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: rgba(var(--primary-rgb), 0.08);
    padding: 0.12em 0.4em;
    border-radius: 4px;
}
.cms-content pre code { background: none; padding: 0; }
.cms-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 0.9rem;
}
.cms-content th,
.cms-content td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
}
.cms-content th { background: var(--bg-light); font-weight: 700; }
.cms-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5em 0;
}

/* ============================================================
   MOBILE HEADER FIT
   The header row is logo + actions + hamburger. The logo block
   was flex-shrink:0 with a nowrap title, so on narrow screens a
   store name of any length pushed the hamburger past the right
   edge and the mobile menu became unreachable. These rules only
   tighten spacing and let a long name ellipsize — desktop is
   untouched, and both themes inherit the fix.
   ============================================================ */
@media (max-width: 860px) {
    #main-header .container {
        gap: 6px;
        padding: 0 12px;
    }
    /* Let the brand give up space instead of shoving the menu off-screen */
    .logo-container {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }
    .header-actions {
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }
    .account-trigger,
    .cart-trigger { padding: 8px 10px; }
    .mobile-menu-btn { flex-shrink: 0; }
}

@media (max-width: 560px) {
    #main-header .container { gap: 4px; padding: 0 10px; }
    .logo-text { max-width: 34vw; font-size: 1.05rem; }
    .logo-img { height: 30px; }
    .header-actions { gap: 4px; }
    .account-trigger,
    .cart-trigger { padding: 7px 8px; }
    .currency-toggle { padding: 3px; }
    .currency-toggle-btn { padding: 5px 8px; font-size: 0.68rem; }
    .mobile-menu-btn { padding: 6px 4px; }
}

/* ============================================================
   MOBILE HEADER TAP TARGETS
   The rules above deliberately shrink the header controls so a long
   store name can't push the hamburger off-screen — which leaves them
   ~34px tall, under the ~44px a thumb reliably hits. Growing them
   would undo that fit, so each control gets a centred transparent
   44px pad instead: the hit area grows, the drawn button and the
   header layout are untouched. The pads meet in the middle of the
   4px gap between buttons, so no control steals another's area.
   ============================================================ */
@media (max-width: 767px) and (pointer: coarse), (max-width: 560px) {
    .account-trigger,
    .cart-trigger,
    .mobile-menu-btn { position: relative; }
    .account-trigger::after,
    .cart-trigger::after,
    .mobile-menu-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        border-radius: inherit;
    }
}

/* ============================================================
   MOBILE CART DRAWER
   On desktop the drawer is two independent scroll panes: the item
   list takes the leftover flex space and the summary is capped at
   100vh - 240px. On a phone that cap always wins, so the item list
   is squeezed to ~167px no matter how tall the screen is and the
   shopper reviews their bag through a one-item slot while the
   checkout form scrolls separately underneath. Below 767px the
   whole drawer becomes a single natural scroll with a pinned
   header instead. Desktop is untouched.
   ============================================================ */
@media (max-width: 767px) {
    .cart-drawer {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cart-header {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--bg-card);
    }
    .cart-items-list {
        flex: 0 0 auto;
        overflow-y: visible;
        min-height: 0;
    }
    .cart-summary {
        max-height: none;
        overflow-y: visible;
    }
    /* Comfortable thumb targets inside the drawer */
    .qty-btn { width: 40px; height: 40px; }
    .close-btn { width: 40px; height: 40px; }
    .cart-item-remove { width: 36px; height: 36px; }
}

/* ============================================================
   MOBILE FORM CONTROLS — NO FOCUS ZOOM
   iOS Safari zooms the whole page whenever a focused field's text
   is smaller than 16px, which throws the checkout out of frame
   mid-typing and needs a manual pinch to recover. The form text is
   14px, so every control gets 16px on phones. Heights are left to
   grow with the text, which also buys a few pixels of tap target.
   ============================================================ */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea { font-size: 16px; }
}

/* The sidebar only goes off-canvas below 861px (see the max-width:860px block,
   which is also where the author switches this button on). The catch-all icon
   rule above forces display with !important, though, so the hamburger also sat
   in the desktop topbar next to an already-visible sidebar, where tapping it
   does nothing. Hide it wherever the sidebar is static. */
@media (min-width: 861px) {
    .account-mobile-toggle { display: none !important; }
}

/* ============================================================
   ACCOUNT PORTAL — PHONE TOUCH TARGETS
   The portal's chrome is sized for a mouse: 34px icon buttons in
   the topbar, a 34px pager, a 28px copy button and 30px quantity
   steppers. On a phone those are all under the ~40px a thumb
   reliably hits, and the topbar ones sit right at the top edge
   where mis-taps are most likely. Sizes only — no layout,
   colour or desktop behaviour changes.
   ============================================================ */
@media (max-width: 767px) {
    /* !important mirrors the base rule for these two, which locks 34px the
       same way to beat .btn — without it the phone size would never land. */
    .account-mobile-toggle,
    #account-back-btn { width: 40px !important; height: 40px !important; }
    .account-close-btn { width: 40px; height: 40px; }
    .account-topbar-link { min-width: 40px; height: 40px; }
    .currency-selector-topbar select { padding: 9px 10px; min-height: 40px; }
    .acct-pager-btn { width: 40px; height: 40px; }
    .acct-panel-link { padding: 8px 0 8px 12px; margin: -8px 0; }
    .acct-cred-box .acct-copy-btn { width: 36px; height: 36px; }
    .acct-cart-item-actions .qty-btn { width: 36px; height: 36px; }
    .acct-cart-item-actions .remove-btn { padding: 10px; margin: -4px; }
    .acct-fav-card-body .fav-actions .btn { padding: 10px 8px; }
    .auth-modal-close { width: 40px; height: 40px; }
}