/* ==========================================

   1. COLORS & VARIABLES

   ========================================== */

:root {

    --primary: #22c55e;

    --primary-dark: #128c7e;

    --primary-soft: #dcfce7;

    --primary-tint: #f2fbf5;

    --brand-gradient: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

    --brand-gradient-strong: linear-gradient(135deg, #22c55e 0%, #0f7a41 100%);

    --brand-gradient-soft: linear-gradient(180deg, rgba(37, 211, 102, 0.12), rgba(18, 140, 126, 0.08));

    --brand-shadow: 0 14px 28px rgba(18, 140, 126, 0.22);

    --brand-shadow-strong: 0 18px 34px rgba(18, 140, 126, 0.26);

    --brand-ring: 0 0 0 4px rgba(37, 211, 102, 0.16);

    --secondary: #ffffff;

    --surface: #ffffff;

    --surface-soft: #f8fbf8;

    --surface-elevated: rgba(255, 255, 255, 0.84);

    --text-dark: #0f172a;

    --text-light: #7c8b9d;

    --error: #ef4444;

    --gray-dark: #d8e8dd;

    --border-soft: rgba(148, 163, 184, 0.14);

    --border-strong: rgba(15, 23, 42, 0.08);

    --panel-border: rgba(255, 255, 255, 0.72);

    --panel-shadow: 0 20px 45px rgba(15, 23, 42, 0.07);

    --panel-shadow-strong: 0 24px 50px rgba(15, 23, 42, 0.1);

    --ring-focus: var(--brand-ring);

    --bottom-nav-space: calc(1.15rem + env(safe-area-inset-bottom));

    --bottom-nav-shell-top: 0.34rem;

    --bottom-nav-shell-bottom: calc(0.42rem + env(safe-area-inset-bottom));

    --tab-btn-min-width: 4rem;

    --tab-btn-padding: 0.5rem 0.5rem 0.38rem;

    --tab-btn-radius: 0.92rem;

    --tab-btn-label-size: 0.7rem;

    --tab-btn-icon-size: 1.34rem;

    --tab-btn-icon-gap: 0.18rem;

    --whatsapp-chat-bottom: calc(5.35rem + env(safe-area-inset-bottom));

    --whatsapp-fab-bottom: calc(5.8rem + env(safe-area-inset-bottom));

    --safe-area-top: env(safe-area-inset-top, 0px);

    --safe-area-left: env(safe-area-inset-left, 0px);

    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

    --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    --type-micro: 0.68rem;

    --type-caption: 0.78rem;

    --type-label: 0.84rem;

    --type-body: 0.92rem;

    --type-body-sm: 0.88rem;

    --type-button: 0.9rem;

    --type-title: 1.48rem;

    --type-section: 1.38rem;

    --type-card-title: 1.08rem;

}



/* Core App Layout */

.tab-content {

    display: none;

    padding-bottom: var(--bottom-nav-space);

    content-visibility: auto;

    contain: layout style paint;

    contain-intrinsic-size: 900px;

}

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

#tab-checkout,

#shippingMethod {

    scroll-margin-top: 9rem;

}

.food-card { transition: all 0.3s; }

.food-card:active { transform: scale(0.95); }

.modal { animation: slideUp 0.3s ease forwards; }

@keyframes slideUp {

  from { transform: translateY(100%); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}



/* ==========================================

   2. GLOBAL & BASE STYLES

   ========================================== */

html {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

}



body {

    font-family: var(--font-body);

    letter-spacing: -0.012em;

    line-height: 1.5;

    font-weight: 500;

    background-image:

        radial-gradient(circle at top, rgba(34, 197, 94, 0.09), transparent 30%),

        radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.06), transparent 22%),

        linear-gradient(180deg, #f7faf7 0%, #f3f7f4 48%, #eef4f0 100%);

    background-attachment: fixed;

    color: var(--text-dark);

}



img,

iframe {

    content-visibility: auto;

}



body.cart-blur-active .cart-blur-layer {

    transition: filter 0.28s ease, opacity 0.28s ease, transform 0.28s ease;

    transform-origin: top center;

    filter: blur(2px) saturate(0.992) brightness(0.985);

    opacity: 0.992;

    transform: scale(0.9992);

    pointer-events: none;

    user-select: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-heading);

    letter-spacing: -0.025em;

    line-height: 1.08;

    color: var(--text-dark);

    font-weight: 700;

}



p,

span,

label,

input,

textarea,

select,

button,

a {

    font-family: var(--font-body);

}



button,

.tab-btn,

.checkout-button,

.save-qr-button,

.file-upload-label,

.payment-method .button-container button {

    letter-spacing: -0.015em;

    font-weight: 600;

}



.checkout-button {

    min-height: 3rem;

    padding: 0.78rem 1rem;

    border: none;

    border-radius: 1rem;

    font-size: 0.94rem;

    line-height: 1.1;

    background: var(--brand-gradient);

    color: #2e2b2b;

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.18),

        var(--brand-shadow);

    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

}



.checkout-button:hover {

    transform: translateY(-1px);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.2),

        var(--brand-shadow-strong);

    filter: saturate(1.04);

}



input,

textarea,

select {

    font-size: var(--type-body);

    font-weight: 500;

}



input::placeholder,

textarea::placeholder {

    color: #94a3b8;

    font-weight: 500;

}



header h1 {

    font-family: var(--font-heading);

    font-weight: 700;

    letter-spacing: -0.03em;

}



header p,

.custom-category-bar,

.shipping-option,

.order-details,

.location-section,

.customer-form label,

.confirm-order label,

.whatsapp-body p,

.footer,

#activeCategoryLabel {

    letter-spacing: -0.01em;

}



.customer-form label,

.confirm-order label {

    display: inline-block;

    margin-bottom: 0.38rem;

    font-size: var(--type-label);

    font-weight: 600;

    letter-spacing: -0.012em;

    color: #334155;

}



.customer-form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem 1.1rem;

}



.field-group {

    display: flex;

    flex-direction: column;

}



.field-group--full {

    grid-column: 1 / -1;

}



.section-title {

    font-size: var(--type-section);

    line-height: 1.12;

    letter-spacing: -0.03em;

    margin-bottom: 1rem;

    color: #0b1220;

}



.app-panel {

    border-radius: 1.3rem !important;

    border: 1px solid var(--panel-border) !important;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 248, 0.92)) !important;

    box-shadow: var(--panel-shadow);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.desktop-home-spotlight {

    display: none;

}



.product-card h3,

.order-details h3,

.payment-method h3,

.qr-section h3,

.confirm-order h3,

.location-section h3,

.shipping-method h3,

.customer-form h3,

.success-modal-content h3,

#detail-name {

    font-family: var(--font-heading);

    letter-spacing: -0.03em;

}



.product-card h3 {

    font-size: 1rem;

    line-height: 1.2;

    font-weight: 700;

}



.stock-text,

.order-item-meta,

.whatsapp-body p,

.file-name,

#detail-video-empty,

#detail-desc {

    line-height: 1.5;

}



/* ==========================================

   3. HEADER & NAVIGATION

   ========================================== */

.app-header {

    background: rgba(248, 251, 248, 0.8);

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);

    border-bottom: 1px solid rgba(255, 255, 255, 0.62);

    padding-top: var(--safe-area-top);

    isolation: isolate;

}



.app-header-inner {

    padding-top: 0.9rem;

    padding-bottom: 0.85rem;

}



.app-header-brand {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    min-width: 0;

    flex: 1 1 auto;

    padding-right: 0.85rem;

}



.app-header-copy {

    min-width: 0;

}



.app-header-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex: 0 0 auto;

}



.app-header-logo {

    width: 2.7rem;

    height: 2.7rem;

    border-radius: 9999px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.16rem;

    background: #ffffff;

    box-shadow: 0 14px 28px rgba(22, 163, 74, 0.24);

}



.app-header-logo-image {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    image-rendering: -webkit-optimize-contrast;

}



.app-header-title {

    font-size: var(--type-title);

    line-height: 1.05;

}



.app-header-subtitle {

    max-width: 15rem;

    font-size: var(--type-caption);

    line-height: 1.3;

    color: #64748b;

}



.header-cart-btn {

    width: 2.9rem;

    height: 2.9rem;

    border: 1px solid rgba(255, 255, 255, 0.92);

    border-radius: 0.9rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 245, 0.92));

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #0f172a;

    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.header-cart-btn:hover {

    transform: translateY(-1px);

    background: linear-gradient(180deg, #ffffff, #f6fbf7);

    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);

}



.app-search-row {

    position: relative;

}



.app-search-nav-row {

    width: 100%;

}



.app-search-row::before {

    content: none;

}



.app-search-shell {

    min-height: 3.25rem;

    border-radius: 1.08rem;

    border: 1px solid rgba(148, 163, 184, 0.2) !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 248, 0.92));

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);

    position: relative;

    overflow: hidden;

}



.app-search-shell::after {

    content: "";

    position: absolute;

    top: 0.6rem;

    bottom: 0.6rem;

    right: 3.2rem;

    width: 1px;

    background: linear-gradient(180deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0));

}



.app-search-icon-shell {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    border-radius: 999px;

    background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(220, 252, 231, 0.86));

    color: var(--primary-dark);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}



.app-search-input {

    font-size: var(--type-body);

    font-weight: 500;

}



.app-search-accent {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    border-radius: 999px;

    color: rgba(18, 140, 126, 0.72);

    background: rgba(242, 251, 245, 0.88);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);

}



.app-shortcut-card {

    padding-top: 1.35rem;

    padding-bottom: 1.2rem;

}



.app-shortcut-card p {

    font-size: var(--type-body);

    font-weight: 700;

    color: #0f172a;

}



.shop-status-meta-grid {

    display: none;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.75rem;

}



.shop-status-meta-card {

    min-width: 0;

    padding: 0.85rem 0.95rem;

    border: 1px solid rgba(226, 232, 240, 0.92);

    border-radius: 1rem;

    background: #f8fafc;

}



.shop-status-meta-label {

    margin: 0;

    color: #94a3b8;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}



.shop-status-meta-value {

    margin: 0.4rem 0 0;

    color: #0f172a;

    font-size: 0.92rem;

    font-weight: 700;

    line-height: 1.5;

    word-break: break-word;

}



.app-bottom-nav {

    background: rgba(248, 251, 248, 0.9);

    backdrop-filter: blur(18px);

    padding-bottom: 0.24rem;

    box-shadow:

        0 -16px 34px rgba(15, 23, 42, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.62);

}



.app-bottom-nav-shell {

    position: relative;

    margin: 0 auto;

    padding-top: var(--bottom-nav-shell-top) !important;

    padding-bottom: var(--bottom-nav-shell-bottom) !important;

    border: none;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}



.tab-btn {

    min-width: var(--tab-btn-min-width);

    padding: var(--tab-btn-padding);

    border-radius: var(--tab-btn-radius);

    font-size: var(--type-caption);

    line-height: 1.05;

    font-weight: 600;

    color: #6b7280;

    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.tab-btn span {

    font-size: var(--tab-btn-label-size);

    letter-spacing: -0.01em;

}



.tab-btn i {

    font-size: var(--tab-btn-icon-size);

    margin-bottom: var(--tab-btn-icon-gap) !important;

}



.tab-btn.is-active {

    background: rgba(240, 253, 244, 0.94);

    color: var(--primary) !important;

    box-shadow:

        inset 0 0 0 1px rgba(22, 163, 74, 0.12),

        0 8px 14px rgba(22, 163, 74, 0.08);

}



.tab-btn.is-active i {

    transform: translateY(-1px);

}



.tab-btn:not(.is-active):hover {

    background: rgba(255, 255, 255, 0.44);

    color: #475569;

}



.custom-category-bar,

.shipping-method,

.customer-form,

.order-details,

.payment-method,

.qr-section,

.confirm-order,

.location-section {

    border-radius: 1.3rem !important;

    border: 1px solid var(--panel-border) !important;

    box-shadow: var(--panel-shadow);

}



.flex-container {

    display: flex;

    gap: 10px;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

}



.custom-category-bar select {

    padding: 8px 12px;

    border-radius: 10px;

    border: 1px solid var(--border-soft);

    outline: none;

    font-size: var(--type-body-sm);

    background-color: rgba(255, 255, 255, 0.84);

    background-repeat: no-repeat;

    background-position: 8px center;

    padding-left: 30px;

    color: var(--text-dark);

    background-image: url('https://img.icons8.com/ios-filled/16/000000/tags.png');

}



.custom-category-bar select:focus {

    border-color: var(--primary-dark);

    box-shadow: var(--ring-focus);

}



/* ==========================================

   4. SEARCH COMPONENTS

   ========================================== */

.search-icon {

    padding: 10px;

    border-radius: 50%;

    background: var(--surface);

    cursor: pointer;

    width: 40px;

    height: 40px;

    box-sizing: border-box;

    justify-content: center;

    align-items: center;

    display: flex;

}



.search-icon svg {

    width: 20px;

    height: 20px;

    stroke: var(--text-light);

}



.search-input {

    display: none;

    background: var(--surface);

    color: var(--text-dark);

    width: 200px; /* Sama seperti tablet */

    left: 2rem;

    border: 1px solid var(--gray-dark);

    border-radius: 10px;

    padding: 0.4rem;

}



.search-input.active {

    display: block;

}



.search-input:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);

}



/* ==========================================

   5. SHOP CONTEXT & TITLE

   ========================================== */

.cart-count {

    position: absolute;

    top: -8px;

    right: -8px;

    background: var(--primary);

    color: white;

    border-radius: 50%;

    padding: 2px;

    font-size: 0.75rem;

    font-weight: 600;

    min-width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}



/* ==========================================

   8. PRODUCT GRID & CARDS

   ========================================== */

.product-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 0.5rem;

    margin-bottom: 0.5rem;

}



.flash-sale-label {

    position: absolute;

    top: 8px;

    left: 8px;

    background: linear-gradient(135deg, #dc2626, #b91c1c);

    color: white;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 0.8rem;

    font-weight: 600;

    box-shadow: 0 10px 18px rgba(185, 28, 28, 0.22);

    z-index: 10;

}



.flash-sale-timer {

    color: #dc2626;

    font-size: 0.9rem;

    margin-bottom: 8px;

}



.flash-sale-timer .timer-text {

    color: #dc2626 !important; /* Pastikan teks pemasa juga merah */

}



.flash-sale-timer.active {

    animation: pulse 1.5s infinite;

}



.product-card:hover {

    transform: translateY(-2px);

}



.product-card h3 {

    font-weight: 500;

    color: var(--text-dark);

}



.product-card {

    border-radius: 1.2rem !important;

    border: 1px solid rgba(255, 255, 255, 0.88) !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.94));

    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08) !important;

}



