:root {
    --red: #d70812;
    --red-dark: #95030a;
    --blue: #073986;
    --blue-deep: #031a43;
    --ink: #111827;
    --muted: #667085;
    --line: #e8edf5;
    --soft: #f7f9fc;
    --white: #ffffff;
    --gold: #c6a45b;
    --shadow: 0 24px 70px rgba(3, 26, 67, .13);
    --radius: 8px;
    --shell-max: 1600px;
    --shell-gutter: clamp(14px, 2.4vw, 34px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Cairo", Tahoma, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 12%, rgba(215, 8, 18, .08), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(7, 57, 134, .08), transparent 30rem),
        linear-gradient(180deg, #fff 0%, #f8fbff 52%, #fff 100%);
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(18px, 4vw, 64px);
    background: rgba(255, 255, 255, .84);
    border-bottom: 1px solid rgba(232, 237, 245, .9);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    color: var(--blue-deep);
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.main-nav a,
.filters a,
.admin-sidebar nav a {
    padding: 10px 14px;
    border-radius: var(--radius);
    color: var(--blue-deep);
    transition: .25s ease;
}

.main-nav a:hover,
.filters a:hover,
.filters a.active,
.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
    background: rgba(7, 57, 134, .08);
    color: var(--red);
}

.main-nav b {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: .78rem;
}

.hero {
    min-height: calc(100vh - 88px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    padding: clamp(28px, 5vw, 72px) clamp(18px, 5vw, 76px);
    overflow: hidden;
}

.hero-content h1,
.page-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 6vw, 5.6rem);
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--blue-deep);
}

.hero-content p:not(.eyebrow),
.page-hero p:not(.eyebrow) {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.08rem;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-weight: 800;
}

.hero-actions,
.actions,
.price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    border: 0;
    border-radius: var(--radius);
    padding: 11px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    cursor: pointer;
    font-weight: 800;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--red), var(--blue));
    box-shadow: 0 14px 32px rgba(215, 8, 18, .2);
}

.btn-ghost {
    color: var(--blue-deep);
    background: var(--white);
    border: 1px solid var(--line);
}

.btn.mini {
    min-height: 34px;
    padding: 7px 10px;
    font-size: .86rem;
    background: #eef4ff;
    color: var(--blue);
}

.btn.danger {
    color: var(--red-dark);
    background: #fff0f0;
}

.full {
    grid-column: 1 / -1;
    width: 100%;
}

.hero-visual {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
}

.hero-visual::before {
    content: "";
    position: absolute;
    width: min(82vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from 40deg, var(--red), var(--gold), var(--blue), var(--red)) border-box;
    border: 2px solid transparent;
    box-shadow: var(--shadow);
    animation: slow-spin 18s linear infinite;
}

.hero-logo {
    position: relative;
    width: min(72vw, 430px);
    filter: drop-shadow(0 20px 30px rgba(3, 26, 67, .18));
    animation: float 5s ease-in-out infinite;
}

.floating-card {
    position: absolute;
    width: 190px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.floating-card strong,
.floating-card span {
    display: block;
}

.floating-card span {
    color: var(--muted);
}

.card-one {
    right: 0;
    top: 80px;
}

.card-two {
    left: 20px;
    bottom: 76px;
}

.section,
.page-hero,
.product-detail {
    padding: clamp(34px, 6vw, 86px) clamp(18px, 5vw, 76px);
}

.section-heading {
    margin-bottom: 26px;
}

.section-heading h2,
.intro-band h2,
.panel h2 {
    margin: 0;
    color: var(--blue-deep);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    letter-spacing: 0;
    line-height: 1.2;
}

.intro-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--blue-deep);
    color: var(--white);
}

.intro-band h2,
.intro-band .eyebrow {
    color: var(--white);
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-width: min(100%, 440px);
}

.stats span,
.metric-grid article {
    border-radius: var(--radius);
    padding: 18px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
}

.stats b,
.metric-grid strong {
    display: block;
    font-size: 1.7rem;
}

.category-grid,
.product-grid,
.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.category-tile {
    min-height: 170px;
    padding: 24px;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(3, 26, 67, .84), rgba(7, 57, 134, .78)),
        linear-gradient(135deg, var(--red), var(--blue));
    color: var(--white);
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-tile span {
    display: block;
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 12px;
}

.category-tile small {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
}

.product-card,
.panel,
.login-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 50px rgba(3, 26, 67, .08);
}

.product-card {
    overflow: hidden;
}

.product-media,
.detail-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f5ff, #fff4f4);
    transition: transform .2s ease;
}

.product-media img,
.detail-media img,
.cart-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55), transparent 70%);
    transform: translateX(120%);
}

.product-card:hover .shine {
    animation: shine 1.1s ease;
}

.product-body {
    padding: 18px;
}

.product-body h3 {
    margin: 0 0 8px;
    color: var(--blue-deep);
}

.product-body p:not(.eyebrow) {
    color: var(--muted);
}

.price-row {
    justify-content: space-between;
    margin: 14px 0;
}

.price-row strong {
    color: var(--red);
    font-size: 1.2rem;
}

del {
    color: var(--muted);
}

.compact {
    min-height: 300px;
    display: grid;
    align-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,244,255,.88));
}

.shop-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
}

.filters {
    align-self: start;
    position: sticky;
    top: 104px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--line);
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 70px);
    align-items: center;
    min-height: calc(100vh - 88px);
}

.detail-media {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.detail-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 4.2rem);
    line-height: 1.1;
    color: var(--blue-deep);
}

.large strong {
    font-size: 2rem;
}

.stock {
    color: var(--muted);
}

.buy-box {
    display: flex;
    gap: 12px;
}

.buy-box input,
.cart-row input {
    width: 88px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--white);
    color: var(--ink);
    outline-color: rgba(7, 57, 134, .35);
}

label {
    display: grid;
    gap: 7px;
    color: var(--blue-deep);
    font-weight: 700;
}

.check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.check input {
    width: auto;
}

.cart-table,
.checkout-grid,
.admin-grid {
    display: grid;
    gap: 18px;
}

.cart-row {
    display: grid;
    grid-template-columns: 98px 1fr 100px 120px;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.cart-row img {
    aspect-ratio: 1;
    border-radius: var(--radius);
}

.cart-row h3,
.cart-row p {
    margin: 0;
}

.cart-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    background: var(--soft);
}

.checkout-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.panel {
    padding: 20px;
}

.order-box p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.empty-state,
.flash {
    max-width: 980px;
    margin: 22px auto;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: #eef8f0;
    color: #116329;
    border: 1px solid #caeacf;
}

.flash.danger {
    background: #fff0f0;
    color: var(--red-dark);
    border-color: #ffd2d2;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px clamp(18px, 5vw, 76px);
    color: var(--white);
    background: var(--blue-deep);
}

.site-footer div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-footer img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: var(--white);
    border-radius: 50%;
}

.admin-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(100%, 460px);
    padding: 28px;
}

.login-card img {
    width: 112px;
    margin: 0 auto 14px;
}

.login-card h1 {
    margin: 0 0 18px;
    text-align: center;
    color: var(--blue-deep);
}

.admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
    background: #f5f7fb;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    background: var(--white);
    border-left: 1px solid var(--line);
}

.admin-brand img {
    width: 64px;
    height: 64px;
}

.admin-sidebar nav {
    display: grid;
    gap: 6px;
}

.store-link {
    margin-top: auto;
    color: var(--red);
    font-weight: 800;
}

.admin-main {
    min-width: 0;
    padding: 24px;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-topbar h1 {
    margin: 0;
    color: var(--blue-deep);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.metric-grid {
    margin-bottom: 18px;
}

.metric-grid article {
    background: var(--white);
}

.metric-grid span {
    color: var(--muted);
}

.admin-grid {
    grid-template-columns: 380px minmax(0, 1fr);
}

.sticky-panel {
    align-self: start;
    position: sticky;
    top: 24px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    padding: 12px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    color: var(--blue-deep);
    background: #f8fbff;
}

td small {
    display: block;
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    color: var(--blue);
    background: #eef4ff;
    font-weight: 800;
    font-size: .82rem;
}

.inline-form {
    display: grid;
    gap: 8px;
    min-width: 190px;
}

.order-admin table {
    min-width: 1100px;
}

.reveal,
.product-card,
.category-tile,
.panel,
.metric-grid article {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

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

@keyframes shine {
    to { transform: translateX(-120%); }
}

@media (max-width: 980px) {
    .hero,
    .product-detail,
    .shop-layout,
    .checkout-grid,
    .admin-grid,
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .hero-visual {
        min-height: 420px;
    }

    .category-grid,
    .product-grid,
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters,
    .sticky-panel,
    .admin-sidebar {
        position: static;
    }

    .admin-sidebar {
        height: auto;
    }
}

@media (max-width: 640px) {
    .site-header,
    .site-footer,
    .intro-band,
    .cart-summary,
    .admin-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .main-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid,
    .product-grid,
    .stats,
    .metric-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .hero-content h1,
    .page-hero h1 {
        font-size: 2.4rem;
    }

    .hero-visual {
        min-height: 330px;
    }

    .floating-card {
        width: 150px;
        padding: 12px;
    }

    .cart-row {
        grid-template-columns: 74px 1fr;
    }
}

/* Checkout missing-fields modal */
body.checkout-modal-open {
    overflow: hidden;
}

.checkout-missing-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.checkout-missing-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.checkout-missing-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 45, .58);
    backdrop-filter: blur(7px);
}

.checkout-missing-card {
    position: relative;
    width: min(100%, 480px);
    max-height: min(720px, calc(100vh - 40px));
    overflow: auto;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    background: linear-gradient(155deg, #fff 0%, #f7faff 100%);
    box-shadow: 0 30px 90px rgba(8, 30, 68, .28);
    text-align: center;
    transform: translateY(22px) scale(.96);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.checkout-missing-modal.is-visible .checkout-missing-card {
    transform: translateY(0) scale(1);
}

.checkout-missing-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, #cf182c, #ef5262, #163c78);
}

.checkout-missing-close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #edf2f9;
    color: #52627a;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.checkout-missing-close:hover {
    color: #fff;
    background: #cf182c;
    transform: rotate(8deg);
}

.checkout-missing-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg, #d82136, #aa1024);
    box-shadow: 0 14px 28px rgba(207, 24, 44, .24);
    font-size: 30px;
    transform: rotate(-3deg);
}

.checkout-missing-kicker {
    color: #cf182c;
    font-size: 13px;
    font-weight: 900;
}

.checkout-missing-card h2 {
    margin: 6px 0 8px;
    color: #102d5c;
    font-size: clamp(23px, 4vw, 30px);
}

.checkout-missing-card > p {
    margin: 0 auto 20px;
    color: #66758b;
    line-height: 1.8;
}

.checkout-missing-card ul {
    display: grid;
    gap: 9px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    text-align: right;
}

.checkout-missing-card li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #f3ccd1;
    border-radius: 13px;
    background: #fff7f8;
}

.checkout-missing-card li > i {
    color: #cf182c;
    font-size: 18px;
}

.checkout-missing-card li span {
    display: grid;
    gap: 2px;
}

.checkout-missing-card li strong {
    color: #193761;
    font-size: 14px;
}

.checkout-missing-card li small {
    color: #8b5c63;
    font-size: 12px;
}

.checkout-missing-action {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #163c78, #0d2856);
    box-shadow: 0 12px 24px rgba(22, 60, 120, .22);
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 540px) {
    .checkout-missing-modal {
        align-items: end;
        padding: 12px;
    }

    .checkout-missing-card {
        padding: 30px 20px 20px;
        border-radius: 22px;
    }
}

/* Admin typography and professional product editor */
html:has(body.admin-shell),
html:has(body.admin-login) {
    font-size: 14px;
}

body.admin-shell {
    font-size: .94rem;
}

.admin-shell .admin-sidebar nav a,
.admin-shell input,
.admin-shell select,
.admin-shell textarea,
.admin-shell button,
.admin-shell table {
    font-size: .9rem;
}

.admin-shell .admin-dashboard-hero h1,
.admin-shell .product-form-hero h1 {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.admin-shell .admin-dashboard-hero.compact h1 {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.admin-shell .admin-panel-head h2 {
    font-size: 1rem;
}

.product-form-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--admin-red);
    font-size: .76rem;
    font-weight: 900;
}

.product-form-hero {
    align-items: flex-start;
    margin-bottom: 14px;
    padding-top: 8px;
}

.product-form-hero p {
    max-width: 620px;
    margin-top: 7px;
    font-size: .84rem;
    line-height: 1.7;
}

.product-form-page {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
}

.product-form-main,
.product-form-side {
    gap: 14px;
}

.product-form-side {
    position: sticky;
    top: 92px;
}

.product-form-card {
    padding: 17px;
    border-radius: 12px;
}

.product-section-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--admin-border);
}

.product-section-head > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, var(--admin-navy), #0d55b5);
    font-weight: 900;
}

.product-section-head h2,
.product-section-head p {
    margin: 0;
}

.product-section-head h2 {
    color: var(--admin-text);
    font-size: 1rem;
}

.product-section-head p {
    margin-top: 3px;
    color: var(--admin-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.product-section-head > i {
    color: #9aabc2;
    font-size: 1.1rem;
}

.product-section-head.is-compact {
    grid-template-columns: 34px minmax(0, 1fr);
}

.product-form-card .form-grid {
    gap: 14px;
}

.product-form-card label,
.product-form-card .full {
    gap: 6px;
    font-size: .84rem;
}

.field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.field-label b {
    padding: 2px 7px;
    border-radius: 99px;
    color: #b21829;
    background: #fff0f2;
    font-size: .66rem;
}

.product-form-card label > small {
    color: var(--admin-muted);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
}

.product-form-card input,
.product-form-card select {
    min-height: 41px;
}

.product-form-card input:focus,
.product-form-card select:focus,
.product-form-card textarea:focus {
    outline: 0;
    border-color: #6e91c5;
    box-shadow: 0 0 0 3px rgba(7, 57, 134, .08);
}

.product-media-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 130px;
    gap: 12px;
}

.upload-drop {
    min-height: 160px;
    padding: 18px;
    border-radius: 12px;
    border-width: 1.5px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.upload-drop:hover {
    border-color: var(--admin-navy);
    background: #f1f6ff;
    transform: translateY(-2px);
}

.upload-drop > i {
    color: var(--admin-navy);
    font-size: 1.8rem;
}

.upload-drop strong {
    color: var(--admin-text);
    font-size: .9rem;
}

.upload-drop span,
.upload-drop small {
    font-size: .7rem;
}

.product-image-preview {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 12px;
}

.product-image-preview > span {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
    padding: 3px 7px;
    border-radius: 99px;
    color: #fff;
    background: rgba(3, 26, 67, .72);
    font-size: .65rem;
}

.input-with-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
}

.input-with-unit input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.input-with-unit > span {
    display: grid;
    place-items: center;
    color: var(--admin-navy);
    background: #eef4fc;
    font-size: .72rem;
    font-weight: 900;
}

.product-advanced-card {
    padding: 0;
    overflow: hidden;
}

.product-advanced-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.product-advanced-card summary::-webkit-details-marker {
    display: none;
}

.product-advanced-card summary > span {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
}

.product-advanced-card summary > span > i {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--admin-navy);
    background: #edf4ff;
}

