/* ============================================================
   SHOPY GO ΓÇö Premium Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ΓöÇΓöÇ CSS Variables ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
:root {
  --primary: #1A1A1A;
  /* Deep charcoal almost black */
  --primary-light: #4A4A4A;
  --primary-dark: #000000;
  --accent: #D4AF37;
  /* Champagne Gold */
  --accent-light: #F3E5AB;
  /* Light Gold/Vanilla */
  --danger: #D32F2F;
  --success: #2E7D32;

  --bg: #FFFFFF;
  /* Pure white background */
  --bg-card: #FFFFFF;
  /* Pure white cards */
  --bg-glass: rgba(255, 255, 255, 0.85);
  /* Semi-transparent white */
  --border: rgba(0, 0, 0, 0.08);
  /* Light subtle border */
  --border-hover: rgba(212, 175, 55, 0.5);
  /* Gold hover border */

  --text-primary: #1A1A1A;
  /* Dark text for readability */
  --text-secondary: #4A4A4A;
  /* Muted gray */
  --text-muted: #757575;
  /* Lighter gray */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* Softer shadows for white theme */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.15);
  /* Soft gold glow */

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
}

/* Premium Myntra-style font family overrides */
.product-card, #pdp-modal {
  font-family: 'Assistant', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ΓöÇΓöÇ Premium Dark Theme (Overrides) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.premium-dark-theme {
  --bg: #000000;
  --bg-card: #0a0a0a;
  --bg-glass: rgba(0, 0, 0, 0.9);
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #888888;
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(212, 175, 55, 0.6);
  --accent: #D4AF37; /* Gold */
  
  background-color: var(--bg);
  color: var(--text-primary);
}

.premium-dark-theme .navbar,
.premium-dark-theme .vendor-nav {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(25px) saturate(180%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
}

.premium-dark-theme .nav-btn {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

.premium-dark-theme .nav-btn:hover {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px);
}

.premium-dark-theme .product-card {
  background: #080808;
  border: 1px solid var(--border);
}

.premium-dark-theme .product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
}

/* PDP & Modal Overrides */
.premium-dark-theme .pdp-overlay,
.premium-dark-theme .pdp-content,
.premium-dark-theme .pdp-title-block,
.premium-dark-theme .pdp-price-block,
.premium-dark-theme .pdp-offers-block,
.premium-dark-theme .pdp-size-block,
.premium-dark-theme .pdp-delivery-block,
.premium-dark-theme .pdp-similar-block,
.premium-dark-theme .pdp-in-page-actions {
  background-color: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.05) !important;
}

.premium-dark-theme .pdp-header { 
  background: linear-gradient(to bottom, rgba(0,0,0,1), transparent) !important; 
}

.premium-dark-theme .pdp-back-btn, 
.premium-dark-theme .pdp-header-icons .nav-btn,
.premium-dark-theme .pdp-action-icon-btn { 
  background: transparent !important; 
  color: #fff !important; 
  border: none !important; 
}

.premium-dark-theme .pdp-hero, 
.premium-dark-theme .pdp-carousel-img { 
  background: #000 !important; 
}

.premium-dark-theme .pdp-dot { background: rgba(255,255,255,0.1) !important; }
.premium-dark-theme .pdp-dot.active { background: var(--accent) !important; }

.premium-dark-theme .pdp-view-similar .vs-btn { 
  background: rgba(255,255,255,0.05) !important; 
  border: 1px solid var(--border) !important; 
  color: #fff !important; 
}

.premium-dark-theme .pdp-current,
.premium-dark-theme .pdp-brand,
.premium-dark-theme .pdp-name,
.premium-dark-theme .pdp-sz-header h3 { 
  color: #fff !important; 
}

.premium-dark-theme .pdp-mrp,
.premium-dark-theme .pdp-sz-measure { 
  color: #bbb !important; 
}

.premium-dark-theme .pdp-mega-deal { 
  background: rgba(212, 175, 55, 0.08) !important; 
  border-left: 4px solid var(--accent) !important; 
  color: var(--accent) !important; 
}

.premium-dark-theme .pdp-bank-offer { 
  border: 1px dashed var(--accent) !important; 
  background: rgba(212, 175, 55, 0.05) !important; 
  color: #fff !important; 
}

.premium-dark-theme .pdp-bank-offer span { color: var(--accent) !important; }

.premium-dark-theme .similar-card { 
  background: #0a0a0a !important; 
  border: 1px solid var(--border) !important; 
}