.product-card > div:last-child {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(247, 250, 248, 0.7));

    border-top: 1px solid rgba(148, 163, 184, 0.14);

    border-bottom-left-radius: 1.2rem;

    border-bottom-right-radius: 1.2rem;

}



.product-card-image {

    border-top-left-radius: 1.2rem !important;

    border-top-right-radius: 1.2rem !important;

    background: transparent;

}



.latest-products-shell {

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 1.75rem;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.95)),

        radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 40%);

    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);

    padding: 1.1rem;

}



.latest-products-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.95rem;

}



.latest-products-kicker {

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: #94a3b8;

}



.latest-products-heading {

    margin-top: 0.3rem;

    font-size: 1.32rem;

    line-height: 1;

    letter-spacing: -0.04em;

}



.latest-products-counter {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 3rem;

    border-radius: 999px;

    padding: 0.45rem 0.75rem;

    background: rgba(15, 23, 42, 0.06);

    color: #0f172a;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: -0.02em;

}



.latest-products-slider {

    overflow: hidden;

    border-radius: 1.45rem;

    touch-action: pan-y;

}



.latest-products-track {

    display: flex;

    transition: transform 0.45s ease;

    will-change: transform;

}



.latest-product-slide {

    min-width: 100%;

    flex: 0 0 100%;

}



.latest-product-card {

    width: 100%;

    border: none !important;

    padding: 0;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

}



.latest-product-card:focus-visible {

    outline: none;

    box-shadow: var(--ring-focus), 0 18px 32px rgba(15, 23, 42, 0.16) !important;

}



.latest-product-media {

    position: relative;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(34, 197, 94, 0.06)),

        #f4f8f5;

    aspect-ratio: 16 / 11;

    overflow: hidden;

}



.latest-product-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover !important;

    object-position: center;

}



.latest-product-badge {

    position: absolute;

    top: 0.9rem;

    left: 0.9rem;

    display: inline-flex;

    align-items: center;

    gap: 0.38rem;

    border-radius: 999px;

    padding: 0.38rem 0.72rem;

    background: rgba(255, 255, 255, 0.92);

    color: #0f172a;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: -0.01em;

    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);

}



.latest-product-badge::before {

    content: "";

    width: 0.45rem;

    height: 0.45rem;

    border-radius: 999px;

    background: linear-gradient(135deg, #facc15, #f59e0b);

    box-shadow: 0 0 0 0.18rem rgba(250, 204, 21, 0.16);

}



.latest-product-copy {

    padding: 1rem 1rem 1.05rem;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.9rem;

}



.latest-product-name {

    flex: 1 1 auto;

    margin: 0;

    font-size: 1rem;

    line-height: 1.3;

    letter-spacing: -0.025em;

    color: #0f172a;

    text-align: left;

}



.latest-product-price {

    flex: 0 0 auto;

    margin: 0;

    font-size: 0.98rem;

    color: #0f7a41;

    text-align: right;

    white-space: nowrap;

}



.latest-products-empty {

    border-radius: 1.2rem;

    border: 1px dashed rgba(148, 163, 184, 0.34);

    background: rgba(248, 250, 252, 0.84);

    padding: 1rem;

    text-align: center;

    color: #64748b;

    font-size: 0.9rem;

}



#tab-menu .menu-load-more-panel {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    margin-top: 1rem;

    padding: 0.35rem 0 0.25rem;

    min-height: 3rem;

}



#tab-menu .menu-load-more-panel.hidden,

#tab-menu .menu-load-more-auto.hidden,

#tab-menu .menu-load-more-done.hidden {

    display: none !important;

}



#tab-menu .menu-load-more-auto {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2.5rem;

    height: 2.5rem;

    padding: 0;

    border: none;

    background: transparent;

    box-shadow: none;

}



#tab-menu .menu-load-more-done {

    width: 100%;

    margin: 0;

    text-align: center;

    color: #64748b;

    font-size: 0.95rem;

    font-weight: 600;

}



#tab-menu .menu-load-more-auto-spinner {

    width: 0.95rem;

    height: 0.95rem;

    border-radius: 999px;

    border: 2px solid rgba(16, 185, 129, 0.2);

    border-top-color: #10b981;

    animation: washopMenuAutoLoadSpin 0.8s linear infinite;

    flex-shrink: 0;

}



@keyframes washopMenuAutoLoadSpin {

    to {

        transform: rotate(360deg);

    }

}



.latest-products-dots {

    display: flex;

    align-items: center;

    gap: 0.42rem;

    margin-top: 0.95rem;

}



.latest-products-dot {

    flex: 1 1 0;

    height: 0.22rem;

    border: 0;

    border-radius: 999px;

    background: rgba(203, 213, 225, 0.9);

    transition: background-color 0.25s ease, transform 0.25s ease;

    cursor: pointer;

}



.latest-products-dot.is-active {

    background: #0f172a;

    transform: scaleY(1.15);

}



.popular-products-shell {

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 1.75rem;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.95)),

        radial-gradient(circle at top right, rgba(250, 204, 21, 0.12), transparent 30%);

    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);

    padding: 1.1rem;

}



.popular-products-heading {

    margin: 0.3rem 0 0;

    font-size: 1.32rem;

    line-height: 1;

    letter-spacing: -0.04em;

    color: #0f172a;

}



.popular-products-header {

    margin-bottom: 1rem;

}



.popular-products-list {

    display: grid;

    gap: 0.9rem;

    align-content: start;

    grid-auto-rows: max-content;

}



.popular-product-card {

    width: 100%;

    border: none !important;

    padding: 0 !important;

    display: grid;

    grid-template-columns: 7.2rem minmax(0, 1fr);

    align-items: stretch;

    gap: 0;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    align-self: start;

}



.popular-product-card > div:last-child {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(247, 250, 248, 0.7));

    border-top: none !important;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    padding: 1rem 1rem 1rem 0.95rem;

}



.popular-product-card:focus-visible {

    outline: none;

    box-shadow: var(--ring-focus), 0 18px 32px rgba(15, 23, 42, 0.16) !important;

}



.popular-product-media {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: 100%;

    aspect-ratio: auto;

    border-radius: 1.2rem 0 0 1.2rem;

    overflow: hidden;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(34, 197, 94, 0.06)),

        #f4f8f5;

}



.popular-product-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover !important;

    object-position: center;

}



.popular-product-copy {

    min-width: 0;

}



.popular-product-category {

    margin: 0;

    font-size: 0.72rem;

    color: #64748b;

    letter-spacing: -0.01em;

}



.popular-product-name {

    margin: 0.22rem 0 0;

    font-size: 1.2rem;

    line-height: 1.15;

    letter-spacing: -0.03em;

    color: #0f172a;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.popular-product-price {

    margin: 0.45rem 0 0;

    font-size: 0.92rem;

    color: #0f7a41;

    font-weight: 700;

}



.stock-text {

    font-size: var(--type-caption);

    color: var(--text-light);

}



.product-price {

    color: #0f7a41;

    font-weight: 700;

    letter-spacing: -0.02em;

}



.stock-low {

    color: var(--error);

    font-weight: 500;

}



.out-of-stock {

    color: var(--error);

    font-weight: 500;

}



/* ==========================================

   9. FORMS & SECTIONS (Right Side)

   ========================================== */

.right-section {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



/* ==========================================

   10. SHIPPING OPTIONS

   ========================================== */

.shipping-options {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.shipping-option {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: var(--type-body);

    cursor: pointer;

    padding: 0.95rem 1rem;

    border: 1px solid rgba(148, 163, 184, 0.14);

    border-radius: 1rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 247, 0.88));

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.shipping-option input[type="radio"] {

    width: 18px;

    height: 18px;

    accent-color: var(--primary);

    cursor: pointer;

}



.shipping-option:hover {

    transform: translateY(-1px);

    border-color: rgba(22, 163, 74, 0.18);

    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.05);

}



.customer-form input,

.customer-form select,

.confirm-order textarea {

    width: 100%;

    min-height: 3.15rem;

    padding: 0.9rem 1rem;

    border: 1px solid rgba(148, 163, 184, 0.16);

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.88));

    color: var(--text-dark);

    border-radius: 1rem;

    font-size: var(--type-body);

    box-shadow:

        inset 0 1px 2px rgba(15, 23, 42, 0.02),

        0 1px 0 rgba(255, 255, 255, 0.55);

}



.address-stack {

    display: grid;

    gap: 0.8rem;

}



.customer-form input::placeholder,

.customer-form select {

    color: #94a3b8;

}



.customer-form select,

.customer-form select option {

    color: var(--text-dark);

}



.customer-form input:focus,

.customer-form select:focus,

.confirm-order textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: #ffffff;

    box-shadow: var(--ring-focus);

}



.confirm-order textarea {

    min-height: 112px;

    resize: vertical;

}



.payment-method .button-container button {

    min-width: 88px;

    width: 100%;

    min-height: 3rem;

    padding: 0.8rem 1rem;

    border-radius: 1rem;

    font-size: var(--type-button);

    font-weight: 700;

    letter-spacing: -0.01em;

    cursor: pointer;

    border: 1px solid transparent;

    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;

}



.payment-method .button-container .mb-4 {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.75rem;

}



.payment-method .button-container button.inactive {

    color: var(--text-dark);

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 251, 245, 0.92));

    border-color: rgba(22, 163, 74, 0.12);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.72),

        0 10px 22px rgba(148, 163, 184, 0.09);

}



.payment-method .button-container button.inactive:hover {

    transform: translateY(-1px);

    background: linear-gradient(180deg, #ffffff, #ecfdf5);

    border-color: rgba(22, 163, 74, 0.22);

    box-shadow: 0 12px 24px rgba(18, 140, 126, 0.14);

}



.payment-method .button-container button.active {

    background: var(--primary);

    border: none;

    color: white;

    transform: translateY(-1px);

    box-shadow: 0 16px 30px rgba(22, 163, 74, 0.24);

}



.payment-method .button-container button:disabled {

    background: rgba(241, 245, 249, 0.96) !important;

    border-color: rgba(203, 213, 225, 0.95) !important;

    color: rgba(100, 116, 139, 0.7) !important;

    box-shadow: none !important;

    cursor: not-allowed;

    transform: none;

}



#cashButton.active {

    background: var(--brand-gradient);

    box-shadow: var(--brand-shadow-strong);

}



#qrButton.active {

    background: var(--brand-gradient);

    box-shadow: var(--brand-shadow-strong);

}



#toyyibpayButton.active {

    background: var(--brand-gradient);

    box-shadow: var(--brand-shadow-strong);

}



.payment-method h3 svg {

    vertical-align: middle;

    margin-right: 0.5rem;

}



/* ==========================================

   13. QR PAYMENT & FILE UPLOAD

   ========================================== */

.qr-section img {

    max-width: 100%;

    width: 280px;

    margin: 1rem auto;

    display: block;

}



.save-qr-button {

    background: var(--brand-gradient);

    color: white;

    padding: 0.75rem 1.1rem;

    border: none;

    border-radius: 0.95rem;

    cursor: pointer;

    transition: background 0.2s;

    font-size: var(--type-body-sm);

    display: block;

    margin: 0 auto;

    box-shadow: var(--brand-shadow);

}



.save-qr-button:hover {

    background: var(--brand-gradient-strong);

}



.ios-install-popup {

    position: fixed;

    left: 1rem;

    right: 1rem;

    bottom: calc(1rem + env(safe-area-inset-bottom));

    z-index: 2100;

}



.ios-install-popup-card {

    width: min(100%, 28rem);

    margin: 0 auto;

    padding: 1rem;

    border: 1px solid rgba(226, 232, 240, 0.92);

    border-radius: 1.5rem;

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

}



.ios-install-popup-top {

    display: flex;

    align-items: center;

    gap: 0.9rem;

}



.ios-install-popup-icon {

    width: 4rem;

    height: 4rem;

    border-radius: 1.15rem;

    border: 1px solid rgba(226, 232, 240, 0.9);

    background: linear-gradient(180deg, #ffffff, #f3f7f4);

    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);

    object-fit: cover;

}



.ios-install-popup-copy {

    min-width: 0;

}



.ios-install-popup-kicker {

    margin: 0 0 0.16rem;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #059669;

}



.ios-install-popup-text {

    margin: 0;

    font-size: 0.92rem;

    line-height: 1.45;

    color: #475569;

}



.ios-install-popup-actions {

    display: flex;

    gap: 0.75rem;

    margin-top: 1rem;

}



.ios-install-popup-close,

.ios-install-popup-confirm {

    flex: 1 1 0;

    min-height: 3rem;

    border: none;

    border-radius: 1rem;

    font-size: 0.92rem;

    font-weight: 700;

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.ios-install-popup-close {

    background: #f1f5f9;

    color: #0f172a;

}



.ios-install-popup-confirm {

    background: linear-gradient(135deg, #10b981, #0f9f74);

    color: #ffffff;

    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.24);

}



.ios-install-popup-close:hover,

.ios-install-popup-confirm:hover {

    transform: translateY(-1px);

}



.file-upload-wrapper {

    position: relative;

    margin-top: 1rem;

    text-align: center;

}



.file-upload-input {

    opacity: 0;

    position: absolute;

    width: 100%;

    height: 100%;

    cursor: pointer;

    z-index: 10;

}



.file-upload-label {

    display: inline-block;

    width: 100%;

    max-width: 220px;

    padding: 0.75rem 0.9rem;

    border: 1.5px dashed rgba(22, 163, 74, 0.45);

    border-radius: 0.95rem;

    font-size: var(--type-body-sm);

    color: var(--primary-dark);

    cursor: pointer;

    transition: all 0.2s;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 251, 245, 0.92));

    text-align: center;

}



.file-upload-label:hover {

    border-color: var(--primary-dark);

    background: linear-gradient(180deg, #ffffff, #ecfdf5);

    box-shadow: 0 12px 24px rgba(18, 140, 126, 0.12);

}



.file-upload-label.uploaded {

    border-style: solid;

    border-color: var(--primary-dark);

    background: linear-gradient(180deg, #f0fdf4, #dcfce7);

    color: var(--primary-dark);

}



.file-upload-label.uploaded:hover {

    background: #d1fae5;

}



.file-upload-input1 {

    opacity: 0;

    width: 100%;

    max-width: 300px; /* Hadkan lebar input */

    cursor: pointer;

    z-index: 10;

}



.file-upload-wrapper1 {

    position: relative;

    margin-top: 0.5rem;

    text-align: center;

}



.file-name {

    font-size: var(--type-caption);

    color: var(--text-dark);

    margin-top: 0.5rem;

    text-align: center;

    word-break: break-all;

}



/* ==========================================

   14. LOCATION & MAPS

   ========================================== */

.location-section iframe {

    width: 100%;

    height: 200px;

    border-radius: 1rem;

    margin-bottom: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.82);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);

}



