/* ============================================
   ABIGAEL COLLECTIONS - Fashion Boutique Platform
   Color Palette: Pink (#EC4899, #DB2777) + Dark (#1C1917, #292524)
   ============================================ */

/* === CSS Variables === */
:root {
    --primary-blue: #DB2777;
    --primary-blue-light: #EC4899;
    --primary-blue-lighter: #F472B6;
    --primary-blue-pale: #FCE7F3;
    --primary-blue-50: #FDF2F8;
    --primary-red: #DB2777;
    --primary-red-light: #EC4899;
    --primary-red-pale: #FCE7F3;
    --primary-red-dark: #BE185D;
    --gradient-primary: linear-gradient(135deg, #DB2777 0%, #EC4899 100%);
    --gradient-accent: linear-gradient(135deg, #BE185D 0%, #DB2777 100%);
    --gradient-hero: linear-gradient(135deg, #1C1917 0%, #292524 50%, #DB2777 100%);
    --text-dark: #111827;
    --text-medium: #374151;
    --text-light: #6B7280;
    --text-lighter: #9CA3AF;
    --bg-white: #FFFFFF;
    --bg-light: #F9FAFB;
    --bg-gray: #F3F4F6;
    --border-light: #E5E7EB;
    --border-medium: #D1D5DB;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --transition: all 0.3s ease;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-sans);
    color: var(--text-dark);
    background: var(--bg-white);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

main {
    flex: 1;
}

/* === Container === */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === Top Bar === */
.top-bar {
    background: var(--primary-blue);
    color: white;
    padding: 8px 0;
    font-size: 13px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar a {
    color: white;
    opacity: 0.9;
}

.top-bar a:hover {
    opacity: 1;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-right a {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === Header / Navbar === */
.header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 24px;
}

/* === Logo === */
.logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.logo-esio {
    color: var(--primary-blue);
}

.logo-med {
    color: var(--primary-red);
}

.logo-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
    margin-left: 2px;
    animation: pulse-dot 2s infinite;
}

.logo-name {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.logo-name .logo-esio {
    color: var(--primary-red);
}

.logo-name .logo-med {
    color: var(--text-dark);
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    margin-right: 8px;
    position: relative;
}

.logo-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* === Search Bar === */
.search-bar {
    flex: 1;
    max-width: 560px;
    position: relative;
}

.search-bar form {
    display: flex;
    align-items: center;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: var(--transition);
}

.search-bar form:focus-within {
    border-color: var(--primary-blue-light);
    box-shadow: 0 0 0 3px var(--primary-blue-pale);
}

.search-bar input {
    flex: 1;
    padding: 10px 20px;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.search-bar button {
    padding: 10px 20px;
    background: var(--gradient-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.search-bar button:hover {
    opacity: 0.9;
}

.search-bar button svg {
    width: 18px;
    height: 18px;
}

/* === Nav Actions === */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-medium);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

.nav-action-btn:hover {
    background: var(--bg-gray);
    color: var(--primary-blue);
}

.nav-action-btn svg {
    width: 20px;
    height: 20px;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    background: var(--primary-red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* === Category Nav === */
.category-nav {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.category-nav .container {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-nav .container::-webkit-scrollbar {
    display: none;
}

.category-nav a {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-medium);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.category-nav a:hover,
.category-nav a.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* === Mobile Menu Toggle === */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-dark);
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* === Hero Section === */
.hero {
    background: var(--gradient-hero);
    padding: 60px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}

.hero-slide .container {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.hero-content {
    flex: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 500px;
    line-height: 1.7;
}

.hero-image {
    flex: 1;
    max-width: 480px;
    max-height: 380px;
    display: flex;
    align-items: center;
}

.hero-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-height: 380px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

.btn-red {
    background: var(--gradient-accent);
    color: white;
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.4);
}

.btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(194, 65, 12, 0.5);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

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

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

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

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-sm {
    padding: 8px 18px;
    font-size: 13px;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* === Section Styles === */
.section {
    padding: 60px 0;
}

.section-gray {
    background: var(--bg-gray);
}

.section-blue {
    background: var(--primary-blue-50);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.section-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.section-header a {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-header a:hover {
    gap: 8px;
}

/* === Category Grid === */
.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.category-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    text-align: center;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-blue-lighter);
}

.category-card-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

.category-card:hover .category-card-image img {
    transform: scale(1.02);
}

.category-card-body {
    padding: 14px 12px;
}

.category-card-body h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

/* === Product Grid === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.product-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-sale {
    background: var(--primary-red);
    color: white;
}

.badge-new {
    background: var(--primary-blue);
    color: white;
}

.badge-prescription {
    background: #F59E0B;
    color: white;
}

.badge-out-of-stock {
    background: var(--text-light);
    color: white;
}

.product-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

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

.product-card-body {
    padding: 16px;
}

.product-card-category {
    font-size: 12px;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.product-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-name a:hover {
    color: var(--primary-blue);
}

.product-card-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.price-current {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-red);
}

.price-original {
    font-size: 14px;
    color: var(--text-lighter);
    text-decoration: line-through;
}

.price-normal {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.btn-add-cart {
    padding: 10px;
    background: var(--primary-blue-50);
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue-pale);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.btn-add-cart:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.btn-add-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-add-cart svg {
    width: 16px;
    height: 16px;
}

.btn-buy-now {
    flex: 1;
    padding: 10px 8px;
    background: #DB2777;
    color: white;
    border: 1px solid #DB2777;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-buy-now:hover {
    background: #BE185D;
    border-color: #BE185D;
}

.product-card-footer {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 0 12px 12px;
}

.product-card-footer .btn-add-cart {
    flex: 1;
    margin-top: 0;
}

.product-card-footer .btn-add-cart:only-child {
    flex: 1 1 100%;
}

/* === Features Strip === */
.features-strip {
    background: var(--bg-white);
    padding: 40px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon.blue {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.feature-icon.red {
    background: var(--primary-red-pale);
    color: var(--primary-red);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.feature-text p {
    font-size: 12px;
    color: var(--text-light);
}

/* === Banner Section === */
.promo-banners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.promo-banner {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    height: 200px;
}

.promo-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28,25,23,0.85), rgba(234,88,12,0.75));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    color: white;
}

.promo-banner-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.promo-banner-overlay p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
}

/* === CTA Section === */
.cta-section {
    background: var(--gradient-hero);
    padding: 80px 0;
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
}

.cta-section p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* === Footer === */
.footer {
    background: #1C1917;
    color: white;
    padding: 60px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-brand .logo .logo-esio {
    color: white;
}

.footer-brand .logo .logo-med {
    color: #F472B6;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.75);
}

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

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
}

.footer-social a:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.footer-social a svg {
    width: 18px;
    height: 18px;
}

.footer-column h4 {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    transition: var(--transition);
}

.footer-column ul li a:hover {
    color: white;
    padding-left: 4px;
}

.footer-bottom {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.footer-bottom p {
    color: rgba(255,255,255,0.5);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.5);
}

.footer-bottom-links a:hover {
    color: white;
}

/* === Products Page === */
.page-header {
    background: var(--gradient-primary);
    padding: 40px 0;
    color: white;
}

.page-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-header .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.8;
}

.page-header .breadcrumb a {
    color: white;
    opacity: 0.8;
}

.page-header .breadcrumb a:hover {
    opacity: 1;
}

.products-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 40px 0;
}

/* === Sidebar Filters === */
.sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.filter-group {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.filter-group h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.filter-group ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-medium);
    transition: var(--transition);
}

.filter-group ul li a:hover,
.filter-group ul li a.active {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.filter-group ul li a .count {
    font-size: 12px;
    color: var(--text-lighter);
    background: var(--bg-gray);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* === Sort Bar === */
.sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 12px 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.sort-bar .results-count {
    font-size: 14px;
    color: var(--text-light);
}

.sort-bar .results-count strong {
    color: var(--text-dark);
}

.sort-bar select {
    padding: 8px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-medium);
    background: var(--bg-white);
    cursor: pointer;
    outline: none;
}

.sort-bar select:focus {
    border-color: var(--primary-blue-light);
}

/* === Product Detail === */
.product-detail {
    padding: 40px 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

.product-detail-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-gray);
    aspect-ratio: 1;
}

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

.product-detail-info h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-detail-category {
    font-size: 14px;
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: 16px;
}

.product-detail-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.product-detail-price .price-current {
    font-size: 32px;
}

.product-detail-price .price-original {
    font-size: 20px;
}

.product-detail-price .discount-badge {
    background: var(--primary-red-pale);
    color: var(--primary-red);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
}

.product-detail-description {
    margin-bottom: 24px;
}

.product-detail-description h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.product-detail-description p {
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.7;
}

.product-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-gray);
    border-radius: var(--radius-md);
}

.meta-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary-blue);
}

.meta-item span {
    font-size: 13px;
    color: var(--text-medium);
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
}

.quantity-selector button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-light);
    background: var(--bg-gray);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.quantity-selector button:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.quantity-selector button:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.quantity-selector button:hover {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.quantity-selector input {
    width: 60px;
    height: 44px;
    border: 1px solid var(--border-light);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    outline: none;
}

.product-detail-actions {
    display: flex;
    gap: 12px;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.stock-status.in-stock {
    color: #16A34A;
}

.stock-status.out-of-stock {
    color: var(--primary-red);
}

.stock-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.stock-status.in-stock .dot {
    background: #16A34A;
}

.stock-status.out-of-stock .dot {
    background: var(--primary-red);
}

/* === Cart Page === */
.cart-page {
    padding: 40px 0 72px;
    background:
        radial-gradient(circle at top left, rgba(219, 39, 119, 0.08), transparent 28%),
        linear-gradient(180deg, #fff8fb 0%, #ffffff 28%);
}

.cart-shell {
    display: grid;
    gap: 24px;
}

.cart-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.cart-eyebrow {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.05);
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cart-intro h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #111827;
}

.cart-intro p {
    margin: 10px 0 0;
    color: #6B7280;
    font-size: 15px;
}

.cart-continue-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 999px;
    background: #FFFFFF;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: var(--transition);
}

.cart-continue-link:hover {
    border-color: #DB2777;
    color: #DB2777;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.cart-main {
    display: grid;
    gap: 18px;
}

.cart-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 28px;
    background: #111827;
    color: #FFFFFF;
    box-shadow: 0 24px 50px rgba(17, 24, 39, 0.16);
}

.cart-highlight-label {
    display: inline-flex;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cart-highlight p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.cart-highlight-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.cart-page .cart-items {
    display: grid;
    gap: 14px;
}

.cart-page .cart-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 20px 45px rgba(17, 24, 39, 0.05);
}

.cart-page .cart-item-image {
    width: 150px;
    height: 180px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
}

.cart-page .cart-item-image a,
.cart-page .cart-item-image-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.cart-page .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-page .cart-item-body {
    display: flex;
    min-width: 0;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
}

.cart-page .cart-item-copy {
    min-width: 0;
}

.cart-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.cart-item-category,
.cart-item-variant {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #F9FAFB;
    color: #4B5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-item-variant {
    background: rgba(219, 39, 119, 0.10);
    color: #BE185D;
}

.cart-page .cart-item-copy h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

.cart-page .cart-item-copy h3 a:hover {
    color: #DB2777;
}

.cart-item-price {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.03em;
}

.cart-item-actions {
    display: grid;
    justify-items: end;
    gap: 18px;
    flex-shrink: 0;
}

.cart-page .cart-item-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 999px;
    overflow: hidden;
    background: #FFFFFF;
}

.cart-page .cart-item-quantity button {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
}

.cart-page .cart-item-quantity button:hover {
    background: rgba(219, 39, 119, 0.08);
    color: #DB2777;
}

.cart-page .cart-item-quantity span {
    display: flex;
    min-width: 44px;
    height: 42px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}

.cart-page .cart-item-remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 999px;
    background: #FFFFFF;
    color: #6B7280;
    cursor: pointer;
    transition: var(--transition);
}

.cart-page .cart-item-remove:hover {
    border-color: rgba(219, 39, 119, 0.28);
    background: rgba(219, 39, 119, 0.06);
    color: #DB2777;
}

.cart-page .cart-item-remove svg {
    width: 16px;
    height: 16px;
}

.cart-page-summary {
    position: sticky;
    top: 100px;
}

.cart-summary-card {
    padding: 28px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 24px 50px rgba(17, 24, 39, 0.08);
}

.cart-summary-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.cart-summary-label {
    display: inline-flex;
    margin-bottom: 8px;
    color: #9CA3AF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cart-summary-card-head h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    color: #111827;
    letter-spacing: -0.03em;
}

.cart-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.05);
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-summary-rows {
    display: grid;
    gap: 14px;
}

