[x-cloak] { display: none !important; }

/* =========================
   PREASE UI V4 — bigger, cleaner desktop rhythm
   ========================= */

.storefront-area {
    font-size: 16px;
}

.storefront-area .page-container {
    max-width: 1480px;
}

.storefront-area .section-spacing {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.storefront-area .prease-navbar {
    font-size: 15px;
}

.storefront-area .prease-nav-search {
    min-height: 2.9rem;
    font-size: 0.95rem;
}

.storefront-area main {
    color: #111827;
}

.storefront-area .store-card,
.storefront-area .store-panel {
    border-radius: 1.35rem;
}

.storefront-area .store-button-primary,
.storefront-area .store-button-secondary {
    min-height: 3.5rem;
    font-size: 1rem;
    font-weight: 700;
}

/* product detail page */
.storefront-area .product-detail-shell {
    gap: 4rem;
}

.storefront-area .product-detail-title {
    font-size: clamp(2.6rem, 4vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.storefront-area .product-detail-price {
    font-size: clamp(2rem, 2.5vw, 2.85rem);
    line-height: 1.05;
}

.storefront-area .product-detail-label {
    font-size: 1rem;
    font-weight: 700;
}

.storefront-area .product-detail-pill,
.storefront-area .product-detail-qty,
.storefront-area .product-detail-tab {
    font-size: 0.98rem;
}

.storefront-area .product-detail-actions button,
.storefront-area .product-detail-actions a {
    min-height: 3.6rem;
    font-size: 1.02rem;
    font-weight: 700;
}

.storefront-area .product-detail-summary {
    font-size: 0.98rem;
    line-height: 1.6;
}

.storefront-area .product-main-image {
    border-radius: 1rem;
}

.storefront-area .product-thumb-grid button {
    border-radius: 0.85rem;
}

/* generic storefront form sizing */
.storefront-area input,
.storefront-area select,
.storefront-area textarea,
.storefront-area button {
    font-size: 0.97rem;
}

.admin-area {
    font-size: 15px;
}

.admin-area .admin-main-shell > main {
    padding: 1.5rem;
}


.admin-area .admin-stat-card,
.admin-area .admin-panel,
.admin-area .bg-white.rounded-2xl,
.admin-area .bg-white.rounded-xl,
.admin-area .border.bg-white {
    border-radius: 1.2rem;
}

.admin-area h1 {
    letter-spacing: -0.03em;
}

.admin-area .admin-page-kicker {
    font-size: 0.9rem;
    letter-spacing: 0.32em;
}

.admin-area .admin-page-title {
    font-size: clamp(2.2rem, 3vw, 3.2rem);
    line-height: 1;
    font-weight: 900;
}

.admin-area .admin-page-subtitle {
    font-size: 1rem;
    color: #6b7280;
}

.admin-area .admin-stat-label {
    font-size: 0.98rem;
}

.admin-area .admin-stat-value {
    font-size: clamp(2.1rem, 2.6vw, 3rem);
    line-height: 1;
}

.admin-area .admin-input,
.admin-area input[type='text'],
.admin-area input[type='search'],
.admin-area input[type='number'],
.admin-area input[type='email'],
.admin-area input[type='password'],
.admin-area input[type='date'],
.admin-area select,
.admin-area textarea {
    min-height: 3.25rem;
    font-size: 0.98rem;
}

.admin-area table th {
    font-size: 0.83rem;
    letter-spacing: 0.04em;
}

.admin-area table td {
    font-size: 0.97rem;
}

.admin-area .admin-table th,
.admin-area .admin-table td {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.admin-area .admin-filter-actions a,
.admin-area .admin-filter-actions button,
.admin-area .admin-cta,
.admin-area .admin-topbar-btn {
    min-height: 3.15rem;
    font-size: 0.97rem;
    font-weight: 700;
}

.admin-area .admin-sidebar a {
    font-size: 0.98rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .storefront-area .page-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .admin-area .admin-main-shell > main {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .storefront-area .page-container {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .storefront-area .section-spacing {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .admin-area .admin-main-shell > main {
        padding: 2.35rem 2.5rem;
    }
}

@media (min-width: 1280px) {
    .admin-area .admin-main-shell > main {
        padding: 2.75rem 3rem;
    }
}

/* Admin sidebar collapse synchronization fix (v4.1) */
@media (min-width: 1024px) {
    .admin-area .admin-sidebar {
        width: var(--admin-sidebar-width, 18rem);
    }

    .admin-area .admin-sidebar.admin-sidebar--collapsed nav {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .admin-area .admin-sidebar.admin-sidebar--collapsed nav > a {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        min-height: 3rem;
    }

    .admin-area .admin-sidebar.admin-sidebar--collapsed nav > div {
        padding-left: 0;
        padding-right: 0;
    }

    .admin-area .admin-sidebar.admin-sidebar--collapsed nav > div > p[x-cloak],
    .admin-area .admin-sidebar.admin-sidebar--collapsed nav > div > p {
        white-space: nowrap;
    }
}


/* Admin navigation persistence fix (v4.2)
   The class is placed on <html> in <head> before first paint, so a collapsed
   sidebar never flashes expanded while moving between admin pages. */
@media (min-width: 1024px) {
    html.admin-sidebar-collapsed .admin-area {
        --admin-sidebar-width: 5rem;
    }

    html:not(.admin-sidebar-collapsed) .admin-area {
        --admin-sidebar-width: 18rem;
    }

    html.admin-sidebar-collapsed .admin-sidebar [x-show="$store.sidebar.open"] {
        display: none !important;
    }

    html.admin-sidebar-collapsed .admin-sidebar nav {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    html.admin-sidebar-collapsed .admin-sidebar nav > a {
        justify-content: center;
        gap: 0;
        min-height: 3rem;
        padding-left: 0;
        padding-right: 0;
    }

    html.admin-sidebar-collapsed .admin-sidebar nav > div {
        padding-left: 0;
        padding-right: 0;
    }
}