.location-details {

    display: grid;

    gap: 0.7rem;

    padding: 0.95rem 1rem;

    border: 1px solid rgba(148, 163, 184, 0.12);

    border-radius: 1rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 251, 245, 0.88));

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.72),

        0 10px 22px rgba(15, 23, 42, 0.04);

}



.location-info-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.7rem;

}



.location-info-card {

    padding: 0.85rem 0.9rem;

    border: 1px solid rgba(148, 163, 184, 0.12);

    border-radius: 0.95rem;

    background: rgba(255, 255, 255, 0.82);

}



.location-info-card span,

.location-info-label {

    display: block;

    margin: 0;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #94a3b8;

}



.location-info-card strong {

    display: block;

    margin-top: 0.35rem;

    color: #0f172a;

    font-size: var(--type-body-sm);

    line-height: 1.55;

}



.location-address-block,

.location-contact-block {

    display: grid;

    gap: 0.45rem;

}



.location-address,

.location-phone {

    margin: 0;

}



.location-address {

    color: #334155;

    font-size: var(--type-body-sm);

    line-height: 1.65;

    white-space: pre-line;

}



.location-phone {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    max-width: 100%;

    padding: 0.48rem 0.78rem;

    border-radius: 999px;

    background: rgba(37, 211, 102, 0.1);

    color: var(--primary-dark);

    font-size: var(--type-caption);

    font-weight: 700;

    letter-spacing: -0.01em;

}



.desktop-home-location {

    display: none;

}



/* ==========================================

   15. MODAL SYSTEM (General & Product)

   ========================================== */

#detail-modal {

    overscroll-behavior: contain;

    color: var(--text-dark);

}



#detail-modal,

#cart-modal,

#shopDetailsModal {

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.22s ease;

}



#detail-modal[data-modal-state="open"],

#cart-modal[data-modal-state="open"],

#shopDetailsModal[data-modal-state="open"] {

    opacity: 1;

    pointer-events: auto;

}



#detail-modal .modal {

    width: 100%;

    position: relative;

}



.cart-modal-overlay {

    background:

        linear-gradient(180deg, rgba(247, 250, 248, 0.42), rgba(241, 245, 249, 0.2)),

        rgba(15, 23, 42, 0.18);

    backdrop-filter: blur(6px) saturate(108%) brightness(0.98);

    -webkit-backdrop-filter: blur(6px) saturate(108%) brightness(0.98);

    padding: 0 0.75rem;

}



.cart-sheet {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 248, 0.97));

    border: 1px solid rgba(255, 255, 255, 0.84);

    border-top-left-radius: 1.6rem;

    border-top-right-radius: 1.6rem;

    box-shadow: 0 -28px 70px rgba(15, 23, 42, 0.22);

}



#detail-modal .detail-modal-card,

#cart-modal .cart-sheet,

#shopDetailsModal > div {

    opacity: 0.98;

    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;

    will-change: transform, opacity;

}



#detail-modal .detail-modal-card,

#shopDetailsModal > div {

    transform: translateY(18px) scale(0.985);

}



#cart-modal .cart-sheet {

    transform: translateY(22px);

}



#detail-modal[data-modal-state="open"] .detail-modal-card,

#shopDetailsModal[data-modal-state="open"] > div {

    transform: translateY(0) scale(1);

    opacity: 1;

}



#cart-modal[data-modal-state="open"] .cart-sheet {

    transform: translateY(0);

    opacity: 1;

}



.cart-sheet-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.15rem;

}



.cart-sheet-heading {

    min-width: 0;

    display: grid;

    gap: 0.3rem;

}



.cart-sheet-kicker {

    margin: 0;

    color: #94a3b8;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}



.cart-sheet-title {

    margin: 0;

    color: #0f172a;

    font-size: 1.72rem;

    line-height: 1.02;

    letter-spacing: -0.045em;

}



.cart-sheet-close,

.cart-sheet-header > button {

    flex: 0 0 auto;

    width: 2.85rem;

    height: 2.85rem;

    border: 1px solid rgba(226, 232, 240, 0.9);

    border-radius: 999px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 245, 0.92));

    color: #0f172a;

    font-size: 1.75rem;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);

    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

}



.cart-sheet-close:hover,

.cart-sheet-header > button:hover {

    transform: translateY(-1px);

    background: #ffffff;

    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);

}



.cart-items-list {

    display: grid;

    gap: 1rem;

}



.cart-total-card {

    margin-top: 0.2rem;

    padding-top: 1.15rem;

    border-top: 1px solid rgba(148, 163, 184, 0.14);

}



.cart-total-row {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 1rem;

}



.cart-total-label {

    color: #64748b;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.cart-total-value {

    color: #0f7a41;

    font-size: 1.42rem;

    font-weight: 800;

    letter-spacing: -0.04em;

}



.cart-sheet-checkout {

    margin-top: 0.15rem !important;

}



.cart-empty-state {

    display: grid;

    place-items: center;

    gap: 0.42rem;

    padding: 2.8rem 1.35rem;

    border: 1px dashed rgba(148, 163, 184, 0.26);

    border-radius: 1.25rem;

    background: linear-gradient(180deg, rgba(248, 250, 252, 0.84), rgba(241, 245, 249, 0.7));

    text-align: center;

}



.cart-empty-title,

.cart-empty-copy {

    margin: 0;

}



.cart-empty-title {

    color: #0f172a;

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: -0.02em;

}



.cart-empty-copy {

    max-width: 18rem;

    color: #64748b;

    font-size: 0.85rem;

    line-height: 1.6;

}



.detail-modal-card {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 248, 0.96));

    border: none;

    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.15);

}



.detail-modal-scroll {

    min-height: 0;

    scrollbar-gutter: stable;

    touch-action: pan-y;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

}



.detail-close-btn {

    position: absolute;

    top: calc(var(--safe-area-top) + 1rem);

    left: calc(var(--safe-area-left) + 1rem);

    z-index: 30;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.88);

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.9);

    color: var(--text-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.45rem;

    cursor: pointer;

    backdrop-filter: blur(8px);

}



.detail-media-shell > button[onclick="closeDetail()"] {

    display: none;

}



.detail-media-shell {

    position: relative;

    background: #f8fffc;

    line-height: 0;

}



.detail-slider {

    position: relative;

    overflow: hidden;

    background: #f8fffc;

    aspect-ratio: 1 / 1;

    touch-action: pan-y;

}



.detail-slider-track {

    display: flex;

    width: 100%;

    height: 100%;

    transition: transform 0.35s ease;

    will-change: transform;

}



.detail-slide {

    min-width: 100%;

    flex: 0 0 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    box-sizing: border-box;

    background: #f8fffc;

}



.detail-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

}



.detail-slide-image {

    transition: opacity 0.28s ease;

}



.detail-slide-image.is-loading {

    opacity: 0;

}



.detail-slide::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(110deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 72%),

        linear-gradient(180deg, rgba(209, 250, 229, 0.98), rgba(167, 243, 208, 0.88));

    background-size: 220% 100%, 100% 100%;

    animation: detail-image-shimmer 1.35s linear infinite;

    opacity: 0;

    transition: opacity 0.2s ease;

    pointer-events: none;

}



.detail-slide::after {

    content: "Loading image...";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 10rem;

    padding: 0.7rem 1rem;

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(16, 185, 129, 0.18);

    color: #065f46;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.03em;

    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);

    opacity: 0;

    transition: opacity 0.2s ease;

    pointer-events: none;

    z-index: 1;

}



.detail-slide:has(.detail-slide-image.is-loading)::before {

    opacity: 1;

}



.detail-slide:has(.detail-slide-image.is-loading)::after {

    opacity: 1;

}



.detail-slide.is-loading::before {

    opacity: 1;

}



.detail-slide.is-loading::after {

    opacity: 1;

}



@keyframes detail-image-shimmer {

    0% {

        background-position: 200% 0, 0 0;

    }

    100% {

        background-position: -20% 0, 0 0;

    }

}



.detail-nav-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    width: 44px;

    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.86);

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.92);

    color: var(--text-dark);

    display: none;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    backdrop-filter: blur(10px);

    transition: background 0.2s, opacity 0.2s;

    padding: 0;

}



.detail-nav-btn:hover {

    background: #f0fdf4;

}



.detail-nav-btn:disabled {

    opacity: 0.35;

    cursor: default;

}



.detail-nav-prev {

    left: 0.85rem;

}



.detail-nav-next {

    right: 0.85rem;

}



.detail-nav-btn svg {

    width: 18px;

    height: 18px;

    display: block;

}



.detail-pagination {

    position: absolute;

    right: 1rem;

    bottom: 1rem;

    z-index: 20;

    min-width: 3.4rem;

    padding: 0.38rem 0.72rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.82);

    color: var(--text-dark);

    font-size: var(--type-caption);

    font-weight: 600;

    line-height: 1;

    text-align: center;

    backdrop-filter: blur(10px);

}



.detail-copy {

    padding-bottom: 1.25rem;

}



.detail-meta-stack {

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

}



.detail-price-highlight {

    display: block;

    margin: 0;

    padding: 0;

    border: none;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color: #0f7a41;

    font-weight: 800;

}



.detail-name-heading {

    margin: 0;

    color: var(--text-dark);

}



.detail-description-wrap {

    position: relative;

    padding-top: 1.55rem;

}



.detail-description-wrap.detail-variant-section-highlight {

    border-radius: 1.35rem;

    background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(255, 255, 255, 0));

    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);

    transition: background 0.28s ease, box-shadow 0.28s ease;

}



.detail-section-tab {

    position: absolute;

    top: 0;

    left: 1rem;

    z-index: 2;

    display: inline-flex;

    margin: 0;

    padding: 0.35rem 0.8rem;

    border: 1px solid #d9f7ec;

    border-bottom: none;

    border-radius: 0.9rem 0.9rem 0 0;

    background: #ffffff;

    color: var(--text-light);

    line-height: 1;

}



.detail-section-tab::after {

    content: "";

    position: absolute;

    left: 0.55rem;

    right: 0.55rem;

    bottom: -1px;

    height: 2px;

    background: #ffffff;

}



.detail-description-card {

    position: relative;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 247, 0.92));

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}



.detail-modal-footer {

    flex-shrink: 0;

    padding: 1rem;

    border-top: 1px solid rgba(148, 163, 184, 0.12);

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 245, 0.98));

    position: relative;

    z-index: 20;

}



.detail-footer-actions {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 0.85rem;

    align-items: center;

}



.detail-quantity-controls {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding: 0.4rem 0.55rem;

    border-radius: 9999px;

    border: 1px solid rgba(148, 163, 184, 0.14);

    background: linear-gradient(180deg, #ffffff, #f4f8f5);

}



.detail-quantity-btn {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 9999px;

    background: linear-gradient(180deg, #f0fdf4, #dcfce7);

    color: var(--primary-dark);

    font-size: 1.15rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background 0.2s, opacity 0.2s;

}



.detail-quantity-btn:hover {

    background: linear-gradient(180deg, #dcfce7, #bbf7d0);

}



.detail-quantity-btn:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}



.detail-quantity-value {

    min-width: 2ch;

    text-align: center;

    font-size: var(--type-body);

    font-weight: 700;

    color: var(--text-dark);

}



.detail-add-btn {

    width: 100%;

    min-height: 52px;

    padding: 0.85rem 1.1rem;

    border: none;

    font-size: 1rem;

    line-height: 1.1;

    background: var(--brand-gradient);

    color: #ffffff;

    box-shadow: var(--brand-shadow-strong);

}



#detail-name {

    word-break: break-word;

}



#detail-desc {

    overflow-wrap: anywhere;

}



/* ==========================================

   16. SUCCESS MODAL

   ========================================== */

.success-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle at top, rgba(34, 197, 94, 0.16), transparent 34%),

        radial-gradient(circle at bottom right, rgba(18, 140, 126, 0.14), transparent 28%),

        rgba(15, 23, 42, 0.28);

    backdrop-filter: blur(12px) saturate(1.05);

    justify-content: center;

    align-items: center;

    z-index: 2000;

    animation: fadeIn 0.3s;

    padding: 1.25rem;

}



.success-modal-content {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 34%),

        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 246, 0.96));

    border: 1px solid rgba(255, 255, 255, 0.88);

    border-radius: 1.75rem;

    padding: 2rem 1.6rem 1.45rem;

    max-width: 470px;

    width: min(100%, 470px);

    box-shadow:

        0 30px 80px rgba(15, 23, 42, 0.18),

        inset 0 1px 0 rgba(255, 255, 255, 0.78);

    text-align: center;

    animation: slideIn 0.34s ease;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}



.success-modal-content::before,

.success-modal-content::after {

    content: "";

    position: absolute;

    border-radius: 999px;

    pointer-events: none;

}



.success-modal-content::before {

    width: 180px;

    height: 180px;

    top: -90px;

    right: -50px;

    background: radial-gradient(circle, rgba(37, 211, 102, 0.2), transparent 72%);

}



.success-modal-content::after {

    width: 140px;

    height: 140px;

    bottom: -75px;

    left: -50px;

    background: radial-gradient(circle, rgba(18, 140, 126, 0.14), transparent 72%);

}



.success-modal-badge,

.success-modal-icon,

.success-modal-content h3,

.success-modal-content p,

.success-modal-actions {

    position: relative;

    z-index: 1;

}



.success-modal-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.35rem;

    min-height: 2rem;

    padding: 0.42rem 0.9rem;

    margin-bottom: 1rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(34, 197, 94, 0.16);

    box-shadow: 0 12px 24px rgba(18, 140, 126, 0.08);

    color: #0f7a41;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.success-modal-icon {

    width: 5.1rem;

    height: 5.1rem;

    margin: 0 auto 1.15rem;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:

        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 45%),

        var(--brand-gradient);

    color: #ffffff;

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.4),

        0 20px 38px rgba(18, 140, 126, 0.22);

}



.success-modal-icon svg {

    width: 2rem;

    height: 2rem;

}



.success-modal-content h3 {

    font-family: var(--font-heading);

    font-size: clamp(1.6rem, 4vw, 1.95rem);

    color: #0b1220;

    margin-bottom: 0.7rem;

}



.success-modal-content p {

    font-size: var(--type-body);

    color: #526172;

    line-height: 1.65;

    margin-bottom: 1.35rem;

    max-width: 30rem;

    margin-left: auto;

    margin-right: auto;

}



.success-modal-actions {

    display: grid;

    gap: 0.78rem;

}



.success-modal-content a,

.success-modal-content button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 3.2rem;

    padding: 0.9rem 1.25rem;

    border-radius: 1rem;

    font-size: var(--type-button);

    cursor: pointer;

    font-weight: 700;

    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;

}



.success-modal-content a {

    background: var(--brand-gradient);

    color: white;

    text-decoration: none;

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.22),

        0 18px 32px rgba(18, 140, 126, 0.22);

}



.success-modal-content a:hover {

    background: var(--brand-gradient-strong);

    transform: translateY(-1px);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.24),

        0 22px 36px rgba(18, 140, 126, 0.26);

}



.success-modal-content button {

    background: linear-gradient(180deg, #ffffff, #f4f8f5);

    color: #1e293b;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.8),

        0 12px 24px rgba(148, 163, 184, 0.12);

}



.success-modal-content button:hover {

    background: linear-gradient(180deg, #ffffff, #ecfdf5);

    border-color: rgba(34, 197, 94, 0.24);

    transform: translateY(-1px);

}



/* ==========================================

   17. LOADING & BUSINESS STATUS OVERLAYS

   ========================================== */

.loading-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(248, 255, 252, 0.72);

    backdrop-filter: blur(4px);

    justify-content: center;

    align-items: center;

    z-index: 2000;

    padding: 1.5rem;

}



.loading-overlay-card {

    width: min(100%, 24rem);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.85rem;

    padding: 1.5rem 1.25rem;

    border: 1px solid rgba(16, 185, 129, 0.12);

    border-radius: 1.5rem;

    background: rgba(255, 255, 255, 0.96);

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);

}



.loading-spinner {

    border: 4px solid #dcfce7;

    border-top: 4px solid var(--primary);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    animation: spin 1s linear infinite;

}



.loading-overlay-message {

    margin: 0;

    color: var(--text-dark);

    font-size: 1rem;

    font-weight: 700;

    text-align: center;

}



.loading-overlay-note {

    margin: 0;

    color: #64748b;

    font-size: 0.9rem;

    line-height: 1.5;

    text-align: center;

}



#businessClosedOverlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 23, 42, 0.2);

    backdrop-filter: blur(6px);

    justify-content: center;

    align-items: center;

    z-index: 2000;

}



#businessClosedOverlay p {

    color: var(--text-dark);

    font-size: 2rem;

    font-weight: bold;

    text-align: center;

    font-family: var(--font-heading);

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #d9f7ec;

    border-radius: 24px;

    padding: 1.25rem 1.5rem;

    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.18);

}



/* ==========================================

   18. ORDER SUMMARY & QUANTITY CONTROLS

   ========================================== */

.cart-item-card {

    display: block;

    border-radius: 1.3rem !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.96)) !important;

    border-color: rgba(226, 232, 240, 0.88) !important;

    box-shadow:

        0 10px 22px rgba(15, 23, 42, 0.045),

        inset 0 1px 0 rgba(255, 255, 255, 0.78);

}



.cart-item-top {

    gap: 0.75rem;

}



.cart-item-image {

    object-fit: cover;

    background: #f8fffc;

    flex-shrink: 0;

    border: 1px solid rgba(226, 232, 240, 0.82);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

}



.cart-item-qty {

    min-width: 1.75rem;

}



.cart-item-subtotal {

    min-width: 4.75rem;

}



.cart-item-bottom {

    flex-wrap: wrap;

    gap: 0.75rem;

}



.cart-item-actions {

    flex: 1 1 auto;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.order-item-card + .order-item-card {

    margin-top: 0.75rem;

}



.order-item-top {

    gap: 0.75rem;

}



.order-item-name {

    font-size: 1rem;

}



.order-item-meta {

    line-height: 1.4;

}



.order-item-price {

    min-width: 84px;

}



.order-item-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

}



.order-qty-count {

    min-width: 1.75rem;

}



.order-details ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.order-details li {

    display: flex;

    align-items: center;

    padding: 0.75rem 0;

    border-bottom: 1px solid #f3f4f6;

    font-size: var(--type-body-sm);

    gap: 0.5rem;

}



.order-details li:last-child {

    border-bottom: none;

}



.order-details li > span:first-child {

    flex: 1;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.order-details li > span:nth-child(2) {

    flex-shrink: 0;

}



.quantity-controls {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    flex-shrink: 0;

}



.quantity-btn {

    background: var(--primary);

    color: white;

    border: none;

    border-radius: 6px;

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    cursor: pointer;

    transition: background 0.2s;

}



.cart-item-bottom .quantity-controls {

    min-height: 40px;

    width: auto;

    justify-content: center;

}



.cart-item-bottom .quantity-btn {

    width: 30px;

    height: 30px;

    border-radius: 9999px;

}



.quantity-btn:hover {

    background: var(--primary-dark);

}



.quantity-btn:disabled {

    background: #d1d5db;

    cursor: not-allowed;

}



.delete-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.delete-btn svg {

    fill: var(--error);

    width: 20px;

    height: 20px;

    transition: transform 0.2s;

}



.delete-btn:hover svg {

    transform: scale(1.1);

}



.cart-remove-btn {

    background: #ffffff;

    border: 1px solid #d9f7ec;

    border-radius: 9999px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    flex-shrink: 0;

    transition: transform 0.2s, background 0.2s;

}



.cart-remove-btn svg {

    fill: var(--error);

    width: 18px;

    height: 18px;

}



.cart-remove-btn:hover {

    background: #f8fffc;

    transform: translateY(-1px);

}



.order-details .total {

    font-weight: 600;

    font-size: var(--type-body);

    margin-top: 1rem;

    text-align: right;

}



.orders-empty-state {

    padding: 2.75rem 1.5rem !important;

}



.orders-empty-icon {

    margin-bottom: 1rem;

    font-size: 3rem;

    color: #cbd5e1;

}



.orders-empty-text {

    margin: 0;

    color: #94a3b8;

    font-size: var(--type-body);

    font-weight: 600;

}



.order-history-card {

    padding: 1.35rem !important;

}



.order-history-toggle {

    width: 100%;

    border: none;

    background: transparent;

    padding: 0;

    text-align: left;

    cursor: pointer;

}



.order-history-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

}



.order-history-label {

    margin: 0;

    color: #94a3b8;

    font-size: var(--type-caption);

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.order-history-invoice {

    margin: 0.35rem 0 0;

    color: var(--text-dark);

    font-size: var(--type-body);

    font-weight: 700;

    line-height: 1.45;

    word-break: break-word;

}



.order-history-time {

    margin: 0.6rem 0 0;

    color: #94a3b8;

    font-size: var(--type-caption);

}



.order-history-summary {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.65rem;

    flex-shrink: 0;

    margin-left: auto;

}



.order-history-total {

    margin: 0;

    color: #0f7a41;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: -0.03em;

    text-align: right;

}



.order-status-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 1.95rem;

    padding: 0.32rem 0.78rem;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.02em;

    border: 1px solid transparent;

    text-transform: uppercase;

}



.order-status-badge.is-pending {

    background: #fef3c7;

    border-color: #fcd34d;

    color: #92400e;

}



.order-status-badge.is-success {

    background: rgba(34, 197, 94, 0.12);

    border-color: rgba(34, 197, 94, 0.22);

    color: #0f7a41;

}



.order-status-badge.is-info {

    background: rgba(37, 99, 235, 0.1);

    border-color: rgba(37, 99, 235, 0.18);

    color: #1d4ed8;

}



.order-status-badge.is-danger {

    background: rgba(239, 68, 68, 0.1);

    border-color: rgba(239, 68, 68, 0.18);

    color: #b91c1c;

}



.order-history-toggle-text {

    margin: 0;

    color: #94a3b8;

    font-size: 0.72rem;

    font-weight: 600;

    text-align: right;

}



.order-history-details {

    display: none;

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(148, 163, 184, 0.12);

}



.order-history-details.is-open {

    display: block;

}



.order-history-details-title {

    margin: 0 0 0.85rem;

    color: var(--text-dark);

    font-size: var(--type-body-sm);

    font-weight: 700;

}



.order-history-meta-grid {

    display: grid;

    gap: 0.55rem;

    margin-bottom: 0.95rem;

}



.order-history-meta-grid--split {

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 0.8rem 1.2rem;

    align-items: start;

}



.order-history-meta-column {

    display: grid;

    gap: 0.45rem;

}



.order-history-meta-column--value {

    justify-items: end;

    text-align: right;

}



.order-history-meta-extras {

    display: grid;

    gap: 0.55rem;

    margin-bottom: 0.95rem;

}



.order-history-meta-row {

    display: flex;

    justify-content: space-between;

    gap: 0.8rem;

    align-items: flex-start;

}



.order-history-meta-label {

    color: #94a3b8;

    font-size: var(--type-caption);

}



.order-history-meta-value {

    color: var(--text-dark);

    font-size: var(--type-caption);

    font-weight: 600;

    text-align: right;

    line-height: 1.35;

}



.order-history-items {

    display: grid;

    gap: 0;

}



.order-history-line {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 0.72rem 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.12);

}



.order-history-line:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.order-history-item-name {

    margin: 0;

    color: var(--text-dark);

    font-size: var(--type-body-sm);

    font-weight: 600;

    line-height: 1.45;

    word-break: break-word;

}



.order-history-item-meta {

    margin: 0.28rem 0 0;

    color: #94a3b8;

    font-size: 0.72rem;

}



.order-history-item-price {

    margin: 0;

    color: #0f7a41;

    font-size: var(--type-body-sm);

    font-weight: 700;

    flex-shrink: 0;

}



.order-history-empty-items {

    margin: 0;

    color: #94a3b8;

    font-size: var(--type-body-sm);

}



/* ==========================================

   19. FOOTER

   ========================================== */

.footer {

    text-align: center;

    padding: 0.75rem;

    font-size: var(--type-caption);

    color: var(--text-light);

    background: white;

}



.desktop-simple-footer {

    display: none;

}



.desktop-simple-footer-meta,

.desktop-simple-footer-store {

    margin: 0;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideIn {

    from { transform: translateY(-20px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

 }



@keyframes pulse {

    0% { opacity: 1; }

    50% { opacity: 0.7; }

    100% { opacity: 1; }

}



/* ==========================================

   23. WHATSAPP CHAT WIDGET

   ========================================== */

#whatsapp-chat {

    position: fixed;

    bottom: var(--whatsapp-chat-bottom);

    right: 20px;

    width: 300px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.95));

    border: 1px solid rgba(255, 255, 255, 0.84);

    border-radius: 1.2rem;

    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.18);

    backdrop-filter: blur(14px);

    display: none;

    z-index: 1000;

}



#whatsapp-chat.open {

    display: block;

}