.premium-dark-theme .sc-name { color: #ccc !important; }
.premium-dark-theme .sc-price { color: #fff !important; }
.premium-dark-theme .sc-original { color: #444 !important; }
.premium-dark-theme .sc-add-cart-btn { background: var(--accent) !important; color: #000 !important; font-weight: 700 !important; }
.premium-dark-theme .sc-add-cart-btn:not(.added):hover { background: #bfa130 !important; }
.premium-dark-theme .sc-add-cart-btn.added:hover { background: #e6c54c !important; }

.premium-dark-theme .pdp-sz-btn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

.premium-dark-theme .pdp-sz-btn.active {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
}

.premium-dark-theme .pdp-buy-now-btn { 
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important; 
  color: #fff !important; 
  font-weight: 800 !important; 
  letter-spacing: 0.12em !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  text-transform: uppercase !important;
  transition: all 0.35s ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.premium-dark-theme .pdp-buy-now-btn:hover {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 0 20px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) !important;
}

.premium-dark-theme .pdp-add-bag-btn { 
  background: var(--accent) !important; 
  color: #000 !important; 
  border: 2px solid var(--accent) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
}

.premium-dark-theme .pdp-add-bag-btn:hover {
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.5) !important;
}

.premium-dark-theme .modal--premium {
  background: #080808;
  border: 1px solid var(--accent);
}

/* Full PDP Blackout & Refinement */
.premium-dark-theme .pdp-delivery-block,
.premium-dark-theme .pdp-info-block,
.premium-dark-theme .pdp-expert-block,
.premium-dark-theme .pdp-expert-block p,
.premium-dark-theme .pdp-expert-block h3,
.premium-dark-theme .pdp-delivery-status,
.premium-dark-theme .pdp-seller-info,
.premium-dark-theme .pdp-services-list,
.premium-dark-theme .pdp-specs,
.premium-dark-theme .pdp-fabrics,
.premium-dark-theme .pdp-sz-measure,
.premium-dark-theme .pdp-sz-rec,
.premium-dark-theme .pdp-extra-off,
.premium-dark-theme .pdp-stock-alert {
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.premium-dark-theme .pdp-delivery-block p,
.premium-dark-theme .pdp-info-block span,
.premium-dark-theme .pdp-expert-block .expert-title,
.premium-dark-theme .pdp-expert-block .expert-sub,
.premium-dark-theme .spec-label,
.premium-dark-theme .spec-key,
.premium-dark-theme .spec-name,
.premium-dark-theme .pdp-specs td,
.premium-dark-theme .pdp-specs th,
.premium-dark-theme .products-detail-key,
.premium-dark-theme .products-detail-value {
    color: #e0e0e0 !important;
}

/* Nuclear option: force ALL text inside PDP blocks to be bright */
.premium-dark-theme .pdp-specs *,
.premium-dark-theme .pdp-fabrics *,
.premium-dark-theme .pdp-delivery-block *,
.premium-dark-theme .pdp-seller-info *,
.premium-dark-theme .pdp-services-list * {
    color: #e8e8e8 !important;
}

/* Then restore accent colors for specific items */
.premium-dark-theme .pdp-services-list .pdp-return { color: #4ade80 !important; }
.premium-dark-theme .pdp-services-list .pdp-no-cod { color: #f87171 !important; }

.premium-dark-theme .pdp-services-list li {
    color: #fff !important;
}

.premium-dark-theme .spec-item,
.premium-dark-theme .pdp-emi,
.premium-dark-theme .pdp-sz-measure {
  color: #fff !important;
}

.premium-dark-theme .pdp-pin-check {
  background: #111 !important;
  border: 1px solid #333 !important;
}

.premium-dark-theme .pin-check-link,
.premium-dark-theme .change-btn,
.premium-dark-theme .pdp-sz-header a,
.premium-dark-theme .view-more {
  color: var(--accent) !important;
}

.premium-dark-theme .expert-banner {
  background: linear-gradient(135deg, #050505 0%, #111 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.premium-dark-theme .expert-banner strong { color: #fff !important; }
.premium-dark-theme .expert-time { color: #888 !important; }

.premium-dark-theme .call-expert {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border: none !important;
}

.premium-dark-theme .trust-badge { color: #aaa !important; }
.premium-dark-theme .badge-icon { background: #111 !important; border: 1px solid #333 !important; }
.premium-dark-theme .badge-pink { color: #ff3e6c !important; }
.premium-dark-theme .badge-blue { color: #007bff !important; }

/* Similar Products Fix */
.premium-dark-theme .pdp-similar-block {
  background: #000 !important;
  padding-bottom: 40px !important;
}

.premium-dark-theme .pdp-similar-block h3 {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 1.1rem !important;
  margin-bottom: 20px !important;
}

.premium-dark-theme .similar-card {
  background: #080808 !important;
}

.premium-dark-theme .sc-name { color: #bbb !important; }
.premium-dark-theme .sc-price { color: #fff !important; }

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Utility */
.hidden { display: none !important; }

html {
  scroll-behavior: smooth;
  background: #ffffff; /* fixes overscroll & safe-area top gap */
}

body {
  font-family: var(--font-body);
  background: #ffffff; /* clean white background */
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

ul {
  list-style: none;
}

/* Custom scrollbars for desktop pointer devices only */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #e4e4e7;
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #d4d4d8;
  }

  .premium-dark-theme ::-webkit-scrollbar-thumb {
    background: #3f3f46;
  }
  .premium-dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #52525b;
  }
}

/* Hide scrollbars completely on touch devices */
@media (pointer: coarse) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Nuclear option: hide scrollbars for page elements when PDP is open */
html.pdp-open::-webkit-scrollbar,
body.pdp-open::-webkit-scrollbar,
.pdp-overlay::-webkit-scrollbar,
.pdp-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ΓöÇΓöÇ Background Blobs ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.bg-blobs {
  display: none; /* Removed yellowish tints for pure white experience */
}

.bg-blobs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: blobFloat 15s ease-in-out infinite alternate;
}

.bg-blobs span:nth-child(1) {
  width: 600px;
  height: 600px;
  background: var(--accent-light);
  top: -150px;
  left: -200px;
  animation-delay: 0s;
}

.bg-blobs span:nth-child(2) {
  width: 500px;
  height: 500px;
  background: #f7ede2;
  top: 50%;
  right: -200px;
  animation-delay: -5s;
}

.bg-blobs span:nth-child(3) {
  width: 400px;
  height: 400px;
  background: #f5ebe0;
  bottom: -100px;
  left: 20%;
  animation-delay: -10s;
}

@keyframes blobFloat {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(30px, 20px) scale(1.08);
  }
}

/* ΓöÇΓöÇ Layout ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ΓöÇΓöÇ SITE HEADER WRAPPER (Smart Scroll) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.site-header {
  position: sticky;
  top: 56px; /* Sits exactly below the sticky navbar */
  width: 100%;
  z-index: 50; /* Lower than navbar so it slides behind */
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.header-gradient-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(56px + env(safe-area-inset-top, 0px));
  z-index: 45; /* just below topbar-fixed (50), above category-tabs (40) when hidden */
  background: linear-gradient(
    to bottom,
    rgb(224, 247, 250) 0%,
    rgb(230, 241, 250) 100%
  );
  pointer-events: none;
  transform: translateZ(0);
}

.topbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: calc(56px + env(safe-area-inset-top, 0px));
  /* Light Shopverce gradient — blends with backdrop */
  background: linear-gradient(
    135deg,
    rgba(224, 247, 250, 0.6) 0%,
    rgba(230, 241, 250, 0.5) 50%,
    rgba(245, 235, 248, 0.3) 100%
  );
  /* Extend behind status bar / notch */
  padding-top: env(safe-area-inset-top, 0px);
  /* No border or shadow initially */
  border-bottom: none;
  box-shadow: none;
  /* Smooth transition on scroll */
  transition: box-shadow 0.6s ease-in-out,
              backdrop-filter 0.6s ease-in-out;
  /* GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Smooth white background overlay — driven continuously by JS via --header-fade */
.topbar-fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  opacity: var(--header-fade, 0);
  z-index: -1; /* behind contents, above transparent/gradient background */
  pointer-events: none;
}
/* Active scroll state — box shadow only */
.topbar-fixed.scrolled {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.topbar-fixed.scrolled.sticky-tabs-active {
  box-shadow: none !important;
  border-bottom: none !important;
}
 
/* Spacer: pushes content below the fixed top bar */
.topbar-spacer {
  height: 56px;
  height: calc(56px + env(safe-area-inset-top, 0px));
}

#category-tabs-wrapper {
  min-height: 136px;
  background: transparent;
}
 
/* ── PART 2: CATEGORY TABS (always fixed, transitions transform) ── */
.category-tabs {
  position: fixed;
  left: 0;
  width: 100%;
  top: calc(55px + env(safe-area-inset-top, 0px)); /* 1px overlap to prevent sub-pixel gaps */
  z-index: 40;
  background: linear-gradient(
    to bottom,
    rgb(230, 244, 250) 0%,
    rgb(242, 236, 248) 40%,
    rgb(252, 240, 244) 75%,
    #ffffff 100%
  );
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: none; /* JS drives all animation — prevent any CSS transitions */
}

/* Symmetrical transition utility classes requested by user */
.no-transition {
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0ms !important;
}
.transition-transform {
  transition-property: transform !important;
  will-change: transform;
}
.duration-500 {
  transition-duration: 500ms !important;
}
.duration-600 {
  transition-duration: 600ms !important;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.translate-y-0 {
  transform: translateY(0) translateZ(0) !important;
  pointer-events: auto;
}
.-translate-y-full {
  transform: translateY(-100%) translateZ(0) !important;
  pointer-events: none;
}
.z-50 {
  z-index: 50 !important;
}
.z-40 {
  z-index: 40 !important;
}
.bg-white {
  background-color: #ffffff !important;
}

/* Smooth white background overlay — driven continuously by JS via --header-fade */
.category-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  opacity: var(--header-fade, 0);
  z-index: -1; /* behind contents, above transparent/gradient background */
  pointer-events: none;
}
.category-tabs.sticky-shown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
.category-tabs .nav-tier-1 { background: transparent !important; }
.category-tabs .nav-tier-2 { background: transparent !important; border-top: none !important; }
.category-tabs .secondary-nav__inner { background: transparent !important; }

/* Hide old unused classes */
.sticky-header { display: none; }
.header-wrapper { display: none; }
.header-layer-1, .header-layer-2 { display: none; }
/* ═══════════════════════════════════════════════════════════════
   PREMIUM SEARCH PILL — Refined Myntra-inspired design
   ═══════════════════════════════════════════════════════════════ */
.search-pill {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 14px;
  padding: 0 6px 0 10px;
  height: 44px;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  border: 1.5px solid #d5d5d5;
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.search-pill:hover {
  border-color: #bbb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Logo inside the pill */
.search-pill__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

/* Body holds the input + animated ticker */
.search-pill__body {
  flex: 1;
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Placeholder ticker container */
.search-pill__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}
.search-pill__static {
  font-size: 0.82rem;
  color: #aaa;
  font-style: italic;
  flex-shrink: 0;
}
.search-pill__ticker {
  overflow: hidden;
  height: 1.2em;
  position: relative;
  flex: 1;
}

/* Ticker word — the rotating placeholder text */
.ticker-word {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  font-size: 0.84rem;
  color: #9ca3af;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.2em; /* align with parent height */
  will-change: transform, opacity; /* Hardware acceleration to isolate repaints */
}

/* The actual search input */
.search-pill__input {
  position: absolute;
  inset: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  padding: 0 4px;
  width: 100%;
  z-index: 2;
  font-weight: 500;
}
/* Hide native placeholder — animated ticker handles it */
.search-pill__input::placeholder { color: transparent; }
/* When input has content, hide the ticker */
.search-pill__input:not(:placeholder-shown) ~ .search-pill__placeholder,
.search-pill__body:focus-within .search-pill__placeholder {
  opacity: 0;
  pointer-events: none;
}

/* Vertical divider (hidden) */
.search-pill__divider { display: none; }

/* Pill icon buttons (mic, camera) — circular hover effect */
.search-pill__icon-btn {
  background: none;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.search-pill__icon-btn:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.08);
}
.search-pill__icon-btn:active {
  transform: scale(0.94);
}
.search-pill__icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Pill icon spacing */
.search-pill__icon-btn:first-of-type {
  margin-left: 2px;
}

/* Ticker animations */
.ticker-word.slide-out {
  animation: ticker-slide-out 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ticker-word.slide-in {
  animation: ticker-slide-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ticker-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}
@keyframes ticker-slide-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── HEADER NAV ACTION ICONS ─────────────────────────────────── */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.nav-btn.nav-icon-only {
  padding: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-btn.nav-icon-only:hover {
  background: rgba(0, 0, 0, 0.04);
}
.nav-btn.nav-icon-only:active {
  transform: scale(0.92);
}
.nav-btn.nav-icon-only span:not(.nav-badge) { display: none; }
.nav-btn.nav-icon-only svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

/* ── PROFILE CIRCLE BUTTON ───────────────────────────────────── */
.nav-profile-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.nav-profile-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
  transform: skewX(-20deg);
  animation: profile-shine 3s 1s infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes profile-shine {
  0%, 100% { left: -100%; }
  35%      { left: 130%; }
  36%      { left: -100%; }
}
.nav-profile-circle:hover {
  border-color: rgba(0, 0, 0, 0.22);
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.nav-profile-circle:active {
  transform: scale(0.95);
}
.nav-profile-circle svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

/* ── Logged-in state: thin golden border, transparent bg ── */
.nav-profile-circle.logged-in {
  border-color: #c9b06b;
  border-width: 1.5px;
  background: transparent;
  box-shadow: none;
}
.nav-profile-circle.logged-in:hover {
  border-color: #b89d56;
  background: transparent;
  box-shadow: none;
}


.search-overlay {
  position: fixed; inset: 0; background: #fff; z-index: 10000;
  display: flex; flex-direction: column;
  transform: translateY(6px); opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.search-overlay.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── Overlay header — Shopverce branded gradient ── */
.search-overlay__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: none;
  background: linear-gradient(
    180deg,
    rgb(224, 247, 250) 0%,
    rgb(228, 240, 252) 30%,
    rgb(238, 234, 252) 60%,
    rgb(255, 255, 255) 100%
  );
  flex-shrink: 0;
}
.search-overlay__back {
  background: none;
  border: none;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.search-overlay__back:hover { background: rgba(0, 0, 0, 0.04); }
.search-overlay__back:active { background: rgba(0, 0, 0, 0.08); }

/* Search input inside overlay — rounded rectangle with visible border */
.search-overlay__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #d5d5d5;
  border-radius: 12px;
  padding: 0 10px;
  height: 42px;
  min-width: 0;
}
.search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.92rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  min-width: 0;
  letter-spacing: 0.01em;
}
.search-overlay__input::placeholder {
  color: #b0b0b0;
  font-style: normal;
  font-weight: 400;
}

/* Header icon buttons (mic, camera) */
.search-overlay__hbtn {
  background: none;
  border: none;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.search-overlay__hbtn:hover { background: rgba(0, 0, 0, 0.04); color: #374151; }

/* ── Overlay body ── */
.search-overlay__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Section titles */
.so-section { padding: 20px 16px 10px; }
.so-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.so-section__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.so-clear-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: #E21B70;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.so-clear-btn:hover { opacity: 0.75; }

/* Recent search chips */
.so-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.so-chips::-webkit-scrollbar { display: none; }
.so-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 7px 14px 7px 10px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.so-chip:hover { background: #f0f0f0; border-color: rgba(0, 0, 0, 0.10); }
.so-chip__icon { color: #bbb; display: flex; align-items: center; }
.so-chip__text { font-size: 0.82rem; color: #333; white-space: nowrap; font-weight: 500; }

/* Popular trends grid */
.so-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.so-trend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 8px 6px 0;
  border-radius: 10px;
  border: none;
  background: none;
  text-align: left;
  transition: background 0.2s ease;
}
.so-trend-item:hover { background: rgba(0, 0, 0, 0.03); }
.so-trend-img {
  width: 50px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f5;
}
.so-trend-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

/* Fashion quote */
.so-quote {
  text-align: center;
  padding: 24px 28px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.so-quote p {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.7;
  font-style: italic;
  font-family: var(--font-display), serif;
}
.so-quote cite {
  font-size: 0.72rem;
  color: #bbb;
  display: block;
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Bottom action buttons */
.so-bottom-btns { display: flex; gap: 12px; padding: 16px; }
.so-bottom-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 13px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s ease, transform 0.15s ease;
}
.so-bottom-btn:hover { background: #efefef; }
.so-bottom-btn:active { transform: scale(0.97); }

/* Live search results */
.search-overlay__results { flex: 1; overflow-y: auto; display: none; }
.search-overlay.show-results .search-overlay__body { display: none; }
.search-overlay.show-results .search-overlay__results { display: block; }
.so-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  text-align: left;
  transition: background 0.15s ease;
  font-family: var(--font-body);
}
.so-result-item:hover { background: rgba(0, 0, 0, 0.02); }
.so-result-icon { color: #d1d5db; flex-shrink: 0; }
.so-result-text { font-size: 0.9rem; color: #333; font-weight: 400; }
.so-result-text em { font-style: normal; font-weight: 700; color: #E21B70; }
.so-no-results {
  padding: 48px 16px;
  text-align: center;
  color: #bbb;
  font-size: 0.9rem;
}

/* ── NAVBAR (standalone pages) ─────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60;
  height: 56px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Anti-flicker: GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 12px;
}
/* Override .container's 24px padding inside the navbar */
.navbar .navbar__inner { padding-left: 12px !important; padding-right: 12px !important; }

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  margin-right: auto;
  flex-shrink: 0;
}

.navbar__logo .logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.navbar__logo img.logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.navbar__logo span {
  color: var(--primary);
  /* Deep black text */
}

.navbar__search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.navbar__search input {
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
  /* subtle grey background */
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* slightly stronger border for white theme */
  border-radius: var(--radius-full);
  padding: 10px 20px 10px 44px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.navbar__search input:focus {
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.05);
}

.navbar__search input::placeholder {
  color: var(--text-muted);
}

.navbar__search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-btn:hover {
  border-color: var(--border);
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  transition: var(--transition);
}

.btn-primary {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 20px;
  color: #fff;
  /* White text on black button */
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--primary-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  padding: 9px 20px;
  color: var(--primary-light);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: rgba(124, 58, 237, 0.12);
}

/* ΓöÇΓöÇ SECONDARY NAV (Myntra Style) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.secondary-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: relative;
  top: unset;
  z-index: unset;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.secondary-nav__inner {
  display: flex;
  flex-direction: column;
}

.nav-tier-1 {
  display: flex;
  align-items: center;
  gap: 40px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Hardware accelerated smooth scrolling */
  will-change: transform;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.nav-tier-1::-webkit-scrollbar {
  display: none;
}

.sec-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 0;
  position: relative;
  transition: var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.sec-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: transparent;
  border-radius: 99px;
  transition: background-color 0.25s ease;
}

.sec-nav-link .nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sec-nav-link.active {
  color: #E21B70;
}

.sec-nav-link.active::after {
  background-color: #E21B70;
}

.sec-nav-link:hover {
  color: #E21B70;
}
.sec-nav-link:hover::after {
  background-color: #E21B70;
}
.sec-nav-link:active {
  color: #E21B70;
}
.sec-nav-link:active::after {
  background-color: #E21B70;
}

/* For mobile dual-tier specifically */
/* Mobile specific adjustments */
@media (max-width: 768px) {
  .secondary-nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-tier-1 {
    display: flex;
    justify-content: center !important;
    gap: 26px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
  }

  .nav-tier-2 {
    gap: 12px;
    padding: 10px 14px;
  }

  .sec-nav-link {
    font-size: 0.72rem !important;
    padding: 10px 0 12px 0 !important;
  }
}

.nav-tier-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
}

@media (max-width: 768px) {
  .nav-tier-2 {
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 12px;
    background: transparent;
  }
}

.icon-circle-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  transition: var(--transition);
  background: none;
  border: none;
  padding: 0;
  outline: none;
}

.icon-wrapper {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  padding: 12px;
  position: relative;
  overflow: hidden;
}

/* Premium Shining Effect */
.icon-wrapper::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 50%;
  height: 300%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  transition: all 0.6s;
  pointer-events: none;
  z-index: 1;
}

.icon-circle-link:hover .icon-wrapper::before {
  animation: premium-shine 0.8s forwards;
}

@keyframes premium-shine {
  0% {
    top: -100%;
    left: -100%;
  }

  100% {
    top: 100%;
    left: 100%;
  }
}


.icon-circle-link:active .icon-wrapper {
  transform: scale(0.92);
  /* Tactile press effect */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

.icon-circle-link.active .icon-wrapper {
  border-color: #E21B70;
  box-shadow: 0 8px 30px rgba(226, 27, 112, 0.15);
  transform: scale(1.08);
  /* Persistent active scale */
}


/* Premium Active Ripple Effect */
.icon-circle-link.active .icon-wrapper::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #E21B70;
  border-radius: 18px;
  animation: premium-ripple 1.5s infinite;
}

@keyframes premium-ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0.2) contrast(1.1);
  transition: all 0.4s ease;
}

.icon-circle-link.active .icon-wrapper img {
  filter: grayscale(0) contrast(1.2);
  transform: scale(1.05);
}

.icon-label {
  display: none;
  /* User explicitly said no need text */
}

/* ΓöÇΓöÇ Profile Dropdown Menu ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.nav-profile-menu {
  position: relative;
  display: inline-block;
}

@keyframes profile-shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

.profile-icon-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-25deg);
  animation: profile-shine 3s infinite;
  z-index: 2;
  pointer-events: none;
}

.nav-profile-menu .nav-btn {
  /* Inherit standard nav-btn styles, just override color if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  color: var(--text-base);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-profile-menu .nav-btn:hover {
  border-color: var(--border-hover);
  background: #fff;
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  border: 1px solid var(--border);
}

.nav-profile-menu.show .profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.dropdown-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.dropdown-header strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-base);
  margin-bottom: 2px;
}

.dropdown-header span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 0.2s ease;
}

.dropdown-item:hover {
  background: var(--surface);
  color: var(--primary);
}

.dropdown-item.text-danger:hover {
  background: #fff0f0;
  color: var(--danger);
}

@media (max-width: 768px) {
  .nav-profile-menu {
    position: static;
  }
  .profile-dropdown {
    width: 100%;
    left: 0;
    right: 0;
    top: 60px;
    margin-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none;
  }
  .profile-dropdown::before {
    display: none;
  }
}

.nav-tier-2::-webkit-scrollbar {
  display: none;
}

.sub-nav-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}

.sub-nav-link:hover {
  color: var(--primary);
  font-weight: 600;
}

/* Position: sticky elements take up document flow, so large padding-top is no longer needed */

@media (max-width: 768px) {
  main {
    padding-top: 0; /* Removing excess padding to fix large gap */
  }
}

/* ΓöÇΓöÇ HERO ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9; /* Ultra-wide for PC full-width display */
  margin: 40px 0; /* Balanced vertical gap (top and bottom) */
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 4px solid #fff; /* Premium white border */
  border-radius: 32px; /* Rounded corners for card look */
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  background: #000;
}

@media (max-width: 768px) {
  .hero {
    aspect-ratio: 16 / 9; /* Perfect 16:9 for mobile */
    margin: 30px 0; /* Scaled gap for mobile */
    border-radius: 20px;
    padding: 20px 0;
  }
}

.hero__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s ease-in-out, visibility 1.5s;
}

.hero__slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

/* Animations for Shoe Text */
.shoe-anim-text {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(30px);
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero__slide.active .shoe-anim-1 {
  animation: slideInUp 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero__slide.active .shoe-anim-2 {
  color: #D4FF00;
  animation: slideInUp 0.8s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0.7) 100%);
  z-index: -1;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #A78BFA;
  /* Primary light purple */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
  animation: fadeUp 0.6s ease both;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  color: #fff;
  animation: fadeUp 0.6s 0.1s ease both;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.hero h1 .gradient-text {
  color: var(--accent);
  /* Champagne gold - matches site accent */
  font-style: italic;
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto 40px;
  animation: fadeUp 0.6s 0.2s ease both;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}

.btn-hero {
  background: var(--accent);
  /* Champagne gold */
  border: none;
  border-radius: var(--radius-full);
  padding: 16px 40px;
  color: #1A1A1A;
  /* Dark text on gold */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: var(--transition);
  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.4);
  cursor: pointer;
}

.btn-hero:hover {
  transform: translateY(-3px) scale(1.03);
  background: #f0c93a;
  box-shadow: 0 12px 36px rgba(212, 175, 55, 0.5);
}

/* Secondary button ΓÇö glass outline */
.btn-secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-full) !important;
  padding: 14px 36px !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
  flex-wrap: wrap;
  animation: fadeUp 0.6s 0.4s ease both;
}

.hero__stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--accent);
}

.hero__stat span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ΓöÇΓöÇ CATEGORIES ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.categories {
  padding: 20px 0 40px;
  position: relative;
  z-index: 1;
}

.categories__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.categories__scroll::-webkit-scrollbar {
  display: none;
}

.cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.03);
  /* Light grey bg */
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}

.cat-btn:hover {
  border-color: var(--border);
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}

.cat-btn.active {
  background: var(--primary);
  /* Black active pill */
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.cat-btn .cat-emoji,
.cat-btn .cat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  font-size: 1rem;
}

/* ΓöÇΓöÇ SECTION HEADER ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-header a {
  font-size: 0.85rem;
  color: var(--primary-light);
  font-weight: 500;
  transition: var(--transition);
}

.section-header a:hover {
  color: var(--accent);
}

/* ΓöÇΓöÇ PRODUCTS GRID ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.products {
  padding: 20px 0 80px;
  position: relative;
  z-index: 1;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* ΓöÇΓöÇ PRODUCT CARD ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.product-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: transform 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: none;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fdfdfd;
  border-radius: 8px;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.04);
}

.product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-card__badge.sale {
  background: #A91D1D;
}

.product-card__badge.new {
  background: #065F46;
}

.product-card__actions {
  display: none;
}

/* Rating Pill */
.rating-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #111827;
}

.rating-pill .star {
  color: #0f766e; /* sophisticated teal-green star */
  font-size: 0.68rem;
}

.rating-pill .divider {
  color: #d1d5db;
  font-weight: 300;
  margin: 0 1px;
}

.rating-pill .count {
  color: #6b7280;
  font-weight: 500;
}

/* Premium Dark Theme ΓÇö Rating Pill Fix */
.premium-dark-theme .rating-pill {
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
}

.premium-dark-theme .rating-pill,
.premium-dark-theme .rating-pill span {
  color: #fff !important;
}

.premium-dark-theme .rating-pill .star {
  color: #D4AF37 !important; /* Gold star */
}

.premium-dark-theme .rating-pill .count {
  color: #bbb !important;
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}

.product-action-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: var(--transition);
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}

.product-action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.product-action-btn.wishlisted {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.product-card__body {
  padding: 6px 2px 4px 2px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.product-card__brand {
  font-weight: 700;
  font-size: 0.82rem;
  color: #282c3f;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.product-card__wishlist-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card__wishlist-btn.active {
  color: #ff3f6c;
  transform: scale(1.08);
}

.product-card__wishlist-btn.animating {
  animation: heartPop 0.3s ease-in-out;
}

/* Product Tag Badge like "Crazy Deal" */
.product-card__tag-badge {
  display: inline-block;
  align-self: flex-start;
  background: #ff2a5f;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  margin: 1px 0 3px 0;
  letter-spacing: 0.01em;
  font-family: 'Inter', sans-serif;
}

/* Best Price with Coupon line */
.product-card__best-price {
  font-size: 0.65rem;
  font-weight: 500;
  color: #03a685;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.product-card__best-price .best-price-value {
  font-weight: 700;
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Wishlist Snackbar */
.wishlist-snackbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #282c3f;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 400px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wishlist-snackbar.show {
  transform: translateX(-50%) translateY(0);
}

.snackbar-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.snackbar-action {
  color: #ff3f6c;
  font-weight: 700;
  font-size: 0.85rem;
  background: none;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
}

/* Collections Bottom Sheet */
.collections-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
}

.collections-overlay.open {
  opacity: 1;
  visibility: visible;
}

.collections-sheet {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.collections-overlay.open .collections-sheet {
  transform: translateY(0);
}

.collections-header {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--text-primary);
}

.collections-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0 40px;
  text-align: center;
}

.collections-empty-img {
  width: 120px;
  height: auto;
  margin-bottom: 20px;
  opacity: 0.8;
}

.collections-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #282c3f;
}

.collections-body p {
  font-size: 0.9rem;
  color: #7e818c;
  line-height: 1.4;
  max-width: 250px;
}

.create-collection-btn {
  width: 100%;
  background: #ff3f6c;
  color: #fff;
  border: none;
  padding: 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  margin-top: auto;
}

.product-card__description {
  font-size: 0.74rem;
  color: #7e808c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  line-height: 1.3;
}

/* ΓöÇΓöÇ PRODUCT VARIANTS ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.product-card__variants {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.variant-colors {
  display: flex;
  gap: 6px;
}

.color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: var(--primary);
  /* fallback */
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  padding: 0;
}

/* Dynamic colors injected softly based on title */
.color-swatch[title*="Black"] {
  background: #222;
}

.color-swatch[title*="White"] {
  background: #fdfdfd;
  border-color: #e0e0e0;
}

.color-swatch[title*="Burgundy"] {
  background: #800020;
}

.color-swatch[title*="Grey"] {
  background: #9e9e9e;
}

.color-swatch[title*="Green"] {
  background: #4caf50;
}

.color-swatch[title*="Red"] {
  background: #e53935;
}

.color-swatch[title*="Brown"] {
  background: #795548;
}

.color-swatch[title*="Beige"] {
  background: #f5f5dc;
  border-color: #dcdcdc;
}

.color-swatch.active {
  border-color: #000;
  transform: scale(1.2);
}

.variant-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.product-card__img-nav {
  display: none !important;
}

.img-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.img-dot.active {
  background: #000;
  transform: scale(1.3);
}

.product-card__price {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
}

.price-current {
  font-weight: 700;
  color: #282c3f;
}

.price-original {
  text-decoration: line-through;
  color: #7e808c;
  font-size: 0.72rem;
}

.price-discount {
  color: #ff905a;
  font-weight: 700;
  font-size: 0.72rem;
}


/* ΓöÇΓöÇ PROMO BANNERS ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.promo-banners {
  padding: 40px 0 80px;
  position: relative;
  z-index: 1;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {
  .promo-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  .promo-banner-card {
    border-radius: var(--radius-sm) !important;
  }
}

.promo-banner-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
  background: var(--bg-card);
  position: relative;
}

.promo-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.promo-banner-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.promo-banner-card:hover img {
  transform: scale(1.04);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ΓöÇΓöÇ MODAL / AUTH ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: scale(0.92) translateY(20px);
  transition: var(--transition);
}
/* Style the modal scrollbar simply */
.modal::-webkit-scrollbar {
  width: 6px;
}
.modal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}
.modal::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.modal__close:hover {
  color: var(--text-primary);
  border-color: var(--primary);
}

.modal {
  position: relative;
}

.modal__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.modal__logo .logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.modal__logo span {
  color: var(--primary);
}

.modal__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.modal__sub {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-group input {
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
  /* Light input bg */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus {
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
  /* Soft focus ring */
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.auth-submit {
  width: 100%;
  background: var(--primary);
  /* Black submit button */
  border: none;
  border-radius: var(--radius-md);
  padding: 13px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.auth-submit:hover {
  transform: translateY(-1px);
  background: var(--primary-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.auth-switch {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 16px;
}

.auth-switch a {
  color: var(--primary-light);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.auth-switch a:hover {
  color: var(--accent);
}

/* ΓöÇΓöÇ Auth Premium UI ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
/* Tab toggle row */
.auth-tab-row {
  display: flex;
  gap: 0;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 2px);
  padding: 9px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

/* Phone input */
.phone-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0,0,0,0.02);
}

.phone-prefix {
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.04);
  border-right: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  flex-shrink: 0;
}

.phone-input-wrap input {
  border: none !important;
  background: transparent !important;
  padding: 10px 12px;
  flex: 1;
  font-size: 0.95rem;
  outline: none;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 5px;
  margin-bottom: 0;
}

/* Google button */
.auth-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-md);
  padding: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.auth-google-btn:hover {
  background: #f8f8f8;
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.auth-google-btn * {
  pointer-events: none;
}

/* ══ Myntra-style OTP Modal Styles ══ */
.otp-modal {
  padding: 30px 24px !important;
}

.otp-step {
  display: none;
}

.otp-step.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Promo Banner */
.otp-promo-banner {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1px solid #fecdd3;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.otp-promo-stars {
  color: #fb7185;
  font-size: 0.85rem;
}

.otp-promo-stars--right {
  transform: scaleX(-1);
}

.otp-promo-gift {
  font-size: 1.1rem;
}

.otp-promo-text {
  font-size: 0.82rem;
  color: #e11d48;
  margin: 0;
  font-weight: 500;
}

.otp-heading {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 24px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

.otp-heading-or {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 4px;
}

/* Phone input field */
.otp-phone-field {
  margin-bottom: 24px;
}

.otp-phone-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.otp-phone-input-wrap:focus-within {
  border-color: #e11d48;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.otp-phone-prefix {
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.03);
}

.otp-phone-divider {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
}

.otp-phone-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: transparent !important;
  color: var(--text-primary);
}

.otp-terms {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.otp-terms a {
  color: #e11d48;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

.otp-terms a:hover {
  text-decoration: underline;
  color: #be123c;
}

/* Submit send/verify buttons */
.otp-send-btn {
  width: 100%;
  background: linear-gradient(135deg, #e11d48 0%, #ff4b72 100%);
  border: none;
  border-radius: 8px;
  padding: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2);
}

.otp-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.3);
}

.otp-send-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.otp-send-btn:disabled {
  background: #f1f1f1 !important;
  color: #999 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.otp-help-text {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 24px;
}

.otp-help-text a {
  color: #e11d48;
  font-weight: 700;
  text-decoration: none;
}

.otp-help-text a:hover {
  text-decoration: underline;
}

/* Step 2 Verify screen */
.otp-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  margin-bottom: 24px;
  transition: color 0.2s;
  font-family: inherit;
}

.otp-back-btn:hover {
  color: #e11d48;
}

.otp-verify-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

.otp-verify-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
  line-height: 1.5;
}

/* OTP Boxes container */
.otp-boxes {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.otp-box {
  width: 46px;
  height: 46px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
  outline: none;
}

.otp-box:focus {
  border-color: #e11d48;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.otp-timer-text {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.otp-timer-text strong {
  color: #e11d48;
  font-weight: 700;
}

.otp-resend-btn {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: #e11d48;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.2s;
  padding: 6px 12px;
}

.otp-resend-btn:hover {
  color: #be123c;
  text-decoration: underline;
}

.otp-verify-status {
  text-align: center;
  font-size: 0.82rem;
  color: #ef4444;
  margin-top: 14px;
  font-weight: 600;
  min-height: 20px;
}

/* Invisible recaptcha styling helper */
#recaptcha-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Dark theme overrides */
.premium-dark-theme .otp-promo-banner {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.25);
}

.premium-dark-theme .otp-promo-text {
  color: #ff4b72;
}

.premium-dark-theme .otp-phone-input-wrap {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.premium-dark-theme .otp-phone-input-wrap:focus-within {
  background: #000;
  border-color: var(--accent);
}

.premium-dark-theme .otp-phone-prefix {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.premium-dark-theme .otp-phone-divider {
  background: rgba(255, 255, 255, 0.15);
}

.premium-dark-theme .otp-box {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.premium-dark-theme .otp-box:focus {
  background: #000;
  border-color: var(--accent);
}

.premium-dark-theme .otp-send-btn:disabled {
  background: #222 !important;
  color: #555 !important;
}


/* ── Premium Join As Cards (Animated Gradient Border) ── */
.join-as-section {
  margin: 16px 0;
}

.join-as-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.join-as-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.join-as-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 8px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  overflow: hidden;
}

/* Hover: subtle glow hint even on inactive cards */
.join-as-card:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 2px 12px rgba(161, 140, 209, 0.12);
  transform: translateY(-1px);
}

/* Spinning conic-gradient — Cyan → Blue → Purple → Pink */
.join-as-card::before {
  content: '';
  position: absolute;
  width: 250%;
  height: 250%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    #00f2fe, #4facfe, #7c3aed,
    #a18cd1, #fbc2eb, #f093fb,
    #00f2fe
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: joinSpin 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* White inner mask — reveals only the gradient border edge */
.join-as-card::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 11.5px;
  background: #ffffff;
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* ── Active state ── */
.join-as-card.active {
  border-color: transparent;
  transform: scale(1.04);
  box-shadow:
    0 0 16px rgba(251, 194, 235, 0.45),
    0 0 32px rgba(161, 140, 209, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.06);
  animation: glowPulse 2.5s ease-in-out infinite;
}

.join-as-card.active::before {
  opacity: 1;
}



@keyframes joinSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(251, 194, 235, 0.45),
      0 0 32px rgba(161, 140, 209, 0.2),
      0 4px 20px rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow:
      0 0 24px rgba(251, 194, 235, 0.6),
      0 0 48px rgba(161, 140, 209, 0.3),
      0 6px 28px rgba(0, 0, 0, 0.08);
  }
}



/* Card text — sits above the ::after mask */
.join-as-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #9ca3af;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.join-as-desc {
  font-size: 0.7rem;
  color: #d1d5db;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

/* Active: text fully dark with emphasis */
.join-as-card.active .join-as-name {
  color: #111827;
  font-weight: 800;
}

.join-as-card.active .join-as-desc {
  color: #6b7280;
}



.page-header {
  padding: 60px 0 40px;
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
  align-items: start;
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: var(--transition);
}

.cart-item:hover {
  border-color: var(--border-hover);
}

.cart-item__image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: #F3F4F6;
  /* Light gray placeholder for cart image */
}

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

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

.cart-item__cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-light);
  font-weight: 600;
}