.product-advanced-card summary strong {
    color: var(--admin-text);
    font-size: .9rem;
}

.product-advanced-card summary small {
    color: var(--admin-muted);
    font-size: .7rem;
}

.product-advanced-card summary > i {
    color: #8798b0;
    transition: transform .2s ease;
}

.product-advanced-card[open] summary > i {
    transform: rotate(180deg);
}

.product-details-body {
    padding: 0 18px 16px;
}

.product-advanced-card .admin-help-text {
    margin: 0;
    padding: 0 18px 16px;
}

.product-form-guide {
    padding: 15px 17px;
    border-color: #d6e3f6;
    background: linear-gradient(145deg, #f7faff, #fff);
}

.product-form-guide > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-navy);
    font-size: .88rem;
}

.product-form-guide ol {
    display: grid;
    gap: 7px;
    margin: 11px 0 0;
    padding-right: 20px;
    color: var(--admin-muted);
    font-size: .75rem;
    line-height: 1.6;
}

.product-preview-card {
    text-align: right;
}

.product-preview-card img {
    max-height: 190px;
}

.product-preview-card h3 {
    font-size: .98rem;
}

.product-preview-card strong {
    font-size: 1.08rem;
}

.product-form-savebar {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #d7e1ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 40px rgba(3, 26, 67, .14);
    backdrop-filter: blur(10px);
}

.product-form-savebar > div {
    display: grid;
    gap: 2px;
    margin-left: auto;
}

.product-form-savebar strong {
    color: var(--admin-text);
    font-size: .86rem;
}

.product-form-savebar small {
    color: var(--admin-muted);
    font-size: .7rem;
}

@media (max-width: 1180px) {
    .product-form-side {
        position: static;
    }
}

@media (max-width: 760px) {
    .product-form-actions {
        display: none;
    }

    .product-media-editor {
        grid-template-columns: 1fr;
    }

    .product-form-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .product-form-savebar > div {
        margin: 0 0 4px;
    }
}

/* Zohoor France storefront redesign */
.store-shell {
    --blue-deep: #002f72;
    --blue: #06489c;
    --red: #e71d2b;
    --line: #e7edf6;
    --soft: #f4f7fb;
    --shadow: 0 14px 34px rgba(0, 47, 114, .10);
    background: var(--blue-deep) !important;
    min-height: 100vh;
}

.store-shell .site-header,
.store-shell .store-frame,
.store-shell .mobile-top,
.store-shell .mobile-bottom-nav {
    max-width: 1360px;
    margin-inline: auto;
}

.store-shell .site-header {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    box-shadow: var(--shadow);
}

.top-header {
    display: grid;
    grid-template-columns: minmax(190px, .75fr) minmax(280px, 1.15fr) minmax(220px, .75fr);
    align-items: center;
    gap: 18px;
    padding: 14px 24px;
    min-height: 76px;
}

.store-shell .brand {
    justify-self: end;
    color: var(--red);
    gap: 10px;
}

.store-shell .brand img {
    width: 82px;
    height: 48px;
    object-fit: contain;
}

.store-shell .brand span {
    color: var(--blue-deep);
    font-weight: 900;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--blue-deep);
    font-size: .88rem;
}

.header-icons a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: .7rem;
    padding-inline: 5px;
}

.search-box {
    display: grid;
    grid-template-columns: 46px 1fr;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.search-box input {
    border: 0;
    min-height: 44px;
    color: var(--muted);
}

.search-box button {
    border: 0;
    background: var(--red);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.store-shell .main-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    min-height: 46px;
    background: var(--blue-deep);
}

.store-shell .main-nav a {
    display: grid;
    place-items: center;
    min-width: 118px;
    padding: 12px 16px;
    color: #fff;
    border-radius: 0;
    font-size: .9rem;
    font-weight: 800;
}

.store-shell .main-nav a:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.store-frame {
    background: #fff;
    padding: 22px;
    min-height: calc(100vh - 160px);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
}

.hero-banner,
.offer-banner {
    position: relative;
    min-height: 338px;
    overflow: hidden;
    border-radius: 8px;
    background: #f3f6fb;
}

.hero-banner img,
.offer-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner::after,
.offer-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.9) 58%, rgba(255,255,255,.96));
}

.hero-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    margin-inline-start: auto;
    padding: 52px 54px;
    text-align: right;
}

.hero-copy h1 {
    margin: 0 0 12px;
    color: var(--blue-deep);
    font-size: clamp(2.05rem, 4vw, 3.5rem);
    line-height: 1.18;
}

.hero-copy h1 span {
    display: block;
}

.hero-copy h1 span:last-child {
    color: var(--red);
}

.hero-copy p {
    margin: 0 0 22px;
    color: #1f2937;
}

.store-shell .btn-primary {
    background: var(--red);
    box-shadow: 0 12px 24px rgba(231, 29, 43, .22);
}

.btn-blue {
    color: #fff;
    background: var(--blue-deep);
}

.service-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 28px;
}

.service-strip article {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.service-strip b {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--red);
    border: 1px solid #ffd8dc;
}

.service-strip strong {
    color: var(--blue-deep);
}

.service-strip span {
    color: var(--muted);
    font-size: .84rem;
}

.store-shell .section {
    padding: 22px 0;
}

.section-tight {
    padding-block: 18px;
}

.section-heading.center {
    text-align: center;
}

.store-shell .section-heading h2,
.shop-title h1 {
    color: var(--blue-deep);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.store-shell .category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.store-shell .category-tile {
    min-height: 148px;
    display: grid;
    align-content: end;
    padding: 16px;
    color: var(--blue-deep);
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.9)),
        url("https://images.unsplash.com/photo-1556911220-bff31c812dba?auto=format&fit=crop&w=500&q=80") center/cover;
    border: 1px solid var(--line);
    box-shadow: none;
}

.store-shell .category-tile span {
    margin: 0 0 4px;
    font-size: 1rem;
}

.store-shell .category-tile small {
    color: var(--blue);
    font-weight: 800;
}

.offer-banner {
    min-height: 178px;
    margin: 8px 0 18px;
}

.offer-banner::after {
    background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.72) 52%, rgba(255,255,255,.95));
}

.offer-banner div {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    margin-inline-start: auto;
    padding: 34px;
}

.offer-banner h2 {
    margin: 0 0 6px;
    color: var(--red);
}

.offer-banner p {
    margin: 0 0 14px;
    color: var(--blue-deep);
    font-size: 1.15rem;
    font-weight: 900;
}

.store-shell .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.store-shell .product-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 47, 114, .05);
}

.store-shell .product-media {
    aspect-ratio: 1.12;
    margin: 12px 12px 0;
    border-radius: 8px;
    background: #f8fafc;
}

.store-shell .product-media img {
    object-fit: contain;
    padding: 12px;
}

.wish-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.icon-btn,
.cart-add-btn,
.view-tools button,
.detail-actions button,
.detail-actions a {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--blue-deep);
    cursor: pointer;
}

.cart-add-btn {
    background: var(--blue-deep);
    color: #fff;
    border-color: var(--blue-deep);
}

.store-shell .product-body {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 8px 12px;
    padding: 14px;
}

.store-shell .product-body h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--blue-deep);
    font-size: .98rem;
}

.product-category {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .82rem;
}

.store-shell .price-row {
    grid-column: 1;
    margin: 0;
    justify-content: flex-start;
}

.store-shell .price-row strong {
    color: var(--blue-deep);
    font-size: .98rem;
}

.store-shell .product-body form {
    grid-column: 2;
    grid-row: 3;
}

.store-shell .product-body .product-cart-area {
    grid-column: 2;
    grid-row: 3;
}

.product-cart-area .catalog-qty-control {
    width: 96px;
}

.store-shell .product-body .product-cart-area .catalog-qty-control {
    transform: translateX(64px);
}

.shop-title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px;
    padding: 18px 0 24px;
}

.shop-title p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.shop-title h1 {
    margin: 0;
}

.shop-title.centered {
    place-items: center;
    min-height: 320px;
    text-align: center;
}

.view-tools {
    display: flex;
    gap: 8px;
}

.store-shell .shop-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
}

.store-shell .filters {
    top: 150px;
    padding: 16px;
    box-shadow: none;
}

.store-shell .filters h3,
.store-shell .filters strong {
    margin: 0;
    color: var(--blue-deep);
}

.product-detail {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1fr);
    min-height: auto;
    padding: 34px 0;
}

.detail-media {
    background: #f7f9fc;
}

.detail-media img {
    object-fit: contain;
    padding: 32px;
}

.detail-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.rating {
    color: #f6b700;
    margin: 10px 0;
}

.rating span {
    color: var(--muted);
}

.sale-badge {
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--red);
    background: #ffecef;
    font-size: .8rem;
    font-weight: 900;
}

.cart-page-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

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

.cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 130px 120px 70px;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.cart-item img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 8px;
    background: #f7f9fc;
}

.cart-item h3,
.cart-item p {
    margin: 0;
}

.qty-control {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.qty-control button,
.qty-control input {
    border: 0;
    min-height: 36px;
    text-align: center;
    background: #fff;
}

.qty-control button {
    cursor: pointer;
    color: var(--blue-deep);
    font-weight: 900;
}

.remove-btn {
    border: 0;
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--red);
    background: #fff0f2;
    cursor: pointer;
    font-weight: 800;
}

.cart-total-panel {
    position: sticky;
    top: 150px;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 47, 114, .05);
}

.cart-total-panel h2 {
    margin: 0;
    color: var(--blue-deep);
}

.cart-total-panel p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding-block: 8px;
    border-bottom: 1px solid var(--line);
}

.toast-stack {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 100;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
}

.toast {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    padding: 13px 14px;
    border-radius: 8px;
    color: var(--blue-deep);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0, 47, 114, .18);
    animation: toast-in .24s ease both;
}

.toast::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: var(--red);
}

.toast.danger::before {
    content: "!";
}

.toast-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.toast-body strong {
    color: var(--blue-deep);
    font-size: .95rem;
    line-height: 1.35;
}

.toast-body span {
    color: #65748b;
    font-size: .82rem;
    line-height: 1.5;
}

.toast-actions {
    display: flex;
    margin-top: 6px;
}

.toast-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 7px;
    background: var(--blue);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.mobile-top,
.mobile-bottom-nav,
.mobile-menu {
    display: none;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .store-shell {
        background: #fff;
        padding-bottom: 74px;
    }

    .store-shell .site-header {
        display: none;
    }

    .mobile-top {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .mobile-menu {
        position: sticky;
        top: 55px;
        z-index: 29;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 14px 12px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 22px rgba(0,47,114,.08);
    }

    .mobile-menu.is-open,
    .mobile-menu-open .mobile-menu {
        display: grid;
    }

    .mobile-menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--blue-deep);
        background: #fff;
        font-size: .78rem;
        font-weight: 800;
    }

    .mobile-menu-toggle[aria-expanded="true"] {
        color: var(--red);
        background: #fff0f2;
        border-radius: 8px;
    }

    .mobile-top button,
    .mobile-top a:not(.mobile-logo) {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 0;
        background: transparent;
        color: var(--blue-deep);
    }

    .mobile-logo {
        justify-self: center;
    }

    .mobile-logo img {
        width: 78px;
        height: 44px;
        object-fit: contain;
    }

    .mobile-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        padding: 8px 10px 10px;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 24px rgba(0,47,114,.08);
    }

    .mobile-bottom-nav a {
        position: relative;
        display: grid;
        place-items: center;
        gap: 2px;
        color: var(--blue-deep);
        font-size: 1.05rem;
    }

    .mobile-bottom-nav span {
        font-size: .72rem;
        font-weight: 800;
    }

    .mobile-bottom-nav .cart-count {
        position: absolute;
        top: -2px;
        left: 26%;
    }

    .store-frame {
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
    }

    .hero-banner {
        min-height: 360px;
    }

    .hero-banner::after {
        background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.92));
    }

    .hero-copy {
        width: 100%;
        margin: 0;
        padding: 28px 22px;
        text-align: right;
    }

    .hero-copy h1 {
        font-size: 2.05rem;
    }

    .service-strip {
        grid-template-columns: repeat(4, minmax(118px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .service-strip article {
        min-width: 118px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .service-strip b {
        grid-row: auto;
    }

    .store-shell .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-shell .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-shell .shop-layout,
    .product-detail,
    .cart-page-body,
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .store-shell .filters,
    .cart-total-panel {
        position: static;
    }

    .cart-item {
        grid-template-columns: 72px 1fr;
    }

    .cart-item img {
        width: 72px;
        height: 72px;
    }

    .qty-control,
    .cart-item > strong,
    .cart-item form:last-child {
        grid-column: 2;
    }
}

@media (max-width: 520px) {
    .store-shell .product-grid {
        grid-template-columns: 1fr;
    }

    .store-shell .product-card {
        display: grid;
        grid-template-columns: 44% 1fr;
        min-height: 164px;
    }

    .store-shell .product-media {
        margin: 10px;
        aspect-ratio: auto;
        height: calc(100% - 20px);
    }

    .store-shell .product-body {
        align-content: center;
    }

    .store-shell .product-body .product-cart-area {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .store-shell .product-body .product-cart-area .catalog-qty-control {
        width: 112px;
        transform: none;
    }
}

/* Admin dashboard polish to match the reference composition */
.admin-shell {
    background: var(--blue-deep);
}

.admin-main {
    margin: 14px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 23, 58, .18);
}

.admin-sidebar {
    color: #fff;
    background: linear-gradient(180deg, #053777, #03265a);
    border-left: 0;
}

.admin-sidebar .brand {
    color: #fff;
}

.admin-sidebar .brand span,
.admin-sidebar nav a {
    color: #fff;
}

.admin-sidebar nav a.active,
.admin-sidebar nav a:hover {
    color: #fff;
    background: var(--red);
}

.admin-sidebar .btn-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
}

.admin-sidebar .store-link {
    color: #fff;
}

.metric-grid article {
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(0, 47, 114, .06);
}

/* Compact storefront pass: cleaner Arabic font, less whitespace, FA icons */
body,
button,
input,
select,
textarea {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

.store-shell {
    font-size: 14px;
    line-height: 1.42;
}

.store-shell .top-header {
    min-height: 60px;
    padding: 8px 18px;
}

.store-shell .brand img {
    width: 72px;
    height: 40px;
}

.store-shell .brand span {
    font-size: .88rem;
}

.store-shell .header-icons {
    gap: 11px;
    font-size: .78rem;
}

.store-shell .search-box input {
    min-height: 38px;
    padding-block: 7px;
    font-size: .82rem;
}

.store-shell .main-nav {
    min-height: 38px;
}

.store-shell .main-nav a {
    min-width: 102px;
    padding: 9px 12px;
    font-size: .78rem;
}

.store-frame {
    padding: 14px;
}

.hero-banner {
    min-height: 245px;
}

.hero-copy {
    width: min(100%, 390px);
    padding: 30px 36px;
}

.hero-copy h1 {
    margin-bottom: 8px;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
}

.hero-copy p {
    margin-bottom: 13px;
    font-size: .88rem;
    line-height: 1.55;
}

.store-shell .btn {
    min-height: 38px;
    padding: 9px 14px;
    font-size: .82rem;
}

.service-strip {
    gap: 9px;
    margin: 12px 0 16px;
}

.service-strip article {
    grid-template-columns: 38px 1fr;
    padding: 10px 11px;
}

.service-strip b {
    width: 32px;
    height: 32px;
    font-size: .85rem;
}

.service-strip strong {
    font-size: .82rem;
}

.service-strip span {
    font-size: .72rem;
}

.store-shell .section {
    padding: 12px 0;
}

.store-shell .section-heading {
    margin-bottom: 12px;
}

.store-shell .section-heading h2,
.shop-title h1 {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.store-shell .category-grid {
    gap: 9px;
}

.store-shell .category-tile {
    min-height: 112px;
    padding: 11px;
}

.store-shell .category-tile span {
    font-size: .84rem;
}

.store-shell .category-tile small {
    font-size: .72rem;
}

.offer-banner {
    min-height: 132px;
    margin: 4px 0 10px;
}

.offer-banner div {
    padding: 22px;
}

.offer-banner h2 {
    font-size: 1.12rem;
}

.offer-banner p {
    margin-bottom: 9px;
    font-size: .9rem;
}

.store-shell .product-grid {
    gap: 10px;
}

.store-shell .product-card {
    box-shadow: 0 5px 14px rgba(0, 47, 114, .045);
}

.store-shell .product-media {
    margin: 8px 8px 0;
}

.store-shell .product-media img {
    padding: 7px;
}

.store-shell .wish-btn {
    top: 10px;
    right: 10px;
}

.store-shell .icon-btn,
.store-shell .cart-add-btn,
.store-shell .view-tools button,
.store-shell .detail-actions button,
.store-shell .detail-actions a {
    width: 31px;
    height: 31px;
    font-size: .82rem;
}

.store-shell .product-body {
    gap: 5px 8px;
    padding: 10px;
}

.store-shell .product-body h3 {
    font-size: .8rem;
    line-height: 1.35;
}

.detail-buy-box .product-cart-area {
    width: min(100%, 260px);
}

.detail-buy-box .catalog-qty-control {
    width: 150px;
}

.store-shell .product-category {
    font-size: .7rem;
}

.store-shell .product-body .product-cart-area {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    position: static;
}

.store-shell .product-body .product-cart-area .catalog-qty-control {
    width: 108px;
    transform: none;
}

.store-shell .product-body .product-cart-area form:not(.catalog-qty-control) {
    grid-column: auto;
    grid-row: auto;
}

.checkout-flow-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.checkout-flow,
.checkout-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 47, 114, .05);
}

.checkout-flow {
    padding: 14px;
}

.checkout-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.checkout-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 800;
}

.checkout-steps span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: var(--blue-deep);
    background: #fff;
    border: 1px solid var(--line);
    font-size: .75rem;
}

.checkout-steps li.active {
    color: #fff;
    background: var(--blue-deep);
    border-color: var(--blue-deep);
}

.checkout-steps li.done {
    color: var(--blue-deep);
    background: #eef4ff;
}

.checkout-step-panel {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.checkout-step-panel.active {
    display: block;
    animation: checkout-step-in .24s ease both;
}

.checkout-step-panel legend {
    margin-bottom: 12px;
    color: var(--blue-deep);
    font-size: 1.05rem;
    font-weight: 900;
}

.address-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.shipping-options {
    display: grid;
    gap: 8px;
}

.shipping-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.shipping-option:has(input:checked) {
    border-color: var(--blue);
    background: #f2f7ff;
}

.shipping-option input {
    width: auto;
}

.shipping-option strong,
.shipping-option small {
    display: block;
}

.shipping-option small {
    color: var(--muted);
    font-size: .75rem;
}

.shipping-option b {
    color: var(--red);
}

.checkout-notes {
    margin-top: 10px;
}

.review-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.review-box p {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: var(--blue-deep);
    font-size: .86rem;
}

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

@keyframes checkout-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.store-footer {
    max-width: 1360px;
    margin: 0 auto;
    padding: 16px;
    color: #dce8ff;
    background: #001f4f;
}

.footer-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #063a84, #e71d2b);
}

.footer-kicker {
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.footer-newsletter h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 1.25rem;
}

.newsletter-form {
    display: grid;
    grid-template-columns: 1fr 110px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.newsletter-form input,
.newsletter-form button {
    border: 0;
    min-height: 42px;
}

.newsletter-form button {
    color: #fff;
    background: var(--blue-deep);
    cursor: pointer;
    font-weight: 900;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr);
    gap: 18px;
    padding: 22px 4px 14px;
}

.footer-logo {
    width: 86px;
    height: 54px;
    object-fit: contain;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
}

.footer-grid p {
    max-width: 360px;
    margin: 10px 0 0;
    color: #b9c9e8;
    font-size: .86rem;
}

.footer-grid nav {
    display: grid;
    align-content: start;
    gap: 7px;
}

.footer-grid h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: .95rem;
}

.footer-grid a,
.footer-bottom a {
    color: #dce8ff;
}

.footer-grid a:hover,
.footer-bottom a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: #b9c9e8;
    font-size: .82rem;
}

/* Softer premium footer */
.store-footer {
    color: var(--blue-deep);
    background: #f7f9fc;
    border-top: 1px solid var(--line);
}

.footer-newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    padding: 16px;
    border: 1px solid #dfe7f3;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,248,253,.96)),
        linear-gradient(135deg, rgba(6,72,156,.09), rgba(231,29,43,.07));
    box-shadow: 0 10px 28px rgba(0, 47, 114, .06);
}

.footer-kicker {
    color: var(--red);
    font-size: .72rem;
}

.footer-newsletter h2 {
    color: var(--blue-deep);
    font-size: 1.08rem;
}

.footer-newsletter p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.newsletter-form {
    border: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(0,47,114,.05);
}

.newsletter-form input {
    background: #fff;
}

.newsletter-form button {
    background: var(--red);
}

.footer-grid {
    padding: 20px 4px 12px;
}

.footer-logo {
    border: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(0,47,114,.05);
}

.footer-grid p {
    color: var(--muted);
}

.footer-grid h3 {
    color: var(--blue-deep);
}

.footer-grid a,
.footer-bottom a {
    color: #38527a;
}

.footer-grid a:hover,
.footer-bottom a:hover {
    color: var(--red);
}

.footer-bottom {
    border-top-color: #dfe7f3;
    color: var(--muted);
}

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-credit a {
    font-weight: 900;
}

.in-cart-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--red);
    box-shadow: 0 8px 18px rgba(231, 29, 43, .24);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.product-card .in-cart-chip {
    position: absolute;
    top: 46px;
    right: 10px;
    z-index: 3;
}

.catalog-qty-control {
    position: relative;
    isolation: isolate;
    background: #fff;
}

.catalog-qty-control input {
    color: var(--blue-deep);
    font-weight: 900;
}

.product-cart-area.qty-born .catalog-qty-control {
    animation: qty-shell-in .38s cubic-bezier(.18, .88, .28, 1.22) both;
}

.product-cart-area.qty-born .catalog-qty-control button:first-of-type {
    animation: qty-piece-in .34s .08s cubic-bezier(.18, .88, .28, 1.22) both;
}

.product-cart-area.qty-born .catalog-qty-control input {
    animation: qty-piece-in .34s .18s cubic-bezier(.18, .88, .28, 1.22) both;
}

.product-cart-area.qty-born .catalog-qty-control button:last-of-type {
    animation: qty-piece-in .34s .28s cubic-bezier(.18, .88, .28, 1.22) both;
}

.product-cart-area.qty-born .in-cart-chip {
    animation: chip-pop .42s .28s cubic-bezier(.18, .88, .28, 1.22) both;
}

.product-cart-area.qty-pulse .catalog-qty-control {
    animation: qty-pulse .28s ease both;
}

.cart-add-pop {
    animation: cart-icon-run .62s cubic-bezier(.2, .8, .2, 1) both;
}

.cart-burst {
    position: fixed;
    z-index: 300;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.cart-burst i {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(var(--red), var(--blue));
    transform: rotate(var(--angle)) translateY(0) scaleY(.2);
    transform-origin: 50% 22px;
    opacity: 0;
    animation: cart-ray .56s var(--delay) ease-out both;
}

@keyframes cart-icon-run {
    0% { transform: translateX(0) scale(1); }
    30% { transform: translateX(-7px) rotate(-9deg) scale(1.12); }
    62% { transform: translateX(18px) rotate(14deg) scale(.82); opacity: .55; }
    100% { transform: translateX(0) rotate(0) scale(1); opacity: 1; }
}

@keyframes cart-ray {
    0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scaleY(.15); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateY(-34px) scaleY(1); }
}