.whatsapp-header {

    background: var(--brand-gradient);

    color: #fff;

    padding: 0.9rem 1rem;

    border-radius: 1.2rem 1.2rem 0 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.whatsapp-header h3 {

    margin: 0;

    font-size: var(--type-body);

    font-weight: 700;

    letter-spacing: -0.015em;

}



.close-btn {

    background: none;

    border: none;

    color: #fff;

    font-size: 1rem;

    cursor: pointer;

}



.whatsapp-body {

    padding: 1rem;

}



.whatsapp-body p {

    margin: 0 0 10px;

    font-size: var(--type-body-sm);

}



.whatsapp-btn {

    background: var(--brand-gradient);

    color: #fff;

    padding: 0.8rem 0.95rem;

    text-align: center;

    text-decoration: none;

    display: block;

    border-radius: 0.9rem;

    font-size: var(--type-body-sm);

    font-weight: 600;

    letter-spacing: -0.01em;

    box-shadow: var(--brand-shadow);

}



.float-btn {

    position: fixed;

    bottom: var(--whatsapp-fab-bottom);

    right: 20px;

    background: var(--brand-gradient);

    color: #fff;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--brand-shadow-strong);

    cursor: pointer;

    z-index: 999;

}



.float-btn svg {

    width: 30px;

    height: 30px;

}



/* ==========================================

   21. MEDIA QUERIES (Mobile & Tablet)

   ========================================== */

@media (max-width: 768px) {

    :root {

        --bottom-nav-space: calc(1rem + env(safe-area-inset-bottom));

        --whatsapp-chat-bottom: calc(5.6rem + env(safe-area-inset-bottom));

        --whatsapp-fab-bottom: calc(6rem + env(safe-area-inset-bottom));

    }



    #tab-checkout {

        content-visibility: visible;

        contain: none;

        contain-intrinsic-size: auto;

    }



    #tab-checkout .app-panel {

        backdrop-filter: none;

        -webkit-backdrop-filter: none;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 248, 0.96)) !important;

    }



    .customer-form-grid {

        grid-template-columns: 1fr;

    }



    .field-group--full {

        grid-column: auto;

    }



    .cart-modal-overlay {

        padding: 0;

    }



    .cart-sheet {

        border-top-left-radius: 1.4rem;

        border-top-right-radius: 1.4rem;

    }



    #detail-modal {

        align-items: flex-end;

        justify-content: stretch;

        padding: 0 !important;

    }



    #detail-modal .modal.detail-modal-card {

        width: 100vw;

        max-width: none;

        max-height: 100dvh;

        height: 100dvh;

        margin: 0;

        border-radius: 0;

    }



    .detail-modal-scroll {

        flex: 1 1 auto;

        overflow-y: auto;

    }



    /* Shared Mobile Detail Layout */



    .detail-slide {

        height: 100%;

    }



    .detail-nav-btn {

        display: none !important;

    }



    .detail-close-btn {

        top: calc(var(--safe-area-top) + 0.75rem);

        left: calc(var(--safe-area-left) + 0.75rem);

        width: 44px;

        height: 44px;

        font-size: 1.3rem;

    }



    /* iPhone / iPad WebKit */



    body.ios-webkit.is-scroll-locked,

    html.ios-webkit.is-scroll-locked {

        height: 100%;

        overflow: hidden;

        overscroll-behavior: none;

    }



    body.ios-webkit #detail-modal,

    body.ios-webkit #cart-modal,

    body.ios-webkit #shopDetailsModal {

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

    }



    body.ios-webkit .detail-modal-scroll,

    body.ios-webkit .cart-sheet,

    body.ios-webkit #shopDetailsModal > div {

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        transform: translateZ(0);

        backface-visibility: hidden;

    }



    body.ios-pwa .detail-close-btn {

        top: calc(var(--safe-area-top) + 0.85rem);

    }



    body.ios-pwa .detail-media-shell {

        padding-top: calc(var(--safe-area-top) + 0.6rem);

    }



    html.ios-webkit,

    body.ios-webkit,

    body.ios-webkit .app-main-shell,

    body.ios-webkit .tab-content,

    body.ios-webkit .detail-modal-scroll,

    body.ios-webkit .detail-copy {

        scrollbar-gutter: auto;

        scrollbar-width: none;

        -ms-overflow-style: none;

    }



    html.ios-webkit::-webkit-scrollbar,

    body.ios-webkit::-webkit-scrollbar,

    body.ios-webkit .app-main-shell::-webkit-scrollbar,

    body.ios-webkit .tab-content::-webkit-scrollbar,

    body.ios-webkit .detail-modal-scroll::-webkit-scrollbar {

        width: 0;

        height: 0;

        display: none;

    }



    body.ios-webkit .detail-copy::-webkit-scrollbar,

    body.ios-webkit *::-webkit-scrollbar {

        width: 0;

        height: 0;

        display: none;

    }



    body.ios-webkit #shopDetailsModal {

        padding-top: calc(var(--safe-area-top) + 0.75rem);

        padding-bottom: calc(env(safe-area-inset-bottom) + 0.75rem);

    }



    body.ios-webkit #shopDetailsModal > div {

        max-height: calc(100dvh - var(--safe-area-top) - env(safe-area-inset-bottom) - 1.5rem);

    }



    body.ios-webkit .cart-sheet {

        max-height: calc(85dvh - env(safe-area-inset-bottom));

        padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    }



    /* Android Web + Android PWA */



    body.android-device.is-scroll-locked,

    html.android-device.is-scroll-locked {

        height: 100%;

        overflow: hidden;

        overscroll-behavior: none;

    }



    html.android-device,

    body.android-device {

        min-height: 100dvh;

        overscroll-behavior-y: none;

    }



    body.android-device .app-main-shell {

        padding-bottom: 0.35rem;

    }



    body.android-device .tab-content {

        padding-bottom: calc(var(--bottom-nav-space) + 0.45rem);

        scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom));

    }



    body.android-device .app-bottom-nav {

        padding-bottom: max(0.3rem, env(safe-area-inset-bottom));

        transform: translateZ(0);

        backface-visibility: hidden;

    }



    body.android-device .app-bottom-nav-shell {

        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;

    }



    body.android-device #detail-modal,

    body.android-device #cart-modal,

    body.android-device #shopDetailsModal {

        overscroll-behavior: contain;

    }



    body.android-device .detail-modal-scroll,

    body.android-device .cart-sheet,

    body.android-device #shopDetailsModal > div {

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        transform: translateZ(0);

        backface-visibility: hidden;

    }



    body.android-device #shopDetailsModal {

        padding-top: 1rem;

        padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    }



    body.android-device #shopDetailsModal > div {

        max-height: calc(100dvh - 2rem - env(safe-area-inset-bottom));

    }



    body.android-device .cart-sheet {

        max-height: min(84dvh, calc(100dvh - 5.75rem - env(safe-area-inset-bottom)));

        padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    }



    .detail-pagination {

        right: 0.85rem;

        bottom: 0.85rem;

        min-width: 3.1rem;

        padding: 0.34rem 0.66rem;

    }



    .detail-footer-actions {

        grid-template-columns: 108px minmax(0, 1fr);

        gap: 0.55rem;

    }



    .detail-quantity-controls {

        gap: 0.3rem;

        padding: 0.28rem 0.4rem;

    }



    .detail-quantity-btn {

        width: 32px;

        height: 32px;

        font-size: 0.95rem;

    }



    .detail-quantity-value {

        font-size: 0.92rem;

    }



    .detail-modal-footer {

        padding: 0.75rem 0.8rem calc(0.75rem + env(safe-area-inset-bottom));

    }



    .detail-add-btn {

        min-height: 44px;

        padding: 0.7rem 0.95rem;

        border-radius: 1.1rem;

        font-size: 0.95rem;

        box-shadow: 0 10px 22px rgba(194, 65, 12, 0.2);

    }



    .success-modal-content {

        width: 100%;

        padding: 1.7rem 1.15rem 1.15rem;

    }



    .success-modal-icon {

        width: 4.6rem;

        height: 4.6rem;

        margin-bottom: 1rem;

    }



    .success-modal-content p {

        font-size: 0.9rem;

    }



    .order-details li {

        font-size: 0.85rem;

        gap: 0.3rem;

        padding: 0.5rem 0;

    }



    .order-details li > span:first-child {

        flex: 1;

        min-width: 0;

    }



    .order-item-name {

        font-size: 0.92rem;

    }



    .order-item-price {

        min-width: 76px;

    }



    .order-item-actions {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

    }



    .order-item-actions .quantity-controls {

        justify-content: center;

        width: auto;

    }



    .order-item-actions .delete-btn {

        align-self: center;

    }



    .cart-item-card {

        padding: 0.75rem;

    }



    .cart-item-top {

        align-items: flex-start;

    }



    .cart-item-image {

        width: 64px;

        height: 64px;

        border-radius: 16px;

    }



    .cart-item-bottom {

        flex-direction: column;

        align-items: stretch;

    }



    .cart-item-actions {

        width: 100%;

    }



    .cart-item-actions {

        align-items: center;

        justify-content: space-between;

    }



    .cart-item-bottom .quantity-controls {

        justify-content: center;

        width: auto;

    }



    .cart-item-subtotal {

        text-align: right;

        min-width: auto;

    }



    .quantity-btn {

        width: 24px;

        height: 24px;

        font-size: 0.9rem;

    }



    .cart-remove-btn {

        width: 40px;

        height: 40px;

        align-self: center;

    }



    .delete-btn svg {

        width: 18px;

        height: 18px;

    }



    .file-upload-label {

        max-width: 200px;

        font-size: 0.85rem;

        padding: 0.5rem;

    }



    .popular-product-card {

        grid-template-columns: 6.1rem minmax(0, 1fr);

    }



    .popular-product-card > div:last-child {

        padding: 0.85rem 0.85rem 0.85rem 0.8rem;

    }



    .popular-product-name {

        font-size: 1.02rem;

    }



    .file-name {

        font-size: 0.8rem;

    }



    .payment-method h3 svg {

        width: 18px;

        height: 18px;

    }



    .payment-method .button-container .mb-4 {

        gap: 0.55rem;

    }



    .payment-method .button-container button {

        min-width: 0;

        padding: 0.8rem 0.5rem;

        font-size: 0.84rem;

    }



    #whatsapp-chat {

        right: 12px;

        width: calc(100vw - 24px);

        max-width: 300px;

    }



    .float-btn {

        right: 12px;

        width: 54px;

        height: 54px;

    }



    .float-btn svg {

        width: 26px;

        height: 26px;

    }

    .footer {

        font-size: 0.8rem;

        padding: 0.5rem;

        text-align: center;

    }



}



@media (max-width: 480px) {

    .detail-modal-footer {

        padding: 0.65rem 0.7rem calc(0.65rem + env(safe-area-inset-bottom));

    }



    .detail-footer-actions {

        grid-template-columns: 96px minmax(0, 1fr);

        gap: 0.45rem;

    }



    .detail-quantity-controls {

        gap: 0.22rem;

        padding: 0.22rem 0.34rem;

        border-radius: 1rem;

    }



    .detail-quantity-btn {

        width: 30px;

        height: 30px;

        font-size: 0.9rem;

    }



    .detail-quantity-value {

        min-width: 1.6ch;

        font-size: 0.88rem;

    }



    .detail-add-btn {

        min-height: 42px;

        padding: 0.62rem 0.85rem;

        border-radius: 1rem;

        font-size: 0.9rem;

    }



    .success-modal-content {

        width: 100%;

        padding: 1.7rem 1.2rem 1.2rem;

    }

}



/* ==========================================

   22. MEDIA QUERIES (Desktop/Laptop Simulation)

   ========================================== */

@media (min-width: 769px) {

    .detail-media-shell:hover .detail-nav-btn {

        display: inline-flex;

    }



    .right-section {

        width: 100%;

        gap: 0.75rem;

    }



    #menu-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 0.8rem !important;

        row-gap: 0.8rem !important;

        margin-bottom: 0.20rem;

    }



    #popular-grid {

        grid-template-columns: 1fr;

        gap: 0.9rem;

        margin-bottom: 0.2rem;

    }



    .product-card {

        padding: 0.2rem;

    }



    .product-card h3 {

        font-size: 1rem;

    }



    .product-card p {

        font-size: 0.85rem;

    }



    .latest-products-heading {

        font-size: 1.45rem;

    }



    .latest-product-name {

        font-size: 1.08rem;

    }



    .popular-products-heading {

        font-size: 1.45rem;

    }



    .popular-product-card {

        grid-template-columns: 7.4rem minmax(0, 1fr);

    }



    .product-card-image {

        display: block;

        width: 100%;

        height: auto !important;

        max-height: none !important;

        object-fit: contain !important;

        object-position: center !important;

        background: transparent;

        padding: 0;

    }



    .shipping-method,

    .customer-form,

    .order-details,

    .payment-method,

    .qr-section,

    .confirm-order,

    .location-section {

        padding: 1rem;

    }



    .success-modal-content {

        max-width: 470px;

        padding: 2rem 1.7rem 1.45rem;

    }



    .order-details li {

        font-size: 0.9rem;

        gap: 0.4rem;

        padding: 0.5rem 0;

    }



    .quantity-btn {

        width: 24px;

        height: 24px;

        font-size: 0.9rem;

    }



    .cart-item-bottom .quantity-btn {

        width: 28px;

        height: 28px;

    }



    .detail-modal-footer {

        padding: 0.85rem;

    }



    .detail-footer-actions {

        grid-template-columns: 110px minmax(0, 1fr);

    }



    .cart-remove-btn {

        width: 40px;

        height: 40px;

    }



    .delete-btn svg {

        width: 18px;

        height: 18px;

    }



    .file-upload-label {

        max-width: 220px;

        font-size: 0.9rem;

        padding: 0.6rem;

    }



    .file-name {

        font-size: 0.85rem;

    }



    .payment-method h3 svg {

        width: 18px;

        height: 18px;

    }



    .qr-section img {

        width: 280px;

    }

}



/* ==========================================

   24. SHOP CLOSED STYLES

   ========================================== */

.closed-body {

    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



.closed-container {

    max-width: 600px;

    margin: 1rem;

    padding: 2.5rem;

    background: white;

    border-radius: 16px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    text-align: center;

    animation: fadeIn 1s ease-out;

}



.closed-container h1 {

    font-family: var(--font-heading);

    color: #dc2626;

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    animation: slideIn 0.5s ease-out;

}



.closed-container p {

    font-size: 1.2rem;

    color: #4b5563;

    margin-bottom: 1.5rem;

    animation: slideIn 0.7s ease-out;

}



.whatsapp-btn-closed {

    display: inline-flex;

    align-items: center;

    background-color: #25D366;

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: 500;

    text-decoration: none;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



.whatsapp-btn-closed:hover {

    background-color: #20b354;

    transform: translateY(-2px);

}



.closed-shop-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 1.5rem;

    animation: pulse 2s infinite ease-in-out;

}



.closed-logo {

    width: 50px;

    height: 50px;

    margin-bottom: 1.5rem;

}



/* ==========================================

   24. DESKTOP FULL EXPERIENCE

   ========================================== */

.desktop-header-nav {

    display: none;

}



.desktop-header-nav-shell,

.desktop-header-nav-links,

.desktop-header-meta,

.desktop-shop-info-btn,

.desktop-status-pill {

    display: flex;

    align-items: center;

}



.desktop-header-nav-shell {

    justify-content: space-between;

    gap: 1rem;

}



.desktop-header-nav-links,

.desktop-header-meta {

    gap: 0.75rem;

}



.desktop-status-pill {

    gap: 0.55rem;

}



.desktop-status-dot {

    width: 0.5rem;

    height: 0.5rem;

    border-radius: 999px;

    background: currentColor;

}



.desktop-shop-info-btn {

    gap: 0.55rem;

    min-height: 3rem;

    padding: 0.75rem 1rem;

    border: 1px solid rgba(148, 163, 184, 0.16);

    border-radius: 1rem;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 245, 0.92));

    color: var(--text-dark);

    font-size: var(--type-body-sm);

    font-weight: 700;

    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.desktop-shop-info-btn:hover {

    transform: translateY(-1px);

    background: linear-gradient(180deg, #ffffff, #ecfdf5);

    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);

}