.cart-item__name {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2px;
}

.cart-item__brand {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.cart-item__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.qty-btn:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}

.qty-val {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 6px;
  min-width: 24px;
  text-align: center;
}

.cart-item__price {
  font-size: 1.1rem;
  font-weight: 700;
}

.cart-item__remove {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  transition: var(--transition);
  font-size: 1.1rem;
  padding: 4px;
}

.cart-item__remove:hover {
  color: var(--danger);
}

.cart-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: 90px;
}

.cart-summary h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

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

.summary-row.total {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

.promo-wrap {
  margin: 16px 0;
  display: flex;
  gap: 8px;
}

.promo-wrap input {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition);
}

.promo-wrap input:focus {
  border-color: var(--primary);
}

.promo-wrap button {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition);
}

.promo-wrap button:hover {
  background: var(--primary-dark);
}

.checkout-btn {
  width: 100%;
  background: var(--primary);
  /* Deep black checkout btn */
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 16px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.checkout-btn:hover {
  transform: translateY(-1px);
  background: var(--primary-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ΓöÇΓöÇ WISHLIST GRID ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.wishlist-section {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
}

/* ΓöÇΓöÇ EMPTY STATE ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  position: relative;
  z-index: 1;
}

.empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.empty-state h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ΓöÇΓöÇ FOOTER ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 60px 0 32px;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

@media (max-width:768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-brand .logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.footer-brand .logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.footer-brand .logo-wrap span {
  color: var(--primary);
  /* Dark text for footer logo */
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 240px;
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: var(--transition);
}

.footer-col ul li a:hover {
  color: var(--primary-light);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ΓöÇΓöÇ ANIMATIONS ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* ΓöÇΓöÇ RESPONSIVE ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
@media (max-width:768px) {
  .navbar__search {
    display: flex;
    flex: 1;
    margin: 0 10px;
    max-width: none;
  }

  .navbar__search input {
    padding: 8px 12px 8px 36px;
    font-size: 0.8rem;
    height: 36px;
  }

  .navbar__search .search-icon {
    left: 12px;
  }

  .navbar__search .search-icon svg {
    width: 14px;
    height: 14px;
  }

  .hero {
    padding: 60px 0 40px;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }

  .modal {
    padding: 24px;
  }

  .cart-item__image {
    width: 80px;
    height: 80px;
  }
}

@media (max-width:480px) {
  .navbar__inner {
    gap: 8px;
  }

  .nav-btn span {
    display: none;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Tighter gap for small devices */
  }
}

/* ΓöÇΓöÇ USER AVATAR ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--primary);
  /* Black avatar */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.user-avatar:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-glow);
}

/* ΓöÇΓöÇ TRENDING STRIP ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.trending-strip {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--accent));
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.trending-strip__inner {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ΓöÇΓöÇ Utility ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.hidden {
  display: none !important;
}

/* ΓöÇΓöÇ Scroll-Reveal Animations ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-reveal="left"] {
  transform: translateX(-50px);
}

[data-reveal="right"] {
  transform: translateX(50px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for child items */
[data-reveal-delay="100"] {
  transition-delay: 0.1s;
}

[data-reveal-delay="200"] {
  transition-delay: 0.2s;
}

[data-reveal-delay="300"] {
  transition-delay: 0.3s;
}

[data-reveal-delay="400"] {
  transition-delay: 0.4s;
}

[data-reveal-delay="500"] {
  transition-delay: 0.5s;
}

/* ΓöÇΓöÇ Parallax Video ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.hero__video {
  will-change: transform;
}

/* ΓöÇΓöÇ PRODUCT DETAILS MODAL (MYNTRA-STYLE) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.pdp-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdp-overlay.open {
  transform: translateY(0);
}

.pdp-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #fdfdfd;
  /* Reserve space for the fixed action bar + iOS home indicator */
  padding-bottom: 96px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  /* Hide native scrollbar — looks like a black bar on mobile */
  scrollbar-width: none;
}

.pdp-content::-webkit-scrollbar { display: none; }

.pdp-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;             /* above carousel dots (z-index:5) */
  background: #fff;
  border-bottom: 1px solid #eaeaec;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  gap: 8px;
}

/* Myntra-style full header bar */
.pdp-header--myntra {
  background: #ffffff !important;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 14px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.premium-dark-theme .pdp-header--myntra {
  background: #121212 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.pdp-back-btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #282c3f;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.pdp-back-btn:active { opacity: 0.7; }

/* Reverted round buttons to standard transparent icons */


/* ── PDP Simplified Search Pill (Myntra-style, full pill) ── */
.pdp-search-pill-simple {
  cursor: pointer !important;
  background: #fff !important;
  border: 1.5px solid #d5d5d5 !important;  /* same as shop page */
  border-radius: 14px !important;           /* match home page pill exactly */
  user-select: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.pdp-search-pill-simple:hover {
  border-color: #bbb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pdp-search-pill-simple:active {
  background: #f8f8f9 !important;
}

/* Fix body height — needs explicit height so placeholder is visible */
.pdp-search-pill-simple .search-pill__body {
  height: 44px !important;
}

/* Keep placeholder/ticker visible always (no real input to hide it) */
.pdp-search-pill-simple .search-pill__placeholder {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

/* Ticker word colour + size */
.pdp-search-pill-simple .ticker-word {
  color: #9ca3af;
  font-size: 0.84rem;
  font-weight: 400;
}


.pdp-header-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* PDP header icon buttons (wishlist + bag) */
.pdp-nav-icon-btn {
  background: transparent;
  border: none;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #282c3f;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.pdp-nav-icon-btn:active { opacity: 0.7; }

/* Badge on wishlist/bag icons */
.pdp-icon-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #ff3e6c;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid #fff;
}

/* Ensure no animation leaks into PDP header icons */
.pdp-back-btn *,
.pdp-header-icons *,
.pdp-nav-icon-btn * {
  animation: none !important;
  filter: none !important;
}

.pdp-hero {
  position: relative;
  width: 100%;
  background: #fdfdfd;
  /* No negative margin — header is now opaque */
}

/* Scrollable Image Carousel */
.pdp-carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.pdp-carousel-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar for cleaner look */
}

.pdp-carousel-img {
  flex: 0 0 100%;
  width: 100%;
  height: 480px;
  object-fit: cover;
  scroll-snap-align: start;
  background: #f4f4f4;
}

.pdp-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 5;              /* below sticky header (z-index:50) */
}

.pdp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.pdp-dot.active {
  background: #ff3e6c;
  width: 24px;
  border-radius: 4px;
}

.pdp-view-similar {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdp-view-similar .vs-btn {
  background: #fff;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.brand-rating {
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #ddd;
}

.brand-rating strong {
  color: #178e55;
  font-weight: 800;
}

/* Product Content Containers */
.pdp-title-block,
.pdp-price-block,
.pdp-offers-block,
.pdp-size-block,
.pdp-delivery-block,
.pdp-info-block,
.pdp-expert-block,
.pdp-similar-block {
  padding: 16px;
  background: #fff;
  margin-bottom: 8px;
}

/* Redesigned Flex Header Row */
.pdp-title-block--flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 0;
  margin-bottom: 0;
}

.pdp-title-left {
  flex: 1;
  padding-right: 16px;
}

.pdp-title-right {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

/* Outline Icon Buttons */
.pdp-action-icon-btn {
  background: transparent;
  border: 1px solid #d4d5d9;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #282c3f;
  transition: all 0.2s ease;
}

.pdp-action-icon-btn .icon {
  font-size: 1.2rem;
  line-height: 1;
}

.pdp-action-icon-btn:hover {
  border-color: #282c3f;
  background: #fafafa;
}

.pdp-action-icon-btn:active {
  transform: scale(0.95);
}

/* ── Myntra-style compact title block ── */
.pdp-title-block--myntra {
  padding: 14px 16px 10px;
  background: #fff;
  margin-bottom: 0;
}

/* Row 1: brand + name text, icons to right */
.pdp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 8px;
}

.pdp-title-text {
  flex: 1;
  min-width: 0;
}

/* Brand bold inline, name normal inline below */
.pdp-brand-inline {
  font-size: 0.95rem;
  font-weight: 800;
  color: #282c3f;
  display: inline;
  margin: 0;
}

.pdp-name-inline {
  font-size: 0.95rem;
  font-weight: 400;
  color: #535766;
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

/* Icons column: share + wishlist */
.pdp-title-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Keep old classes working (in case used elsewhere) */
.pdp-brand {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #282c3f;
}

.pdp-name {
  font-size: 1.1rem;
  color: #535766;
  line-height: 1.4;
  margin-bottom: 12px;
}

.pdp-price-row {
  display: flex;
  align-items: center;       /* center-align so pill sits flush with price */
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.pdp-mrp {
  font-size: 0.9rem;
  color: #94969f;
  text-decoration: line-through;
}

.pdp-current {
  font-size: 1.4rem;
  font-weight: 700;
  color: #282c3f;
}

.pdp-discount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff905a;
}

/* ── Discount pill — parallelogram ribbon shape (like Myntra) ── */
.pdp-discount-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Coral pink → salmon orange, left to right */
  background: linear-gradient(to right, #f9405f 0%, #ff8255 100%);
  background-size: 200% 100%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 4px;              /* keep original rounded shape */
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  box-shadow: none;                /* no glow */
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
  flex-shrink: 0;
  animation: discountGradient 3s ease infinite;
}

/* Shimmer sweep across the pill */
.pdp-discount-pill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.28), transparent);
  animation: discountSweep 2.8s 1s infinite;
}

/* Gradient shift — subtle left/right sway */
@keyframes discountGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer sweep timing */
@keyframes discountSweep {
  0%, 100% { left: -100%; }
  38%       { left: 130%; }
  39%       { left: -100%; }
}



.pdp-stock-alert {
  color: #ff7043;          /* Myntra uses orange for stock alert */
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 6px;
}

.pdp-mega-deal {
  background: #F7F4FF;
  border: 1px solid #e8e0f7;
  padding: 14px 16px 0;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 0;
  cursor: pointer;
  transition: background 0.2s;
  overflow: hidden;
}

.pdp-mega-deal:active {
  background: #efe9fc;
}

/* Top row: icon + price + extra-off pill */
.pdp-mega-deal__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pdp-mega-deal__icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}

.pdp-mega-deal__text {
  font-size: 0.95rem;
  color: #282c3f;
  flex: 1;
}

.pdp-mega-deal__text strong {
  font-weight: 800;
  font-size: 1.1rem;
  color: #282c3f;
}

.pdp-extra-off {
  background: #239D56;
  color: #fff;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Bottom row: coupon text + details link */
.pdp-mega-deal__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin: 10px -16px 0;
  background: #fff;
  border-top: 1px solid #eaeaec;
}

.pdp-mega-deal__coupon {
  font-size: 0.82rem;
  color: #535766;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pdp-mega-deal__fire {
  font-size: 0.9rem;
}

.pdp-mega-deal__details {
  color: #ff3e6c;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Legacy classes kept for compatibility */
.pdp-mega-deal__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdp-mega-deal__badge {
  background: #ff3e6c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pdp-coupon-line {
  font-size: 0.82rem;
  color: #535766;
  padding: 8px 0 4px;
  border-top: 1px dashed #e0e0e5;
  margin-top: 4px;
}

.pdp-coupon-bank {
  font-weight: 700;
  color: #282c3f;
}

.pdp-bank-offer,
.pdp-emi {
  font-size: 0.9rem;
  color: #282c3f;
  padding: 12px 0;
  border-bottom: 1px solid #eaeaec;
  display: flex;
  align-items: center;
}

.pdp-bank-offer span,
.pdp-emi span {
  font-weight: 700;
  margin: 0 4px;
}

.pdp-bank-offer a,
.pdp-emi a {
  margin-left: auto;
  color: #ff3e6c;
  text-decoration: none;
  font-weight: 700;
}

.pdp-bank-offer:last-child,
.pdp-emi:last-child {
  border-bottom: none;
}

.pdp-sz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pdp-sz-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.pdp-sz-header a {
  font-size: 0.9rem;
  color: #ff3e6c;
  text-decoration: none;
  font-weight: 700;
}

.pdp-sz-rec {
  display: inline-block;
  background: #f1ecff;
  color: #512da8;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Size required shake animation */
@keyframes sizeShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-6px); }
  30%     { transform: translateX(6px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}

.pdp-size-block.size-error {
  animation: sizeShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

.pdp-size-block.size-error .pdp-sz-grid {
  outline: 1px solid #ff3e6c;
  border-radius: 8px;
  padding: 8px;
}

.pdp-size-error-msg {
  color: #ff3e6c;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.2s ease;
}

.pdp-delivery-block.pin-error {
  animation: sizeShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

.pdp-delivery-block.pin-error .pdp-pin-check {
  border-color: #ff3e6c !important;
}

.pdp-pin-error-msg {
  color: #ff3e6c;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Size Refinements */
.pdp-sz-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pdp-sz-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdp-sz-btn {
  min-width: 52px;
  height: 52px;
  padding: 0 8px;
  border-radius: 8px; /* rounded rectangular blocks */
  border: 1px solid #d4d5d9;
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  color: #282c3f; /* dark text */
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-sz-btn.active {
  background: #282c3f; /* solid dark grey/navy */
  color: #fff;         /* white text */
  border-color: #282c3f;
}

.pdp-sz-btn.disabled {
  color: #bfc0c6;
  border: 1px solid #eaeaec;
  background: #f5f5f6;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.pdp-sz-btn.disabled::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #bfc0c6;
  transform: rotate(-45deg);
}

.sz-left {
  font-size: 0.75rem;
  color: #d4af37; /* gold text */
  font-weight: 700;
  margin-top: 4px;
}

.pdp-sz-measure {
  font-size: 0.85rem;
  color: #282c3f;
  margin-bottom: 8px;
  font-weight: 600;
}

.pdp-sz-tag {
  font-size: 0.75rem;
  color: #94969f;
  margin-top: 12px;
}

/* Similar Products Enhancements */
.pdp-similar-block {
  padding: 20px 16px;
  border-top: 8px solid #f5f5f6;
}

.pdp-similar-block h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #282c3f;
}

.pdp-similar-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
}

.pdp-similar-scroll::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

.similar-card {
  flex: 0 0 140px;
  background: #fff;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.similar-card:active {
  transform: scale(0.98);
}

.sc-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}

.sc-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.similar-card .rating-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  z-index: 2;
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.similar-card .rating-pill .star {
  color: #0f766e;
  font-size: 0.62rem;
}

.sc-info {
  padding: 8px 4px 4px;
  flex: 1;
}

.sc-brand {
  font-family: 'Assistant', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #282c3f;
  margin-bottom: 2px;
}

.sc-name {
  font-family: 'Assistant', sans-serif;
  font-size: 0.72rem;
  color: #535766;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.sc-price-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-family: 'Assistant', sans-serif;
  font-size: 0.75rem;
}

.sc-price {
  font-weight: 700;
  color: #282c3f;
}

.sc-original {
  color: #94969f;
  text-decoration: line-through;
  font-size: 0.68rem;
}

.sc-discount {
  color: #ff905a;
  font-weight: 700;
  font-size: 0.68rem;
}

.sc-add-cart-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #ff3f6c;
  border-radius: 50px;
  color: #ff3f6c;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sc-add-cart-btn.added {
  background: #ff3f6c;
  color: #fff;
  border-color: #ff3f6c;
}

.sc-add-cart-btn:not(.added):hover {
  background: #fff0f3;
  color: #ff1e56;
}

.sc-add-cart-btn.added:hover {
  background: #e02a56;
  border-color: #e02a56;
}

.sc-add-cart-btn:active {
  transform: scale(0.97);
}

.sc-cart-icon {
  font-size: 0.85rem;
}

/* PDP Shared scroll styles for Similar & Recently Viewed */
.pdp-recently-viewed-block {
  padding: 20px 16px;
  border-top: 8px solid #f5f5f6;
  background: #fff;
}

.pdp-recently-viewed-block h3 {
  font-family: 'Assistant', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #282c3f;
}

.pdp-recently-viewed-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.pdp-recently-viewed-scroll::-webkit-scrollbar {
  display: none;
}

/* PDP Products You May Like Grid and Tabs */
.pdp-grid-block {
  padding: 20px 16px;
  border-top: 8px solid #f5f5f6;
  background: #fff;
}

.pdp-grid-block h3 {
  font-family: 'Assistant', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #282c3f;
}

.pdp-grid-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pdp-grid-tabs::-webkit-scrollbar {
  display: none;
}

.pdp-tab-btn {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid #d4d5d9;
  background: #fff;
  color: #282c3f;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.pdp-tab-btn.active {
  border-color: #ff3e6c;
  color: #ff3e6c;
}

.pdp-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pdp-grid-container .product-card {
  animation: none !important;
  margin-bottom: 8px;
}

/* Dark Theme overrides for new elements */
.premium-dark-theme .pdp-recently-viewed-block,
.premium-dark-theme .pdp-grid-block {
  border-top-color: #1a1a1a;
  background: #121212;
}

.premium-dark-theme .pdp-recently-viewed-block h3,
.premium-dark-theme .pdp-grid-block h3 {
  color: #f3f4f6;
}

.premium-dark-theme .similar-card {
  background: #1e1e1e;
}

.premium-dark-theme .sc-brand,
.premium-dark-theme .sc-price {
  color: #f3f4f6;
}

.premium-dark-theme .sc-name {
  color: #9ca3af;
}

.premium-dark-theme .pdp-tab-btn {
  background: #1e1e1e;
  border-color: #374151;
  color: #d1d5db;
}

.premium-dark-theme .pdp-tab-btn.active {
  border-color: #ff3e6c;
  color: #ff3e6c;
}

/* Delivery Price Breakdown */
.pdp-del-price {
  font-size: 0.75rem;
  color: #94969f;
  display: block;
  margin-top: 4px;
}

.pdp-del-disc {
  color: #ff905a;
  font-weight: 700;
}

/* Sticky Action Bar Refinements */
.pdp-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 12px 16px;
  padding-bottom: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 12px;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.08);
  z-index: 10001;
  border-top: 1px solid #f5f5f6;
  box-sizing: border-box;
  /* Prevent layout shift when browser chrome hides/shows */
  will-change: transform;
}