@keyframes qty-shell-in {
    from { opacity: 0; transform: translateX(-18px) scale(.78); filter: blur(2px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes qty-piece-in {
    from { opacity: 0; transform: translateY(8px) scale(.72); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chip-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.75); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qty-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

.store-shell .price-row strong {
    font-size: .82rem;
}

.shop-title {
    padding: 8px 0 12px;
}

.shop-title p {
    font-size: .76rem;
}

.store-shell .shop-layout {
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 12px;
}

.store-shell .filters {
    padding: 11px;
}

.product-detail {
    padding: 16px 0;
    gap: 20px;
}

.detail-copy h1 {
    font-size: clamp(1.35rem, 3vw, 2.2rem);
}

.detail-copy p {
    font-size: .9rem;
}

.detail-media img {
    padding: 20px;
}

.cart-page-body {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 12px;
}

.cart-items {
    gap: 8px;
}

.cart-item {
    grid-template-columns: 66px minmax(0, 1fr) 108px 92px 74px;
    gap: 9px;
    padding: 9px;
}

.cart-item img {
    width: 66px;
    height: 66px;
}

.cart-item h3 {
    margin: 0 0 3px;
    color: var(--blue-deep);
    font-size: .84rem;
    line-height: 1.32;
}

.cart-item p {
    margin: 0;
    color: var(--muted);
    font-size: .74rem;
}

.cart-item > strong {
    color: var(--blue-deep);
    font-size: .82rem;
    white-space: nowrap;
}

.qty-control {
    grid-template-columns: 29px 1fr 29px;
}

.qty-control button,
.qty-control input {
    min-height: 30px;
    font-size: .78rem;
}

.remove-btn {
    padding: 7px 8px;
    font-size: .75rem;
}

.cart-total-panel {
    gap: 9px;
    padding: 13px;
}

.cart-total-panel h2 {
    font-size: 1rem;
}

.cart-total-panel p {
    padding-block: 5px;
    font-size: .82rem;
}

.empty-state {
    margin: 0;
    padding: 26px 18px;
    text-align: center;
}

.empty-state h2 {
    margin: 0 0 6px;
    color: var(--blue-deep);
    font-size: 1.1rem;
}

.empty-state p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .86rem;
}

.mobile-bottom-nav a {
    font-size: .98rem;
}

.mobile-bottom-nav span {
    font-size: .68rem;
}

@media (max-width: 900px) {
    .hero-banner {
        min-height: 300px;
    }

    .hero-copy {
        padding: 22px 18px;
    }

    .hero-copy h1 {
        font-size: 1.75rem;
    }

    .service-strip {
        margin-block: 10px 12px;
    }

    .store-shell .category-grid,
    .store-shell .product-grid {
        gap: 9px;
    }

    .cart-page-body {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 58px minmax(0, 1fr) 84px;
        align-items: center;
    }

    .cart-item img {
        width: 58px;
        height: 58px;
    }

    .cart-item > strong {
        text-align: left;
    }

    .cart-item .qty-control {
        grid-column: 2;
        width: 108px;
    }

    .cart-item form:last-child {
        grid-column: 3;
        grid-row: 2;
    }

    .checkout-flow-layout,
    .footer-newsletter,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .checkout-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checkout-summary {
        position: static;
    }

    .store-footer {
        padding-bottom: 88px;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .address-grid,
    .checkout-flow .form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-flow {
        padding: 11px;
    }

    .checkout-steps {
        gap: 6px;
    }

    .checkout-steps li {
        min-height: 36px;
        padding: 7px;
        font-size: .72rem;
    }

    .newsletter-form {
        grid-template-columns: 1fr;
    }
}

/* Mobile product grid alignment */
@media (max-width: 700px) {
    .store-shell .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .store-shell .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
        min-height: 100%;
        height: 100%;
    }

    .store-shell .product-media {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin: 8px 8px 0 !important;
        border-radius: 8px;
    }

    .store-shell .product-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
    }

    .store-shell .product-body {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 2.75rem 1rem 1.45rem 34px;
        align-content: stretch;
        gap: 4px 6px;
        padding: 9px;
        min-height: 118px;
    }

    .store-shell .product-body h3 {
        grid-column: 1 / -1;
        grid-row: 1;
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--blue-deep);
        font-size: .78rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .store-shell .product-category {
        grid-column: 1 / -1;
        grid-row: 2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .68rem;
        line-height: 1rem;
    }

    .store-shell .price-row {
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: end;
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        min-height: 1.45rem;
        margin: 0;
    }

    .store-shell .price-row strong {
        font-size: .8rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .store-shell .price-row del {
        font-size: .68rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .store-shell .product-body .product-cart-area {
        grid-column: 1 / -1;
        grid-row: 4;
        align-self: end;
        justify-self: start;
        width: 100%;
    }

    .store-shell .product-body .product-cart-area form:not(.catalog-qty-control) {
        display: inline-grid;
        width: auto;
    }

    .store-shell .cart-add-btn {
        width: 34px;
        height: 34px;
    }

    .store-shell .product-body .product-cart-area .catalog-qty-control {
        width: 100px;
        max-width: 100%;
    }

    .product-card .in-cart-chip {
        top: 42px;
        right: 9px;
        font-size: .62rem;
        padding: 4px 7px;
    }
}

/* Final alignment fix */
.store-shell .site-header,
.store-shell .store-frame,
.store-footer,
.store-shell .mobile-top,
.store-shell .mobile-bottom-nav {
    width: min(100%, 1600px);
    max-width: 1600px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.store-shell .main-nav {
    justify-content: center;
}

.store-footer {
    box-sizing: border-box;
}

.store-shell .product-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(auto-fit, minmax(190px, 230px));
    justify-content: center;
    justify-items: stretch;
}

@media (min-width: 1500px) {
    .store-shell .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    }
}

@media (max-width: 700px) {
    .store-shell .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* MySQL storefront additions */
.category-tile img {
    width: 110px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
}

.sort-form {
    margin-inline-start: auto;
    width: min(100%, 220px);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}

.pagination a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--blue-deep);
    background: #fff;
    font-weight: 800;
}

.pagination a.active {
    color: #fff;
    background: var(--blue-deep);
    border-color: var(--blue-deep);
}

.detail-gallery {
    display: grid;
    gap: 10px;
}

.thumb-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.thumb-row button {
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.thumb-row img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.product-points {
    display: grid;
    gap: 7px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
    color: var(--blue-deep);
    font-weight: 800;
}

.product-points li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-points i {
    color: var(--red);
}

.product-tabs {
    max-width: 1360px;
    margin-inline: auto;
    padding: 0 22px 22px;
}

.tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.tabs button {
    min-width: 130px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--blue-deep);
    background: transparent;
    cursor: pointer;
    font-weight: 900;
}

.tabs button.active {
    color: var(--red);
    border-bottom-color: var(--red);
}

.tab-panel {
    display: none;
    padding: 16px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    color: #344054;
    background: #fff;
}

.tab-panel.active {
    display: block;
}

.account-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.account-card {
    width: min(100%, 520px);
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.account-brand {
    justify-content: center;
    margin-bottom: 12px;
}

.account-card h1 {
    margin: 0 0 18px;
    text-align: center;
    color: var(--blue-deep);
}

.account-switch {
    margin: 14px 0 0;
    text-align: center;
    color: var(--muted);
}

.account-switch a,
.account-nav a {
    color: var(--red);
    font-weight: 900;
}

.account-page {
    margin-block: 18px;
}

.account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.account-nav a {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.address-list {
    display: grid;
    gap: 10px;
}

.address-list article {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

#salesChart {
    width: 100%;
    min-height: 170px;
}

code {
    direction: ltr;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef4ff;
    color: var(--blue-deep);
}

/* Visual correction: closer to the supplied premium reference */
.store-shell {
    background: #073986 !important;
}

.store-shell .site-header,
.store-shell .store-frame,
.store-footer {
    max-width: 1380px;
}

.store-shell .site-header {
    top: 12px;
    border-radius: 8px 8px 0 0;
}

.store-frame {
    padding: 16px 18px 24px;
}

.hero-banner {
    min-height: 360px;
    border: 1px solid #e7edf6;
    background: #fff;
}

.hero-banner img {
    object-fit: cover;
    object-position: center right;
}

.hero-banner::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.219) 0%, rgba(255, 255, 255, 0.185) 40%, rgba(255,255,255,.42) 64%, rgba(255,255,255,.04) 100%);
}

.hero-copy {
    width: min(100%, 460px);
    margin-right: auto;
    margin-left: 0;
    padding: 58px 54px;
    text-align: right;
}

.hero-copy h1 {
    margin-bottom: 12px;
    color: #073986;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.12;
    font-weight: 900;
}

.hero-copy h1 span:last-child {
    color: #D70812;
}

.hero-copy p {
    max-width: 340px;
    margin-bottom: 22px;
    color: #344054;
    font-size: 1rem;
}

.service-strip {
    gap: 12px;
    margin: 18px 0 24px;
}

.service-strip article {
    min-height: 62px;
    padding: 12px 16px;
    border-color: #dfe7f3;
    box-shadow: 0 6px 18px rgba(7, 57, 134, .04);
}

.store-shell .section-heading h2,
.shop-title h1 {
    color: #073986;
    font-weight: 900;
}

.store-shell .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.store-shell .category-tile {
    min-height: 126px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    gap: 2px 14px;
    padding: 12px 14px;
    overflow: hidden;
    color: #073986;
    background: linear-gradient(180deg, #fff, #f7f9fc);
    border: 1px solid #dfe7f3;
    box-shadow: 0 8px 24px rgba(7, 57, 134, .06);
}

.store-shell .category-tile img {
    grid-row: 1 / 3;
    width: 96px;
    height: 84px;
    margin: 0;
    padding: 5px;
    object-fit: contain;
    border: 1px solid #e7edf6;
    background: #fff;
}

.store-shell .category-tile span {
    margin: 0;
    color: #073986;
    font-size: 1.02rem;
    line-height: 1.3;
}

.store-shell .category-tile small {
    color: #D70812;
    font-size: .78rem;
}

.offer-banner {
    min-height: 210px;
    border: 1px solid #e7edf6;
    background: #fff;
}

.offer-banner img {
    object-position: center right;
}

.offer-banner::after {
    background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.35) 70%, rgba(255,255,255,.02) 100%);
}

.offer-banner div {
    width: min(100%, 390px);
    margin-right: auto;
    margin-left: 0;
    padding: 42px 48px;
    text-align: right;
}

.offer-banner h2 {
    color: #D70812;
    font-size: 1.35rem;
    line-height: 1.25;
}

.offer-banner p {
    color: #073986;
    font-size: 1.25rem;
}

.store-shell .product-card {
    box-shadow: 0 8px 22px rgba(7, 57, 134, .06);
}

@media (max-width: 900px) {
    .hero-banner {
        min-height: 360px;
    }

    .hero-banner::after,
    .offer-banner::after {
        background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
    }

    .hero-copy,
    .offer-banner div {
        width: 100%;
        margin: 0;
        padding: 28px 22px;
    }

    .hero-copy h1 {
        font-size: 2.1rem;
    }

    .store-shell .category-grid {
        grid-template-columns: 1fr;
    }
}

/* Layout correction requested after visual QA */
html,
body.store-shell {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.store-shell {
    background: #ffffff !important;
}

.store-shell .site-header,
.store-shell .store-frame,
.store-footer,
.store-shell .mobile-top,
.store-shell .mobile-bottom-nav {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
}

.store-shell .site-header {
    top: 0;
    margin: 0;
    border-radius: 0;
}

.store-frame {
    width: 100%;
    margin: 0;
    padding: 14px clamp(14px, 2.4vw, 34px) 28px;
    border-radius: 0;
    box-shadow: none;
}

.store-footer {
    margin: 0;
}

.store-shell .section {
    padding-block: 18px;
}

.store-shell .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.store-shell .product-card {
    min-width: 0;
    border-radius: 8px;
}

.store-shell .product-media {
    margin: 8px 8px 0;
    aspect-ratio: 1.08 / 1;
}

.store-shell .product-media img {
    object-fit: contain;
    padding: 12px;
}

.store-shell .product-body {
    padding: 10px 11px;
}

.store-shell .product-body h3 {
    min-height: 2.4em;
    font-size: .82rem;
    line-height: 1.45;
}

.store-shell .product-category {
    font-size: .7rem;
}

.store-shell .price-row {
    margin-block: 6px 9px;
}

.store-shell .cart-add-btn {
    min-height: 34px;
}

.store-shell .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (min-width: 1500px) {
    .store-shell .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }

    .store-shell .product-media {
        aspect-ratio: 1 / .88;
    }
}

/* Navbar search polish */
.store-shell .top-header {
    grid-template-columns: minmax(210px, .75fr) minmax(320px, 560px) minmax(210px, .75fr);
    justify-content: space-between;
    gap: 22px;
    min-height: 62px;
    padding: 9px 18px;
}

.store-shell .brand {
    grid-column: 3;
    justify-self: end;
}

.store-shell .search-box {
    grid-column: 2;
}

.store-shell .header-icons {
    grid-column: 1;
    justify-self: start;
}

.store-shell .search-box {
    justify-self: center;
    width: min(100%, 560px);
    grid-template-columns: minmax(0, 1fr) 48px;
    overflow: hidden;
    border: 1px solid #dfe7f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(7, 57, 134, .04);
}

.store-shell .search-box input {
    grid-column: 1;
    grid-row: 1;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    color: #031A43;
    background: #fff;
    text-align: right;
}

.store-shell .search-box input::placeholder {
    color: #98a2b3;
}

.store-shell .search-box button {
    grid-column: 2;
    grid-row: 1;
    width: 48px;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: #D70812;
    color: #fff;
}

@media (max-width: 900px) {
    .store-shell .top-header {
        grid-template-columns: 1fr;
    }

    .store-shell .search-box {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .store-shell .product-grid {
        gap: 8px;
    }

    .store-shell .product-body {
        padding: 8px;
    }

    .store-shell .product-body h3 {
        font-size: .74rem;
    }
}

/* Product card cart controls */
.store-shell .product-body {
    grid-template-columns: minmax(0, 1fr);
}

.store-shell .price-row {
    grid-column: 1 / -1;
}

.store-shell .product-body .product-cart-area {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
}

.store-shell .product-body .product-cart-area form:not(.catalog-qty-control),
.store-shell .product-body .product-cart-area .catalog-qty-control {
    width: 100%;
    max-width: 100%;
}

.store-shell .product-body .product-cart-area .catalog-qty-control {
    display: grid;
    grid-template-columns: 38px minmax(42px, 1fr) 38px;
    align-items: center;
    justify-self: stretch;
}

.store-shell .product-body .product-cart-area .catalog-qty-control input[name="qty"] {
    display: block;
    width: 100%;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    appearance: textfield;
    -moz-appearance: textfield;
    color: var(--blue-deep);
    font-weight: 900;
    text-align: center;
}

.store-shell .product-body .product-cart-area .catalog-qty-control input[name="qty"]::-webkit-outer-spin-button,
.store-shell .product-body .product-cart-area .catalog-qty-control input[name="qty"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.store-shell .product-body .cart-add-btn {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 7px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.store-shell .product-body .cart-add-btn span {
    display: inline;
    font-size: .76rem;
    font-weight: 800;
}

@media (max-width: 700px) {
    .store-shell .product-body .product-cart-area form:not(.catalog-qty-control) {
        display: grid;
        width: 100%;
    }

    .store-shell .product-body .cart-add-btn {
        width: 100% !important;
        height: 36px;
        min-height: 36px;
        border-radius: 8px;
        font-size: .78rem;
    }

    .store-shell .product-body .product-cart-area .catalog-qty-control {
        width: 100% !important;
        grid-template-columns: 36px minmax(34px, 1fr) 36px;
        justify-self: center;
    }
}

/* Final shell alignment: nav/footer match the inner content edges */
.store-shell .store-frame {
    width: min(100%, var(--shell-max)) !important;
    max-width: var(--shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--shell-gutter) !important;
    padding-right: var(--shell-gutter) !important;
}

.store-shell .site-header,
.store-footer {
    width: min(calc(100% - (var(--shell-gutter) * 2)), calc(var(--shell-max) - (var(--shell-gutter) * 2))) !important;
    max-width: calc(var(--shell-max) - (var(--shell-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.store-shell .mobile-top,
.store-shell .mobile-bottom-nav {
    width: min(100%, var(--shell-max)) !important;
    max-width: var(--shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.store-shell .main-nav {
    justify-content: center !important;
}

.store-shell .product-grid {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 230px)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
}

@media (min-width: 1500px) {
    .store-shell .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 220px)) !important;
    }
}

@media (max-width: 700px) {
    .store-shell .site-header,
    .store-footer {
        width: 100% !important;
        max-width: 100% !important;
    }

    .store-shell .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Premium section headings */
.store-shell .section-heading-card {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 18px;
    overflow: hidden;
    border: 1px solid #dfe7f3;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(7,57,134,.08), rgba(255,255,255,.96) 44%, rgba(215,8,18,.055)),
        #f7f9fc;
    box-shadow: 0 10px 28px rgba(7, 57, 134, .055);
}

.store-shell .section-heading-card::before {
    content: "";
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 0 8px 8px 0;
    background: #D70812;
}

.store-shell .section-heading-card::after {
    content: "";
    position: absolute;
    inset-inline-end: 72px;
    top: -42px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198,164,91,.18), transparent 68%);
    pointer-events: none;
}

.store-shell .section-heading-card > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
}

.store-shell .section-heading-card span {
    color: #D70812;
    font-size: .76rem;
    font-weight: 800;
}

.store-shell .section-heading-card h2 {
    margin: 0;
    color: #073986;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.25;
    font-weight: 900;
}

.store-shell .section-heading-card > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #cbd8eb;
    border-radius: 8px;
    color: #073986;
    background: #fff;
    box-shadow: 0 8px 18px rgba(7, 57, 134, .06);
    font-weight: 900;
    white-space: nowrap;
}

.store-shell .section-heading-card > a span {
    color: #073986;
    font-size: .82rem;
}

.store-shell .section-heading-card > a i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    background: #D70812;
    font-size: .72rem;
}

.store-shell .section-heading-card > a:hover {
    border-color: #D70812;
    transform: translateY(-1px);
}

@media (max-width: 620px) {
    .store-shell .section-heading-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 13px 14px;
    }

    .store-shell .section-heading-card > a {
        width: 100%;
        justify-content: space-between;
    }
}

