:root {
  --brand: #111;
  --accent: #ffd200;
  --bg: #fafafa;
  --card: #fff;
  --muted: #6b7280;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --primary: #3a86ff;
  --primary-dark: #2563eb;
  --secondary: #ff006e;
  --light-gray: #e2e8f0;
  --dark: #1e293b;
}

* {
  box-sizing: border-box;
}

/* ===== Header (Labubu Arabia) ===== */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background:#fff; border-bottom:1px solid #eee;
  backdrop-filter:saturate(180%) blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ===== Hero Section ===== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-left h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: #333;
}

.hero-left .sub {
  font-size: 1.2rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-badges li {
  font-size: 0.95rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-right img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.pill {
  display: inline-block;
  background: var(--accent);
  color: #000;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-ghost:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 20px;
    text-align: center;
  }
  
  .hero-left h1 {
    font-size: 2.5rem;
  }
  
  .hero-ctas {
    justify-content: center;
  }
  
  .hero-badges {
    align-items: center;
  }
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; font-weight:800; font-size:20px;}
.brand img{width:36px; height:36px; border-radius:10px}
.header-search, .search{display:flex; gap:6px; align-items:center; position: relative;}
.header-search input, .search input{
  width:100%; max-width:360px; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  transition: all 0.3s ease;
}
.header-search input:focus, .search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
}
.header-search button, .search button{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; cursor:pointer; transition: all 0.3s ease;
}
.header-search button:hover, .search button:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.header-actions{display:flex; gap:14px; align-items:center}
.header-actions .link{color:#111; text-decoration:none; font-weight:600; transition: color 0.3s ease;}
.header-actions .link:hover{color: var(--primary);}
#headerCurrency{padding:8px 10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff}
.cart-link{position:relative; display:flex; align-items:center; gap:6px; color:#111; text-decoration:none}
.badge{
  position:absolute; top:-8px; right:-10px; background:#16a34a; color:#fff;
  border-radius:999px; padding:2px 7px; font-size:12px; min-width:18px; text-align:center
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark);
}

/* Search suggestions */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.search-suggestions.visible {
  display: block;
}

.suggestion-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--light-gray);
  cursor: pointer;
  transition: background 0.2s ease;
}

.suggestion-item:hover {
  background: var(--bg);
}

@media (max-width:720px){
  .header-inner{grid-template-columns:auto auto 1fr; gap:10px}
  .header-actions .link{display:none}
  .header-search input{max-width:unset}
  .menu-toggle { display: block; }
  .header-search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 0;
    z-index: 100;
  }
  .header-search.active {
    display: flex;
  }
}

html, body {
  margin: 0;
  background: var(--bg);
  color: #111;
  font-family: var(--font);
  scroll-behavior: smooth;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Hero section */
.hero-wrap{
  background: radial-gradient(1400px 600px at 20% 20%, #fff5b3 0%, #fff 55%),
              linear-gradient(180deg, #fffdf3 0%, #ffffff 60%);
  border-radius: 28px;
  margin: 24px auto 16px;
  padding: 24px 20px;
}

.hero{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
}

.hero__copy{ padding: 8px 8px 8px 0; }
.hero__pill{
  display:inline-block; font-weight:600; font-size:12px; letter-spacing:.4px;
  background:#111; color:#fff; padding:6px 10px; border-radius:999px; margin-bottom:14px;
}
.hero__title{ font-size: clamp(28px, 4.4vw, 56px); line-height:1.05; margin: 6px 0 10px; }
.hero__subtitle{ font-size: clamp(14px, 1.6vw, 18px); color:#333; margin: 0 0 16px; max-width: 46ch; }

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600;
  border:1px solid #1110; transition: transform .08s ease, box-shadow .15s ease, background .2s;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.btn--primary{ background:#0ea34a; color:#fff; }
.btn--ghost{ background:#fff; color:#111; border-color:#1112; }

.hero__meta{ display:flex; gap:16px; color:#444; font-size:14px; flex-wrap:wrap; }

.hero__art{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.hero__art img{
  width:100%; height:auto; border-radius:22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.06);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.hero__art:hover img{
  transform: translateY(-6px);
  box-shadow: 0 30px 90px rgba(0,0,0,.14), 0 12px 28px rgba(0,0,0,.08);
}

/* Gentle idle float (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .hero__art img{
    animation: heroFloat 6s ease-in-out infinite alternate;
  }
  .hero__art:hover img{ animation-play-state: paused; }
  @keyframes heroFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-4px); }
  }
}

/* Mobile */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 12px; }
  .hero__copy{ order:2; }
  .hero__art{ order:1; }
  .hero-wrap{ padding: 18px 14px; border-radius: 20px; }
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px 0;
  border-bottom: 1px solid #eee;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trust-item i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.trust-item p {
  font-weight: 600;
  color: var(--brand);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px 0;
}

.chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.chip.active {
  background: var(--accent);
  border-color: transparent;
  font-weight: 700;
}

.chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  padding: 24px 0 40px;
}

.card {
  display: block;
  background: var(--card);
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  transition: transform .2s ease;
}

.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }
.card:nth-child(5) { animation-delay: 0.4s; }

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

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  z-index: 2;
}

/* Only grid/listing cards, not the product page */
.grid .card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  background: #f6f6f6;
  transition: transform 0.5s ease;
}

.card:hover img {
  transform: scale(1.05);
}

.quick-view {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 12px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.card:hover .quick-view {
  opacity: 1;
}

.card .meta {
  padding: 16px;
}

.card .title {
  font-size: 16px;
  margin: 0 0 8px;
  min-height: 42px;
  font-weight: 600;
}

.card .price {
  margin: 0;
  color: #0a7d2c;
  font-weight: 800;
  font-size: 1.1rem;
}

/* ===== Figure Grid Styles ===== */
.grid-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ===== Section Titles ===== */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
}

.section-title .see-all {
  font-size: 0.9rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.section-title .see-all:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ===== Grid Layouts ===== */
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===== Teaser Cards Styles ===== */
.cards.grid3 .card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.cards.grid3 .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
  transition: transform .2s ease;
}

.cards.grid3 .card .img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.cards.grid3 .card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cards.grid3 .card:hover .img img {
  transform: scale(1.05);
}

.cards.grid3 .card .meta {
  padding: 12px;
}

.cards.grid3 .card .meta h3 {
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 6px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cards.grid3 .card .meta .price {
  font-weight: 700;
  color: #0a7d2c;
  font-size: 1rem;
  margin: 0;
}

/* ===== New Card Structure Styles ===== */
.grid .card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
  transition: transform .2s ease;
}

.grid .card .thumb {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.grid .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid .card:hover .thumb img {
  transform: scale(1.05);
}

.grid .card .title {
  padding: 12px 16px 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: #333;
}

.grid .card .title a {
  text-decoration: none;
  color: inherit;
}

.grid .card .price {
  padding: 0 16px 12px;
  font-weight: 700;
  color: #0a7d2c;
  font-size: 1rem;
  margin: 0;
}

.card.fig {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
}

.card.fig .img-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 12px;
}

.card.fig .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  will-change: transform;
}

