/* ---------- Top navigation — Reference dark Manrope ---------- */
.topbar { position: sticky; top: 0; z-index: 100; background: rgba(16,20,29,0.92); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid rgba(245,247,240,0.08); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-xl); color: rgb(245,247,240); letter-spacing: -0.02em; font-family: var(--font-display); }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-denim); color: var(--pure-white); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.brand:hover { text-decoration: none; }

/* Center nav — underline / highlight with --secondary-wash on hover (Souled Store pattern) */
.nav-links { display: flex; align-items: center; gap: var(--sp-1); }
.nav-links a { position: relative; padding: 9px 14px; border-radius: var(--r-md); color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: color 0.2s ease-in, background 0.2s ease-in; }
.nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--secondary-wash); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease-in; border-radius: 999px; }
.nav-links a:hover { color: var(--primary-denim); background: var(--light-indigo); text-decoration: none; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--primary-denim); background: var(--light-indigo); }
.nav-links a.active::after { transform: scaleX(1); }

.searchbar { flex: 1; max-width: 460px; position: relative; }
.searchbar input { width: 100%; border: 1px solid var(--ink-200); background: var(--pure-white); border-radius: var(--r-full); padding: 10px 16px 10px 42px; font-size: var(--fs-sm); transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in; }
.searchbar input:focus { outline: none; border-color: var(--primary-denim); background: var(--pure-white); box-shadow: 0 0 0 4px var(--light-indigo); }
.searchbar .s-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgb(245,247,240); border: 1px solid #d6deee; border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; z-index: 120; }
.search-suggest button { display: flex; width: 100%; text-align: left; gap: var(--sp-2); padding: 10px 14px; background: none; border: 0; color: rgb(16,20,29); font-size: var(--fs-sm); }
.search-suggest button:hover { background: #E9EEF5; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--ink-700); position: relative; transition: background 0.2s ease-in, color 0.2s ease-in; }
.icon-btn:hover { background: var(--light-indigo); color: var(--primary-denim); }
.icon-btn:focus-visible { outline: 2px solid var(--primary-denim); outline-offset: 2px; }
.cart-count { position: absolute; top: 4px; right: 4px; background: var(--primary-denim); color: var(--pure-white); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.hamburger { display: none; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--dark-charcoal); cursor: pointer; }

/* Hero Carousel — full-width auto-scaling, absolute overlay */
.hero-carousel { position: relative; width: 100%; height: clamp(420px, 60vh, 640px); overflow: hidden; background: var(--light-indigo); }
.hero-carousel__track { display: flex; height: 100%; transition: transform 600ms var(--ease-out); }
.hero-carousel__slide { flex: 0 0 100%; position: relative; overflow: hidden; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-carousel__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,37,65,0.58) 0%, rgba(28,37,65,0.18) 55%, transparent 75%); }
.hero-carousel__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 6vw, 80px); color: var(--pure-white); max-width: var(--maxw); margin: 0 auto; }
.hero-carousel__eyebrow { font-size: 12px; letter-spacing: 0.16em; font-weight: 700; opacity: 0.9; margin-bottom: 12px; text-transform: uppercase; }
.hero-carousel__title { font-family: var(--font-display); font-size: clamp(32px, 6vw, 56px); line-height: 0.9; letter-spacing: -0.03em; font-weight: 800; margin: 0; }
.hero-carousel__sub { margin-top: 12px; max-width: 42ch; opacity: 0.85; font-size: var(--fs-md); line-height: 1.5; }
.hero-carousel__cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-carousel__dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; z-index: 2; }
.hero-carousel__dot { height: 8px; border-radius: 999px; border: none; cursor: pointer; transition: width 0.2s ease-in, background 0.2s ease-in, opacity 0.2s ease-in; }
.hero-carousel__dot--active { width: 24px; background: var(--pure-white); opacity: 1; }
.hero-carousel__dot--idle { width: 8px; background: var(--pure-white); opacity: 0.5; }
.hero-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: var(--dark-charcoal); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.2s ease-in, transform 0.2s ease-in; box-shadow: 0 4px 16px rgba(28,37,65,0.15); }
.hero-carousel__arrow:hover { background: var(--pure-white); transform: translateY(-50%) scale(1.06); }
.hero-carousel__arrow--prev { left: clamp(12px, 2vw, 24px); }
.hero-carousel__arrow--next { right: clamp(12px, 2vw, 24px); }
@media (max-width: 640px) { .hero-carousel__arrow { display: none; } }

