/* ==========================================================================
   TUKTAKSHOPPING.COM — Design tokens
   Identity: inspired by Bangladeshi rickshaw art — bold flat color blocks,
   scalloped dividers, hand-painted energy — kept disciplined and modern.
   ========================================================================== */
:root {
  --ink: #12312C;          /* deep rickshaw-hood teal */
  --ink-soft: #3E5C56;
  --marigold: #F2A93B;     /* rickshaw decorative gold */
  --marigold-dark: #D98F1F;
  --coral: #E8543E;        /* rickshaw floral red-orange, used for sale/CTA */
  --coral-dark: #C8402C;
  --paper: #FAFAF7;
  --paper-soft: #F1EEE6;
  --border: #E5E1D6;
  --text: #1D2624;
  --text-muted: #6B7570;
  --white: #FFFFFF;
  --success: #2F8F5B;
  --danger: #D64545;

  --font-display: 'Poppins', 'Hind Siliguri', sans-serif;
  --font-body: 'Hind Siliguri', 'Poppins', sans-serif;
  --font-bengali: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(18,49,44,.06);
  --shadow-md: 0 8px 24px rgba(18,49,44,.10);
  --shadow-lg: 0 16px 48px rgba(18,49,44,.16);
  --header-h: 76px;
}

[data-theme="dark"] {
  --paper: #12181A;
  --paper-soft: #182220;
  --border: #263531;
  --text: #EFEDE6;
  --text-muted: #9AA6A1;
  --white: #1A2422;
  --ink: #0C221E;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; color: var(--ink); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3 { color: var(--white); }
p { color: var(--text-muted); }
:lang(bn), .bengali-text { font-family: var(--font-bengali); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--coral-dark); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #0B211D; }
.btn-marigold { background: var(--marigold); color: var(--ink); }
.btn-marigold:hover { background: var(--marigold-dark); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
[data-theme="dark"] .btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Announcement + Header ---------- */
.announcement-bar {
  background: var(--ink); color: var(--marigold); text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .3px; padding: 8px 12px;
}
.site-header {
  position: sticky; top: 0; z-index: 200; background: var(--paper);
  border-bottom: 1px solid var(--border); height: var(--header-h);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); flex-shrink: 0; }
[data-theme="dark"] .logo { color: var(--white); }
.logo span { color: var(--coral); }
.main-nav { display: none; gap: 22px; margin-left: 10px; flex: 1; }
.main-nav a { font-weight: 600; font-size: 14.5px; color: var(--text); padding: 8px 0; position: relative; }
.main-nav a:hover, .main-nav a.active { color: var(--coral); }
.main-nav a.nav-highlight { color: var(--coral); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.icon-btn:hover { background: var(--paper-soft); }
.cart-badge {
  position: absolute; top: -2px; right: -2px; background: var(--coral); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.mobile-nav-toggle { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; }
.mobile-nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
[data-theme="dark"] .mobile-nav-toggle span { background: var(--white); }

@media (min-width: 960px) {
  .mobile-nav-toggle { display: none; }
  .main-nav { display: flex; }
}
.main-nav.open {
  display: flex; flex-direction: column; position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid var(--border); padding: 12px 20px 20px; gap: 4px;
  box-shadow: var(--shadow-md);
}
.main-nav.open a { padding: 10px 4px; border-bottom: 1px solid var(--border); }

/* Keep the mobile header lean so it never overflows the viewport width —
   Track Order / Wishlist / Cart / Account are all reachable via the bottom
   tab bar and the account page, so they don't need to also crowd the header
   on small screens. Login stays visible since it isn't in the tab bar. */
@media (max-width: 720px) {
  .hide-on-mobile-header { display: none; }
  .header-inner { gap: 10px; }
  .container.header-inner { padding: 0 14px; }
  .logo { font-size: 19px; }
}
@media (max-width: 360px) {
  .logo { font-size: 17px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 56px 0 40px;
  background: linear-gradient(180deg, var(--ink) 0%, #0E2925 100%);
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--paper) 13.5px);
  background-size: 26px 26px; background-repeat: repeat-x;
}
.hero-inner { display: grid; gap: 30px; align-items: center; position: relative; z-index: 2; }
.hero-eyebrow { display: inline-block; background: var(--marigold); color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { color: #fff; font-size: clamp(32px, 6vw, 58px); line-height: 1.05; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--marigold); }
.hero p { color: #D9E4E0; font-size: 17px; max-width: 480px; margin-bottom: 26px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art svg { width: 100%; max-width: 420px; }
@media (min-width: 860px) { .hero-inner { grid-template-columns: 1.1fr .9fr; } }

/* ---------- Hero Slider (banner carousel) — 5 rotating transition effects ---------- */
.hero-slider { position: relative; overflow: hidden; aspect-ratio: 1600 / 600; background: var(--ink); perspective: 1400px; }
.hero-slider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 3;
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--paper) 13.5px);
  background-size: 26px 26px; background-repeat: repeat-x; pointer-events: none;
}
.hero-slider-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 1; overflow: hidden;
  backface-visibility: hidden; transform-style: preserve-3d;
  transition: opacity .7s ease, transform .7s ease;
}
.hero-slide img, .hero-slide a { display: block; width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; will-change: transform; }
.hero-slide.active { opacity: 1; z-index: 2; }

/* Effect 1: fade (default resting state — plain crossfade) */
.hero-slide.fx-fade { transform: none; }

/* Effect 2: zoom — incoming slide scales down from 1.12 to 1 while fading in */
.hero-slide.fx-zoom { transform: scale(1.12); }
.hero-slide.fx-zoom.active { transform: scale(1); }

/* Effect 3: ken-burns — slow continuous pan+zoom on the image while displayed */
.hero-slide.fx-kenburns.active img { animation: heroKenBurns 6s ease-in-out forwards; }
@keyframes heroKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.5%, -1%); }
}