/* Premium admin dashboard */
.admin-shell {
    --admin-navy: #062c70;
    --admin-navy-dark: #031a43;
    --admin-red: #d70812;
    --admin-gold: #d9a83b;
    --admin-bg: #f5f7fb;
    --admin-border: #e1e8f3;
    --admin-text: #071437;
    --admin-muted: #667085;
    direction: rtl;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    min-height: 100vh;
    background: var(--admin-bg);
}

.admin-shell .admin-sidebar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 88%, rgba(217, 168, 59, .22), transparent 22%),
        linear-gradient(180deg, #073986 0%, #031a43 100%);
    border: 0;
    box-shadow: -14px 0 34px rgba(3, 26, 67, .16);
}

.admin-shell .admin-main {
    grid-column: 1;
    min-width: 0;
    margin: 0;
    padding: 0 24px 28px;
    border-radius: 0;
    background: var(--admin-bg);
    box-shadow: none;
}

.admin-shell .admin-brand {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 28px;
    padding: 10px 8px;
}

.admin-shell .admin-brand img {
    width: 66px;
    height: 50px;
    object-fit: contain;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
}

.admin-shell .admin-brand span {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
}

.admin-shell .admin-sidebar nav {
    display: grid;
    gap: 8px;
}

.admin-shell .admin-sidebar nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255,255,255,.88);
    font-weight: 800;
}

.admin-shell .admin-sidebar nav a i {
    order: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: rgba(255,255,255,.72);
    font-size: 1rem;
}

.admin-shell .admin-sidebar nav a span {
    order: 1;
}

.admin-shell .admin-sidebar nav a.active,
.admin-shell .admin-sidebar nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.16);
    box-shadow: inset 4px 0 0 var(--admin-gold);
}

.admin-shell .admin-sidebar .btn-ghost {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.16);
}

.admin-shell .store-link {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.admin-sidebar-mark {
    margin-top: auto;
    padding: 22px 12px;
    text-align: center;
    color: #f6c466;
}

.admin-sidebar-mark::before {
    content: "⚜";
    display: block;
    margin-bottom: 8px;
    font-size: 3.4rem;
    line-height: 1;
}

.admin-sidebar-mark strong,
.admin-sidebar-mark span {
    display: block;
}

.admin-sidebar-mark strong {
    font-size: 1.2rem;
}

.admin-sidebar-mark span {
    margin-top: 5px;
    color: rgba(255,255,255,.8);
}

.admin-shell .admin-topbar {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) auto minmax(320px, 520px);
    align-items: center;
    gap: 22px;
    min-height: 78px;
    margin: 0 -24px 24px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--admin-border);
    box-shadow: 0 8px 22px rgba(3, 26, 67, .04);
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--admin-navy), var(--admin-red));
    font-weight: 900;
}

.admin-profile strong,
.admin-profile small {
    display: block;
}

.admin-profile strong {
    color: var(--admin-text);
}

.admin-profile small {
    color: var(--admin-muted);
}

.admin-top-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-top-icons > a {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--admin-text);
    background: #fff;
}

.admin-top-icons > a:hover {
    border-color: var(--admin-border);
}

.admin-top-icons > a b {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    color: #fff;
    background: var(--admin-red);
    font-size: .7rem;
}

.admin-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #fff;
}

.admin-search input,
.admin-search button {
    min-height: 44px;
    border: 0;
    background: transparent;
}

.admin-search input {
    padding: 0 14px;
}

.admin-search button {
    color: #98a2b3;
}

.admin-dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.admin-dashboard-hero.compact {
    align-items: center;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(3, 26, 67, .05);
}

.admin-dashboard-hero.compact h1 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.admin-dashboard-hero h1 {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.admin-dashboard-hero p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    color: var(--admin-muted);
}

.admin-dashboard-hero p span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--admin-gold);
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(3, 26, 67, .06);
}

.admin-action.ghost {
    color: var(--admin-text);
    background: #fff;
}

.admin-action.blue {
    color: #fff;
    background: var(--admin-navy);
    border-color: var(--admin-navy);
}

.admin-action.red {
    color: #fff;
    background: var(--admin-red);
    border-color: var(--admin-red);
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-metric-card,
.admin-panel {
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(3, 26, 67, .06);
}

.admin-metric-card {
    position: relative;
    min-height: 138px;
    padding: 18px;
}

.admin-metric-card > span {
    position: absolute;
    top: 18px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.admin-metric-card small {
    display: block;
    margin-bottom: 18px;
    color: var(--admin-text);
    font-weight: 900;
}

.admin-metric-card strong {
    display: block;
    color: var(--admin-text);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.1;
}

.admin-metric-card em {
    display: block;
    margin-top: 12px;
    color: #139a55;
    font-style: normal;
    font-size: .78rem;
}

.admin-metric-card em.down {
    color: #d64b4b;
}

.admin-metric-card.red > span { color: #d70812; background: #fff0f2; }
.admin-metric-card.green > span { color: #10945a; background: #eaf8f0; }
.admin-metric-card.purple > span { color: #803bd8; background: #f2eaff; }
.admin-metric-card.blue > span { color: #073986; background: #eef4ff; }
.admin-metric-card.amber > span { color: #d98b08; background: #fff6df; }

.admin-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.admin-panel {
    padding: 18px;
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-panel-head h2 {
    margin: 0;
    color: var(--admin-text);
    font-size: 1.15rem;
}

.admin-panel-head a,
.admin-panel-head button {
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--admin-navy);
    background: #fff;
    font-weight: 800;
}

.admin-panel-period {
    color: #667085;
    font-size: .82rem;
    font-weight: 700;
    background: #f5f7fb;
    border: 1px solid #e7ebf3;
    border-radius: 999px;
    padding: .45rem .75rem;
}

.admin-range-filter,
.admin-order-search {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.admin-range-filter {
    border: 1px solid #e4e8f0;
    background: #fff;
    border-radius: 12px;
    padding: .35rem .65rem;
}

.admin-range-filter label {
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-range-filter select,
.admin-order-search input {
    border: 1px solid #dfe4ec;
    background: #fff;
    border-radius: 9px;
    min-height: 38px;
    padding: .45rem .7rem;
    font: inherit;
}

.admin-range-filter select {
    border: 0;
    min-height: 32px;
    cursor: pointer;
}

.admin-order-search input {
    min-width: min(340px, 55vw);
}

.admin-empty-state {
    color: #667085;
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
}

.product-price-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.product-price-inputs label {
    display: grid;
    gap: .35rem;
    color: #667085;
    font-size: .78rem;
}

.product-price-inputs input {
    width: 100%;
    min-width: 0;
}

.chart-panel canvas {
    width: 100%;
    min-height: 230px;
}

.admin-bars {
    display: flex;
    align-items: end;
    gap: clamp(2px, .55vw, 8px);
    height: 230px;
    padding: 18px 10px 0;
    border-bottom: 1px solid var(--admin-border);
    background: repeating-linear-gradient(0deg, transparent 0 45px, #eef2f7 46px);
}

.admin-bars span {
    flex: 1;
    min-width: 2px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #0b4597, #031a43);
    box-shadow: 0 8px 14px rgba(7, 57, 134, .14);
}

.admin-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.low-stock-list,
.latest-orders,
.category-ranks,
.activity-list {
    display: grid;
    gap: 10px;
}

.low-stock-list article,
.latest-orders article,
.category-ranks article,
.activity-list p {
    margin: 0;
    padding: 10px;
    border: 1px solid #edf1f7;
    border-radius: 8px;
    background: #fbfcfe;
}

.low-stock-list article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
}

.low-stock-list strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--admin-red);
    background: #fff0f2;
}

.low-stock-list span,
.activity-list span {
    display: grid;
    gap: 2px;
    color: var(--admin-text);
    font-weight: 800;
}

.low-stock-list small,
.activity-list small {
    color: var(--admin-muted);
    font-weight: 500;
}

.low-stock-list img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 8px;
    background: #f4f7fb;
}

.latest-orders article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.latest-orders strong {
    color: var(--admin-navy);
}

.latest-orders b {
    color: var(--admin-text);
}

.latest-orders em {
    grid-column: 2 / 4;
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    color: #0e7a44;
    background: #eaf8f0;
    font-style: normal;
    font-size: .76rem;
}

.category-ranks article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
}

.category-ranks i {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f7;
}

.category-ranks em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--admin-gold);
}

.activity-list p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-list i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #fff;
    background: var(--admin-navy);
}

@media (max-width: 1280px) {
    .admin-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-shell .admin-sidebar,
    .admin-shell .admin-main {
        grid-column: 1;
    }

    .admin-shell .admin-sidebar {
        position: static;
        height: auto;
    }

    .admin-shell .admin-topbar,
    .admin-dashboard-hero,
    .admin-chart-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .admin-shell .admin-main {
        padding-inline: 12px;
    }

    .admin-shell .admin-topbar {
        margin-inline: -12px;
        padding-inline: 12px;
    }

    .admin-metric-grid,
    .admin-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin dashboard final correction */
body.admin-shell {
    direction: ltr !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
}

body.admin-shell .admin-sidebar {
    grid-column: 2 !important;
    direction: rtl !important;
}

body.admin-shell .admin-main {
    grid-column: 1 !important;
    direction: rtl !important;
}

body.admin-shell .admin-topbar {
    direction: ltr !important;
    grid-template-columns: 240px auto minmax(320px, 440px) minmax(0, 1fr) !important;
}

body.admin-shell .admin-profile {
    grid-column: 1;
    direction: rtl;
}

body.admin-shell .admin-top-icons {
    grid-column: 2;
    direction: ltr;
}

body.admin-shell .admin-search {
    grid-column: 3;
    direction: rtl;
}

.admin-top-menu {
    position: relative;
}

.admin-top-menu > button {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--admin-text);
    background: #fff;
    cursor: pointer;
}

.admin-top-menu > button b {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    color: #fff;
    background: var(--admin-red);
    font-size: .7rem;
}

.admin-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 50;
    display: none;
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 10px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(3, 26, 67, .16);
    direction: rtl;
    transform: translateX(-50%);
    text-align: right;
}

.admin-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--admin-border);
    border-left: 1px solid var(--admin-border);
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.admin-top-menu.is-open .admin-dropdown {
    display: grid;
    gap: 8px;
}

.admin-dropdown strong {
    color: var(--admin-text);
    padding: 4px 6px 8px;
}

.admin-dropdown a,
.admin-dropdown p {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    margin: 0;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--admin-text);
    background: #f8fafc;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    min-height: 54px;
    place-items: initial !important;
    align-items: start !important;
    justify-content: initial !important;
}

.admin-dropdown a:hover {
    background: #eef4ff;
}

.admin-dropdown span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    color: var(--admin-text);
    font-weight: 900;
    line-height: 1.35;
    white-space: normal;
    text-overflow: clip;
}

.admin-dropdown small {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--admin-muted);
    line-height: 1.35;
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    body.admin-shell {
        grid-template-columns: 1fr !important;
    }

    body.admin-shell .admin-sidebar,
    body.admin-shell .admin-main {
        grid-column: 1 !important;
    }

    body.admin-shell .admin-topbar {
        grid-template-columns: 1fr !important;
        direction: rtl !important;
    }

    body.admin-shell .admin-profile,
    body.admin-shell .admin-top-icons,
    body.admin-shell .admin-search {
        grid-column: 1;
    }
}

/* Admin products management page */
.admin-products-hero {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 18px 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-products-hero h1 {
    font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
}

.admin-products-hero .admin-actions {
    align-self: center;
}

.products-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-products-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.product-filter-panel {
    position: sticky;
    top: 92px;
}

.product-filter-panel .admin-panel-head i {
    color: var(--admin-navy);
}

.product-filter-form {
    display: grid;
    gap: 14px;
}

.product-filter-form label {
    display: grid;
    gap: 8px;
    color: var(--admin-text);
    font-weight: 800;
}

.product-filter-form select,
.product-toolbar select,
.product-search input {
    width: 100%;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    color: var(--admin-text);
    background: #fff;
    font: inherit;
}

.product-filter-form select,
.product-toolbar select {
    min-height: 46px;
    padding: 0 12px;
}

.product-filter-form .check {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    color: #42526e;
    font-weight: 700;
}

.product-filter-form .check input {
    width: 17px;
    height: 17px;
    accent-color: var(--admin-navy);
}

.product-filter-form .check small {
    color: var(--admin-muted);
    font-weight: 700;
}

.product-filter-form strong {
    color: var(--admin-text);
}

.product-filter-form hr {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--admin-border);
}

.product-price-range {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 26px;
    color: var(--admin-muted);
    font-size: .82rem;
}

.product-price-range::before,
.product-price-range::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 10px;
    height: 7px;
    border-radius: 999px;
}

.product-price-range::before {
    background: #eef2f7;
}

.product-price-range::after {
    background: #d99a16;
}

.product-reset-link {
    justify-self: center;
    color: var(--admin-navy);
    font-weight: 900;
}

.admin-products-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.product-toolbar {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto 190px auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--admin-border);
}

.product-search {
    position: relative;
}

.product-search input {
    height: 48px;
    padding: 0 44px 0 14px;
}

.product-search i {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--admin-muted);
    transform: translateY(-50%);
}

.product-table-wrap {
    overflow-x: auto;
}

.admin-products-table {
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-products-table th {
    color: #516079;
    background: #f8fafc;
    font-size: .82rem;
    white-space: nowrap;
}

.admin-products-table td {
    border-bottom: 1px solid var(--admin-border);
    color: #263651;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-products-table td strong {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: var(--admin-text);
    text-overflow: ellipsis;
}

.admin-products-table td small {
    display: block;
    margin-top: 3px;
    color: var(--admin-muted);
}

.product-admin-thumb {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    background: #f4f7fb;
}

.product-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 82px;
    justify-content: center;
    border-radius: 8px;
    padding: 7px 10px;
    background: #eaf8f0;
    color: #168253;
    font-weight: 900;
    font-size: .78rem;
}

.product-status i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.product-status.low {
    background: #fff7dc;
    color: #b77a00;
}

.product-status.out {
    background: #ffecef;
    color: #d70812;
}

