/* =========================================
   TOPBAR COMPONENT
========================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(var(--paper-rgb), 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow 0.25s ease;
}

/* subtle elevation once the page scrolls (add .scrolled via JS if desired) */
.topbar.scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
}

/* Left side — hamburger */
.topbar-left {
  width: 64px;
  display: flex;
  align-items: center;
}

/* Center — brand name */
.topbar .logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: none;
  color: var(--brand-600);
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brand logo image — horizontal wordmark (5.77:1); max-width keeps it inside
   the flexible centre column on the narrowest phones */
.topbar .logo img {
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Right side — icons wrapper */
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 64px;
  /* Equal to topbar-left — keeps logo perfectly centered on mobile */
}

/* All topbar buttons */
.menu-btn,
.nav-search,
.nav-wishlist,
.nav-profile,
.nav-order {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-color);
  -webkit-appearance: none;
}

/* Bootstrap icon sizes & stroke for premium look */
.menu-btn i {
  font-size: 1.55rem;
  -webkit-text-stroke: 0.3px;
}

.nav-search i {
  font-size: 1.25rem;
  -webkit-text-stroke: 0.4px;
}

.nav-wishlist i {
  font-size: 1.25rem;
  -webkit-text-stroke: 0.4px;
}

.nav-profile i {
  font-size: 1.3rem;
  -webkit-text-stroke: 0.3px;
}

/* bi-person needs to be slightly larger but thinner to visually match the others */
.nav-order i {
  font-size: 1.25rem;
  -webkit-text-stroke: 0.4px;
}

/* Desktop-only elements hidden on mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  /* Mobile-only elements: always shown on mobile */
  .mobile-only {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* ─── Brand wordmark ──────────────────────────────────────────────────────
   topbar/sidemenu-এ ছবির বদলে **text** wordmark। কেন:
     · যেকোনো DPI-তে crisp — retina-র জন্য আলাদা @2x ফাইল লাগে না
     · একটাও extra request নেই (font এমনিতেই load হচ্ছে)
     · CDN/R2 path ভাঙলে logo উধাও হওয়ার ঝুঁকি নেই (আগে ঠিক সেটাই হয়েছিল — 404)
   ছবির logo লাগলে `/assets/logo-horizontal.png` আছে (invoice/email/3rd-party)। */
.logo-wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  /* letter-spacing শেষ অক্ষরের পরেও বসে — text-indent সেটা ভারসাম্য করে */
  color: var(--brand-500);
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

/* Stacked lockup (R + শিকড় / ROOT) — topbar 52px (mobile) / 64px (desktop)।
   width:auto রাখা হয়েছে যেন aspect ratio ঠিক থাকে; height-ই একমাত্র নিয়ন্ত্রক। */
.logo-lockup {
  height: 44px;   /* topbar 52px — উপরে-নিচে 4px শ্বাস */
  width: auto;
  display: block;
  object-fit: contain;
}

/* ─── Mobile-first: desktop-only elements hidden until ≥769px ─── */
/* topbar-nav and logo-desktop are desktop-only — base style hides them.
   The desktop @media block below restores them with display:flex/grid. */
.topbar-nav   { display: none; }
.logo-desktop { display: none; }

/* ═══════════════════════════════════════════════════════
   DESKTOP TOPBAR REDESIGN (≥769px)
   3-column: [Logo] | [Nav] | [SearchBox + Icons]
   Mobile layout above is completely unchanged.
═══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* Hide mobile-only elements on desktop */
  .mobile-only {
    display: none !important;
  }

  /* Taller header, 3-column grid */
  .topbar {
    height: 64px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
  }

  /* ── Left: Desktop Logo ── */
  .logo-desktop {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .logo-desktop .logo-lockup {
    height: 48px;
  }

  /* Mobile logo & hamburger — hidden on desktop */
  .logo-mobile,
  .topbar-left {
    display: none !important;
  }

  /* ── Center: Navigation ── */
  .topbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
  }

  .topbar-nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-700);
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    position: relative;
  }

  .topbar-nav-link:hover {
    color: var(--brand-600);
    background: var(--brand-50);
  }

  /* Active nav link — গোল্ড rule নিচে, pill নয়।
     Quiet-luxury: ভারী background pill web-app-এর মতো দেখায়; সরু gold underline
     brand-এর "gold শুধু premium detail-এ" নিয়মটাই মেনে চলে। */
  .topbar-nav-link.is-active {
    color: var(--brand-600);
    font-weight: 600;
    background: transparent;
  }

  .topbar-nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -2px;
    height: 1.5px;
    background: var(--accent-500);
  }

  /* Nav placeholder — collections আসার আগে layout যেন লাফ না দেয় (CLS) */
  .topbar-nav-slot {
    display: contents;
  }

  .topbar-nav-ph {
    width: 62px;
    height: 14px;
    border-radius: var(--radius-pill);
    background: var(--skeleton-base);
    animation: navPhPulse 1.2s ease-in-out infinite;
  }

  @keyframes navPhPulse {
    50% { opacity: 0.45; }
  }

  /* Chevron in Collections trigger */
  .topbar-nav-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    -webkit-text-stroke: 0.5px;
  }

  .topbar-nav-item.has-dropdown:hover .topbar-nav-chevron,
  .topbar-nav-item.has-dropdown.dropdown-open .topbar-nav-chevron {
    transform: rotate(180deg);
  }

  /* ── Collections Item wrapper ── */
  .topbar-nav-item.has-dropdown {
    position: relative;
  }

  /* ── Collections Mega Dropdown ── */
  .topbar-mega-dropdown {
    position: absolute;
    top: 100%;           /* flush — padding-top creates visual gap but keeps hover connected */
    left: 50%;
    min-width: 200px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.10);
    z-index: 400;
    padding: 14px 0 8px 0; /* top padding = invisible hover bridge over gap */
    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    display: block;
  }

  /* Show on hover */
  .topbar-nav-item.has-dropdown:hover .topbar-mega-dropdown,
  .topbar-nav-item.has-dropdown.dropdown-open .topbar-mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* ── Simple flat collection list ── */
  .topbar-mega-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .topbar-mega-list-link {
    display: block;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-700);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
  }

  .topbar-mega-list-link:hover {
    background: var(--brand-50);
    color: var(--brand-600);
  }

  .topbar-mega-list-link.is-current {
    color: var(--brand-600);
    font-weight: 600;
  }

  /* "View All Collections" footer */
  .topbar-mega-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
  }

  .topbar-mega-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-600);
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--brand-100);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .topbar-mega-viewall:hover {
    background: var(--brand-50);
    border-color: var(--brand-300);
  }

  /* Skeleton shimmer while collections load */
  .topbar-mega-skeleton {
    display: flex;
    gap: 8px;
  }

  .topbar-mega-skel-item {
    height: 36px;
    flex: 1;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-sheen) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skel-sweep 1.4s infinite;
  }

  @keyframes skel-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── Right: Actions panel ── */
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto; /* override mobile fixed 64px */
  }

  /* ── Desktop Pill Search Box ── */
  .topbar-search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 38px;
    padding: 0 14px;
    background: var(--surface-100);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-pill);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.25s ease, background 0.2s ease;
    cursor: text;
  }

  .topbar-search-box:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-50);
    background: var(--surface);
    width: 280px;
  }

  .topbar-search-icon {
    font-size: 0.95rem;
    color: var(--ink-380);
    flex-shrink: 0;
    -webkit-text-stroke: 0.3px;
    pointer-events: none;
    transition: color 0.2s ease;
  }

  .topbar-search-box:focus-within .topbar-search-icon {
    color: var(--brand-500);
  }

  .topbar-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: var(--font-primary);
    color: var(--text-color);
    min-width: 0;
  }

  .topbar-search-input::placeholder {
    color: var(--ink-300);
    font-size: 0.85rem;
  }

  /* Clear (×) button */
  .topbar-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--ink-200);
    border-radius: 50%;
    cursor: pointer;
    color: var(--surface);
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: background 0.15s ease;
    padding: 0;
  }

  .topbar-search-clear:hover {
    background: var(--ink-380);
  }

  /* ── Live Search Dropdown ── */
  .topbar-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(var(--ink-rgb), 0.12);
    z-index: 500;
    overflow: hidden;
    display: none;
    max-height: 420px;
    overflow-y: auto;
  }

  .topbar-search-dropdown.is-open {
    display: block;
  }

  /* Individual result row */
  .topbar-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-color);
    transition: background 0.12s ease;
    border-bottom: 1px solid var(--border-light);
  }

  .topbar-search-result:last-child {
    border-bottom: none;
  }

  .topbar-search-result:hover,
  .topbar-search-result.is-focused {
    background: var(--surface-150);
  }

  .topbar-search-result-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface-200);
    flex-shrink: 0;
  }

  .topbar-search-result-info {
    flex: 1;
    min-width: 0;
  }

  .topbar-search-result-name {
    display: block;
    font-size: 0.855rem;
    font-weight: 500;
    color: var(--ink-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-search-result-name mark {
    background: var(--brand-100);
    color: var(--brand-800);
    border-radius: 2px;
    padding: 0 1px;
  }

  .topbar-search-result-price {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-500);
    margin-top: 2px;
  }

  /* Status message (searching / no results) */
  .topbar-search-status {
    padding: 14px 16px;
    font-size: 0.85rem;
    color: var(--ink-380);
    text-align: center;
  }

  /* "View all results" footer */
  .topbar-search-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-600);
    text-decoration: none;
    background: var(--surface-100);
    border-top: 1px solid var(--border-light);
    transition: background 0.12s ease;
  }

  .topbar-search-viewall:hover {
    background: var(--brand-50);
  }

  /* ── Desktop Icon Buttons (wishlist, profile, cart) ── */
  .nav-wishlist,
  .nav-profile,
  .nav-order {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-wishlist:hover,
  .nav-profile:hover,
  .nav-order:hover {
    background: var(--surface-200);
    color: var(--brand-600);
  }

  .nav-wishlist i,
  .nav-profile i,
  .nav-order i {
    font-size: 1.2rem;
  }

  /* Badges on desktop */
  .wishlist-count-badge,
  .cart-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--brand-500);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
  }

  /* ── Page offset for taller desktop header (64px vs 52px mobile) ── */
  /* home.css sets padding-top:50px on main for mobile; we bump it on desktop. */
  main {
    padding-top: 64px;
  }

  /* Product page container has its own top padding baked in — just adjust delta */
  .product-page-container {
    padding-top: 96px; /* 64px topbar + 32px gap (was 84px = 52px + 32px) */
  }

} /* end @media (min-width: 769px) */


/* =========================================
   SIDEMENU COMPONENT
========================================= */
.sidemenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(var(--ink-rgb), 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 3000;
}

.sidemenu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidemenu {
  position: fixed;
  top: 0;
  left: -400px;
  width: 340px;
  max-width: 82%;
  height: 100vh;
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-lg);
  z-index: 3001;
  transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.4s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
}

.sidemenu.active {
  left: 0;
  visibility: visible;
}

.sidemenu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.sidemenu-logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-600);
}

.sidemenu-logo .logo-lockup {
  height: 46px;
}

.sidemenu-close {
  color: var(--text-color);
}

.sidemenu-nav {
  display: flex;
  flex-direction: column;
}

.sidemenu-nav li {
  border-bottom: 1px solid var(--border-light);
}

.sidemenu-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  color: var(--text-color);
  letter-spacing: 0.5px;
  transition: background 0.3s ease;
}

.sidemenu-nav a:hover {
  background: var(--brand-50);
  color: var(--brand-800);
}

.sidemenu-nav a span.plus {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--text-color);
}

/* Accordion sub-menu for parent collections with children */
.sidemenu-nav li.has-children {
  border-bottom: none;
}

/* Split row: name-link (left, navigates) + toggle-btn (right, expands) */
.sidemenu-nav .sidemenu-item-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-light);
}

.sidemenu-nav .sidemenu-col-link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color);
  letter-spacing: 0.5px;
  transition: background 0.2s ease;
}

.sidemenu-nav .sidemenu-col-link:hover {
  background: var(--brand-50);
  color: var(--brand-800);
}

/* + button — right side, expands/collapses */
.sidemenu-nav .accordion-toggle {
  width: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--border-light);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink-200);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidemenu-nav .accordion-toggle:hover,
.sidemenu-nav .accordion-toggle.active {
  background: var(--surface-200);
  color: var(--ink-700);
}

/* Sub-menu: hidden by default, shown via .open class */
.sidemenu-nav .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface-100);
  border-bottom: 1px solid var(--border-light);
  /* Collapsed by default */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.sidemenu-nav .sub-menu.open {
  max-height: 400px;
  /* enough for any reasonable sub-list */
}

.sidemenu-nav .sub-item a {
  padding: 12px 20px 12px 34px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-500);
  display: block;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.15s, background 0.15s;
}

.sidemenu-nav .sub-item:last-child a {
  border-bottom: none;
}

.sidemenu-nav .sub-item a:hover {
  color: var(--text-color);
  background: var(--surface-300);
}

/* Hide the old .plus span on flat links (no children) */
.sidemenu-nav a span.plus {
  display: none;
}

.sidemenu-footer {
  margin-top: auto;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.btn-signin,
.btn-signup {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex: 1;
}

.btn-signin {
  border: 1.5px solid var(--brand-500);
  color: var(--brand-600);
  background: transparent;
}

.btn-signin:hover {
  background: var(--brand-50);
}

.btn-signup {
  background: var(--brand-500);
  color: #fff !important;
  border: 1.5px solid var(--brand-500);
}

.btn-signup:hover {
  background: var(--brand-600);
}

/* Sidemenu Action Button (Sign In / Sign Out) */
.btn-sidemenu-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-sidemenu-action:hover {
  background: rgba(var(--ink-rgb), 0.02);
  border-color: var(--text-color);
  box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.05);
}

/* =========================================
   CART DRAWER (Right Side)
========================================= */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(var(--ink-rgb), 0.5);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 92vw;
  max-width: 420px;
  height: 100vh;
  background-color: var(--surface);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  z-index: 2000;
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.4s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  visibility: hidden;
}

.cart-drawer.active {
  right: 0;
  visibility: visible;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid var(--border-light);
}

.cart-header h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.cart-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-700);
}

.cart-items-container {
  flex: 1;
  overflow-y: auto;
  padding: 25px;
}

.cart-item {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--surface-200);
  padding-bottom: 25px;
}

.cart-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cart-item-image {
  width: 72px;
  height: 90px;
  /* portrait — matches gallery/thumbnail ratio */
  background: var(--surface-150);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light, #ede7db);
  overflow: hidden;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}

.cart-item-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: none;
  line-height: 1.4;
}

.cart-item-price {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.cart-item-size {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.cart-item-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.cart-item-size-left {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: left;
}

.quantity-selector {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--brand-500);
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  overflow: hidden;
}

.qty-btn {
  background: none;
  border: none;
  width: 34px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  /* optical centering for − / + entities */
  color: var(--brand-600);
  transition: background 0.15s ease;
}

.qty-btn:hover {
  background: var(--brand-50);
}

.qty-number {
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 30px;
  text-align: center;
}

.cart-item-remove {
  background: var(--surface-150);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.cart-item-remove:hover {
  background: var(--border-color);
  color: var(--status-danger-deep);
}

/* ── BOGO Incentive Nudge Bar ─────────────────────────────── */
.cart-bogo-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 11px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  animation: bogo-nudge-in 0.22s ease;
}

@keyframes bogo-nudge-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.cart-bogo-nudge__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-100);
  border-radius: 50%;
  color: var(--brand-600);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.cart-bogo-nudge__body {
  flex: 1;
  min-width: 0;
}

.cart-bogo-nudge__msg {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand-800);
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.cart-bogo-nudge__bar {
  height: 4px;
  background: var(--brand-100);
  border-radius: 0;
  overflow: hidden;
}

.cart-bogo-nudge__fill {
  height: 100%;
  background: var(--brand-500);
  border-radius: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 8%;
}

/* ────────────────────────────────────────────────────────── */

.cart-footer {
  padding: 25px;
  background-color: var(--surface-50);
  border-top: 1px solid var(--surface-300);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cart-total-row {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 20px;
}

.btn-checkout {
  width: 100%;
  background-color: var(--brand-500);
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.2px;
  cursor: pointer;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
}

.btn-checkout:hover {
  background-color: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-checkout:active {
  transform: translateY(0);
}

/* =========================================
   FOOTER COMPONENT
========================================= */
.footer {
  padding: 60px 5%;
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  background: var(--bg-color);
}

.footer h3 {
  font-size: 0.9rem;
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 1px;
  font-weight: 600;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--text-color);
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: none;
}

/* =========================================
   GLOBAL PRODUCT GRID & CARDS
========================================= */
.product-grid {
  display: grid;
  /* Mobile-first: 2 columns always */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--bg-color);
}

/* Desktop: fixed 4 columns */
@media (min-width: 769px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   PRODUCT CARD — Agro Fruits Edition
   Design System §7.7 · §2 Colors · §5 Tokens
   Square image, farm-fresh bg, orange sale price, green pill
───────────────────────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--surface, #ffffff);
  border-radius: 0;
  /* matches ts-card */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  /* matches ts-card */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* border removed — ts-card has no border */
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  position: relative;
}

.product-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  /* matches ts-card:hover */
  transform: translateY(-2px);
}


.product-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Square — fruits display best in 1:1 */
  overflow: hidden;
  background-color: #f0f7f1;
  /* Pale green tint — farm-fresh feel */
}

.product-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  z-index: 5;
}

.badge-promo {
  background: var(--brand-500, #003b20);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  text-transform: none;
}

.badge-tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-color, #1c211e);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 1px 3px rgba(28, 43, 26, 0.1);
}