/* Effect 4: flip — incoming slide rotates in around the Y axis */
.hero-slide.fx-flip { transform: rotateY(90deg); }
.hero-slide.fx-flip.active { transform: rotateY(0deg); }

/* Effect 5: slide-over — incoming slide slides in from the right, covering the previous one */
.hero-slide.fx-slideover { transform: translateX(100%); opacity: 1; z-index: 3; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.hero-slide.fx-slideover.active { transform: translateX(0); }
.hero-slide.fx-slideover.leaving { transform: translateX(0); opacity: 1; z-index: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.active, .hero-slide.fx-kenburns.active img { transition: opacity .3s ease !important; animation: none !important; transform: none !important; }
}

.hero-slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.85);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 18px; transition: background .15s;
}
.hero-slider-nav:hover { background: #fff; }
.hero-slider-nav.prev { left: 16px; }
.hero-slider-nav.next { right: 16px; }
.hero-slider-dots { position: absolute; bottom: 34px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.hero-slider-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; cursor: pointer; padding: 0; transition: background .15s, width .15s; }
.hero-slider-dot.active { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 640px) {
  .hero-slider-nav { width: 32px; height: 32px; font-size: 15px; }
  .hero-slider-dots { bottom: 20px; }
}

/* ---------- Floating shopping cart button (desktop only — mobile already
   has the cart in the bottom tab bar, so this would just be redundant clutter) ---------- */
.floating-cart-btn {
  display: none;
  position: fixed; right: 26px; bottom: 26px; z-index: 220;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--coral); color: #fff;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(232,84,62,.4);
  animation: floatBob 3s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.floating-cart-btn:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(232,84,62,.5); animation-play-state: paused; }
.floating-cart-btn.bump { animation: cartBump .55s ease; }
.floating-cart-badge {
  position: absolute; top: -4px; right: -4px; background: var(--marigold); color: var(--ink);
  font-size: 11.5px; font-weight: 800; min-width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2.5px solid var(--paper);
}
@keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cartBump {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.28) rotate(-10deg); }
  50% { transform: scale(0.92) rotate(6deg); }
  75% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (min-width: 721px) {
  .floating-cart-btn { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cart-btn { animation: none; }
  .floating-cart-btn.bump { animation: none; }
}

/* ---------- Mobile bottom tab bar ---------- */
.mobile-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(18,49,44,.08);
}
.mobile-tabbar-inner { display: flex; justify-content: space-around; align-items: center; }
.mobile-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  min-width: 56px; padding: 4px 2px; position: relative;
}
.mobile-tab.active { color: var(--coral); }
.mobile-tab .mobile-tab-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.mobile-tab .mobile-tab-icon svg { width: 22px; height: 22px; }
.mobile-tab .mobile-tab-badge {
  position: absolute; top: -2px; right: 6px; background: var(--coral); color: #fff;
  font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.mobile-tab-center {
  width: 50px; height: 50px; border-radius: 50%; background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: -22px;
  box-shadow: 0 4px 12px rgba(232,84,62,.4);
}
.mobile-tab-center svg { width: 24px; height: 24px; }
@media (max-width: 720px) {
  .mobile-tabbar { display: block; }
  body { padding-bottom: 74px; }
  .site-footer { padding-bottom: 74px; }
}

/* ---------- Sticky mobile add-to-cart bar (product page) ---------- */
.mobile-sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items: center; gap: 10px;
  box-shadow: 0 -4px 16px rgba(18,49,44,.1);
}
.mobile-sticky-cta .price { font-family: var(--font-display); font-weight: 700; color: var(--coral); font-size: 17px; white-space: nowrap; }
.mobile-sticky-cta .btn { flex: 1; }
@media (max-width: 720px) {
  .mobile-sticky-cta.enabled { display: flex; }
  .mobile-sticky-cta.enabled ~ .mobile-tabbar { display: none; }
  body:has(.mobile-sticky-cta.enabled) { padding-bottom: 74px; }
}

/* ---------- Touch target + table overflow safety ---------- */
@media (max-width: 720px) {
  .icon-btn { width: 44px; height: 44px; }
  .color-swatch { width: 34px; height: 34px; }
  .btn-icon-row button { min-height: 40px; }
  .qty-stepper button { width: 38px; height: 38px; font-size: 18px; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table.data-table { min-width: 560px; }

  /* Declutter the mobile header — the bottom tab bar already covers Cart/Account/Shop,
     so only the cart icon (with its live badge) stays in the top header. This also
     fixes a real overflow bug: cramming hamburger + logo + 4 icon buttons + a Login
     button into one row was wider than most phone screens, forcing the whole page
     to scroll horizontally and clip content on the left edge. */
  .header-inner { gap: 10px; }
  .header-actions { gap: 4px; }
  .header-actions .icon-btn:not(.cart-icon) { display: none; }
  .header-actions > .btn-outline { display: none; }
  .logo { font-size: 18px; }
}

/* ---------- 3D Preview Modal ---------- */
#threeDOverlay { position: fixed; inset: 0; background: rgba(18,49,44,.65); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
#threeDOverlay.open { display: flex; }
.td-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.td-modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.td-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.td-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.td-badge-good { background: #DFF6E6; color: #1D8A4B; }
.td-badge-stylized { background: #FFF1D6; color: #93650B; }
.td-close { margin-left: auto; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 4px; }
.td-canvas-wrap { width: 100%; height: 420px; background: #F1EEE6; touch-action: none; }
.td-hint { text-align: center; font-size: 12px; color: var(--text-muted); padding: 10px; margin: 0; }
@media (max-width: 640px) { .td-canvas-wrap { height: 320px; } }

/* ---------- Mobile "classic app" utilities ---------- */
.mobile-only { display: none; }
.desktop-only { display: block; }
@media (max-width: 720px) {
  .mobile-only { display: block; }
  .mobile-only.flex { display: flex; }
  .desktop-only { display: none; }
}

/* Persistent mobile search bar (Daraz/Alibaba-style) */
.mobile-search-bar { padding: 8px 14px 12px; background: var(--paper); }
.mobile-search-bar form { display: flex; align-items: center; gap: 8px; background: var(--paper-soft); border-radius: 999px; padding: 10px 16px; border: 1px solid var(--border); }
.mobile-search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.mobile-search-bar input { flex: 1; border: none; background: none; font-size: 13.5px; color: var(--text); outline: none; font-family: var(--font-body); }
.mobile-search-bar input::placeholder { color: var(--text-muted); }

/* Daraz-style category icon grid */
.mobile-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 16px 14px 4px; }
.mobile-cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mobile-cat-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--paper-soft); display: flex; align-items: center; justify-content: center; font-size: 26px; border: 1px solid var(--border); }
.mobile-cat-label { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2; }

/* Flash sale strip */
.flash-sale-strip {
  background: linear-gradient(135deg, var(--coral), var(--coral-dark)); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 0 14px 4px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.flash-sale-strip .fs-text strong { font-family: var(--font-display); font-size: 16px; display: block; }
.flash-sale-strip .fs-text span { font-size: 11.5px; opacity: .9; }
.flash-sale-strip .fs-link { background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }

/* Horizontal-scroll product feed strips (mobile "app feed" style) */
@media (max-width: 720px) {
  .mobile-scroll-section { padding-left: 14px; }
  .mobile-scroll-section .section-head { padding-right: 14px; }
  .product-grid-scroll-mobile {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px; padding-right: 14px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .product-grid-scroll-mobile::-webkit-scrollbar { display: none; }
  .product-grid-scroll-mobile .product-card { flex: 0 0 44%; scroll-snap-align: start; }
}

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: clamp(22px,3.2vw,32px); }
.section-head .eyebrow { color: var(--coral); font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.view-all { font-weight: 600; color: var(--coral); font-size: 14px; }

/* Category grid */
.category-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (min-width:640px){ .category-grid{ grid-template-columns: repeat(4,1fr);} }
@media (min-width:960px){ .category-grid{ grid-template-columns: repeat(6,1fr);} }
.category-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 12px; text-align: center; transition: transform .15s, box-shadow .15s;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--marigold); }
.category-card .cat-icon {
  width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--paper-soft);
  display: flex; align-items: center; justify-content: center; color: var(--coral);
}
.category-card span { font-weight: 600; font-size: 13.5px; }