/* Category Circles — genuine horizontal scroll row (native touch scrolling) */
.cat-bubbles { display: flex; flex-wrap: nowrap; gap: 20px; width: 100%; max-width: 100vw; overflow-x: auto; overflow-y: hidden; padding: 24px 20px; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; scroll-padding-right: 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cat-bubbles::-webkit-scrollbar { display: none; }
.cat-bubbles::after { content: ""; flex: 0 0 4px; }
.cat-bubble { flex: 0 0 auto; width: 88px; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; }
.cat-bubble__circle { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 2px solid var(--light-indigo); background: var(--light-indigo); transition: transform 0.2s ease-in, border-color 0.2s ease-in, box-shadow 0.2s ease-in; flex-shrink: 0; }
.cat-bubble:hover .cat-bubble__circle { transform: scale(1.06); border-color: var(--secondary-wash); box-shadow: 0 8px 24px rgba(28,37,65,0.12); }
.cat-bubble__circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-bubble__label { font-size: 13px; font-weight: 600; color: var(--dark-charcoal); line-height: 1.3; }

/* Shop category tab bar — outer scrolls, inner track sizes to content */
.category-bar { width: 100%; max-width: 100vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; box-sizing: border-box; }
.category-bar::-webkit-scrollbar { display: none; }
.category-bar__track { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; width: max-content; min-width: 100%; max-width: none; margin: 0 auto; padding: 11px 16px; box-sizing: border-box; white-space: nowrap; }
.category-bar__track a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; }

/* Prevent page-level horizontal scroll — single webpage.
   NOTE: .cat-bubbles and .category-bar__track are intentionally NOT in this
   clip list: they are the designated horizontal scrollers and must keep
   overflow-x:auto. Only the page shell gets clipped. */
html { scrollbar-gutter: stable; }
#main, .container, .feed-section, section.hero { max-width: 100vw; overflow-x: clip; }
/* Product Feed — Denim: 4-col desktop → 2-col mobile (no rigid px) */
.feed-section { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px; overflow-x: clip; }
.feed-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.feed-header h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; margin: 0; }