.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.product-image-wrapper .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* Sold-out: semi-transparent overlay */
.badge-soldout {
  position: absolute;
  inset: 0;
  background: rgba(252, 251, 247, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #6f716c);
  letter-spacing: 0.3px;
  z-index: 8;
}

/* Flash sale badge */
.badge-flash {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent-500, #b59a62);
  color: #fff;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: var(--radius-pill, 999px);
  z-index: 9;
  box-shadow: 0 1px 4px rgba(242, 145, 60, 0.3);
}

/* Wishlist + Remove icons: top-right, 30px white circle */
.love-icon,
.remove-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(28, 43, 26, 0.14);
  color: var(--text-muted, #6f716c);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.love-icon:hover,
.remove-icon:hover {
  transform: scale(1.1);
}

.love-icon:hover {
  color: #e05252;
}

.love-icon.wishlisted {
  color: var(--brand-600);
}

/* Quick-add: bottom-right, 32px brand-green circle */
.add-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* explicit circle — icon-only, no text */
  background: var(--brand-500, #003b20);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(46, 158, 79, 0.35);
  z-index: 10;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  padding: 0;
  font-size: 0;
}

.add-icon:hover {
  background: var(--brand-600, #002d18);
  transform: scale(1.1);
}

.add-icon i,
.love-icon i,
.remove-icon i {
  font-size: 0.88rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover: image zoom + swap */
@media (hover: hover) {
  .product-card:hover .product-image-wrapper img {
    transform: scale(1.04);
  }

  .product-card:hover .img-default {
    opacity: 0;
  }

  .product-card:hover .img-hover {
    opacity: 1;
  }
}

/* Info area: clean, tight */
.product-card-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 10px 12px 14px;
  gap: 3px;
  flex: 1;
}

/* Title: 2-line clamp.
   0.82rem (13.1px) put the product's NAME below the price's 0.9rem — the one
   thing the shopper is scanning for read as a caption under the photo. The
   name now leads at 0.95rem and the price keeps its lead on weight and colour
   rather than on size. The 2-line clamp still bounds the card's height. */
.product-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color, #1c211e);
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price: brand-600 (Design System §2 — dark green) */
.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-600, #002d18);
  margin: 0;
  line-height: 1.2;
}

/* Original/base price: muted strikethrough */
.product-price-original {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted, #6f716c);
  text-decoration: line-through;
  margin-right: 3px;
}

/* Price row wrapper */
.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.product-colors {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted, #6f716c);
}

/* =================================================================
   CARD ACTION BUTTONS — globally available (home + collection page)
   Moved here from home.css so .ts-btn-* works on any page that
   loads components.css (which is all storefront pages).
   ================================================================= */

/* Buttons row */
.ts-btn-row {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.ts-btn-cart {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: 1.5px solid var(--brand-500, #003b20);
  background: transparent;
  color: var(--brand-600, #002d18);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.ts-btn-cart:hover {
  background: var(--brand-50, #edf3f0);
}

@media (min-width: 769px) {

  .ts-btn-cart {
    font-size: 0.8rem;
    padding: 9px 10px;
  }
}

/* Single full-width cart button — "Add To Cart" full text fits on mobile too */
.ts-hide-mobile {
  display: inline;
}

/* ─────────────────────────────────────────────────────────
   PRODUCT CARD BUTTONS — Cart + Buy Now (like TS card)
───────────────────────────────────────────────────────── */
.pc-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.pc-btn-cart {
  flex: 1;
  height: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-primary);
  color: var(--brand-600, #002d18);
  background: transparent;
  border: 1.5px solid var(--brand-500, #003b20);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
  text-decoration: none;
}

.pc-btn-cart:hover {
  background: var(--brand-50, #edf3f0);
}

.pc-btn-buy {
  height: 34px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-primary);
  color: #fff;
  background: var(--brand-500, #003b20);
  border: none;
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.16s ease;
}

.pc-btn-buy:hover {
  background: var(--brand-600, #002d18);
}

/* =========================================
   MOBILE BOTTOM BAR
========================================= */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: rgba(var(--paper-rgb), 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -2px 16px rgba(var(--ink-rgb), 0.06);
  z-index: 1000;
  padding: 0 4px calc(env(safe-area-inset-bottom, 0px));
  align-items: center;
}

.bottom-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
  flex: 1;
  height: 100%;
  transition: color 0.18s ease;
}

.bottom-bar-item i {
  font-size: 1.35rem;
}

.bottom-bar-label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Active item (set .active via JS on current page if desired) */
.bottom-bar-item.active,
.bottom-bar-item:active {
  color: var(--brand-600);
}

/* Center cart — elevated FAB feel, outlined brand style */
.bottom-bar-cart-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -18px;
  background: var(--bg-color);
  color: var(--brand-600);
  border-radius: var(--radius-pill);
  border: 2.5px solid var(--brand-500);
  box-shadow: var(--shadow-md);
}

.bottom-bar-cart-fab i {
  font-size: 1.3rem;
  color: var(--brand-600, #002d18);
}

.bottom-bar-cart .bottom-bar-label {
  color: var(--brand-600);
}

@media (max-width: 768px) {
  .mobile-bottom-bar {
    display: flex;
    justify-content: space-around;
  }
}

.nav-order,
.nav-wishlist {
  position: relative;
}

.cart-count-badge,
.wishlist-count-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   QUICK ADD TO CART — BOTTOM SHEET
========================================= */
.qa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.45);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.qa-overlay.active {
  opacity: 1;
  visibility: visible;
}

.qa-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-color);
  border-radius: 0;
  z-index: 3001;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(var(--ink-rgb), 0.12);
}

.qa-sheet.active {
  transform: translateY(0);
}

.qa-drag-handle {
  width: 36px;
  height: 4px;
  background: var(--border-color);
  border-radius: 0;
  margin: 12px auto 0;
}

.qa-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-300);
}

.qa-product-img-wrap {
  flex-shrink: 0;
  width: 60px;
  height: 72px;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-200);
}

.qa-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qa-product-meta {
  flex: 1;
  min-width: 0;
}

.qa-product-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-product-price {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin-top: 4px;
}

.qa-close-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink-500);
  padding: 4px;
  line-height: 1;
}

.qa-section {
  padding: 16px 20px 0;
}

.qa-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 10px;
}

.qa-selected-value {
  font-weight: 500;
  text-transform: none;
  color: var(--ink-900);
  letter-spacing: 0;
}

.qa-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qa-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 3px;
  flex-shrink: 0;
}

.qa-swatch.active {
  outline-color: var(--brand-600);
  /* brand green — matches product page swatches */
}

.qa-swatch:hover {
  transform: scale(1.12);
}

.qa-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qa-size-btn {
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--line-200);
  border-radius: 0;
  background: var(--bg-color);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--ink-800);
}

.qa-size-btn:hover:not(:disabled) {
  border-color: var(--ink-900);
}

.qa-size-btn.active {
  background: var(--brand-600);
  /* brand green fill */
  color: var(--bg-color);
  border-color: var(--brand-600);
}

.qa-size-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.qa-qty-row {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-200);
  height: 36px;
  border-radius: 0;
  background: var(--bg-color);
}

.qa-qty-btn {
  background: transparent;
  border: none;
  width: 40px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--ink-800);
  transition: background 0.15s ease;
}

.qa-qty-btn:hover {
  background: var(--surface-200);
}

#qa-qty-display {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
  color: var(--ink-900);
}

.qa-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 20px 20px 20px;
  height: 48px;
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.qa-add-btn:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.qa-add-btn:active {
  transform: translateY(0);
}

.qa-add-btn:active {
  transform: scale(0.98);
}

.qa-add-btn:disabled {
  background: var(--line-250);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════
   SIZE CHART BUTTON
   Product page size row + quick-add sheet. A button, not an underlined link: it is one of the
   most-tapped things on the page. `button.` keeps it above product.css's older .size-guide-btn.
═══════════════════════════════════════ */
.size-chart-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.size-chart-standalone {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

button.size-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--brand-600);
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-600);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

button.size-chart-btn:hover,
button.size-chart-btn[aria-expanded="true"] {
  background: var(--brand-600);
  color: var(--bg-color);
}

button.size-chart-btn:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.size-chart-ico {
  flex-shrink: 0;
}

/* Quick-add sheet: Size label + button on one line */
.qa-size-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.qa-size-head .qa-section-label {
  margin-bottom: 0;
}

/* The chart itself — opens in place under the Size row, on the product page
   (js/product.js → setupSidebarSpecTriggers) and in the quick-add sheet (js/cart.js) */
.sc-panel {
  margin-bottom: 12px;
  border: 1px solid var(--line-200);
  background: var(--surface-50);
}

.sc-scroll {
  overflow-x: auto;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  color: var(--ink-800);
}

.sc-table th,
.sc-table td {
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-120);
}

.sc-table th {
  font-weight: 600;
  color: var(--ink-900);
  background: var(--surface-150);
}

.sc-table tbody tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  z-index: 4000;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.35s;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.search-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}

.search-overlay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-80);
  position: sticky;
  top: 0;
  background: var(--bg-color);
  z-index: 1;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input-icon {
  color: var(--ink-250);
  font-size: 0.9rem;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text-color);
  background: transparent;
  font-family: var(--font-primary);
}

.search-input::placeholder {
  color: var(--line-300);
}

.search-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-color);
  padding: 4px;
  display: flex;
  align-items: center;
}

/* Recent searches */
.search-recents {
  padding: 16px 20px;
}

.search-recents-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-250);
  margin-bottom: 10px;
}

.search-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--ink-700);
  font-size: 0.88rem;
  border-bottom: 1px solid var(--surface-200);
}

.search-recent-item i {
  color: var(--line-300);
  font-size: 0.85rem;
}

.search-recent-item:hover {
  color: var(--text-color);
}

/* Results */
.search-results {
  padding: 8px 0;
  flex: 1;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--text-color);
  border-bottom: 1px solid var(--surface-200);
  transition: background 0.15s ease;
}

.search-result-item:hover {
  background: var(--surface-140);
}

.search-result-item.is-focused {
  background: var(--surface-200);
}

.search-result-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
  background: var(--surface-300);
  border-radius: var(--radius-md);
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-result-name {
  font-size: 0.88rem;
  font-weight: 500;
}

.search-result-name mark {
  background: none;
  color: var(--text-color);
  font-weight: 700;
}

.search-result-price {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.search-status {
  padding: 24px 20px;
  color: var(--ink-250);
  font-size: 0.85rem;
}

/* =========================================
   GLOBAL BUTTON SYSTEM  (Design System §7.1)
   Touch target: min 44×44px on all variants
========================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-500);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
  min-height: 44px;
  user-select: none;
}

.btn-primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-500);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
  min-height: 44px;
}

.btn-accent:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent:active {
  transform: translateY(0);
}

.btn-accent:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border: 1.5px solid var(--brand-500);
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
  min-height: 44px;
}

.btn-secondary:hover {
  background: var(--brand-50);
  border-color: var(--brand-600);
}

.btn-secondary:active {
  transform: translateY(1px);
}

.btn-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  color: var(--text-muted);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.9rem;
  font-family: var(--font-primary);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
  min-height: 44px;
}

.btn-ghost:hover {
  color: var(--text-color);
  background: var(--surface-200);
}

/* Size modifiers */
.btn-sm {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  min-height: 36px !important;
}

.btn-lg {
  padding: 16px 28px !important;
  font-size: 0.95rem !important;
  min-height: 52px !important;
}

/* =========================================
   PRODUCT CARD — Image hover zoom (§7.7)
========================================= */
@media (hover: hover) {
  .product-card:hover .product-image-wrapper img {
    transform: scale(1.04);
  }
}

/* =========================================
   CART EMPTY STATE  (Design System §7.5)
========================================= */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2.5rem 1.5rem;
  text-align: center;
  gap: 12px;
}

.cart-empty-icon {
  font-size: 3.5rem;
  color: var(--border-color);
  line-height: 1;
}

.cart-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.cart-empty-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}



/* =========================================
   CART BADGE BOUNCE ANIMATION  (§7.2)
========================================= */
@keyframes cartBadgeBounce {

  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.45);
  }

  60% {
    transform: scale(0.85);
  }

  80% {
    transform: scale(1.12);
  }
}

.cart-count-badge.bump,
.wishlist-count-badge.bump {
  animation: cartBadgeBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* =========================================
   CALL SUPPORT SHEET
   ========================================= */
.call-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1500;
}

.call-sheet-overlay.active {
  display: block;
}

.call-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--bg-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px 36px;
  z-index: 1501;
  transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.call-sheet.active {
  bottom: 0;
}

.call-sheet-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}

.call-sheet-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.call-sheet-phone {
  background: var(--brand-50);
  color: var(--brand-600);
}

.call-sheet-whatsapp {
  background: #e7f9ee;
  color: #25d366;
}

.call-sheet-cancel {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border: none;
  background: var(--surface-200);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
}

/* =========================================
   CART EMPTY STATE
========================================= */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2.5rem 1.5rem;
  text-align: center;
  gap: 12px;
}

.cart-empty-icon {
  font-size: 3.5rem;
  color: var(--border-color);
  line-height: 1;
}

.cart-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.cart-empty-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

/* -- Loose / By-Weight custom amount (product page + quick-add) -- */
.weight-custom-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.weight-custom-row .wt-label {
  font-size: 0.82rem;
  color: var(--ink-500);
}

.weight-stepper {
  display: flex;
  align-items: center;
  background: var(--brand-50);
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  height: 48px;
  overflow: hidden;
}

.weight-step-btn {
  width: 44px;
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--brand-600);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.18s ease;
}

.weight-step-btn:hover {
  background: var(--brand-100);
}