.cart-page-summary .cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    color: #374151;
}

.cart-summary-note {
    color: #059669;
    font-weight: 600;
}

.cart-page-summary .cart-summary-row.total {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.cart-page-summary .cart-summary-row.total .amount {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111827;
}

.cart-checkout-btn {
    margin-top: 24px;
    border-radius: 999px;
}

.cart-secondary-btn {
    margin-top: 10px;
    border-radius: 999px;
}

.cart-support-note {
    display: grid;
    gap: 6px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    color: #6B7280;
    font-size: 13px;
    line-height: 1.5;
}

.cart-support-note strong {
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* === Cart Empty === */
.cart-empty {
    text-align: center;
    padding: 80px 20px;
}

.cart-empty svg {
    width: 80px;
    height: 80px;
    color: var(--text-lighter);
    margin-bottom: 20px;
}

.cart-empty h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cart-empty p {
    color: var(--text-light);
    margin-bottom: 24px;
}

/* === Checkout Page === */
.checkout-page {
    padding: 40px 0;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
}

.checkout-form {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.checkout-form h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.form-group label .required {
    color: var(--primary-red);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

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

.form-control::placeholder {
    color: var(--text-lighter);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.radio-group {
    display: flex;
    gap: 12px;
}

.radio-option {
    flex: 1;
    position: relative;
}

.radio-option input {
    position: absolute;
    opacity: 0;
}

.radio-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.radio-option input:checked + label {
    border-color: var(--primary-blue);
    background: var(--primary-blue-50);
}

.radio-option label svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

.radio-option input:checked + label svg {
    color: var(--primary-blue);
}

.radio-option label .radio-title {
    font-weight: 600;
    font-size: 14px;
}

.radio-option label .radio-desc {
    font-size: 12px;
    color: var(--text-light);
}

/* === Delivery Method Collapsible === */
.delivery-method-section {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.delivery-method-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-white);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.delivery-method-toggle:hover,
.delivery-method-toggle.open {
    background: var(--primary-blue-50);
}

.delivery-toggle-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.delivery-toggle-left svg {
    flex-shrink: 0;
    color: var(--primary-red);
}

.delivery-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: var(--text-light);
}

.delivery-method-panel {
    border-top: 1px solid var(--border-light);
    background: var(--bg-white);
}

.delivery-zones-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delivery-zone-item {
    position: relative;
}

.delivery-zone-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.delivery-zone-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-light);
}

.delivery-zone-label:hover {
    border-color: var(--primary-blue-lighter);
    background: var(--primary-blue-50);
}

.delivery-zone-item input:checked + .delivery-zone-label {
    border-color: var(--primary-blue);
    background: var(--primary-blue-50);
}

.delivery-zone-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.delivery-zone-item input:checked + .delivery-zone-label .delivery-zone-icon {
    background: var(--primary-blue-pale);
    border-color: var(--primary-blue-lighter);
    color: var(--primary-red);
}

.delivery-zone-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-zone-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.delivery-zone-desc {
    font-size: 12px;
    color: var(--text-light);
}

.delivery-zone-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: var(--transition);
}

.delivery-zone-item input:checked + .delivery-zone-label .delivery-zone-check {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: white;
}

/* === Mpesa Section === */
.mpesa-section {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-top: 24px;
}

.mpesa-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.mpesa-logo {
    width: 32px;
    height: 32px;
    background: var(--gradient-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 800;
}

/* === Payment Page === */
.payment-page {
    padding: 60px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.payment-container {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.payment-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    box-shadow: var(--shadow-lg);
}

.payment-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-icon.pending {
    background: #FEF3C7;
    color: #D97706;
}

.payment-icon.success {
    background: #D1FAE5;
    color: #059669;
}

.payment-icon.failed {
    background: var(--primary-red-pale);
    color: var(--primary-red);
}

.payment-icon svg {
    width: 40px;
    height: 40px;
}

.payment-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.payment-card p {
    color: var(--text-light);
    margin-bottom: 24px;
    font-size: 15px;
}

.payment-amount {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.payment-phone {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 32px;
}

.payment-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

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

.payment-status-text {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.payment-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === Receipt Page === */
.receipt-page {
    padding: 40px 0;
    background: #F3F4F6;
}

.receipt-container {
    max-width: 720px;
    margin: 0 auto;
}

.receipt-card {
    background: var(--bg-white);
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.receipt-header {
    background: var(--bg-white);
    color: var(--text-dark);
    padding: 40px 40px 0;
    text-align: left;
    border-bottom: none;
}

.receipt-letterhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--text-dark);
}

.receipt-letterhead-left .logo {
    font-size: 24px;
    margin-bottom: 8px;
}

.receipt-letterhead-left p {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.6;
}

.receipt-letterhead-right {
    text-align: right;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.6;
}

.receipt-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.receipt-title-row h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
}

.receipt-title-row .receipt-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

.receipt-status.paid {
    background: #D1FAE5;
    color: #065F46;
}

.receipt-status.pending {
    background: #FEF3C7;
    color: #92400E;
}

.receipt-header .receipt-meta {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.receipt-header .logo .logo-esio {
    color: var(--text-dark);
}

.receipt-header .logo .logo-med {
    color: var(--primary-red);
}

.receipt-success-icon {
    display: none;
}

.receipt-body {
    padding: 0 40px 32px;
}

.receipt-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
    padding: 20px;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.receipt-info-item {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.receipt-info-item label {
    display: block;
    font-size: 11px;
    color: var(--text-lighter);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    font-weight: 600;
}

.receipt-info-item span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.receipt-table thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    background: transparent;
    border-bottom: 2px solid var(--text-dark);
}

.receipt-table thead th:last-child {
    text-align: right;
}

.receipt-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-medium);
}

.receipt-table tbody td:first-child {
    font-weight: 500;
    color: var(--text-dark);
}

.receipt-table tbody td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--text-dark);
}

.receipt-totals {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 280px;
    margin-left: auto;
}

.receipt-totals .row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-medium);
}

.receipt-totals .row.total {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid var(--text-dark);
}

.receipt-totals .row.total .amount {
    color: var(--text-dark);
}

.receipt-footer {
    text-align: left;
    padding: 24px 40px 32px;
    border-top: 1px solid var(--border-light);
    background: #F9FAFB;
}

.receipt-footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}

.receipt-footer p {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 0;
}

.receipt-footer .receipt-footer-note {
    font-size: 11px;
    color: var(--text-lighter);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.receipt-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* === Track Order === */
.track-order-page {
    padding: 60px 0;
}

.track-form {
    max-width: 500px;
    margin: 0 auto 40px;
    text-align: center;
}

.track-form h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.track-form p {
    color: var(--text-light);
    margin-bottom: 24px;
}

.track-form form {
    display: flex;
    gap: 12px;
}

.track-form .form-control {
    flex: 1;
}

.order-timeline {
    max-width: 600px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-gray);
    color: var(--text-lighter);
}

.timeline-dot.active {
    background: var(--primary-blue);
    color: white;
}

.timeline-dot.completed {
    background: #16A34A;
    color: white;
}

.timeline-dot svg {
    width: 18px;
    height: 18px;
}

.timeline-content h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    padding-top: 8px;
}

.timeline-content p {
    font-size: 13px;
    color: var(--text-light);
}

/* === 404 Page === */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.error-page h1 {
    font-size: 120px;
    font-weight: 900;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.error-page h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.error-page p {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 32px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* === About Page === */
.about-content {
    padding: 60px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}

.about-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-dark);
}

.about-text p {
    font-size: 16px;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: var(--primary-blue-50);
    border-radius: var(--radius-lg);
}

.stat-item .number {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-blue);
}

.stat-item .label {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

/* === Contact Page === */
.contact-content {
    padding: 60px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.contact-info-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-gray);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.contact-info-card .icon {
    width: 48px;
    height: 48px;
    background: var(--primary-blue-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-blue);
}

.contact-info-card .icon svg {
    width: 22px;
    height: 22px;
}

.contact-info-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-info-card p {
    font-size: 14px;
    color: var(--text-light);
}

/* === Pagination === */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination {
    display: flex;
    gap: 4px;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-light);
    color: var(--text-medium);
    transition: var(--transition);
}

.pagination a:hover {
    background: var(--primary-blue-50);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.pagination .active span {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === Toast Notification === */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideIn 0.3s ease;
    transition: var(--transition);
}

.toast.success {
    border-left: 4px solid #16A34A;
}

.toast.error {
    border-left: 4px solid var(--primary-red);
}

.toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #16A34A;
}