.product-status.draft {
    background: #eef2f7;
    color: #607086;
}

.product-crown {
    color: #d99a16;
}

.product-muted {
    color: var(--admin-muted);
    font-weight: 900;
}

.product-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.product-row-actions a,
.product-row-actions button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: var(--admin-navy);
    background: transparent;
    cursor: pointer;
}

.product-row-actions button {
    color: var(--admin-red);
}

.product-row-actions a:hover,
.product-row-actions button:hover {
    background: #eef4ff;
}

.empty-table {
    padding: 34px !important;
    text-align: center;
    color: var(--admin-muted) !important;
}

.product-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    color: var(--admin-muted);
}

.product-pagination div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.product-pagination a,
.product-pagination span + div span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    color: var(--admin-navy);
    background: #fff;
    font-weight: 900;
}

.product-pagination a.active {
    color: #fff;
    background: var(--admin-navy);
    border-color: var(--admin-navy);
}

.product-editor-panel {
    margin-top: 18px;
}

.product-editor-panel .admin-panel-head span {
    color: var(--admin-muted);
    font-size: .86rem;
}

.product-form-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 18px 0 8px;
}

.product-form-hero h1 {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    line-height: 1.1;
}

.product-form-hero p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 0;
    color: var(--admin-muted);
}

.product-form-hero p span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--admin-gold);
}

.product-form-hero p i {
    font-size: .7rem;
}

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

.product-form-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
    align-items: start;
}

.product-form-main,
.product-form-side {
    display: grid;
    gap: 18px;
}

.product-form-card {
    padding: 18px;
}

.product-form-card .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-form-card label,
.product-form-card .full {
    display: grid;
    gap: 8px;
    color: var(--admin-text);
    font-weight: 900;
}

.product-form-card input,
.product-form-card select,
.product-form-card textarea {
    width: 100%;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    color: var(--admin-text);
    background: #fff;
    font: inherit;
}

.product-form-card input,
.product-form-card select {
    min-height: 44px;
    padding: 0 12px;
}

.product-form-card textarea {
    resize: vertical;
    min-height: 118px;
    padding: 12px;
}

.product-form-card .full {
    grid-column: 1 / -1;
}

.product-media-editor {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: start;
}

.upload-drop {
    min-height: 190px;
    place-items: center;
    text-align: center;
    border: 1px dashed #9db0ce;
    color: var(--admin-navy);
    background: #f9fbff;
    cursor: pointer;
}

.upload-drop span,
.upload-drop small {
    display: block;
    color: var(--admin-muted);
    font-weight: 800;
}

.upload-drop input {
    display: none;
}

.product-image-preview {
    width: 110px;
    height: 130px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

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

.product-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--admin-border);
    margin: 16px -18px -18px;
}

.switch-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px !important;
    padding: 16px 18px;
    border-inline-start: 1px solid var(--admin-border);
}

.switch-row input {
    width: 44px;
    height: 24px;
    accent-color: var(--admin-navy);
}

.switch-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-navy);
}

.product-preview-card {
    text-align: center;
}

.product-preview-card img {
    width: 100%;
    max-height: 230px;
    border-radius: 8px;
    object-fit: contain;
    background: #f4f7fb;
}

.product-preview-card h3 {
    margin: 14px 0 6px;
    color: var(--admin-text);
    font-size: 1.15rem;
}

.product-preview-card p {
    margin: 0 0 10px;
    color: var(--admin-muted);
}

.product-preview-card strong {
    display: block;
    margin-bottom: 12px;
    color: var(--admin-navy);
    font-size: 1.25rem;
}

.admin-gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.admin-gallery-preview img {
    width: 64px;
    height: 64px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    object-fit: cover;
    background: #f8fafc;
}

.variant-editor {
    display: grid;
    gap: 12px;
}

.variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr) minmax(180px, .7fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #f8fafc;
}

.variant-row:not(.color-row) {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr);
}

.admin-help-text {
    margin: 12px 0 0;
    color: var(--admin-muted);
    font-size: .85rem;
}

.product-option-group {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.product-option-group > strong {
    color: var(--blue-deep);
}

.product-option-group > strong span {
    color: var(--text);
}

.color-swatches,
.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-swatches button {
    position: relative;
    width: 30px;
    height: 30px;
    border: 2px solid #e5edf8;
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
}

.color-swatches button::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid transparent;
    border-radius: 50%;
}

.color-swatches button.active::after {
    border-color: var(--red);
}

.size-options button {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--blue-deep);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.size-options button.active {
    color: #fff;
    border-color: var(--blue-deep);
    background: var(--blue-deep);
}

.reviews-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}

.review-item {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.review-item + .review-item {
    margin-top: 10px;
}

.review-item strong,
.review-item span {
    display: inline-block;
    margin-inline-end: 8px;
}

.review-item span {
    color: #f3a200;
}

.review-form-card {
    align-self: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.review-form-card form,
.review-form-card label {
    display: grid;
    gap: 10px;
}

.review-form-card input,
.review-form-card select,
.review-form-card textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
}

@media (max-width: 1180px) {
    .products-metrics,
    .admin-products-layout,
    .product-toolbar,
    .product-form-page,
    .product-media-editor,
    .reviews-panel,
    .variant-row {
        grid-template-columns: 1fr 1fr;
    }

    .product-filter-panel,
    .admin-products-panel,
    .product-toolbar .product-search,
    .product-form-main,
    .product-form-side {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .products-metrics,
    .admin-products-layout,
    .product-toolbar,
    .product-form-page,
    .product-form-card .form-grid,
    .product-media-editor,
    .product-switches,
    .reviews-panel,
    .variant-row,
    .variant-row:not(.color-row) {
        grid-template-columns: 1fr;
    }

    .product-filter-panel {
        position: static;
    }

    .product-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .product-form-hero {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Product detail purchase actions and full-width store chrome */
.detail-buy-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.detail-buy-box .product-cart-area,
.detail-buy-box form {
    min-width: 0;
}

.detail-cart-btn,
.detail-buy-now-btn,
.detail-buy-box .cart-add-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100% !important;
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.detail-cart-btn,
.detail-buy-box .cart-add-btn {
    background: var(--red);
    box-shadow: 0 14px 24px rgba(231, 23, 35, .18);
}

.detail-buy-now-btn {
    background: var(--blue-deep);
    box-shadow: 0 14px 24px rgba(7, 57, 134, .18);
}

.detail-buy-box .product-cart-area {
    display: grid;
    gap: 8px;
    width: 100% !important;
}

.detail-buy-box .in-cart-chip {
    justify-content: center;
    width: 100%;
}

.detail-buy-box .catalog-qty-control {
    justify-content: center;
    width: 100% !important;
}

.store-shell .site-header,
.store-footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.store-shell .site-header {
    border-radius: 0 !important;
}

.store-shell .top-header {
    max-width: var(--shell-max);
    margin-inline: auto;
}

.store-shell .main-nav {
    width: 100% !important;
}

.store-footer > * {
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .detail-buy-box {
        grid-template-columns: 1fr;
    }
}

/* Customer login redesign */
.zf-login-page {
    min-height: 100vh;
    margin: 0;
    font-family: "Cairo", system-ui, sans-serif;
    color: #071b4d;
    background:
        radial-gradient(circle at 20% 0%, rgba(7, 57, 134, .08), transparent 34%),
        linear-gradient(135deg, #f7f9fd, #eef3f9);
}

.zf-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, .9fr);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
    max-width: 1580px;
    margin: 0 auto;
    padding: clamp(16px, 2.5vw, 36px);
}

.zf-login-showcase,
.zf-login-card {
    min-height: min(92vh, 900px);
    border-radius: 24px;
    overflow: hidden;
}

.zf-login-showcase {
    position: relative;
    color: #fff;
    background: #061b4d;
    box-shadow: 0 26px 70px rgba(2, 20, 60, .22);
}

.zf-showcase-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

.zf-showcase-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 52% 20%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(90deg, rgba(0, 20, 69, .96), rgba(2, 36, 91, .82) 55%, rgba(2, 24, 64, .48));
}

.zf-login-showcase::before {
    content: "";
    position: absolute;
    top: -12%;
    right: -18%;
    width: 82%;
    aspect-ratio: 1;
    border: 2px solid rgba(218, 154, 28, .82);
    border-radius: 50%;
    z-index: 1;
}

.zf-login-showcase::after {
    content: "⚜";
    position: absolute;
    left: -42px;
    top: 10%;
    color: rgba(255,255,255,.08);
    font-size: clamp(13rem, 22vw, 26rem);
    line-height: 1;
    z-index: 1;
}

.zf-showcase-content {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 24px;
    height: 100%;
    padding: clamp(42px, 5vw, 82px) clamp(24px, 4vw, 56px);
    text-align: center;
}

.zf-showcase-logo {
    width: clamp(180px, 22vw, 300px);
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.2));
}

.zf-showcase-content h2 {
    margin: 8px 0 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    line-height: 1.45;
    font-weight: 900;
}

.zf-gold-mark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #d99a16;
}

.zf-gold-mark::before,
.zf-gold-mark::after {
    content: "";
    width: 88px;
    height: 2px;
    background: #d99a16;
}

.zf-showcase-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 680px);
    margin-top: 10px;
}

.zf-showcase-features p {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 16px;
    border-inline-start: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.92);
    font-weight: 700;
}

.zf-showcase-features p:first-child {
    border-inline-start: 0;
}

.zf-showcase-features i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #d99a16;
    border: 1px solid #d99a16;
    border-radius: 10px;
    font-size: 1.15rem;
}

.zf-login-card {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: clamp(34px, 4vw, 62px);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(222, 230, 242, .9);
    box-shadow: 0 26px 80px rgba(2, 20, 60, .11);
    backdrop-filter: blur(18px);
}

.zf-login-logo {
    width: clamp(210px, 24vw, 360px);
    height: auto;
    margin-bottom: 12px;
}

.zf-login-card h1 {
    margin: 0;
    color: #061b4d;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.15;
    font-weight: 900;
}

.zf-login-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 20px;
    color: #d99a16;
}

.zf-login-divider span {
    width: 58px;
    height: 2px;
    background: #d99a16;
}

.zf-login-intro {
    max-width: 580px;
    margin: 0 0 26px;
    color: #4d5b73;
    text-align: center;
    font-size: 1.06rem;
    line-height: 1.9;
    font-weight: 700;
}

.zf-login-intro strong {
    color: #d70812;
}

.zf-login-form {
    display: grid;
    gap: 18px;
    width: min(100%, 560px);
}

.zf-login-form label {
    display: grid;
    gap: 9px;
    color: #061b4d;
    font-weight: 900;
}

.zf-login-form label > span {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 64px;
    border: 1px solid #cbd6e8;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.zf-login-form label > span i {
    display: grid;
    place-items: center;
    color: #062c70;
    font-size: 1.3rem;
}

.zf-login-form input[type="email"],
.zf-login-form input[type="password"] {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 12px;
    color: #061b4d;
    background: transparent;
    font: inherit;
    font-weight: 800;
}

.zf-login-form input::placeholder {
    color: #9aa6ba;
}

.zf-login-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.zf-login-meta label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #061b4d;
    font-weight: 800;
}

.zf-login-meta input {
    width: 18px;
    height: 18px;
    accent-color: #062c70;
}

.zf-login-meta a {
    color: #073986;
    font-weight: 900;
}

.zf-login-submit,
.zf-back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    border-radius: 10px;
    font-size: 1.12rem;
    font-weight: 900;
}

.zf-login-submit {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #083b8d, #001e63);
    box-shadow: 0 18px 34px rgba(6, 44, 112, .22);
    cursor: pointer;
}

.zf-login-submit i,
.zf-back-home i {
    color: #d99a16;
}

.zf-back-home {
    color: #073986;
    border: 1px solid #cbd6e8;
    background: #fff;
}

.zf-secure-note {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    color: #4d5b73;
}

.zf-secure-note > i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #062c70;
    background: #f0f3f8;
    font-size: 1.25rem;
}

.zf-secure-note p {
    display: grid;
    gap: 4px;
    margin: 0;
    font-weight: 700;
}

.zf-secure-note strong {
    color: #061b4d;
}

@media (max-width: 1100px) {
    .zf-login-shell {
        grid-template-columns: 1fr;
    }

    .zf-login-showcase {
        min-height: 520px;
    }
}

@media (max-width: 680px) {
    .zf-login-shell {
        padding: 12px;
    }

    .zf-login-showcase {
        min-height: 460px;
        border-radius: 18px;
    }

    .zf-login-card {
        min-height: auto;
        border-radius: 18px;
        padding: 26px 16px;
    }

    .zf-showcase-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 0;
    }

    .zf-login-meta,
    .zf-secure-note {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Login compact correction */
.zf-login-page {
    background: #f3f6fb !important;
    overflow-x: hidden;
}

.zf-login-shell {
    direction: ltr;
    grid-template-columns: minmax(440px, 1.06fr) minmax(390px, .94fr) !important;
    gap: clamp(24px, 3vw, 42px) !important;
    max-width: 1440px !important;
    min-height: 100vh !important;
    padding: clamp(14px, 2vw, 26px) !important;
}

.zf-login-showcase,
.zf-login-card {
    min-height: clamp(620px, calc(100vh - 52px), 760px) !important;
    border-radius: 20px !important;
}

.zf-login-showcase {
    grid-column: 1;
}

.zf-login-card {
    grid-column: 2;
    padding: clamp(28px, 3.1vw, 46px) !important;
    direction: rtl;
}

.zf-showcase-content {
    padding: clamp(30px, 4vw, 58px) clamp(22px, 3vw, 44px) !important;
    gap: 18px !important;
}

.zf-showcase-logo {
    width: clamp(150px, 16vw, 220px) !important;
    padding: 14px;
    border-radius: 4px;
    background: rgba(255,255,255,.96);
}

.zf-showcase-content h2 {
    font-size: clamp(1.75rem, 2.35vw, 2.25rem) !important;
    line-height: 1.38 !important;
}

.zf-gold-mark::before,
.zf-gold-mark::after {
    width: 64px !important;
}

.zf-showcase-features {
    width: min(100%, 560px) !important;
    margin-top: 2px !important;
}

.zf-showcase-features p {
    padding: 0 12px !important;
    font-size: .9rem;
}

.zf-showcase-features i {
    width: 32px !important;
    height: 32px !important;
}

.zf-login-logo {
    width: clamp(150px, 16vw, 230px) !important;
    margin-bottom: 8px !important;
}

.zf-login-card h1 {
    font-size: clamp(1.8rem, 2.5vw, 2.55rem) !important;
}

.zf-login-divider {
    margin: 12px 0 14px !important;
}

.zf-login-intro {
    max-width: 500px !important;
    margin-bottom: 20px !important;
    font-size: .95rem !important;
    line-height: 1.85 !important;
}

.zf-login-form {
    width: min(100%, 500px) !important;
    gap: 14px !important;
}

.zf-login-form label {
    gap: 7px !important;
    font-size: .92rem;
}

.zf-login-form label > span {
    min-height: 52px !important;
    border-radius: 8px !important;
}

.zf-login-submit,
.zf-back-home {
    min-height: 54px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
}

.zf-secure-note {
    margin-top: 22px !important;
}

.zf-secure-note > i {
    width: 44px !important;
    height: 44px !important;
}

@media (max-width: 1050px) {
    .zf-login-shell {
        direction: rtl;
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
    }

    .zf-login-showcase,
    .zf-login-card {
        grid-column: 1;
    }

    .zf-login-showcase {
        min-height: 430px !important;
    }

    .zf-login-card {
        min-height: auto !important;
    }
}

@media (max-width: 680px) {
    .zf-login-shell {
        padding: 10px !important;
    }

    .zf-showcase-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .zf-showcase-logo {
        width: 150px !important;
    }
}

/* Login final compact pass */
.zf-login-shell {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 460px) !important;
    gap: 28px !important;
    max-width: 1280px !important;
    align-items: center !important;
    padding: 14px clamp(14px, 2vw, 24px) !important;
}