.weight-custom-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-600);
  font-family: inherit;
}

.weight-custom-input:focus {
  outline: none;
}

.weight-custom-input::-webkit-outer-spin-button,
.weight-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.weight-custom-input[type=number] {
  -moz-appearance: textfield;
}

.weight-hint {
  font-size: 0.72rem;
  color: var(--ink-350);
  display: block;
  margin-top: 7px;
  text-align: center;
}
/* ═══ Announcement Bar (ported from Cloco — exact system) ═══════════════════ */
.announcement-bar {
  display: none;
  /* JS/SSR switches to flex when text exists */
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  /* Fixed height, border included: the offset below is a constant, so the bar must
     never grow. A long Bangla message that wrapped to two lines would push its own
     bottom edge past the topbar and cover the logo again. */
  box-sizing: border-box;
  height: 39px;
  padding: 0;
  /* arrows sit hard against the screen edges */
  /* White, not black: a black strip above a white header reads as a second toolbar
     and visually shortens the page. Light keeps it a whisper, not a shout.
     Metrics below are measured off goodybro.com — light weight, open tracking and
     a softened black are what make the strip read as a whisper rather than a banner. */
  /* Same glass treatment as .topbar — the two are stacked and touching, so a solid
     strip above a frosted one reads as two different toolbars. */
  /* Fallback matters here more than on .topbar: this bar overlays page content, so
     an undefined token would leave text sitting on the artwork. */
  background: var(--glass-light, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-color, #1c211e);
  border-bottom: 1px solid rgba(18, 18, 18, 0.1);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-align: center;
  /* Fixed, and stacked directly above the fixed topbar — in normal flow it painted
     over the header instead of moving it, which hid the logo entirely. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
  /* above the topbar (200), below every drawer */
}

/* One switch drives the whole offset. The attribute is only present once real
   messages exist (SSR bakes it; the client sets it after render), so an empty
   setting leaves every offset at zero and nothing shifts. */
body:has(#announcement-bar[data-messages]) {
  --announce-h: 39px;
  /* must equal the bar height including its 1px border */
}

/* Body padding moves in-flow content down; the fixed topbar is positioned
   explicitly because viewport-fixed elements ignore body padding. */
body {
  padding-top: var(--announce-h, 0px);
}

.topbar {
  top: var(--announce-h, 0px);
}

.announce-track {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
}

/* Only the active message is in the DOM at a time — no sliding strip to mis-measure.
   Up to TWO lines, never three: the bar height is a constant the whole page offset is
   built on (see .announcement-bar), so a long message has to fit rather than the strip
   grow. It used to be one line with an ellipsis, which silently ate the end of longer
   Bangla messages and forced the admin to count characters. */
.announce-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  animation: announce-in 0.35s ease both;
}

/* Set by initAnnouncementBar() only when the message actually wrapped. Shrinking the
   type is what keeps two lines inside a 38px strip; single-line messages are untouched
   and stay at full size, so the common case loses nothing. */
/* 0.78rem × 1.2 × 2 lines = 30px inside a 38px strip — about 4px of air top and
   bottom. Smaller was tried and reads as fine print rather than an announcement. */
.announcement-bar.is-two-line {
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

.announcement-bar.is-two-line .announce-msg {
  line-height: 1.2;
}

/* No underline — the arrow is the affordance, and underlining small tracked text
   at this size turns a quiet strip into noise. */
.announce-msg a {
  color: inherit;
  text-decoration: none;
}

/* The → glyph sits on the baseline, but its ink is shallower than the text's: at
   15.2px Montserrat the text ink centres 4.5px above the baseline and the arrow only
   3.5px, so it reads a pixel low. Corrected in em so it holds at both the 0.85rem
   and 0.95rem sizes. 1px / 15.2px = 0.066em. */
.announce-arrow {
  display: inline-block;
  margin-left: 2px;
  transform: translateY(-0.066em);
  transition: transform 0.15s ease;
}

/* Keeps the vertical correction while nudging sideways — a bare translateX here
   would drop the arrow back down. */
.announce-msg a:hover .announce-arrow {
  transform: translate(3px, -0.066em);
}

/* The chevrons are inline SVG rather than <i class="bi bi-chevron-left">: the site
   loads no icon font and ICONS in js/icons.js has no chevron-left/right, so the
   glyph never appeared — the buttons were live but invisible. Inline markup also
   means they paint with the SSR bar instead of waiting for replaceIcons(). */
.announce-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  width: 44px;
  /* full thumb target, matching the bar height */
  height: 38px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  /* sizes the 1em SVG — navigation, not decoration */
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.announce-nav:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .announcement-bar {
    font-size: 0.95rem;
  }

  /* Desktop starts at 0.95rem, so two lines there need the bigger step down:
     0.85rem × 1.2 × 2 = 32.6px, still inside the 38px strip. */
  .announcement-bar.is-two-line {
    font-size: 0.85rem;
  }
}

@keyframes announce-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Someone who asked for less motion should not get a strip that swaps under them */
@media (prefers-reduced-motion: reduce) {
  .announce-msg {
    animation: none;
  }
}

/* ═══ PRODUCT CARD v2 — BD-modern (blue/white) — .ts-card family override ═══ */

.ts-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ts-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-250);
}

.ts-card-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-100);
  overflow: hidden;
}
.ts-card-img-wrap img {
  transition: transform 0.35s ease;
}
.ts-card:hover .ts-card-img-wrap img { transform: scale(1.04); }