.card.fig .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}

.card.fig .meta {
  margin-top: 10px;
}

.card.fig .title {
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 6px;
}

.card.fig .price {
  font-weight: 600;
}

.hover-float:hover img {
  transform: translateY(-6px);
}

.testimonials {
  padding: 60px 0;
  background: #fff;
}

.testimonials h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.2rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial {
  background: var(--bg);
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.testimonial p {
  font-style: italic;
  margin-bottom: 16px;
}

.customer {
  font-weight: 600;
  color: var(--brand);
}

.newsletter {
  padding: 60px 0;
  background: linear-gradient(135deg, #ffd200 0%, #ffed4e 100%);
  text-align: center;
}

.newsletter h3 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.newsletter p {
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
}

.newsletter-form button {
  padding: 14px 24px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.newsletter-form button:hover {
  background: #000;
}

.footer {
  margin-top: 0;
  background: #fff;
  border-top: 1px solid #eee;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  padding: 40px 0;
}

.footer h4 {
  margin: 0 0 16px;
  font-size: 1.2rem;
}

.footer p {
  margin: 0 0 12px;
  color: #374151;
}

.footer a {
  color: #111;
  text-decoration: none;
}

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

.footer-note {
  padding: 20px 0;
  border-top: 1px solid #eee;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f8f8f8;
  border-radius: 50%;
  color: var(--brand);
  text-decoration: none;
  transition: all 0.2s;
}

.social-links a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.show {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 800px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(58, 134, 255, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-4px);
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-copy h1 {
    font-size: 2.5rem;
  }
  
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-copy h1 {
    font-size: 2rem;
  }
  
  .trust-badges {
    grid-template-columns: 1fr;
  }
  
  .chips {
    justify-content: center;
  }
}

/* ===== Product Page Layout ===== */
.p-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start;
}
.p-hero{
  width:100%; height:540px;   /* taller desktop view */
  object-fit:contain; background:linear-gradient(#f8f8f8,#f2f2f2);
  border-radius:16px;
}


/* Mobile-first responsiveness */
@media (max-width: 960px){
  .p-grid{ grid-template-columns:1fr; }
  .p-hero{ height:360px; }      /* comfortable on phones */
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Quantity buttons */
.qtybtn{
  width:36px;height:36px;border:1px solid #ddd;border-radius:10px;
  background:#fff;font-weight:700;cursor:pointer
}
.qty{
  width:120px;padding:10px 12px;border:2px solid #111;border-radius:16px;
  text-align:center;font-size:18px;font-weight:600
}
/* Enhanced search suggestions */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 50;
}
.search-suggestions a.suggestion-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  text-decoration: none;
  color: inherit;
}
.search-suggestions a.suggestion-item:hover {
  background: #f9f9fb;
}
.search-suggestions a.suggestion-item img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
}
.search-suggestions a.suggestion-item strong {
  font-weight: 600;
}

/* Accessibility focus rings */
a:focus-visible, button:focus-visible, .chip:focus-visible, .variant-option:focus-visible, .quick-view:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Quick View clickable element when keyboard focused */
.quick-view { cursor: pointer; }

/* Brand-colored stars (use your palette) */
.stars { 
  color: var(--accent); /* previously #ffb400; now brand-tied */
  font-size: 1.1em;
}

/* Review card styling */
.review-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.review-head {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.review-head strong {
  margin-right: 0.5rem;
}

.review-photo {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 0.8rem;
  max-height: 200px;
  object-fit: cover;
}

/* Reviews summary styling */
#reviewsSummary {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Review form styling */
#reviewForm {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #f9f9f9;
}

#reviewForm label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

#reviewForm input,
#reviewForm textarea,
#reviewForm select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
}