.zf-login-showcase,
.zf-login-card {
    min-height: min(94vh, 640px) !important;
}

.zf-login-card {
    padding: 26px 34px !important;
}

.zf-login-logo {
    width: 150px !important;
    margin-bottom: 4px !important;
}

.zf-login-card h1 {
    font-size: clamp(1.65rem, 2.1vw, 2.1rem) !important;
}

.zf-login-divider {
    margin: 8px 0 10px !important;
}

.zf-login-divider span {
    width: 44px !important;
}

.zf-login-intro {
    max-width: 430px !important;
    margin-bottom: 14px !important;
    font-size: .86rem !important;
    line-height: 1.65 !important;
}

.zf-login-form {
    width: min(100%, 430px) !important;
    gap: 10px !important;
}

.zf-login-form label {
    font-size: .86rem !important;
}

.zf-login-form label > span {
    min-height: 46px !important;
}

.zf-login-submit,
.zf-back-home {
    min-height: 46px !important;
    font-size: .94rem !important;
}

.zf-login-meta {
    font-size: .84rem;
}

.zf-secure-note {
    display: none !important;
}

.zf-register-link {
    margin: 0;
    text-align: center;
    color: #4d5b73;
    font-weight: 800;
    font-size: .9rem;
}

.zf-register-link a {
    color: #d70812;
    font-weight: 900;
}

.zf-showcase-content {
    align-content: center !important;
    gap: 14px !important;
    padding: 28px !important;
}

.zf-showcase-logo {
    width: 145px !important;
    padding: 10px !important;
}

.zf-showcase-content h2 {
    font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important;
}

.zf-showcase-features {
    width: min(100%, 510px) !important;
}

.zf-showcase-features p {
    font-size: .78rem !important;
    line-height: 1.45;
}

.zf-showcase-features i {
    width: 28px !important;
    height: 28px !important;
    font-size: .95rem !important;
}

@media (max-width: 1050px) {
    .zf-login-shell {
        max-width: 620px !important;
        gap: 12px !important;
    }

    .zf-login-showcase {
        min-height: 250px !important;
        width: 100% !important;
    }

    .zf-login-card {
        padding: 22px !important;
    }

    .zf-login-logo {
        display: none !important;
    }

    .zf-showcase-content {
        align-content: center !important;
        padding: 16px !important;
    }

    .zf-showcase-logo {
        width: 110px !important;
        padding: 7px !important;
    }

    .zf-showcase-content h2 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .zf-gold-mark,
    .zf-showcase-features {
        display: none !important;
    }
}

@media (max-width: 680px) {
    .zf-login-page {
        background: #fff !important;
    }

    .zf-login-shell {
        min-height: 100vh !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .zf-login-showcase {
        min-height: 210px !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: none !important;
    }

    .zf-showcase-bg {
        object-position: center !important;
    }

    .zf-login-card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 18px 18px 16px !important;
        min-height: auto !important;
    }

    .zf-login-card h1 {
        font-size: 1.55rem !important;
    }

    .zf-login-intro {
        display: none !important;
    }

    .zf-login-form {
        gap: 9px !important;
    }

    .zf-login-meta {
        align-items: center !important;
        flex-direction: row !important;
        font-size: .78rem;
    }

    .zf-login-form label > span,
    .zf-login-submit,
    .zf-back-home {
        min-height: 44px !important;
    }
}

/* Login mobile stacked card correction */
@media (max-width: 680px) {
    .zf-login-page {
        background: #eef3fa !important;
    }

    .zf-login-shell {
        min-height: auto !important;
        align-content: start !important;
        gap: 8px !important;
        padding: 10px 4px !important;
    }

    .zf-login-showcase,
    .zf-login-card {
        width: min(100%, 265px) !important;
        max-width: 265px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .zf-login-showcase {
        min-height: 164px !important;
        border-radius: 0 !important;
    }

    .zf-showcase-content {
        min-height: 164px !important;
        padding: 10px !important;
        gap: 6px !important;
    }

    .zf-showcase-logo {
        width: 82px !important;
    }

    .zf-showcase-content h2 {
        max-width: 210px;
        font-size: 1.15rem !important;
    }

    .zf-login-card {
        padding: 14px 10px 12px !important;
        border: 1px solid #d8e2f0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    .zf-login-card h1 {
        font-size: 1.42rem !important;
    }

    .zf-login-divider {
        margin: 4px 0 6px !important;
    }

    .zf-login-form {
        gap: 7px !important;
    }

    .zf-login-form label {
        gap: 4px !important;
        font-size: .72rem !important;
    }

    .zf-login-form label > span,
    .zf-login-submit,
    .zf-back-home {
        min-height: 36px !important;
    }

    .zf-login-meta {
        font-size: .7rem !important;
        margin-top: 0 !important;
    }

    .zf-login-submit,
    .zf-back-home {
        font-size: .82rem !important;
    }

    .zf-register-link {
        font-size: .72rem !important;
    }
}

/* Login page with store header/footer */
.zf-login-page.store-shell {
    min-height: 100vh;
    display: block;
}

.zf-login-page .site-header {
    position: sticky !important;
    top: 0 !important;
}

.zf-login-page .zf-login-shell {
    min-height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 24px !important;
}

.zf-login-page .store-footer {
    margin-top: 0 !important;
}

@media (min-width: 681px) {
    .zf-login-page .mobile-bottom-nav {
        display: none;
    }
}

@media (max-width: 680px) {
    .zf-login-page .site-header {
        display: none !important;
    }

    .zf-login-page .mobile-top {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .zf-login-page .zf-login-shell {
        padding-top: 8px !important;
        padding-bottom: 14px !important;
    }

    .zf-login-page .store-footer {
        padding-bottom: 86px !important;
    }
}

@media (max-width: 680px) {
    .zf-login-page {
        display: block !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        background: #f3f6fb !important;
    }

    .zf-login-shell {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    .zf-login-showcase,
    .zf-login-card {
        width: 100% !important;
        max-width: 430px !important;
        box-sizing: border-box !important;
        grid-column: 1 !important;
    }

    .zf-login-showcase {
        min-height: 184px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .zf-login-showcase::before,
    .zf-login-showcase::after {
        display: none !important;
    }

    .zf-showcase-content {
        min-height: 184px !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
    }

    .zf-showcase-logo {
        width: 92px !important;
        padding: 6px !important;
        border-radius: 3px !important;
    }

    .zf-showcase-content h2 {
        font-size: 1.28rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .zf-login-card {
        margin-top: 0 !important;
        padding: 20px 10px 16px !important;
        border: 1px solid #dbe4f1 !important;
        border-top: 0 !important;
        border-radius: 0 0 12px 12px !important;
        background: #fff !important;
    }

    .zf-login-card h1 {
        margin-top: 0 !important;
        font-size: 1.52rem !important;
    }

    .zf-login-divider {
        margin: 5px 0 8px !important;
    }

    .zf-login-form {
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    .zf-login-form label,
    .zf-login-meta,
    .zf-register-link {
        font-size: .76rem !important;
    }

    .zf-login-form label > span {
        min-height: 40px !important;
    }

    .zf-login-submit,
    .zf-back-home {
        min-height: 42px !important;
        font-size: .9rem !important;
    }
}

/* Register page follows the compact login layout */
.zf-register-page .zf-login-card {
    gap: 10px;
}

.zf-register-page .zf-login-logo {
    width: 120px;
}

.zf-register-page .zf-login-card h1 {
    font-size: clamp(1.65rem, 2.2vw, 2.25rem);
}

.zf-register-page .zf-register-form {
    gap: 9px;
}

.zf-register-page .zf-secure-note {
    margin-top: 4px;
}

@media (max-width: 680px) {
    .zf-register-page .zf-login-card {
        padding-top: 14px !important;
        gap: 7px !important;
    }

    .zf-register-page .zf-login-card h1 {
        font-size: 1.38rem !important;
    }

    .zf-register-page .zf-register-form {
        gap: 6px !important;
    }

    .zf-register-page .zf-login-form label > span {
        min-height: 37px !important;
    }

    .zf-register-page .zf-login-submit,
    .zf-register-page .zf-back-home {
        min-height: 39px !important;
    }

    .zf-register-page .zf-secure-note {
        display: none !important;
    }
}

/* Customer account area */
.customer-page {
    background: #f4f7fb;
}

.customer-frame {
    max-width: 1600px;
    padding: 22px 24px 34px;
}

.customer-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(11, 63, 143, .08), rgba(228, 13, 32, .04)),
        #fff;
    box-shadow: 0 18px 45px rgba(8, 43, 90, .08);
    margin-bottom: 18px;
}

.customer-hero span {
    color: #d99a00;
    font-weight: 800;
}

.customer-hero h1 {
    margin: 4px 0 8px;
    color: #061844;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.customer-hero p {
    margin: 0;
    color: #5d6b84;
    max-width: 720px;
    line-height: 1.8;
}

.customer-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.customer-account-nav {
    position: sticky;
    top: 122px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #dce6f3;
    background: #fff;
    box-shadow: 0 16px 40px rgba(8, 43, 90, .07);
}

.customer-account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 7px;
    color: #0b3f8f;
    font-weight: 800;
    text-decoration: none;
}

.customer-account-nav a i {
    width: 22px;
    text-align: center;
}

.customer-account-nav a.active,
.customer-account-nav a:hover {
    background: #0b3f8f;
    color: #fff;
}

.customer-content,
.customer-orders {
    display: grid;
    gap: 16px;
}

.customer-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.customer-stat-grid article,
.customer-card {
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(8, 43, 90, .07);
}

.customer-stat-grid article {
    display: grid;
    gap: 6px;
    padding: 18px;
}

.customer-stat-grid i {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #e40d20;
    background: #fff0f2;
}

.customer-stat-grid span {
    color: #5d6b84;
    font-weight: 700;
}

.customer-stat-grid strong {
    color: #061844;
    font-size: 1.7rem;
    line-height: 1;
}

.customer-grid {
    display: grid;
    gap: 16px;
}

.customer-grid.two {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.customer-grid.address-grid {
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
}

.customer-card {
    padding: 18px;
}

.customer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.customer-card-head h2,
.customer-card-head h3 {
    margin: 0;
    color: #061844;
}

.customer-card-head > i {
    color: #d99a00;
    font-size: 1.25rem;
}

.customer-card-head a {
    color: #0b3f8f;
    font-weight: 800;
    text-decoration: none;
}

.customer-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-form .customer-card-head,
.customer-form .full,
.customer-form button.full,
.customer-check {
    grid-column: 1 / -1;
}

.customer-form label,
.customer-mini-form label {
    display: grid;
    gap: 6px;
    color: #061844;
    font-weight: 800;
}

.customer-form input,
.customer-form select,
.customer-form textarea,
.customer-mini-form select,
.customer-mini-form textarea {
    width: 100%;
    border: 1px solid #cfdbeb;
    border-radius: 7px;
    background: #fff;
    padding: 12px 13px;
    color: #061844;
    font-family: inherit;
}

.customer-check {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
}

.customer-check input {
    width: auto;
}

.customer-action-list,
.customer-address-list {
    display: grid;
    gap: 10px;
}

.customer-action-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 12px;
    border: 1px solid #dce6f3;
    border-radius: 7px;
    color: #0b3f8f;
    font-weight: 800;
    text-decoration: none;
}

.customer-action-list a:hover {
    border-color: #0b3f8f;
    background: #f5f8fd;
}

.customer-order-list.compact {
    display: grid;
    gap: 8px;
}

.customer-order-list.compact article {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
}

.customer-order-list.compact strong,
.customer-order-card h2 {
    color: #061844;
}

.customer-order-list.compact span,
.customer-order-list.compact p,
.customer-order-meta,
.customer-empty p {
    color: #5d6b84;
}

.customer-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #0b3f8f;
    font-weight: 900;
    white-space: nowrap;
}

.customer-order-card {
    display: grid;
    gap: 0;
    padding: 18px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(8, 43, 90, .07);
}

.customer-order-summary {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto 28px;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    outline: none;
}

.customer-order-summary h2,
.customer-order-summary p {
    margin: 0;
}

.customer-order-summary span:first-child {
    color: #d99a00;
    font-weight: 900;
}

.customer-order-summary > i {
    color: #0b3f8f;
    transition: transform .2s ease;
}

.customer-order-card.is-open .customer-order-summary > i {
    transform: rotate(180deg);
}

.customer-order-summary:focus-visible {
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(11, 63, 143, .16);
}

.order-summary-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.order-summary-mini span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f6f9fd;
    color: #5d6b84 !important;
    font-size: .78rem;
    font-weight: 800;
}

.customer-order-details {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6edf7;
}

.customer-order-details[hidden] {
    display: none !important;
}

.customer-order-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.customer-order-meta p {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-radius: 7px;
    background: #f6f9fd;
}

.customer-order-meta i {
    color: #0b3f8f;
    margin-top: 4px;
}

.customer-order-products {
    display: grid;
    gap: 10px;
}

.customer-order-products > div {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
}

.customer-order-products img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 7px;
    background: #f3f6fb;
}

