:root {
    --background: #faf6ef;
    --foreground: #3a2f3a;
    --card: #fffdf9;
    --card-foreground: #3a2f3a;
    --popover: #fffdf9;
    --popover-foreground: #3a2f3a;
    --primary: #bf7a9e;
    --primary-hover: #ad6b8f;
    --primary-rgb: 191, 122, 158;
    --primary-foreground: #ffffff;
    --secondary: #f5eee8;
    --secondary-foreground: #4a3c47;
    --muted: #f7f1eb;
    --muted-foreground: #7f717c;
    --accent: #f1e7df;
    --accent-foreground: #4a3c47;
    --destructive: #d86480;
    --destructive-foreground: #ffffff;
    --border: #e2d5d8;
    --input: #e2d5d8;
    --ring: #bf7a9e;
    --success: #6ea58e;
    --warning: #c79f66;
    --info: #86a9b8;
}

[data-theme="dark"] {
    --background: #15131a;
    --foreground: #f2eaf3;
    --card: #211c26;
    --card-foreground: #f2eaf3;
    --popover: #211c26;
    --popover-foreground: #f2eaf3;
    --primary: #d3a1c0;
    --primary-hover: #c28fb1;
    --primary-rgb: 211, 161, 192;
    --primary-foreground: #231a25;
    --secondary: #2a2431;
    --secondary-foreground: #efe6f0;
    --muted: #302937;
    --muted-foreground: #c2b3c8;
    --accent: #352d3d;
    --accent-foreground: #efe6f0;
    --destructive: #c07a96;
    --destructive-foreground: #ffffff;
    --border: #3d3347;
    --input: #3d3347;
    --ring: #e2b4cd;
    --success: #7fb69e;
    --warning: #d0a37a;
    --info: #9bb7c3;
}

body {
    font-family: "Nunito", var(--font-sans);
    background:
        radial-gradient(circle at 12% 0%, rgba(220, 165, 190, 0.16), transparent 42%),
        radial-gradient(circle at 92% 8%, rgba(184, 205, 194, 0.14), transparent 34%),
        radial-gradient(rgba(95, 75, 92, 0.03) 0.55px, transparent 0.85px) 0 0 / 7px 7px repeat,
        radial-gradient(rgba(95, 75, 92, 0.022) 0.55px, transparent 0.9px) 3px 2px / 9px 9px repeat,
        var(--background);
    color: var(--foreground);
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 12% 0%, rgba(162, 112, 144, 0.14), transparent 40%),
        radial-gradient(circle at 88% 12%, rgba(118, 144, 158, 0.12), transparent 38%),
        radial-gradient(rgba(240, 226, 244, 0.02) 0.55px, transparent 0.95px) 0 0 / 8px 8px repeat,
        radial-gradient(rgba(240, 226, 244, 0.016) 0.55px, transparent 1px) 4px 4px / 12px 12px repeat,
        var(--background);
}

h1,
h2,
h3,
h4 {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.01em;
}

.container,
.nav-container,
.footer-container {
    max-width: 1440px;
}

.modern-nav {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 5px 16px -14px rgba(67, 47, 62, 0.22);
}

[data-theme="dark"] .modern-nav {
    background-color: rgba(28, 24, 33, 0.94);
    box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.52);
}

.search-form input {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.search-form input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(191, 122, 158, 0.11);
}

[data-theme="dark"] .search-form input {
    background: #322b35;
    color: var(--foreground);
}

[data-theme="dark"] .search-form input::placeholder {
    color: #b8adba;
}

[data-theme="dark"] .search-form input:focus {
    box-shadow: 0 0 0 3px rgba(200, 155, 180, 0.16);
}

.nav-link {
    border-radius: 999px;
}

.main-content {
    padding-top: 1.5rem;
    padding-bottom: 2.2rem;
}

.btn {
    border-radius: 999px;
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, #bf7a9e, #d0a1ba);
    border-color: transparent;
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ad6b8f, #c293ad);
    opacity: 1;
}

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #c89bb4, #d7b5c8);
    color: #2a2230;
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #b889a5, #caabc0);
}