#reviewForm button {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

#reviewForm button:hover {
  background: #ffc400;
  transform: translateY(-2px);
}

/* Star rating input */
.stars-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.stars-input input {
  display: none;
}

.stars-input label {
  font-size: 1.8rem;
  cursor: pointer;
  color: #ddd;
  transition: color 0.2s ease;
}

.stars-input input:checked ~ label,
.stars-input label:hover,
.stars-input label:hover ~ label {
  color: var(--accent);
}

/* utility */
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Modern header */
.site-header.glass {
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(25,25,28,.08);
}
.site-header.sticky { position: sticky; top:0; z-index: 40; }
.header-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.75rem 1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand-mark { width:28px; height:28px; }
.brand-text { font-weight:800; letter-spacing:.2px; }

.header-search {
  position: relative; display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #e7e7ef; border-radius:999px; padding:.5rem .75rem;
  box-shadow: 0 4px 14px rgba(19,30,67,.06);
}
.header-search input {
  width:100%; border:none; outline:none; background:transparent; font-size:.98rem;
}
.header-search .icon { opacity:.6; }
.icon-btn { border:none; background:#141414; color:#fff; border-radius:999px; padding:.45rem .9rem; font-weight:600; }

/* search suggestions already exist; keep your rules and optionally add: */
.search-suggestions { border-radius:12px; overflow:hidden; }

/* Main catalog search box focus styling */
.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.1);
}