.toast.error .toast-icon {
    color: var(--primary-red);
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
}

.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-lighter);
    padding: 4px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* === Alert Messages === */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error {
    background: var(--primary-red-pale);
    color: var(--primary-red-dark);
    border: 1px solid #FECACA;
}

.alert-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

/* === Validation Errors === */
.validation-errors {
    background: var(--primary-red-pale);
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.validation-errors ul {
    list-style: disc;
    padding-left: 20px;
}

.validation-errors li {
    font-size: 13px;
    color: var(--primary-red-dark);
    margin-bottom: 4px;
}

.form-error {
    font-size: 12px;
    color: var(--primary-red);
    margin-top: 4px;
}

/* === WhatsApp Float === */
.whatsapp-float {
    position: fixed;
    bottom: 140px;
    right: 24px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: white;
}

/* === Mobile Menu Drawer === */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--bg-white);
    z-index: 9999;
    box-shadow: var(--shadow-xl);
    transition: left 0.3s ease;
    overflow-y: auto;
    display: none;
}

.mobile-menu.active {
    left: 0;
    display: block;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

.mobile-menu-header .logo {
    font-size: 22px;
}

.mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-medium);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.mobile-menu-close:hover {
    background: var(--bg-gray);
}

.mobile-menu-close svg {
    width: 22px;
    height: 22px;
}

.mobile-menu-body {
    padding: 12px 0;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-medium);
    transition: var(--transition);
}

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

.mobile-menu-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-menu-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 8px 20px;
}

.mobile-menu-label {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-lighter);
}

/* === Auth Pages === */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 480px;
}

.auth-card-header {
    padding: 0 0 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-card-header .logo {
    font-size: 24px;
    margin-bottom: 24px;
    width: 100%;
}

.auth-card-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
}

.auth-card-header .auth-header-links {
    font-size: 13px;
    color: var(--text-light);
    text-align: right;
    line-height: 1.6;
}

.auth-card-header .auth-header-links a {
    color: var(--primary-red);
    font-weight: 600;
}

.auth-card-header .auth-header-links a:hover {
    text-decoration: underline;
}

.auth-card-body {
    padding: 28px 0 0;
}

.auth-card-body .form-group {
    margin-bottom: 20px;
}

.auth-card-body .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-medium);
    margin-bottom: 6px;
    display: block;
}

.auth-card-body .form-control {
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 15px;
    width: 100%;
    transition: var(--transition);
    background: var(--bg-white);
}

.auth-card-body .form-control:focus {
    border-color: var(--primary-blue-light);
    box-shadow: 0 0 0 3px var(--primary-blue-pale);
    outline: none;
}

.auth-card-body .btn-primary {
    background: linear-gradient(135deg, #EC4899 0%, #F43F5E 100%);
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
    border-radius: var(--radius-full);
    padding: 14px 32px;
    font-size: 16px;
}

.auth-card-body .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.5);
}

.auth-card-footer {
    padding: 24px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
}

.auth-card-footer a {
    color: var(--primary-red);
    font-weight: 600;
}

.auth-card-footer a:hover {
    text-decoration: underline;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 13px;
}

.auth-links a {
    color: var(--primary-red);
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-medium);
}

.auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-blue);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    font-size: 13px;
    color: var(--text-lighter);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-password-toggle {
    position: relative;
}

.auth-password-toggle .form-control {
    padding-right: 44px;
}

.auth-password-toggle .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-lighter);
    padding: 4px;
}

.auth-password-toggle .toggle-password:hover {
    color: var(--text-medium);
}

.auth-password-toggle .toggle-password svg {
    width: 18px;
    height: 18px;
}

/* === Hero Slider === */
.hero-slider {
    position: relative;
    overflow: hidden;
}

.hero-slides {
    display: flex;
    transition: transform 0.6s ease;
}

.hero-slide {
    min-width: 100%;
    padding: 40px 0;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    max-height: 480px;
    display: flex;
    align-items: center;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.hero-slide:nth-child(1) {
    background: var(--gradient-hero);
}

.hero-slide:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #10B981 50%, #1E40AF 100%);
}

.hero-slide:nth-child(3) {
    background: linear-gradient(135deg, #7C3AED 0%, #2563EB 50%, #0891B2 100%);
}

.hero-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.hero-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.hero-slider-dot.active {
    background: white;
    width: 28px;
    border-radius: var(--radius-full);
}

.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: var(--transition);
}

.hero-slider-arrow:hover {
    background: rgba(255,255,255,0.35);
}

.hero-slider-arrow svg {
    width: 22px;
    height: 22px;
}

.hero-slider-arrow.prev {
    left: 20px;
}

.hero-slider-arrow.next {
    right: 20px;
}

/* === Dashboard Styles === */
.dashboard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: calc(100vh - 70px);
}

.dashboard-sidebar {
    background: var(--bg-white);
    border-right: 1px solid var(--border-light);
    padding: 24px 0;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
}

.dashboard-sidebar-header {
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}

.dashboard-sidebar-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.dashboard-sidebar-header p {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

.dashboard-nav-group {
    padding: 8px 0;
}

.dashboard-nav-label {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-lighter);
}

.dashboard-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-medium);
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.dashboard-nav-link:hover {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.dashboard-nav-link.active {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
    border-left-color: var(--primary-blue);
    font-weight: 600;
}

.dashboard-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dashboard-nav-link .nav-badge {
    margin-left: auto;
    background: var(--primary-red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.dashboard-content {
    padding: 32px;
    background: var(--bg-gray);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dashboard-content::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar on admin pages but keep scroll functionality */
.dashboard-layout {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dashboard-layout::-webkit-scrollbar {
    display: none;
}

.admin-layout {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-layout::-webkit-scrollbar {
    display: none;
}

.admin-layout .data-card {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-layout .data-card::-webkit-scrollbar {
    display: none;
}

.admin-layout .data-table-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-layout .data-table-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar on all admin content areas */
.dashboard-sidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dashboard-sidebar::-webkit-scrollbar {
    display: none;
}

.admin-layout .container,
.admin-layout .dashboard-content,
.admin-layout .data-card,
.admin-layout .data-table-wrapper,
.admin-layout .section {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-layout .container::-webkit-scrollbar,
.admin-layout .dashboard-content::-webkit-scrollbar,
.admin-layout .data-card::-webkit-scrollbar,
.admin-layout .data-table-wrapper::-webkit-scrollbar,
.admin-layout .section::-webkit-scrollbar {
    display: none;
}

.dashboard-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dashboard-content-header h1 {
    font-size: 24px;
    font-weight: 700;
}

.dashboard-content-header p {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 4px;
}

/* === Stats Cards === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon.blue {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.stat-card-icon.red {
    background: var(--primary-red-pale);
    color: var(--primary-red);
}

.stat-card-icon.green {
    background: #D1FAE5;
    color: #059669;
}

.stat-card-icon.yellow {
    background: #FEF3C7;
    color: #D97706;
}

.stat-card-icon svg {
    width: 22px;
    height: 22px;
}

.stat-card-info h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}

.stat-card-info p {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

/* === Data Table === */
.data-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.data-card-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    text-align: left;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border-light);
}

.data-table tbody td {
    padding: 14px 24px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--bg-light);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.status-badge.pending {
    background: #FEF3C7;
    color: #92400E;
}

.status-badge.confirmed {
    background: var(--primary-blue-pale);
    color: var(--primary-blue);
}

.status-badge.processing {
    background: #E0E7FF;
    color: #3730A3;
}

.status-badge.shipped {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-badge.delivered {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.cancelled {
    background: var(--primary-red-pale);
    color: var(--primary-red-dark);
}

.status-badge.paid {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.active {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.inactive {
    background: var(--bg-gray);
    color: var(--text-light);
}

/* === Action Buttons === */
.action-btns {
    display: flex;
    gap: 6px;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: var(--transition);
}

.action-btn:hover {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
    border-color: var(--primary-blue-pale);
}

.action-btn.danger:hover {
    background: var(--primary-red-pale);
    color: var(--primary-red);
    border-color: #FECACA;
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* === Unauthorized Modal === */
.unauthorized-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.unauthorized-modal {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

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

.unauthorized-modal-header {
    background: var(--gradient-primary);
    padding: 32px;
    text-align: center;
    color: white;
}

.unauthorized-modal-header svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.unauthorized-modal-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.unauthorized-modal-header p {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 8px;
}

.unauthorized-modal-body {
    padding: 32px;
    text-align: center;
}

.unauthorized-modal-body p {
    font-size: 15px;
    color: var(--text-medium);
    margin-bottom: 24px;
    line-height: 1.6;
}

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

/* === Responsive === */
@media (max-width: 1024px) {
    .hero .container,
    .hero-slide .container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero h1 { font-size: 36px; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-image { max-width: 400px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .products-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 9999;
        border-right: 1px solid var(--border-light);
        box-shadow: var(--shadow-xl);
        transition: left 0.3s ease;
        padding: 24px 0;
    }
    .dashboard-sidebar.open {
        left: 0;
    }
    .dashboard-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
    }
    .dashboard-sidebar-overlay.active {
        display: block;
    }
    .dashboard-sidebar-toggle {
        display: flex !important;
    }
    .dashboard-content { padding: 24px 16px; }

    .hero-slider-arrow { display: none; }

    /* Admin form two-column layouts go single column */
    .data-card-header h3 { font-size: 15px; }
}

@media (max-width: 768px) {
    .top-bar { display: none; }

    .header .container {
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 10px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .logo {
        font-size: 22px;
        min-width: 0;
        overflow: hidden;
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        gap: 2px;
    }

    .logo-name {
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(14px, 3.8vw, 18px);
    }

    .logo img {
        height: clamp(28px, 8vw, 40px) !important;
        width: auto;
    }

    .search-bar {
        order: initial;
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        flex-basis: 100%;
    }

    .search-bar input { padding: 8px 14px; font-size: 13px; }
    .search-bar button { padding: 8px 14px; }

    .mobile-menu-toggle {
        display: flex;
        order: initial;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .nav-action-desktop { display: none !important; }
    .nav-action-text { display: none; }
    .nav-action-btn { padding: 8px; }

    .nav-actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        justify-self: end;
        min-width: 0;
    }

    .category-nav { display: none; }

    .hero, .hero-slide { padding: 20px 0; min-height: 500px; max-height: none; flex-direction: column; text-align: center; }
    .hero .container { flex-direction: column; align-items: center; gap: 20px; }
    .hero-content { order: 2; max-width: 100%; }
    .hero h1 { font-size: 26px; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 12px; }
    .hero p { font-size: 15px; margin-bottom: 20px; line-height: 1.4; }
    .hero-badge { font-size: 12px; padding: 6px 12px; margin-bottom: 12px; }
    .hero-image { order: 1; max-width: 280px; max-height: 200px; margin: 0 auto; }
    .hero-image img { max-height: 200px; width: auto; }
    .hero-actions { justify-content: center; flex-wrap: wrap; gap: 12px; }
    .hero-actions .btn { font-size: 14px; padding: 10px 20px; }
    
    .hero-slide .container { flex-direction: column !important; gap: 20px !important; }

    .section { padding: 40px 0; }
    .section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .section-header h2 { font-size: 16px; }
    .section-header a {
        align-self: auto;
        font-size: 16px;
        line-height: 1;
        margin-top: 0;
    }

    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card-image { height: 100px; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-image { height: 160px; }
    .product-card-body { padding: 12px; }
    .product-card-name { font-size: 13px; }
    .price-current { font-size: 15px; }
    .price-normal { font-size: 15px; }
    .product-card-footer { padding: 0 12px 12px; }

    .promo-banners { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; gap: 16px; }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-brand {
        padding-bottom: 20px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .footer-collapsible {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 0;
    }

    .footer-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 14px 0;
        margin-bottom: 0;
    }

    .footer-chevron {
        display: inline-block;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .footer-chevron.rotated {
        transform: rotate(180deg);
    }

    .footer-collapse-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .footer-collapse-content.open {
        max-height: 300px;
        padding-bottom: 12px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .cart-layout { grid-template-columns: 1fr; }
    .cart-page-summary { position: static; }
    .form-row { grid-template-columns: 1fr; }
    .receipt-info-grid { grid-template-columns: 1fr; }
    .error-page h1 { font-size: 80px; }
    .payment-card { padding: 32px 24px; }
    .receipt-header { padding: 24px 24px 0; }
    .receipt-body { padding: 0 24px 24px; }
    .receipt-footer { padding: 20px 24px 24px; }
    .receipt-footer-grid { grid-template-columns: 1fr; gap: 16px; }
    .receipt-letterhead { flex-direction: column; gap: 16px; }
    .receipt-letterhead-right { text-align: left; }
    .receipt-actions { justify-content: center; }

    .page-header { padding: 24px 0; }
    .page-header h1 { font-size: 24px; }

    .cta-section { padding: 48px 0; }
    .cta-section h2 { font-size: 24px; }
    .cta-section p { font-size: 15px; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-card { padding: 16px; gap: 12px; }
    .stat-card-info h3 { font-size: 22px; }

    .whatsapp-float { width: 48px; height: 48px; bottom: 120px; right: 16px; }
    .whatsapp-float svg { width: 24px; height: 24px; }

    /* Data tables - horizontal scroll */
    .data-card { overflow-x: auto; }
    .data-table { min-width: 600px; }
    .data-table thead th { padding: 10px 14px; font-size: 11px; }
    .data-table tbody td { padding: 10px 14px; font-size: 13px; }

    /* Admin layout mobile */
    .adm-content { padding: 16px; }
    .adm-topbar { padding: 0 16px; height: 54px; }
    .adm-topbar-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
    .adm-profile-info { display: none; }
    .adm-profile-chevron { display: none; }
    .adm-profile-btn { padding: 4px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 14px; gap: 10px; }
    .stat-card-icon { width: 38px; height: 38px; }
    .stat-card-info h3 { font-size: 20px; }
    .data-card-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .data-card-header h3 { font-size: 14px; }
    .dashboard-content-header { padding: 0 0 12px; }
    .dashboard-content-header h1 { font-size: 18px; }
    .adm-notif-btn { width: 32px; height: 32px; }

    /* Admin form grid single column */
    [style*="grid-template-columns: 1fr 360px"],
    [style*="grid-template-columns:1fr 360px"] {
        display: block !important;
    }

    /* Dashboard content header stacking */
    .dashboard-content-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .dashboard-content-header h1 { font-size: 20px; }

    /* Radio group stacking */
    .radio-group { flex-direction: column; }

    /* Checkout form */
    .checkout-form { padding: 16px; }
    .checkout-form h2 { font-size: 17px; }
    .checkout-page { padding: 20px 0; }
    .checkout-layout { gap: 16px; }

    /* Delivery method mobile */
    .delivery-method-toggle { padding: 14px 16px; }
    .delivery-zones-list { padding: 6px; }
    .delivery-zone-label { padding: 10px 12px; gap: 10px; }
    .delivery-zone-name { font-size: 13px; }

    /* Payment page mobile — prevent overflow */
    .mpesa-section { padding: 16px; margin-top: 0; }
    .mpesa-section p { word-break: break-word; }
    .checkout-layout .checkout-form { min-width: 0; overflow: hidden; }
    .cart-summary { min-width: 0; overflow: hidden; }

    /* About stats */
    .about-stats { grid-template-columns: 1fr; gap: 12px; }

    /* Profile photo section */
    .profile-photo-section { flex-direction: column; text-align: center; }
    .profile-photo-actions { justify-content: center; }

    /* Support grid */
    .container [style*="grid-template-columns:repeat(3"],
    .container [style*="grid-template-columns: repeat(3"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* Product detail */
    .product-detail-price .price-current { font-size: 24px; }
    .product-detail-meta { grid-template-columns: 1fr; }

    /* Auth pages */
    .auth-card { padding: 0 16px; }
    .auth-card-header h2 { font-size: 22px; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .header .container {
        gap: 8px;
    }
    /* Checkout & payment overflow fix */
    .checkout-form { padding: 14px; }
    .checkout-page .container { padding: 0 12px; }
    .mpesa-section { padding: 14px; }
    .delivery-method-toggle { padding: 12px 14px; }
    .important-notice { word-break: break-word; }
    .logo-name {
        font-size: clamp(13px, 4vw, 16px);
    }
    .mobile-menu-toggle {
        width: 34px;
        height: 34px;
        padding: 6px;
    }
    .nav-action-btn {
        width: 34px;
        height: 34px;
        padding: 6px;
        justify-content: center;
    }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .category-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { justify-content: center; }
    .product-detail-actions { flex-direction: column; }
    .track-form form { flex-direction: column; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .btn-lg { padding: 14px 28px; font-size: 15px; }

    .logo { font-size: 20px; }
    .logo img {
        height: clamp(24px, 7.6vw, 34px) !important;
    }
    .hero h1 { font-size: 20px; }
    .hero p { font-size: 13px; }

    .product-card-image { height: 130px; }
    .product-card-body { padding: 10px; }
    .product-card-name { font-size: 12px; }
    .price-current { font-size: 14px; }
    .price-normal { font-size: 14px; }
    .btn-add-cart { font-size: 12px; padding: 8px; }
    .btn-add-cart .btn-add-cart-text { display: none; }
    .btn-add-cart { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; justify-content: center; }
    .btn-add-cart svg { width: 18px; height: 18px; margin: 0; }
    .btn-buy-now { font-size: 13px; }

    .category-card-image { height: 80px; }
    .category-card-body { padding: 10px 8px; }
    .category-card-body h3 { font-size: 12px; }

    .section { padding: 32px 0; }
    .section-header h2 { font-size: 15px; }
    .section-header a {
        font-size: 15px;
        margin-top: 0;
    }

    .cart-intro { align-items: flex-start; flex-direction: column; }
    .cart-intro h1 { font-size: 34px; }
    .cart-highlight { padding: 20px; }
    .cart-highlight p { font-size: 15px; }
    .cart-page .cart-item {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
        border-radius: 24px;
    }
    .cart-page .cart-item-image {
        width: 108px;
        height: 132px;
        border-radius: 18px;
    }
    .cart-page .cart-item-copy h3 { font-size: 17px; }
    .cart-item-price { font-size: 20px; }
    .cart-summary-card { border-radius: 28px; }

    .payment-amount { font-size: 28px; }
    .payment-card h2 { font-size: 20px; }

    .receipt-table { font-size: 12px; min-width: 480px; }
    .receipt-totals .row.total { font-size: 15px; }

    .dashboard-content { padding: 16px 12px; }
    .stat-card { padding: 14px; gap: 10px; }
    .stat-card-icon { width: 40px; height: 40px; }
    .stat-card-info h3 { font-size: 20px; }
    .stat-card-info p { font-size: 12px; }

    .error-page h1 { font-size: 60px; }
    .error-page h2 { font-size: 22px; }

    .cta-section h2 { font-size: 20px; }
    .cta-section p { font-size: 14px; }

    /* Ensure all overflowing content scrolls */
    .receipt-body { overflow-x: auto; }
}

/* === Footer Chevron (hidden on desktop) === */
.footer-chevron {
    display: none;
}

/* === Dashboard Sidebar Toggle === */
.dashboard-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-medium);
    margin-bottom: 16px;
    transition: var(--transition);
}

.dashboard-sidebar-toggle:hover {
    background: var(--primary-blue-50);
    color: var(--primary-blue);
}

.dashboard-sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

/* === Profile Photo === */
.profile-photo-section {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 24px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.profile-photo-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

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

.profile-photo-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-photo-info p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.profile-photo-actions {
    display: flex;
    gap: 8px;
}

/* === File Upload Preview === */
.file-upload-area {
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.file-upload-area:hover {
    border-color: var(--primary-blue-light);
    background: var(--primary-blue-50);
}

.file-upload-area.has-file {
    border-color: var(--primary-blue-light);
    background: var(--primary-blue-50);
}

.file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload-icon {
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.file-upload-icon svg {
    width: 32px;
    height: 32px;
}

.file-upload-text {
    font-size: 14px;
    color: var(--text-light);
}

.file-upload-text strong {
    color: var(--primary-blue);
}

.file-preview {
    margin-top: 16px;
    display: none;
}

.file-preview.active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.file-preview-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview-info {
    flex: 1;
    min-width: 0;
}

.file-preview-info .file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-preview-info .file-size {
    font-size: 12px;
    color: var(--text-lighter);
}

.file-preview-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-red);
    padding: 4px;
}

.file-preview-remove svg {
    width: 16px;
    height: 16px;
}

/* === Map Container === */
.map-container {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
}

/* === Timeline === */
.timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-gray);
    color: var(--text-lighter);
}

.timeline-dot.completed {
    background: #D1FAE5;
    color: #059669;
}

.timeline-dot svg {
    width: 14px;
    height: 14px;
}

.timeline-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.timeline-content p {
    font-size: 13px;
    color: var(--text-light);
}

/* === Admin Image Preview === */
.admin-image-preview {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-gray);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.admin-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === Admin Tabs === */
.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 24px;
}

.admin-tab {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.admin-tab:hover,
.admin-tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* === Print Styles === */
@media print {
    @page {
        margin: 0.5cm;
        size: auto;
    }

    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .header, .footer, .top-bar, .category-nav, .whatsapp-float,
    .receipt-actions, .btn, .nav-actions, .search-bar,
    .mobile-menu, .mobile-menu-overlay, .mobile-menu-toggle,
    .page-header, .breadcrumb,
    .ac-header, .ac-footer, .ac-topbar, .ac-back-top {
        display: none !important;
    }

    .receipt-page {
        padding: 0 !important;
        margin: 0 !important;
    }

    .receipt-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .receipt-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .receipt-header {
        background: #1E40AF !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        padding: 20px !important;
    }

    .receipt-header .logo-esio,
    .receipt-header .logo-med,
    .receipt-header p,
    .receipt-header h2,
    .receipt-header .receipt-meta {
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .receipt-status {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .receipt-body {
        padding: 20px !important;
    }

    .receipt-table {
        width: 100% !important;
        page-break-inside: avoid;
    }

    .receipt-table th,
    .receipt-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }

    .receipt-totals {
        page-break-inside: avoid;
    }

    .receipt-footer {
        padding: 15px 20px !important;
    }
}


/* ============================================================
   ABIGAEL COLLECTIONS — HEADER / FOOTER / DASHBOARD / AUTH
   ============================================================ */

/* ── Shared tokens ─────────────────────────────────────────── */
:root {
    --hn-black:    #0F0F0F;
    --hn-white:    #FFFFFF;
    --hn-pink:     #DB2777;
    --hn-pink-lt:  #FCE7F3;
    --hn-gray-bg:  #F5F5F5;
    --hn-border:   #E5E5E5;
    --hn-text:     #111111;
    --hn-muted:    #717171;
    --hn-font:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   HEADER  — two-row Fashion Nova layout
   ============================================================ */
.hn-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--hn-border);
}

/* ── ROW 1 ── brand + main-nav + icons ── */
.hn-row1 { background: #fff; }
.hn-row1-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Brand */
.hn-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 20px;
    line-height: 1;
    white-space: nowrap;
}
.hn-brand-logo {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.hn-brand-a {
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    color: #DB2777;
    letter-spacing: 0;
}
.hn-brand-b {
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    color: var(--hn-text);
    letter-spacing: 0;
}

/* Inline search bar */
.hn-inline-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 0 12px;
    height: 36px;
    flex: 1;
    max-width: 320px;
    margin: 0 16px;
    transition: border-color .15s, background .15s;
}
.hn-inline-search:focus-within {
    border-color: #DB2777;
    background: #fff;
}
.hn-inline-search svg { color: #9CA3AF; flex-shrink: 0; }
.hn-inline-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: #111;
    font-family: inherit;
    min-width: 0;
}
.hn-inline-search input::placeholder { color: #BCBCBC; }

/* Main nav — top row, desktop */
.hn-main-nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
    overflow: hidden;
}
.hn-nav-link {
    padding: 0 14px;
    height: 52px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--hn-text);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
    flex-shrink: 0;
}
.hn-nav-link:hover { color: var(--hn-pink); }
.hn-nav-active {
    color: var(--hn-pink);
    border-bottom-color: var(--hn-pink);
}
.hn-nav-sale { color: var(--hn-pink) !important; }
.hn-nav-sale:hover { color: var(--hn-pink); }

/* Right icons */
.hn-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.hn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hn-text);
    border-radius: 50%;
    transition: background .12s, color .12s;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
}
.hn-icon:hover { background: var(--hn-gray-bg); color: var(--hn-pink); }
.hn-cart { position: relative; }
.hn-cart-badge {
    position: absolute;
    top: 3px; right: 3px;
    background: var(--hn-pink);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

/* Hamburger — hidden on desktop */
.hn-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hn-text);
    padding: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* ── ROW 2 ── scrollable category strip — always visible ── */
.hn-row2 {
    border-top: 1px solid var(--hn-border);
    background: #fff;
    overflow: hidden;
}
.hn-row2-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
}
.hn-row2-inner::-webkit-scrollbar { display: none; }
.hn-cat {
    padding: 0 14px;
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--hn-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
    flex-shrink: 0;
}
.hn-cat:hover { color: var(--hn-text); }
.hn-cat-active {
    color: var(--hn-pink);
    border-bottom-color: var(--hn-pink);
}

/* ── SEARCH OVERLAY (full-width drop-down) ── */
.hn-search-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    background: rgba(0,0,0,.45);
    align-items: flex-start;
    justify-content: center;
}
.hn-search-overlay.hn-search-open {
    display: flex;
}
.hn-search-box {
    background: #fff;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.hn-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
    padding: 16px 24px;
    border-bottom: 1px solid var(--hn-border);
}
.hn-search-form svg { flex-shrink: 0; color: var(--hn-muted); }
.hn-search-form input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--hn-text);
    background: transparent;
    font-family: var(--hn-font);
}
.hn-search-form input::placeholder { color: #BCBCBC; }
.hn-search-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hn-muted);
    display: flex;
    padding: 4px;
    flex-shrink: 0;
}
.hn-search-close:hover { color: var(--hn-text); }

/* Suggestions */
.hn-suggestions {
    max-width: 820px;
    margin: 0 auto;
    max-height: 400px;
    overflow-y: auto;
}
.hns-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    text-decoration: none;
    color: var(--hn-text);
    border-bottom: 1px solid var(--hn-border);
    transition: background .1s;
}
.hns-item:hover { background: var(--hn-gray-bg); }
.hns-cat { font-size: 13px; font-weight: 600; }
.hns-tag {
    margin-left: auto;
    font-size: 10px;
    background: var(--hn-gray-bg);
    padding: 2px 8px;
    border-radius: 2px;
    color: var(--hn-muted);
}
.hns-thumb {
    width: 48px; height: 48px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--hn-gray-bg);
    flex-shrink: 0;
}
.hns-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hns-img-ph { width: 100%; height: 100%; }
.hns-meta { flex: 1; min-width: 0; }
.hns-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hns-cat-label { font-size: 11px; color: var(--hn-muted); margin-top: 2px; }
.hns-price { font-size: 13px; font-weight: 700; color: var(--hn-pink); white-space: nowrap; margin-left: auto; }
.hns-all {
    display: block;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hn-pink);
    text-decoration: none;
    text-align: center;
}
.hns-all:hover { text-decoration: underline; }

/* ── MOBILE DRAWER ── */
.hn-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1200;
}
.hn-overlay.active { display: block; }
.hn-drawer {
    position: fixed;
    top: 0; left: -320px;
    width: 290px;
    height: 100vh;
    background: #fff;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transition: left .26s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.14);
    overflow-y: auto;
}
.hn-drawer.open { left: 0; }
.hn-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hn-border);
    flex-shrink: 0;
}
.hn-drawer-body { padding: 4px 0 32px; flex: 1; }
.hn-drawer-link {
    display: block;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hn-text);
    text-decoration: none;
    transition: background .1s, color .1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--hn-font);
    letter-spacing: .02em;
}
.hn-drawer-link:hover,
.hn-drawer-active { color: var(--hn-pink); background: var(--hn-pink-lt); }
.hn-drawer-link-btn { color: var(--hn-muted); }
.hn-drawer-sep {
    height: 1px;
    background: var(--hn-border);
    margin: 6px 0;
}

/* ============================================================
   FOOTER — Fashion Nova black grid
   ============================================================ */
.ac-footer {
    background: var(--hn-black);
    color: rgba(255,255,255,.82);
    position: relative;
}
.ac-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 40px 0;
}
.ac-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.9fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.ac-footer-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}
.ac-footer-list { list-style: none; padding: 0; margin: 0; }
.ac-footer-list li { margin-bottom: 11px; }
.ac-footer-list a {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .15s;
}
.ac-footer-list a:hover { color: #fff; }

/* Newsletter */
.ac-newsletter-form {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.4);
    margin-bottom: 12px;
}
.ac-newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 14px;
    font-size: 13px;
    color: #fff;
    font-family: var(--hn-font);
}
.ac-newsletter-form input::placeholder { color: rgba(255,255,255,.38); }
.ac-newsletter-form button {
    background: #fff;
    border: none;
    padding: 0 16px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--hn-black);
    flex-shrink: 0;
    transition: background .15s;
}
.ac-newsletter-form button:hover { background: var(--hn-pink); color: #fff; }
.ac-newsletter-note {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    line-height: 1.6;
    margin-bottom: 22px;
}
.ac-newsletter-note a { color: rgba(255,255,255,.55); text-decoration: underline; }

.ac-footer-social { display: flex; gap: 14px; flex-wrap: wrap; }
.ac-footer-social a {
    color: rgba(255,255,255,.65);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    transition: border-color .15s, color .15s, background .15s;
}
.ac-footer-social a:hover {
    border-color: #fff; color: #fff;
    background: rgba(255,255,255,.08);
}

.ac-footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; flex-wrap: wrap; gap: 10px;
}
.ac-footer-bottom p { font-size: 11px; color: rgba(255,255,255,.35); }
.ac-footer-bottom-links { display: flex; gap: 20px; }
.ac-footer-bottom-links a {
    font-size: 11px; color: rgba(255,255,255,.35);
    text-decoration: none; transition: color .15s;
}
.ac-footer-bottom-links a:hover { color: #fff; }

/* Back to top */
.ac-back-top {
    position: fixed; bottom: 96px; right: 20px;
    width: 38px; height: 38px;
    background: #fff; border: 1px solid var(--hn-border);
    border-radius: 50%; display: none;
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 800; color: var(--hn-text);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: background .15s, color .15s;
}
.ac-back-top.visible { display: flex; }
.ac-back-top:hover { background: var(--hn-black); color: #fff; border-color: var(--hn-black); }

/* ============================================================
   DASHBOARD — Fashion Nova account style
   ============================================================ */
.fn-account-wrap {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: calc(100vh - 91px);
    align-items: start;
}
.fn-sidebar {
    border-right: 1px solid var(--hn-border);
    padding: 36px 0 40px;
    position: sticky;
    top: 91px;
    height: calc(100vh - 91px);
    overflow-y: auto;
    scrollbar-width: none;
    background: #fff;
}
.fn-sidebar::-webkit-scrollbar { display: none; }
.fn-sidebar-greeting {
    font-size: 26px;
    font-weight: 900;
    color: var(--hn-text);
    padding: 0 28px 28px;
    letter-spacing: -.5px;
    border-bottom: 1px solid var(--hn-border);
    margin-bottom: 6px;
}
.fn-sidebar-nav { padding: 6px 0; }
.fn-nav-item {
    display: flex; align-items: center; gap: 16px;
    padding: 13px 28px;
    font-size: 14px; font-weight: 400;
    color: var(--hn-text); text-decoration: none;
    transition: color .13s;
    background: none; border: none; width: 100%;
    text-align: left; cursor: pointer;
    font-family: var(--hn-font); letter-spacing: .01em;
}
.fn-nav-item:hover { color: var(--hn-pink); }
.fn-nav-active { font-weight: 600; color: var(--hn-text); }
.fn-nav-active .fn-nav-icon { color: var(--hn-pink); }
.fn-nav-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--hn-text); transition: color .13s;
}
.fn-nav-icon svg { width: 22px; height: 22px; }
.fn-nav-item:hover .fn-nav-icon { color: var(--hn-pink); }
.fn-nav-divider { height: 1px; background: var(--hn-border); margin: 10px 28px; }
.fn-nav-signout { color: var(--hn-muted); margin-top: 2px; }
.fn-nav-signout:hover { color: var(--hn-pink); }
.fn-account-content {
    padding: 44px 48px 80px;
    min-height: calc(100vh - 91px);
    background: #fff;
}
.fn-mob-toggle {
    display: none; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--hn-border);
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: var(--hn-font);
    color: var(--hn-text); margin-bottom: 24px;
    border-radius: 3px; letter-spacing: .04em;
}