/* Discount % badge — কমলা pill, বাম-উপর */
.pc2-off {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: var(--accent-600);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

/* Flash sale badge — নীল, discount-এর নিচে বসে */
.ts-badge-flash {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}

/* Best Selling flag (SSR top-selling) */
.ts-badge-best {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  background: var(--brand-800);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Best flag থাকলে discount badge নিচে নামে */
.ts-badge-best ~ .ts-card-img-wrap .pc2-off { top: 36px; }

/* Sold out scrim */
.ts-badge-soldout {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Wishlist heart */
.love-icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  transition: color 0.15s ease, transform 0.15s ease;
}
.love-icon:hover { transform: scale(1.08); }
.love-icon.wishlisted, .love-icon.wishlisted i { color: var(--danger); }

.ts-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
/* Same scale as .product-title / home.css .ts-card-title — one card, one size,
   wherever it is rendered from. */
.ts-card-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.45em;
}

/* Sold count — social proof */
.pc2-sold {
  font-size: 0.74rem;
  color: var(--ink-380);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc2-sold i { font-size: 0.72rem; color: var(--status-success); }

.ts-price-row { margin-top: 2px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ts-price-sale {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sale-color);
}
.ts-price-original {
  font-size: 0.8rem;
  color: var(--ink-300);
  text-decoration: line-through;
  font-weight: 400;
}

/* Button — single full-width Add To Cart, solid নীল (Buy Now বাদ) */
.ts-btn-row { display: flex; gap: 7px; margin-top: 8px; }
.ts-btn-cart {
  flex: 1;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  line-height: 1;
  white-space: nowrap;
  background: var(--brand-500);
  border: 1.5px solid var(--brand-500);
  color: #fff;
}
.ts-btn-cart:hover { background: var(--brand-600); border-color: var(--brand-600); }


/* ── Cart delivery estimate row ────────────────────────────────────────────── */
.cart-ship-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.cart-ship-switch {
  padding: 3px 9px;
  background: var(--surface-150, #f3ede2);
  border: 1px solid var(--border-color, #e0d9cb);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-700, #3e443f);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-ship-switch:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.cart-ship-note {
  margin: 2px 0 4px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #B91C1C;
}
.cart-meta-dot { color: var(--ink-300, #a5a7a1); }


/* ── Quick Add pills — same anatomy as the PDP .size-box (product.css isn't
   loaded outside the product page, so the grid + box styles repeat here) ──── */
.qa-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
}
.qa-size-btn {
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px 8px;
  line-height: 1.15;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}
.qa-size-btn:hover:not(:disabled) { border-color: var(--ink-250); }
.qa-size-btn .sb-val {
  font-size: 0.88rem;
  font-weight: 700;
}
.qa-size-btn .sb-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-400, #7b7d78);
  font-variant-numeric: tabular-nums;
}
.qa-size-btn.active .sb-price { color: rgba(255, 255, 255, 0.85); }
.qa-size-btn .sb-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-top: 2px;
  white-space: nowrap;
}
.qa-size-btn.active .sb-tag { background: rgba(255, 255, 255, 0.92); }
/* css/bundle-carousel.css — offer rail (product page + cart drawer)
   Ported from Cloco; Aparajita sharp design: radius 0 boxes, pill tags stay round */

.bundle-carousel {
  margin-top: 14px;
}

.bc-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.bc-head-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

a.bc-head-link:hover .bc-head-label { text-decoration: underline; }

.bc-head-arrow {
  font-size: 0.9rem;
  line-height: 1;
}

.bc-rail-wrap { position: relative; }

.bc-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.bc-rail::-webkit-scrollbar { display: none; }

.bc-card {
  flex: 0 0 132px;
  width: 132px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.bc-card-img {
  position: relative;
  width: 132px;
  height: 165px;
  background: var(--surface-150, #f3ede2);
  border: 1px solid var(--border-light, #ede7db);
  overflow: hidden;
}

.bc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bc-add {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-color, #e0d9cb);
  color: var(--brand-600);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bc-add:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.bc-add.is-added { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

.bc-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 2px 0;
}

.bc-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color, #1c211e);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bc-card-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-500, #6f716c);
  font-variant-numeric: tabular-nums;
}

.bc-scroll-hint {
  position: absolute;
  right: -4px;
  top: 62px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color, #e0d9cb);
  color: var(--ink-600, #565c57);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.2s ease;
}
.bc-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }

/* Offer badge (under the PDP price). Markup: js/shared/product-offer.js → offerBadgeHTML,
   written by the product SSR so it is in the first paint — no layout shift.
   A ticket: solid brand tag on the left, the offer and "no code needed" on the right. */
.bundle-hint {
  display: none;
  align-items: stretch;
  margin: 14px 0 4px;
  background: var(--surface, #ffffff);
  border: 1px dashed var(--brand-300, #6e9683);
  line-height: 1.35;
  color: var(--ink-700, #3e443f);
}
.bundle-hint.is-on { display: flex; }

.oh-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 12px;
  background: var(--brand-600, #002d18);
  color: var(--bg-color, #f7f3ea);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oh-ico { flex-shrink: 0; }

.oh-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
}
.oh-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-600, #002d18);
}
.oh-sub {
  font-size: 0.74rem;
  color: var(--ink-500, #6f716c);
}

/* Cart drawer mount — tighter, fits the drawer padding */
.cart-drawer .bundle-carousel { margin: 4px 20px 10px; }
.cart-drawer .bundle-hint { margin: 0 20px 4px; }
.cart-drawer .bc-card { flex-basis: 108px; width: 108px; }
.cart-drawer .bc-card-img { width: 108px; height: 135px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Product card style — Settings → Home → Product Card
   ───────────────────────────────────────────────────────────────────────────
   class দুটো `<body>`-তে বসে (SSR: functions/index.js · collection/[slug].js ·
   new-arrivals.js · CSR: js/app.js), মান আসে js/shared/product-card.js থেকে।

   🔴 **body-তে কেন, card-এ নয়:** card এই codebase-এ **আটটা আলাদা জায়গায়**
      তৈরি হয় (দুটো পরিবার — `.ts-card` আর `.product-card`)। আটটা builder
      ছুঁতে গেলে একটা বাদ পড়তই। `<body>` সব পাতায় একটাই, তাই সেখানে class
      বসালে আটটাই আপনাআপনি মেনে চলে।

   🔴 **`.classic` নিয়ে কোনো rule নেই — ইচ্ছে করেই।** classic মানে "যা আছে
      তাই"। rule লিখলে সেটা আর "যা আছে" থাকত না। default-ও classic, তাই
      merchant হাতে না বদলালে এই block-এর একটা নিয়মও চলে না।
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Minimal — "Add To Cart" সারি সরে গিয়ে ছবির উপর গোল + ─────────────────── */

/* 🔴 নোঙরটা **body-তে**, ছবির wrapper-এ নয় — কারণ বোতামটা DOM-এ ছবির ভেতরে
      নেই, সে আছে নিচের text অংশে (`.ts-card-body` / `.product-card-info`)।
      `.ts-card`-এ `position: relative` আগে থেকেই আছে, তাই absolute দিলে বোতাম
      **card-এর** নিচে গিয়ে বসত — ছবির উপরে নয় (মেপে ধরা পড়েছে)।

      text অংশটাকে relative করে `bottom: 100%` দিলে বোতাম ঠিক তার **উপরের
      কিনারায়** বসে — অর্থাৎ ছবির নিচের কিনারায়। ছবির উচ্চতা যাই হোক
      (1:1 হোক বা অন্য কিছু) হিসেবটা মেলে, কোনো স্থির মাপ লাগে না। */
body.pc-style--minimal .ts-card-body,
body.pc-style--minimal .product-card-info {
  position: relative;
}

/* ছবি 4:5 — classic-এ 1:1 (চৌকো), minimal-এ লম্বাটে।
   🔴 grid-এ card সরু হয় (ফোনে ১৯৯px), তাই চৌকো ছবি মানে ১৯৯px উঁচু card —
      পোশাক/গয়না দেখার পক্ষে বড্ড খাটো। clocobd.com মেপে দেখা গেছে ওদের
      standard **4 / 5** (810×1012 ছবি, wrapper aspect-ratio 4/5), ফোনে card
      199×361। একই মান নেওয়া হলো, তাই ছবিও একই অনুপাতে তোলা যাবে।
   দুই card পরিবারেই বসছে, নইলে homepage আর collection page আলাদা উঁচু হতো। */
body.pc-style--minimal .ts-card-img-wrap,
body.pc-style--minimal .product-image-wrapper {
  aspect-ratio: 4 / 5;
}

/* ⚠️ desktop-এ আলাদা করে লিখতে হয়। `css/home.css`-এর `@media (min-width:1024px)`
   ব্লকে `.coll-pc .ts-card-img-wrap { aspect-ratio: 1/1 !important }` আছে —
   `!important` বলে উপরের নিয়ম হারত (মেপে ধরা পড়েছে: ফোনে 4:5 হলেও desktop-এ
   1:1 থেকে যাচ্ছিল)। তাই এখানেও `!important`, আর media query-র ভেতরে। */
@media (min-width: 1024px) {
  body.pc-style--minimal .coll-pc .ts-card-img-wrap,
  body.pc-style--minimal .product-image-wrapper {
    aspect-ratio: 4 / 5 !important;
  }
}

/* `margin-top: auto` (classic-এ card-কে টেনে লম্বা করত) এখানে অর্থহীন, বাতিল। */
body.pc-style--minimal .ts-btn-row {
  position: absolute;
  right: 8px;
  bottom: 100%;
  margin: 0 0 8px;
  padding: 0;
  z-index: 2;
  width: auto;
  gap: 0;
}

/* ⚠️ লেখাটা **মোছা হয়নি, শুধু চোখের আড়াল** — `display:none`/`visibility:hidden`
   দিলে screen reader-এর কাছে বোতামটার কোনো নাম থাকত না, শুধু "+" পড়ত।
   `font-size: 0` লেখাটাকে অদৃশ্য করে কিন্তু accessibility tree থেকে সরায় না,
   তাই accessible name "Add To Cart"-ই থাকে।

   🔴 আগে এখানে `> *`-এ clip করা হয়েছিল — **কাজ করেনি**। বোতামের ভেতরটা হলো
      `<span>Add To </span>Cart` — "Cart" একটা **বেয়ার text node**, কোনো
      element নয়, তাই `> *` ওটা ধরতেই পারে না। পর্দায় "+ Car" দেখা যেত।
      text node ঢাকার একমাত্র উপায় parent-এ font-size. */
body.pc-style--minimal .ts-btn-cart {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--brand-500, #003b20);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  gap: 0;
  /* নিচের দুটো দাগ এর সাপেক্ষেই বসে — না দিলে containing block হতো
     `.ts-btn-row` (ওটাও absolute), আর মাপ মিললেও সেটা কাকতালীয় হতো। */
  position: relative;
}

body.pc-style--minimal .ts-btn-cart i {
  display: none !important;
}

/* `+` চিহ্নটা **দুটো দাগ দিয়ে আঁকা**, font-এর glyph নয়।
   🔴 আগে `content: '+'` ছিল — হিসেব করে দেখা গেল ওটা বৃত্তের কেন্দ্র থেকে
      ~১.৫px উপরে বসত। কারণ glyph-এর কালি em-box-এর কেন্দ্রে থাকে না: BrandFont-এ
      22px-এ `+`-এর কালি baseline-এর ৩px উপরে শুরু হয়ে ১৩px পর্যন্ত যায়, অর্থাৎ
      কালির কেন্দ্র baseline থেকে ৮px উপরে — flex box কেন্দ্রে বসালেও কালি
      কেন্দ্রে পড়ে না। ছোট চিহ্নে ১.৫px চোখে ধরা পড়ে।
   দুটো দাগে হিসেবটা **গঠনগতভাবেই** নিখুঁত — font বদলালেও নড়বে না। */
body.pc-style--minimal .ts-btn-cart::before,
body.pc-style--minimal .ts-btn-cart::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}
body.pc-style--minimal .ts-btn-cart::before {
  width: 13px;
  height: 2px;
  transform: translate(-50%, -50%);
}
body.pc-style--minimal .ts-btn-cart::after {
  width: 2px;
  height: 13px;
  transform: translate(-50%, -50%);
}

body.pc-style--minimal .ts-btn-cart:hover {
  background: var(--brand-600, #002d18);
  transform: scale(1.06);
}

/* Sold Out পণ্যে + দেখানোর মানে নেই — classic-এ বোতামটা নিষ্ক্রিয় দেখায়,
   minimal-এ জায়গাই নেয় না। */
body.pc-style--minimal .ts-card:has(.ts-badge-soldout) .ts-btn-row,
body.pc-style--minimal .product-card:has(.badge-soldout) .ts-btn-row {
  display: none;
}

/* ⚠️ `.product-card` পরিবারে colour-লাইনটা ("3 In Colors") এখনো থাকে —
   ইচ্ছে করেই। ওটা তথ্য, সাজ নয়; সরালে ক্রেতা জানত না যে অন্য রং আছে। */

/* ছাড়ের শতাংশ badge ("−34%") minimal-এ নেই — merchant চেয়েছে। কাটা দামটা
   (৳2,890 → ৳2,190) কার্ডেই থাকে, তাই ছাড়ের কথা হারায় না, শুধু চিৎকারটা কমে।
   classic-এ badge আগের মতোই — ওটা \"যা আছে তাই\" থাকার কথা। */
body.pc-style--minimal .pc2-off {
  display: none;
}