/* Button 1: Buy Now (Outline/Ghost) */
.pdp-buy-now-btn {
  background: #fff;
  color: #ff3e6c;
  border: 1px solid #ff3e6c !important;
  flex: 1; /* equal width */
  padding: 14px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* gap between icon and text */
}

/* Button 2: Add to Cart (Solid) */
.pdp-add-bag-btn {
  background: #ff3e6c;
  color: #fff;
  border: 1px solid #ff3e6c !important;
  flex: 1; /* equal width */
  padding: 14px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* gap between icon and text */
}

.pdp-buy-now-btn:active,
.pdp-add-bag-btn:active {
  transform: scale(0.98);
}

/* ADDED state — solid pink + shining bag icon */
.pdp-add-bag-btn--added,
.pdp-add-bag-btn--added:hover {
  background: #ff3e6c !important;
  border-color: #ff3e6c !important;
  color: #fff !important;
}

/* Bag icon: pop-in then continuous shine glow */
.pdp-add-bag-btn--added svg {
  animation: bagPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             iconShine 2.5s ease-in-out 0.4s infinite;
}

@keyframes bagPop {
  0%   { transform: scale(0.5); opacity: 0; }
  65%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);  opacity: 1; }
}

@keyframes iconShine {
  0%,100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255,255,255,1))
                     drop-shadow(0 0 12px rgba(255,180,200,0.9)); }
}

/* Similar card — same shine on icon */
.sc-add-cart-btn.added svg {
  animation: iconShine 2.5s ease-in-out infinite;
}

/* ΓöÇΓöÇ Delivery Location Bottom Sheet Modal ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.delivery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.delivery-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.delivery-bottom-sheet {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 16px 16px 0 16px;
  height: 75vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.del-sheet-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}

.del-sheet-content::-webkit-scrollbar {
  display: none;                /* Chrome/Safari/Android */
}

.delivery-overlay.open .delivery-bottom-sheet {
  transform: translateY(0);
}

.del-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.del-header h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #282c3f;
}

.del-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #282c3f;
  cursor: pointer;
  padding: 4px;
}

.del-pin-input-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #d4d5d9;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}

.del-pin-input-group.pin-error {
  border-color: #ff3e6c;
  animation: sizeShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

.del-pin-error-msg {
  color: #ff3e6c;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: -10px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.2s ease;
}

.del-pin-input-group .pin-icon {
  margin-right: 12px;
  color: #535766;
  font-size: 1.1rem;
}

.del-pin-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  color: #282c3f;
  font-family: inherit;
}

.del-pin-input-group .pin-check-link {
  color: #ff3e6c;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.del-action-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.del-action-btn {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #282c3f;
  cursor: pointer;
  text-align: left;
  padding: 0;
  width: fit-content;
}

.del-action-btn .lp-chevron {
  color: #282c3f;
  font-size: 0.8rem;
  margin-left: 2px;
  transition: transform 0.2s;
}

.del-action-btn:hover .lp-chevron {
  transform: translateX(2px);
}

.del-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #94969f;
  margin-bottom: 24px;
  font-size: 0.9rem;
  font-weight: 600;
}

.del-or-divider::before,
.del-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #eaeaec;
}

.del-or-divider span {
  padding: 0 16px;
}

.del-saved-addresses h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #282c3f;
  margin-bottom: 12px;
}

.del-address-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #eaeaec;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  background: #fff;
}

.del-address-card.active {
  border-color: #ff3e6c;
  background: #fff0f3;
}

.del-address-card .addr-icon {
  color: #535766;
  font-size: 1.1rem;
  margin-top: 2px;
}

.del-address-card .addr-details {
  flex: 1;
}

.del-address-card .addr-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #282c3f;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.del-address-card .addr-tag {
  font-size: 0.65rem;
  background: #f5f5f6;
  color: #535766;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.del-address-card .addr-full {
  font-size: 0.85rem;
  color: #535766;
  line-height: 1.4;
}

.del-address-card .addr-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d4d5d9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: #d4d5d9; /* subtle gray checkmark when unchecked */
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.del-address-card .addr-radio::after {
  content: '\2713';
  font-weight: 900;
}

.del-address-card.active .addr-radio {
  border-color: #ff3e6c;
  background: #ff3e6c;
  color: #fff;
}

/* ΓöÇΓöÇ Myntra UI Refinements ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */

/* Delivery & Services Block */
.pdp-delivery-block--myntra h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #282c3f;
}

.pdp-pin-check--myntra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eaeaec;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.pin-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pin-left .icon {
  font-size: 1.1rem;
}

.pin-left .address {
  font-size: 0.95rem;
  font-weight: 700;
  color: #282c3f;
}

.change-btn {
  color: #ff3e6c;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.pdp-delivery-status--myntra {
  background: #fff0f3; /* light pink bg */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.standard-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #282c3f;
}

.standard-header .box-icon {
  font-size: 1.1rem;
}

.standard-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.del-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #282c3f;
}

.del-date .check-icon {
  background: #ff3e6c;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: bold;
}

.del-pricing {
  text-align: right;
  font-size: 0.85rem;
}

.pdp-del-mrp {
  color: #94969f;
  text-decoration: line-through;
  display: block;
  font-size: 0.75rem;
}

.pdp-del-price {
  font-weight: 700;
  color: #282c3f;
}

.pdp-seller-info {
  font-size: 0.85rem;
  color: #535766;
  margin-bottom: 16px;
  cursor: pointer;
}

.pdp-services-list--myntra {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-services-list--myntra li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #282c3f;
}

.service-icon {
  font-size: 1.2rem;
}

.service-icon.text-red {
  color: #ff3e6c; /* placeholder color if svg */
}

/* Product Details Block */
.pdp-info-block--myntra {
  border-top: 8px solid #f5f5f6;
  padding-top: 24px;
}

.pdp-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
}

.pdp-info-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #282c3f;
  margin: 0;
}

.pdp-info-header .chevron {
  font-size: 1.2rem;
  color: #282c3f;
  font-weight: bold;
}

.pdp-specs--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.spec-item {
  font-size: 0.9rem;
  color: #535766;
  line-height: 1.5;
}

.spec-item strong {
  display: block;
  font-weight: 700;
  color: #282c3f;
  margin-bottom: 4px;
}

.pdp-fabrics h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #282c3f;
  margin-bottom: 8px;
}

.view-more {
  font-size: 0.9rem;
  color: #ff3e6c;
  font-weight: 700;
  text-decoration: none;
}

/* Customer Questions Block */
.pdp-expert-block--myntra {
  border-top: 8px solid #f5f5f6;
  padding-top: 24px;
}

.expert-banner--gradient {
  background: linear-gradient(-45deg, #fdf8e2, #f9f0ca, #fffdf3, #f3e5b3);
  background-size: 400% 400%;
  animation: yellowGradientFlow 8s ease infinite;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 20px auto;
  max-width: 420px;
  box-shadow: 0 4px 15px rgba(243, 229, 179, 0.15);
  border: 1px solid rgba(243, 229, 179, 0.4);
  overflow: hidden;
  position: relative;
}

@keyframes yellowGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.expert-text {
  flex: 1;
  padding-right: 8px;
  text-align: left;
  min-width: 0; /* Critical: allows flex item to shrink below content width */
}

.expert-text .small-text {
  font-size: 0.6rem;
  color: #5c4423;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 2px 0;
  font-weight: 800;
  opacity: 0.85;
}

.expert-text-carousel {
  height: 18px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  flex-direction: column;
  animation: verticalSlide 9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.carousel-item {
  height: 18px;
  line-height: 18px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #3e260c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

@keyframes verticalSlide {
  0%, 25% { transform: translateY(0); }
  33%, 58% { transform: translateY(-18px); }
  66%, 91% { transform: translateY(-36px); }
  100% { transform: translateY(0); }
}

.expert-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 90px;
}

.call-expert--white {
  background: #fff;
  border: 1.5px solid #5c4423;
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #5c4423;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(92, 68, 35, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.call-expert--white:hover {
  background: #5c4423;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(92, 68, 35, 0.2);
}

.call-expert--white:active {
  transform: translateY(1px);
}

.call-expert--white svg {
  width: 11px;
  height: 11px;
}

.expert-time {
  font-size: 0.6rem;
  color: #5c4423;
  font-weight: 700;
  margin-top: 2px;
  text-align: center;
  display: block;
  white-space: nowrap;
}

/* Trust Badges - Premium Luxury Style */
.trust-badges-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 16px auto 0 auto;
  max-width: 420px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
  transition: all 0.3s ease;
}

.trust-badges-container:hover {
  border-color: rgba(184, 134, 11, 0.2);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.05);
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-decoration: none;
}

.trust-badge-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff; /* Pure white background as in screenshot */
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(184, 134, 11, 0.02);
  border: 1px solid #ebebeb; /* Subtle gray border */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.trust-badge-item:hover .trust-badge-icon-wrap {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 5px 12px rgba(184, 134, 11, 0.12);
  border-color: rgba(184, 134, 11, 0.35); /* Subtle gold border on hover */
  background: #ffffff;
}

.trust-badge-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.trust-badge-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #111827; /* Deep readable charcoal/black */
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.trust-badge-subtitle {
  font-size: 0.6rem;
  color: #4b5563; /* Darker, highly readable gray */
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}