/* Product grid + card */
.product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
@media (min-width:640px){ .product-grid{ grid-template-columns: repeat(3,1fr);} }
@media (min-width:960px){ .product-grid{ grid-template-columns: repeat(4,1fr);} }

/* Shop page: denser, medium-sized cards — 6 per row on desktop instead of 4,
   with tighter spacing and slightly smaller text/thumbnails to match. */
@media (min-width:640px){ .shop-product-grid{ grid-template-columns: repeat(4,1fr); gap: 14px;} }
@media (min-width:960px){ .shop-product-grid{ grid-template-columns: repeat(5,1fr);} }
@media (min-width:1200px){ .shop-product-grid{ grid-template-columns: repeat(6,1fr);} }
.shop-product-grid .product-body { padding: 10px; gap: 4px; }
.shop-product-grid .product-name { font-size: 13px; }
.shop-product-grid .price-now { font-size: 14px; }
.shop-product-grid .product-actions { padding: 0 10px 10px; }
.shop-product-grid .product-actions .btn { font-size: 11.5px; padding: 7px 6px; }

.product-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(18px);
}
.product-card.in-view { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--marigold); }
.product-thumb { position: relative; aspect-ratio: 1/1; background: var(--paper-soft); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-thumb img { transform: scale(1.08); }
.badge { position: absolute; top: 10px; left: 10px; background: var(--marigold); color: var(--ink); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; animation: badgePop .35s ease; }
.badge.sale { background: var(--coral); color: #fff; animation: badgePulse 2s ease-in-out infinite; }
@keyframes badgePop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.product-actions .btn { transition: transform .15s ease, background .15s ease; }
.product-actions .btn:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card.in-view, .product-thumb img, .badge, .badge.sale, .product-actions .btn {
    animation: none !important; transition: opacity .2s ease !important; transform: none !important;
  }
  .product-card { opacity: 1; }
}
.product-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-cat { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.product-name { font-weight: 600; font-size: 14.5px; color: var(--text); }
.product-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.price-now { font-weight: 700; color: var(--coral); font-family: var(--font-display); }
.price-old { text-decoration: line-through; color: var(--text-muted); font-size: 13px; }
.product-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.product-actions .btn { flex: 1; padding: 9px 8px; font-size: 12.5px; }

/* Why choose us */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width:768px){ .features-grid { grid-template-columns: repeat(4,1fr);} }
.feature-item { text-align: center; padding: 20px; }
.feature-item .f-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--marigold); color: var(--ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }

/* Reviews */
.review-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.review-card { min-width: 280px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.review-stars { color: var(--marigold); margin-bottom: 8px; }

/* Newsletter section */
.newsletter-section { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; margin: 0 20px; }
.newsletter-section h2 { color: #fff; }
.newsletter-form { display: flex; gap: 10px; max-width: 420px; margin: 18px auto 0; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 200px; padding: 12px 16px; border-radius: 999px; border: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-soft); border-top: 1px solid var(--border); margin-top: 60px; padding: 50px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
@media (min-width:768px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }
.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; }
.footer-col a { display: block; color: var(--text-muted); font-size: 14px; padding: 4px 0; }
.footer-col a:hover { color: var(--coral); }
.social-links { display: flex; gap: 12px; margin-top: 12px; }
.footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ---------- Generic layout utilities ---------- */
.page-header { padding: 30px 0; }
.page-header h1 { font-size: 28px; }
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--coral); }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width:900px){ .grid-2 { grid-template-columns: 1.1fr .9fr; } }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14.5px; background: var(--white); color: var(--text);
}
.form-control:focus { border-color: var(--marigold); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width:600px){ .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.alert-success { background: #E6F5EC; color: var(--success); border: 1px solid #BFE6CD; }
.alert-danger { background: #FBEAEA; color: var(--danger); border: 1px solid #F3C7C7; }
.alert-info { background: #EAF1FB; color: #2B5FA8; border: 1px solid #C7D9F3; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data-table th, table.data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.data-table th { font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--paper-soft); }
.status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pending{background:#FFF1D6;color:#93650B;} .status-confirmed{background:#DCEBFC;color:#1A5DAB;}
.status-design_verification{background:#F3E5FB;color:#7A2BAA;} .status-approved{background:#DFF6E6;color:#1D8A4B;}
.status-printing{background:#FDE6D2;color:#B15A15;} .status-quality_check{background:#E2F6F1;color:#0F7C64;}
.status-packed{background:#E8E4FB;color:#4C3AB0;} .status-shipped{background:#D9F0FE;color:#0A6FA8;}
.status-delivered{background:#DFF6E6;color:#1D8A4B;} .status-cancelled,.status-returned,.status-refunded{background:#FBE3E3;color:#B72525;}

/* ==========================================================================
   PRODUCT DESIGNER (Generic — works for any product's printable surfaces)
   ========================================================================== */
.designer-app { display: flex; flex-direction: column; height: 100vh; background: var(--paper-soft); }
.designer-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--ink); color: #fff; flex-wrap: wrap;
}
.designer-header .product-title { font-weight: 700; margin-right: auto; font-family: var(--font-display); }
.designer-header button, .designer-header .dh-btn {
  background: rgba(255,255,255,.1); border: none; color: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; display:flex; align-items:center; gap:6px;
}
.designer-header button:hover { background: rgba(255,255,255,.2); }
.designer-header button:disabled { opacity: .35; cursor: not-allowed; }
.designer-header .btn-save { background: var(--marigold); color: var(--ink); font-weight: 700; }

.designer-body { flex: 1; display: flex; overflow: hidden; }
.designer-toolbar {
  width: 72px; background: var(--white); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; overflow-y: auto; flex-shrink: 0;
}
.tool-btn {
  width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border-radius: 10px; cursor: pointer; font-size: 10.5px; color: var(--text-muted); background: none; border: none; font-family: inherit;
}
.tool-btn:hover, .tool-btn.active { background: var(--paper-soft); color: var(--coral); }

.designer-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; position: relative; padding: 20px; background: repeating-conic-gradient(var(--paper-soft) 0% 25%, var(--paper) 0% 50%) 0 0/24px 24px; }
.canvas-stage { position: relative; background: #fff; box-shadow: var(--shadow-lg); }
.print-area-boundary { position: absolute; border: 2px dashed var(--coral); pointer-events: none; }
.print-area-boundary::before { content: "Print Area"; position: absolute; top: -22px; left: 0; font-size: 10px; background: var(--coral); color: #fff; padding: 2px 8px; border-radius: 4px; }
.safe-area-boundary { position: absolute; border: 1px dotted var(--marigold-dark); pointer-events: none; }

.designer-right-panel { width: 280px; background: var(--white); border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; flex-shrink: 0; }
.designer-right-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 18px 0 8px; }
.designer-right-panel h4:first-child { margin-top: 0; }
.prop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.prop-row label { width: 70px; font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; }
.prop-row input[type=range] { flex: 1; }
.prop-row input[type=number], .prop-row select, .prop-row input[type=text] { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.color-swatch.active { border-color: var(--coral); }
.btn-icon-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-icon-row button { flex: 1; padding: 8px; border: 1px solid var(--border); background: var(--white); border-radius: 8px; cursor: pointer; }
.btn-icon-row button.active { background: var(--ink); color: #fff; }
.layer-list { display: flex; flex-direction: column; gap: 6px; }
.layer-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; border: 1px solid var(--border); }
.layer-item.active { border-color: var(--coral); background: #FFF3F0; }

.designer-bottom { background: var(--white); border-top: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.surface-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.surface-tab { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); cursor: pointer; font-size: 13px; font-weight: 600; }
.surface-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.designer-price { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--coral); }
.qty-input { width: 70px; padding: 8px; text-align: center; border: 1px solid var(--border); border-radius: 8px; }

.emoji-picker-panel, .upload-panel, .text-panel, .shapes-panel, .templates-panel { padding: 10px 0; }
.wordart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wordart-swatch {
  padding: 16px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper-soft);
  font-size: 15px; cursor: pointer; text-align: center; font-family: 'Poppins', sans-serif;
}
.wordart-swatch:hover { border-color: var(--marigold); background: #fff; }
.emoji-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; max-height: 220px; overflow-y: auto; }
.emoji-grid button { font-size: 22px; padding: 6px; border: none; background: none; cursor: pointer; border-radius: 6px; }
.emoji-grid button:hover { background: var(--paper-soft); }
.shape-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.shape-grid button { aspect-ratio: 1; border: 1px solid var(--border); background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Mobile designer layout: bottom-sheet UX rather than shrinking desktop chrome */
@media (max-width: 880px) {
  .designer-body { flex-direction: column; }
  .designer-toolbar {
    width: 100%; flex-direction: row; justify-content: flex-start; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
    order: 2; padding: 8px;
  }
  .tool-btn { flex-shrink: 0; }
  .designer-canvas-wrap { order: 1; flex: 1 1 auto; padding: 10px; }
  .designer-right-panel {
    order: 3; width: 100%; border-left: none; border-top: 1px solid var(--border);
    position: fixed; bottom: 0; left: 0; right: 0; max-height: 45vh; z-index: 100;
    transform: translateY(100%); transition: transform .25s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.15);
  }
  .designer-right-panel.open { transform: translateY(0); }
  .designer-bottom { order: 4; }
  .designer-header .product-title { font-size: 13px; }
  .designer-header .dh-label { display: none; }
}

/* Cart page */
.cart-item { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item img { border-radius: var(--radius-sm); aspect-ratio: 1/1; object-fit: cover; background: var(--paper-soft); }
.cart-item-meta { font-size: 13px; color: var(--text-muted); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-stepper button { width: 32px; height: 32px; border: none; background: var(--paper-soft); cursor: pointer; font-size: 16px; }
.qty-stepper input { width: 44px; text-align: center; border: none; background: none; }

.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14.5px; }
.summary-row.total { font-weight: 700; font-size: 17px; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; color: var(--ink); }

/* Account tabs */
.account-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 24px; }
.account-tabs a { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--border); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.account-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Utility */
.text-center{text-align:center;} .mt-0{margin-top:0;} .flex{display:flex;} .gap-8{gap:8px;} .gap-16{gap:16px;}
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }