/* ==========================================================================
   Storefront styles (builds on base.css)
   ========================================================================== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 5000; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { left: 8px; color: #fff; }
.site-main { min-height: 50vh; padding-bottom: 40px; }
.flash-stack { padding-top: 16px; }
.card-like { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.page-title { font-size: 28px; margin: 4px 0 20px; }
.hide-sm { }

/* Announcement + header --------------------------------------------------- */
.announcement { background: var(--ink); color: #e2e8f0; font-size: 13px; text-align: center; padding: 8px 0; }
.site-header { background: var(--surface); position: sticky; top: 0; z-index: 900; box-shadow: 0 1px 0 var(--line); }
.header-main { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 22px; letter-spacing: -.02em; flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #13a86f); color: #fff; font-size: 17px; }
.logo-img { max-height: 44px; width: auto; }
.logo-light, .logo-light:hover { color: #fff; }

.header-search { position: relative; flex: 1; max-width: 640px; display: flex; }
.header-search input { flex: 1; height: 46px; padding: 0 18px; border: 2px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; font: inherit; font-size: 14.5px; background: var(--bg); min-width: 0; }
.header-search input:focus { outline: none; border-color: var(--primary); background: #fff; }
.header-search > button { width: 56px; border: 0; border-radius: 0 999px 999px 0; background: var(--primary); color: #fff; font-size: 16px; cursor: pointer; }
.header-search > button:hover { background: var(--primary-600); }

.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 1000; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.search-suggest .ss-group { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.search-suggest .ss-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 16px; font-weight: 700; }
.search-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--ink); }
.search-suggest a:hover, .search-suggest a.focused { background: var(--primary-50); }
.search-suggest img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--bg); }
.search-suggest .ss-name { flex: 1; font-size: 14px; line-height: 1.3; }
.search-suggest .ss-name small { display: block; color: var(--muted); font-size: 12px; }
.search-suggest .ss-price { font-weight: 700; font-size: 13.5px; color: var(--primary-700); white-space: nowrap; }
.search-suggest .ss-all { justify-content: center; font-weight: 600; color: var(--primary); }
.search-suggest .ss-empty { padding: 18px 16px; color: var(--muted); font-size: 14px; }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-help { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-right: 8px; }
.header-help > i { font-size: 22px; color: var(--primary); }
.header-help small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.header-help strong { font-size: 13.5px; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font-size: 19px; cursor: pointer; transition: background var(--transition); }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn .label { font-size: 14px; font-weight: 600; }
.icon-btn .count, .bottom-nav .count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; line-height: 1; }
.menu-toggle { display: none; }

.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 1000; }
.dropdown-menu.dropdown-right { left: auto; right: 0; }
.dropdown.open .dropdown-menu { display: block; animation: fadeIn .12s ease; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; color: var(--ink); background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--line-2); }
.dropdown-menu i { width: 18px; color: var(--muted); }

/* Category nav ------------------------------------------------------------- */
.category-nav { border-top: 1px solid var(--line-2); }
.cat-menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 2px; }
.cat-menu > li { position: relative; }
.cat-menu > li.push { margin-left: auto; }
.cat-menu > li > a { display: flex; align-items: center; gap: 7px; padding: 12px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.cat-menu > li > a:hover, .cat-menu > li > a.active { color: var(--primary); border-bottom-color: var(--primary); }
.cat-menu > li > a > i:first-child { color: var(--muted); font-size: 13px; }
.cat-menu .caret { font-size: 10px; color: var(--muted-2); }
.cat-menu .deal-link, .cat-menu .deal-link i { color: var(--accent) !important; }
.mega { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 950; }
.has-mega:hover .mega, .has-mega:focus-within .mega { display: block; }
.mega a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; }
.mega a:hover { background: var(--primary-50); color: var(--primary-700); }
.mega .mega-all { font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--line-2); border-radius: 8px 8px 0 0; margin-bottom: 4px; }