/* actions */
.header-actions { display:flex; align-items:center; gap:.5rem; }
#headerCurrency {
  appearance:none; border:1px solid #e7e7ef; border-radius:10px; padding:.4rem .6rem; background:#fff;
}
.cart-btn { position:relative; display:flex; align-items:center; gap:.35rem; text-decoration:none; color:inherit; padding:.3rem .6rem; border-radius:10px; background:#fff; border:1px solid #eee; }
.cart-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 .35rem; border-radius:999px; background:#141414; color:#fff; font-size:.78rem; }
.menu-toggle { display:none; border:none; background:#141414; color:#fff; border-radius:10px; padding:.45rem .6rem; }

/* mobile */
@media (max-width: 900px){
  .menu-toggle { display:inline-flex; }
  .header-search { display:none; }
  .header-search.active { display:flex; position:absolute; left:12px; right:12px; top:60px; z-index:42; }
}

/* Section headers */
.section-head { display:flex; justify-content:space-between; align-items:center; margin:8px 0 12px }
.section-head h2 { margin:0 }
.section-head .view-all { font-weight:600; }

/* Grid layouts */
.grid { display:grid; gap:16px; }

.figures-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clothes-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .figures-grid { grid-template-columns: repeat(2, 1fr); }
  .clothes-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
  .figures-grid, .clothes-grid { grid-template-columns: 1fr; }
}

/* hover float */
.card .thumb img { transition: transform .25s ease; will-change: transform; }
.card:hover .thumb img { transform: translateY(-6px); }

/* === Labubu Pastel Neon Theme (light + colorful) === */
:root {
  /* Pop-Mart�ish playful palette */
  --bg: #fbfbfe;
  --card: #ffffff;
  --brand: #0f172a;
  --primary: #7c3aed;     /* neon purple */
  --primary-dark: #6d28d9;
  --secondary: #06b6d4;   /* neon cyan */
  --accent: #ffd54a;      /* warm pastel yellow */
  --muted: #6b7280;
  --radius: 16px;
  --shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Pastel, Pop-Mart vibe, with subtle animated sheen */
.hero-wrap{
  position:relative;
  background:
    radial-gradient(900px 420px at 20% 18%, #ffeef6 0%, #fff 55%),
    radial-gradient(820px 360px at 78% 30%, #e7f8ff 0%, #fff 48%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
  border-radius:28px;
  margin:28px auto 18px;
  padding:28px 22px;
  box-shadow:0 26px 80px rgba(124,58,237,.08);
  overflow:hidden;
}

/* soft "light sweep" shimmer */
.hero-wrap::after{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 0deg,
    rgba(124,58,237,.06), rgba(34,211,238,.04), rgba(255,255,255,.0) 40%,
    rgba(124,58,237,.06), rgba(34,211,238,.04), rgba(255,255,255,.0) 80%);
  animation: sheen 14s linear infinite;
  pointer-events:none;
}
@keyframes sheen { to { transform: rotate(360deg); } }

/* Headline tweaks */
.hero__title{
  background: linear-gradient(180deg, #0f172a, #3b3b3b 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.5px;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.hero__subtitle{ color:#475569; }

/* Pill badge � glassy + neon edge */
.hero__pill{
  background: rgba(124,58,237,.08);
  color:#6d28d9;
  border:1px solid rgba(124,58,237,.25);
  box-shadow: 0 6px 18px rgba(124,58,237,.18);
}

/* CTAs: playful gradient + hover lift */
.btn{
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(124,58,237,.15);
}
.btn--primary{
  background: linear-gradient(135deg, var(--primary) 0%, #22d3ee 100%);
  border: none;
  color:#fff;
}
.btn--primary:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124,58,237,.25);
}
.btn--ghost{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.08);
  color:#0f172a;
}
.btn--ghost:hover{
  background:#fff;
  transform: translateY(-2px);
}

/* Micro confetti sparkles near CTAs */
.hero__cta{ position:relative; }
.hero__cta::after{
  content:"";
  position:absolute; right:-18px; top:-12px; width:10px; height:10px;
  background:radial-gradient(circle at 30% 30%, #ffd54a 30%, transparent 35%),
             radial-gradient(circle at 70% 50%, #7c3aed 30%, transparent 35%),
             radial-gradient(circle at 40% 80%, #22d3ee 30%, transparent 35%);
  filter: blur(.3px);
  animation: twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes twinkle{
  from{ transform: translateY(0) scale(1); opacity:.65; }
  to  { transform: translateY(-3px) scale(1.05); opacity:1; }
}

/* Hero image gentle float already defined; add soft glow */
.hero__art img{
  box-shadow:
    0 30px 90px rgba(124,58,237,.14),
    0 10px 28px rgba(0,0,0,.08);
  border-radius: 22px;
}

/* Trust badges � bigger, more playful */
.trust-badges {
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding: 44px 0;
  border-bottom: 1px solid #eee;
}
.trust-item i{
  font-size: 2.6rem;
  color: var(--primary);
  text-shadow: 0 4px 14px rgba(124,58,237,.15);
}
.trust-item p{
  color:#0f172a;
  font-weight: 700;
}

/* Cards � brighter hover */
.card:hover{
  box-shadow: 0 14px 36px rgba(124,58,237,.16);
}
.badge{
  background: var(--accent);
  color:#0f172a;
}

/* Elevate the 3D logo tile */
.hero-logo-card{
  position:relative;
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
  box-shadow:
    0 40px 90px rgba(124,58,237,.16),
    0 14px 34px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}
.hero-logo-card img{
  width:100%; height:auto; display:block; border-radius:20px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
  transform: translateY(-1px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s;
}
.hero-logo-card:hover img{
  transform: translateY(-4px);
  filter: drop-shadow(0 16px 42px rgba(0,0,0,.22));
}
@media (max-width: 900px){
  .hero-logo-card{ padding:16px; border-radius:22px; }
  .hero-logo-card img{ border-radius:16px; }
}

/* Proof strip � modern, credible, not "cheap icon row" */
.proof-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px; padding:28px 0; margin-top:8px;
}
.proof{
  display:flex; gap:12px; align-items:center;
  background:#fff; border:1px solid #f0f2f7; border-radius:16px;
  padding:14px 16px; box-shadow: 0 10px 26px rgba(124,58,237,.06);
}
.proof i{ font-size:1.4rem; color:var(--primary); }
.proof strong{ display:block; font-size:.98rem; color:#0f172a; }
.proof span{ display:block; font-size:.85rem; color:#64748b; }

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

/* Payment marks */
.pay-strip{
  display:flex; gap:18px; align-items:center; padding:6px 0 34px;
}
.pay-strip img{
  height:26px; filter: saturate(.9) contrast(1.05);
  opacity:.95; transition: transform .15s ease, opacity .15s ease;
}
.pay-strip img:hover{ transform: translateY(-2px); opacity:1; }

.hdr-verified{
  display:inline-flex; gap:6px; align-items:center;
  font-size:.85rem; color:#0f172a; background:#fff;
  border:1px solid #eef0f6; padding:6px 10px; border-radius:999px;
}
.hdr-verified i{ color:var(--primary); }
@media (max-width:720px){ .hdr-verified{ display:none; } }

/* Credible hero trust chips */
.cred-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
}
.cred-item{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #eef0f6; border-radius:999px;
  padding:8px 12px; box-shadow:0 8px 22px rgba(124,58,237,.08);
}
.cred-icon{
  width:28px; height:28px; display:grid; place-items:center;
  background:linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  color:#fff; border-radius:50%; font-size:.9rem;
  box-shadow:0 6px 16px rgba(124,58,237,.25);
}
.cred-text{ font-weight:700; color:#0f172a; font-size:.92rem; }
.cred-sub{ color:#64748b; font-size:.82rem; margin-left:4px; }
@media (max-width: 560px){
  .cred-item{ padding:8px 10px; }
  .cred-text{ font-size:.9rem; }
  .cred-sub{ display:none; } /* compact on very small screens */
}

/* ===== Dark Glossy Hero (scoped) ===== */
.theme-dark-hero{
  --hero-fg: #eaf2ff;              /* main headline color */
  --hero-fg-sub: #c7d2fe;          /* subtitle color */
  --hero-chip-bg: rgba(255,255,255,.06);
  --hero-chip-border: rgba(255,255,255,.18);
  --hero-glow-1: rgba(124,58,237,.28);  /* violet glow */
  --hero-glow-2: rgba(34,211,238,.22);  /* cyan glow */
  --hero-tile: rgba(255,255,255,.10);   /* logo tile glass */

  background:
    radial-gradient(1100px 520px at 20% 15%, rgba(124,58,237,.22) 0%, rgba(18,18,24,0) 55%),
    radial-gradient(900px 480px at 85% 10%, rgba(34,211,238,.18) 0%, rgba(18,18,24,0) 48%),
    linear-gradient(180deg, #0e0f14 0%, #0b0c12 30%, #0a0b10 100%);
  box-shadow: 0 40px 120px rgba(0,0,0,.35);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

/* glossy "sweep" */
.theme-dark-hero::after{
  content: "";
  position: absolute; inset: -35%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.06), rgba(255,255,255,.0) 30%,
    rgba(255,255,255,.04), rgba(255,255,255,.0) 60%,
    rgba(255,255,255,.05), rgba(255,255,255,.0) 90%);
  animation: heroSweep 18s linear infinite;
  pointer-events: none;
}
@keyframes heroSweep { to { transform: rotate(360deg); } }

/* Typography on dark */
.theme-dark-hero .hero__title{
  color: var(--hero-fg);
  background: linear-gradient(180deg, #eef2ff 0%, #c7d2fe 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.theme-dark-hero .hero__subtitle{ color: var(--hero-fg-sub); }

/* Pill badge on dark */
.theme-dark-hero .hero__pill{
  background: var(--hero-chip-bg);
  color: #e9d5ff;
  border: 1px solid var(--hero-chip-border);
  box-shadow: 0 10px 26px var(--hero-glow-1);
}

/* CTAs tuned for dark */
.theme-dark-hero .btn{ box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.theme-dark-hero .btn--primary{
  background: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  color: #0b0c12;
  border: none;
}
.theme-dark-hero .btn--primary:hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px var(--hero-glow-1);
}
.theme-dark-hero .btn--ghost{
  background: rgba(255,255,255,.10);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.16);
}
.theme-dark-hero .btn--ghost:hover{
  background: rgba(255,255,255,.16);
}

/* Credible chips on dark */
.theme-dark-hero .cred-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 38px rgba(0,0,0,.38);
}
.theme-dark-hero .cred-text{ color: #e5e7eb; }
.theme-dark-hero .cred-sub{ color: #a5b4fc; }
.theme-dark-hero .cred-icon{
  background: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
  color: #0b0c12;
  box-shadow: 0 10px 26px var(--hero-glow-2);
}

/* 3D logo tile on dark */
.theme-dark-hero .hero-logo-card{
  /* keep the glass, drop any hard border */
  border: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    0 20px 60px rgba(124,58,237,.24);
}
.theme-dark-hero .hero-logo-card::before,
.theme-dark-hero .hero-logo-card::after{
  content:none !important;   /* in case any rings were added elsewhere */
}
.theme-dark-hero .hero-logo-card img{
  /* clean edge, just a soft drop shadow */
  outline: none !important;
  box-shadow: none;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.45));
}

/* Small sparkle near CTAs (subtle on dark) */
.theme-dark-hero .hero__cta::after{
  opacity: .75;
  filter: blur(.2px);
}

/* ��� Topbar ��� */
.topbar{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  color: #fff;
}
.topbar__inner{
  max-width: 1200px; margin: 0 auto;
  padding: 6px 16px; font-size: .86rem;
  display:flex; align-items:center; gap:10px;
}
.topbar__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px #fff;
  opacity: .9;
}

/* ��� Header (glass + dark-on-scroll) ��� */
.site-header{
  position: sticky; top: 24px; z-index: 59;  /* sits below the topbar */
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  border-radius: 14px;
}
.site-header.scrolled{
  background: rgba(14,15,20,.70);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.site-header.scrolled .brand,
.site-header.scrolled .nav a,
.site-header.scrolled .hdr-verified{ color: #e5e7eb; }

/* Search pill looks better on dark header */
.site-header.scrolled .header-search{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.site-header.scrolled .header-search input::placeholder{ color:#cbd5e1; }

/* Brand-neutral trust strip (replaces pay logos) */
.assure-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 8px 0 34px;
}

.assure{
  display: flex; gap: 12px; align-items: center;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(124,58,237,.06);
}

.assure-icon{
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  color: #0b0c12;
  box-shadow: 0 10px 24px rgba(124,58,237,.22);
  font-size: 1rem;
}

.assure-text strong{
  display:block; color:#0f172a; font-weight:800; line-height:1.05;
}
.assure-text span{
  display:block; color:#64748b; font-size:.9rem; line-height:1.1;
}

@media (max-width: 900px){
  .assure-strip{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .assure-strip{ grid-template-columns: 1fr; }
}

/* Card structure with Add to Cart buttons */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(124,58,237,.16);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.card .thumb {
  display: block;
  aspect-ratio: 1/1.05;
  background: #f6f6f6;
}

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

.card .meta {
  padding: 12px;
}

.card .title {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.card .price {
  font-weight: 700;
  color: #0a4;
  margin: 0 0 12px 0;
}

.add-to-cart-btn {
  width: 100%;
  padding: 10px 16px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.add-to-cart-btn:hover {
  background: #6d28d9;
}

.add-to-cart-btn:active {
  background: #5b21b6;
}

/* Cart badge styling */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
}

/* Header styling for pages */
.site-header {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.brand img {
  height: 32px;
  width: auto;
}

.header-search {
  flex: 1;
  max-width: 400px;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.header-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
}

.header-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions .link {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

.header-actions select {
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
}

/* Cart button and count styling */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.cart-btn:hover {
  background-color: rgba(0,0,0,0.1);
}

.cart-btn .ico {
  color: #2d2d2d;
  width: 22px;
  height: 22px;
}

.cart-btn .count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #7c3aed;
  color: #fff;
  font-size: 12px;
  text-align: center;
  transform: scale(0);
  transform-origin: 100% 0;
  transition: transform .18s ease;
}

.cart-btn .count.show {
  transform: scale(1);
}

/* Header search styling */
.header-search {
  position: relative;
  flex: 1;
  max-width: 400px;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.header-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  padding: 0;
}

.header-search .icon {
  color: #64748b;
  margin-right: 8px;
}

.header-search .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.header-search .icon-btn:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Menu toggle button */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.menu-toggle:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Catalog section styling */
.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 16px;
}

.catalog-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2d2d2d;
}

.catalog-filters select {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.no-results {
  text-align: center;
  padding: 48px 16px;
  color: #64748b;
}

.no-results p {
  font-size: 18px;
  margin: 0;
}

/* Search chip styling */
.search-chip {
  margin: 8px 0 12px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(124, 58, 237, .08);
  color: #5b21b6;
  font-size: 12px;
}

/* SVG sprite and icon styling */
.svg-sprite { 
  position: absolute; 
  width: 0; 
  height: 0; 
  overflow: hidden; 
} /* hidden defs */

.ico { 
  width: 16px; 
  height: 16px; 
  vertical-align: -2px; 
  color: currentColor; 
}

.pill .ico { 
  margin-right: 8px; 
}

/* Search overlay styling */
#searchOverlay {
  position: fixed; inset: 0; background: rgba(8,10,14,.55);
  display: grid; place-items: start center; padding-top: 8vh; z-index: 1100;
;pointer-events:none}
#searchOverlay .search-ovl-card {
  width: min(820px, 92vw); max-height: 80vh; overflow: auto;
  background: #0f1116; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 65px rgba(0,0,0,.35); border-radius: 16px;
}
.search-ovl-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.search-ovl-head strong { font-size: 16px; }
.search-ovl-close { background: transparent; border: 0; font-size: 24px; color: #bbb; cursor: pointer; }
.search-ovl-body { padding: 8px 4px 12px; }
.search-ovl-list { list-style: none; margin: 0; padding: 0; }
.search-ovl-list li .row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 10px 14px; border-radius: 10px; text-decoration: none; color: inherit;
}
.search-ovl-list li .row:hover { background: rgba(255,255,255,.06); }
.search-ovl-list .t { font-size: 14px; line-height: 1.3; }
.search-ovl-list .r { font-size: 13px; opacity: .7; white-space: nowrap; }
.muted { opacity: .7; padding: 14px; }

/* Grid and page styling */
.wrap {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 16px;
}

.grid {
  display: grid;
  gap: 16px;
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cards-3,
  .cards-4 {
    grid-template-columns: 1fr;
  }
}

.page-head {
  text-align: center;
  margin-bottom: 32px;
}

.page-head h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
  color: #0f172a;
}

.page-head p {
  color: #64748b;
  font-size: 1.1rem;
}

/* Site header glass effect */
.site-header.glass {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  border-radius: 14px;
  margin: 0 16px;
  margin-top: 8px;
}

.site-header.sticky {
  position: sticky;
  top: 24px;
  z-index: 59;
}

.site-header.scrolled {
  background: rgba(14,15,20,.70);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}

.site-header.scrolled .brand,
.site-header.scrolled .nav a,
.site-header.scrolled .hdr-verified {
  color: #e5e7eb;
}

/* Brand styling */
.brand-mark {
  height: 32px;
  width: auto;
}

.brand-text {
  font-weight: 600;
  color: inherit;
}

/* Card actions and checkout button */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

.checkout-btn {
  background: #16a34a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.checkout-btn:hover {
  background: #15803d;
  color: #fff;
}

.checkout-btn:active {
  background: #166534;
}

/* Update existing add-to-cart-btn to work with new layout */
.add-to-cart-btn {
  width: 100%;
  padding: 10px 16px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.add-to-cart-btn:hover {
  background: #6d28d9;
}

.add-to-cart-btn:active {
  background: #5b21b6;
}

/* Responsive adjustments for card actions */
@media (max-width: 640px) {
  .card-actions {
    padding: 0 8px 8px;
    gap: 6px;
  }
  
  .add-to-cart-btn,
  .checkout-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Hide one specific product card by URL handle */
a[href*="17cm-doll-clothes-set-outfit-set-for-dolls-premium-fashion-dresses-with-accessor"] {
  display: none !important;
}

/* ===== EDGE COMPATIBILITY FIXES ===== */

/* CSS Grid fallbacks for Edge */
.cards.grid3,
.grid.cards-3,
.grid.cards-4 {
  display: -ms-grid;
  display: grid;
}

/* Specific grid column definitions for Edge */
.cards.grid3 {
  -ms-grid-columns: 1fr 16px 1fr 16px 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.grid.cards-3 {
  -ms-grid-columns: 1fr 14px 1fr 14px 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.grid.cards-4 {
  -ms-grid-columns: 1fr 14px 1fr 14px 1fr 14px 1fr;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Backdrop filter fallback for Edge */
.site-header.glass {
  background: rgba(255, 255, 255, 0.95);
}

.site-header.glass.scrolled {
  background: rgba(14, 15, 20, 0.95);
}

@supports (backdrop-filter: blur(10px)) {
  .site-header.glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
  }
  
  .site-header.glass.scrolled {
    background: rgba(14, 15, 20, 0.70);
    backdrop-filter: blur(10px);
  }
}

/* Flexbox gap fallback for older Edge */
@supports not (gap: 16px) {
  .hero__cta > *,
  .header-actions > *,
  .chips > *,
  .trust-badges > *,
  .testimonial-grid > *,
  .footer-grid > * {
    margin: 8px;
  }
  
  .hero__cta,
  .header-actions,
  .chips,
  .trust-badges,
  .testimonial-grid,
  .footer-grid {
    margin: -8px;
  }
}

/* Aspect ratio fallback for Edge */
.card .thumb {
  position: relative;
  padding-bottom: 100%; /* 1:1 aspect ratio as fallback */
}

.card .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CSS variable fallback for very old browsers */
:root {
  --brand: #111;
  --accent: #ffd200;
  --bg: #fafafa;
  --card: #fff;
}

/* Apply fallback values directly */
.site-header {
  background: #fff;
  background: var(--card);
}

.trust-item i {
  color: #ffd200;
  color: var(--accent);
}

/* Fix for sticky positioning in Edge */
.site-header.sticky {
  position: -ms-device-fixed;
  position: sticky;
}

/* Smooth scrolling fallback */
@media (prefers-reduced-motion: reduce) {
  html, body {
    scroll-behavior: auto;
  }
}

/* Fix for CSS clip-path in Edge */
.hero__title {
  color: #333;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title {
    background: linear-gradient(180deg, #0f172a, #3b3b3b 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Grid area placement for Edge */
@media (max-width: 900px) {
  .cards.grid3 {
    -ms-grid-columns: 1fr 16px 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid.cards-3,
  .grid.cards-4 {
    -ms-grid-columns: 1fr 14px 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cards.grid3,
  .grid.cards-3,
  .grid.cards-4 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* Fix for filter effects in Edge */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.16);
}

/* Fallback for browsers that don't support filter */
@supports not (filter: drop-shadow(0 10px 28px rgba(0,0,0,.18))) {
  .hero-logo-card img {
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  }
}

/* ===== ERROR STATES & LOADING ===== */
.error-message {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  grid-column: 1 / -1;
  background: #f9f9f9;
  border-radius: 12px;
  border: 1px solid #eee;
}

.error-message p {
  margin-bottom: 16px;
  font-size: 16px;
}

.retry-btn {
  background: #7c3aed;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s;
}

.retry-btn:hover {
  background: #6d28d9;
}

/* Loading animation that works in Edge */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.loading-card {
  animation: pulse 1.5s infinite;
  background: #f0f0f0;
  border-radius: 12px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

/* Edge compatibility fixes */
.browser-edge .card {
  transition: none; /* Remove transitions for better Edge performance */
}

.browser-edge .grid {
  display: -ms-grid;
  display: grid;
}

/* Fallback product cards for when JS fails completely */
.no-js-fallback {
  display: grid;
  gap: 16px;
  padding: 24px 0;
}

.no-js-fallback .card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

.no-js-fallback .card h3 {
  margin: 0 0 12px 0;
  color: #333;
}

.no-js-fallback .card p {
  color: #0a7d2c;
  font-weight: 700;
  margin: 0;
}

.no-js-fallback .card a {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: #7c3aed;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
}

/* Loading state for products */
.grid .card.loading {
  min-height: 300px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid .card.loading:before {
  content: "Loading...";
  color: #999;
}

/* Browser-specific fixes */
.browser-edge .grid {
  display: -ms-grid;
  display: grid;
}

.browser-legacy-edge .grid.cards-3 {
  -ms-grid-columns: 1fr 14px 1fr 14px 1fr;
}

.browser-legacy-edge .grid.cards-4 {
  -ms-grid-columns: 1fr 14px 1fr 14px 1fr 14px 1fr;
}

/* ===== Product Gallery Styles ===== */

/* Hero image: smaller, nicely cropped */
.p-hero {
  width: 100%;
  max-height: 420px;         /* reduce height */
  object-fit: cover;         /* crop instead of stretching */
  border-radius: 12px;
  display: block;
}

/* Thumbnail grid */
.thumbs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* Thumbnail images */
.thumbs .thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.thumbs .thumb:hover {
  border-color: #aaa;
}

.thumbs .thumb.active {
  border-color: #6c2bd9; /* purple border for active */
}

/* ===== Cards Grid Styles ===== */

/* Cards grid for figures and products pages */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 12px;
  align-items: start; /* Don't stretch cards to match tallest */
}

/* Ensure all cards in grid have uniform height */
.grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Fix card content layout */
.grid .card .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid .card .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* keeps rows equal even if short */
}

.grid .card .price {
  min-height: 1.5em; /* reserve space for price */
}

/* Ensure card link takes full height */
.grid .card .card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Make thumb area consistent */
.grid .card .thumb {
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  overflow: hidden;
}

.grid .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* === PRODUCT GALLERY: HERO + THUMBS === */
.p-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Thumbnail strip */
#thumbs.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;      /* don't stretch children vertically */
  margin-top: 12px;
}

/* Thumbnails as small squares (do NOT inherit height:100%) */
#thumbs.thumbs img.thumb {
  width: 68px;
  height: 68px;                 /* fixed size to prevent stretching */
  object-fit: cover;            /* crop to fit the square */
  border-radius: 10px;
  border: 2px solid #e5e7eb;    /* light gray border */
  background: #f3f4f6;          /* subtle bg while loading */
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: block;
  flex: 0 0 auto;               /* never stretch */
}

/* Active/hover states */
#thumbs.thumbs img.thumb.active { border-color: #7c3aed; }  /* purple outline */
#thumbs.thumbs img.thumb:hover  { border-color: #9ca3af; }  /* darker gray */

/* Kill inherited rules that were causing the tall bars */
#thumbs.thumbs img,
#thumbs.thumbs .thumb {
  height: auto !important;      /* defeat any img { height:100% } from elsewhere */
  max-height: none !important;
  max-width: none !important;
}

/* Product page image sizing */
.p-card img { height: auto; }

/* Thumbnails: fixed small squares */
#thumbs.thumbs img.thumb,
#thumbs.thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  background: #f3f4f6;
  display: block;
  flex: 0 0 auto;
}
#thumbs.thumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
#thumbs.thumbs img.thumb.active { border-color: #7c3aed; }
#thumbs.thumbs img.thumb:hover  { border-color: #9ca3af; }

/* --- Product page gallery: HARD overrides --- */

/* 1) Make sure global card image rules don't affect the product page */
.p-card img { height: auto !important; max-height: none !important; }

/* 2) Thumbnail strip layout */
#thumbs.thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

/* 3) Force thumbnails to be small squares (win over any other img rules) */
#thumbs.thumbs img,
#thumbs.thumbs img.thumb {
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  object-fit: cover !important;
  display: block !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  border: 2px solid #e5e7eb !important;
  background: #f3f4f6 !important;
}

/* 4) Active/hover states for the small boxes */
#thumbs.thumbs img.thumb.active { border-color: #7c3aed !important; }
#thumbs.thumbs img.thumb:hover  { border-color: #9ca3af !important; }

/* ---- Product page image overrides ---- */

/* Never let listing-grid rules touch images inside the product card */
.p-card img { height: auto !important; }

/* Main hero stays tall but contained */
.p-card .p-hero { height: 520px !important; object-fit: contain !important; }

/* Thumbnails: fixed small squares */
.p-card #thumbs,
.p-card .thumbs { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

.p-card #thumbs img,
.p-card .thumbs img,
.p-card #thumbs img.thumb {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: cover !important;
  display: block !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  border: 2px solid #e5e7eb !important;
  background: #fff !important;
}

.p-card #thumbs img.thumb.active { border-color: #7c3aed !important; }

/* --- Product page gallery: fixed-size thumbnail boxes --- */
.p-card #thumbs,
.p-card .thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-top: 10px;
}

/* The box: always 72x72, clips whatever image tries to do */
.p-card .thumb-box {
  width: 72px; height: 72px;
  overflow: hidden;
  border: 2px solid #e5e7eb; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; flex: 0 0 auto; cursor: pointer;
}
.p-card .thumb-box img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: cover;
}
.p-card .thumb-box.active { border-color: #7c3aed; }

/* Make sure listing rules never leak onto the product page */
.p-card img { height: auto !important; max-height: none !important; }

/* Thumbs strip */
.thumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding: 8px 0;
}

/* Each thumb has a fixed square box */
.img-thumb {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 10px;
  background: #f3f3f3;
  border: 2px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-thumb.active { border-color: #7c3aed; }
.img-thumb:hover  { border-color: #a78bfa; }

/* Thumbnails strip: robust in Edge and Chrome */
.thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 0;
}

.thumbs .thumb {
  flex: 0 0 auto;
  width: 66px;            /* matches your design */
  height: 66px;           /* ensure non-zero height */
  border-radius: 12px;
  background: #f3f3f3;    /* skeleton bg */
  border: 2px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.thumbs .thumb.active { border-color: #7c4dff; }

.thumbs .thumb img {
  display: block;         /* important in Edge */
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crops nicely */
  transform: translateZ(0); /* kicks GPU on Edge, fixes flicker */
}

/* ====== Edge-safe image sizing ====== */



/* Hero images - prevent collapse while loading */
#hero, .p-hero {
  min-height: 360px;     /* prevents collapse while the image is loading */
}
#hero img, .p-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Initial state for images (before .images-ready class) */
.p-hero img,
.thumbs img {
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}

/* --- Product thumbnails: fixed-size tiles, no stretching --- */
#thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  overflow-x: auto;           /* allow horizontal scroll if needed */
}

/* prevent any grid/card rules from stretching children */
#thumbs > * {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* the actual image tile */
#thumbs img {
  width: 72px !important;     /* pick 64–80px if you prefer */
  height: 72px !important;
  display: block !important;
  object-fit: cover !important; /* fill the tile */
  border-radius: 12px !important;
  background: #f3f3f3 !important; /* pleasant skeleton */
  border: 0 !important;
}

/* active state */
#thumbs img.active {
  outline: 2px solid #7c3aed !important;
  outline-offset: 0 !important;
}

/* Hide edge render probe debug widget */
#edge-render-probe, .edge-render-probe { display:none !important; }

/* Grid */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  align-items: start; /* don't stretch cards */
}

/* Card = full height, vertical layout */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image box: fixed visual size for all cards */
.product-card .product-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;     /* always a square box */
  /* If your target browsers are older, use:
     height: 260px;  */
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.product-card .product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* fit inside without cropping */
  display: block;
}

/* Body grows, footer sticks to bottom */
.product-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title: clamp to 2 lines so long names don't push card height */
.product-card .product-title {
  margin-top: 10px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.0em; /* keeps rows equal even if short */
}

/* Price/badges area fixed footprint */
.product-card .price-row,
.product-card .badge-row {
  min-height: 24px;
}

/* Buy row pinned to bottom */
.product-card .buy-row {
  margin-top: auto;
}

/* keep card heights uniform */
.title.ellipsis-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;     /* reserve space for two lines */
}

/* make the thumbnail area a fixed square so all images match */
.card .thumb{
  aspect-ratio: 1 / 1;    /* square */
  background: #f6f6f6;
}
.card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* no cropping */
  display: block;
}