:root {
    color-scheme: only light;
}

#client-navigation-overlay {
    --navigation-backdrop: rgba(243, 244, 246, .72);
    --navigation-card-background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(249, 250, 251, .98));
    --navigation-card-border: var(--color-gray-200, #e5e7eb);
    --navigation-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
    --navigation-caption: var(--color-gray-600, #4b5563);
    --navigation-keyboard-background: var(--color-gray-100, #f3f4f6);
    --navigation-keyboard-border: var(--color-gray-200, #e5e7eb);
    --navigation-key-top: #fff;
    --navigation-key-bottom: var(--color-gray-100, #f3f4f6);
    --navigation-key-border: var(--color-gray-300, #d1d5db);
    --navigation-key-shadow: var(--color-gray-300, #d1d5db);
    --navigation-ripple-top: var(--color-primary-400, #60a5fa);
    --navigation-ripple-bottom: var(--color-primary-600, #2563eb);
    --navigation-ripple-glow: color-mix(in srgb, var(--color-primary-500, #3b82f6) 60%, transparent);
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    background: var(--navigation-backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-gray-800, #1f2937);
}
html.dark #client-navigation-overlay {
    --navigation-backdrop: rgba(15, 23, 42, .72);
    --navigation-card-background: linear-gradient(165deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, .98));
    --navigation-card-border: rgba(148, 163, 184, .18);
    --navigation-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    --navigation-caption: var(--color-gray-300, #cbd5e1);
    --navigation-keyboard-background: var(--color-gray-950, #020617);
    --navigation-keyboard-border: var(--color-gray-700, #334155);
    --navigation-key-top: var(--color-gray-700, #334155);
    --navigation-key-bottom: var(--color-gray-800, #1e293b);
    --navigation-key-border: var(--color-gray-600, #475569);
    --navigation-key-shadow: var(--color-gray-900, #0f172a);
    color: var(--color-gray-200, #e2e8f0);
}
#client-navigation-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease, visibility 0s;
}
#client-navigation-overlay[hidden] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s 180ms;
}
/* Override Tailwind's important hidden reset in its own cascade layer so
   visibility and opacity can finish the exit transition. */
@layer base {
    #client-navigation-overlay[hidden] { display: grid !important; }
}
#client-navigation-overlay .client-navigation-card {
    transform: translateY(0) scale(1);
    transition: transform 180ms ease;
}
#client-navigation-overlay[hidden] .client-navigation-card {
    transform: translateY(8px) scale(.97);
}
@media (prefers-reduced-motion: reduce) {
    #client-navigation-overlay,
    #client-navigation-overlay[hidden],
    #client-navigation-overlay .client-navigation-card {
        transition: none;
    }
}
#client-navigation-overlay,
#client-navigation-overlay * { box-sizing: border-box; }
.client-navigation-card {
    width: min(340px, 88vw);
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 24px;
    background: var(--navigation-card-background);
    border: 1px solid var(--navigation-card-border);
    box-shadow: var(--navigation-card-shadow);
    text-align: center;
}
.client-navigation-caption {
    margin: 1.15rem 0 0;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--navigation-caption);
}
.client-navigation-keyboard {
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 10px;
    border-radius: 14px;
    display: grid;
    gap: 6px;
}
.client-navigation-keyboard-row {
    display: flex;
    min-width: 0;
    gap: 5px;
    justify-content: center;
}
.client-navigation-key {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--navigation-key-top), var(--navigation-key-bottom));
    border: 1px solid var(--navigation-key-border);
    box-shadow: 0 2px 0 var(--navigation-key-shadow);
    animation: client-navigation-key-ripple 1.8s ease-in-out infinite;
}
.client-navigation-key--wide { width: 40px; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(1) { animation-delay: 0s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(2) { animation-delay: .05s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(3) { animation-delay: .1s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(4) { animation-delay: .15s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(5) { animation-delay: .2s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(6) { animation-delay: .25s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(7) { animation-delay: .3s; }
.client-navigation-keyboard-row:nth-child(1) .client-navigation-key:nth-child(8) { animation-delay: .35s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(1) { animation-delay: .08s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(2) { animation-delay: .13s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(3) { animation-delay: .18s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(4) { animation-delay: .23s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(5) { animation-delay: .28s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(6) { animation-delay: .33s; }
.client-navigation-keyboard-row:nth-child(2) .client-navigation-key:nth-child(7) { animation-delay: .38s; }
.client-navigation-keyboard-row:nth-child(3) .client-navigation-key { animation-delay: .2s; }
.client-navigation-keyboard-row:nth-child(3) .client-navigation-key:nth-child(2) { animation-delay: .28s; }
.client-navigation-keyboard-row:nth-child(3) .client-navigation-key:nth-child(3) { animation-delay: .36s; }
@keyframes client-navigation-key-ripple {
    0%, 100% {
        transform: translateY(0);
        background: linear-gradient(180deg, var(--navigation-key-top), var(--navigation-key-bottom));
        box-shadow: 0 2px 0 var(--navigation-key-shadow), 0 0 0 transparent;
    }
    40% {
        transform: translateY(2px);
        background: linear-gradient(180deg, var(--navigation-ripple-top), var(--navigation-ripple-bottom));
        box-shadow: 0 0 0 var(--navigation-key-shadow), 0 0 12px var(--navigation-ripple-glow);
    }
}
@media (prefers-reduced-motion: reduce) {
    .client-navigation-key { animation: none; }
}

/* Product photo frame: keep SKU fully visible, never a thin letterboxed strip. */
.product-photo-frame .product-photo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Keep the template card inside its slide when catalog titles exceed the sample text. */
.suggestionSwiper .swiper-slide > a {
    width: 100%;
    min-width: 0;
}

.suggestionSwiper .swiper-slide > a > .flex > .flex-1 {
    min-width: 0;
}

/* Keep the template's 155px track; center the full card rather than clipping its padding. */
@media (min-width: 1024px) {
    .suggestionSwiper .swiper-slide {
        padding-block: 0;
    }
}

/* The template banners are 2160 x 972. Uploaded image proportions must not size the row. */
.mainHeroSwiper {
    aspect-ratio: 20 / 9;
    height: auto;
}

.mainHeroSwiper > .swiper-wrapper {
    position: absolute;
    inset: 0;
}

@media (min-width: 1280px) {
    .xl\:col-span-8:has(> .mainHeroSwiper) {
        min-height: 400px;
    }

    .mainHeroSwiper {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}

.validation-message {
    @apply text-secondary-600 text-xs font-bold ps-3;
    color: var(--color-secondary-600);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    padding-inline-start: calc(var(--spacing) * 3);
}

.navigating .client-reconnect-spinner {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    border: 4px solid rgba(59, 130, 246, 0.25);
    border-top-color: #2563eb;
    animation: client-reconnect-spin 0.7s linear infinite;
}

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

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Mobile header: push logo to the physical left (end side in RTL); desktop unchanged */
@media (max-width: 767.98px) {
    .header-brand-group { flex: 1 1 auto; }
    .header-brand-group > .header-logo { margin-inline-start: auto; }
}

/* Peyda's space glyph is very narrow, so mixed Persian/Latin text (model names, spec values) looked collapsed. */
h1, h2, h3, h4, .font-black, .font-extrabold, .font-bold, #tab-specs span {
    word-spacing: 0.15em;
}
#tab-specs span {
    unicode-bidi: isolate;
}

/* Blog detail body: the stored post HTML carries its own inline styles; align it with the template article typography. */
.blog-article .va-blog { font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.blog-article p { color: #4b5563 !important; line-height: 2.25rem !important; margin: 0 0 2rem !important; text-align: justify; font-weight: 500; font-size: 1rem !important; }
.blog-article > .va-blog > p:first-child, .blog-article > p:first-child { font-size: 1.25rem !important; font-weight: 900; line-height: 2.5rem !important; color: #1f2937 !important; margin-bottom: 2.5rem !important; border: 0 !important; padding: 0 !important; }
.blog-article h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.5rem !important; line-height: 2rem; font-weight: 900 !important; color: #111827 !important; margin: 0 0 1.5rem !important; }
.blog-article h2::before { content: ""; flex: 0 0 .5rem; width: .5rem; height: 2rem; border-radius: 9999px; background: #2563eb; box-shadow: 0 0 15px rgba(37,99,235,.5); }
.blog-article h3 { font-size: 1.25rem !important; font-weight: 900 !important; color: #111827 !important; margin: 0 0 1rem !important; }
.blog-article ul, .blog-article ol { color: #4b5563; font-weight: 700; font-size: .875rem; line-height: 2rem; margin-bottom: 2rem; }
.blog-article figure { margin: 3rem 0 !important; padding: .5rem; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); border-radius: 2.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); overflow: hidden; }
.blog-article figure img, .blog-article > img { width: 100%; height: 16rem; object-fit: cover; border-radius: 2rem !important; transition: transform .7s; }
.blog-article figure:hover img { transform: scale(1.1); }
.blog-article table { width: 100%; border-collapse: separate !important; border-spacing: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 2rem; overflow: hidden; background: rgba(255,255,255,.5); margin: 3rem 0 !important; }
.blog-article th { background: rgba(37,99,235,.06) !important; color: #111827 !important; font-weight: 900; font-size: .75rem; padding: 1rem !important; border: 0 !important; }
.blog-article td { color: #111827 !important; font-weight: 700; font-size: .8rem; padding: .9rem 1rem !important; border: 0 !important; border-top: 1px dashed #d1d5db !important; }
.blog-article a:not(.blog-tag) { color: #2563eb !important; }
.blog-article div[style*="#f0fdf4"] { background: rgba(16,185,129,.03) !important; border: 1px solid rgba(16,185,129,.2) !important; border-radius: 2.5rem !important; padding: 2rem !important; }
.blog-article div[style*="#fef2f2"] { background: rgba(244,63,94,.03) !important; border: 1px solid rgba(244,63,94,.2) !important; border-radius: 2.5rem !important; padding: 2rem !important; }
.blog-article div[style*="#ecfdf5"], .blog-article div[style*="#f8fafc"] { background: rgba(255,255,255,.4) !important; border: 1px solid rgba(255,255,255,.6) !important; border-radius: 2.5rem !important; padding: 2rem 2.5rem !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.05); }
.blog-article div[style*="#f8fafc"] li { font-size: .875rem; }
/* Blog category tabs scroll sideways on narrow screens instead of widening the page (same as the home product tabs). */
.blog-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.blog-tabs::-webkit-scrollbar { display: none; }
.min-w-0 { min-width: 0; }
@media (min-width: 1024px) { .lg\:col-span-12 { grid-column: span 12 / span 12; } }

/* Header category mega menu: fills the screen below the header (template panel otherwise caps at 80vh). */
.mega-menu-panel { height: calc(100dvh - 9.75rem); }
/* Stretch the sidebar background, keeping the link hover boxes at their content height. */
.mega-menu-panel > .mega-menu-layout { min-height: 100%; align-items: flex-start; }
.mega-menu-sidebar { align-self: stretch; }
/* Empty columns stay outside the hover box when a category has fewer than four submenus. */
.mega-menu-submenus { width: min(100%, max(20rem, calc(25% * var(--mega-menu-columns)))); }
.mega-menu-grid { grid-template-columns: repeat(var(--mega-menu-columns), minmax(0, 1fr)); }
.mega-menu-panel[data-dismissed] { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }

/* Mobile uses the same live search input and results as the desktop header. */
@media (max-width: 767px) {
    #search-wrapper.mobile-search-open {
        display: flex;
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        flex-direction: column;
        padding: 1.25rem;
        background: #fff;
    }
    .dark #search-wrapper.mobile-search-open { background: var(--color-primary-950); }
    #search-wrapper.mobile-search-open > .relative { flex-shrink: 0; }
    #search-wrapper.mobile-search-open #mega-search-panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        min-height: 0;
        padding-top: 0;
        margin-top: 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: none;
    }
    #search-wrapper.mobile-search-open #mega-search-panel > div { padding: 1rem; }
}

/* ===== Mobile (phases 1–2) — mobile only ===== */
@media (max-width: 767px) {
/* Floating glass: rounded detached bar with shadow, round filled buttons */
header.sticky{background:transparent!important;border:0!important;padding:8px 10px 0}
header.sticky > .container{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-radius:22px;box-shadow:0 8px 24px -10px rgba(0,0,0,.18);padding:0 10px}
header.sticky > .container > div{height:58px}
header.sticky #resMenu,header.sticky #mobile-search-toggle{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#eef2ff;border:0;color:#2563eb}
header.sticky .header-logo img{width:36px}
/* Compact floating pill: shorter, cart inline as round chip, badge inside */
body{padding-bottom:92px}
body div.fixed.bottom-4.md\:hidden{bottom:12px;width:94%}
body div.fixed.bottom-4.md\:hidden > div{border-radius:999px;padding:4px 6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25)}
body div.fixed.bottom-4.md\:hidden li.-mt-8{margin-top:0}
body div.fixed.bottom-4.md\:hidden li.-mt-8 button{width:46px;height:46px;border-radius:999px}
body div.fixed.bottom-4.md\:hidden li.-mt-8 button > span{top:2px;right:2px;width:16px;height:16px;font-size:9px}
body div.fixed.bottom-4.md\:hidden a,body div.fixed.bottom-4.md\:hidden button.flex-col{padding:6px 10px;gap:2px}
body div.fixed.bottom-4.md\:hidden svg.w-6{width:22px;height:22px}
body div.fixed.bottom-4.md\:hidden span.text-\[10px\]{font-size:11px}
/* Compact centered card: smaller radius, padding and controls */
#login-modal > div{width:100%}
#login-modal > div > div.relative{border-radius:24px}
#login-modal .p-8{padding:22px 18px}
#login-modal .close-login{top:12px;left:12px;width:36px;height:36px;border-radius:12px}
#login-modal #submitMobile,#login-modal #submitConfirmationCode{padding-top:14px;padding-bottom:14px;border-radius:16px}
#login-modal input{padding-top:12px;padding-bottom:12px}
/* ===== Mobile phase 2: home sections ===== */
/* Home – instant: template look (phase-2 1A rules removed) */
/* Horizontal snap strip of compact offer cards (85% wide) + 4 quick-access tiles */
/* Home – categories-B */
/* Compact 4-column grid (all categories visible, ~3 rows), small tiles + 11px labels */
main > section:has(a[href^="/products?category="]) h2{font-size:19px;white-space:nowrap}
main > section:has(a[href^="/products?category="]) .md\:flex-row > a span{white-space:nowrap}
main > section:has(a[href^="/products?category="]) .md\:flex-row{flex-direction:row;align-items:center;margin-bottom:14px}
main > section:has(a[href^="/products?category="]) .md\:flex-row > a{padding:8px 10px;gap:6px;flex-shrink:0}
main > section:has(a[href^="/products?category="]) .md\:flex-row > a span{font-size:11.5px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 > a > div:first-child{margin-bottom:6px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 > a > div:first-child > div:first-child{border-radius:18px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 > a > div:first-child > div:last-child{padding:10px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 img{width:40px;height:40px}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 span{font-size:11px;text-align:center;line-height:1.5}
main > section:has(a[href^="/products?category="]) .grid.lg\:grid-cols-7 > a > div:last-child{display:none}
/* Home – discount-A */
/* Compact header (title one line), full-width button, slides 75% wide with smaller cards */
main > section:has(.incredibleSwiper) .rounded-\[4rem\]{border-radius:28px}
main > section:has(.incredibleSwiper) .lg\:w-1\/3{padding:20px 20px 12px}
main > section:has(.incredibleSwiper) .lg\:w-1\/3 .mb-8{margin-bottom:10px}
main > section:has(.incredibleSwiper) .lg\:w-1\/3 h2{font-size:28px;margin-bottom:8px}
main > section:has(.incredibleSwiper) .lg\:w-1\/3 h2 br{display:none}
main > section:has(.incredibleSwiper) .lg\:w-1\/3 p{font-size:12px;margin-bottom:12px}
main > section:has(.incredibleSwiper) .lg\:w-1\/3 a{padding:12px 0}
main > section:has(.incredibleSwiper) .lg\:w-2\/3{padding:12px 16px 20px}
main > section:has(.incredibleSwiper) .swiper-slide > a{padding-top:18px}
main > section:has(.incredibleSwiper) .swiper-slide .p-8{padding:16px}
main > section:has(.incredibleSwiper) .swiper-slide .mb-8{margin-bottom:10px}
main > section:has(.incredibleSwiper) .swiper-slide .product-photo-frame{height:120px}
main > section:has(.incredibleSwiper) .swiper-slide .product-photo-frame .product-photo{max-height:100%;max-width:100%}
main > section:has(.incredibleSwiper) .swiper-slide h3{margin-bottom:8px;height:auto}
main > section:has(.incredibleSwiper) .swiper-slide .pt-6{padding-top:10px}

/* Card face: tighter than Tailwind rounded-[3.5rem] (56px) */
main > section:has(.incredibleSwiper) .swiper-slide > a > .absolute.inset-0{
  border-radius:28px;
}
main > section:has(.incredibleSwiper) .swiper-slide button[data-product-slug].w-14.h-14,
main > section:has(.incredibleSwiper) .swiper-slide button.w-14.h-14.bg-secondary-600{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
}
main > section:has(.incredibleSwiper) .swiper-slide button[data-product-slug].w-14.h-14 svg,
main > section:has(.incredibleSwiper) .swiper-slide button.w-14.h-14.bg-secondary-600 svg{
  width:18px;height:18px;
}
main > section:has(.incredibleSwiper) .swiper-slide .text-\[10px\]{font-size:11px}
/* Home – newest-C */
/* Scrollable tab chips + horizontal snap carousel of tall cards (1.4 per view) */
main > section:has(#product-grid) .md\:flex-row{gap:12px;margin-bottom:16px;padding-right:12px}
main > section:has(#product-grid) h2{font-size:24px}
main > section:has(#product-grid) h2 + p{font-size:12px;margin-top:4px}
main > section:has(#product-grid) .no-scrollbar{width:100%;scroll-snap-type:x proximity}
main > section:has(#product-grid) .no-scrollbar .shop-filter-btn{flex-shrink:0;padding:9px 14px;white-space:nowrap;scroll-snap-align:start}
main > section:has(#product-grid) #product-grid{display:flex!important;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:10px}
main > section:has(#product-grid) #product-grid > *{flex:0 0 70%;scroll-snap-align:start}
main > section:has(#product-grid) #product-grid .product-card{border-radius:22px;padding:6px}
main > section:has(#product-grid) #product-grid .product-card > div{flex-direction:column;height:auto!important}
main > section:has(#product-grid) #product-grid .product-card > div > div:first-child{width:auto;height:150px;margin:0;border-radius:18px}
main > section:has(#product-grid) #product-grid .product-card > div > div:last-child{width:auto;padding:10px 6px 4px}
main > section:has(#product-grid) #product-grid .product-card h3{font-size:13px;line-height:1.6}
main > section:has(#product-grid) #product-grid .product-card .text-left{text-align:right}
main > section:has(#product-grid) #product-grid .product-card .justify-end{justify-content:flex-start}
main > section:has(#product-grid) #product-grid .product-card .text-\[10px\]{font-size:11px}
/* Home – bestsellers-C */
/* Single big card ~80% wide with peek of next, smaller arrows kept */
main > section:has(.productSwiper) .container > div:first-child{flex-direction:row;align-items:center;margin-bottom:14px;gap:10px}
main > section:has(.productSwiper) h2{font-size:22px}
main > section:has(.productSwiper) h2 + p{white-space:nowrap}
main > section:has(.productSwiper) .container > div:first-child > a span{white-space:nowrap}
main > section:has(.productSwiper) .container > div:first-child > a{padding:9px 12px;flex-shrink:0}
main > section:has(.productSwiper) .swiper-slide{padding:6px!important}
main > section:has(.productSwiper) .swiper-slide > a{padding-top:20px}
main > section:has(.productSwiper) .swiper-slide .p-7{padding:16px}
main > section:has(.productSwiper) .swiper-slide .min-h-\[180px\]{min-height:130px;margin-bottom:10px}
main > section:has(.productSwiper) .swiper-slide .product-photo-frame{height:130px}
main > section:has(.productSwiper) .swiper-slide .product-photo-frame .product-photo{max-height:100%;max-width:100%}
main > section:has(.productSwiper) .swiper-slide h3{font-size:14px;margin-bottom:10px}
main > section:has(.productSwiper) .flex.justify-center.mt-10{margin-top:12px}
main > section:has(.productSwiper) .prod-prev,main > section:has(.productSwiper) .prod-next{width:40px;height:40px;border-radius:12px}
/* Card face: tighter than Tailwind rounded-[3rem] (48px); plus matches discount 38px */
main > section:has(.productSwiper) .swiper-slide > a > .absolute.inset-0{
  border-radius:24px;
}
main > section:has(.productSwiper) .swiper-slide button[data-product-slug].w-14.h-14,
main > section:has(.productSwiper) .swiper-slide button.w-14.h-14.bg-primary-500{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
}
main > section:has(.productSwiper) .swiper-slide button[data-product-slug].w-14.h-14 svg,
main > section:has(.productSwiper) .swiper-slide button.w-14.h-14.bg-primary-500 svg{
  width:18px;height:18px;
}
/* Home – magazine-C */
/* 2-column grid of short cards (image + title + date), all posts visible */
main > section.magazine-section{padding-top:16px;padding-bottom:16px}
main > section.magazine-section .container > div:first-child{flex-wrap:nowrap;align-items:center;margin-bottom:14px}
main > section.magazine-section .container > div:first-child .w-16{width:44px;height:44px;border-radius:14px}
main > section.magazine-section .container > div:first-child .gap-6{gap:10px}
main > section.magazine-section h2{font-size:22px}
main > section.magazine-section .container > div:first-child > a{padding:9px 12px;flex-shrink:0}
main > section.magazine-section .magazineSwiper .swiper-wrapper{transform:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
main > section.magazine-section .magazineSwiper .swiper-slide{width:auto!important;margin:0!important}
main > section.magazine-section .magazineSwiper{overflow:hidden!important}
main > section.magazine-section .swiper-slide{padding:0!important}
main > section.magazine-section .swiper-slide .pt-10{padding-top:0}
main > section.magazine-section .swiper-slide .rounded-\[2\.8rem\]{border-radius:18px}
main > section.magazine-section .swiper-slide .p-5{padding:8px}
main > section.magazine-section .swiper-slide .-top-4{top:14px;right:14px}
main > section.magazine-section .swiper-slide .-top-4 > div{padding:3px 8px;font-size:10px;border-radius:8px}
main > section.magazine-section .swiper-slide .h-48{height:100px;margin-bottom:8px;border-radius:12px}
main > section.magazine-section .swiper-slide .mb-4{margin-bottom:4px;gap:6px;font-size:10.5px;flex-wrap:wrap}
main > section.magazine-section .swiper-slide h3{font-size:12.5px;margin-bottom:6px;height:auto;line-height:1.6}
main > section.magazine-section .swiper-slide .pt-5{padding-top:6px}
main > section.magazine-section .swiper-slide .w-10{width:30px;height:30px}
main > section.magazine-section .swiper-nav-prev,main > section.magazine-section .swiper-nav-next{display:none}
/* Home – magazine: hide "Latest tech news" subtitle on mobile */
main > section.magazine-section h2 + p{display:none}
/* Home – newest: equal-height cards, price + buttons pinned to card bottom in the same order */
main > section:has(#product-grid) #product-grid{align-items:stretch}
main > section:has(#product-grid) #product-grid .product-card{display:flex;flex-direction:column}
/* .hidden must beat the rule above — otherwise filtered-out cards keep flex width and the strip looks broken with 1–2 products */
main > section:has(#product-grid) #product-grid .product-card.hidden{display:none!important}
main > section:has(#product-grid) #product-grid .product-card > div{flex:1 1 auto;display:flex;flex-direction:column}
main > section:has(#product-grid) #product-grid .product-card > div > div:last-child{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
main > section:has(#product-grid) #product-grid .product-card .mt-auto{margin-top:auto;display:flex;flex-direction:column;gap:8px}
main > section:has(#product-grid) #product-grid .product-card .mt-auto > div{margin-bottom:0;min-height:40px;display:flex;flex-direction:column;justify-content:flex-end}
main > section:has(#product-grid) #product-grid .product-card .mt-auto > button{order:99;width:100%}

/* ===== Mobile phase 3: product list + product details ===== */
/* list-header – B */
main:has(#filter-offcanvas) > section{padding-top:12px}
main:has(#filter-offcanvas) .mb-12{margin-bottom:14px}
main:has(#filter-offcanvas) .mb-12 > nav{background:none;border:0;padding:0;font-size:12px;margin-bottom:8px;gap:4px}
main:has(#filter-offcanvas) .mb-12 > nav a{padding:8px 4px}
main:has(#filter-offcanvas) .mb-12 > div > div.relative{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
main:has(#filter-offcanvas) .mb-12 > div > div.relative > div.absolute{display:none}
main:has(#filter-offcanvas) .mb-12 > div > div.relative h1{font-size:24px}
main:has(#filter-offcanvas) .mb-12 > div > div.relative > div.flex{margin:0}
main:has(#filter-offcanvas) .mb-12 > div > div.relative p{font-size:12px;letter-spacing:0;white-space:nowrap}
main:has(#filter-offcanvas) .mb-12 > div{gap:12px}
/* list-cards – A */
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group > div:last-child{height:100%;display:flex;flex-direction:column}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group h3{height:auto}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group > div:last-child > .mt-auto{margin-top:auto}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group{padding-top:14px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group > div:first-child{border-radius:20px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group > div:last-child{padding:10px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .-top-6{top:-6px;right:-4px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .w-12.h-12{width:34px;height:34px;font-size:10px;border-radius:10px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .min-h-\[180px\]{min-height:0;margin-bottom:8px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .product-photo-frame{height:120px;margin-bottom:8px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .product-photo-frame .product-photo{max-height:100%;max-width:100%}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group h3{font-size:12.5px;line-height:1.6;margin-bottom:8px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group > div:last-child > .mt-auto{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .text-2xl{font-size:15px}
main:has(#filter-offcanvas) .lg\:col-span-3 > .grid > div.group .mt-auto > button{width:100%;height:38px;border-radius:12px}
/* list-filterpanel – B */
#filter-offcanvas{top:auto;bottom:0;height:88vh;width:100%;max-width:none;border-radius:28px 28px 0 0;background:#fff}
#filter-offcanvas > div > div:first-child{padding:14px 18px}
#filter-offcanvas > div > div:last-child{padding:12px 14px}
#filter-offcanvas > div > div:last-child > * + *{margin-top:12px!important}
#filter-offcanvas .p-7{padding:16px}
#filter-offcanvas input[type=checkbox]{width:22px;height:22px}
#filter-offcanvas .range-input{height:22px;top:-8px}
/* pd-gallery – C */
section.product-hero .lg\:col-span-5{gap:6px}
section.product-hero .lg\:col-span-5 > div:first-child{border-radius:28px;padding:6px}
section.product-hero .lg\:col-span-5 .productMainSwiper{height:260px!important}
section.product-hero .lg\:col-span-5 .productMainSwiper .swiper-slide,
section.product-hero .lg\:col-span-5 .productMainSwiper .swiper-zoom-container{height:100%}
section.product-hero .lg\:col-span-5 .productMainSwiper img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
/* gallery arrows: vertically centred on the main image at the edges (RTL: next on the left, prev on the right), always visible on touch */
section.product-hero .lg\:col-span-5 .custom-next,section.product-hero .lg\:col-span-5 .custom-prev{top:50%;bottom:auto;transform:none;translate:0 -50%;width:38px;height:38px;border-radius:14px;opacity:1;background:rgba(255,255,255,.9);box-shadow:0 6px 16px -6px rgba(0,0,0,.25)}
section.product-hero .lg\:col-span-5 .custom-next{left:10px;right:auto}
section.product-hero .lg\:col-span-5 .custom-prev{right:10px;left:auto}
section.product-hero .lg\:col-span-5 .custom-next svg,section.product-hero .lg\:col-span-5 .custom-prev svg{width:20px;height:20px}
section.product-hero .lg\:col-span-5 .swiper-button-disabled{opacity:.35;pointer-events:none}
section.product-hero .lg\:col-span-5 > div:last-child{max-width:240px;margin-top:4px!important}
/* pd-header – A */
section.product-hero{padding-top:12px}
section.product-hero .container > nav{margin-bottom:12px;font-size:12px;white-space:nowrap;overflow:hidden}
section.product-hero .container > nav a{padding:6px 2px}
section.product-hero .container > nav span{overflow:hidden;text-overflow:ellipsis}
section.product-hero .lg\:col-span-7 > .space-y-3 h1{font-size:20px;line-height:1.7}
section.product-hero .lg\:col-span-7 > .space-y-3 span.text-\[10px\]{font-size:11.5px}
section.product-hero .lg\:col-span-7 > .space-y-3 .gap-6{gap:8px;flex-wrap:wrap}
section.product-hero .lg\:col-span-7 > .space-y-3 .gap-6 > div.w-\[1px\]{display:none}
section.product-hero .lg\:col-span-7 > .space-y-3 .gap-6 > div,section.product-hero .lg\:col-span-7 > .space-y-3 .gap-6 > button{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:8px 12px;font-size:12px}
/* pd-variants – A */
section.product-hero .xl\:col-span-7 > * + *{margin-top:16px!important}
section.product-hero .xl\:col-span-7 p.text-\[13px\]{font-size:13.5px}
section.product-hero .xl\:col-span-7 button[data-size]{min-height:40px;padding:8px 14px;font-size:12.5px}
section.product-hero .xl\:col-span-7 .grid-cols-2 > div{padding:10px;border-radius:14px}
section.product-hero .xl\:col-span-7 .grid-cols-2 span{font-size:12px;line-height:1.6}
section.product-hero .xl\:col-span-7 .grid-cols-2 span:first-child{font-size:11.5px}
/* pd-buybox – C */
body:has(section.product-hero){padding-bottom:150px}
section.product-hero .xl\:col-span-5 > div{border-radius:22px;padding:14px}
section.product-hero .xl\:col-span-5 #product-final-price{font-size:24px}
section.product-hero .xl\:col-span-5 #add-to-cart-btn{position:fixed;left:12px;right:12px;width:auto;bottom:92px;z-index:61;height:50px;margin:0!important;box-shadow:0 12px 24px -8px rgba(37,99,235,.55)}
/* pd-tabs – B */
div:has(> #btn-overview){display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px;border-radius:18px}
div:has(> #btn-overview) > button{width:auto;padding:10px 6px;font-size:12.5px;justify-content:center}
/* pd-overview – B */
#tab-overview .space-y-16 > * + *{margin-top:20px!important}
#tab-overview .grid{gap:14px}
#tab-overview .order-2{order:1}
#tab-overview .order-1{order:2}
#tab-overview .overview-image img{height:auto;max-height:320px;width:100%;aspect-ratio:auto;object-fit:contain;border-radius:20px;background:rgba(255,255,255,.4)}
#tab-overview h3{font-size:18px}
#tab-overview .text-sm{font-size:14px;line-height:2}
#tab-overview .flex-wrap.justify-center{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
#tab-overview .flex-wrap.justify-center span{font-size:12.5px}
/* pd-specs – A */
#tab-specs > div{padding:0}
#tab-specs .p-8{padding:14px;border-radius:20px}
#tab-specs .grid{gap:0}
#tab-specs .grid > div{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0}
#tab-specs .grid span:first-child{font-size:12px;letter-spacing:0}
#tab-specs .grid span:last-child{font-size:13px;line-height:1.7}
/* list-filterbtn – F */
main:has(#filter-offcanvas) .fixed.bottom-28{bottom:100px;right:16px}
main:has(#filter-offcanvas) .fixed.bottom-28 button{position:relative;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:3px solid #fff;box-shadow:0 12px 26px -8px rgba(29,78,216,.65)}
main:has(#filter-offcanvas) .fixed.bottom-28 button::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#f97316;border:2px solid #fff}

/* ===== Mobile phase 4: blog list + blog post ===== */
/* bl-hero – A */
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16{gap:12px;margin-bottom:28px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-8{height:340px;border-radius:28px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-8 .p-10{padding:20px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-8 h2{font-size:22px;margin-bottom:8px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-8 p{font-size:12px;margin-bottom:10px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4{gap:12px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 > a{height:120px;border-radius:22px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 > a > div:first-child{width:34%}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 > a > div:last-child{padding:12px 14px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 h3{font-size:13.5px;line-height:1.7}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 .mb-4{margin-bottom:6px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 .mt-4{margin-top:4px}
main:has(.blog-tabs) .grid.lg\:grid-cols-12.mb-16 > .lg\:col-span-4 .w-10.h-10{display:none}
/* bl-tabs – A */
main:has(.blog-tabs) .mb-12:has(> .blog-tabs){gap:14px;margin-bottom:18px;padding-bottom:14px;align-items:stretch}
main:has(.blog-tabs) .mb-12:has(> .blog-tabs) h2{font-size:22px}
main:has(.blog-tabs) .mb-12:has(> .blog-tabs) .blog-tabs{overflow-x:auto;scrollbar-width:none;width:100%;border-radius:18px;padding:5px;scroll-snap-type:x proximity}
main:has(.blog-tabs) .mb-12:has(> .blog-tabs) .blog-tabs::-webkit-scrollbar{display:none}
main:has(.blog-tabs) .mb-12:has(> .blog-tabs) .blog-tabs > button{flex-shrink:0;padding:9px 14px;scroll-snap-align:start}
/* bl-cards – C */
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10{gap:14px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 > div > a > div{display:flex;flex-direction:column}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 > div > a > div > div.relative.p-5{flex:1 1 auto}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 > div > a > div > div.relative.p-5 > .mt-auto{margin-top:auto}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 > div > a > div{padding-top:0}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 > div > a > div > div:first-child{border-radius:26px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .p-5{padding:10px 10px 12px;transform:none!important}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .-top-4{top:20px;right:20px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .-top-4 > div{padding:4px 10px;font-size:10px;border-radius:10px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .h-48{height:170px;margin-bottom:10px;border-radius:20px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .mb-4{margin-bottom:6px;padding:0 4px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 h3{font-size:15px;height:auto;margin-bottom:10px;padding:0 4px}
main:has(.blog-tabs) .grid.lg\:grid-cols-4.gap-10 .pt-5{padding:10px 4px 0}
/* bl-more – A */
main:has(.blog-tabs) .mt-24:has(#load-more-posts){margin-top:24px}
main:has(.blog-tabs) .mt-24:has(#load-more-posts) #load-more-posts{display:flex;width:100%;height:56px;padding:0 18px;border-radius:18px;gap:10px}
main:has(.blog-tabs) .mt-24:has(#load-more-posts) #load-more-posts > span{font-size:14px}
main:has(.blog-tabs) .mt-24:has(#load-more-posts) #load-more-posts > div.relative{width:34px;height:34px;border-radius:12px}
main:has(.blog-tabs) .mt-24:has(#load-more-posts) p{margin-top:10px;letter-spacing:0;font-size:11px}
/* bl-picks – C */
main:has(.blog-tabs) > section.container > div:first-child{flex-direction:row;padding-bottom:12px;margin-bottom:12px}
main:has(.blog-tabs) > section.container h2{font-size:22px}
main:has(.blog-tabs) > section.container > .grid{gap:10px}
main:has(.blog-tabs) > section.container > .grid > a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:18px}
main:has(.blog-tabs) > section.container > .grid > a > div:first-child{aspect-ratio:auto;width:84px;height:72px;flex-shrink:0;margin:0;border-radius:14px}
main:has(.blog-tabs) > section.container > .grid > a > div:first-child > div{display:none}
main:has(.blog-tabs) > section.container > .grid > a > div:last-child{padding:0;flex:1}
main:has(.blog-tabs) > section.container h3{font-size:13px;line-height:1.7;margin-bottom:6px}
/* po-crumb – C */
main:has(.blog-article) section > nav{margin-bottom:16px;flex-wrap:wrap;gap:6px 8px;font-size:11.5px}
main:has(.blog-article) section > nav > span:last-child{flex-basis:100%;max-width:none;white-space:normal;font-size:12.5px;line-height:1.7}
main:has(.blog-article) section > nav > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
main:has(.blog-article) section > nav > svg:nth-last-child(2){display:none}
/* po-header – A */
main:has(.blog-article) section > div.mb-16{margin-bottom:20px;text-align:right}
main:has(.blog-article) section > div.mb-16 > div.relative{align-items:stretch;gap:14px}
main:has(.blog-article) section > div.mb-16 > div.relative > div:first-child{gap:8px;flex-wrap:wrap}
main:has(.blog-article) section > div.mb-16 h1{font-size:24px;line-height:1.6}
main:has(.blog-article) section > div.mb-16 > div.relative > div:last-child{border-radius:20px}
main:has(.blog-article) section > div.mb-16 > div.relative > div:last-child > div{border-radius:18px;padding:8px 10px}
/* po-cover – A */
main:has(.blog-article) .min-w-0 > div.relative.group{border-radius:24px;border-width:2px;margin-bottom:20px}
main:has(.blog-article) .min-w-0 > div.relative.group img{height:auto;aspect-ratio:16/10}
/* po-tags – smaller tags (design kept) */
main:has(.blog-article) .blog-article .not-prose .blog-tag{padding:6px 12px;font-size:10.5px;border-radius:12px}
main:has(.blog-article) .blog-article .not-prose > div{gap:8px}
/* fix: sticky add-to-cart must escape the hero stacking context (container z-10) so footer/tabs never paint over it */
section.product-hero > .container.relative.z-10{z-index:auto}
section.product-hero .xl\:col-span-5 #add-to-cart-btn{z-index:90}
/* ===== Phase 5: cart + user panel (mobile) ===== */
/* p5 cart-steps-A */
main > section.py-16 > div.max-w-4xl{margin-bottom:20px}
main > section.py-16 > div.max-w-4xl .w-14.h-14{width:40px;height:40px;border-radius:14px}
main > section.py-16 > div.max-w-4xl .w-14.h-14 svg{width:20px;height:20px}
main > section.py-16 > div.max-w-4xl > div > div.relative{gap:6px}
main > section.py-16 > div.max-w-4xl span,main > section.py-16 > div.max-w-4xl p{font-size:10px}
/* p5 cart-empty-A */
main section:has(.w-44.h-44){padding-top:24px;padding-bottom:24px}
main section:has(.w-44.h-44) .w-44.h-44{width:120px;height:120px;border-radius:32px}
main section:has(.w-44.h-44) .w-44.h-44 > svg{width:56px;height:56px}
main section:has(.w-44.h-44) h1{font-size:24px}
main section:has(.w-44.h-44) p{font-size:13px}
main section:has(.w-44.h-44) a{width:100%;justify-content:center}
/* p5 up-menubtn-A */
body:has(#filter-offcanvas):has(main section.container > div.flex > div.fixed.bottom-28){padding-bottom:156px}
main:has(#filter-offcanvas) section.container > div.flex > div.fixed.bottom-28{bottom:96px;right:14px;left:auto}
main:has(#filter-offcanvas) section.container > div.flex > div.fixed.bottom-28 button{width:48px;height:48px;border-radius:16px;background:#2563eb;color:#fff;border:0;box-shadow:0 10px 22px -8px rgba(37,99,235,.6)}
/* p5 dash-tiles-A */
main[data-enhance-nav] section.container > div.flex > main.flex-1{gap:0}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > * + *{margin-top:16px!important}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid:first-child > div{padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid:first-child .mb-8{margin-bottom:12px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid.grid-cols-2{gap:10px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid.grid-cols-2 > div{padding:14px;border-radius:22px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid.grid-cols-2 > div > div.relative{flex-direction:row;align-items:center;gap:10px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > .grid.grid-cols-2 .w-14.h-14{width:40px;height:40px;border-radius:14px;flex-shrink:0}
/* p5 orders-cards-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div:first-child{margin-bottom:12px;gap:10px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) [role=tablist]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) [role=tablist] button{flex-shrink:0;padding:8px 14px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div{padding:14px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div > div.relative{display:flex;flex-direction:column}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div .pb-6{padding-bottom:12px;gap:10px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div .pb-6 > div:first-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div .py-6{padding:12px 0 0;gap:10px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div.space-y-6:has(> div.space-y-6) > div.space-y-6 > div .py-6 > div:last-child{margin-right:auto}
/* p5 order-delivery-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) > div:first-child{padding:16px;border-radius:24px;gap:12px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) > div:first-child h2{font-size:20px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 + div > div{padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 + div .space-y-6 > * + *{margin-top:10px!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 + div .p-4{padding:12px}
/* p5 wallet-balance-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) > section:first-child{padding:18px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) > section:first-child > div.relative{min-height:0}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) > section:first-child a{display:flex;justify-content:center;width:100%}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) > section:first-child > div.relative > div:first-child{flex:1}
/* p5 charge-form-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(#quick-amount-chips){padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(#quick-amount-chips) > div.relative.mb-10{margin-bottom:16px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(#quick-amount-chips) .space-y-8 > * + *{margin-top:16px!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(#quick-amount-chips) input{height:56px;font-size:18px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(#quick-amount-chips) #submit-topup{padding:16px 0;border-radius:18px}
/* p5 addresses-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]){padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]) > div.relative.mb-8{margin-bottom:14px;padding-bottom:12px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]) > div.relative.mb-8 > a{width:100%;justify-content:center}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]) > .grid{gap:10px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]) > .grid > div{padding:14px;border-radius:20px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(a[href="/user-panel/addresses/create"]) > .grid > div > .flex.flex-col.h-full > :last-child{margin-top:auto}
/* p5 address-form-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address){padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) form > * + *{margin-top:14px!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) .grid{gap:14px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) input,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) select{min-height:48px;border-radius:16px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) textarea{border-radius:16px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) form > div:last-child{flex-direction:column-reverse;align-items:stretch;gap:8px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#save-address) form > div:last-child button{width:100%}
/* p5 ticket-chat-A */
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(.grid.grid-cols-2){padding:14px;border-radius:24px;margin-bottom:12px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(.grid.grid-cols-2) .grid{gap:8px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(.grid.grid-cols-2) .grid > div{padding:10px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(> div.flex-1.overflow-y-auto){border-radius:24px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(> div.flex-1.overflow-y-auto) > div.flex-1{padding:12px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 > div:has(> div.flex-1.overflow-y-auto) > div.flex-1 > div > div{max-width:88%!important;font-size:13px;line-height:1.9;padding:12px}
/* p5 edit-info-A */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#profile-tab) #profile-tab > *{padding:16px!important;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#profile-tab) input{min-height:48px;border-radius:16px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas):has(#profile-tab) #profile-tab button{width:100%;justify-content:center}
/* p5 dash-orders-C: row cards; line 1 = id, date, status at end; line 2 = amount (right) + view icon (left) */
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]){overflow-x:visible!important}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) table,main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody,main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) thead{display:block;width:100%!important;min-width:0!important}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) thead tr{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 12px;border-radius:14px;background:#eff6ff;margin-bottom:8px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) thead th{padding:0!important;font-size:10px;white-space:nowrap}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"id date st" "amt amt op";align-items:center;column-gap:10px;row-gap:12px;padding:12px;margin-bottom:10px;border-radius:18px;background:#fff;border:1px solid #eef2f7;box-shadow:0 6px 16px -12px rgba(0,0,0,.25)}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td{display:block;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:12px;white-space:normal!important}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(1){grid-area:id}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(2){grid-area:date}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(3){grid-area:st;justify-self:end}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(4){grid-area:amt;justify-self:start;text-align:right!important}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(5){grid-area:op;justify-self:end;width:auto;max-width:100%}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(5) > div{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px;width:max-content;max-width:100%}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(4){display:flex!important;align-items:center;min-height:36px}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(5) a{width:auto!important;min-width:36px;height:36px;padding:0 14px;flex:0 0 auto;white-space:nowrap;line-height:36px;overflow:visible;box-sizing:border-box}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td:nth-child(5) a.w-9{padding:0;width:36px!important;line-height:0}
main[data-enhance-nav] section.container > div.flex > main.flex-1 .overflow-x-auto.scrollbar-hide:has(a[href^="/user-panel/orders/"]) tbody td[colspan]{grid-column:1 / -1;grid-area:auto}
/* p5 order-items-C: header hidden, product full row, qty + unit price on one line at the two edges, total bottom-centre */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto{overflow-x:visible!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto table,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody{display:block;width:100%!important;min-width:0!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto thead{display:none}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody tr{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"p p" "q u" "t t";align-items:center;gap:10px 12px;padding:12px;margin:0 8px 10px;border-radius:18px;background:#fff;border:1px solid #eef2f7;box-shadow:0 6px 16px -12px rgba(0,0,0,.25)}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td{display:block;padding:0!important;border:0!important;font-size:12px;white-space:normal!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td:nth-child(1){grid-area:p}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td:nth-child(2){grid-area:q;justify-self:start;text-align:right!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td:nth-child(3){grid-area:u;justify-self:end;text-align:left!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td:nth-child(4){grid-area:t;justify-self:center;text-align:center!important;padding-top:8px!important;border-top:1px dashed #e5e7eb!important;width:100%}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(.lg\:col-span-2 table) .lg\:col-span-2 .overflow-x-auto tbody td:nth-child(4) > div{align-items:center}
/* p5 wallet-tx-C: row cards, type + amount on line 1, description and date span the full card width */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto{overflow-x:visible!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto table,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto thead{display:block;width:100%!important;min-width:0!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto thead tr{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 12px;border-radius:14px;background:#eff6ff;margin:0 8px 8px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto thead th{padding:0!important;font-size:10px;white-space:nowrap}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ty am" "de de" "dt dt";align-items:center;gap:8px 12px;padding:12px;margin:0 8px 10px;border-radius:18px;background:#fff;border:1px solid #eef2f7;box-shadow:0 6px 16px -12px rgba(0,0,0,.25)}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody td{display:block;width:100%;padding:0!important;border:0!important;font-size:12px;white-space:normal!important;min-width:0}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody td:nth-child(1){grid-area:ty}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody td:nth-child(2){grid-area:de;line-height:1.8}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody td:nth-child(3){grid-area:dt;text-align:right}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(> section.bg-gradient-to-br) .overflow-x-auto tbody td:nth-child(4){grid-area:am;width:auto}
/* p5 tickets-list-C: ticket rows as full-width cards */
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) > div:first-child{padding:16px;border-radius:24px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) > div:nth-child(2){gap:10px;padding:0}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) > div:nth-child(2) > div:first-child{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) > div:nth-child(2) > div:first-child button{flex-shrink:0;white-space:nowrap}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) > div:last-child{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) .overflow-x-auto{overflow-x:visible!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) table,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) thead{display:block;width:100%}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) thead tr{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 12px;border-radius:14px;background:#eff6ff;margin-bottom:8px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) thead th{padding:0!important;font-size:10px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:12px;margin-bottom:10px;border-radius:18px;background:#fff;border:1px solid #eef2f7}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody td{display:block;padding:0!important;border:0!important;font-size:12px}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody td:first-child{grid-column:1 / -1}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) table,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody,main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) thead{width:100%!important;min-width:0!important}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody tr{width:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody td{min-width:0;width:100%}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody td:last-child > div{align-items:flex-start}
main[data-enhance-nav] section.container > div.flex > :not(aside):not(.fixed):not(#filter-overlay):not(#filter-offcanvas) > div:has(table):has(a[href="/user-panel/tickets/create"]) tbody td:last-child button{opacity:1!important}
/* p5 fix: decorative blur blob in the cart summary made the page scroll sideways */
main > section.py-16:has(#checkout-btn){overflow-x:clip}
}

/* not-found – A: centred card, big gradient 404, stacked actions (page is new markup, so rules are not mobile-only) */
.nf-a{padding:24px 12px 32px;display:flex;justify-content:center}
.nf-a__card{width:100%;max-width:480px;background:#fff;border:1px solid #eef2f7;border-radius:24px;box-shadow:0 12px 30px -18px rgba(0,0,0,.25);padding:28px 20px;text-align:center}
.nf-a__code{font-size:84px;line-height:1;font-weight:900;background:linear-gradient(135deg,#2563eb,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.nf-a__title{font-size:18px;font-weight:900;color:#111827;margin-bottom:8px}
.nf-a__caption{font-size:13px;line-height:1.9;color:#6b7280;margin-bottom:22px}
.nf-a__actions{display:flex;flex-direction:column;gap:10px}
.nf-a__btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:16px;font-size:14px;font-weight:800;background:#eef2ff;color:#2563eb}
.nf-a__btn--primary{background:#2563eb;color:#fff;box-shadow:0 10px 20px -10px rgba(37,99,235,.6)}
.dark .nf-a__card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.dark .nf-a__title{color:#fff}

/* faq – A: compact accordion cards (smaller padding/radius, 14px questions), English subtitle hidden (mobile only) */
@media (max-width: 767px) {
main:has(.faq-item) > section.container{margin-top:0;margin-bottom:24px;padding-top:24px;padding-bottom:0}
main:has(.faq-item) > section.container .max-w-4xl > .flex.items-center.gap-4{padding:0 4px;margin-bottom:14px;gap:10px}
main:has(.faq-item) > section.container .max-w-4xl > .flex.items-center.gap-4 > .w-2{width:6px;height:28px}
main:has(.faq-item) h1.text-3xl{font-size:21px}
main:has(.faq-item) h1.text-3xl + p{display:none}
main:has(.faq-item) .max-w-4xl > .space-y-6{display:flex;flex-direction:column;gap:10px}
main:has(.faq-item) .max-w-4xl > .space-y-6 > *{margin:0!important}
main:has(.faq-item) .faq-item{border-radius:18px;background:#fff;border-color:#eef2f7;box-shadow:0 6px 18px -14px rgba(0,0,0,.3)}
main:has(.faq-item) .faq-trigger{padding:14px 16px;gap:12px}
main:has(.faq-item) .faq-trigger > span{font-size:14px;line-height:1.9}
main:has(.faq-item) .faq-trigger > div{width:32px;height:32px;flex-shrink:0;border-radius:11px}
main:has(.faq-item) .faq-trigger > div svg{width:16px;height:16px}
main:has(.faq-item) .faq-content > div{padding:0 16px 16px}
main:has(.faq-item) .faq-content > div > div{margin-bottom:12px}
main:has(.faq-item) .faq-content p{font-size:13px;line-height:2}
}
/* not-found – A: wide screens – roomier card, larger numerals, actions side by side */
@media (min-width: 768px) {
.nf-a{padding:72px 24px 96px}
.nf-a__card{max-width:640px;padding:56px 64px;border-radius:32px}
.nf-a__code{font-size:140px;margin-bottom:20px}
.nf-a__title{font-size:26px;margin-bottom:12px}
.nf-a__caption{font-size:15px;margin-bottom:32px}
.nf-a__actions{flex-direction:row;justify-content:center;gap:12px}
.nf-a__btn{height:52px;min-width:180px;padding:0 28px;transition:background .2s,color .2s}
.nf-a__btn:hover{background:#dbeafe}
.nf-a__btn--primary:hover{background:#1d4ed8;color:#fff}
}

/* quick-view – B: compact centred card; 112px image beside the title, specs as a swipeable chip row, price and button on one row (mobile only) */
@media (max-width: 767px) {
#quick-view-modal > div{width:94%;max-height:86dvh;border-radius:24px;padding:14px;background:#fff}
#quick-view-modal .close-modal-btn{top:10px;left:10px;padding:7px;border-radius:12px;background:#f1f5f9}
#quick-view-modal .close-modal-btn svg{width:18px;height:18px}
#quick-view-modal .grid.lg\:grid-cols-2{grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start}
#quick-view-modal .grid.lg\:grid-cols-2 > div{display:contents}
#quick-view-modal h3.text-3xl{font-size:18px;line-height:1.6;margin-bottom:6px;padding-left:0}
#quick-view-modal h3.text-3xl + div{gap:10px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-6.pl-6{padding-left:0;margin-bottom:0}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-6.p-1{margin-bottom:0;border-radius:16px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-6.p-1 select{padding:10px 12px;font-size:13px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-8{margin-bottom:0}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-8 > span{font-size:13px;margin-bottom:8px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-8 > .flex{flex-wrap:wrap;gap:8px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-8 button{padding:8px 14px;font-size:12px;border-radius:12px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:first-child > .relative.group{grid-column:1;grid-row:1;width:112px}
#quick-view-modal .mainGallerySwiper{border-radius:16px}
#quick-view-modal .mainGallerySwiper img{height:112px;width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
#quick-view-modal .custom-next,#quick-view-modal .custom-prev,#quick-view-modal .thumbSwiper{display:none}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mb-6.pl-6{grid-column:2;grid-row:1;padding-top:30px}
#quick-view-modal h3.text-3xl{font-size:14.5px;line-height:1.8}
#quick-view-modal h3.text-3xl + div{flex-wrap:wrap;gap:6px;font-size:11px}
#quick-view-modal .grid.grid-cols-3{grid-column:1 / -1;grid-row:2;display:flex;overflow-x:auto;gap:8px;margin:0 -14px;padding:0 14px 2px;scrollbar-width:none}
#quick-view-modal .grid.grid-cols-3 > div{flex:0 0 auto;max-width:72%;padding:8px 12px;border-radius:14px;text-align:right}
#quick-view-modal .grid.grid-cols-3 > div > span:first-child{margin-bottom:2px}
#quick-view-modal .grid.grid-cols-3 > div > span:last-child{font-size:11.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > *{grid-column:1 / -1}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mt-auto{margin-top:4px;padding:12px;border-radius:18px;display:flex;align-items:center;gap:10px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mt-auto .text-4xl{font-size:19px}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mt-auto button{margin-top:0;flex:1;padding:12px 8px;border-radius:14px;font-size:13px;gap:6px;white-space:nowrap;min-width:0}
#quick-view-modal .grid.lg\:grid-cols-2 > div:last-child > .mt-auto button svg{width:18px;height:18px}
}

/* payment-result – A: receipt card; smaller status icon, details as a dashed receipt list, primary button full width with the two secondary links side by side (mobile only) */
@media (max-width: 767px) {
main > section.py-16:has(> .max-w-4xl.py-12 a[href="/user-panel/orders"]){padding:0}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]){padding:16px 12px 8px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > p.font-bold.text-sm{letter-spacing:0;text-transform:none}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div{border-radius:24px;padding:22px 16px 16px;background:#fff;border-color:#eef2f7;box-shadow:0 14px 34px -22px rgba(0,0,0,.35)}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.relative.mb-8{margin-bottom:12px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.relative.mb-8 > div.relative{width:64px;height:64px;border-width:3px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.relative.mb-8 svg{width:32px;height:32px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > h2{font-size:20px;line-height:1.6;margin-bottom:4px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > p.font-bold.text-sm{font-size:12.5px;margin-bottom:16px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.grid{gap:0;margin-bottom:14px;border-top:1.5px dashed #e2e8f0}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.grid > div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 4px;border:0;border-bottom:1.5px dashed #e2e8f0;border-radius:0;background:transparent}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.grid > div > span:first-child{margin:0;font-size:12px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.grid > div > span:last-child,main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.grid > div > div > span:first-child{font-size:15px;letter-spacing:.5px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.justify-between{flex-direction:row;align-items:center;gap:10px;padding:12px;margin-bottom:16px;border-radius:18px;text-align:right}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.justify-between > div{gap:10px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.justify-between > div > div:first-child{width:40px;height:40px;flex-shrink:0;border-radius:13px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.w-full.justify-between > a{flex-shrink:0;font-size:11px;text-underline-offset:5px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.items-center.gap-2.mb-10{margin-bottom:16px;align-items:flex-start;text-align:right}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.items-center.gap-2.mb-10 span{font-size:11.5px;line-height:1.9}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.flex-col.gap-4:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.flex-col.gap-4:last-child > a{height:48px;padding:0 8px;border-radius:16px;font-size:13px}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.flex-col.gap-4:last-child > a:first-child{grid-column:1 / -1}
main > section.py-16 > .max-w-4xl.py-12:has(a[href="/user-panel/orders"]) > div > div.relative.flex > div.flex.flex-col.gap-4:last-child > a:first-child:nth-last-child(2) ~ a{grid-column:1 / -1}
}

/* product-reviews – A: compact rating summary row, slim moderation note, tighter form and comment cards (mobile only) */
@media (max-width: 767px) {
div.p-8:has(> #tab-reviews.block){padding:14px 10px}
#tab-reviews{padding-bottom:24px}
#tab-reviews > div.grid{gap:14px}
#tab-reviews > div.grid > div.lg\:col-span-4,#tab-reviews > div.grid > div.lg\:col-span-8{display:flex;flex-direction:column;gap:12px}
#tab-reviews > div.grid > div.lg\:col-span-4 > *,#tab-reviews > div.grid > div.lg\:col-span-8 > *,#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > *{margin:0!important}
#tab-reviews > div.grid > div.lg\:col-span-8 > section{padding:16px;border-radius:22px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section > div:first-child{margin-bottom:12px;gap:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section > div:first-child > span{width:6px;height:22px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section h3{font-size:15px;letter-spacing:0}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form{display:flex;flex-direction:column;gap:14px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form > *{margin:0!important}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form .space-y-4 > :not(:last-child){margin-bottom:8px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form label{font-size:12px;letter-spacing:0;text-transform:none}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form .flex-row-reverse svg{width:30px;height:30px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form .grid{gap:14px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form input{padding:12px 54px 12px 14px;font-size:13px;border-radius:14px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form .relative.group button{width:36px;height:36px;left:8px;border-radius:11px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form .relative.group button svg{width:18px;height:18px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section form textarea{padding:12px 14px;font-size:13px;border-radius:16px}
#tab-reviews > div.grid > div.lg\:col-span-8 > section #submit-comment{padding:14px 0;border-radius:16px;letter-spacing:0;font-size:14px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8{display:flex;flex-direction:column;gap:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child > div:first-child{gap:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child img{width:40px;height:40px;border-radius:12px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child p.text-\[14px\]{font-size:13px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child p.text-\[12px\]{font-size:11px;margin-top:0}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div:first-child > div.flex.gap-1 svg{width:14px;height:14px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > p{margin-top:10px;font-size:13px;line-height:2.1}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.flex-wrap{margin-top:10px;gap:6px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.flex-wrap > div{padding:4px 10px;border-radius:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.flex-wrap span.text-\[12px\]{font-size:11px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.pt-6{margin-top:10px;padding-top:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.pt-6 span,#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-8.pt-6 > button:last-child{font-size:11.5px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-6.mr-6{margin:10px 10px 0 0;padding:12px;border-radius:16px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-6.mr-6 img{width:32px;height:32px;border-radius:10px}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group > div.mt-6.mr-6 > p{margin-top:8px;font-size:12.5px;line-height:2}
#load-more-comment{padding:13px 26px;border-radius:16px}
#load-more-comment span{font-size:13px;letter-spacing:0}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child{padding:14px 16px;border-radius:22px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.absolute{padding:3px 12px;border-radius:0 0 14px 0}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.absolute span{font-size:10px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n l" "n b" "n c";column-gap:16px;row-gap:4px;align-items:center;padding-top:14px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col > span{grid-area:l;margin:0;font-size:12px;letter-spacing:0}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col > h4{grid-area:n;margin:0;font-size:46px;line-height:1}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col > div.flex{grid-area:b;margin:0;gap:4px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col > div.flex > div{flex:1;width:auto;height:6px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div:first-child > div.flex-col > p{grid-area:c;font-size:11.5px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div{padding:12px 14px;border-radius:18px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div > div.relative{gap:12px;align-items:center}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div > div.relative > div:first-child{width:40px;height:40px;border-radius:12px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div > div.relative > div:first-child svg{width:20px;height:20px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div > div.relative > div.space-y-2{padding-top:0}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div > div.relative > div.space-y-2 > :not(:last-child){margin-bottom:2px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div h5{font-size:13px}
#tab-reviews > div.grid > div.lg\:col-span-4 > div.space-y-6 > div p{font-size:11px;line-height:1.9}
#tab-reviews > div.grid > div.lg\:col-span-8 > div.space-y-8 > div.group{padding:14px;border-radius:20px}
}

/* product-qa – A: compact thread; small Q badge beside the question, answer card with a blue accent edge, tighter form (mobile only) */
@media (max-width: 767px) {
div.p-8:has(> #tab-faq.block){padding:14px 10px}
#tab-faq{padding-bottom:24px}
#tab-faq > div.w-full{display:flex;flex-direction:column;gap:16px}
#tab-faq > div.w-full > *{margin:0!important}
#tab-faq > div.w-full > section{padding:16px;border-radius:22px;border-width:1px}
#tab-faq > div.w-full > section form > div.mb-12{margin-bottom:12px;gap:6px}
#tab-faq > div.w-full > section h3{font-size:16px}
#tab-faq > div.w-full > section h3 + p, #tab-faq > div.w-full > section .space-y-2 > p{font-size:12px;margin-right:0}
#tab-faq > div.w-full > section .space-y-2 > div > span{width:6px;height:22px}
#tab-faq > div.w-full > section form .space-y-6 > :not(:last-child){margin-bottom:10px}
#tab-faq > div.w-full > section textarea{padding:12px 14px;font-size:13px;border-radius:16px;border-width:1px}
#submit-product-faq{padding:13px 0;border-radius:16px;font-size:14px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10{gap:12px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div{padding:0}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > :not(:last-child){margin-bottom:8px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 h4{font-size:14px;line-height:1.9}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 .space-y-3 > :not(:last-child){margin-bottom:4px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 .space-y-3 > div{font-size:10.5px;gap:8px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative p.text-\[14px\]{font-size:13px;line-height:2}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative > div.mt-8{margin-top:10px;padding-top:8px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative > div.mb-5{margin-bottom:8px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative > div.mb-5 > div{padding:2px 10px;font-size:10px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative button div{padding:6px;border-radius:10px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative button svg{width:16px;height:16px}
#tab-faq > div.w-full > div.flex.justify-center button{padding:13px 26px;border-radius:16px}
#tab-faq > div.w-full > div.flex.justify-center button span{font-size:13px;letter-spacing:0}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex{flex-direction:row;gap:10px}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-shrink-0{flex-direction:column}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-shrink-0 > div:first-child{width:32px;height:32px;border-radius:10px;font-size:14px;box-shadow:none}
#tab-faq > div.w-full div.grid.grid-cols-1.gap-10 > div > div.flex > div.flex-1 > div.relative{padding:12px 14px;border-radius:16px;border-right:3px solid #2563eb;box-shadow:none}
}

/* p10 sheet-menus: products filter (B) + user-panel menu (6A) open as a bottom sheet (slide up) on mobile; user-panel menu button bottom-right */
@media (max-width: 767px){
#filter-overlay{z-index:160}
#filter-offcanvas{z-index:170;translate:none!important;transform:translate3d(0,0,0);transition:transform .45s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s;visibility:visible;will-change:transform;max-height:calc(100dvh - 24px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;overscroll-behavior:contain}
#filter-offcanvas.translate-x-full{transform:translate3d(0,calc(100% + 32px),0);visibility:hidden;transition:transform .38s cubic-bezier(.4,0,1,1),visibility 0s linear .38s}
#filter-offcanvas > div{min-height:0}
#filter-offcanvas > div > div.overflow-y-auto{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}

/* home-banner A: let 20/9 aspect win on mobile; no min-height width blowout; cover crop; arrows inset */
@media (max-width: 767px) {
  .xl\:col-span-8:has(> .mainHeroSwiper),
  .mainHeroSwiper {
    width: 100% !important;
    max-width: 100%;
  }
  .mainHeroSwiper {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 20 / 9;
  }
  .mainHeroSwiper .swiper-slide,
  .mainHeroSwiper .swiper-slide > a {
    width: 100% !important;
    height: 100% !important;
  }
  .mainHeroSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .mainHeroSwiper .swiper-button-prev-custom,
  .mainHeroSwiper .swiper-button-next-custom {
    width: 28px;
    height: 28px;
  }
  .mainHeroSwiper .swiper-button-prev-custom svg,
  .mainHeroSwiper .swiper-button-next-custom svg {
    width: 14px;
    height: 14px;
  }
  .mainHeroSwiper > .absolute.bottom-8.left-8 {
    bottom: 8px;
    left: 8px;
    gap: 6px;
  }
  /* Pagination: pin to bottom edge (Tailwind !bottom-8 = 32px looks mid on short 20/9 hero) */
  .mainHeroSwiper .swiper-pagination {
    bottom: 6px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center;
  }
}

/* Beat Tailwind !bottom-8/!right-8/!left-auto/!w-auto on hero pagination (utilities !important) */
@layer utilities {
  @media (max-width: 767px) {
    .mainHeroSwiper .swiper-pagination {
      bottom: 6px !important;
      top: auto !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      transform: none !important;
      text-align: center;
    }
  }
}

/* Same @layer as app.css so !important can win (layered !important beats unlayered) */
@layer components {
  @media (max-width: 767px) {
    .mainHeroSwiper .swiper-pagination-bullet,
    .mainHeroSwiper .hero-page-bullet {
      width: 6px !important;
      height: 6px !important;
      margin: 0 3px !important;
    }
    .mainHeroSwiper .swiper-pagination-bullet-active {
      width: 14px !important;
      height: 6px !important;
      border-radius: 999px !important;
    }
  }
  @media (min-width: 768px) {
    .mainHeroSwiper .swiper-pagination-bullet,
    .mainHeroSwiper .hero-page-bullet {
      width: 12px !important;
      height: 12px !important;
    }
    .mainHeroSwiper .swiper-pagination-bullet-active {
      width: 32px !important;
      height: 12px !important;
      border-radius: 999px !important;
    }
  }
}

/* search-empty C: plaintext ellipsis (clips logical end) + dashed empty CTA */
@media (max-width: 767px) {
  #mega-search-panel .search-result-title {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    unicode-bidi: plaintext;
    text-align: start;
  }
  #mega-search-panel .search-empty--c { margin-top: 4px; }
}
/* Browser-owned action feedback; the original button and its layout stay intact. */
button[data-client-pending] {
    color: transparent !important;
    text-shadow: none !important;
}
button[data-client-pending] > * {
    opacity: 0 !important;
}
button[data-client-pending]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    /* Equal font-relative dimensions stay circular on compact text buttons. */
    width: min(1.25rem, 1em);
    height: min(1.25rem, 1em);
    aspect-ratio: 1;
    border: 2px solid var(--client-loading-color, currentColor);
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: client-button-spin .7s linear infinite;
    pointer-events: none;
}
@keyframes client-button-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    button[data-client-pending]::after { animation: none; }
}

@media (min-width: 767px){
    .cart-price-countdown-timer{
        grid-column: span 2 / span 2;
    }
}