/* D-HAYLEE-K KIDDIES & MUMS — Shared Store Styles */

/* ── PRODUCT CARDS ───────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.prod-card {
  background: var(--sf);
  border-radius: var(--r);
  border: 1px solid var(--bd);
  box-shadow: 0 2px 12px rgba(194,24,91,.06);
  transition: transform var(--tr), box-shadow var(--tr);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.prod-img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg2);
}
.prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.prod-card:hover .prod-img { transform: scale(1.06); }
.prod-badge {
  position: absolute;
  top: 10px;
  font-family: 'Baloo 2', cursive;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; color: #fff;
}
.badge-sale  { left: 10px; background: var(--pk); }
.badge-new   { right: 10px; background: var(--pu); }
.badge-hot   { left: 10px; background: var(--or); top: 38px; }
.prod-info { padding: 14px 16px 8px; flex: 1; }
.prod-cat-lbl {
  font-family: 'Baloo 2', cursive;
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--pk); margin-bottom: 4px;
}
.prod-name { font-size: .97rem; margin-bottom: 6px; }
.prod-name a { color: var(--tx); text-decoration: none; }
.prod-name a:hover { color: var(--pk); }
.prod-rating { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.prod-rating-count { font-size: .72rem; color: var(--txm); margin-left: 4px; }
.price-current, .price-sale { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1.05rem; color: var(--pk); }
.price-original { font-size: .82rem; color: var(--txm); text-decoration: line-through; margin-left: 6px; }
.prod-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 14px;
}
.prod-add-btn { flex: 1; font-size: .82rem; padding: 9px 14px; }
.prod-wish-btn, .prod-wa-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1.5px solid var(--bd);
  background: transparent; transition: background var(--tr), border-color var(--tr);
  text-decoration: none; color: #25D366;
  flex-shrink: 0;
}
.prod-wish-btn:hover { background: rgba(194,24,91,.08); border-color: var(--pk); }
.prod-wish-btn.active { background: rgba(194,24,91,.1); border-color: var(--pk); }
.prod-wa-btn:hover { background: rgba(37,211,102,.1); border-color: #25D366; }

/* ── FLOATING SOCIAL DOCK ────────────────────────────────────── */
.social-dock {
  position: fixed;
  right: 20px; bottom: 180px;
  z-index: 100;
  display: flex; flex-direction: column;
  gap: 10px;
  align-items: center;
}
.social-dock-toggle {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pk), var(--pu));
  color: #fff; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  box-shadow: 0 4px 16px rgba(194,24,91,.4);
  transition: transform var(--tr), box-shadow var(--tr);
}
.social-dock-toggle:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(194,24,91,.5); }
.social-dock-links {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: opacity .25s, transform .25s;
}
.social-dock-links.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
.sd-link {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  transition: transform var(--tr), box-shadow var(--tr);
  position: relative;
}
.sd-link:hover { transform: scale(1.12) translateX(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.sd-link .sd-tooltip {
  position: absolute; right: 52px; white-space: nowrap;
  background: #1E0A2E; color: #fff;
  font-family: 'Baloo 2', cursive; font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.sd-link:hover .sd-tooltip { opacity: 1; }
.sd-wa    { background: #25D366; }
.sd-ig    { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sd-fb    { background: #1877F2; }
.sd-tt    { background: #010101; }
.sd-yt    { background: #FF0000; }
.sd-tw    { background: #000000; }
.sd-pi    { background: #E60023; }

/* ── FLOATING WHATSAPP BUTTON ────────────────────────────────── */
.wa-float {
  position: fixed; bottom: 24px; right: 20px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  text-decoration: none; color: #fff;
  transition: transform var(--tr), box-shadow var(--tr);
  animation: waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,.6); animation: none; }
@keyframes waPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.4); }
  50%      { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0); }
}

/* ── CART BADGE ──────────────────────────────────────────────── */
.cart-badge-wrap { position: relative; }
[data-cart-badge] {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; border-radius: 100px;
  background: var(--pk); color: #fff;
  font-family: 'Baloo 2', cursive; font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid #fff;
  display: none;
}

/* ── SHARE BUTTONS ───────────────────────────────────────────── */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Baloo 2', cursive; font-size: .75rem; font-weight: 700;
  padding: 7px 14px; border-radius: 50px;
  text-decoration: none; color: #fff;
  transition: opacity var(--tr), transform var(--tr);
}
.share-btn:hover { opacity: .88; transform: translateY(-2px); }
.share-wa   { background: #25D366; }
.share-fb   { background: #1877F2; }
.share-tw   { background: #000; }
.share-pi   { background: #E60023; }
.share-copy { background: var(--pu); cursor:pointer; border:none; }

/* ── SOCIAL PROOF STRIP ──────────────────────────────────────── */
.social-strip {
  background: linear-gradient(135deg, var(--pk) 0%, var(--pu) 100%);
  color: #fff; padding: 12px 0; overflow: hidden;
}
.social-strip-inner {
  display: flex; gap: 48px; align-items: center;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
.social-strip-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Baloo 2', cursive; font-size: .82rem; font-weight: 700;
  opacity: .92; flex-shrink: 0;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section-header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-bottom: 32px;
}

/* ── PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(148deg,#FFF0F8 0%,#F5EDFF 40%,#EDFFF6 100%);
  padding: 130px 0 60px; text-align: center;
}
.page-hero h1 { margin-bottom: 10px; }
.page-hero p  { font-size: 1.05rem; max-width: 520px; margin: 0 auto; }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--txm); padding: 12px 0;
  list-style: none; flex-wrap: wrap;
}
.breadcrumb li::after { content: '/'; margin-left: 8px; opacity: .4; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--txm); text-decoration: none; }
.breadcrumb a:hover { color: var(--pk); }
.breadcrumb li:last-child { color: var(--pk); font-weight: 700; }

/* ── FILTER BAR ──────────────────────────────────────────────── */
.filter-bar {
  background: var(--sf); border-radius: var(--r);
  border: 1px solid var(--bd);
  padding: 18px 22px; margin-bottom: 28px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-label { font-weight: 700; font-size: .82rem; color: var(--tx); }
.filter-select {
  padding: 7px 32px 7px 12px; border-radius: 10px;
  border: 1.5px solid var(--bd); font-family: 'Nunito', sans-serif;
  font-size: .85rem; color: var(--tx); background: var(--bg);
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B5C7A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color var(--tr);
}
.filter-select:focus { border-color: var(--pk); }

.cat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-pill {
  padding: 7px 16px; border-radius: 50px;
  font-family: 'Baloo 2', cursive; font-size: .78rem; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--bd);
  background: var(--sf); color: var(--txm);
  transition: all var(--tr);
}
.cat-pill.active, .cat-pill:hover {
  background: linear-gradient(135deg, var(--pk), var(--pu));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(194,24,91,.3);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 80px 20px; color: var(--txm);
}
.empty-state svg { opacity: .25; margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; }

/* ── SOCIAL FEED GRID ────────────────────────────────────────── */
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.sf-item {
  aspect-ratio: 1; border-radius: 14px;
  overflow: hidden; position: relative;
  background: var(--bg2); cursor: pointer;
}
.sf-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.sf-item:hover img { transform:scale(1.08); }
.sf-overlay {
  position:absolute; inset:0;
  background:rgba(30,10,46,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  color:#fff; font-family:'Baloo 2',cursive; font-weight:700; font-size:.9rem;
}
.sf-item:hover .sf-overlay { opacity:1; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:768px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .social-dock { right: 12px; bottom: 140px; }
  .wa-float   { right: 14px; bottom: 16px; width:52px; height:52px; }
}
@media (max-width:480px) {
  .prod-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction:column; align-items:flex-start; }
}

/* ══════════════════════════════════════════════════════════
   3D INTERACTIVE LAYER — cursor-follow tilt + glare
══════════════════════════════════════════════════════════ */
.tilt3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.tilt3d.is-tilting {
  transition: transform .06s ease-out, box-shadow .3s ease;
  box-shadow: 0 32px 64px rgba(109,40,217,.24), 0 14px 28px rgba(194,24,91,.16);
  z-index: 3;
}
/* moving sheen of light */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 45%);
  z-index: 4;
}
.tilt3d.is-tilting .tilt-glare { opacity: .55; }

/* Hero visual — floats forward in 3D */
.vis-ring {
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
}
.vis-center { transform: translateZ(45px); }
.mini-card  { transition: box-shadow var(--tr); }

/* Category / how / testimonial cards get real depth on hover */
.cat-card, .how-card, .t-card, .prod-card { transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  .tilt3d, .vis-ring, .vis-center { transform: none !important; transition: none !important; }
  .tilt-glare { display: none; }
}