/* Footer — dark-charcoal */
.footer { background: var(--dark-charcoal); color: #cbd5e1; margin-top: var(--sp-10); }
.footer a { color: #cbd5e1; transition: color 0.2s ease-in; }
.footer a:hover { color: var(--pure-white); }
.footer .container { padding: var(--sp-9) var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { color: var(--pure-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.footer .muted { color: #94a3b8; }

/* Bottom mobile nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: var(--pure-white); border-top: 1px solid var(--light-indigo); display: none; z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-500); font-size: 11px; font-weight: 600; position: relative; text-decoration: none; }
.bottom-nav a.active { color: var(--primary-denim); }
.bottom-nav a .em { font-size: 20px; }
.bottom-nav .cart-count { top: 6px; right: 50%; transform: translateX(14px); }

/* Page shell */
#main { min-height: calc(100vh - var(--nav-h)); padding-bottom: var(--sp-8); }
.page-enter { animation: pageIn 0.2s ease-in; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Responsive nav — Denim */
@media (max-width: 1100px) {
  .nav-links { gap: 4px; }
  .nav-links a { padding: 8px 10px; font-size: 13px; }
  .searchbar { max-width: 360px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hamburger { display: grid !important; }
  .category-bar { display: block !important; }
}
@media (max-width: 720px) {
  .topbar-inner { gap: var(--sp-3); padding: 0 var(--sp-4); height: 60px; }
  .searchbar { display: none; }
  .bottom-nav { display: flex; }
  #main { padding-bottom: calc(var(--bottom-nav-h) + var(--sp-4)); }
  .hero-fashion-inner { grid-template-columns: 1fr !important; min-height: auto !important; padding: 32px 20px !important; }
  .hero-visual { height: 320px !important; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .collection-grid { grid-template-columns: 1fr !important; }
  .custom-layout { grid-template-columns: 1fr !important; }
  .desktop-only { display: none !important; }
}
@media (max-width: 480px) {
  .topbar-inner { padding: 0 12px; }
  .brand { font-size: 18px !important; }
  .hero-carousel__title { font-size: clamp(2rem, 10vw, 2.8rem) !important; }
  .category-bar div { gap: 16px !important; padding: 10px 12px !important; }
}
/* Product grid responsive — strict 4 → 2 */
.grid-products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 360px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* Layout split (checkout / profile) */
.split { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Sidebar (profile / admin) — light card on dark page, must have dark text */
.sidebar { background: rgb(245,247,240); border: 1px solid #dde3ef; border-radius: var(--r-lg); padding: var(--sp-3); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); color: rgb(16,20,29); }
.sidebar a { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 14px; border-radius: var(--r-md); color: #23395d; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; transition: background 0.2s ease-in, color 0.2s ease-in; }
.sidebar a:hover { background: #E9EEF5; color: rgb(16,20,29); text-decoration: none; }
.sidebar a.active { background: rgb(16,20,29); color: rgb(245,247,240); }
.filter-title { color: rgb(16,20,29) !important; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.filter-link { display: block; padding: 7px 10px; border-radius: var(--r-md); color: #344a6e !important; font-size: var(--fs-sm); text-decoration: none; }
.filter-link:hover { background: #E9EEF5; color: rgb(16,20,29) !important; }
.filter-link.active { background: rgb(16,20,29) !important; color: rgb(245,247,240) !important; }
.filter-link.sub { padding-left: 18px; font-size: 13px; }
.sidebar .btn { color: #23395d; }
.sidebar .muted { color: #5a6d8a !important; }
@media (max-width: 900px) {
  .sidebar { display: flex; overflow-x: auto; gap: 8px; padding: 12px; border-radius: var(--r-lg); position: static; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar a { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--light-indigo); background: var(--pure-white); }
  .sidebar a.active { background: var(--dark-charcoal); color: var(--pure-white); border-color: var(--dark-charcoal); }
  .split[style*="260px"] { grid-template-columns: 1fr !important; }
  .split[style*="260px"] > aside { order: -1; }
}

/* Utility layout for product detail — image-only gallery, no side swatches */
.pdp { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-7); min-width: 0; max-width: 100%; }
.pdp > * { min-width: 0; max-width: 100%; }
@media (max-width: 820px) { .pdp { grid-template-columns: minmax(0,1fr); } }
.pdp-gallery { aspect-ratio: 4/5; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--light-indigo), var(--ink-50)); display: block; overflow: hidden; width: 100%; max-width: 100%; }
.pdp-img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; display: block; margin: 0 auto; }
@media (max-width: 640px) { .pdp-gallery, .pdp-img { aspect-ratio: 1/1.05; } }
.pdp-gallery .ph { width: 120px; height: 120px; border-radius: var(--r-lg); background: #d6deee; color: var(--primary-denim); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 3rem; }

/* Stat tiles (admin) */
.stat { background: var(--pure-white); border: 1px solid var(--light-indigo); border-radius: var(--r-lg); padding: var(--sp-5); }
.stat .v { font-size: var(--fs-2xl); font-weight: 800; color: var(--dark-charcoal); }
.stat .l { color: var(--ink-500); font-size: var(--fs-sm); }

/* table */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--light-indigo); font-size: var(--fs-sm); }
.table th { color: var(--ink-500); font-weight: 600; background: var(--light-indigo); }
.table tr:hover td { background: var(--ink-50); }

/* order timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-5); }
.tl-item .tl-dot { width: 22px; height: 22px; border-radius: var(--r-full); background: var(--ink-200); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; z-index: 1; }
.tl-item.done .tl-dot { background: var(--zuno-success); }
.tl-item.current .tl-dot { background: var(--primary-denim); box-shadow: 0 0 0 4px var(--light-indigo); }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--ink-200); }
.tl-item.done:not(:last-child)::before { background: var(--zuno-success); }

/* ── ZUNO Reference Hero — section.hero 1fr 1.15fr (252) ── */
section.hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; position: relative; height: 709px; padding: 85px clamp(22px,7vw,120px) 54px; background-image: radial-gradient(circle at 72% 45%, rgb(35, 48, 58) 0px, rgb(16, 20, 29) 27%, transparent 52%); background-color: rgb(16,20,29); color: rgb(245,247,240); font-family: 'Manrope', sans-serif; overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.hero-art { display: grid; height: 570px; position: relative; align-items: center; justify-items: center; background: transparent; }
.hero-index { display: none; font-family: "DM Mono", monospace; color: #555d6f; position: absolute; }
@media (max-width: 900px) { section.hero { grid-template-columns: 1fr !important; height: auto !important; min-height: 560px !important; padding: 40px 20px !important; gap: 24px !important; } .hero-art { height: 360px !important; } .hero-copy h1 { font-size: clamp(32px,8vw,48px) !important; } .hero-copy { max-width: 100% !important; } }
@media (max-width: 640px) { section.hero { padding: 32px 16px 24px !important; min-height: 520px !important; } .hero-art { height: 280px !important; min-height: 220px !important; } .hero-art img { max-height: 280px !important; width: 100% !important; max-width: 320px !important; } }
@media (max-width: 480px) { section.hero { padding: 28px 16px 20px !important; } .hero-copy { gap: 12px !important; } }

/* ── ZUNO Fashion Homepage + Denim overrides ── */
.hero-fashion { background: var(--dark-charcoal); color: var(--pure-white); overflow: hidden; }
.hero-fashion-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; min-height: 560px; padding: var(--sp-9) var(--sp-5); max-width: var(--maxw); margin: 0 auto; }
@media (max-width: 900px) { .hero-fashion-inner { grid-template-columns: 1fr; min-height: auto; padding: var(--sp-8) var(--sp-5); } }
.hero-eyebrow { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: var(--sp-3); }
.hero-title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.04em; font-weight: 800; color: var(--pure-white); margin: 0; }
.hero-title .hero-accent { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.9); }
.hero-sub { color: rgba(255,255,255,0.65); font-size: var(--fs-md); line-height: 1.6; max-width: 42ch; margin-top: var(--sp-4); }
.hero-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-cta .btn-primary { background: var(--pure-white); color: var(--dark-charcoal); border-color: var(--pure-white); }
.hero-cta .btn-primary:hover { background: var(--light-indigo); }
.hero-cta .btn-outline { color: var(--pure-white); border-color: rgba(255,255,255,0.3); background: transparent; }
.hero-cta .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--pure-white); }
.hero-visual { position: relative; height: 480px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .hero-visual { height: 360px; } }
.hero-card { position: absolute; width: 280px; height: 360px; background: var(--pure-white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-4); color: var(--dark-charcoal); }
.hero-card-1 { transform: rotate(-4deg) translateX(-30px); z-index: 2; background: linear-gradient(135deg, #e8e6e1, #f5f5f3); }
.hero-card-2 { transform: rotate(4deg) translateX(30px); z-index: 1; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); color: var(--pure-white); }
.hero-card-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; }
.hero-card-price { font-size: var(--fs-lg); font-weight: 800; margin-top: var(--sp-1); }

.section-title.fashion { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-6); }
.section-title.fashion h2 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.link-arrow { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dark-charcoal); }
.link-arrow:hover { text-decoration: underline; }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 640px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card { position: relative; height: 320px; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; padding: var(--sp-6); text-decoration: none; color: inherit; background: var(--light-indigo); }
.cat-card:hover { text-decoration: none; }
.cat-tshirts { background: linear-gradient(135deg, #f5f5f3 0%, #e8e6e1 100%); }
.cat-shirts { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); color: var(--pure-white); }
.cat-shirts h3, .cat-shirts p, .cat-shirts .cat-cta { color: var(--pure-white); }
.cat-card-inner h3 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.02em; margin: 0; }
.cat-card-inner p { font-size: var(--fs-sm); opacity: 0.7; margin-top: var(--sp-1); }
.cat-cta { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 640px) { .collection-grid { grid-template-columns: 1fr; } }
.collection-card { position: relative; height: 280px; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: block; }
.collection-card-bg { position: absolute; inset: 0; }
.collection-card.dark { color: var(--pure-white); }
.collection-card-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-6); }
.collection-card-content h3 { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -0.01em; margin: 0; }
.collection-card-content p { font-size: var(--fs-sm); opacity: 0.7; margin-top: 4px; }

.studio-teaser { background: var(--dark-charcoal); color: var(--pure-white); padding: var(--sp-9) 0; margin: var(--sp-9) 0; }
.studio-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 800px) { .studio-teaser-inner { grid-template-columns: 1fr !important; gap: 20px !important; } }
@media (max-width: 640px) { .studio-teaser-inner { padding: 0 16px !important; } }
.studio-teaser h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.studio-preview { display: flex; align-items: center; justify-content: center; }
.studio-shirt { width: 280px; height: 360px; background: var(--pure-white); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--dark-charcoal); position: relative; }
.studio-shirt-label { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); border: 1px dashed var(--ink-300); padding: 6px 12px; border-radius: var(--r-full); }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); text-align: center; padding: var(--sp-6) 0; border-top: 1px solid var(--light-indigo); border-bottom: 1px solid var(--light-indigo); }
@media (max-width: 700px) { .trust-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .trust-grid { gap: 12px !important; padding: 16px 12px !important; } }
.trust-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--light-indigo); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); font-size: 20px; }
.trust-item h4 { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.accent-link { background: var(--dark-charcoal) !important; color: var(--pure-white) !important; border-radius: var(--r-full); padding: 8px 16px !important; }
.accent-link:hover { background: #1a1a1a !important; }

/* ── Custom Studio — T-shirt shaped, fully responsive ── */
.custom-layout { display: grid; grid-template-columns: 310px minmax(0,1fr) 330px; gap: 20px; align-items: start; max-width: 100%; width: 100%; box-sizing: border-box; }
.custom-left, .custom-center, .custom-right { min-width: 0; max-width: 100%; }
@media (max-width: 1100px) { .custom-layout { grid-template-columns: 280px minmax(0,1fr); } .custom-right { grid-column: 1 / -1; } }
@media (max-width: 760px) { .custom-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .custom-center{ order:-1; }
  .custom-left{ order:0; }
  .custom-right{ order:1; }
}
.custom-controls { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }
.tee-card { background: #fff !important; border: 1.5px solid #e2e8f0 !important; border-radius: 14px !important; overflow: hidden; max-width: 100%; box-sizing: border-box; }
.tee-card .input, .tee-card select.input { max-width: 100%; box-sizing: border-box; }
.tee-h { color: #0f172a !important; font-size: 16px; margin: 0 0 4px; }
.tee-sub { font-size: 13px; margin: 0 0 10px; }
.tee-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tee-title { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; font-size: clamp(20px,4vw,28px); }
.tee-sub2 { margin: 4px 0 0; }
.custom-preview-wrap { background: #f8faf5; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; }
.custom-preview-header { width: 100%; max-width: 100%; margin-bottom: 12px; box-sizing: border-box; }
.tee-live { background: #f0f9ff; padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid #bae6fd; max-width: 100%; box-sizing: border-box; }
.tee-live-title { color: #0369a1; margin-bottom: 2px; font-size: 15px; }
.tee-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.tee-seg-ctrl { display: flex; background: #eef2f7; border-radius: 999px; padding: 4px; gap: 4px; flex: 1 1 auto; min-width: 0; max-width: 340px; box-sizing: border-box; }
.tee-seg { flex: 1; border: none; background: transparent; padding: 10px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: #64748b; cursor: pointer; white-space: nowrap; min-height: 44px; }
.tee-seg.active { background: #1e3a5f; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tee-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tee-stage { width: 100%; display: flex; justify-content: center; overflow: hidden; padding: 8px 0 4px; box-sizing: border-box; }
.tee-body { position: relative; width: min(340px, 92vw); aspect-ratio: 300/330; transition: transform 0.2s ease; transform-origin: center top; }
.tee-svg { position: absolute; inset: 0; filter: drop-shadow(0 10px 22px rgba(15,23,42,0.16)); }
.tee-svg svg { width: 100%; height: 100%; display: block; }
.tee-print { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); width: 46%; height: 44%; border: 1.5px dashed rgba(15,23,42,0.28); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,0.14); box-sizing: border-box; touch-action: none; }
.tee-print.drag-over { border-color: var(--primary-denim); background: rgba(43,76,126,0.08); }
.print-guide { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15,23,42,0.35); font-weight: 800; pointer-events: none; white-space: nowrap; }
.custom-empty { text-align: center; color: #64748b; padding: 12px 8px; max-width: 100%; }
.custom-el { position: absolute; padding: 4px; border: 1.5px solid transparent; border-radius: 6px; cursor: move; user-select: none; touch-action: none; max-width: 96%; }
.custom-el.selected { border-color: #2B4C7E; background: rgba(43,76,126,0.07); }
.custom-el.dragging { opacity: 0.9; z-index: 10; }
.el-del, .el-dup, .el-scale { position: absolute; width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 50%; border: none; background: #10141d; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); line-height: 1; }
.el-del { top: -12px; right: -12px; background: #dc2626; }
.el-dup { top: -12px; left: -12px; }
.el-scale { bottom: -12px; right: -12px; }
.el-scale.el-minus { right: 20px; }
.tee-hint { margin-top: 12px; padding: 12px 14px; background: #fef3c7; border-radius: 10px; border: 1px solid #fde68a; width: 100%; max-width: 460px; box-sizing: border-box; }
.tee-hint-title { color: #92400e; margin-bottom: 4px; }
.tee-hint-list { color: #78350f; margin: 4px 0 0 16px; list-style: disc; display: flex; flex-direction: column; gap: 2px; }
.tee-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; }
@media (max-width: 480px) { .tee-colors { grid-template-columns: repeat(4, 1fr); } }
.tee-color-cell { text-align: center; min-width: 0; }
.tee-color-label { margin-top: 3px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tee-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tee-inline { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.tee-inline .input { flex: 1 1 120px; min-width: 0; }
.tee-colorpick { display: flex; align-items: center; gap: 6px; }
.tee-color-input { width: 44px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; }
.tee-range { flex: 1 1 100px; min-width: 80px; }
.tee-summary { position: sticky; top: calc(var(--nav-h) + 16px); max-width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) { .tee-summary { position: static; } }
.tee-prod { margin-top: 12px; align-items: center; }
.tee-prod-img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.tee-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tee-cta { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 14px; }
@media (max-width: 420px) { .tee-cta { grid-template-columns: 1fr; } .tee-bar { flex-direction: column; align-items: stretch; } .tee-seg-ctrl { max-width: none; } .tee-tools { justify-content: center; } }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); transition: transform 0.2s ease-in; margin: 0 auto; display: block; min-width: 30px; min-height: 30px; }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0f172a; }
.field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); }
/* Wishlist centered empty */
.wish-wrap { width: 100%; }
.wish-empty-center { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 40vh; }
.wish-empty-center .empty { margin: 0 auto; text-align: center; }

/* Enhanced Admin Dashboard */
.stat { background: linear-gradient(135deg, var(--pure-white) 0%, #f8fafc 100%); padding: 24px; border-radius: 16px; box-shadow: 0 4px 12px rgba(28,37,65,0.08), 0 0 0 1px rgba(28,37,65,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; min-width: 200px; }
.stat::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: linear-gradient(135deg, rgba(43,76,126,0.1) 0%, rgba(74,111,165,0.05) 100%); border-radius: 0 0 0 100%; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(28,37,65,0.12), 0 0 0 1px rgba(43,76,126,0.2); }
.stat .v { font-size: 2.25rem; font-weight: 800; font-family: var(--font-display); background: linear-gradient(135deg, var(--dark-charcoal) 0%, #334155 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; position: relative; z-index: 1; }
.stat .l { font-size: 0.875rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; position: relative; z-index: 1; }
@media (max-width: 768px) { .stat { min-width: 150px; padding: 20px; } .stat .v { font-size: 1.75rem; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab { flex-shrink: 0; } .table { font-size: 0.875rem; } .table td, .table th { padding: 12px 8px; } }

/* Shop mobile filter button */
.filter-mobile-btn { display: none !important; }
@media (max-width: 900px) {
  .filter-mobile-btn { display: inline-flex !important; }
  .shop-sidebar { display: none !important; }
  .split[style*="260px"] { grid-template-columns: 1fr !important; }
}
/* Drawer (cart) — 0.2s ease-in for CTA */
.drawer__panel { background: var(--pure-white); box-shadow: -8px 0 32px rgba(28,37,65,0.12); }

/* ── Global responsive fixes — phones / tablets — prevent overflow ── */
html, body { overflow-x: hidden; max-width: 100vw; }
#main, .container, .container-narrow, .feed-section, .cat-bubbles, section.hero, .cat-grid, .collection-grid, .custom-layout, .studio-teaser-inner, .trust-grid, .pdp, .split { max-width: 100%; box-sizing: border-box; }

/* Category bubbles — smaller on phones, no long horizontal overflow */
@media (max-width: 640px) {
  .cat-bubbles { gap: 12px; padding: 16px 12px; }
  .cat-bubble { flex: 0 0 64px; gap: 6px; }
  .cat-bubble__circle { width: 64px; height: 64px; }
  .cat-bubble__label { font-size: 11px; line-height: 1.2; }
}
@media (max-width: 380px) {
  .cat-bubble { flex: 0 0 56px; }
  .cat-bubble__circle { width: 56px; height: 56px; }
}

/* Category cards — avoid long tall rectangles on phone */
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .cat-card { height: 180px; padding: 16px; border-radius: 12px; }
  .cat-card-inner h3 { font-size: 16px; }
  .cat-card-inner p { font-size: 12px; }
}
@media (max-width: 380px) {
  .cat-card { height: 160px; padding: 12px; }
}

/* Studio teaser — stack and keep preview inside viewport */
@media (max-width: 640px) {
  .studio-teaser-inner { grid-template-columns: 1fr !important; gap: 20px; padding: 0 16px; }
  .studio-shirt { width: 100%; max-width: 260px; height: 320px; }
  .studio-teaser { padding: 32px 0; }
  .studio-teaser h2 { font-size: 28px !important; }
}

/* Feed / product grid — ensure 2 cols fit without overflow */
@media (max-width: 640px) {
  .feed-section { padding: 16px 12px; }
  .grid-products { gap: 10px !important; }
  .product-card { border-radius: 10px; }
  .product-thumb { aspect-ratio: 1 / 1.15; }
  .product-body { padding: 10px 10px 12px; }
  .product-name { font-size: 13px; min-height: 2.2em; }
}

/* Hero — ensure text not cut off on small screens */
@media (max-width: 640px) {
  section.hero { padding: 24px 16px 20px !important; gap: 16px !important; min-height: auto !important; height: auto !important; }
  .hero-copy { gap: 10px; }
  .hero-copy h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 0.95; }
  .hero-copy p { font-size: 13px !important; }
  .hero-art { height: auto !important; min-height: 220px; }
  .hero-art img { max-height: 240px !important; width: 100% !important; max-width: 280px !important; }
}

/* Split layouts — checkout, profile, shop */
@media (max-width: 900px) {
  .split { gap: 16px; }
  .split > * { min-width: 0; }
}
@media (max-width: 640px) {
  .pdp { gap: 16px; }
  .footer-grid { gap: 16px; padding: 24px 16px; }
  .trust-grid { gap: 12px; padding: 16px 12px; }
  .collection-grid { gap: 12px; }
  .collection-card { height: 200px; }
}

/* Tables and cards — horizontal scroll only where needed */
.table, .admin-table, . stat { max-width: 100%; }
@media (max-width: 640px) {
  .table th, .table td { padding: 8px 10px; font-size: 13px; }
  .card-pad { padding: 16px; }
}

/* Modal — fit within viewport on phones */
@media (max-width: 480px) {
  .modal { margin: 12px; width: calc(100% - 24px); max-height: calc(100vh - 24px); padding: 16px; }
  .overlay { padding: 12px; }
}

/* ── SHOP mobile catastrophe FIX — hide desktop sidebar, polish header ── */
.shop-header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.shop-header__left { display:flex; flex-direction:column; gap:2px; }
.shop-header__right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.shop-header__right select { min-width:160px; border-radius:999px; background:rgb(245,247,240); color:rgb(16,20,29); border:1px solid #dde3ef; padding:10px 14px; }
@media (max-width: 640px){
  .shop-header { align-items:stretch; }
  .shop-header__right { width:100%; justify-content:space-between; }
  .shop-header__right select { flex:1; max-width:none !important; width:100%; }
  .filter-mobile-btn { flex:0 0 auto; border-radius:999px !important; padding:10px 16px !important; font-weight:700 !important; }
}
@media (max-width: 900px){
  .shop-sidebar { display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; border:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; }
  .split[style*="260px"]{ grid-template-columns:1fr !important; gap:12px !important; }
}
/* Ensure sidebar filter groups don't create giant white card on mobile */
@media (max-width: 900px){
  .sidebar:not(.shop-sidebar){ padding:10px 12px !important; gap:8px !important; border-radius:12px !important; }
  .sidebar:not(.shop-sidebar) .filter-title{ display:none; }
}

/* ── CART / CHECKOUT / WISHLIST / PDP — mobile polish ── */
@media (max-width: 720px){
  .split { grid-template-columns:1fr !important; }
  /* Cart rows */
  .card[style*="display: flex"][style*="gap: 16px"]{ gap:12px !important; padding:12px !important; }
  .card[style*="display: flex"][style*="gap: 16px"] .product-thumb{ width:72px !important; height:72px !important; }
  .card[style*="display: flex"][style*="gap: 16px"] .input[type="number"]{ width:56px !important; }
  /* Summary boxes should not be sticky on mobile */
  .split > div > .card[style*="position: sticky"]{ position:static !important; }
  [style*="position: sticky"][class*="card"]{ position:static !important; }
}
@media (max-width: 480px){
  .card[style*="display: flex"][style*="gap: 16px"]{ flex-wrap:wrap; }
  .card[style*="display: flex"][style*="gap: 16px"] > div:last-child{ flex-direction:row !important; width:100%; justify-content:space-between; align-items:center; }
  /* PDP */
  .pdp-gallery{ border-radius:12px; }
  .pdp-gallery img{ border-radius:12px; }
}
@media (max-width: 640px){
  /* Checkout form grids inline style 1fr 1fr -> stack */
  div[style*="gridTemplateColumns: 1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }
  /* Coupon row */
  .row.gap-2[style*="margin: 12px 0"] .input{ flex:1; min-width:0; }
}
/* Shop cards — clean tee-only, no overflow on mobile */
@media (max-width: 768px){
  .product-thumb{ padding-bottom:0; }
  .product-card { min-width: 0; }
  .product-body { min-width: 0; }
}
/* Category bar — polish scroll on mobile */
@media (max-width: 640px){
  .category-bar{ scrollbar-width:none; -ms-overflow-style:none; }
  .category-bar::-webkit-scrollbar{ display:none; }
  .category-bar > div{ gap:14px !important; padding:10px 12px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .category-bar a{ scroll-snap-align:start; font-size:13px !important; }
}
/* Topbar polish */
@media (max-width: 480px){
  .topbar-inner{ height:56px !important; padding:0 12px !important; gap:8px !important; }
  .brand{ font-size:18px !important; letter-spacing:0.08em !important; }
  .nav-actions{ gap:6px !important; }
  .icon-btn{ width:38px !important; height:38px !important; }
  .announcement, header .topbar + div{ font-size:11px !important; padding:6px 12px !important; }
}
@media (max-width: 360px){
  .topbar-inner{ padding:0 10px !important; }
  .icon-btn{ width:36px !important; height:36px !important; font-size:14px; }
}
/* Footer tightening on mobile */
@media (max-width: 640px){
  .footer .container{ padding:24px 16px !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:20px !important; }
  .footer-grid > div:first-child{ grid-column:1 / -1; }
}
@media (max-width: 380px){
  .footer-grid{ grid-template-columns:1fr !important; }
}
/* Toast position on mobile */
@media (max-width: 480px){
  #toast-root{ left:12px !important; right:12px !important; top:70px !important; }
  .toast{ min-width:0 !important; width:100%; }
}
/* Ensure all images don't overflow */
@media (max-width: 640px){
  img{ max-width:100%; }
  .container, .container-narrow{ padding:0 14px !important; }
  .section{ padding:18px 0 !important; }
  h1{ font-size:22px !important; }
  h2{ font-size:18px !important; }
  .btn-lg{ padding:12px 18px !important; font-size:14px !important; }
}
/* Checkout address card stacking */
@media (max-width: 480px){
  label.row.gap-3[style*="padding: 12px"]{ padding:10px !important; }
}
/* Filter modal grids — make 4-col become 3 on small phones */
@media (max-width: 380px){
  div[style*="repeat(4, 1fr)"]{ grid-template-columns:repeat(3, 1fr) !important; }
  div[style*="repeat(4,1fr)"]{ grid-template-columns:repeat(3, 1fr) !important; }
}

/* ── PROFILE / ORDERS / AUTH / SEARCH — mobile finesse ── */
@media (max-width: 640px){
  /* Profile: avatar row stack? keep row but tighten */
  .split[style*="240px"] { grid-template-columns:1fr !important; }
  /* Auth cards full bleed */
  .container-narrow .card.elevated[style*="max-width: 460px"],
  .container-narrow .card.elevated[style*="max-width: 480px"]{ max-width:100% !important; margin:0 12px !important; }
  .container-narrow.section{ padding-left:12px !important; padding-right:12px !important; }
  /* Orders grid gap */
  .col.gap-4{ gap:12px !important; }
}
@media (max-width: 480px){
  /* Profile address inputs + button stack */
  .card .row.gap-2.wrap .input{ flex:1 1 100% !important; min-width:0 !important; }
  .card .row.gap-2.wrap .btn{ width:100%; }
  /* Profile designs cards: stack content */
  .col.gap-3 .card[style*="display: flex"]{ flex-wrap:wrap; }
  .col.gap-3 .card[style*="display: flex"] > div.grow{ min-width:0; flex:1 1 100%; }
  .col.gap-3 .card[style*="display: flex"] > div.col.gap-2{ flex-direction:row !important; flex-wrap:wrap; width:100%; }
  .col.gap-3 .card[style*="display: flex"] > div.col.gap-2 .btn{ flex:1 1 auto; }
  /* Orders detail narrow container */
  .container-narrow.section{ padding:16px 12px !important; }
  .timeline{ padding-left:4px; }
  .card.card-pad{ padding:14px !important; }
  /* Search suggestion chips */
  .chip{ padding:7px 10px !important; font-size:13px !important; }
  /* PDP size/color rows wrap tighter */
  .row.gap-2.wrap{ gap:8px !important; }
}
@media (max-width: 360px){
  .tabs{ gap:4px !important; }
  .tab{ padding:10px 12px !important; font-size:13px !important; }
}

/* ── TABLE / STAT responsive extra ── */
@media (max-width: 640px){
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .table th, .table td{ white-space:nowrap; }
}
/* Ensure sidebar horizontal scroll has snap */
@media (max-width: 900px){
  .sidebar:not(.shop-sidebar){ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .sidebar:not(.shop-sidebar) a{ scroll-snap-align:start; }
}
/* Category bar fade hint + footer avoid bottom-nav overlap */
@media (max-width: 720px){
  .category-bar{ position:relative; }
  .category-bar::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:28px; background:linear-gradient(90deg, transparent, rgb(245,247,240)); pointer-events:none; opacity:0.9; }
  .footer{ padding-bottom: var(--bottom-nav-h); }
}
@media (max-width: 640px){
  #toast-root{ top:68px !important; }
}

/* ── Tablet dedicated polish 641–1024 — ensure no overflow, 3-col grid fits ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .container, .container-narrow { padding: 0 20px !important; }
  .grid-products { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .custom-layout { grid-template-columns: 1fr 1fr !important; }
  .custom-right { grid-column: auto !important; }
  .pdp { grid-template-columns: 1fr 1fr; gap: 20px; }
  .trust-grid { grid-template-columns: repeat(4, 1fr) !important; }
  section.hero { height: auto !important; min-height: 560px; padding: 48px 32px !important; }
  .hero-art { height: 420px !important; }
  .split { gap: 20px; }
  .shop-sidebar { display: block !important; }
}
@media (min-width: 900px) and (max-width: 1024px) {
  .admin-cards { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Ensure all flex/grid don't overflow on any breakpoint */
* { min-width: 0; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }