/* FIMIKU COMPONENT SYSTEM v2 — Overrides old style.css using tokens.css */

/* ── BASE ── */
body{font-family:var(--font-body);color:var(--text);background:var(--bg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;color:var(--text)}
a{color:var(--primary);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--primary-2)}
*:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.section-gap{padding:64px 0}
.bg-section-alt{background:var(--surface-2)}

/* ── A) HEADER / NAV ── */
.announcement-bar{background:var(--primary);color:#fff;padding:10px 0;font-size:.85rem;font-weight:500;letter-spacing:.02em}
.toy-navbar{background:var(--surface);box-shadow:var(--shadow-1);padding:12px 0;transition:all var(--ease)}
.toy-navbar.scrolled{padding:8px 0;box-shadow:var(--shadow-2)}
.toy-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:26px;font-weight:700;color:var(--text);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset}
.logo-icon i{color:var(--primary)!important;-webkit-text-fill-color:initial}
.logo-accent{color:var(--primary)}
.toy-navbar .nav-link{font-weight:600;color:var(--text)!important;padding:8px 14px!important;border-radius:var(--radius-pill);font-size:.95rem;transition:all var(--ease)}
.toy-navbar .nav-link:hover{background:var(--surface-2);color:var(--primary)!important}
.nav-auth-btn{border-radius:var(--radius-pill)!important;font-weight:600!important;padding:8px 20px!important;font-size:.9rem!important}

/* ── B) SEARCH ── */
.search-wrapper{position:relative;width:100%;max-width:420px}
.search-input{width:100%;padding:10px 20px 10px 42px;border:2px solid var(--border);border-radius:var(--radius-pill);font-size:.95rem;transition:all var(--ease);background:var(--surface);color:var(--text)}
.search-input:hover{border-color:var(--primary-2)}
.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(123,97,255,.12)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem}
.search-btn{position:absolute;right:4px;top:4px;bottom:4px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-pill);padding:0 18px;font-weight:600;font-size:.9rem;transition:all var(--ease)}
.search-btn:hover{background:var(--primary-2)}

/* ── C) BUTTONS ── */
.btn-hero-primary{background:var(--primary);color:#fff;font-weight:600;font-size:1rem;padding:14px 28px;border-radius:var(--radius-pill);border:none;box-shadow:0 8px 20px rgba(123,97,255,.25);transition:all var(--ease)}
.btn-hero-primary:hover{background:var(--primary-2);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(123,97,255,.3)}
.btn-hero-secondary{background:var(--surface);color:var(--primary);font-weight:600;font-size:1rem;padding:14px 28px;border-radius:var(--radius-pill);border:2px solid var(--border);transition:all var(--ease)}
.btn-hero-secondary:hover{border-color:var(--primary);background:var(--surface-2);color:var(--primary)}

/* Cart icon */
.nav-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:1.15rem;position:relative;transition:all var(--ease)}
.nav-icon-btn:hover{background:var(--primary);color:#fff}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}

/* ── D) BADGES ── */
.deal-badge{background:var(--primary);color:#fff;padding:8px 16px;border-radius:var(--radius-pill);font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;display:inline-block;animation:none;box-shadow:0 4px 12px rgba(123,97,255,.25)}
.badge-discount{background:var(--danger);color:#fff;padding:4px 10px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700}
.badge-featured{background:var(--primary);color:#fff}
.badge-oos{background:var(--muted);color:#fff}

/* ── E) HERO (ULTRA-PREMIUM STRIPE/APPLE LEVEL) ── */
.hero-stripe {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
}

.hero-stripe-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(246, 242, 255, 0.8) 0%, rgba(255, 255, 255, 1) 70%);
  z-index: 1;
}

.hero-stripe-noise {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.03"/%3E%3C/svg%3E');
  z-index: 2;
  pointer-events: none;
}

.hero-stripe-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  background: url('/static/img/hero_desktop.png') no-repeat center center / cover;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  z-index: 3;
}

.hero-stripe-container {
  position: relative;
  z-index: 4;
  max-width: 1280px;
  padding: 64px 24px;
}

.hero-glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 48px;
  border-radius: 32px;
  box-shadow: 0 24px 64px -12px rgba(124, 58, 237, 0.08), 0 0 1px rgba(0,0,0,0.1);
  max-width: 620px;
}

.stripe-flash-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.stripe-flash-badge i {
  color: #8b5cf6;
  font-size: 0.9rem;
}

.stripe-h1 {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  color: #101828;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}

.stripe-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.stripe-body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #344054;
  margin-bottom: 40px;
  max-width: 520px;
  font-weight: 400;
}

.stripe-cta-group {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.btn-stripe-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.1), 0 8px 16px -4px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-stripe-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.1), 0 12px 24px -4px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-stripe-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  background: rgba(255,255,255,0.8);
  color: #344054;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-stripe-secondary:hover {
  background: #f9fafb;
  color: #101828;
  border-color: #98a2b3;
}

.stripe-trust-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stripe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e8e2f6;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475467;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stripe-chip i {
  color: #7c3aed;
  font-size: 0.95rem;
}

.stripe-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.04);
}

@media (max-width: 991px) {
  .hero-stripe-image {
    width: 100%;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    opacity: 0.5;
  }
  .hero-glass-card { padding: 32px; max-width: 100%; margin-top: 40px; }
  .stripe-cta-group { flex-direction: column; width: 100%; }
  .btn-stripe-primary, .btn-stripe-secondary { width: 100%; }
}
@media (max-width: 768px) {
  .hero-glass-card { padding: 24px 20px; }
  .stripe-trust-row { justify-content: center; }
}

/* ── F) BENEFIT CARDS (Why Us) ── */
.why-us-section{background:var(--surface-2)!important;padding:64px 0!important;border-radius:0!important;border-bottom:1px solid var(--border)!important}
.why-us-section .card{background:var(--surface);border:1px solid var(--border)!important;border-radius:var(--radius-md)!important;transition:all var(--ease)}
.why-us-section .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--primary)!important}
.why-us-section .card i{color:var(--primary)!important}
.why-us-section .card h4{color:var(--text);font-size:1.1rem}
.why-us-section .card p{color:var(--muted);font-size:.9rem;line-height:1.6}

/* ── G) CATEGORY TILES ── */
.category-bar{background:var(--surface)!important;border-bottom:1px solid var(--border)!important}
.cat-bar-link{color:var(--text)!important;font-weight:600;font-size:.9rem;padding:6px 12px;border-radius:var(--radius-pill);border-bottom:none!important;transition:all var(--ease)}
.cat-bar-link:hover{color:var(--primary)!important;background:var(--surface-2)}
.transition-hover{transition:all var(--ease)}
.transition-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}

/* ── H) FLASH SALE BANNER ── */
.section-header{text-align:center;margin-bottom:40px}
.section-title{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:8px}
.section-subtitle{color:var(--muted);font-size:1rem;max-width:560px;margin:0 auto}
.section-cta{display:inline-block;margin-top:12px;font-weight:600;color:var(--primary);font-size:.95rem}
.section-cta:hover{color:var(--primary-2)}