@media (min-width: 1024px) {

    html {

        /* Keep centered desktop shells from shifting when page scrollbars appear/disappear between tabs. */

        scrollbar-gutter: stable both-edges;

    }



    :root {

        --bottom-nav-space: 2rem;

        --whatsapp-chat-bottom: 2rem;

        --whatsapp-fab-bottom: 2rem;

        --type-title: 1.9rem;

        --type-section: 1.7rem;

    }



    #tab-checkout,

    #shippingMethod {

        scroll-margin-top: 7.75rem;

    }



    body {

        background-image:

            radial-gradient(circle at top left, rgba(34, 197, 94, 0.05), transparent 20%),

            linear-gradient(180deg, #fcfefd 0%, #f6faf7 48%, #f1f5f2 100%);

        display: flex;

        flex-direction: column;

        padding-bottom: 0 !important;

    }



    .app-header-inner,

    .app-search-nav-row {

        width: min(100%, 78rem) !important;

        max-width: 78rem !important;

        margin-left: auto;

        margin-right: auto;

    }



    .app-main-shell {

        width: min(100%, 78rem) !important;

        max-width: 78rem !important;

        margin-left: auto;

        margin-right: auto;

    }



    .app-header {

        background: rgba(255, 255, 255, 0.92);

        border-bottom: 1px solid rgba(226, 232, 240, 0.8);

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);

    }



    .app-header-inner {

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        gap: 0.85rem;

        padding-top: 1rem;

        padding-bottom: 0.78rem;

    }



    .app-header-brand {

        gap: 0.88rem;

    }



    .app-header-logo {

        width: 3.05rem;

        height: 3.05rem;

        border-radius: 9999px;

        padding: 0.18rem;

    }



    .app-header-title {

        font-size: 1.86rem;

    }



    .app-header-subtitle {

        max-width: 32rem;

        font-size: 0.84rem;

    }



    .header-cart-btn {

        width: 3.1rem;

        height: 3.1rem;

        border-radius: 1rem;

    }



    .app-search-nav-row {

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        gap: 0.85rem;

        padding-bottom: 0.82rem !important;

    }



    .app-search-shell {

        min-height: 3.4rem;

        padding-left: 1rem !important;

        padding-right: 1rem !important;

        border-radius: 1.08rem;

        border-color: rgba(203, 213, 225, 0.72) !important;

        background: #ffffff;

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);

    }



    .app-search-input {

        font-size: 0.96rem;

    }



    .desktop-header-nav {

        display: block;

        justify-self: end;

    }



    .desktop-header-nav-shell {

        border: 1px solid rgba(226, 232, 240, 0.88);

        border-radius: 1.15rem;

        padding: 0.28rem;

        background: rgba(255, 255, 255, 0.98);

        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);

    }



    .desktop-header-nav-links {

        flex-wrap: wrap;

    }



    .desktop-nav-btn {

        display: inline-flex;

        align-items: center;

        gap: 0.5rem;

        min-width: 0;

        min-height: 2.58rem;

        padding: 0.56rem 0.78rem;

        border-radius: 0.88rem;

        color: #64748b;

        box-shadow: none !important;

    }



    .desktop-nav-btn:hover {

        background: #f8fafc;

        color: #0f172a;

    }



    .desktop-nav-btn.is-active {

        background: #f0fdf4;

        color: #0f7a41 !important;

        box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.1) !important;

    }



    .desktop-nav-btn i {

        margin-bottom: 0 !important;

        font-size: 0.95rem !important;

    }



    .desktop-nav-btn span {

        font-size: 0.86rem;

    }



    .desktop-status-pill {

        min-height: 3rem;

        padding: 0.72rem 0.92rem;

        border-radius: 1rem;

        border: 1px solid rgba(226, 232, 240, 0.9);

        font-size: 0.8rem;

        font-weight: 700;

        letter-spacing: 0.08em;

        text-transform: uppercase;

        box-shadow: none;

    }



    .desktop-shop-info-btn {

        min-height: 3rem;

        padding: 0.72rem 0.92rem;

        border-color: rgba(226, 232, 240, 0.92);

        background: #ffffff;

        box-shadow: none;

    }



    .desktop-shop-info-btn:hover {

        background: #f8fafc;

        box-shadow: none;

    }



    .app-main-shell {

        flex: 1 0 auto;

        padding: 0 1.5rem 2.5rem;

    }



    .app-bottom-nav {

        display: none;

    }



    .tab-content {

        padding-bottom: 1rem;

    }



    #tab-home,

    #tab-menu,

    #tab-orders,

    #tab-checkout {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }



    #tab-home {

        padding-top: 1.5rem !important;

    }



    #tab-menu,

    #tab-orders,

    #tab-checkout {

        padding-top: 1.5rem !important;

    }



    #tab-home.tab-content.active {

        display: grid;

    }



    .desktop-home-spotlight {

        display: flex;

        flex-direction: column;

        gap: 1.15rem;

        margin-top: 0.15rem;

        max-width: 100%;

    }



    .desktop-home-copy {

        display: grid;

        gap: 0.75rem;

    }



    .desktop-home-heading {

        margin: 0;

        color: #0f172a;

        font-size: 2rem;

        line-height: 1.06;

        letter-spacing: -0.045em;

        max-width: 15ch;

    }



    .desktop-home-description {

        margin: 0;

        max-width: 42rem;

        color: #475569;

        font-size: 0.95rem;

        line-height: 1.7;

    }



    .desktop-home-facts {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 0.75rem;

    }



    .desktop-home-fact {

        display: grid;

        gap: 0.38rem;

        min-height: 4.9rem;

        padding: 0.95rem 1rem;

        border-radius: 1rem;

        border: 1px solid rgba(226, 232, 240, 0.88);

        background: #f8fafc;

        box-shadow: none;

    }



    .desktop-home-fact span {

        font-size: 0.7rem;

        font-weight: 700;

        letter-spacing: 0.14em;

        text-transform: uppercase;

        color: #94a3b8;

    }



    .desktop-home-fact strong {

        font-size: 0.96rem;

        line-height: 1.35;

        color: #0f172a;

        letter-spacing: -0.025em;

    }



    .desktop-home-actions {

        display: flex;

        flex-wrap: wrap;

        gap: 0.7rem;

    }



    .desktop-home-action {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-height: 2.9rem;

        padding: 0.76rem 1.08rem;

        border: 1px solid rgba(203, 213, 225, 0.88);

        border-radius: 999px;

        background: #ffffff;

        color: #0f172a;

        font-size: 0.88rem;

        font-weight: 700;

        box-shadow: none;

        transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

    }



    .desktop-home-action:hover {

        transform: translateY(-1px);

        background: #f8fafc;

        border-color: rgba(148, 163, 184, 0.88);

        box-shadow: none;

    }



    .desktop-home-action-primary {

        background: #16a34a;

        color: #ffffff;

        border-color: #16a34a;

        box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18);

    }



    .desktop-home-action-primary:hover {

        background: #15803d;

        border-color: #15803d;

    }



    #tab-home > div:nth-child(2) {

        margin-top: 0 !important;

        grid-template-columns: 1fr;

        gap: 1rem !important;

    }



    .home-shortcuts {

        display: none !important;

    }



    .app-shortcut-card {

        min-height: 7.2rem;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap: 1rem;

        text-align: left !important;

        padding: 1.35rem 1.4rem !important;

    }



    .app-shortcut-card .text-5xl {

        margin: 0 !important;

        font-size: 2.35rem !important;

        line-height: 1;

    }



    .app-shortcut-card p {

        font-size: 1rem;

    }



    .latest-product-media {

        aspect-ratio: 16 / 9;

    }



    .popular-products-list {

        flex: 1 1 auto;

        gap: 1rem;

    }



    .popular-product-card {

        grid-template-columns: 8.95rem minmax(0, 1fr);

        align-items: center;

        min-height: 0;

        column-gap: 0.15rem;

        padding: 0.34rem 0.38rem 0.34rem 0.42rem !important;

        border: 1px solid rgba(226, 232, 240, 0.84) !important;

        border-radius: 1.2rem !important;

        background: #ffffff;

        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;

    }



    .popular-product-media {

        width: 8rem;

        height: 8rem;

        min-height: 8rem;

        margin-left: 0;

        justify-self: start;

        border-radius: 1rem;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0.22rem;

        background: #f8fafc;

    }



    .popular-product-image {

        width: 100%;

        height: 100%;

        max-width: 100%;

        max-height: 100%;

        border-radius: 1rem;

        object-fit: contain !important;

        object-position: center;

    }



    .popular-product-card > div:last-child {

        background: transparent;

        padding: 0.95rem 1rem 0.95rem 0.65rem;

    }



    #tab-menu.tab-content.active {

        display: grid;

        align-items: start;

    }



    #tab-menu .section-title {

        grid-column: 1 / -1;

    }



    #tab-menu .custom-category-bar {

        position: sticky;

    }



    #tab-menu #categoryToggle {

        cursor: default;

        pointer-events: none;

    }



    #menu-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 1rem !important;

        margin-bottom: 0;

    }



    .product-card {

        border: 1px solid rgba(226, 232, 240, 0.88) !important;

        border-radius: 1.15rem !important;

        overflow: hidden;

        background: #ffffff;

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;

    }



    .product-card:hover {

        transform: translateY(-2px);

        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07) !important;

    }



    .product-card-image {

        height: 13.2rem !important;

        padding: 0.95rem !important;

        object-fit: contain !important;

        background: #f8fafc;

    }



    #tab-orders.tab-content.active {

        display: block;

        max-width: 78rem;

        margin: 0 auto;

    }



    #orders-list {

        display: grid;

        gap: 1rem;

    }



    .order-history-card {

        padding: 1.45rem 1.55rem !important;

    }



    .order-history-head {

        align-items: center;

    }



    .order-history-meta-grid--split {

        grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);

        gap: 0.75rem 1.5rem;

    }



    #tab-checkout.tab-content.active {

        display: block;

        max-width: 78rem;

        margin: 0 auto;

    }



    #checkout-forms-container {

        max-width: 78rem;

        margin: 0 auto;

    }



    #checkout-forms-container .right-section {

        display: grid;

        grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);

        grid-template-areas:

            "shipping summary"

            "customer summary"

            "payment summary"

            "notes summary"

            "location location";

        gap: 1rem 1.2rem;

        align-items: start;

    }



    #shippingMethod > h3,

    #customerForm > h3,

    #orderDetails > h3,

    #paymentMethod > h3,

    #qrSection > h3,

    #confirmOrder > h3 {

        display: flex;

        align-items: center;

        gap: 0.72rem;

        margin-bottom: 1.15rem !important;

        font-size: 1.12rem !important;

        line-height: 1.15;

    }



    #shippingMethod > h3 i,

    #customerForm > h3 i,

    #orderDetails > h3 i,

    #paymentMethod > h3 i,

    #qrSection > h3 i,

    #confirmOrder > h3 i {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 2.15rem;

        height: 2.15rem;

        margin-right: 0 !important;

        border-radius: 999px;

        background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.9));

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.78),

            0 10px 18px rgba(18, 140, 126, 0.08);

    }



    #checkout-forms-container.checkout-has-qr .right-section {

        grid-template-areas:

            "shipping summary"

            "customer summary"

            "payment summary"

            "qr summary"

            "notes summary"

            "location location";

    }



    #shippingMethod {

        grid-area: shipping;

        align-self: start;

    }



    #customerForm {

        grid-area: customer;

    }



    #paymentMethod {

        grid-area: payment;

    }



    #qrSection {

        grid-area: qr;

    }



    #confirmOrder {

        grid-area: notes;

        display: flex;

        flex-direction: column;

        gap: 1.15rem;

    }



    #orderDetails {

        grid-area: summary;

        position: sticky;

        top: 10rem;

        align-self: start;

        max-height: calc(100vh - 12.25rem);

        overflow-y: auto;

    }



    #shippingMethod .shipping-options {

        display: grid;

        gap: 0.8rem;

    }



    #shippingMethod .shipping-option {

        width: 100%;

        min-height: 4.75rem;

    }



    #locationSection {

        grid-area: location;

        display: none !important;

    }



    .shipping-options {

        gap: 0.9rem;

    }



    .shipping-option {

        min-height: 5.55rem;

        gap: 0.8rem;

        padding: 1.05rem 1.1rem;

        border-radius: 1.15rem;

        align-items: flex-start;

    }



    .shipping-option span {

        font-size: 0.94rem;

        line-height: 1.4;

        font-weight: 600;

        color: #0f172a;

    }



    .shipping-option input[type="radio"] {

        margin-top: 0.18rem;

        flex: 0 0 auto;

    }



    .shipping-option:has(input[type="radio"]:checked) {

        border-color: rgba(22, 163, 74, 0.26);

        background: #f0fdf4;

        box-shadow: var(--ring-focus);

        transform: none;

    }



    #customerForm .customer-form-grid {

        gap: 1.1rem 1rem;

    }



    #paymentMethod,

    #confirmOrder {

        display: flex;

        flex-direction: column;

        gap: 1rem;

    }



    #paymentMethod > h3,

    #confirmOrder > h3 {

        margin-bottom: 0 !important;

    }



    #paymentMethod .button-container {

        display: grid;

        gap: 0.9rem;

        padding: 1rem;

        border: 1px solid rgba(226, 232, 240, 0.88);

        border-radius: 1.2rem;

        background: #f8fafc;

        box-shadow: none;

    }



    .payment-method .button-container .mb-4 {

        margin-bottom: 0 !important;

        gap: 0.8rem;

    }



    #paymentMethod > h3 {

        line-height: 1.15;

    }



    .payment-method .button-container button {

        min-height: 3.15rem;

        border-radius: 1.08rem;

        font-size: 0.88rem;

        letter-spacing: 0;

    }



    #paymentRestrictionNotice:not(.hidden) {

        margin-top: 0;

        border-radius: 1.05rem;

        line-height: 1.5;

    }



    #confirmOrder > div {

        margin: 0 !important;

        padding: 1rem;

        border: 1px solid rgba(226, 232, 240, 0.88);

        border-radius: 1.2rem;

        background: #f8fafc;

        box-shadow: none;

    }



    #confirmOrder .checkout-button {

        margin-top: 0.7rem !important;

        min-height: 3.35rem;

        border-radius: 1.1rem;

        font-size: 0.94rem;

    }



    .shipping-options {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }



    .customer-form-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .confirm-order textarea {

        min-height: 9rem;

        border-radius: 1.1rem;

    }



    #locationSection iframe {

        height: 16rem;

    }



    #orderDetails {

        padding-bottom: 1rem !important;

    }



    #cart-items-summary {

        display: grid;

        gap: 1rem;

    }



    #orderEmpty {

        padding: 3rem 1.5rem !important;

        border: 1px dashed rgba(148, 163, 184, 0.24);

        border-radius: 1.25rem;

        background: #f8fafc;

    }



    #orderDetails .mt-10 {

        margin-top: 1.35rem !important;

        padding-top: 1rem !important;

        border-top-color: rgba(148, 163, 184, 0.16) !important;

    }



    #total-price-summary {

        font-size: 1.2rem;

        letter-spacing: -0.03em;

        color: #0f7a41;

    }



    #qrSection {

        text-align: center;

    }



    #qrSection > p {

        margin: 0;

        padding: 1.2rem 1rem;

        border: 1px dashed rgba(148, 163, 184, 0.24);

        border-radius: 1.2rem;

        background: #f8fafc;

        color: #64748b;

    }



    #qrSection img {

        width: min(100%, 17.5rem);

        margin: 0 auto 1rem;

        padding: 0.8rem;

        border-radius: 1.4rem;

        background: #ffffff;

        border: 1px solid rgba(226, 232, 240, 0.88);

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);

    }



    #qrSection .save-qr-button {

        width: 100%;

        max-width: 12rem;

        margin: 0 auto;

        border-radius: 1.05rem;

    }



    #qrSection .file-upload-wrapper1 {

        margin-top: 1rem;

        padding-top: 1rem;

        border-top: 1px solid rgba(148, 163, 184, 0.14);

    }



    #qrSection .file-name {

        margin-top: 0.65rem;

        color: #64748b;

    }



    .cart-modal-overlay {

        justify-content: flex-end;

        align-items: stretch;

        padding: 1.25rem;

        background:

            linear-gradient(180deg, rgba(247, 250, 248, 0.5), rgba(241, 245, 249, 0.28)),

            rgba(15, 23, 42, 0.22);

    }



    .cart-sheet {

        width: min(100%, 29rem);

        max-width: 29rem !important;

        height: calc(100vh - 2.5rem);

        max-height: calc(100vh - 2.5rem) !important;

        margin: 0 0 0 auto !important;

        border-radius: 2rem !important;

        padding: 1.35rem !important;

        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.24);

    }



    .cart-sheet-header {

        margin-bottom: 0;

    }



    .cart-sheet-title {

        font-size: 1.86rem;

    }



    .cart-items-list {

        gap: 0.9rem;

    }



    .cart-total-card {

        padding-top: 1rem;

    }



    #detail-modal {

        padding: 1.75rem !important;

        align-items: center;

        background:

            radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 24%),

            radial-gradient(circle at 100% 0%, rgba(18, 140, 126, 0.12), transparent 22%),

            rgba(15, 23, 42, 0.28);

    }



    #detail-modal .modal.detail-modal-card {

        display: grid;

        grid-template-columns: minmax(26rem, 28.5rem) minmax(19rem, 1fr);

        grid-template-rows: minmax(0, 1fr) auto;

        width: min(100%, 60rem);

        max-width: 60rem;

        height: min(86vh, 48rem);

        max-height: min(86vh, 48rem);

        border: 1px solid rgba(255, 255, 255, 0.82);

        border-radius: 1.9rem;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 251, 248, 0.985));

        box-shadow:

            0 30px 70px rgba(15, 23, 42, 0.24),

            inset 0 1px 0 rgba(255, 255, 255, 0.84);

    }



    .detail-modal-scroll {

        display: contents;

    }



    .detail-media-shell {

        grid-column: 1;

        grid-row: 1 / span 2;

        position: relative;

        width: 100%;

        max-width: none;

        min-height: 100%;

        align-self: stretch;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 1.35rem 1.15rem 1.35rem 1.35rem;

        background:

            radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 30%),

            linear-gradient(180deg, rgba(244, 252, 247, 0.96), rgba(238, 247, 242, 0.98));

        border-right: 1px solid rgba(226, 232, 240, 0.9);

        overflow: hidden;

    }



    .detail-media-shell::after {

        content: "";

        position: absolute;

        inset: 1.35rem 1.2rem 1.35rem 1.35rem;

        border-radius: 1.55rem;

        border: 1px solid rgba(255, 255, 255, 0.6);

        pointer-events: none;

        z-index: 1;

    }



    .detail-slider {

        width: 100%;

        max-width: none;

        height: auto;

        min-height: 0;

        aspect-ratio: 1 / 1;

        max-height: calc(100vh - 7rem);

        align-self: center;

        border: 1px solid rgba(226, 232, 240, 0.82);

        border-radius: 1.55rem;

        overflow: hidden;

        background:

            radial-gradient(circle at top, rgba(255, 255, 255, 0.88), rgba(240, 249, 244, 0.94)),

            linear-gradient(180deg, rgba(248, 255, 252, 0.98), rgba(240, 249, 244, 0.92));

        box-shadow:

            0 18px 38px rgba(15, 23, 42, 0.09),

            inset 0 1px 0 rgba(255, 255, 255, 0.8);

    }



    .detail-slide {

        padding: 0;

    }



    .detail-slide img {

        object-fit: contain;

        padding: 1.15rem;

        background: linear-gradient(180deg, rgba(248, 255, 252, 0.98), rgba(240, 249, 244, 0.92));

    }



    .detail-close-btn {

        top: 1.15rem;

        left: 1.15rem;

        width: 52px;

        height: 52px;

        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);

    }



    .detail-close-btn:hover {

        background: #ffffff;

    }



    .detail-nav-btn {

        width: 46px;

        height: 46px;

        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);

    }



    .detail-nav-prev {

        left: 0.7rem;

    }



    .detail-nav-next {

        right: 0.7rem;

    }



    .detail-pagination {

        right: 0.75rem;

        bottom: 0.75rem;

        min-width: 3rem;

        padding: 0.34rem 0.62rem;

        border-color: rgba(255, 255, 255, 0.9);

        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);

    }



    .detail-copy {

        grid-column: 2;

        grid-row: 1;

        display: flex;

        flex-direction: column;

        gap: 1.15rem;

        min-height: 0;

        overflow-y: auto;

        padding: 1.45rem 1.25rem 1rem 1rem;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 250, 0.98));

    }



    .detail-meta-stack {

        gap: 0.78rem;

        padding-bottom: 1.15rem;

        border-bottom: 1px solid rgba(226, 232, 240, 0.92);

    }



    .detail-name-heading {

        max-width: 14ch;

        font-size: 2rem !important;

        line-height: 1.02 !important;

        letter-spacing: -0.045em;

    }



    .detail-price-highlight {

        font-size: 1.8rem !important;

        letter-spacing: -0.045em;

        color: #0f7a41;

    }



    .detail-description-wrap {

        padding-top: 1.7rem;

    }



    .detail-section-tab {

        left: 1.15rem;

        padding: 0.42rem 0.9rem;

        font-size: 0.68rem;

        letter-spacing: 0.18em;

    }



    .detail-description-card {

        border: 1px solid rgba(226, 232, 240, 0.92);

        border-radius: 1.25rem;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 249, 0.96));

        box-shadow:

            0 12px 24px rgba(15, 23, 42, 0.04),

            inset 0 1px 0 rgba(255, 255, 255, 0.82);

    }



    #detail-desc {

        color: #475569 !important;

        font-size: 0.95rem !important;

        line-height: 1.75 !important;

    }



    #detail-video-card .detail-section-tab {

        border-color: rgba(34, 197, 94, 0.18);

        background: #f0fdf4;

        color: #0f7a41;

    }



    #detail-video-card .detail-description-card {

        background:

            linear-gradient(180deg, rgba(240, 253, 244, 0.72), rgba(255, 255, 255, 0.99));

    }



    #detail-video-card .overflow-hidden {

        border-color: rgba(34, 197, 94, 0.14) !important;

        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);

    }



    .detail-video-load-button {

        width: 100%;

        display: grid;

        gap: 0.35rem;

        justify-items: center;

        padding: 1rem 1.1rem;

        border: 1px solid rgba(34, 197, 94, 0.16);

        border-radius: 1rem;

        background: linear-gradient(180deg, #ffffff, #f0fdf4);

        color: #0f172a;

        text-align: center;

        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);

        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    }



    .detail-video-load-button:hover {

        transform: translateY(-1px);

        border-color: rgba(34, 197, 94, 0.24);

        box-shadow: 0 16px 30px rgba(22, 163, 74, 0.12);

    }



    .detail-video-load-button__label {

        font-size: 0.95rem;

        font-weight: 800;

        color: #0f7a41;

    }



    .detail-video-load-button__hint {

        font-size: 0.78rem;

        font-weight: 600;

        color: #64748b;

    }



    .detail-modal-footer {

        grid-column: 2;

        grid-row: 2;

        padding: 0.95rem 1.25rem 1.1rem 1rem;

        border-left: 1px solid rgba(226, 232, 240, 0.9);

        border-top-color: rgba(226, 232, 240, 0.94);

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 245, 0.99));

    }



    .detail-footer-actions {

        grid-template-columns: auto auto;

        justify-content: end;

        gap: 0.8rem;

        align-items: center;

    }



    .detail-quantity-controls {

        min-height: 3.45rem;

        justify-content: space-between;

        padding: 0.42rem 0.56rem;

        border-radius: 1.15rem;

        border-color: rgba(226, 232, 240, 0.92);

        background: linear-gradient(180deg, #ffffff, #f8fafc);

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.84),

            0 10px 20px rgba(15, 23, 42, 0.04);

    }



    .detail-quantity-btn {

        width: 40px;

        height: 40px;

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.72),

            0 8px 16px rgba(18, 140, 126, 0.08);

        transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;

    }



    .detail-quantity-btn:hover:not(:disabled) {

        transform: translateY(-1px);

        background: linear-gradient(180deg, #dcfce7, #bbf7d0);

    }



    .detail-quantity-value {

        min-width: 2.5ch;

        font-size: 1rem;

    }



    .detail-add-btn {

        width: auto;

        min-width: 12rem;

        min-height: 3.45rem;

        padding: 0.85rem 1.4rem;

        justify-self: end;

        border-radius: 1.15rem !important;

        font-size: 0.96rem !important;

        letter-spacing: -0.02em;

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.18),

            0 18px 34px rgba(18, 140, 126, 0.22);

        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

    }



    .detail-add-btn:hover {

        transform: translateY(-1px);

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.22),

            0 22px 38px rgba(18, 140, 126, 0.28);

        filter: saturate(1.03);

    }



    #whatsapp-chat {

        bottom: 1.5rem;

        right: 1.5rem;

    }



    .float-btn {

        bottom: 1.5rem;

        right: 1.5rem;

    }



    .desktop-simple-footer {

        display: block;

        width: 100%;

        max-width: none;

        margin: 0;

        padding: 0 1.5rem 1rem;

        background: transparent;

        border-top: 1px solid rgba(226, 232, 240, 0.95);

        color: #64748b;

        flex-shrink: 0;

    }



    .desktop-simple-footer-shell {

        width: min(100%, 78rem);

        margin: 0 auto;

        padding: 0.9rem 0 0;

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        gap: 0.75rem 1.2rem;

    }



    .desktop-simple-footer-brand,

    .desktop-simple-footer-summary {

        min-width: 0;

    }



    .desktop-simple-footer-meta,

    .desktop-simple-footer-year {

        margin: 0;

    }



    .desktop-simple-footer-meta {

        color: #0f172a;

        font-size: 0.92rem;

        font-weight: 600;

        letter-spacing: -0.02em;

        line-height: 1.4;

        text-align: left;

    }



    .desktop-simple-footer-label {

        color: #94a3b8;

        margin-right: 0.45rem;

        font-size: 0.78rem;

        font-weight: 700;

        letter-spacing: 0.12em;

        text-transform: uppercase;

    }



    .desktop-simple-footer-store {

        color: #0b1220;

        font-weight: 700;

    }



    .desktop-simple-footer-summary {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 0.7rem;

        text-align: right;

        justify-self: end;

        white-space: nowrap;

    }



    .desktop-simple-footer-status {

        display: inline-flex;

        align-items: center;

        gap: 0.45rem;

        min-height: 2rem;

        padding: 0.32rem 0.65rem;

        border: 1px solid rgba(226, 232, 240, 0.9);

        border-radius: 999px;

        background: #f8fafc;

        color: #0f172a;

        font-size: 0.72rem;

        font-weight: 700;

        letter-spacing: 0.08em;

        text-transform: uppercase;

    }



    .desktop-simple-footer-status.is-open {

        color: #0f7a41;

        background: rgba(240, 253, 244, 0.96);

        border-color: rgba(34, 197, 94, 0.18);

    }



    .desktop-simple-footer-status.is-closed {

        color: #be123c;

        background: rgba(255, 241, 242, 0.96);

        border-color: rgba(244, 63, 94, 0.16);

    }



    .desktop-simple-footer-status-dot {

        width: 0.42rem;

        height: 0.42rem;

        border-radius: 999px;

        background: currentColor;

        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);

    }



    .desktop-simple-footer-year {

        color: #94a3b8;

        font-size: 0.76rem;

        font-weight: 500;

        letter-spacing: 0;

    }

}