.customer-order-products p {
    display: grid;
    gap: 4px;
    margin: 0;
}

.customer-order-products strong {
    color: #061844;
}

.customer-order-products span {
    color: #5d6b84;
}

.customer-order-products a,
.customer-order-list.compact a {
    color: #0b3f8f;
    font-weight: 900;
    text-decoration: none;
}

.customer-order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-mini-form {
    display: grid;
    gap: 10px;
    box-shadow: none;
}

.customer-mini-form h3 {
    margin: 0;
    color: #061844;
}

.customer-mini-form.disabled {
    opacity: .68;
}

.customer-note {
    margin: 0;
    padding: 9px 10px;
    border-radius: 7px;
    background: #fff8e7;
    color: #7b5700;
    font-weight: 800;
}

.customer-address-list article {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #fbfdff;
}

.customer-address-list article > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.customer-address-list strong {
    color: #061844;
}

.customer-address-list span {
    padding: 4px 9px;
    border-radius: 999px;
    background: #e8f7ef;
    color: #12824a;
    font-weight: 900;
    font-size: .78rem;
}

.customer-address-list p,
.customer-address-list small {
    margin: 0;
    color: #5d6b84;
}

.customer-address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.customer-address-actions button {
    border: 1px solid #cfdced;
    border-radius: 7px;
    background: #fff;
    color: #0b3f8f;
    padding: 8px 12px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.customer-address-actions button.danger {
    color: #e40d20;
    border-color: #ffd4d9;
}

.customer-empty {
    text-align: center;
}

.customer-empty h2,
.customer-empty h3 {
    color: #061844;
    margin-top: 0;
}

@media (max-width: 1100px) {
    .customer-layout,
    .customer-grid.two,
    .customer-grid.address-grid,
    .customer-order-actions {
        grid-template-columns: 1fr;
    }

    .customer-account-nav {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customer-order-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .customer-frame {
        padding: 12px 12px 82px;
    }

    .customer-hero {
        display: grid;
        padding: 18px;
    }

    .customer-stat-grid,
    .customer-form,
    .customer-account-nav {
        grid-template-columns: 1fr;
    }

    .customer-order-list.compact article,
    .customer-order-products > div {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .customer-order-list.compact article > .customer-status,
    .customer-order-list.compact article > b,
    .customer-order-list.compact article > a,
    .customer-order-products a {
        grid-column: 1 / -1;
    }

    .customer-order-summary {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .order-summary-mini,
    .customer-order-summary .customer-status,
    .customer-order-summary > i {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Cart and checkout final organization */
.cart-store-frame,
.store-frame:has(.checkout-flow-layout) {
    max-width: 1240px !important;
}

.cart-store-frame .shop-title,
.store-frame:has(.checkout-flow-layout) .shop-title {
    padding-top: 22px;
    padding-bottom: 16px;
}

.cart-store-frame .cart-page-body {
    grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 16px !important;
    align-items: start;
}

.cart-store-frame .cart-items {
    gap: 10px;
}

.cart-store-frame .cart-item {
    grid-template-columns: 74px minmax(0, 1fr) 118px 94px 74px !important;
    gap: 10px !important;
    padding: 12px !important;
}

.cart-store-frame .cart-item img {
    width: 74px !important;
    height: 74px !important;
}

.cart-store-frame .cart-item h3 {
    font-size: .9rem;
    line-height: 1.45;
}

.cart-store-frame .cart-total-panel {
    position: sticky;
    top: 120px;
}

.checkout-flow-layout {
    max-width: 1180px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 16px !important;
}

.checkout-flow {
    padding: 18px !important;
}

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

.checkout-step-panel .form-grid {
    gap: 12px;
}

.checkout-account-box {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #f8fbff;
}

.checkout-account-box strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-deep);
}

.checkout-account-box p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.7;
}

.checkout-account-box label {
    display: grid;
    gap: 6px;
    color: var(--blue-deep);
    font-weight: 800;
}

.checkout-account-box input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    font-family: inherit;
}

.checkout-account-box.compact {
    background: #f1f8f4;
    border-color: #cdebd8;
}

.checkout-saved-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #f8fbff;
}

.checkout-saved-card span {
    display: block;
    margin-bottom: 4px;
    color: #d99a00;
    font-size: .78rem;
    font-weight: 900;
}

.checkout-saved-card strong {
    display: block;
    color: var(--blue-deep);
    font-size: 1rem;
}

.checkout-saved-card p,
.checkout-saved-card small {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.checkout-saved-card button {
    flex: 0 0 auto;
    border: 1px solid #cbd8eb;
    border-radius: 7px;
    background: #fff;
    color: var(--blue);
    padding: 8px 14px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.checkout-prefilled:not(.is-editing) > .form-grid {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.checkout-prefilled.is-editing .checkout-saved-card {
    background: #fff;
}

.detail-buy-box .in-cart-chip {
    display: none !important;
}

.detail-buy-box .product-cart-area {
    align-self: stretch;
}

.detail-buy-box .catalog-qty-control,
.detail-buy-box .detail-buy-now-form,
.detail-buy-box .detail-buy-now-btn {
    min-height: 50px;
}

@media (max-width: 980px) {
    .cart-store-frame .cart-page-body,
    .checkout-flow-layout {
        grid-template-columns: 1fr !important;
    }

    .cart-store-frame .cart-total-panel,
    .checkout-summary {
        position: static;
    }
}

@media (max-width: 680px) {
    .cart-store-frame {
        padding-inline: 10px !important;
    }

    .cart-store-frame .cart-item {
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        align-items: center;
    }

    .cart-store-frame .cart-item img {
        width: 62px !important;
        height: 62px !important;
    }

    .cart-store-frame .cart-item .qty-control {
        grid-column: 2;
        width: 112px;
    }

    .cart-store-frame .cart-item > strong {
        grid-column: 3;
        grid-row: 1;
    }

    .cart-store-frame .cart-item form:last-child {
        grid-column: 3;
        grid-row: 2;
    }

    .checkout-flow {
        padding: 12px !important;
    }
}

/* Order confirmation page */
.order-confirm-page {
    display: grid;
    gap: 16px;
    max-width: 1120px;
    margin: 22px auto 34px;
}

.order-confirm-hero,
.tracking-card,
.order-confirm-card {
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(8, 43, 90, .07);
}

.order-confirm-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(11, 63, 143, .08), rgba(228, 13, 32, .04)),
        #fff;
}

.order-confirm-hero span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #12824a;
    font-weight: 900;
}

.order-confirm-hero h1 {
    margin: 6px 0;
    color: var(--blue-deep);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.order-confirm-hero p {
    margin: 0;
    color: var(--muted);
}

.tracking-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    padding: 16px;
}

.tracking-card div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 8px;
    background: #f7faff;
}

.tracking-card span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.tracking-card strong {
    color: var(--blue-deep);
    font-size: 1.08rem;
}

.order-confirm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.order-confirm-card {
    padding: 18px;
}

.order-confirm-card h2 {
    margin: 0 0 12px;
    color: var(--blue-deep);
    font-size: 1.05rem;
}

.order-confirm-card p {
    margin: 7px 0;
    color: #4d5d76;
    line-height: 1.75;
}

.confirm-items {
    display: grid;
    gap: 8px;
}

.confirm-items article,
.order-items-card footer p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.confirm-items article {
    padding: 12px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
}

.confirm-items strong,
.confirm-items b,
.order-items-card footer strong {
    color: var(--blue-deep);
}

.confirm-items span,
.order-items-card footer span {
    color: var(--muted);
}

.order-items-card footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e3ebf6;
}

.order-items-card footer .grand-total {
    color: var(--blue-deep);
    font-size: 1.1rem;
    font-weight: 900;
}

.order-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 800px) {
    .order-confirm-hero,
    .order-confirm-actions {
        display: grid;
    }

    .tracking-card,
    .order-confirm-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .site-header,
    .mobile-top,
    .mobile-bottom-nav,
    .store-footer,
    .order-confirm-actions,
    .print-order-btn {
        display: none !important;
    }

    body,
    .store-shell {
        background: #fff !important;
    }

    .store-frame,
    .order-confirm-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .order-confirm-hero,
    .tracking-card,
    .order-confirm-card {
        box-shadow: none !important;
        break-inside: avoid;
    }
}

.auth-simple-card {
    max-width: 620px;
    margin: 50px auto;
}

.auth-simple-card form {
    display: grid;
    gap: 16px;
}

.auth-simple-card label,
.payment-options + .checkout-notes {
    display: grid;
    gap: 8px;
}

/* Return / exchange request */
.service-actions {
    grid-template-columns: 1.15fr .85fr;
}

.disabled-link {
    pointer-events: none;
    opacity: .55;
}

.return-page {
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin: 22px auto 34px;
}

.return-hero,
.return-policy,
.return-form,
.return-summary {
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(8, 43, 90, .07);
}

.return-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(11, 63, 143, .08), rgba(228, 13, 32, .04)),
        #fff;
}

.return-hero span,
.form-section-title p {
    color: var(--muted);
    font-weight: 800;
}

.return-hero h1,
.return-policy h2,
.return-form h2,
.return-summary h2 {
    margin: 0;
    color: var(--blue-deep);
}

.return-hero p,
.return-policy p,
.return-summary p {
    margin: 0;
}

.return-policy {
    padding: 18px;
}

.return-policy h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1.15rem;
}

.return-policy h2 i {
    color: var(--red);
}

.return-policy div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.return-policy p {
    padding: 12px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #f8fbff;
    color: #4d5d76;
    line-height: 1.7;
    font-size: .9rem;
}

.return-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 360px;
    gap: 16px;
    align-items: start;
}

.return-form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.form-section-title {
    display: grid;
    gap: 4px;
}

.return-form label {
    display: grid;
    gap: 7px;
    color: #061844;
    font-weight: 900;
}

.return-form input[type="text"],
.return-form select,
.return-form textarea {
    width: 100%;
    border: 1px solid #cfdbeb;
    border-radius: 8px;
    background: #fff;
    color: #061844;
    padding: 12px;
    font: inherit;
    outline: none;
}

.return-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.choice-card {
    cursor: pointer;
}

.choice-card input {
    position: absolute;
    opacity: 0;
}

.choice-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px;
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--blue-deep);
    font-weight: 900;
}

.choice-card i {
    color: var(--red);
}

.choice-card input:checked + span {
    border-color: #0b3f8f;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px #0b3f8f;
}

.return-summary {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.return-summary-meta {
    display: grid;
    gap: 8px;
}

.return-summary-meta p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fbff;
}

.return-summary span {
    color: var(--muted);
}

.return-summary strong {
    color: var(--blue-deep);
}

.return-summary-items {
    display: grid;
    gap: 10px;
}

.return-summary-items article {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
}

.return-summary-items img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 8px;
    background: #f3f6fb;
}

.return-summary-items p {
    display: grid;
    gap: 3px;
}

.return-status-card {
    align-content: start;
}

.return-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #f8fbff;
}

.return-status-head span {
    color: var(--muted);
    font-weight: 900;
}

.return-status-head strong {
    color: var(--blue-deep);
    font-size: 1.08rem;
}

.return-timeline {
    display: grid;
    gap: 10px;
}

.return-timeline div {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 10px;
    color: #6b7890;
    font-weight: 800;
}

.return-timeline i {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf2f8;
    color: #9aa8bc;
}

.return-timeline .done i {
    background: #e8f8ef;
    color: #12824a;
}

.return-timeline .current span {
    color: var(--blue-deep);
    font-weight: 900;
}

.return-timeline .rejected i {
    background: #fff0f1;
    color: var(--red);
}

.return-request-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.return-request-details p {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #fff;
}

.return-request-details .full {
    grid-column: 1 / -1;
}

.return-request-details span {
    color: var(--muted);
    font-weight: 800;
}

.return-request-details strong {
    color: var(--blue-deep);
    line-height: 1.8;
}

.return-admin-table td {
    vertical-align: top;
}

.return-admin-table small {
    display: block;
    margin-top: 5px;
    color: #667085;
    line-height: 1.5;
}

@media (max-width: 960px) {
    .return-layout,
    .return-policy div,
    .service-actions {
        grid-template-columns: 1fr;
    }

    .return-summary {
        position: static;
    }
}

@media (max-width: 640px) {
    .return-page {
        margin-top: 12px;
        padding-inline: 10px;
    }

    .return-hero {
        display: grid;
        padding: 18px;
    }

    .return-choice-grid {
        grid-template-columns: 1fr;
    }

    .return-request-details {
        grid-template-columns: 1fr;
    }
}

/* Final product editor overrides: keep these after the legacy admin rules. */
.admin-shell .product-form-hero {
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 8px 0 0;
}

.admin-shell .product-form-page {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
}

.admin-shell .product-form-main,
.admin-shell .product-form-side {
    gap: 14px;
}

.admin-shell .product-form-card {
    padding: 17px;
    border-radius: 12px;
}

.admin-shell .product-form-card .form-grid {
    gap: 14px;
}

.admin-shell .product-form-card label,
.admin-shell .product-form-card .full {
    gap: 6px;
    font-size: .84rem;
}

.admin-shell .product-form-card input,
.admin-shell .product-form-card select {
    min-height: 41px;
}

.admin-shell .product-media-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 130px;
    gap: 12px;
}

.admin-shell .upload-drop {
    min-height: 160px;
    padding: 18px;
    border-radius: 12px;
}

.admin-shell .product-image-preview {
    width: 100%;
    height: 160px;
    border-radius: 12px;
}

.admin-shell .product-preview-card h3 {
    font-size: .98rem;
}

.admin-shell .product-preview-card strong {
    font-size: 1.08rem;
}

@media (max-width: 1180px) {
    .admin-shell .product-form-page {
        grid-template-columns: 1fr 1fr;
    }

    .admin-shell .product-form-main,
    .admin-shell .product-form-side {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .admin-shell .product-form-page,
    .admin-shell .product-media-editor {
        grid-template-columns: 1fr;
    }
}