/* ── J) ALL TOYS (PREMIUM DTC LAYOUT & CARDS) ── */
.collection-header {
  background: #faf7ff;
  padding: 40px 0 24px;
  border-bottom: 1px solid #f3effa;
  margin-bottom: 24px;
}
.breadcrumb { font-size: 0.85rem; margin-bottom: 16px; }
.breadcrumb a { color: #667085; text-decoration: none; }
.breadcrumb a:hover { color: #7c3aed; }
.collection-title-row {
  display: flex; justify-content: space-between; align-items: flex-end;
}
.collection-title { font-size: 2.25rem; font-weight: 700; color: #101828; margin: 0; line-height: 1.2; }
.collection-count { font-size: 0.95rem; color: #667085; margin: 8px 0 0 0; }
.sort-label { font-size: 0.85rem; color: #475467; margin-right: 8px; font-weight: 500; }
.sort-select { padding: 8px 32px 8px 16px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 0.9rem; color: #344054; outline: none; background: white; cursor: pointer; transition: all 0.2s; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23667085" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sort-select:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }

/* Premium Sidebar Filter Card */
.premium-filter-card {
  background: white; border-radius: 16px; border: 1px solid #eaecf0; padding: 24px; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.03);
}
.filter-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.filter-card-title { font-size: 1.15rem; font-weight: 600; color: #101828; margin: 0; }
.filter-clear { font-size: 0.85rem; color: #7c3aed; text-decoration: none; font-weight: 500; }
.filter-clear:hover { text-decoration: underline; }

.premium-accordion .accordion-item { border: none; border-bottom: 1px solid #eaecf0; margin-bottom: 0; border-radius: 0; background: transparent; }
.premium-accordion .accordion-item:last-child { border-bottom: none; }
.premium-accordion .accordion-button { padding: 16px 0; font-weight: 600; color: #344054; background: transparent; box-shadow: none; }
.premium-accordion .accordion-button:not(.collapsed) { color: #101828; background: transparent; }
.premium-accordion .accordion-button::after { background-size: 1rem; }
.premium-accordion .accordion-body { padding: 0 0 16px 0; display: flex; flex-direction: column; gap: 12px; }

/* Custom Checkbox */
.premium-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 0.95rem; color: #475467; }
.premium-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.premium-checkbox .checkmark { height: 18px; width: 18px; border: 1.5px solid #d0d5dd; border-radius: 4px; display: flex; justify-content: center; align-items: center; transition: all 0.2s; background: white; }
.premium-checkbox:hover input ~ .checkmark { border-color: #a78bfa; }
.premium-checkbox input:checked ~ .checkmark { background-color: #7c3aed; border-color: #7c3aed; }
.premium-checkbox input:checked ~ .checkmark::after { content: ""; width: 4px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
.premium-checkbox input:checked ~ .label-text { font-weight: 500; color: #101828; }

/* Product Card Premium */
.product-card-premium {
  background: white; border-radius: 16px; border: 1px solid #eaecf0; overflow: hidden; position: relative; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; display: flex; flex-direction: column;
}
.product-card-premium:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08); }
.product-img-wrapper { position: relative; width: 100%; padding-top: 100%; background: #f9fafb; overflow: hidden; }
.product-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.4s ease; }
.product-img-hover { opacity: 0; }
.product-img-wrapper:hover .product-img { transform: scale(1.03); }
.product-img-wrapper:hover .product-img-hover { opacity: 1; transform: scale(1.03); }
.product-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.badge-premium { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 650; box-shadow: 0 2px 4px rgba(0,0,0,0.06); text-transform: uppercase; letter-spacing: 0.02em; }
.badge-discount { background: #d92d20; color: white; }
.badge-featured { background: #101828; color: white; }
.badge-oos { background: #f2f4f7; color: #475467; }
.wishlist-btn-premium { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: white; border: 1px solid #eaecf0; color: #667085; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.wishlist-btn-premium:hover { color: #d92d20; transform: scale(1.05); }
.wishlist-btn-premium.active { color: #d92d20; }
.wishlist-btn-premium.active i { color: #d92d20; }
.product-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.product-meta { font-size: 0.75rem; color: #667085; margin-bottom: 8px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.meta-dot { color: #d0d5dd; }
.product-name { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-name a { color: #101828; text-decoration: none; }
.product-name a:hover { color: #7c3aed; }
.product-rating { display: flex; align-items: center; gap: 2px; font-size: 0.85rem; margin-bottom: auto; padding-bottom: 16px; }
.star-filled { color: #fec84b; }
.star-empty { color: #eaecf0; }
.rating-count { color: #98a2b3; margin-left: 4px; font-size: 0.8rem; }
.product-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f2f4f7; padding-top: 16px; }
.product-price { display: flex; flex-direction: column; }
.price-current { font-size: 1.25rem; font-weight: 700; color: #101828; font-family: var(--font-heading); }
.price-original { font-size: 0.85rem; color: #98a2b3; text-decoration: line-through; }
.btn-quick-add { width: 40px; height: 40px; border-radius: 50%; background: #f9fafb; border: 1px solid #eaecf0; color: #101828; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
.btn-quick-add:not(.disabled):hover { background: #7c3aed; border-color: #7c3aed; color: white; width: 88px; border-radius: 20px; }
.btn-quick-add .quick-add-text { font-size: 0.9rem; font-weight: 600; margin-left: 6px; opacity: 0; max-width: 0; transition: all 0.2s ease; white-space: nowrap; }
.btn-quick-add:not(.disabled):hover .quick-add-text { opacity: 1; max-width: 50px; }
.btn-quick-add.disabled { background: #f2f4f7; color: #d0d5dd; cursor: not-allowed; }

/* Empty State */
.empty-state-premium { text-align: center; padding: 64px 24px; background: white; border: 1px dashed #d0d5dd; border-radius: 16px; margin-top: 24px; }
.empty-icon { font-size: 3rem; color: #d0d5dd; margin-bottom: 16px; }
.empty-state-premium h3 { font-size: 1.25rem; color: #101828; margin-bottom: 8px; font-weight: 600; }
.empty-state-premium p { color: #667085; max-width: 400px; margin: 0 auto 24px auto; }

/* Mobile Drawer */
.mobile-filter-bar { display: flex; gap: 12px; margin-bottom: 24px; }
.btn-mobile-filter { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; height: 44px; background: white; border: 1px solid #d0d5dd; border-radius: 8px; font-weight: 600; color: #344054; }
.mobile-sort { flex: 1; }
.mobile-sort .sort-select { width: 100%; height: 44px; }
.premium-drawer { border-radius: 24px 24px 0 0; }
.drawer-section-title { font-weight: 600; color: #101828; margin-bottom: 12px; }
.drawer-options { display: flex; flex-direction: column; gap: 12px; }
.drawer-footer { display: flex; gap: 12px; padding: 16px; background: white; border-top: 1px solid #eaecf0; position: sticky; bottom: 0; margin: 24px -16px -16px -16px; }

/* ── K) ABOUT SECTION ── */
.about-home-section{padding:64px 0;background:var(--surface-2)!important;color:var(--text)!important}
.about-home-section h2{color:var(--text)!important;font-weight:700}
.about-home-section p{color:var(--muted)!important}
.about-home-section .lead{color:var(--text)!important}
.about-img-wrap{border-radius:var(--radius-lg);overflow:hidden}
.about-img-wrap img{transition:transform .4s ease}
.about-img-wrap:hover img{transform:scale(1.04)}

/* ── L) AGE GROUP CARDS ── */
.age-card{border-radius:var(--radius-lg);padding:32px 24px;text-align:center;transition:all var(--ease);height:100%;border:1px solid var(--border);overflow:hidden}
.age-baby{background:linear-gradient(135deg,#EDE9FE,#F3E8FF)!important;color:var(--text)!important}
.age-kid{background:linear-gradient(135deg,#DBEAFE,#E0F2FE)!important;color:var(--text)!important}
.age-teen{background:linear-gradient(135deg,#FFF3E6,#FEF3C7)!important;color:var(--text)!important}
.age-card h4{color:var(--text)!important;font-weight:700;font-size:1.3rem}
.age-card p{color:var(--muted)!important;opacity:1!important}
.age-cta{display:inline-block;padding:8px 20px;border-radius:var(--radius-pill);background:var(--primary);color:#fff!important;font-weight:600;font-size:.85rem;transition:all var(--ease)}
.age-card-link:hover .age-card{transform:translateY(-4px);box-shadow:var(--shadow-2)}

/* ── M) COMPARISON ── */
.vs-card{background:var(--surface);padding:32px;border-radius:var(--radius-md);height:100%;box-shadow:var(--shadow-1);border:1px solid var(--border);transition:all var(--ease)}
.vs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.vs-header{font-size:1.4rem;font-weight:700;margin-bottom:20px;text-align:center;font-family:var(--font-heading)}
.text-silicone{color:var(--success)!important}
.text-plastic{color:var(--danger)!important}
.vs-list{list-style:none;padding:0}
.vs-list li{padding:10px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:500;color:var(--text)}
.vs-list li:last-child{border-bottom:none}

/* ── N) TESTIMONIALS ── */
.testimonial-card-premium{background:var(--surface);border-radius:var(--radius-md);padding:32px;box-shadow:var(--shadow-1);height:100%;border:1px solid var(--border);border-top:4px solid var(--primary)}
.testimonial-card-premium .stars{color:var(--warning);font-size:1.1rem;margin-bottom:12px}
.testimonial-card-premium p{font-style:italic;color:var(--text);line-height:1.65}
.quote-icon{font-size:32px;color:var(--primary-2);opacity:.4;margin-bottom:8px}
.reviewer-avatar{width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}

/* ── O) FAQ ACCORDION ── */
.faq-section{padding:64px 0;background:var(--bg)}
.accordion-item{border:1px solid var(--border)!important;background:var(--surface)!important;margin-bottom:12px!important;border-radius:var(--radius-md)!important;box-shadow:none!important;overflow:hidden}
.accordion-button{font-weight:600!important;font-family:var(--font-heading)!important;font-size:1rem!important;padding:18px 20px!important;color:var(--text)!important;background:var(--surface)!important;box-shadow:none!important}
.accordion-button:not(.collapsed){color:var(--primary)!important;background:var(--surface-2)!important}
.accordion-body{padding:0 20px 20px!important;color:var(--muted);font-size:.95rem;line-height:1.7}

/* ── P) NEWSLETTER ── */
.newsletter-section{padding:48px 0;background:var(--bg)}
.newsletter-inner{background:var(--surface-2)!important;border-radius:var(--radius-lg);padding:40px;border:1px solid var(--border)}

/* ── Q) FOOTER ── */
.toy-footer{background:#F4F0FF;padding:64px 0 24px;border-top:1px solid var(--border)}
.footer-logo{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--text);display:block;margin-bottom:12px}
.footer-tagline{color:var(--muted);font-size:.95rem}
.social-btn{width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;transition:all var(--ease)}
.social-btn:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.footer-heading{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:16px}
.footer-links a{color:var(--muted);font-size:.95rem}
.footer-links a:hover{color:var(--primary);padding-left:4px}
.footer-contact p{color:var(--muted)}
.footer-divider{border-color:var(--border)}
.footer-bottom{color:var(--muted);font-size:.85rem}
.pay-badge{background:var(--surface-2);padding:6px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:.8rem;color:var(--text)}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .hero-title{font-size:2.2rem!important}
  .hero-circle{width:300px!important;height:300px!important}
}
@media(max-width:768px){
  .hero-title{font-size:1.85rem!important}
  .hero-subtitle{font-size:.95rem!important;max-width:100%!important}
  .hero-circle{width:260px!important;height:260px!important;margin:24px auto!important}
  .hero-actions{flex-direction:column;width:100%;gap:8px}
  .btn-hero-primary,.btn-hero-secondary{width:100%;text-align:center}
  .section-title{font-size:1.6rem}
  .section-gap{padding:40px 0}
  .floating-toy{width:40px!important;height:40px!important;font-size:16px!important}
  .newsletter-inner{padding:24px!important}
}
@media(max-width:480px){
}
@media(max-width:480px){
}
@media(max-width:480px){
  .hero-title{font-size:1.6rem!important}
  .product-body{padding:12px}
  .product-name{font-size:.9rem}
  .price-current{font-size:1.1rem}
}

/* ── NAVBAR CART PREMIUM ── */
.btn-cart-premium { background: #f3effa; padding: 10px 24px 10px 18px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; border: 1px solid transparent; }
.btn-cart-premium:hover { background: white; border-color: var(--primary); box-shadow: 0 4px 12px rgba(124,58,237,0.15); transform: translateY(-1px); }
.btn-cart-premium:hover .text-dark { color: var(--primary) !important; }
.btn-cart-premium .cart-icon-wrapper i { transition: all 0.3s; }
.btn-cart-premium:hover .cart-icon-wrapper i { transform: scale(1.1); }

/* ── R) CART & PROFILE (PREMIUM) ── */
.cart-page-premium { background: var(--bg); }
.cart-header-top .page-title { font-weight: 700; font-size: 2.25rem; color: var(--text); }
.cart-table-header { padding: 0 16px 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 16px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cart-items-list { display: flex; flex-direction: column; gap: 16px; }
.cart-item-premium { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; transition: all var(--ease); }
.cart-item-premium:hover { box-shadow: var(--shadow-1); border-color: var(--primary-2); }
.cart-img-wrap { width: 90px; height: 90px; flex-shrink: 0; background: var(--surface-2); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cart-img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; }
.cart-product-title { font-weight: 600; font-size: 1.05rem; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-product-title:hover { color: var(--primary); }
.cart-product-meta { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.qty-selector-premium { display: flex; align-items: center; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; width: fit-content; }
.qty-btn { background: transparent; border: none; padding: 6px 12px; color: var(--text); cursor: pointer; transition: all 0.2s; }
.qty-btn:hover { background: var(--border); color: var(--primary); }
.qty-val { padding: 6px 12px; font-weight: 600; font-size: 0.95rem; min-width: 40px; text-align: center; }
.btn-remove-item { background: transparent; border: none; color: var(--muted); font-size: 1.25rem; transition: all 0.2s; padding: 8px; border-radius: 8px; }
.btn-remove-item:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.cart-item-total { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text); }
.cart-summary-premium { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-1); }
.summary-heading { font-weight: 700; font-size: 1.25rem; margin-bottom: 24px; color: var(--text); }
.summary-line { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 0.95rem; }
.line-label { color: var(--muted); }
.line-value { color: var(--text); }
.total-line { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.promo-toggle { background: transparent; border: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; padding: 0; text-decoration: none; }
.promo-input-group { display: flex; gap: 8px; }
.btn-apply-promo { background: var(--surface-2); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; font-weight: 600; color: var(--text); transition: all 0.2s; }
.btn-apply-promo:hover { background: var(--primary); color: white; border-color: var(--primary); }
.trust-feature { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.profile-dashboard { background: var(--bg); }
.profile-sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-1); }
.profile-nav .list-group-item { padding: 12px 20px; font-weight: 500; color: var(--text); transition: all 0.2s; }
.profile-nav .list-group-item:hover { background: var(--surface-2); color: var(--primary); }
.profile-nav .list-group-item.active { background: var(--primary); color: white; border-color: var(--primary); }
.dashboard-title { color: var(--text); font-size: 1.5rem; }
.order-card-premium { transition: all 0.2s; }
.order-card-premium:hover { box-shadow: var(--shadow-1); border-color: var(--primary-2); }
.premium-input { border-radius: 8px; border: 1px solid var(--border); box-shadow: none; transition: all 0.2s; }
.premium-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.address-card { border: 1px solid var(--border); }
.cursor-pointer { cursor: pointer; }