/* ============================================================
   AUTH PAGES — split layout
   ============================================================ */
.ac-auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 91px);
    background: #FAFAFA;
}
.ac-auth-panel {
    background: linear-gradient(180deg, #111 0%, #171717 100%);
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    padding: 48px 32px;
    position: sticky; top: 91px;
    height: calc(100vh - 91px);
    border-right: 1px solid rgba(255,255,255,.06);
}
.ac-auth-brand {
    display: flex; flex-direction: column;
    align-items: flex-start; text-decoration: none;
    line-height: .95; margin-bottom: 12px;
}
.ac-auth-brand span:first-child {
    font-size: 30px; font-weight: 400; font-style: italic;
    color: #fff; letter-spacing: -1px;
}
.ac-auth-brand span:last-child {
    font-size: 30px; font-weight: 900; font-style: italic;
    color: var(--hn-pink); letter-spacing: -1px;
}
.ac-auth-tagline {
    max-width: 180px;
    font-size: 11px; color: rgba(255,255,255,.54);
    letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.ac-auth-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 60px 40px;
}
.ac-auth-form-inner {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #E5E7EB;
    padding: 36px;
    box-shadow: 0 24px 60px rgba(15, 15, 15, .06);
}
.ac-auth-form-header { margin-bottom: 28px; }
.ac-auth-form-header h1 {
    font-size: 26px; font-weight: 900; color: var(--hn-text);
    letter-spacing: -.5px; margin-bottom: 6px;
}
.ac-auth-form-header p { font-size: 13px; color: var(--hn-muted); }
.ac-auth-form-header a { color: var(--hn-pink); font-weight: 600; text-decoration: none; }
.ac-auth-form-header a:hover { text-decoration: underline; }
.ac-auth-alert {
    padding: 10px 14px; border-radius: 3px;
    font-size: 13px; margin-bottom: 18px; line-height: 1.5;
}
.ac-auth-alert p { margin: 0; }
.ac-auth-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.ac-auth-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.ac-auth-form { display: flex; flex-direction: column; gap: 18px; }
.ac-field { display: flex; flex-direction: column; gap: 5px; }
.ac-field label {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--hn-text);
}
.ac-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--hn-muted); }
.ac-field-label-row { display: flex; align-items: center; justify-content: space-between; }
.ac-forgot { font-size: 11px; color: var(--hn-muted); text-decoration: none; }
.ac-forgot:hover { color: var(--hn-pink); text-decoration: underline; }
.ac-input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--hn-border); border-radius: 3px;
    font-size: 14px; color: var(--hn-text);
    background: #fff; outline: none;
    font-family: var(--hn-font);
    transition: border-color .15s, box-shadow .15s;
}
.ac-input:focus { border-color: var(--hn-black); box-shadow: 0 0 0 2px rgba(15,15,15,.08); }
.ac-input::placeholder { color: #C0C0C0; }
.ac-input-eye { position: relative; }
.ac-input-eye .ac-input { padding-right: 42px; }
.ac-eye-btn {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--hn-muted); display: flex; padding: 3px;
}
.ac-eye-btn svg { width: 17px; height: 17px; }
.ac-eye-btn:hover { color: var(--hn-text); }
.ac-checkbox {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--hn-muted); cursor: pointer;
}
.ac-checkbox input { width: 15px; height: 15px; accent-color: var(--hn-pink); cursor: pointer; }
.ac-submit-btn {
    width: 100%; padding: 14px;
    background: var(--hn-black); color: #fff;
    border: none; font-size: 12px; font-weight: 800;
    letter-spacing: .12em; cursor: pointer;
    border-radius: 3px; transition: background .15s;
    font-family: var(--hn-font); margin-top: 6px;
    text-transform: uppercase;
}
.ac-submit-btn:hover { background: var(--hn-pink); }
.ac-auth-footer-note {
    margin-top: 18px; font-size: 11px;
    color: var(--hn-muted); line-height: 1.6; text-align: center;
}
.ac-auth-footer-note a { color: var(--hn-pink); text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .hn-main-nav { display: none; }
    .hn-burger { display: flex; }
    .hn-brand { margin-right: 0; }
    .hn-inline-search { display: none; }
}