.btn-outline {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .btn-outline {
    background: rgba(19, 14, 22, 0.64);
}

.card,
.table-wrapper,
.product-card,
.dropdown-menu {
    border-color: var(--border);
    border-radius: 16px;
    box-shadow: 0 14px 30px -26px rgba(69, 51, 63, 0.26);
}

[data-theme="dark"] .card,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .product-card,
[data-theme="dark"] .dropdown-menu {
    box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.5);
}

.product-card:hover {
    border-color: rgba(var(--primary-rgb), 0.45);
    transform: translateY(-4px);
}

.product-badge {
    background: var(--primary);
}

.badge-new {
    background: var(--success);
}

.pagination a,
.pagination span {
    border-radius: 999px;
}

.pagination .active,
.pagination .pagination-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.alert {
    border-radius: 12px;
}

.modern-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--secondary));
}

[data-theme="dark"] .modern-footer {
    background: linear-gradient(180deg, rgba(25, 22, 29, 0), rgba(42, 35, 46, 0.94));
}

/* Hide legacy breadcrumb trails across all templates */
.breadcrumbs,
.catalogue-breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    display: none !important;
}

.footer-column h4 {
    font-family: "Nunito", var(--font-sans);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.social-links a {
    border-radius: 999px;
}

.mpesa-logo {
    border-radius: 999px;
}

/* Keep checkout and auth pages in the same playful story style */
.checkout-page .checkout-wrapper,
.checkout-page .checkout-progress,
.checkout-page .checkout-main,
.checkout-page .checkout-sidebar,
.checkout-page .checkout-section,
.checkout-page .shipping-address-form,
.checkout-page .order-summary,
.checkout-page .order-summary-sidebar,
.checkout-page .saved-addresses-section .card,
.checkout-page .shipping-options,
.checkout-page .payment-card,
.checkout-page .payment-detail-panel,
.auth-page .auth-card-single {
    border: 2px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(255, 254, 251, 0.96), rgba(244, 235, 228, 0.9));
    box-shadow: 0 16px 30px -26px rgba(111, 74, 95, 0.24);
}

[data-theme="dark"] .checkout-page .checkout-wrapper,
[data-theme="dark"] .checkout-page .checkout-progress,
[data-theme="dark"] .checkout-page .checkout-main,
[data-theme="dark"] .checkout-page .checkout-sidebar,
[data-theme="dark"] .checkout-page .checkout-section,
[data-theme="dark"] .checkout-page .shipping-address-form,
[data-theme="dark"] .checkout-page .order-summary,
[data-theme="dark"] .checkout-page .order-summary-sidebar,
[data-theme="dark"] .checkout-page .saved-addresses-section .card,
[data-theme="dark"] .checkout-page .shipping-options,
[data-theme="dark"] .checkout-page .payment-card,
[data-theme="dark"] .checkout-page .payment-detail-panel,
[data-theme="dark"] .auth-page .auth-card-single {
    background: linear-gradient(165deg, rgba(47, 40, 52, 0.94), rgba(36, 30, 40, 0.9));
    box-shadow: 0 18px 32px -26px rgba(0, 0, 0, 0.52);
}

.checkout-page .checkout-progress,
.auth-page .auth-card-single {
    position: relative;
    overflow: hidden;
}

.checkout-page .checkout-progress::before,
.auth-page .auth-card-single::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -88px;
    bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191, 122, 158, 0.14) 0%, rgba(191, 122, 158, 0) 72%);
    pointer-events: none;
}

[data-theme="dark"] .checkout-page .checkout-progress::before,
[data-theme="dark"] .auth-page .auth-card-single::before {
    background: radial-gradient(circle, rgba(200, 155, 180, 0.18) 0%, rgba(200, 155, 180, 0) 72%);
}

.checkout-page .saved-addresses-section .card-header {
    background: linear-gradient(135deg, var(--primary), #d1a3bc) !important;
}

[data-theme="dark"] .checkout-page .saved-addresses-section .card-header {
    background: linear-gradient(135deg, var(--primary), #c190ac) !important;
}

/* Safer mobile tables across catalogue, account, checkout, dashboard */
.main-content .table-wrapper,
.main-content .table-responsive,
.main-content .table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-content table {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 992px) {
    .main-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: max-content;
        min-width: 100%;
    }

    .main-content table th,
    .main-content table td {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding-top: 1.1rem;
    }

    .container {
        padding: 0 1rem;
    }
}