@media (min-width: 1024px) and (max-width: 1279px) {

    .desktop-home-heading {

        font-size: 1.8rem;

    }



    .desktop-simple-footer-summary {

        justify-content: flex-start;

        text-align: left;

        justify-self: start;

        white-space: normal;

    }

}



/* ==========================================

   25. DESKTOP CLEANUP PASS

   ========================================== */

@media (min-width: 1024px) {

    body {

        background-image: linear-gradient(180deg, #f8faf8 0%, #f3f6f4 100%);

    }



    .app-header,

    .app-search-shell,

    .desktop-header-nav-shell,

    .custom-category-bar,

    .latest-products-shell,

    .popular-products-shell,

    .desktop-home-location,

    .shipping-method,

    .customer-form,

    .order-details,

    .payment-method,

    .qr-section,

    .confirm-order,

    .location-section,

    .product-card,

    .popular-product-card {

        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;

    }



    .app-header {

        background: rgba(255, 255, 255, 0.96);

    }



    .desktop-header-nav-shell,

    .app-search-shell,

    .custom-category-bar,

    .latest-products-shell,

    .popular-products-shell,

    .desktop-home-location,

    .shipping-method,

    .customer-form,

    .order-details,

    .payment-method,

    .qr-section,

    .confirm-order,

    .location-section,

    .product-card,

    .popular-product-card {

        border-color: rgba(226, 232, 240, 0.95) !important;

        background: #ffffff !important;

    }



    #tab-home.tab-content.active {

        display: grid;

        max-width: 78rem;

        margin: 0 auto;

        grid-template-columns: minmax(0, 1.1fr) minmax(20.5rem, 0.9fr);

        gap: 1.4rem;

        align-items: start;

    }



    .home-hero-card {

        grid-column: 1;

        position: relative;

        overflow: hidden;

        isolation: isolate;

        min-height: 10.15rem;

        padding: 1.2rem 1.2rem 1.15rem !important;

        border-radius: 1.4rem !important;

        background:

            radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 36%),

            radial-gradient(circle at 16% 120%, rgba(16, 185, 129, 0.08), transparent 30%),

            linear-gradient(180deg, rgba(248, 255, 252, 0.99), rgba(255, 255, 255, 0.99)) !important;

        border-color: rgba(34, 197, 94, 0.16) !important;

        box-shadow:

            0 14px 30px rgba(15, 23, 42, 0.05),

            0 1px 0 rgba(255, 255, 255, 0.75) inset !important;

        justify-content: flex-start;

    }



    .home-hero-card::before {

        content: "";

        position: absolute;

        inset: auto -3rem -3.5rem auto;

        width: 12rem;

        height: 12rem;

        border-radius: 999px;

        background: radial-gradient(circle, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0) 72%);

        pointer-events: none;

        z-index: 0;

    }



    .home-hero-card > div {

        position: relative;

        z-index: 1;

        display: grid;

        gap: 0.92rem;

    }



    .home-hero-card .flex.items-center.justify-between {

        align-items: flex-start;

        gap: 1.15rem;

    }



    .home-hero-card .flex.items-center.justify-between > p {

        color: #64748b !important;

        font-size: 0.7rem;

        font-weight: 700;

        letter-spacing: 0.18em;

    }



    .home-hero-card .inline-flex {

        min-height: 2.3rem;

        padding: 0.5rem 0.82rem !important;

        background: #f0fdf4 !important;

        border-color: rgba(34, 197, 94, 0.16) !important;

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

    }



    .home-hero-card .inline-flex.text-emerald-700 {

        color: #047857 !important;

    }



    .home-hero-card .inline-flex.text-rose-600 {

        color: #e11d48 !important;

    }



    .shop-status-meta-grid {

        display: grid;

        gap: 0.72rem;

    }



    .shop-status-meta-card {

        min-height: 4.45rem;

        padding: 0.82rem 0.88rem;

        border-radius: 1rem;

        border-color: rgba(226, 232, 240, 0.88);

        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));

        box-shadow:

            0 8px 18px rgba(15, 23, 42, 0.035),

            inset 0 1px 0 rgba(255, 255, 255, 0.82);

        backdrop-filter: none;

        -webkit-backdrop-filter: none;

        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    }



    .shop-status-meta-card:hover {

        transform: translateY(-1px);

        border-color: rgba(34, 197, 94, 0.16);

        box-shadow:

            0 12px 24px rgba(15, 23, 42, 0.05),

            inset 0 1px 0 rgba(255, 255, 255, 0.84);

    }



    .shop-status-meta-label {

        color: #94a3b8;

        font-size: 0.64rem;

    }



    .shop-status-meta-value {

        margin-top: 0.38rem;

        color: #0f172a;

        font-size: 0.88rem;

        line-height: 1.5;

    }



    .latest-products-section,

    .popular-products-section,

    .desktop-home-location {

        margin-top: 0 !important;

    }



    .latest-products-section {

        grid-column: 1;

        grid-row: 2;

        align-self: stretch;

        min-height: 0;

        display: flex;

    }



    .popular-products-section {

        grid-column: 2;

        grid-row: 1 / span 2;

        align-self: stretch;

        min-height: 0;

        display: flex;

    }



    .desktop-home-location {

        display: grid;

        grid-column: 1 / -1;

        position: relative;

        overflow: hidden;

        isolation: isolate;

        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

        grid-template-areas:

            "heading heading"

            "map details";

        grid-template-rows: auto minmax(17.5rem, 1fr);

        gap: 0.9rem;

        padding: 1.18rem !important;

        border-radius: 1.4rem !important;

        align-items: stretch;

    }



    .latest-products-shell,

    .popular-products-shell {

        position: relative;

        overflow: hidden;

        isolation: isolate;

        padding: 1.2rem;

        border-radius: 1.4rem;

        background:

            radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 34%),

            linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 249, 0.98)) !important;

        box-shadow:

            0 14px 30px rgba(15, 23, 42, 0.05),

            0 1px 0 rgba(255, 255, 255, 0.84) inset !important;

    }



    .latest-products-shell::before,

    .popular-products-shell::before,

    .desktop-home-location::before {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

        pointer-events: none;

        z-index: 0;

    }



    .latest-products-shell > *,

    .popular-products-shell > *,

    .desktop-home-location > * {

        position: relative;

        z-index: 1;

    }



    .latest-products-shell {

        width: 100%;

        height: 100%;

        min-height: 100%;

        display: flex;

        flex-direction: column;

    }



    .popular-products-shell {

        width: 100%;

        height: 100%;

        min-height: 100%;

        display: flex;

        flex-direction: column;

    }



    .latest-products-header,

    .popular-products-header {

        margin-bottom: 1rem;

        padding-bottom: 0.95rem;

        border-bottom: 1px solid rgba(226, 232, 240, 0.92);

    }



    .desktop-home-location .desktop-location-meta-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .latest-products-heading,

    .popular-products-heading {

        font-size: 1.52rem;

        line-height: 1.02;

        letter-spacing: -0.042em;

    }



    .latest-products-kicker {

        color: #94a3b8;

        font-size: 0.7rem;

        letter-spacing: 0.18em;

    }



    .latest-product-media {

        border-radius: 1.1rem;

        border: 1px solid rgba(226, 232, 240, 0.82);

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);

    }



    .latest-product-copy {

        padding: 1.18rem 1.2rem 1.2rem;

    }



    .latest-product-name {

        font-size: 1.1rem;

    }



    .latest-product-price {

        font-size: 0.96rem;

    }



    .latest-products-counter {

        min-width: 3.15rem;

        padding: 0.48rem 0.78rem;

        border: 1px solid rgba(226, 232, 240, 0.88);

        background: linear-gradient(180deg, #ffffff, #f8fafc);

        font-size: 0.76rem;

    }



    .latest-products-empty {

        min-height: 13rem;

        display: grid;

        place-items: center;

        margin: 0;

        border-radius: 1.15rem;

    }



    .popular-product-card {

        align-items: stretch;

        min-height: 8.55rem;

        border-radius: 1.12rem !important;

        padding: 0.45rem !important;

        background: linear-gradient(180deg, #ffffff, #fbfdfc) !important;

        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04) !important;

        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

    }



    .popular-product-card:hover {

        transform: translateY(-2px);

        border-color: rgba(34, 197, 94, 0.18) !important;

        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.07) !important;

    }



    .popular-product-media {

        width: 7.65rem;

        height: 7.65rem;

        min-height: 7.65rem;

        border-radius: 0.98rem;

        border: 1px solid rgba(226, 232, 240, 0.78);

        background: linear-gradient(180deg, #fbfdfc, #f8fafc);

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);

    }



    .popular-product-card > div:last-child {

        display: grid;

        align-content: center;

        gap: 0.28rem;

        padding: 0.9rem 0.98rem 0.9rem 0.8rem;

    }



    .popular-product-category {

        font-size: 0.7rem;

        letter-spacing: 0.02em;

    }



    .popular-product-name {

        font-size: 1.1rem;

        line-height: 1.22;

    }



    .popular-product-price {

        margin-top: 0.22rem;

        font-size: 0.97rem;

    }



    .desktop-location-heading {

        grid-area: heading;

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        gap: 1rem;

        padding-bottom: 0.1rem;

    }



    .desktop-location-kicker {

        margin: 0;

        color: #94a3b8;

        font-size: 0.7rem;

        font-weight: 700;

        letter-spacing: 0.18em;

        text-transform: uppercase;

    }



    .desktop-location-title {

        margin: 0.35rem 0 0;

        font-size: 1.46rem;

        line-height: 1.08;

        letter-spacing: -0.04em;

        color: #0f172a;

    }



    .desktop-location-subtitle {

        margin: 0.42rem 0 0;

        max-width: 35rem;

        color: #64748b;

        font-size: 0.9rem;

        line-height: 1.65;

    }



    .desktop-location-map-shell {

        grid-area: map;

        min-height: 17.5rem;

        align-self: stretch;

        width: 100%;

        max-width: none;

        height: 100%;

    }



    .desktop-location-map-shell iframe {

        display: block;

        width: 100%;

        height: 100%;

        min-height: 17.5rem;

        margin-bottom: 0;

        border-radius: 1.12rem;

        border: 1px solid rgba(226, 232, 240, 0.92);

        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);

    }



    .desktop-location-map-empty {

        height: 100%;

        min-height: 17.5rem;

        margin: 0;

        display: grid;

        place-items: center;

        padding: 1.25rem;

        border: 1px dashed rgba(148, 163, 184, 0.28);

        border-radius: 1.12rem;

        background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.72));

        color: #64748b;

        text-align: center;

        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);

    }



    .desktop-home-location .location-details {

        grid-area: details;

        display: grid;

        height: 100%;

        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:

            "head"

            "meta"

            "address"

            "phone";

        grid-template-rows: auto auto auto auto;

        gap: 0.82rem;

        align-content: start;

        padding: 1rem;

        border: 1px solid rgba(226, 232, 240, 0.92);

        border-radius: 1.15rem;

        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 249, 0.96));

        box-shadow:

            0 10px 24px rgba(15, 23, 42, 0.035),

            inset 0 1px 0 rgba(255, 255, 255, 0.84);

    }



    .desktop-location-details-head {

        grid-area: head;

        display: grid;

        gap: 0.32rem;

        padding: 0.05rem 0 0.1rem;

    }



    .desktop-location-details-kicker {

        margin: 0;

        color: #0f172a;

        font-size: 1.04rem;

        font-weight: 700;

        letter-spacing: -0.03em;

        line-height: 1.2;

    }



    .desktop-location-details-copy {

        margin: 0;

        max-width: 28rem;

        color: #64748b;

        font-size: 0.9rem;

        font-weight: 500;

        line-height: 1.6;

        letter-spacing: -0.01em;

        text-wrap: pretty;

    }



    .desktop-home-location .desktop-location-meta-grid {

        display: grid;

        grid-area: meta;

        gap: 0.82rem;

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .desktop-home-location .desktop-location-address-card {

        grid-area: address;

    }



    .desktop-home-location .desktop-location-phone-card {

        grid-area: phone;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 0.8rem;

    }



    .desktop-location-info-card,

    .desktop-location-address-card,

    .desktop-location-phone-card {

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        gap: 0.28rem;

        border-radius: 1rem;

        padding: 0.9rem 0.95rem !important;

        border: 1px solid rgba(226, 232, 240, 0.88) !important;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 249, 0.95)) !important;

        box-shadow:

            0 6px 16px rgba(15, 23, 42, 0.028),

            inset 0 1px 0 rgba(255, 255, 255, 0.86);

    }



    .desktop-location-card-label {

        margin: 0;

        color: #94a3b8;

        font-size: 0.65rem;

        font-weight: 700;

        letter-spacing: 0.15em;

        text-transform: uppercase;

    }



    .desktop-location-card-value {

        margin: 0.42rem 0 0;

        color: #475569;

        font-size: 0.84rem;

        font-weight: 600;

        line-height: 1.48;

        letter-spacing: -0.015em;

        text-wrap: pretty;

    }



    .desktop-home-location .location-address {

        margin: 0.42rem 0 0;

        color: #475569;

        font-size: 0.84rem;

        font-weight: 600;

        line-height: 1.5;

        letter-spacing: -0.012em;

        text-wrap: pretty;

    }



    .desktop-home-location .desktop-location-phone-card .desktop-location-card-label {

        flex: 0 0 auto;

        margin: 0;

    }



    .desktop-home-location .desktop-location-phone-card .location-phone {

        display: inline-flex;

        align-items: center;

        width: fit-content;

        max-width: 100%;

        margin: 0;

        min-height: 0;

        padding: 0.46rem 0.78rem;

        border-radius: 999px;

        background: rgba(240, 253, 244, 0.96);

        border: 1px solid rgba(34, 197, 94, 0.16);

        color: #0f7a41;

        font-size: 0.84rem;

        font-weight: 700;

        line-height: 1.35;

        letter-spacing: -0.01em;

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);

    }



    #tab-menu.tab-content.active {

        display: grid;

        max-width: 78rem;

        margin: 0 auto;

        grid-template-columns: 19rem minmax(0, 1fr);

        gap: 1.1rem 1.25rem;

        align-items: start;

    }



    #tab-menu .section-title {

        grid-column: 1 / -1;

        margin-bottom: 0.15rem;

        font-size: 1.82rem;

        line-height: 1.02;

        letter-spacing: -0.045em;

    }



    #tab-menu .custom-category-bar {

        position: sticky;

        top: 10.6rem;

        display: grid;

        gap: 1rem;

        padding: 1.1rem !important;

        border-radius: 1.2rem !important;

        background:

            linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 249, 0.98)) !important;

        border-color: rgba(226, 232, 240, 0.92) !important;

        box-shadow:

            0 10px 24px rgba(15, 23, 42, 0.045),

            inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;

    }



    #tab-menu #categoryToggle {

        display: grid;

        gap: 0.4rem;

        align-items: start;

        padding: 0;

        cursor: default;

        pointer-events: none;

    }



    #tab-menu #categoryToggle > span:first-child {

        font-size: 0.68rem;

        font-weight: 700;

        letter-spacing: 0.16em;

        text-transform: uppercase;

        color: #94a3b8;

    }



    #tab-menu #activeCategoryLabel {

        color: #0f172a !important;

        font-size: 1.02rem;

        font-weight: 700;

        line-height: 1.25;

    }



    #tab-menu #categoryList {

        display: grid !important;

        grid-template-columns: 1fr;

        gap: 0.55rem;

        margin-top: 0 !important;

        max-height: calc(100vh - 17rem);

        overflow-y: auto;

        padding-right: 0.15rem;

    }



    #tab-menu #categoryList button {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        min-height: 3rem;

        padding: 0.78rem 0.95rem;

        border-radius: 1rem;

        text-align: left;

        font-size: 0.88rem;

        font-weight: 700;

        line-height: 1.3;

        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;

    }



    #tab-menu #categoryList button:not(.bg-emerald-500) {

        color: #475569 !important;

        border: 1px solid rgba(226, 232, 240, 0.92) !important;

        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);

    }



    #tab-menu #categoryList button.bg-emerald-500 {

        border: 1px solid transparent !important;

        background: linear-gradient(135deg, #16a34a, #0f7a41) !important;

        color: #ffffff !important;

        box-shadow: 0 14px 28px rgba(22, 163, 74, 0.18);

    }



    #tab-menu #categoryList button:hover {

        transform: translateX(2px);

    }



    #tab-menu #menu-grid {

        gap: 0.85rem !important;

        align-content: start;

    }



    #tab-menu .menu-load-more-panel {

        grid-column: 2 / 3;

        justify-items: center;

        margin-top: 1.2rem;

    }



    #tab-menu .menu-load-more-sentinel {

        grid-column: 2 / 3;

        width: 100%;

        height: 1px;

        margin-top: -0.25rem;

        pointer-events: none;

    }



    #tab-menu .product-card {

        display: flex;

        flex-direction: column;

        min-height: 100%;

        border-radius: 1.05rem !important;

        overflow: hidden;

        background: linear-gradient(180deg, #ffffff, #fbfdfc) !important;

        box-shadow:

            0 10px 22px rgba(15, 23, 42, 0.04),

            0 1px 0 rgba(255, 255, 255, 0.72) inset !important;

        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

    }



    #tab-menu .product-card > div:first-child {

        display: block;

        padding: 0;

        border-radius: 1.05rem 1.05rem 0 0;

        overflow: hidden;

        background: #f8fafc;

    }



    #tab-menu .product-card > div:last-child {

        display: grid;

        align-content: start;

        gap: 0.35rem;

        flex: 1 1 auto;

        padding: 0.95rem 1rem 1rem !important;

        background: #ffffff;

        border-top: 1px solid rgba(226, 232, 240, 0.88);

    }



    #tab-menu .product-card:hover {

        transform: translateY(-4px);

        border-color: rgba(34, 197, 94, 0.18) !important;

        box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08) !important;

    }



    #tab-menu .product-card h4 {

        min-height: 2.7em;

        font-size: 1rem;

        line-height: 1.35;

        letter-spacing: -0.025em;

        color: #0f172a;

    }



    #tab-menu .product-card .product-price {

        margin-top: 0.15rem !important;

        font-size: 0.95rem !important;

        font-weight: 800;

        letter-spacing: -0.025em;

        color: #0f7a41;

    }



    #tab-menu .product-card .stock-info {

        margin-top: 0.08rem !important;

        font-size: 0.76rem !important;

        font-weight: 600;

        letter-spacing: -0.01em;

    }



    #tab-menu .product-card-image,

    #tab-menu .product-card > div:first-child > img {

        display: block;

        width: 100%;

        height: 13.85rem !important;

        padding: 0 !important;

        border-radius: 0 !important;

        clip-path: none;

        object-fit: cover !important;

        object-position: center !important;

        background: transparent;

        transition: transform 0.3s ease;

    }



    #tab-menu .product-card:hover .product-card-image {

        transform: scale(1.03);

    }



    .shipping-method,

    .customer-form,

    .order-details,

    .payment-method,

    .qr-section,

    .confirm-order,

    .location-section {

        padding: 1rem !important;

        border-radius: 1.15rem !important;

    }



    .shipping-option,

    #paymentMethod .button-container,

    #confirmOrder > div,

    #qrSection > p,

    #orderEmpty {

        background: #f8fafc !important;

        box-shadow: none !important;

        border-color: rgba(226, 232, 240, 0.9) !important;

    }

}