@media (max-width: 900px) {
    .fn-account-wrap { grid-template-columns: 1fr; }
    .fn-sidebar {
        position: fixed; left: -280px; top: 0;
        width: 260px; height: 100vh; z-index: 900;
        transition: left .24s ease; padding-top: 60px;
        box-shadow: 4px 0 18px rgba(0,0,0,.12);
    }
    .fn-sidebar.fn-mob-open { left: 0; }
    .fn-account-content { padding: 24px 20px 60px; }
    .fn-mob-toggle { display: flex; }
    .fn-sidebar-greeting { font-size: 20px; padding: 0 22px 22px; }
    .fn-nav-item { padding: 12px 22px; }
    .fn-nav-divider { margin: 8px 22px; }
}

@media (max-width: 768px) {
    .ac-auth-wrap { grid-template-columns: 1fr; }
    .ac-auth-panel { display: none; }
    .ac-auth-form-wrap { padding: 36px 20px; }
    .ac-auth-form-inner { padding: 28px 22px; box-shadow: none; }
    .ac-footer-inner { padding: 40px 20px 0; }
    .ac-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .ac-footer-col-wide { grid-column: 1 / -1; }
    .hn-row1-inner { padding: 0 16px; }
    .hn-row2-inner { padding: 0 16px; }
    .cart-page { padding: 28px 0 56px; }
    .cart-intro h1 { font-size: 28px; }
    .cart-intro p { font-size: 14px; }
    .cart-highlight {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 24px;
    }
    .cart-highlight-count { min-width: 0; }
    .cart-page .cart-item {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }
    .cart-page .cart-item-image {
        width: 100%;
        max-width: 180px;
        height: 220px;
    }
    .cart-page .cart-item-body {
        flex-direction: column;
        align-items: stretch;
    }
    .cart-item-actions {
        justify-items: stretch;
        gap: 12px;
    }
    .cart-page .cart-item-quantity {
        justify-content: space-between;
    }
    .cart-page .cart-item-quantity button,
    .cart-page .cart-item-quantity span {
        width: 100%;
    }
    .cart-page .cart-item-remove {
        justify-content: center;
    }
    .cart-summary-card {
        padding: 24px 20px;
        border-radius: 24px;
    }
    .cart-summary-card-head h3 { font-size: 24px; }
}

@media (max-width: 480px) {
    .ac-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .ac-footer-bottom { flex-direction: column; align-items: flex-start; }
    .ac-footer-bottom-links { flex-wrap: wrap; gap: 10px; }
    .hn-brand-a, .hn-brand-b { font-size: 14px; }
    .cart-eyebrow { margin-bottom: 10px; }
    .cart-intro h1 { font-size: 24px; }
    .cart-page .cart-item { padding: 16px; }
    .cart-page .cart-item-image {
        max-width: 150px;
        height: 188px;
    }
    .cart-item-meta { margin-bottom: 10px; }
    .cart-page .cart-item-copy h3 { font-size: 15px; }
    .cart-item-price { font-size: 18px; }
    .cart-summary-card-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* === CART SIDEBAR === */
.cs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, .42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
    z-index: 1090;
}
.cs-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.cs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100vh;
    background: #fff;
    box-shadow: -24px 0 60px rgba(15, 15, 15, .16);
    transform: translateX(100%);
    transition: transform .26s ease;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}