.trust-badge-divider {
  width: 1.5px;
  height: 28px;
  background: #e5e7eb;
  margin: 0 12px;
}/* -- Share Menu Styles ----------------------------------------- */
.share-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 10000; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.share-overlay.open { opacity: 1; pointer-events: auto; }
.share-bottom-sheet { width: 100%; background: #fff; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); padding: 16px 16px 32px 16px; }
.share-overlay.open .share-bottom-sheet { transform: translateY(0); }
.share-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.share-header h4 { font-size: 1.1rem; font-weight: 700; color: #282c3f; }
.share-close-btn { background: none; border: none; font-size: 1.5rem; color: #282c3f; cursor: pointer; padding: 4px; }
.share-platforms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; justify-items: center; }
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; }
.share-opt span { font-size: 0.75rem; color: #535766; font-weight: 600; }
.share-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-size: 24px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sc-whatsapp { background-color: #25D366; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>'); }
.sc-facebook { background-color: #1877F2; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'); }
.sc-telegram { background-color: #0088cc; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>'); }
.sc-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>'); }
.sc-copy { background-color: #4a4a4a; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>'); }
.share-opt.copied #copy-label { color: #ff3e6c; }
.share-opt.copied .sc-copy { background-color: #ff3e6c; }

/* -- Wishlist Button Active State ------------------------------ */
.pdp-action-icon-btn.wishlisted svg { fill: #ff3e6c; stroke: #ff3e6c; }
/* Smart Handoff In-Page Actions */
.pdp-in-page-actions { display: flex; gap: 12px; padding: 0 16px 24px 16px; margin-top: 16px; }
.pdp-in-page-actions button { flex: 1; padding: 14px; border-radius: 4px; font-size: 1rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; }
#pdp-in-page-buy { background: #fff; color: #ff3e6c; border: 1px solid #ff3e6c; }
#pdp-in-page-add { background: #ff3e6c; color: #fff; border: 1px solid #ff3e6c; }

/* Sticky Bar Animation overrides */
.pdp-action-bar { transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.pdp-action-bar.show-sticky { transform: translateY(0); }

/* ΓöÇΓöÇ Premium Parallax Slider ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.parallax-hero {
  position: relative;
  width: 100%;
  height: 85vh; /* Adjusted for shop page height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  background: #000;
}

.parallax-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  animation: parallaxZoom 25s infinite alternate ease-in-out;
}

@keyframes parallaxZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.25); }
}

.parallax-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
  z-index: 2;
}

.parallax-hero__float-layers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.parallax-asset {
  position: absolute;
  width: clamp(100px, 18vw, 220px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.parallax-asset:hover {
  transform: scale(1.15) rotate(8deg) translateY(-10px);
  filter: drop-shadow(0 40px 80px rgba(212, 255, 0, 0.4));
}

/* Float Animations with Unique Delays */
@keyframes bobbing {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-35px) rotate(4deg); }
}

.asset-1 { top: 10%; left: 8%; animation: bobbing 6s infinite ease-in-out; }
.asset-2 { top: 15%; right: 12%; animation: bobbing 7s infinite ease-in-out 1s; }
.asset-3 { bottom: 20%; left: 12%; animation: bobbing 8s infinite ease-in-out 0.5s; }
.asset-4 { bottom: 15%; right: 8%; animation: bobbing 5s infinite ease-in-out 1.5s; }
.asset-5 { top: 45%; left: 3%; animation: bobbing 9s infinite ease-in-out 2s; }
.asset-6 { top: 40%; right: 3%; animation: bobbing 10s infinite ease-in-out 0.8s; }

.parallax-hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8vh;
}

.parallax-btn {
  display: inline-block;
  background: #ffffff;
  color: #0a0a0a;
  font-weight: 900;
  font-size: 1.15rem;
  padding: 18px 58px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 15px 45px rgba(0,0,0,0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 2px solid transparent;
}

@media (hover: hover) {
  .parallax-btn:hover {
    background: #D4FF00;
    color: #000;
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 20px 60px rgba(212, 255, 0, 0.6);
  }
}

.parallax-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

@media (max-width: 768px) {
  .parallax-hero { height: 75vh; }
  .parallax-asset { width: 120px; }
  .asset-5, .asset-6 { display: none; }
  
  .parallax-btn {
    padding: 12px 28px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    width: auto;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
  }
}

/* ΓöÇΓöÇ Scrolling Transition Effects ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}




/* ΓöÇΓöÇ Shops Section (Global Premium Redesign) ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */
.shops-section {
    background: #fff;
    padding: 40px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    overflow: hidden;
}

.shops-section__title {
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    color: #1A1A1A;
    margin-bottom: 40px;
    opacity: 1;
}

.shops-section__sub {
    display: none; /* Removed for minimalist premium look */
}

.shops-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 10px 0;
}

.shops-grid::-webkit-scrollbar { display: none; }

.shop-card {
    position: relative;
    flex: 0 0 90px !important;
    width: 90px !important;
    max-width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.shop-card::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #D4AF37;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.shop-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.shop-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.shop-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    filter: none !important;
    opacity: 1 !important;
    transition: all 0.4s ease;
}

.shop-card:hover img {
    transform: scale(1.1);
}

/* Myntra-style Product Details & Specs Card */
.myntra-details-card {
  border: 1px solid #eaeaec;
  border-radius: 20px;
  padding: 24px;
  margin: 16px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #282c3f;
}

.myntra-details-section-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #282c3f;
  margin-top: 22px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.myntra-details-section-title:first-child {
  margin-top: 0;
}

.myntra-details-text {
  font-size: 0.88rem;
  color: #535766;
  line-height: 1.6;
}

.myntra-details-bullet-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.myntra-details-bullet-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: #282c3f;
  line-height: 1.5;
}

.myntra-details-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -1px;
  color: #282c3f;
  font-size: 1.2rem;
  line-height: 1;
}

.myntra-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin: 18px 0;
  border-bottom: 1px solid #f5f5f6;
  padding-bottom: 18px;
}

.myntra-spec-item {
  font-size: 0.88rem;
  color: #535766;
}

.myntra-spec-item strong {
  display: block;
  font-weight: 700;
  color: #282c3f;
  margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   RATINGS & REVIEWS — PDP Block (Myntra style)
   ═══════════════════════════════════════════════════════════════ */
.pdp-ratings-block {
  padding: 18px 16px 0;
  background: #fff;
  border-top: 8px solid #f5f5f6;
}
.pdp-ratings-summary { user-select: none; }
.pdp-ratings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pdp-ratings-overview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.pdp-avg-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg,#1a8f5a,#22c55e);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(34,197,94,.25);
}
.pdp-avg-num { letter-spacing: -.02em; }
.pdp-ratings-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pdp-ratings-count, .pdp-reviews-count { font-size: .85rem; color: #535766; font-weight: 600; }
.pdp-ratings-sep { color: #ddd; font-size: .8rem; }

/* Photo strip */
.pdp-review-photos { padding: 0 0 12px; }
.pdp-review-photos-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pdp-review-photos-scroll::-webkit-scrollbar { display: none; }
.pdp-rphoto-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  cursor: pointer;
  transition: transform .2s;
}
.pdp-rphoto-thumb:active { transform: scale(.96); }
.pdp-rphoto-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Compact review cards */
.pdp-reviews-list-wrap { padding-bottom: 16px; }
.pdp-reviews-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.pdp-reviews-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.pdp-reviews-scroll::-webkit-scrollbar { display: none; }
.pdp-rev-card {
  flex: 0 0 220px;
  background: #fff;
  border: 1px solid #eaeaec;
  border-radius: 10px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.pdp-rev-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pdp-rev-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-rev-star-badge {
  display: inline-flex; align-items: center; gap: 3px;
  color: #fff; font-size: .75rem; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
}
.pdp-rev-date { font-size: .7rem; color: #94969f; }
.pdp-rev-size {
  font-size: .68rem; color: #535766; background: #f5f5f6;
  padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.pdp-rev-text { font-size: .82rem; color: #282c3f; line-height: 1.45; }
.pdp-rev-card-img {
  width: 100%; height: 80px; object-fit: cover;
  border-radius: 6px; border: 1px solid #eee;
}
.pdp-rev-user {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; color: #535766; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   RATINGS FULL MODAL (slides over PDP like Myntra)
   ═══════════════════════════════════════════════════════════════ */
#ratings-full-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.rfm-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.rfm-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.rfm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.rfm-back {
  background: none; border: none; color: #282c3f;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.rfm-back:hover { background: #f5f5f6; }
.rfm-title { font-size: 1rem; font-weight: 800; color: #282c3f; }

.rfm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Overview */
.rfm-overview {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.rfm-avg-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 80px;
}
.rfm-avg-num {
  font-size: 2.8rem;
  font-weight: 900;
  color: #282c3f;
  line-height: 1;
  letter-spacing: -.03em;
}
.rfm-avg-sub { font-size: .72rem; color: #94969f; text-align: center; line-height: 1.5; }
.rfm-bars-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rfm-bar-row { display: flex; align-items: center; gap: 8px; }
.rfm-bar-label { font-size: .78rem; color: #535766; width: 24px; text-align: right; flex-shrink: 0; }
.rfm-bar-track { flex: 1; height: 6px; background: #eaeaec; border-radius: 3px; overflow: hidden; }
.rfm-bar-fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.rfm-bar-count { font-size: .72rem; color: #94969f; width: 16px; flex-shrink: 0; }

/* Photos strip in modal */
.rfm-photos-strip { margin-bottom: 16px; }
.rfm-photos-scroll {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.rfm-photos-scroll::-webkit-scrollbar { display: none; }
.rfm-photo-thumb {
  flex: 0 0 120px; width: 120px; height: 120px;
  object-fit: cover; border-radius: 8px; border: 1px solid #eee;
  cursor: pointer; transition: transform .2s;
}
.rfm-photo-thumb:active { transform: scale(.96); }

/* Filter pills */
.rfm-filters {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-bottom: 12px;
}
.rfm-filters::-webkit-scrollbar { display: none; }
.rfm-pill {
  flex: 0 0 auto; padding: 7px 16px;
  border: 1px solid #ddd; border-radius: 20px;
  font-size: .8rem; font-weight: 600; color: #535766;
  background: #fff; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
}
.rfm-pill.active { border-color: #ff3e6c; color: #ff3e6c; background: #fff0f3; }

/* Sort */
.rfm-sort-wrap { margin-bottom: 16px; }
.rfm-sort-select {
  width: 100%; padding: 12px 16px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: .85rem; font-family: 'Inter', sans-serif;
  color: #282c3f; background: #fff; cursor: pointer;
  outline: none;
}

/* Review items */
.rfm-rev-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}
.rfm-rev-item:last-child { border-bottom: none; }
.rfm-rev-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rfm-rev-badge {
  display: inline-flex; align-items: center; gap: 3px;
  color: #fff; font-size: .75rem; font-weight: 800;
  padding: 3px 9px; border-radius: 4px;
}
.rfm-rev-date { font-size: .75rem; color: #94969f; }
.rfm-rev-body { font-size: .88rem; color: #282c3f; line-height: 1.5; margin-bottom: 8px; }
.rfm-rev-size {
  display: inline-block; font-size: .75rem; color: #535766;
  background: #f5f5f6; padding: 4px 10px; border-radius: 4px;
  font-weight: 600; margin-bottom: 10px;
}
.rfm-rev-img {
  width: 100%; max-width: 180px; height: 160px; object-fit: cover;
  border-radius: 8px; border: 1px solid #eee; margin-bottom: 10px;
  display: block;
}
.rfm-rev-footer { display: flex; align-items: center; justify-content: space-between; }
.rfm-rev-user { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #535766; font-weight: 600; }
.rfm-helpful { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #94969f; }
.rfm-help-btn {
  background: none; border: none; font-size: .78rem; color: #535766;
  cursor: pointer; font-family: inherit; padding: 2px 4px;
  border-radius: 4px; transition: background .15s;
}
.rfm-help-btn:hover { background: #f5f5f6; }

/* Vendor reply in review */
.rfm-vendor-reply {
  background: #f0fdf4; border-left: 3px solid #22c55e;
  border-radius: 0 8px 8px 0; padding: 10px 12px;
  margin: 8px 0; font-size: .82rem; color: #166534;
}
.rfm-vendor-badge {
  display: inline-block; font-size: .65rem; font-weight: 800;
  background: #dcfce7; color: #15803d; padding: 2px 8px;
  border-radius: 20px; margin-bottom: 4px; letter-spacing: .04em;
}
.rfm-vendor-reply p { color: #166534; line-height: 1.5; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   WRITE REVIEW MODAL (orders.html bottom sheet)
   ═══════════════════════════════════════════════════════════════ */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  animation: fadeInBg .25s ease;
}
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
.review-modal-sheet {
  background: #fff;
  width: 100%;
  max-height: 90vh;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  padding: 20px 16px 32px;
  animation: slideUpSheet .3s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.review-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.review-modal-title { font-size: 1rem; font-weight: 800; color: #282c3f; }
.review-modal-close { background: none; border: none; font-size: 1.3rem; color: #aaa; cursor: pointer; padding: 4px; }
.review-stars-row { display: flex; gap: 10px; margin-bottom: 14px; justify-content: center; }
.review-star-btn {
  width: 42px; height: 42px; background: none; border: none;
  cursor: pointer; padding: 0; transition: transform .15s;
}
.review-star-btn:active { transform: scale(1.25); }
.review-star-btn svg { width: 100%; height: 100%; }
.review-textarea {
  width: 100%; min-height: 100px; padding: 12px 14px;
  border: 1.5px solid #eaeaec; border-radius: 10px;
  font-size: .88rem; font-family: 'Inter', sans-serif;
  color: #282c3f; resize: none; outline: none;
  transition: border-color .2s; margin-bottom: 12px; line-height: 1.5;
}
.review-textarea:focus { border-color: #ff3e6c; }
.review-photo-row { margin-bottom: 16px; }
.review-photo-label { font-size: .78rem; font-weight: 700; color: #535766; margin-bottom: 8px; }
.review-photo-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.review-photo-add {
  width: 72px; height: 72px; border: 2px dashed #ddd; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .62rem; color: #aaa; cursor: pointer; transition: border-color .2s;
  font-family: 'Inter', sans-serif; gap: 4px;
}
.review-photo-add:hover { border-color: #ff3e6c; color: #ff3e6c; }
.review-photo-thumb-item {
  width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  border: 1px solid #eee; position: relative;
}
.review-photo-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.review-submit-btn {
  width: 100%; padding: 14px;
  background: #ff3e6c; color: #fff; border: none;
  border-radius: 10px; font-size: .92rem; font-weight: 800;
  font-family: 'Inter', sans-serif; cursor: pointer; letter-spacing: .02em;
  transition: background .2s, transform .1s;
}
.review-submit-btn:hover { background: #e0315d; }
.review-submit-btn:active { transform: scale(.98); }
.review-size-note {
  font-size: .78rem; color: #94969f; text-align: center;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION PERMISSION MODAL (AJIO-Style First Visit Prompt)
   ═══════════════════════════════════════════════════════════════ */
.loc-perm-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.loc-perm-overlay.open {
  opacity: 1; pointer-events: auto;
}
.loc-perm-sheet {
  width: 100%; max-width: 480px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.loc-perm-overlay.open .loc-perm-sheet {
  transform: translateY(0);
}
.loc-perm-icon {
  text-align: center; margin-bottom: 16px;
}
.loc-perm-icon i {
  font-size: 2.2rem;
  color: #4285f4;
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.loc-perm-title {
  text-align: center;
  font-size: 1.05rem; font-weight: 600; color: #1a1a2e;
  margin-bottom: 22px; line-height: 1.5;
}
.loc-perm-title strong {
  font-weight: 800; color: #111;
}
.loc-perm-options {
  display: flex; justify-content: center; gap: 32px;
  margin-bottom: 28px;
}
.loc-perm-option {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; gap: 10px;
}
.loc-perm-circle {
  width: 90px; height: 90px; border-radius: 50%;
  border: 3px solid #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: all 0.3s ease;
  background: #f8f9fa; position: relative;
}
.loc-perm-option.selected .loc-perm-circle {
  border-color: #4285f4; box-shadow: 0 0 0 3px rgba(66,133,244,0.18);
}
.loc-perm-circle img {
  width: 100%; height: 100%; object-fit: cover;
}
.loc-perm-circle-inner {
  width: 100%; height: 100%;
  background: #e8f4e8;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.loc-perm-circle-inner.approx {
  background: #fff3e0;
}
.loc-perm-circle-inner i {
  font-size: 1.8rem; color: #4285f4;
}
.loc-perm-circle-inner.approx i {
  color: #fb8c00;
}
/* Map grid lines for precise/approximate illustrations */
.loc-perm-circle-inner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.loc-perm-circle-inner::after {
  content: '';
  position: absolute; inset: 8px;
  border: 2px solid rgba(66,133,244,0.25);
  border-radius: 50%;
}
.loc-perm-circle-inner.approx::after {
  border-color: rgba(251,140,0,0.25);
  inset: 4px;
}
.loc-perm-label {
  font-size: 0.85rem; font-weight: 700; color: #333;
}
.loc-perm-option.selected .loc-perm-label {
  color: #4285f4;
}
.loc-perm-actions {
  display: flex; flex-direction: column; gap: 0;
}
.loc-perm-btn {
  width: 100%; padding: 16px;
  background: none; border: none;
  font-size: 0.95rem; font-weight: 700;
  color: #1a1a2e; cursor: pointer;
  font-family: 'Inter', sans-serif;
  border-top: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.loc-perm-btn:first-child { border-top: none; }
.loc-perm-btn:hover { background: #f8f9fa; }
.loc-perm-btn.deny {
  color: #999; font-weight: 500;
}
.loc-perm-btn.deny:hover { color: #666; }

/* ═══════════════════════════════════════════════════════════════
   FULL-SCREEN LOCATION PICKER (Google Maps)
   ═══════════════════════════════════════════════════════════════ */
.location-picker-screen {
  position: fixed; inset: 0; z-index: 100001;
  background: #fff;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(100%);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.location-picker-screen.open {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.lp-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff; border-bottom: 1px solid #f0f0f0;
  z-index: 10; flex-shrink: 0;
}
.lp-back-btn {
  background: none; border: none;
  font-size: 1.2rem; color: #111; cursor: pointer;
  padding: 4px; display: flex; align-items: center;
}
.lp-topbar-title {
  font-size: 1.05rem; font-weight: 700; color: #111;
}
.lp-search-wrap {
  padding: 10px 16px; flex-shrink: 0;
  background: #fff; z-index: 1010;
  position: relative;
}
.lp-search-input-group {
  display: flex; align-items: center;
  background: #f5f5f6; border: 1.5px solid #e8e8e8;
  border-radius: 10px; padding: 12px 16px; gap: 10px;
  transition: border-color 0.2s;
}
.lp-search-input-group:focus-within {
  border-color: #4285f4; background: #fff;
  box-shadow: 0 2px 12px rgba(66,133,244,0.1);
}
.lp-search-input-group i {
  color: #888; font-size: 0.95rem; flex-shrink: 0;
}
.lp-search-input {
  flex: 1; border: none; outline: none;
  background: transparent;
  font-size: 0.95rem; font-family: 'Inter', sans-serif;
  color: #111;
}
.lp-search-input::placeholder { color: #aaa; }
.lp-search-clear {
  background: none; border: none; cursor: pointer;
  color: #999; font-size: 1rem; padding: 2px;
  display: none;
}
.lp-search-input-group.has-value .lp-search-clear { display: block; }
/* Autocomplete dropdown */
.lp-autocomplete-list {
  position: absolute; left: 0; right: 0;
  top: calc(100% - 6px); background: #fff;
  border: 1.5px solid #e8e8e8; border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  max-height: 55vh; overflow-y: auto;
  z-index: 1020; display: none;
  -webkit-overflow-scrolling: touch;
}
.lp-autocomplete-list.show { display: block; }
.lp-autocomplete-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; gap: 10px;
  color: #888; font-size: 0.85rem;
}
.lp-autocomplete-loading .lp-mini-spin {
  width: 16px; height: 16px;
  border: 2px solid #e0e0e0; border-top-color: #4285f4;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.lp-autocomplete-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid #f5f5f5;
}
.lp-autocomplete-item:last-child { border-bottom: none; }
.lp-autocomplete-item:hover, .lp-autocomplete-item:active { background: #f0f4ff; }
.lp-autocomplete-item .lp-ac-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f5f5f6; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.lp-autocomplete-item .lp-ac-icon i {
  color: #666; font-size: 0.85rem;
}
.lp-autocomplete-item .lp-ac-text { flex: 1; }
.lp-autocomplete-item .lp-ac-title {
  font-size: 0.9rem; font-weight: 600; color: #111;
  margin-bottom: 2px; line-height: 1.3;
}
.lp-autocomplete-item .lp-ac-subtitle {
  font-size: 0.78rem; color: #888; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lp-autocomplete-item .lp-ac-arrow {
  color: #ccc; font-size: 0.7rem;
  align-self: center; flex-shrink: 0;
}
.lp-map-area {
  flex: 1; position: relative; min-height: 0;
}
.lp-map-container {
  width: 100%; height: 100%;
}
/* Center pin overlay on map */
.lp-pin-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 1000; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.lp-pin-tooltip {
  background: rgba(40, 44, 63, 0.92);
  color: #fff; padding: 8px 14px;
  border-radius: 8px; font-size: 0.78rem;
  font-weight: 500; text-align: center;
  line-height: 1.4; white-space: nowrap;
  margin-bottom: 6px; position: relative;
  backdrop-filter: blur(8px);
}
.lp-pin-tooltip::after {
  content: '';
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(40, 44, 63, 0.92);
}
.lp-pin-marker {
  width: 32px; height: 42px;
  position: relative;
  transition: transform 0.2s ease;
}
.lp-pin-marker.bouncing {
  animation: pinBounce 0.5s ease;
}
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(-4px); }
}
.lp-pin-marker svg {
  width: 100%; height: 100%;
}
.lp-pin-shadow {
  width: 20px; height: 6px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  margin-top: -2px;
}
/* Current location button on map */
.lp-my-loc-btn {
  position: absolute; bottom: 16px; right: 16px;
  width: 44px; height: 44px;
  background: #fff; border: none;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1000;
  transition: all 0.2s;
}
.lp-my-loc-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.lp-my-loc-btn i { font-size: 1.1rem; color: #4285f4; }
.lp-my-loc-btn.loading i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Use current location bar */
.lp-use-current-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: #fff; border-top: 1px solid #f0f0f0;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.2s;
}
.lp-use-current-bar:hover { background: #f8f9fa; }
.lp-use-current-bar .lp-cur-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: #e8f0fe; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-use-current-bar .lp-cur-icon i {
  color: #4285f4; font-size: 0.9rem;
}
.lp-use-current-bar span {
  font-size: 0.9rem; font-weight: 600; color: #333;
}
.lp-use-current-bar .lp-chevron {
  margin-left: auto; color: #ccc; font-size: 0.8rem;
}
/* Google attribution */
.lp-google-attr {
  padding: 6px 20px; flex-shrink: 0;
}
.lp-google-attr img { height: 16px; }
/* Bottom address display */
.lp-bottom-panel {
  background: #fff; flex-shrink: 0;
  border-top: 1px solid #eee;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
.lp-address-display {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.lp-address-display .lp-addr-pin {
  color: #282c3f; font-size: 1.3rem;
  margin-top: 2px; flex-shrink: 0;
}
.lp-address-info { flex: 1; }
.lp-address-area {
  font-size: 1.05rem; font-weight: 800; color: #111;
  margin-bottom: 4px; line-height: 1.3;
}
.lp-address-full {
  font-size: 0.82rem; color: #666;
  line-height: 1.45;
}
.lp-address-source {
  font-size: 0.72rem; color: #4285f4;
  margin-top: 5px; font-weight: 600;
}
.lp-address-pincode {
  display: inline-block; font-size: 0.72rem;
  background: #f0f4ff; color: #4285f4;
  padding: 2px 8px; border-radius: 4px;
  font-weight: 700; margin-top: 5px; margin-right: 6px;
}
#lp-confirm {
  width: 100%; padding: 17px;
  background: #ff3e6c !important; color: #fff !important;
  border: none; border-radius: 14px;
  font-size: 1rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(255, 62, 108, 0.2);
}
#lp-confirm:hover { background: #e11d48 !important; }
#lp-confirm:active { transform: scale(0.98); }
#lp-confirm:disabled {
  background: #d0d0d0 !important; color: #fff !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
/* Loading state for location detection */
.lp-loading-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 30; gap: 12px;
}
.lp-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid #e0e0e0;
  border-top-color: #4285f4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.lp-loading-text {
  font-size: 0.85rem; color: #666; font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   IMPROVED DELIVERY MODAL — Address Cards & Action Buttons
   ═══════════════════════════════════════════════════════════════ */
.del-action-btn .addr-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff0f3 !important;
  color: #ff3e6c !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  transition: all 0.2s ease;
}
/* Loading spinner in Use My Current Location */
.del-action-btn .loc-spinner {
  width: 16px; height: 16px;
  border: 2px solid #e0e0e0;
  border-top-color: #4285f4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}
.del-action-btn.loading .loc-spinner { display: block; }
.del-action-btn.loading .addr-icon { display: none; }
/* Empty state for saved addresses */
.del-no-addresses {
  text-align: center; padding: 20px;
  color: #aaa; font-size: 0.85rem;
}
.del-no-addresses i {
  font-size: 1.5rem; margin-bottom: 8px; display: block;
  color: #ddd;
}

/* Premium Map Picker Pin Animations */
.lp-pin-marker.lifted {
  transform: translateY(-16px);
}
.lp-pin-shadow {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease !important;
}
.lp-pin-shadow.shrunk {
  transform: scale(0.5) !important;
  opacity: 0.4 !important;
}
.lp-pin-marker {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.lp-pin-marker.bouncing {
  animation: pinBounce 0.45s ease-out;
}
@keyframes pinBounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Glassmorphic Tooltip Overlay */
.lp-pin-tooltip {
  background: rgba(40, 44, 63, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Delivery Loader Overlay with Shopverce Logo & Spinner Ring */
.del-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 16px;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.del-loading-spinner-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.del-loading-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.del-loading-spinner-ring {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 3px solid rgba(255, 62, 108, 0.15);
  border-top: 3px solid #ff3e6c;
  border-right: 3px solid #ff3e6c;
  border-radius: 50%;
  animation: delSpinner 0.8s linear infinite;
  z-index: 1;
}
@keyframes delSpinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* MapLibre Controls Adjustments */
.maplibregl-ctrl-group {
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  border: none !important;
}
.maplibregl-ctrl-group button {
  width: 36px !important;
  height: 36px !important;
}

/* ── Premium Toast Notification ── */
#toast-container {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110000; /* Must overlay both delivery modal (10000) and map picker (100001) */
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.sv-toast {
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  max-width: 90vw;
}

.sv-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Mobile responsive overrides for Product Details Page (PDP) overlay */
@media (max-width: 767px) {
  .pdp-carousel-img {
    height: 380px !important;
  }
  .pdp-content {
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .products .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .products-grid {
    gap: 8px !important;
  }
}

/* Body lock style when PDP modal is open */
html.pdp-open, body.pdp-open {
  background: #ffffff !important;
}
html.premium-dark-theme.pdp-open, body.premium-dark-theme.pdp-open {
  background: #121212 !important;
}
body.pdp-open {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  position: fixed !important;
  width: 100% !important;
}
body.pdp-open #safe-area-bar {
  display: none !important;
}

/* Sticky Recommendation Header & Scroll-To-Top Button */
.pdp-grid-sticky-header {
  position: sticky;
  top: 52px; /* Sticks right below .pdp-header (height ~52px) */
  z-index: 49;
  background: #fff;
  padding: 14px 0 10px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}

.premium-dark-theme .pdp-grid-sticky-header {
  background: #121212;
  border-bottom-color: #1a1a1a;
}

.pdp-scroll-top-btn {
  position: fixed;
  bottom: 110px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d4d5d9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #282c3f;
  z-index: 10002;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
}

.pdp-scroll-top-btn.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.pdp-scroll-top-btn:active {
  transform: scale(0.92);
  background: #f5f5f6;
}

.premium-dark-theme .pdp-scroll-top-btn {
  background: #1e1e1e;
  border-color: #374151;
  color: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Loader for Products You May Like grid */
.pdp-grid-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  color: #888;
  font-size: 0.9rem;
}

.pdp-loader-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-top-color: #ff3f6c; /* Myntra pink/red */
  border-radius: 50%;
  animation: pdp-spin 0.6s linear infinite;
}

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

.premium-dark-theme .pdp-grid-loader {
  color: #aaa;
}

.premium-dark-theme .pdp-loader-spinner {
  border-color: #444;
  border-top-color: #ff3f6c;
}

/* ── SIZE CHART OVERLAY & MOBILE UIUX ── */
.sc-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 10005;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Assistant', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sc-overlay.open {
  transform: translateY(0);
}

.premium-dark-theme .sc-overlay {
  background: #121212;
  color: #f5f5f7;
}

.sc-header {
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid #eaeaec;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  position: relative;
  z-index: 10;
}

.premium-dark-theme .sc-header {
  background: #1a1a1a;
  border-bottom-color: #2d2d2d;
}

.sc-back-btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #282c3f;
  border-radius: 50%;
}

.sc-back-btn:active {
  background: rgba(0, 0, 0, 0.05);
}

.premium-dark-theme .sc-back-btn {
  color: #f5f5f7;
}

.premium-dark-theme .sc-back-btn:active {
  background: rgba(255, 255, 255, 0.05);
}

.sc-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin-left: 12px;
  color: #282c3f;
}

.premium-dark-theme .sc-title {
  color: #fff;
}

.sc-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 96px; /* Reserve space for sticky footer */
  scrollbar-width: none;
}

.sc-content::-webkit-scrollbar {
  display: none;
}

/* Product Card */
.sc-prod-card {
  display: flex;
  gap: 14px;
  border: 1px solid #eaeaec;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  background: #fdfdfd;
}

.premium-dark-theme .sc-prod-card {
  border-color: #2c2c2e;
  background: #1c1c1e;
}

.sc-prod-img {
  width: 68px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  background: #f4f4f4;
  flex-shrink: 0;
}

.sc-prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sc-prod-brand {
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #282c3f;
  margin: 0;
}

.premium-dark-theme .sc-prod-brand {
  color: #fff;
}

.sc-prod-name {
  font-size: 0.82rem;
  color: #686b78;
  margin: 2px 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.premium-dark-theme .sc-prod-name {
  color: #a1a1aa;
}

.sc-prod-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sc-prod-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: #282c3f;
}

.premium-dark-theme .sc-prod-price {
  color: #fff;
}

.sc-prod-mrp {
  text-decoration: line-through;
  font-size: 0.78rem;
  color: #94969f;
}

.sc-prod-disc {
  color: #ff905a;
  font-weight: 700;
  font-size: 0.78rem;
}

.sc-prod-deliv {
  font-size: 0.78rem;
  color: #686b78;
  font-weight: 500;
}

.premium-dark-theme .sc-prod-deliv {
  color: #a1a1aa;
}

/* Tabs */
.sc-tabs {
  display: flex;
  border-bottom: 1px solid #eaeaec;
  margin-bottom: 16px;
}

.premium-dark-theme .sc-tabs {
  border-bottom-color: #2c2c2e;
}

.sc-tab {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #686b78;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
}

.premium-dark-theme .sc-tab {
  color: #a1a1aa;
}

.sc-tab.active {
  color: #ff3e6c;
  border-bottom-color: #ff3e6c;
}

.premium-dark-theme .sc-tab.active {
  color: #ff3e6c;
  border-bottom-color: #ff3e6c;
}

/* Suggest Size Banner */
.sc-suggest-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.premium-dark-theme .sc-suggest-banner {
  background: #2e1065;
  border-color: #4c1d95;
}

.sc-suggest-text {
  font-weight: 700;
  font-size: 0.88rem;
  color: #6b21a8;
}

.premium-dark-theme .sc-suggest-text {
  color: #d8b4fe;
}

.sc-why-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1.5px solid #d8b4fe;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7c3aed;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.sc-why-btn:active {
  transform: scale(0.95);
}

.premium-dark-theme .sc-why-btn {
  background: #4c1d95;
  border-color: #6b21a8;
  color: #f5f3ff;
}

/* Controls (Checkboxes & Unit Selector) */
.sc-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

.sc-checkboxes-group {
  display: flex;
  gap: 16px;
  align-items: center;
}

.sc-label-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #282c3f;
  cursor: pointer;
  user-select: none;
}

.premium-dark-theme .sc-label-checkbox {
  color: #fff;
}

.sc-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ff3e6c;
  border-radius: 4px;
}

.sc-unit-toggle {
  display: flex;
  background: #f4f4f5;
  border-radius: 20px;
  padding: 3px;
  border: 1px solid #e4e4e7;
}

.premium-dark-theme .sc-unit-toggle {
  background: #27272a;
  border-color: #3f3f46;
}

.sc-unit-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: #71717a;
  padding: 6px 14px;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.premium-dark-theme .sc-unit-btn {
  color: #a1a1aa;
}

.sc-unit-btn.active {
  background: #18181b;
  color: #fff;
}

.premium-dark-theme .sc-unit-btn.active {
  background: #fff;
  color: #18181b;
}

/* Sizing Table */
.sc-table-wrap {
  border: 1px solid #eaeaec;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.premium-dark-theme .sc-table-wrap {
  border-color: #2c2c2e;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sc-table th {
  background: #f9fafb;
  padding: 12px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #71717a;
  border-bottom: 1px solid #eaeaec;
}

.premium-dark-theme .sc-table th {
  background: #1c1c1e;
  color: #a1a1aa;
  border-bottom-color: #2c2c2e;
}

.sc-table td {
  padding: 14px 14px;
  font-size: 0.88rem;
  color: #282c3f;
  border-bottom: 1px solid #eaeaec;
}

.premium-dark-theme .sc-table td {
  color: #fff;
  border-bottom-color: #2c2c2e;
}

.sc-table tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sc-table tr:hover td {
  background-color: #fafafa;
}

.premium-dark-theme .sc-table tr:hover td {
  background-color: #242426;
}

.sc-table tr.selected td {
  background-color: #fff5f7;
  font-weight: 700;
  color: #ff3e6c;
}

.premium-dark-theme .sc-table tr.selected td {
  background-color: #2d161a;
  color: #ff3e6c;
  font-weight: 700;
}

.sc-radio-cell {
  width: 30px;
  padding-right: 0 !important;
}

.sc-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d4d5d9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: #fff;
}

.premium-dark-theme .sc-radio {
  border-color: #48484a;
  background: #1c1c1e;
}

.sc-table tr.selected .sc-radio {
  border-color: #ff3e6c;
}

.sc-radio-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3e6c;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-table tr.selected .sc-radio-inner {
  transform: scale(1);
}

/* Sticky Footer */
.sc-sticky-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eaeaec;
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  z-index: 20;
}

.premium-dark-theme .sc-sticky-footer {
  background: #1a1a1a;
  border-top-color: #2c2c2e;
}

.sc-footer-btn {
  width: 100%;
  max-width: 440px;
  background: #ff3e6c;
  border: none;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 62, 108, 0.2);
}

.sc-footer-btn:active {
  transform: scale(0.97);
}

/* How to Measure tab section */
.sc-measure-section {
  display: none;
}

.sc-measure-section.active {
  display: block;
}

.sc-seller-badge {
  border: 1.5px solid #fbe0e5;
  background: #fff1f4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.premium-dark-theme .sc-seller-badge {
  border-color: #4c1d24;
  background: #2d1519;
}

.sc-seller-label {
  font-size: 0.8rem;
  color: #535766;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.premium-dark-theme .sc-seller-label {
  color: #a1a1aa;
}

.sc-seller-name {
  font-weight: 800;
  font-size: 1rem;
  color: #ff3f6c;
  margin: 0;
  letter-spacing: 0.02em;
}

.sc-seller-info-extra {
  font-size: 0.82rem;
  color: #ff3f6c;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}

.sc-measure-diag-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sc-measure-diag-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: #282c3f;
  margin-bottom: 12px;
  align-self: flex-start;
}

.premium-dark-theme .sc-measure-diag-title {
  color: #fff;
}

.sc-measure-diag-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 12px;
  background: #f8f9fa;
  border: 1px solid #eaeaec;
  padding: 16px;
  box-sizing: border-box;
}

.premium-dark-theme .sc-measure-diag-svg {
  background: #1c1c1e;
  border-color: #2c2c2e;
}

/* ── AI RECOMMENDATION OVERLAY POPUP ── */
.ai-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10110;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}

.ai-popup-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.ai-popup-content {
  width: 100%;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
}

.ai-popup-overlay.open .ai-popup-content {
  transform: translateY(0);
}

.premium-dark-theme .ai-popup-content {
  background: #1c1c1e;
  color: #fff;
}

.ai-popup-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.25rem;
  color: #6b21a8;
  margin-bottom: 12px;
}

.premium-dark-theme .ai-popup-title-row {
  color: #c084fc;
}

.ai-popup-subtitle {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.55;
  margin-bottom: 20px;
}

.premium-dark-theme .ai-popup-subtitle {
  color: #a1a1aa;
}

/* AI Detail Blocks */
.ai-card-block {
  display: flex;
  gap: 14px;
  background: #faf5ff;
  border: 1px solid #f3e8ff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.premium-dark-theme .ai-card-block {
  background: #2e1065;
  border-color: #4c1d95;
}

.ai-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  color: #7c3aed;
  box-shadow: 0 2px 6px rgba(124,58,237,0.12);
}

.premium-dark-theme .ai-card-icon {
  background: #4c1d95;
  color: #e9d5ff;
  box-shadow: none;
}

.ai-card-body {
  flex: 1;
  min-width: 0;
}

.ai-card-title {
  font-weight: 750;
  font-size: 0.92rem;
  color: #282c3f;
  margin-bottom: 4px;
}

.premium-dark-theme .ai-card-title {
  color: #fff;
}

.ai-card-desc {
  font-size: 0.82rem;
  color: #535766;
  line-height: 1.45;
}

.premium-dark-theme .ai-card-desc {
  color: #a1a1aa;
}

.ai-card-desc strong {
  color: #1f2937;
  font-weight: 700;
}

.premium-dark-theme .ai-card-desc strong {
  color: #fff;
}

/* Sparkle Generated Tag */
.ai-gen-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7c3aed;
  margin: 16px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.premium-dark-theme .ai-gen-label {
  color: #a78bfa;
}

/* Feedback Box */
.ai-feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 24px;
  border-top: 1px solid #f3e8ff;
  padding-top: 18px;
  gap: 12px;
}

.premium-dark-theme .ai-feedback-row {
  border-top-color: #2c2c2e;
}

.ai-feedback-question {
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b5563;
}

.premium-dark-theme .ai-feedback-question {
  color: #a1a1aa;
}

.ai-feedback-btns {
  display: flex;
  gap: 8px;
}

.ai-feedback-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.premium-dark-theme .ai-feedback-btn {
  background: #27272a;
  border-color: #3f3f46;
  color: #d1d5db;
}

.ai-feedback-btn:hover {
  background: #e5e7eb;
}

.premium-dark-theme .ai-feedback-btn:hover {
  background: #3f3f46;
}

.ai-feedback-btn.active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

.premium-dark-theme .ai-feedback-btn.active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

.ai-popup-ok-btn {
  width: 100%;
  background: #ff3e6c;
  border: none;
  border-radius: 10px;
  padding: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 62, 108, 0.25);
}

.ai-popup-ok-btn:active {
  transform: scale(0.98);
}

/* Similar Products Bottom Sheet Modal */
.pdp-similar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001; /* Must sit on top of PDP (z-index 9999) */
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pdp-similar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.pdp-similar-bottom-sheet {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 85vh;
  overflow: hidden;
}

.pdp-similar-overlay.open .pdp-similar-bottom-sheet {
  transform: translateY(0);
}

.pdp-similar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.pdp-similar-header h4 {
  font-family: 'Assistant', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #282c3f;
  margin: 0;
}

.pdp-similar-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #282c3f;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.pdp-similar-sheet-content {
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 16px));
}

.pdp-similar-sheet-scroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 8px 4px 16px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.pdp-similar-sheet-scroll::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Make cards in the bottom sheet slightly larger or ensure they display correctly */
.pdp-similar-sheet-scroll .similar-card {
  flex: 0 0 150px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  background: #fff;
}

.premium-dark-theme .pdp-similar-bottom-sheet {
  background: #1c1c1e;
}

.premium-dark-theme .pdp-similar-header h4,
.premium-dark-theme .pdp-similar-close-btn {
  color: #f5f5f7;
}

.premium-dark-theme .pdp-similar-sheet-scroll .similar-card {
  background: #2c2c2e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ── Global Search Topbar and Header Pill styles ── */
.search-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #ffffff;
  border-bottom: 1.5px solid #eaeaea;
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(56px + env(safe-area-inset-top, 0px));
  z-index: 1000;
}

.search-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.search-topbar__back-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: #282c3f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.search-topbar__back-btn:hover {
  background-color: #f4f4f5;
}

.search-header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  max-width: 280px;
  background: #ffffff;
  border: 1.5px solid #dcdcdc;
  border-radius: 14px;
  padding: 0 14px;
  height: 40px;
  cursor: pointer;
  margin: 0 12px;
  transition: all 0.2s ease;
  min-width: 0;
}

@media (max-width: 420px) {
  .search-header-pill {
    max-width: 190px;
    margin: 0 4px;
    padding: 0 10px;
  }
}

.search-header-pill:hover {
  background: #fdfdfd;
  border-color: #c8c8c8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.search-header-pill__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.search-header-pill__text {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: #9ca3af;
  text-align: left;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.search-header-pill__icon {
  color: #9ca3af;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.search-header-pill__icon svg {
  width: 17px;
  height: 17px;
}

/* Dark theme overrides */
.premium-dark-theme .search-topbar {
  background: #121212 !important;
  border-bottom: 1.5px solid #2d2d2d !important;
}
.premium-dark-theme .search-topbar__back-btn {
  color: #f5f5f7 !important;
}
.premium-dark-theme .search-topbar__back-btn:hover {
  background-color: #2c2c2e !important;
}
.premium-dark-theme .search-header-pill {
  background: #1c1c1e !important;
  border-color: #3a3a3c !important;
}
.premium-dark-theme .search-header-pill:hover {
  background: #2c2c2e !important;
  border-color: #48484a !important;
}
.premium-dark-theme .search-header-pill__text {
  color: #8e8e93 !important;
}
.premium-dark-theme .search-header-pill__icon {
  color: #8e8e93 !important;
}

/* ═══════════════════════════════════════════════════════════
   SHARED ADDRESS SELECTION & POPUP STYLES
   ═══════════════════════════════════════════════════════════ */
.dl-add-new {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pink, #ff3e6c);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Saved Address Card in Sheet ── */
.dl-addr-card {
  margin: 8px 16px;
  border: 1.5px solid var(--border, #eee);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  transition: border-color 0.2s;
}
.dl-addr-card.selected {
  border-color: var(--pink, #ff3e6c);
  background: var(--pink-light, #fff5f7);
}
.dl-addr-selected-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #5e17eb;
  background: #eceafc;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dl-addr-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.dl-addr-pin-icon {
  font-size: 0.85rem;
  color: #555;
}
.dl-addr-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
}
.dl-addr-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #555;
  background: #f0f0f0;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.dl-addr-text {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.5;
  margin: 4px 0 4px 22px;
}
.dl-addr-mob {
  font-size: 0.82rem;
  color: #555;
  margin-left: 22px;
  margin-bottom: 10px;
}
.dl-addr-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink, #ff3e6c);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-addr-check svg {
  width: 12px;
  height: 12px;
}
.dl-addr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 22px;
  margin-top: 4px;
}
.dl-addr-action {
  padding: 8px 18px;
  border: 1px solid #d4d5d9;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94969f;
  background: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: 0.15s;
}
.dl-addr-action:active {
  background: #f5f5f5;
}
.dl-addr-edit-btn {
  background: none;
  border: none;
  color: #1a1a1a;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px 8px 0;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
}

/* ── VERIFY ADDRESS DETAILS — Popup ── */
.va-overlay {
  position: fixed;
  inset: 0;
  z-index: 10004;
  background: rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
}
.va-overlay.open {
  display: flex;
}
.va-map {
  width: 100%;
  height: 180px;
  background: #f0efe8;
  position: relative;
  overflow: hidden;
}
.va-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) brightness(1.05);
}
.va-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-100%);
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.va-content {
  flex: 1;
  background: var(--bg-card, #fff);
  border-radius: 20px 20px 0 0;
  margin-top: -16px;
  position: relative;
  z-index: 1;
  overflow-y: auto;
  padding: 0 0 100px;
}
.va-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
}
.va-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
}
.va-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  padding: 6px;
}
.va-form {
  padding: 0 20px;
}
.va-field {
  position: relative;
  margin-bottom: 20px;
}
.va-field label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--bg-card, #fff);
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.02em;
}
.va-field input, .va-field select {
  width: 100%;
  padding: 14px 14px 12px;
  border: 1.5px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: 0.92rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary, #1a1a1a);
  transition: border-color 0.2s;
  background: var(--bg-card, #fff);
}
.va-field input:focus, .va-field select:focus {
  border-color: var(--pink, #ff3e6c);
}
.va-field .va-error {
  font-size: 0.72rem;
  color: #dc2626;
  font-weight: 600;
  margin-top: 4px;
  display: none;
}
.va-field .va-error.show {
  display: block;
}
.va-field-error-msg {
  color: #ff3e6c;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 6px;
  display: none;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.2s ease;
}
.va-field .va-hint {
  font-size: 0.72rem;
  color: #999;
  margin-top: 4px;
}
.va-row {
  display: flex;
  gap: 12px;
}
.va-row .va-field {
  flex: 1;
}
.va-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--bg-card, #fff);
  border-top: 1px solid var(--border, #eaeaea);
  z-index: 10005;
}
.va-confirm-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #ff3e6c, #E21B70);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  transition: filter 0.2s;
}
.va-confirm-btn:active {
  filter: brightness(0.9);
}

/* Dark theme overrides for address sheets */
.premium-dark-theme .dl-addr-card {
  border-color: rgba(255,255,255,0.1);
}
.premium-dark-theme .dl-addr-card.selected {
  background: rgba(255, 62, 108, 0.1);
  border-color: var(--pink, #ff3e6c);
}
.premium-dark-theme .dl-addr-name {
  color: #ffffff;
}
.premium-dark-theme .dl-addr-text {
  color: #cccccc;
}
.premium-dark-theme .dl-addr-mob {
  color: #aaaaaa;
}
.premium-dark-theme .dl-addr-action {
  border-color: #3f3f46;
  color: #d1d5db;
}
.premium-dark-theme .dl-addr-action:active {
  background: #27272a;
}
.premium-dark-theme .dl-addr-edit-btn {
  color: var(--pink, #ff3e6c);
}
.premium-dark-theme .va-field label {
  background: var(--bg-card, #0a0a0a);
}
.premium-dark-theme .va-field input,
.premium-dark-theme .va-field select {
  background: var(--bg-card, #0a0a0a);
  color: #ffffff;
}

/* ── Option Links ── */
.dl-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.dl-option:active {
  background: #fafafa;
}
.premium-dark-theme .dl-option:active {
  background: #1c1c1e;
}
.dl-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--pink, #ff3e6c);
  flex-shrink: 0;
}
.dl-option-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pink, #ff3e6c);
}
.dl-option-chevron {
  color: var(--pink, #ff3e6c);
  font-size: 0.88rem;
  font-weight: 700;
  margin-left: auto; /* Push to right */
}