/* Drawer ----------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 2500; background: rgba(15,23,42,.5); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.drawer.open { opacity: 1; visibility: visible; }
.drawer-panel { width: min(86vw, 340px); height: 100%; background: #fff; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; padding: 10px 8px 30px; }
.drawer-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 16px 12px 6px; }
.drawer-link, .drawer-cat summary > a, .drawer-cat > a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.drawer-link i, .drawer-cat summary i:first-child { width: 20px; color: var(--primary); }
.drawer-cat summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding-right: 12px; }
.drawer-cat summary::-webkit-details-marker { display: none; }
.drawer-cat summary > i { color: var(--muted-2); font-size: 12px; transition: transform .2s; }
.drawer-cat[open] summary > i { transform: rotate(180deg); }
.drawer-cat > a { padding-left: 44px; font-size: 14px; color: var(--ink-2); }
.drawer-link:hover, .drawer-cat a:hover { background: var(--line-2); }

/* Sections ----------------------------------------------------------------- */
.section { padding: 34px 0 6px; }
.section-tight { padding-top: 20px; }
.section-tint { background: linear-gradient(180deg, var(--primary-50), transparent); margin-top: 24px; padding-top: 40px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; margin-bottom: 4px; }
.section-head p { color: var(--muted); margin: 0; }
.view-all { font-weight: 600; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

/* Hero slider -------------------------------------------------------------- */
.hero { padding-top: 20px; }
.hero-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; background: var(--ink); }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 48px 64px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; color: #fff; }
.hero-slide.active { opacity: 1; visibility: visible; position: relative; min-height: 400px; }
.hero-slide.theme-green { background: radial-gradient(circle at 80% 30%, #18b77c 0, transparent 45%), linear-gradient(120deg, #064e34, #0a7d52 60%, #0d9563); }
.hero-slide.theme-dark { background: radial-gradient(circle at 85% 40%, #334155 0, transparent 50%), linear-gradient(120deg, #0f172a, #1e293b); }
.hero-slide.theme-orange { background: radial-gradient(circle at 80% 30%, #ff9a5c 0, transparent 45%), linear-gradient(120deg, #9a3412, #ea580c 60%, #ff6b2c); }
.hero-slide.theme-blue { background: radial-gradient(circle at 80% 30%, #60a5fa 0, transparent 45%), linear-gradient(120deg, #1e3a8a, #2563eb); }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.75), rgba(15,23,42,.1) 70%); }
.hero-content { position: relative; z-index: 2; max-width: 560px; }
.hero-content h1, .hero-content h2 { color: #fff; font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.hero-content p { font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 26px; }
.hero-art { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); font-size: 210px; color: rgba(255,255,255,.12); z-index: 1; pointer-events: none; }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.slider-nav:hover { background: rgba(255,255,255,.32); }
.slider-nav.prev { left: 16px; } .slider-nav.next { right: 16px; }
.slider-dots { position: absolute; bottom: 18px; left: 64px; z-index: 5; display: flex; gap: 8px; }
.slider-dots button { width: 10px; height: 10px; border-radius: 5px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: width .2s; }
.slider-dots button.active { width: 28px; background: #fff; }

/* Category tiles ------------------------------------------------------------ */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.category-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary-100); color: var(--ink); }
.category-tile img { width: 72px; height: 72px; object-fit: contain; }
.cat-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: 26px; margin-bottom: 4px; }
.category-tile small { color: var(--muted); font-size: 12.5px; }

/* Product grid + card --------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.listing-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--primary-100); }
.pc-media { position: relative; aspect-ratio: 1 / 1; background: #f8fafc; }
.pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .3s ease; }
.product-card:hover .pc-media img { transform: scale(1.04); }
.pc-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pc-wish { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow-sm); color: var(--muted); cursor: pointer; font-size: 15px; transition: color var(--transition), transform var(--transition); }
.pc-wish:hover { color: var(--danger); transform: scale(1.08); }
.pc-wish.active, .pc-wish-lg.active { color: var(--danger); }
.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; flex: 1; }
.pc-brand { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-title { font-size: 14.5px; font-weight: 600; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.pc-title a { color: var(--ink); }
.pc-title a:hover { color: var(--primary); }
.pc-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.stars { color: #f59e0b; font-size: 12px; display: inline-flex; gap: 1px; }
.pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 4px; }
.pc-price strong { font-size: 17px; color: var(--ink); }
.pc-price small { color: var(--muted); font-size: 12px; }
.pc-price .strike { font-size: 13px; }
.pc-actions { margin-top: 8px; }

/* Promo banners ----------------------------------------------------------- */
.promo-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.promo-count-1 { grid-template-columns: 1fr; }
.promo-count-3 { grid-template-columns: 2fr 1fr 1fr; }
.promo-card { position: relative; display: flex; align-items: center; min-height: 170px; padding: 28px 32px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; }
.promo-card:hover { color: #fff; }
.promo-card.theme-dark { background: radial-gradient(circle at 90% 20%, #0d9563 0, transparent 50%), linear-gradient(120deg, #0f172a, #1e293b); }
.promo-card.theme-orange { background: radial-gradient(circle at 90% 20%, #ffb37f 0, transparent 50%), linear-gradient(120deg, #c2410c, #ff6b2c); }
.promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-card.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.7), transparent); }
.promo-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.promo-content strong { font-size: 22px; letter-spacing: -.02em; }
.promo-content span { color: rgba(255,255,255,.85); font-size: 14.5px; }
.promo-content em { font-style: normal; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.promo-card:hover em i { transform: translateX(3px); }
.promo-content em i { transition: transform var(--transition); }

/* Brands ------------------------------------------------------------------- */
.brand-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.brand-chip { display: grid; place-items: center; height: 76px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); font-weight: 800; font-size: 16px; letter-spacing: -.01em; transition: border-color var(--transition), box-shadow var(--transition); }
.brand-chip:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); color: var(--primary); }
.brand-chip img { max-height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.brand-chip:hover img { filter: none; opacity: 1; }

/* USPs + testimonials ---------------------------------------------------------- */
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.usp { display: flex; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.usp-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: 20px; }
.usp strong { display: block; margin-bottom: 2px; }
.usp p { margin: 0; color: var(--muted); font-size: 13.5px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.testimonial blockquote { margin: 0; color: var(--ink-2); flex: 1; }
.testimonial figcaption { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.testimonial figcaption small { display: block; color: var(--muted); }
.avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--primary-100); color: var(--primary-700); font-weight: 700; font-size: 13px; }

/* Newsletter ---------------------------------------------------------------- */
.newsletter-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 40px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary-700), var(--primary)); color: #fff; }
.newsletter-band h2 { color: #fff; margin-bottom: 4px; }
.newsletter-band p { margin: 0; color: rgba(255,255,255,.85); }
.newsletter-form { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.newsletter-form input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; }
.newsletter-form input:focus { outline: 3px solid rgba(255,255,255,.4); }
.newsletter-form .btn { height: 48px; }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: #0b1220; color: #cbd5e1; margin-top: 40px; font-size: 14px; }
.footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-newsletter h3 { color: #fff; margin-bottom: 4px; }
.footer-newsletter p { margin: 0; color: #94a3b8; }
.footer-newsletter input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 36px; }
.footer-grid h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { color: #cbd5e1; }
.footer-grid a:hover { color: #fff; }
.footer-about p { color: #94a3b8; margin: 14px 0; }
.footer-contact li { display: flex; gap: 10px; color: #94a3b8; }
.footer-contact i { color: var(--primary-100); margin-top: 4px; width: 14px; }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.socials a:hover { background: var(--primary); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: 13px; color: #94a3b8; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pay-icons { display: flex; align-items: center; gap: 8px; font-size: 26px; color: #e2e8f0; }
.pay-chip { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.1); color: #e2e8f0; }

.bottom-nav { display: none; }
.whatsapp-float { position: fixed; right: 20px; bottom: 22px; z-index: 800; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 10px 24px -8px rgba(37,211,102,.7); transition: transform var(--transition); }
.whatsapp-float:hover { color: #fff; transform: scale(1.07); }
.btn-whatsapp { background: #25d366; color: #fff; margin-top: 10px; }
.btn-whatsapp:hover { background: #1ebe5a; color: #fff; }

/* Breadcrumbs ---------------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 18px 0 10px; font-size: 13px; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--muted-2); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs [aria-current] { color: var(--ink-2); font-weight: 500; }

/* Listing ---------------------------------------------------------------------- */
.listing-hero { display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; }
.listing-hero h1 { font-size: 28px; margin-bottom: 4px; }
.listing-hero p { color: var(--muted); margin: 0; }
.listing-logo { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.subcat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pill { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.listing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 18px 18px; position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow-y: auto; }
.filters-head { display: none; }
.filter-group { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.filter-group h4 { font-size: 14px; margin-bottom: 10px; }
.filter-options { display: grid; gap: 8px; }
.filter-options.scroll { max-height: 230px; overflow-y: auto; padding-right: 4px; }
.filter-options .check { justify-content: flex-start; }
.filter-options .check em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted-2); }
.filter-options.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch span:not(.sr-only) { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--primary); }
.swatch input:focus-visible + span { outline: 3px solid rgba(10,125,82,.35); }
.filter-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.filter-links a { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-2); font-size: 14px; }
.filter-links a:hover { color: var(--primary); }
.filter-links span { color: var(--muted-2); font-size: 12px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs .form-control { padding: 8px 10px; font-size: 13.5px; }
.filter-actions { display: grid; gap: 6px; padding-top: 16px; }
.filters-backdrop { display: none; }
.listing-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.listing-toolbar [data-result-summary] { margin-right: auto; }
.filters-open { display: none; }
.sort-select { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.sort-select .form-select { width: auto; min-width: 190px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.listing-results { position: relative; min-height: 200px; transition: opacity .15s; }
.listing-results.loading { opacity: .45; pointer-events: none; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--primary-50); color: var(--primary-700); font-size: 13px; font-weight: 600; }
.chip:hover { background: var(--primary-100); color: var(--primary-700); }
.chip-clear { background: none; color: var(--muted); text-decoration: underline; }
.listing-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.listing-content { margin-top: 40px; }

/* Product page ---------------------------------------------------------------- */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; margin-top: 6px; align-items: start; }
.gallery { position: sticky; top: 130px; }
.gallery-main { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.gallery-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1 / 1; }
.gallery-zoom img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.gallery-badge { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 13px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button { width: 76px; height: 76px; flex-shrink: 0; padding: 4px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: #fff; cursor: pointer; }
.gallery-thumbs button.active { border-color: var(--primary); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pi-brand { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pi-title { font-size: clamp(22px, 2.6vw, 30px); margin: 6px 0 10px; letter-spacing: -.02em; }
.pi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; }
.pi-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.pi-rating .stars { font-size: 14px; }
.pi-price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pi-price strong { font-size: 32px; letter-spacing: -.02em; color: var(--ink); }
.pi-price .strike { font-size: 17px; }
.pi-short { color: var(--ink-2); }
.variant-group { margin-bottom: 16px; }
.variant-label { font-size: 14px; margin-bottom: 8px; color: var(--muted); }
.variant-label strong { color: var(--ink); }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-btn { padding: 9px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); transition: border-color var(--transition), background var(--transition); }
.opt-btn:hover { border-color: var(--primary); }
.opt-btn.selected { border-color: var(--primary); background: var(--primary-50); color: var(--primary-700); }
.opt-btn.unavailable, .opt-swatch.unavailable { opacity: .4; text-decoration: line-through; }
.opt-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; background: var(--swatch); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.opt-swatch.selected { box-shadow: 0 0 0 2.5px var(--primary); }
.pi-stock { margin: 6px 0 16px; font-size: 14px; font-weight: 600; }
.stock-success { color: var(--success); } .stock-warning { color: var(--warning); } .stock-danger { color: var(--danger); }
.pi-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.qty button { width: 42px; height: 50px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.qty button:hover:not(:disabled) { background: var(--line-2); }
.qty button:disabled { color: var(--muted-2); cursor: not-allowed; }
.qty input { width: 48px; height: 50px; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; background: var(--primary-50); }
.qty-sm button { width: 34px; height: 38px; } .qty-sm input { width: 40px; height: 38px; }
.pc-wish-lg { width: 52px; height: 52px; font-size: 18px; }
.pi-assurance { list-style: none; margin: 24px 0 0; padding: 18px; display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pi-assurance li { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); }
.pi-assurance i { width: 22px; font-size: 18px; color: var(--primary); margin-top: 2px; }
.pi-assurance strong { display: block; color: var(--ink); font-size: 14px; }
.product-tabs { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ptab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; }
.ptab-nav button { padding: 16px 16px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptab-nav button.active { color: var(--primary); border-bottom-color: var(--primary); }
.ptab-panel { display: none; padding: 28px; }
.ptab-panel.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.spec-table caption { text-align: left; font-weight: 700; padding: 8px 0; color: var(--ink); }
.spec-table th, .spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.spec-table th { width: 34%; color: var(--muted); font-weight: 500; background: #fafbfd; }
.reviews-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; }
.review-summary { text-align: center; }
.big-rating { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.review-summary .stars { font-size: 18px; margin: 6px 0; }
.rating-bar { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rating-bar div { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.rating-bar div i { display: block; height: 100%; background: #f59e0b; }
.rating-bar span:first-child i { color: #f59e0b; font-size: 10px; }
.review { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.review:first-child { padding-top: 0; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review-head > div { flex: 1; }
.review-head small { display: block; }
.review h4 { font-size: 15px; margin-bottom: 4px; }
.review p { margin: 0; color: var(--ink-2); }
.review-form-box { margin-top: 24px; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label { font-size: 26px; color: #cbd5e1; cursor: pointer; transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #f59e0b; }
.star-input input:focus-visible + label { outline: 2px solid var(--primary); border-radius: 4px; }
.product-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.92); display: flex; align-items: center; justify-content: center; padding: 40px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--radius); }
.lb-close, .lb-nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.lb-close { top: 20px; right: 20px; }
.lb-nav.prev { left: 20px; } .lb-nav.next { right: 20px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.3); }
.sticky-buy { display: none; }

/* Prose (CMS content, product descriptions) ----------------------------------------- */
.prose { color: var(--ink-2); line-height: 1.75; }
.prose h2 { font-size: 22px; margin-top: 1.4em; } .prose h3 { font-size: 18px; margin-top: 1.3em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 4px; }
.prose img { border-radius: var(--radius); margin: 1em 0; }
.prose blockquote { margin: 1em 0; padding: 10px 18px; border-left: 4px solid var(--primary); background: var(--primary-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose pre { background: var(--ink); color: #e2e8f0; padding: 14px; border-radius: var(--radius-sm); overflow-x: auto; }

/* Cart --------------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cart-head { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 17px; margin: 0; }
.cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 120px 44px; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.cart-line:last-child { border-bottom: 0; }
.cart-line.has-issue { background: #fffbf5; }
.cl-img img { width: 88px; height: 88px; object-fit: contain; border-radius: var(--radius-sm); background: #f8fafc; padding: 6px; }
.cl-name { font-weight: 600; color: var(--ink); line-height: 1.35; }
.cl-name:hover { color: var(--primary); }
.cl-variant { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cl-unit { font-size: 14px; margin-top: 4px; }
.cl-unit .strike { margin-left: 6px; font-size: 12.5px; }
.cl-issue { color: var(--warning); font-size: 13px; font-weight: 600; margin-top: 6px; }
.cl-total { font-weight: 700; text-align: right; }
.cl-remove .icon-btn { font-size: 16px; color: var(--muted); }
.cl-remove .icon-btn:hover { color: var(--danger); background: var(--danger-50); }
.cart-summary { padding: 22px; position: sticky; top: 130px; }
.cart-summary h2 { font-size: 18px; margin-bottom: 16px; }
.coupon-form { margin-bottom: 16px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius-sm); background: var(--success-50); color: #0b6b36; font-size: 14px; }
.totals { margin: 0 0 18px; display: grid; gap: 10px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.totals dt { color: var(--muted); } .totals dd { margin: 0; font-weight: 600; text-align: right; }
.totals .text-success dt, .totals .text-success dd { color: var(--success); }
.totals .grand { padding-top: 12px; border-top: 1px dashed var(--line); font-size: 18px; }
.totals .grand dt { color: var(--ink); font-weight: 700; } .totals .grand dd { font-weight: 800; }
.secure-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }

/* Forms & shared blocks ---------------------------------------------------------- */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 44px; }
.password-field .toggle-pass { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 8px; }
.panel { padding: 22px; margin-bottom: 20px; }
.panel h2, .panel h3 { font-size: 17px; margin: 0 0 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: 14px; font-weight: 600; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.two-col > .panel { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
.simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.simple-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.simple-table tr:last-child td { border-bottom: 0; }
.simple-table .badge + .badge { margin-left: 4px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 16px 26px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.timeline strong { display: block; font-size: 14px; }
.timeline small { font-size: 12.5px; }
.timeline p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.tabs-inline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs-inline a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tabs-inline a:hover { color: var(--ink); }
.tabs-inline a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger-50); }
.container-narrow { max-width: 980px; }

/* Auth pages -------------------------------------------------------------------- */
.auth-wrap { display: flex; justify-content: center; padding-top: 32px; padding-bottom: 56px; }
.auth-box { width: 100%; max-width: 460px; padding: 32px; }
.register-box, .auth-wrap .auth-box:has(.form-row) { max-width: 560px; }
.auth-box h1 { font-size: 24px; margin: 0 0 8px; }
.auth-box h1 i { color: var(--primary); margin-right: 6px; }
.auth-box > p.text-muted { margin-bottom: 22px; }
.auth-switch { text-align: center; margin: 18px 0 0; font-size: 14px; }
.auth-switch + .auth-switch { margin-top: 8px; }

/* Account area ------------------------------------------------------------------ */
.account-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 40px; }
.account-nav { padding: 18px; position: sticky; top: 130px; }
.account-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.account-user .avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; }
.account-user div { min-width: 0; }
.account-user strong { display: block; font-size: 14.5px; }
.account-user small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-nav nav { display: grid; gap: 2px; }
.account-nav nav a, .account-nav nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.account-nav nav i { width: 18px; text-align: center; color: var(--muted); }
.account-nav nav a:hover, .account-nav nav button:hover { background: var(--line-2); }
.account-nav nav a.active { background: var(--primary); color: #fff; }
.account-nav nav a.active i { color: #fff; }
.account-nav nav form { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.account-nav nav button:hover, .account-nav nav button:hover i { color: var(--danger); }
.account-main { min-width: 0; }
.account-main > .alert form { margin-left: auto; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mini-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; color: var(--ink); transition: box-shadow var(--transition), transform var(--transition); }
.mini-stat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mini-stat i { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--line-2); color: var(--primary); font-size: 18px; }
.mini-stat strong { font-size: 22px; line-height: 1.1; }
.mini-stat span { font-size: 13px; color: var(--muted); }
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.address-card { padding: 18px; font-size: 14px; }
.address-card.is-default { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.address-card p { margin: 0 0 4px; color: var(--ink-2); }
.review-todo { display: grid; gap: 10px; }
.todo-item { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.todo-item:hover { border-color: var(--primary); }
.todo-item img { width: 52px; height: 52px; object-fit: contain; background: #f8fafc; border-radius: var(--radius-sm); }
.todo-item span { flex: 1; font-weight: 600; font-size: 14px; }
.todo-item em { font-style: normal; font-size: 13px; color: var(--primary); font-weight: 600; white-space: nowrap; }
.product-grid.product-grid-account { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Checkout ---------------------------------------------------------------------- */
.checkout-login { padding: 14px 18px; margin-bottom: 18px; font-size: 14.5px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; padding-bottom: 40px; }
.checkout-main .panel h2 { display: flex; align-items: center; gap: 10px; }
.step { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.choice:hover { border-color: var(--muted-2); }
.choice input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); flex: none; }
.choice:has(input:checked) { border-color: var(--primary); background: #f3fbf7; }
.choice > span { display: grid; gap: 2px; min-width: 0; }
.choice > span > i { color: var(--primary); font-size: 18px; margin-bottom: 4px; }
.choice strong { font-size: 14.5px; }
.choice strong em { font-style: normal; margin-left: 6px; vertical-align: middle; }
.choice small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.choice-address { margin-bottom: 10px; }
.saved-addresses { margin-bottom: 14px; }
.quote-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--line-2); color: var(--ink-2); font-size: 14px; }
.quote-box i { margin-top: 3px; color: var(--muted); }
.quote-box.quote-ok { background: var(--success-50); color: #0b6b36; }
.quote-box.quote-ok i { color: var(--success); }
.quote-box.quote-warning { background: var(--warning-50); color: #92400e; }
.quote-box.quote-warning i { color: var(--warning); }
.checkout-summary .btn-block + .secure-note { margin-bottom: 12px; }
.mini-lines { list-style: none; margin: 0 0 16px; padding: 0 0 6px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); max-height: 360px; overflow-y: auto; }
.mini-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 10px; }
.mini-img { position: relative; }
.mini-img img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: #f8fafc; border: 1px solid var(--line-2); padding: 4px; }
.mini-img em { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.mini-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.mini-name small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mini-lines strong { font-size: 14px; white-space: nowrap; }

/* Order pages ------------------------------------------------------------------- */
.order-thanks { text-align: center; padding: 28px 0 22px; }
.thanks-icon { font-size: 56px; color: var(--success); }
.order-thanks h1 { font-size: 28px; margin: 8px 0 6px; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; }
.order-number { font-size: 22px; margin: 2px 0; letter-spacing: .01em; }
.order-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.order-progress { list-style: none; margin: 0 0 16px; padding: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.order-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); font-weight: 500; }
.order-progress li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.order-progress li:first-child::before { display: none; }
.order-progress li.done::before { background: var(--primary); }
.order-progress .dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--line); color: transparent; font-size: 13px; }
.order-progress li.done .dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.order-progress li.done { color: var(--ink); }
.order-progress li.current { font-weight: 700; }
.order-progress li.current .dot { box-shadow: 0 0 0 5px rgba(10, 125, 82, .15); }
.bank-box { border-color: #f5d9a8; background: #fffbf3; }
.bank-box h3 i { color: var(--warning); margin-right: 6px; }
.bank-details { display: grid; gap: 8px; margin: 0 0 14px; }
.bank-details > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #f0dcb6; font-size: 14.5px; }
.bank-details dt { color: var(--muted); }
.bank-details dd { margin: 0; text-align: right; display: flex; align-items: center; gap: 6px; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.order-columns { margin-bottom: 20px; }
.order-columns > div > .panel:last-child { margin-bottom: 0; }
.order-columns .mini-lines { max-height: none; }
.order-footer-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 40px; }
.order-footer-actions p { margin: 0; }

/* Responsive ------------------------------------------------------------------- */
@media (max-width: 1440px) {
    .cat-menu > li > a { padding: 12px 9px; font-size: 13.5px; }
    .cat-menu > li > a > i:first-child:not(.fa-fire):not(.fa-grip) { display: none; }
}
@media (max-width: 1100px) {
    .cat-menu > li > a { padding: 12px 7px; font-size: 13px; }
    .cat-menu .caret { display: none; }
    .header-help { display: none; }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .listing-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usp-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto 44px; }
    .cl-img img { width: 72px; height: 72px; }
    .cl-total { grid-column: 2; grid-row: 2; text-align: left; }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .account-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .two-col { grid-template-columns: 1fr; }
    .product-grid.product-grid-account { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.store { padding-bottom: 64px; }
    .menu-toggle { display: inline-flex; }
    .category-nav { display: none; }
    .header-main { height: auto; flex-wrap: wrap; gap: 8px 10px; padding-top: 10px; padding-bottom: 10px; }
    .header-search { order: 5; flex-basis: 100%; max-width: none; }
    .header-search input { height: 42px; }
    .icon-btn .label { display: none; }
    .logo { font-size: 19px; }
    .hide-sm { display: none !important; }
    .site-header.search-focus .header-search input { border-color: var(--primary); }
    .hero-slider, .hero-slide.active { min-height: 320px; }
    .hero-slide { padding: 32px 28px 56px; }
    .hero-art { font-size: 120px; right: 4%; }
    .slider-dots { left: 28px; }
    .slider-nav { display: none; }
    .promo-grid, .promo-count-3 { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .footer-newsletter, .newsletter-band { flex-direction: column; align-items: stretch; }
    .newsletter-band { padding: 26px 22px; }
    .listing-layout { grid-template-columns: 1fr; }
    .filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 340px); max-height: none; z-index: 2600; border-radius: 0; transform: translateX(-105%); transition: transform .25s ease; padding-top: 0; }
    .filters.open { transform: none; }
    .filters-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
    .filters-backdrop.open { display: block; position: fixed; inset: 0; z-index: 2550; background: rgba(15,23,42,.5); }
    .filters-open { display: inline-flex; }
    .sort-select .form-select { min-width: 150px; }
    .product-layout { grid-template-columns: 1fr; gap: 24px; }
    .gallery { position: static; }
    .reviews-layout { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .checkout-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .account-nav { position: static; padding: 12px; min-width: 0; }
    .account-user { display: none; }
    .account-nav nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
    .account-nav nav a, .account-nav nav button { width: auto; white-space: nowrap; padding: 8px 12px; font-size: 13.5px; }
    .account-nav nav form { margin: 0; padding: 0; border: 0; }
    .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px -8px rgba(15,23,42,.15); padding-bottom: env(safe-area-inset-bottom); }
    .bottom-nav a, .bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: none; border: 0; font-family: inherit; cursor: pointer; }
    .bottom-nav i { font-size: 18px; }
    .bottom-nav .active { color: var(--primary); }
    .bottom-nav .count { top: 4px; right: calc(50% - 22px); }
    .whatsapp-float { bottom: 80px; right: 14px; width: 50px; height: 50px; font-size: 26px; }
    .page-product .whatsapp-float { bottom: 140px; }
    .sticky-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 60px; z-index: 940; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; transform: translateY(150%); transition: transform .25s ease; }
    .sticky-buy.show { transform: none; }
    .sticky-buy strong { display: block; font-size: 13px; line-height: 1.3; }
    .sticky-buy span { font-weight: 800; color: var(--primary-700); }
}
@media (max-width: 640px) {
    .container { padding: 0 14px; }
    .product-grid, .product-grid-6, .listing-main .product-grid, .product-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pc-body { padding: 10px; }
    .pc-title { font-size: 13.5px; }
    .pc-price strong { font-size: 15px; }
    .pc-actions .btn { padding: 8px 6px; font-size: 12.5px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .category-tile { padding: 14px 6px; }
    .category-tile small { display: none; }
    .cat-icon { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
    .usp-grid { grid-template-columns: 1fr; }
    .section-head h2 { font-size: 20px; }
    .hero-content p { font-size: 15px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-newsletter .newsletter-form, .newsletter-band .newsletter-form { flex-direction: column; }
    .listing-toolbar [data-result-summary] { display: none; }
    .listing-toolbar .sort-select { margin-left: auto; }
    .pi-price strong { font-size: 26px; }
    .ptab-panel { padding: 20px 16px; }
    .cart-line { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 10px 12px; padding: 14px; }
    .cl-img img { width: 64px; height: 64px; }
    .cl-qty { grid-column: 2; grid-row: 2; }
    .cl-total { grid-column: 2; grid-row: 3; }
    .cl-remove { grid-column: 3; grid-row: 1; }
    .page-title, .listing-hero h1 { font-size: 22px; }
    .form-row { grid-template-columns: 1fr; }
    .auth-wrap { padding-top: 16px; }
    .auth-box { padding: 22px 18px; }
    .panel { padding: 18px 16px; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-progress { padding: 18px 8px; font-size: 11.5px; }
    .order-progress li { font-size: 11.5px; }
    .order-progress .dot { width: 26px; height: 26px; }
    .order-progress li::before { top: 12px; }
    .simple-table, .simple-table tbody { display: block; }
    .simple-table thead { display: none; }
    .simple-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
    .simple-table tr:last-child { border-bottom: 0; }
    .simple-table td:nth-child(even) { text-align: right; }
    .simple-table td { padding: 0; border: 0; }
    .simple-table td.text-right { text-align: left; }
}