.cs-drawer.open {
    transform: translateX(0);
}
.cs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #E5E7EB;
}
.cs-head-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
}
.cs-close {
    width: 40px;
    height: 40px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, color .15s ease;
}
.cs-close:hover {
    border-color: #111;
}
.cs-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
}
.cs-loading,
.cs-empty {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}
.cs-loading {
    color: #6B7280;
}
.cs-empty p {
    margin: 0;
    font-size: 14px;
    color: #6B7280;
}
.cs-shop-btn,
.cs-view-btn,
.cs-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cs-shop-btn,
.cs-checkout-btn {
    background: #111;
    color: #fff;
}
.cs-shop-btn:hover,
.cs-checkout-btn:hover {
    background: #DB2777;
}
.cs-view-btn {
    border: 1px solid #D1D5DB;
    color: #111;
    background: #fff;
}
.cs-view-btn:hover {
    border-color: #111;
}
.cs-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}
.cs-item:last-child {
    margin-bottom: 0;
}
.cs-item-img,
.cs-item-img-ph {
    display: block;
    width: 92px;
    height: 116px;
    background: #F5F5F5;
    overflow: hidden;
}
.cs-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-item-info {
    min-width: 0;
}
.cs-item-name {
    display: block;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 6px;
}
.cs-item-name:hover {
    color: #DB2777;
}
.cs-item-variant {
    font-size: 11px;
    color: #DB2777;
    font-weight: 700;
    margin-bottom: 6px;
}
.cs-item-price {
    font-size: 13px;
    color: #111;
    font-weight: 700;
    margin-bottom: 10px;
}
.cs-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-qty-btn,
.cs-remove-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: border-color .15s ease, color .15s ease;
}
.cs-qty-btn:hover,
.cs-remove-btn:hover {
    border-color: #111;
}
.cs-remove-btn {
    margin-left: auto;
    color: #9CA3AF;
}
.cs-qty-val {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}
.cs-foot {
    border-top: 1px solid #E5E7EB;
    padding: 18px 22px 22px;
    background: #fff;
}
.cs-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}
.cs-subtotal-amount {
    font-size: 18px;
    font-weight: 900;
}
.cs-foot-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@keyframes cs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .cs-head {
        padding: 18px 16px 14px;
    }
    .cs-body {
        padding: 16px;
    }
    .cs-foot {
        padding: 16px;
    }
    .cs-item {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
    }
    .cs-item-img,
    .cs-item-img-ph {
        width: 80px;
        height: 102px;
    }
    .cs-foot-btns {
        grid-template-columns: 1fr;
    }
}
/* === PRODUCTS PAGE === */
.fn-products-wrap{display:grid;grid-template-columns:200px 1fr;gap:0;max-width:1440px;margin:0 auto;padding:0 24px 60px;align-items:start;}
.fn-filters{border-right:1px solid #E5E5E5;padding:24px 20px 24px 0;position:sticky;top:91px;height:calc(100vh - 91px);overflow-y:auto;scrollbar-width:none;}
.fn-filters::-webkit-scrollbar{display:none;}
.fn-filters-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid #E5E5E5;margin-bottom:16px;}
.fn-refine-label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#111;}
.fn-product-count{font-size:11px;color:#717171;}
.fn-filter-search form{display:flex;align-items:center;gap:8px;border:1px solid #E5E5E5;padding:8px 10px;margin-bottom:16px;}
.fn-filter-search form svg{flex-shrink:0;color:#717171;}
.fn-filter-search input{border:none;outline:none;font-size:12px;color:#111;width:100%;background:transparent;}
.fn-filter-group{border-bottom:1px solid #E5E5E5;padding:12px 0;}
.fn-filter-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#111;font-family:inherit;padding:4px 0;}
.fn-filter-chevron{transition:transform .2s;flex-shrink:0;}
.fn-filter-group.fn-filter-open .fn-filter-chevron{transform:rotate(45deg);}
.fn-filter-body{display:none;padding-top:10px;}
.fn-filter-group.fn-filter-open .fn-filter-body{display:block;}
.fn-filter-item{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;color:#374151;text-decoration:none;cursor:pointer;transition:color .12s;}
.fn-filter-item:hover,.fn-filter-active{color:#DB2777;}
.fn-filter-count{font-size:11px;color:#9CA3AF;}
.fn-price-inputs{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.fn-price-field{display:flex;flex-direction:column;gap:3px;flex:1;}
.fn-price-field label{font-size:10px;color:#717171;text-transform:uppercase;letter-spacing:.05em;}
.fn-price-field input{width:100%;border:1px solid #E5E5E5;padding:6px 8px;font-size:13px;outline:none;font-family:inherit;}
.fn-price-field input:focus{border-color:#111;}
.fn-price-dash{font-size:14px;color:#9CA3AF;margin-top:16px;flex-shrink:0;}
.fn-price-apply{width:100%;background:#111;color:#fff;border:none;padding:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .15s;}
.fn-price-apply:hover{background:#DB2777;}
.fn-filter-clear{display:block;text-align:center;margin-top:6px;font-size:11px;color:#9CA3AF;text-decoration:underline;}
.fn-sort-mobile{display:none;}
.fn-products-area{padding:20px 0 0 28px;min-width:0;}
.fn-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #E5E5E5;margin-bottom:20px;}
.fn-toolbar-left{display:flex;align-items:center;gap:12px;}
.fn-mob-filter-btn{display:none;align-items:center;gap:6px;background:none;border:1px solid #E5E5E5;padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit;color:#111;}
.fn-result-count{font-size:12px;color:#717171;}
.fn-sort-select{border:1px solid #E5E5E5;padding:7px 12px;font-size:12px;color:#111;background:#fff;cursor:pointer;outline:none;font-family:inherit;}
.fn-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.fn-active-tag{display:inline-flex;align-items:center;gap:6px;background:#F5F5F5;padding:4px 10px;font-size:12px;color:#374151;}
.fn-active-tag a{color:#9CA3AF;text-decoration:none;font-weight:700;font-size:14px;line-height:1;}
.fn-active-tag a:hover{color:#DB2777;}
.fn-empty{text-align:center;padding:60px 20px;}
.fn-empty svg{color:#D1D5DB;margin:0 auto 16px;}
.fn-empty h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.fn-empty p{font-size:14px;color:#9CA3AF;margin-bottom:20px;}
.fn-empty-btn{background:#111;color:#fff;border:none;padding:12px 24px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block;}
.fn-pagination{margin-top:40px;display:flex;justify-content:center;}
.fn-mob-filter-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:800;}
.fn-mob-filter-overlay.active{display:block;}

/* === PRODUCT GRID === */
.fn-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}

/* === PRODUCT CARD (Fashion Nova style) === */
.fn-card{display:flex;flex-direction:column;background:#fff;position:relative;overflow:hidden;}
.fn-card-img-wrap{display:block;position:relative;overflow:hidden;background:#F5F5F5;aspect-ratio:3/4;text-decoration:none;}
.fn-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block;}
.fn-card:hover .fn-card-img{transform:scale(1.04);}
.fn-card-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#F5F5F5;}
.fn-card-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;text-transform:uppercase;line-height:1.4;}
.fn-card-badge-sale{background:#DB2777;color:#fff;}
.fn-card-badge-new{background:#111;color:#fff;}
.fn-card-badge-oos{background:rgba(0,0,0,.55);color:#fff;}
.fn-card-hover-cta{position:absolute;bottom:0;left:0;right:0;background:#111;padding:10px;opacity:0;transition:opacity .2s ease;text-align:center;}
.fn-card:hover .fn-card-hover-cta{opacity:1;}
.fn-card-cta-btn{width:100%;background:none;border:none;color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit;padding:2px 0;}
.fn-card-info{padding:10px 4px 16px;}
.fn-card-cat{font-size:10px;font-weight:700;letter-spacing:.1em;color:#DB2777;text-transform:uppercase;margin-bottom:3px;}
.fn-card-name{font-size:13px;font-weight:400;color:#111;text-decoration:none;display:block;margin-bottom:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fn-card-name:hover{text-decoration:underline;}
.fn-card-price{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fn-card-price-reg,.fn-card-price-sale{font-size:14px;font-weight:700;color:#111;}
.fn-card-price-orig{font-size:12px;color:#9CA3AF;text-decoration:line-through;}
.fn-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
.fn-card-atc-btn{padding:8px 6px;background:#111;color:#fff;border:none;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .15s;}
.fn-card-atc-btn:hover{background:#333;}
.fn-card-buy-now-btn{padding:8px 6px;background:#DB2777;color:#fff;border:none;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .15s;}
.fn-card-buy-now-btn:hover{background:#be185d;}

/* === PRODUCT CARD: variant overlay & swatches === */
/* Overlay slides up from bottom of image on hover */
.fn-card-variant-overlay{
    position:absolute;bottom:0;left:0;right:0;
    background:rgba(255,255,255,.96);
    padding:10px 10px 8px;
    transform:translateY(100%);
    transition:transform .22s ease;
    pointer-events:none;
}
.fn-card:hover .fn-card-variant-overlay{transform:translateY(0);pointer-events:auto;}
.fn-card-variant-label{
    font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:#111;margin:0 0 6px;
}
.fn-card-variant-chips{display:flex;flex-wrap:wrap;gap:5px;}

/* Size chips */
.fn-card-size-chip{
    min-width:34px;padding:5px 6px;
    border:1.5px solid #D1D5DB;background:#fff;
    font-size:11px;font-weight:600;color:#374151;
    cursor:pointer;border-radius:4px;
    transition:border-color .12s,background .12s,color .12s;
    line-height:1;
}
.fn-card-size-chip:hover{border-color:#111;background:#111;color:#fff;}
.fn-card-size-more{color:#DB2777;border-color:#DB2777;}
.fn-card-size-more:hover{background:#DB2777;color:#fff;}

/* Colour chips */
.fn-card-color-chip{
    width:22px;height:22px;border-radius:50%;border:2px solid #fff;
    box-shadow:0 0 0 1.5px #D1D5DB;
    cursor:pointer;padding:0;transition:box-shadow .12s;
}
.fn-card-color-chip:hover{box-shadow:0 0 0 2px #111;}

/* Colour swatches below price (always visible) */
.fn-card-variants{margin:4px 0 2px;}
.fn-card-color-swatches{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.fn-card-swatch{
    display:inline-block;width:14px;height:14px;border-radius:50%;
    border:1.5px solid rgba(0,0,0,.12);flex-shrink:0;
}
.fn-card-swatch-more{font-size:10px;font-weight:700;color:#6B7280;}

/* Size labels below color swatches */
.fn-card-size-labels{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.fn-card-size-label{
    font-size:9px;font-weight:600;color:#6B7280;
    padding:2px 5px;border:1px solid #E5E7EB;border-radius:3px;
    line-height:1;text-transform:uppercase;
}
.fn-card-size-more{font-size:9px;font-weight:700;color:#6B7280;padding:2px 0;}

/* === PRODUCT DETAIL === */
.fn-breadcrumb-bar{padding:12px 0;background:#fff;}
.fn-bc-inner{max-width:1440px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:#9CA3AF;}
.fn-bc-inner a{color:#9CA3AF;text-decoration:none;transition:color .12s;}
.fn-bc-inner a:hover{color:#111;}
.fn-bc-inner span{color:#9CA3AF;}
.fn-bc-current{color:#111;}
.fn-pd-section{max-width:1440px;margin:0 auto;padding:0 24px 80px;}
.fn-pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:60px;}
.fn-pd-gallery{display:flex;gap:10px;}
.fn-gallery-thumbs{display:flex;flex-direction:column;gap:6px;width:68px;flex-shrink:0;}
.fn-thumb{width:68px;height:80px;border:2px solid transparent;overflow:hidden;cursor:pointer;background:#F5F5F5;padding:0;flex-shrink:0;}
.fn-thumb img{width:100%;height:100%;object-fit:cover;}
.fn-thumb.active,.fn-thumb:hover{border-color:#111;}
.fn-gallery-main{flex:1;background:#F5F5F5;overflow:hidden;aspect-ratio:3/4;}
.fn-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
.fn-gallery-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.fn-pd-info{padding-top:8px;}
.fn-pd-cat{font-size:11px;font-weight:700;letter-spacing:.1em;color:#DB2777;text-transform:uppercase;margin-bottom:8px;}
.fn-pd-name{font-size:22px;font-weight:700;color:#111;line-height:1.3;margin-bottom:10px;letter-spacing:-.3px;}
.fn-pd-rating{display:flex;align-items:center;gap:4px;margin-bottom:12px;}
.fn-pd-rating-count{font-size:12px;color:#717171;text-decoration:none;margin-left:4px;}
.fn-pd-rating-count:hover{text-decoration:underline;}
.fn-pd-price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
.fn-pd-price-reg,.fn-pd-price-sale{font-size:20px;font-weight:700;color:#111;}
.fn-pd-price-orig{font-size:15px;color:#9CA3AF;text-decoration:line-through;}
.fn-pd-discount{font-size:12px;background:#FCE7F3;color:#DB2777;padding:2px 8px;font-weight:700;}
.fn-pd-short-desc{font-size:14px;color:#374151;line-height:1.7;margin-bottom:14px;}
.fn-pd-stock{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-bottom:18px;}
.fn-pd-stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fn-pd-stock.in-stock{color:#16A34A;}.fn-pd-stock.in-stock .fn-pd-stock-dot{background:#16A34A;}
.fn-pd-stock.out-stock{color:#DC2626;}.fn-pd-stock.out-stock .fn-pd-stock-dot{background:#DC2626;}
.fn-variant-group{margin-bottom:18px;}
.fn-variant-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#111;margin-bottom:8px;}
.fn-variant-val{font-weight:400;color:#717171;text-transform:none;letter-spacing:0;}
.fn-swatches{display:flex;flex-wrap:wrap;gap:6px;}
.fn-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;}
.fn-swatch:hover{transform:scale(1.1);}
.fn-swatch.selected{border-color:#111;box-shadow:0 0 0 2px #fff,0 0 0 4px #111;}
.fn-sizes{display:flex;flex-wrap:wrap;gap:6px;}
.fn-size-btn{padding:7px 14px;border:1.5px solid #E5E5E5;background:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.fn-size-btn:hover{border-color:#111;}
.fn-size-btn.selected{border-color:#111;background:#111;color:#fff;}
.fn-combo-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.fn-combo-btn{display:inline-flex;align-items:center;padding:7px 12px;border:1.5px solid #E5E5E5;background:#fff;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;}
.fn-combo-btn:hover:not(:disabled){border-color:#111;}
.fn-combo-btn.selected{border-color:#111;background:#111;color:#fff;}
.fn-combo-btn.fn-oos{opacity:.4;cursor:not-allowed;text-decoration:line-through;}
.fn-qty-row{margin-bottom:14px;}
.fn-qty{display:inline-flex;border:1px solid #E5E5E5;}
.fn-qty-btn{width:40px;height:40px;background:#fff;border:none;cursor:pointer;font-size:18px;font-family:inherit;color:#111;transition:background .12s;}
.fn-qty-btn:hover{background:#F5F5F5;}
.fn-qty-input{width:52px;height:40px;border:none;border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;text-align:center;font-size:14px;font-weight:600;outline:none;font-family:inherit;}
.fn-pd-actions{display:flex;gap:8px;margin-bottom:18px;}
.fn-pd-atc{flex:2;background:#DB2777;color:#fff;border:none;padding:14px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .15s;}
.fn-pd-atc:hover{background:#BE185D;}
.fn-pd-atc-disabled{background:#D1D5DB;cursor:not-allowed;width:100%;}
.fn-pd-buy{flex:1;background:#111;color:#fff;border:none;padding:14px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .15s;}
.fn-pd-buy:hover{background:#333;}
.fn-pd-sku{font-size:11px;color:#9CA3AF;margin-bottom:18px;}
.fn-pd-accordion{border-top:1px solid #E5E5E5;}
.fn-pd-acc-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;cursor:pointer;padding:14px 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#111;font-family:inherit;}
.fn-pd-acc-toggle.open svg{transform:rotate(180deg);}
.fn-pd-acc-toggle svg{transition:transform .2s;flex-shrink:0;}
.fn-pd-acc-body{display:none;padding:0 0 16px;}
.fn-pd-acc-body.open{display:block;}
.fn-pd-acc-body p{font-size:13px;color:#374151;line-height:1.8;}
.fn-pd-videos{margin-bottom:48px;}
.fn-pd-videos h2{font-size:18px;font-weight:700;margin-bottom:20px;}
.fn-pd-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.fn-pd-video-wrap{aspect-ratio:16/9;background:#000;overflow:hidden;}
.fn-pd-video-wrap iframe{width:100%;height:100%;}
.fn-reviews-section{padding:40px 0;border-top:1px solid #E5E5E5;margin-bottom:48px;}
.fn-reviews-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.fn-reviews-head h2{font-size:18px;font-weight:700;}
.fn-reviews-avg{display:flex;align-items:center;gap:4px;font-size:14px;color:#111;}
.fn-reviews-avg strong{margin-left:4px;}
.fn-write-review{background:#F9F9F9;padding:24px;margin-bottom:32px;}
.fn-write-review h3{font-size:14px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em;}
.fn-star-row{display:flex;gap:4px;margin-bottom:14px;}
.fn-star-row button{background:none;border:none;cursor:pointer;padding:2px;}
.fn-review-list{display:flex;flex-direction:column;gap:1px;}
.fn-review-item{padding:20px 0;border-bottom:1px solid #E5E5E5;}
.fn-review-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.fn-review-author{font-size:13px;font-weight:700;color:#111;margin-bottom:4px;}
.fn-review-stars{display:flex;gap:2px;}
.fn-review-date{font-size:11px;color:#9CA3AF;}
.fn-review-title{display:block;font-size:13px;font-weight:600;color:#111;margin-bottom:4px;}
.fn-review-body{font-size:13px;color:#374151;line-height:1.6;margin:0;}
.fn-related{padding-top:40px;border-top:1px solid #E5E5E5;}
.fn-related-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.fn-related-head h2{font-size:18px;font-weight:700;}
.fn-related-head a{font-size:12px;font-weight:700;color:#111;text-decoration:none;letter-spacing:.04em;}
.fn-related-head a:hover{color:#DB2777;}

/* === STATIC PAGES (Privacy, About, Contact, etc.) === */
.fn-page-wrap{max-width:1440px;margin:0 auto;padding:0 24px 80px;}
.fn-page-inner{max-width:820px;margin:0 auto;}
.fn-page-title{font-size:28px;font-weight:900;color:#111;letter-spacing:-.5px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #E5E5E5;}
.fn-page-content{font-size:14px;color:#374151;line-height:1.9;}
.fn-page-content h1,.fn-page-content h2,.fn-page-content h3{font-weight:700;color:#111;margin:24px 0 10px;line-height:1.3;}
.fn-page-content h1{font-size:20px;}
.fn-page-content h2{font-size:17px;}
.fn-page-content h3{font-size:15px;}
.fn-page-content p{margin-bottom:14px;}
.fn-page-content ul,.fn-page-content ol{padding-left:20px;margin-bottom:14px;}
.fn-page-content ul{list-style:disc;}
.fn-page-content ol{list-style:decimal;}
.fn-page-content li{margin-bottom:6px;}
.fn-page-content a{color:#DB2777;text-decoration:underline;}
.fn-page-content strong{font-weight:700;color:#111;}
.fn-page-cta{background:#111;color:#fff;padding:60px 24px;text-align:center;}
.fn-page-cta-inner{max-width:560px;margin:0 auto;}
.fn-page-cta h2{font-size:24px;font-weight:900;margin-bottom:10px;letter-spacing:-.3px;}
.fn-page-cta p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:24px;}
.fn-page-cta-btn{display:inline-block;background:#DB2777;color:#fff;padding:14px 36px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .15s;}
.fn-page-cta-btn:hover{background:#BE185D;}

/* Contact page */
.fn-contact-inner{max-width:1000px;}
.fn-contact-intro{font-size:14px;color:#717171;margin-bottom:32px;}
.fn-contact-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;}
.fn-contact-info{display:flex;flex-direction:column;gap:24px;}
.fn-contact-item{display:flex;align-items:flex-start;gap:14px;}
.fn-contact-icon{width:40px;height:40px;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#DB2777;}
.fn-contact-item h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#111;margin-bottom:4px;}
.fn-contact-item p,.fn-contact-item a{font-size:13px;color:#374151;text-decoration:none;line-height:1.6;}
.fn-contact-item a:hover{color:#DB2777;}
.fn-contact-form-wrap{background:#fff;}
.fn-contact-form{display:flex;flex-direction:column;gap:0;}
.fn-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* === RESPONSIVE — Products + Pages === */
@media(max-width:1024px){
    .fn-products-wrap{grid-template-columns:1fr;padding:0 16px 48px;}
    .fn-filters{display:none;position:fixed;left:-260px;top:0;width:260px;height:100vh;background:#fff;z-index:850;padding:24px 20px;border-right:1px solid #E5E5E5;box-shadow:4px 0 20px rgba(0,0,0,.12);transition:left .25s ease;overflow-y:auto;}
    .fn-filters.fn-mob-open{display:flex;flex-direction:column;left:0;}
    .fn-products-area{padding:16px 0 0;}
    .fn-mob-filter-btn{display:flex;}
    .fn-sort-mobile{display:block;}
    .fn-product-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
    .fn-product-grid{grid-template-columns:repeat(2,1fr);gap:1px;}
    .fn-pd-wrap{grid-template-columns:1fr;gap:24px;}
    .fn-pd-gallery{flex-direction:column-reverse;}
    .fn-gallery-thumbs{flex-direction:row;width:100%;height:auto;}
    .fn-thumb{width:60px;height:72px;}
    .fn-gallery-main{aspect-ratio:1;}
    .fn-contact-grid{grid-template-columns:1fr;}
    .fn-contact-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
    .fn-form-row{grid-template-columns:1fr;}
    .fn-pd-section{padding:0 16px 60px;}
    .fn-bc-inner{padding:0 16px;}
}
@media(max-width:480px){
    .fn-product-grid{grid-template-columns:repeat(2,1fr);gap:1px;}
    .fn-pd-wrap{gap:16px;}
    .fn-pd-name{font-size:18px;}
    .fn-contact-info{grid-template-columns:1fr;}
    .fn-products-wrap{padding:0 12px 40px;}
}