/** Shopify CDN: Minification failed

Line 2472:0 Unexpected "<"
Line 2549:0 Unexpected "<"

**/
/* ============================================
   TOYLVIA™ — Shopify Theme Stylesheet
   ============================================ */

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* === NOISE TEXTURE OVERLAY === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* === LAYOUT === */
.toylvia-main {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 1rem;
  background: linear-gradient(180deg,
    hsl(210 20% 98%) 0%, hsl(330 30% 97%) 15%, hsl(210 20% 98%) 30%,
    hsl(187 25% 96%) 45%, hsl(0 0% 100%) 60%, hsl(48 30% 97%) 75%,
    hsl(210 20% 98%) 90%, hsl(330 20% 97%) 100%
  );
}
@media (min-width: 768px) { .toylvia-main { padding: 0 2rem; } }
@media (min-width: 1024px) { .toylvia-main { padding: 0 3rem; } }
.max-store { max-width: 1280px; margin: 0 auto; }

/* === ANNOUNCEMENT BAR === */
.announcement-bar {
  height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to right, hsl(var(--toylvia-cyan)), hsl(var(--toylvia-pink)));
}
.announcement-bar__track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--primary-foreground));
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.announcement-bar__track span { margin: 0 3rem; }

/* === HEADER === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsla(210, 20%, 98%, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { height: 72px; width: auto; }
.site-header__nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) { .site-header__nav { display: flex; } }
.site-header__nav-link {
  padding: 0.5rem 1.25rem;
  font-size: 14.5px;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.1em;
  transition: color 0.3s;
  position: relative;
}
.site-header__nav-link:hover { color: hsl(var(--foreground)); }
.site-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: hsl(var(--primary));
  border-radius: 1px 1px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.site-header__nav-link:hover::after { transform: scaleX(1); }
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
    color: hsl(var(--muted-foreground));
  transition: background 0.2s;
}
.icon-btn:hover { background: hsl(var(--muted)); }

/* Dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  min-width: 180px;
  z-index: 50;
  opacity: 0;
  transform: scaleY(0.9) translateY(-4px);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.nav-dropdown:hover .nav-dropdown__menu {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  pointer-events: auto;
}
.nav-dropdown__link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  transition: all 0.2s;
}
.nav-dropdown__link:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}

/* === TRUST BADGES === */
.trust-badges {
  padding: 2.5rem 3rem;
}
@media (min-width: 768px) { .trust-badges { padding: 2.5rem 6rem; } }
@media (min-width: 1024px) { .trust-badges { padding: 2.5rem 8rem; } }
.trust-badges__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  font-size: 14px;
  cursor: default;
}
.trust-badge__icon {
  width: 28px;
  height: 28px;
  color: hsl(var(--secondary));
}
.trust-badge:hover .trust-badge__icon {
  color: hsl(var(--primary));
}
.trust-badge:hover span {
  color: hsl(var(--foreground));
}
.trust-badge span { text-transform: uppercase; }

/* === CATEGORY ARC === */
.category-arc__grid {
  position: relative;
  margin: 0 auto;
  transform-origin: top center;
  height: 260px;
 
}
@media (max-width: 639px) {
  .category-arc {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
       padding: 0 1.5rem; 
  }
  .category-arc .max-store {
    min-width: 680px;
  }
  .category-arc__grid {
    width: 680px;
    height: 260px;
transition: filter 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);    margin-bottom: 0;
    padding: 0 1.5rem;        /* add this */
    box-sizing: border-box;   /* add this */
  }
}
@media (min-width: 480px) { .category-arc__grid { transform: scale(0.58); margin-bottom: -110px; } }
@media (min-width: 640px) { .category-arc__grid { height: 330px; transform: scale(0.75); margin-bottom: 0; } }
@media (min-width: 768px) { .category-arc__grid { height: 330px; transform: scale(0.9); margin-bottom: 0; } }
@media (min-width: 1024px) { .category-arc__grid { height: 300px; transform: scale(1); margin-bottom: 0; } }

@media (min-width: 768px) { .category-arc__grid { height: 330px; transform: scale(0.9); } }
@media (min-width: 1024px) { .category-arc__grid { height: 300px; transform: scale(1); } }

.category-sphere {
  position: absolute;
  cursor: pointer;
  transition: filter 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.category-sphere:hover { z-index: 10; }


.category-sphere__ball {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, hsla(0,0%,100%,0.85) 0%, hsla(210,15%,97%,0.75) 25%, hsla(215,18%,91%,0.6) 50%, hsla(220,16%,82%,0.5) 75%, hsla(220,14%,74%,0.45) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1), height 1.8s cubic-bezier(0.4, 0, 0.2, 1), border-radius 1.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
}
.category-sphere:hover .category-sphere__ball {
  width: 175px;
  height: 100px;
  border-radius: 999px;
  background: hsl(var(--card));
  
}
.category-sphere__icon {
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1), filter 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-sphere:hover .category-sphere__icon {
  opacity: 0;
  transform: scale(0.5);
  filter: blur(6px);
}
.category-sphere__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
    font-size: 13px;
    font-weight: 700;
  letter-spacing: 0.22em;
  white-space: nowrap;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  opacity: 0;
  transform: translateX(10px) scale(0.96);
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, transform 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;  pointer-events: none;
}
.category-sphere:hover .category-sphere__label {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* Upper edge glow rim */
.category-sphere__rim {
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 50%;
  filter: blur(1.5px);
  opacity: 0.7;
}
.category-sphere:hover .category-sphere__rim { opacity: 0; }
/* Shadow beneath sphere */
.category-sphere__shadow {
  width: 65px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.06), transparent 70%);
  margin: 14px auto 0;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease;
  opacity: 0;
}
.category-sphere:hover .category-sphere__shadow { width: 100px; }
.category-sphere::after { display: none; }

/* === MULTIPLE SHADERS === */
/* Light source 1: under-lighting gradient (center at 50% 120%, below ball surface) */
.category-sphere__ball {
    background: radial-gradient(circle at 50% 120%, hsla(215,30%,92%,1) 0%, hsla(215,22%,80%,0.9) 25%, hsla(218,20%,66%,0.75) 60%, hsla(222,22%,50%,0.65) 85%, hsla(225,24%,38%,0.6) 100%);
      overflow: visible;
}

/* Light source 2: overhead highlight via ::before pseudo-element */
.category-sphere__ball::before {
    content: "";
      position: absolute;
        top: 1%;
          left: 5%;
            width: 90%;
              height: 90%;
                border-radius: 50%;
                  background: radial-gradient(circle at 50% 0px, rgba(255,255,255,0.88), rgba(255,255,255,0) 58%);
                    filter: blur(5px);
                      z-index: 2;
                        pointer-events: none;
}
/* === SHINIER === */
/* Light source 3: skewed specular glint via ::after */
.category-sphere__ball::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 10%;
  width: 40%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%);
  transform: rotate(-30deg) skewX(-10deg);
  filter: blur(3px);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* === WHITE / TRANSPARENT SPHERE OVERRIDE === */
.category-sphere__ball {
  background: radial-gradient(circle at 50% 120%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0.55) 60%, rgba(240,240,248,0.75) 85%, rgba(220,222,235,0.85) 100%);
}
/* === KEV_KAN_CODE NEUMORPHIC (adapted for spheres) === */
.category-sphere__ball {
  background: linear-gradient(165deg, rgba(255,255,255,1) 0%, rgba(232,234,237,1) 50%, rgba(220,222,226,1) 95%, rgba(180,182,196,1) 100%);
    box-shadow: -12px -10px 24px rgba(255,255,255,0.95), 12px 10px 24px rgba(148,150,176,0.55);
      transition: all 0.4s ease;
}
/* Hover stays the same */
.category-sphere:hover .category-sphere__ball {
  background: linear-gradient(165deg, rgba(255,255,255,1) 0%, rgba(232,234,237,1) 50%, rgba(220,222,226,1) 95%, rgba(180,182,196,1) 100%);
    box-shadow: -12px -10px 24px rgba(255,255,255,0.95), 12px 10px 24px rgba(148,150,176,0.55);
    }
    /* === PILL HOVER HEIGHT === */
  .category-sphere:hover .category-sphere__ball {
        height: 135px;
          width: 200px;
          }

/* ALL PRODUCTS button */
.all-products-btn {
  display: inline-flex;
        padding: 0.84rem 2.24rem;
  font-weight: 900;
      font-size: 14.56px;
  color: hsl(0 0% 100%);
  background: linear-gradient(180deg, hsla(330,100%,68%,0.85) 0%, hsla(330,100%,58%,0.75) 100%);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 2px 6px rgba(255,255,255,0.2), 0 0 16px hsla(330,100%,63%,0.25), 0 16px 50px rgba(0,0,0,0.35);
  transition: box-shadow 0.5s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
    border-radius: 9999px;
}
.all-products-btn:hover {
  transform: scale(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 2px 6px rgba(255,255,255,0.2), 0 0 45px hsla(187,85%,53%,1.0), 0 0 120px hsla(187,85%,53%,0.45), 0 16px 50px rgba(0,0,0,0.35);
}
/* === ALL PRODUCTS BTN: NEUMORPHIC + 10% LARGER === */
.all-products-btn { padding: 0.924rem 2.464rem; font-size: 16.016px; background: rgb(249,250,251); border: 2.5px solid transparent; color: rgb(255,42,148); box-shadow: -10px -8px 20px rgba(255,255,255,0.9), 10px 8px 20px rgba(148,150,176,0.45); }
.all-products-btn:hover { background: rgb(249,250,251); color: rgb(255,42,148); box-shadow: -10px -8px 20px rgba(255,255,255,0.6), 10px 8px 20px rgba(176, 148, 162, 0.4), rgb(33, 213, 237) 0px 0px 45px, rgba(33, 213, 237, 0.45) 0px 0px 120px; }

/* === PRODUCT CARDS === */
.product-card {
  background: hsl(var(--card));
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 3.5px solid transparent;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.04) perspective(800px) rotateX(2deg);
}
.product-card--cyan:hover { border-color: hsla(187, 85%, 53%, 0.3); }
.product-card--pink:hover { border-color: hsla(330, 100%, 63%, 0.3); }
.product-card--yellow:hover { border-color: hsla(48, 100%, 62%, 0.3); }

/* Gloss sweep */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 60%, transparent 100%);
  width: 60%;
  animation: cardGlossSweep 8s ease infinite;
  animation-delay: var(--shine-delay, 0s);
}

.product-card__image {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12)) grayscale(0);
  transition: filter 0.4s ease;
}
.product-grid:hover .product-card__image img { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12)) grayscale(1); }
.product-grid:hover .product-card:hover .product-card__image img { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12)) grayscale(0); }
.product-card__image--cyan { background: linear-gradient(to bottom right, hsl(187,60%,93%), hsl(187,70%,88%)); }
.product-card__image--pink { background: linear-gradient(to bottom right, hsl(330,60%,95%), hsl(330,60%,90%)); }
.product-card__image--yellow { background: linear-gradient(to bottom right, hsl(48,80%,93%), hsl(48,80%,85%)); }
.product-card__image--purple { background: linear-gradient(to bottom right, hsl(280,60%,93%), hsl(280,70%,88%)); }
.product-card__image--green { background: linear-gradient(to bottom right, hsl(140,60%,93%), hsl(140,65%,88%)); }
.product-card__image--orange { background: linear-gradient(to bottom right, hsl(25,80%,93%), hsl(25,100%,88%)); }

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 5;
}

.product-card__like {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsla(210, 20%, 98%, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
.product-card__like:hover { transform: scale(1.1); }
.product-card__like.liked svg { color: hsl(var(--destructive)); fill: hsl(var(--destructive)); }

.product-card__price {
  font-weight: 600;
  color: hsl(var(--primary));
  font-size: 1rem;
  transition: font-size 0.3s;
}
.product-card:hover .product-card__price { font-size: 1.15rem; }
.product-card__cta {
  padding: 0.56rem 1.12rem;
  border-radius: 0.75rem;
  font-size: 13.44px;
  font-weight: 800;
  transition: all 0.3s;
}
.product-card__cta--cyan { background: hsl(var(--secondary)); color: #fff; }
.product-card__cta--pink { background: hsl(var(--primary)); color: #fff; }
.product-card__cta--yellow { background: hsl(var(--accent)); color: #1a1a1a; }
.product-card__cta--purple { background: hsl(var(--toylvia-purple)); color: #fff; }
.product-card__cta--green { background: hsl(var(--toylvia-green)); color: #fff; }
.product-card__cta--orange { background: hsl(var(--toylvia-orange)); color: #fff; }
.product-card__cta:hover { transform: scale(1.05); box-shadow: 0 0 18px rgba(255, 255, 255, 0.45), 0 0 30px rgba(255, 255, 255, 0.225); }
.product-card__cta--cyan:hover { box-shadow: 0 0 18px hsla(187,85%,53%,0.75), 0 0 30px hsla(187,85%,53%,0.375); }
.product-card__cta--pink:hover { box-shadow: 0 0 18px hsla(330,100%,63%,0.75), 0 0 30px hsla(330,100%,63%,0.375); }
.product-card__cta--yellow:hover { box-shadow: 0 0 18px hsla(44,100%,62%,0.75), 0 0 30px hsla(44,100%,62%,0.375); }
.product-card__cta--purple:hover { box-shadow: 0 0 18px hsla(271,100%,63%,0.75), 0 0 30px hsla(271,100%,63%,0.375); }
.product-card__cta--green:hover { box-shadow: 0 0 18px hsla(145,65%,55%,0.75), 0 0 30px hsla(145,65%,55%,0.375); }
.product-card__cta--orange:hover { box-shadow: 0 0 18px hsla(25,100%,60%,0.75), 0 0 30px hsla(25,100%,60%,0.375); }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Bento layout */
.bento-grid {
  display: grid;
  gap: 1rem;
}
.bento-grid--left { grid-template-columns: 1fr 2fr 1fr; }
@media (max-width: 767px) { .bento-grid--left { grid-template-columns: 1fr; } }

/* Section title */
.section-title {
  font-size: 1.875rem;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
}
@media (min-width: 768px) { .section-title { font-size: 2.7rem; } }
.section-title--cyan { color: hsl(var(--toylvia-cyan)); background: hsla(187, 85%, 53%, 0.1); }
.section-title--pink { color: hsl(var(--toylvia-pink)); background: hsla(330, 100%, 63%, 0.1); }
.section-title--yellow { color: hsl(var(--toylvia-yellow)); background: hsla(48, 100%, 50%, 0.1); }
.section-title__line {
  margin-top: 0.75rem;
  height: 2px;
  width: 8rem;
  border-radius: 999px;
}
.section-title__line--cyan { background: linear-gradient(90deg, hsl(var(--toylvia-cyan)) 0%, transparent 100%); }
.section-title__line--pink { background: linear-gradient(90deg, hsl(var(--toylvia-pink)) 0%, transparent 100%); }
.section-title__line--yellow { background: linear-gradient(90deg, hsl(var(--toylvia-yellow)) 0%, transparent 100%); }
 .section-title--purple { color: hsl(var(--toylvia-purple)); background: hsla(280, 70%, 55%, 0.1); }
 .section-title--green { color: hsl(var(--toylvia-green)); background: hsla(140, 65%, 42%, 0.1); }
 .section-title--orange { color: hsl(var(--toylvia-orange)); background: hsla(25, 100%, 55%, 0.1); }
 .section-title__line--purple { background: linear-gradient(90deg, hsl(var(--toylvia-purple)) 0%, transparent 100%); }
 .section-title__line--green { background: linear-gradient(90deg, hsl(var(--toylvia-green)) 0%, transparent 100%); }
 .section-title__line--orange { background: linear-gradient(90deg, hsl(var(--toylvia-orange)) 0%, transparent 100%); }

/* SEE ALL button */
.see-all-btn {
  display: inline-flex;
  padding: 0.875rem 2.25rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid;
  transition: all 0.4s ease;
}
.see-all-btn--cyan { border-color: hsl(var(--toylvia-cyan)); color: hsl(var(--toylvia-cyan)); }
.see-all-btn--cyan:hover { background: hsl(var(--toylvia-cyan)); color: #fff; box-shadow: 0 0 20px 4px hsla(187,85%,53%,0.4); }
.see-all-btn--pink { border-color: hsl(var(--toylvia-pink)); color: hsl(var(--toylvia-pink)); }
.see-all-btn--pink:hover { background: hsl(var(--toylvia-pink)); color: #fff; box-shadow: 0 0 20px 4px hsla(330,100%,63%,0.4); }
.see-all-btn--yellow { border-color: hsl(var(--toylvia-yellow)); color: hsl(var(--toylvia-yellow)); }
.see-all-btn--yellow:hover { background: hsl(var(--toylvia-yellow)); color: #1a1a1a; box-shadow: 0 0 20px 4px hsla(48,100%,62%,0.4); }
.see-all-btn--purple { border-color: hsl(var(--toylvia-purple)); color: hsl(var(--toylvia-purple)); }
.see-all-btn--purple:hover { background: hsl(var(--toylvia-purple)); color: #fff; box-shadow: 0 0 20px 4px hsla(280,70%,55%,0.4); }
.see-all-btn--green { border-color: hsl(var(--toylvia-green)); color: hsl(var(--toylvia-green)); }
.see-all-btn--green:hover { background: hsl(var(--toylvia-green)); color: #fff; box-shadow: 0 0 20px 4px hsla(140,65%,42%,0.4); }
.see-all-btn--orange { border-color: hsl(var(--toylvia-orange)); color: hsl(var(--toylvia-orange)); }
.see-all-btn--orange:hover { background: hsl(var(--toylvia-orange)); color: #fff; box-shadow: 0 0 20px 4px hsla(25,100%,55%,0.4); }
.see-all-btn:hover { transform: scale(1.1); }

/* === NEWSLETTER === */
.newsletter {
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  padding: 4rem 2rem;
  text-align: center;
}
.newsletter__title {
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .newsletter__title { font-size: 2.25rem; } }
.newsletter__subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.newsletter__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.newsletter__social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: color 0.3s, border-color 0.3s;
}
.newsletter__social-link:hover {
  color: hsl(var(--primary));
  border-color: hsla(330,100%,63%,0.4);
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .newsletter__form { flex-direction: row; } }
.newsletter__input {
  flex: 1;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--background));
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.newsletter__input:focus {
  border-color: hsl(var(--secondary));
  box-shadow: 0 0 0 3px hsla(187,85%,53%,0.1);
}
.newsletter__btn {
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 800;
  font-size: 14px;
  transition: background 0.3s;
  white-space: nowrap;
}
.newsletter__btn:hover { background: hsla(187, 85%, 53%, 0.9); }

/* === FOOTER === */
.site-footer {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}
.site-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.site-footer__brand-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  display: block;
}
.site-footer__brand-name sup { font-size: 12px; opacity: 0.5; font-weight: 700; }
.site-footer__tagline {
  font-size: 14px;
  opacity: 0.5;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.site-footer__social-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.site-footer__social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsla(210, 20%, 98%, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.site-footer__social-icon:hover { background: hsla(210, 20%, 98%, 0.2); }
.site-footer__social-icon svg { width: 20px; height: 20px; opacity: 0.7; }
.site-footer__payment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-footer__payment-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: hsla(210, 20%, 98%, 0.1);
  font-size: 10px;
  opacity: 0.5;
  font-weight: 600;
}
.site-footer__col-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 1rem;
}
.site-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__links a {
  font-size: 14px;
  opacity: 0.5;
  font-weight: 500;
  transition: opacity 0.3s;
}
.site-footer__links a:hover { opacity: 1; }
.site-footer__bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-top: 1px solid hsla(210, 20%, 98%, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.35;
  font-weight: 500;
  gap: 0.5rem;
}

/* === CHAT WIDGET === */
.chat-widget {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9999;
}
.chat-widget__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, hsl(var(--secondary)), hsla(187,85%,53%,0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--secondary-foreground));
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: transform 0.3s;
}
.chat-widget__btn:hover { transform: scale(1.1); }
.chat-widget__panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 320px;
  background: hsl(var(--card));
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-widget__header {
  background: linear-gradient(to right, hsl(var(--secondary)), hsla(187,85%,53%,0.8));
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chat-widget__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsla(0,0%,100%,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.chat-widget__info { flex: 1; }
.chat-widget__name { font-size: 14px; font-weight: 800; color: hsl(var(--secondary-foreground)); }
.chat-widget__status { font-size: 11.5px; color: hsla(0,0%,100%,0.75); display: flex; align-items: center; gap: 0.375rem; }
.chat-widget__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }
.chat-widget__messages {
  padding: 1rem;
  min-height: 160px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.chat-msg { display: flex; gap: 0.5rem; align-items: flex-end; }
.chat-msg--user { flex-direction: row-reverse; }
.chat-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-msg__bubble {
  max-width: 220px;
  padding: 0.625rem 0.875rem;
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 1rem;
}
.chat-msg--bot .chat-msg__bubble {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-bottom-left-radius: 4px;
}
.chat-msg--user .chat-msg__bubble {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-bottom-right-radius: 4px;
}
.chat-widget__input-area {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--border));
}
.chat-widget__input {
  flex: 1;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 14px;
  outline: none;
  color: hsl(var(--foreground));
  transition: border-color 0.3s;
}
.chat-widget__input:focus { border-color: hsl(var(--secondary)); }
.chat-widget__send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}
.chat-widget__send:hover { background: hsla(187, 85%, 53%, 0.9); }

/* === SCROLL REVEAL === */
.js-ready .scroll-reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.94);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.25,0.1,0.25,1), transform 0.9s cubic-bezier(0.25,0.1,0.25,1), filter 0.7s cubic-bezier(0.25,0.1,0.25,1);
  will-change: opacity, transform, filter;
}
.js-ready .scroll-reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0px) !important;
}

/* === FLY-TO-CART === */
.fly-dot {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsl(var(--toylvia-pink));
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 8px hsla(330, 100%, 63%, 0.6);
}

/* === KEYFRAMES === */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes cardGlossSweep {
  0% { transform: translateX(-120%) rotate(25deg); }
  100% { transform: translateX(220%) rotate(25deg); }
}
@keyframes trustIconBounce {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.3) rotate(-12deg); }
  50% { transform: scale(0.9) rotate(8deg); }
  75% { transform: scale(1.15) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* === PRODUCT PAGE TRUST BADGES === */
.product-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border));
}

.product-trust-badges .trust-badge {
  font-size: 12px;
  gap: 0.5rem;
}

.product-trust-badges .trust-badge__icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 639px) {
  .product-trust-badges {
    justify-content: center;
    gap: 0.6rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

@keyframes likeBurst {
  0% { transform: rotate(var(--deg, 0deg)) translateY(-4px); opacity: 1; }
  100% { transform: rotate(var(--deg, 0deg)) translateY(-18px); opacity: 0; }
}
@keyframes cartBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-bump { animation: cartBump 0.4s ease-out; }
@keyframes likeBounceFull {
  0% { transform: scale(1); }
  25% { transform: scale(1.35); }
  50% { transform: scale(0.85); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes sphere-shine {
  0% { background-position: -200% center; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { background-position: 200% center; opacity: 0; }
}
@keyframes sphere-float-0 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sphere-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sphere-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sphere-float-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sphere-float-4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sphere-float-5 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes borderShineCyan {
  0% { border-color: hsla(187, 85%, 53%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  50% { border-color: hsla(187, 85%, 53%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(187, 85%, 53%, 0.15); }
  100% { border-color: hsla(187, 85%, 53%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
}
@keyframes borderShinePink {
  0% { border-color: hsla(330, 100%, 63%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  50% { border-color: hsla(330, 100%, 63%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(330, 100%, 63%, 0.15); }
  100% { border-color: hsla(330, 100%, 63%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
}
@keyframes borderShineYellow {
  0% { border-color: hsla(48, 100%, 62%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  50% { border-color: hsla(48, 100%, 62%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(48, 100%, 62%, 0.15); }
  100% { border-color: hsla(48, 100%, 62%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
}
@keyframes borderShinePurple {
    0% { border-color: hsla(280, 70%, 55%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
      50% { border-color: hsla(280, 70%, 55%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(280, 70%, 55%, 0.15); }
        100% { border-color: hsla(280, 70%, 55%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        }
        @keyframes borderShineGreen {
          0% { border-color: hsla(140, 65%, 42%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
            50% { border-color: hsla(140, 65%, 42%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(140, 65%, 42%, 0.15); }
              100% { border-color: hsla(140, 65%, 42%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
              }
              @keyframes borderShineOrange {
                0% { border-color: hsla(25, 100%, 55%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
                  50% { border-color: hsla(25, 100%, 55%, 0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 18px hsla(25, 100%, 55%, 0.15); }
                    100% { border-color: hsla(25, 100%, 55%, 0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
                    }


/* Border shine animation defaults */
.product-card--cyan { animation: borderShineCyan 8s ease infinite; }
.product-card--pink { animation: borderShinePink 8s ease infinite; }
.product-card--yellow { animation: borderShineYellow 8s ease infinite; }
.product-card--purple { animation: borderShinePurple 8s ease infinite; }
.product-card--green { animation: borderShineGreen 8s ease infinite; }
.product-card--orange { animation: borderShineOrange 8s ease infinite; }


/* Cart drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;
  background: hsl(var(--card));
  z-index: 100;
  box-shadow: -10px 0 40px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

/* Plexus canvas */
.plexus-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
  opacity: 0.6;
}

/* Utility */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-4 { gap: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

@media (max-width: 639px) {
  .category-arc { overflow-x: unset; }
  .category-arc .max-store { min-width: unset; }
  .category-arc__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 0.5rem;
    height: auto;
    width: 100%;
    transform: none;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 0 2rem;
  }
  .category-sphere {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 30%;
  }

  .category-sphere__ball {
    width: 70px;
    height: 70px;
  }
  .category-sphere__ball svg {
    width: 24px;
    height: 24px;
  }
}
@media (min-width: 768px) {
  .product-page-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
.product-description {
  font-size: 16px !important;
  line-height: 2 !important;
  color: #6b7280 !important;
  text-transform: none !important;
}
.product-description p { margin-bottom: 1rem; }
.product-description ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.product-description li { margin-bottom: 0.5rem; }
.product-description strong { color: #1a1a2e; }

/* === PRODUCT PAGE LAYOUT === */

.product-main {
  padding: 3rem 1rem;
}

.product-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .product-main__grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

/* LEFT SIDE */
.product-main__main-image img {
  width: 100%;
  border-radius: 1rem;
  background: #f8f8f8;
}

.product-main__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
}

.product-main__thumbs img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0.7;
}

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

/* RIGHT SIDE */
.product-main__vendor {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #222;
  margin-bottom: 0.5rem;
}

.product-main__title {
  font-size: 29px;
  font-weight: 800;
  margin-bottom: 1rem;
}

.product-main__price {
  font-size: 24px;
  color: #ff4fa3;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product-main__badges {
  display: flex;
  gap: 1rem;
  font-size: 13px;
  margin-bottom: 1.5rem;
}

.product-main__select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.product-main__cta {
  width: 100%;
  padding: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fa3, #ff7bbd);
  color: #fff;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
/* === STICKY ADD TO CART === */
.sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 0.75rem;
  display: none;
  z-index: 9999;
}

.sticky-cart button {
  width: 100%;
  padding: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff4fa3,#ff7bbd);
  color: #fff;
  font-weight: 800;
}

@media (max-width: 768px) {
  .sticky-cart { display: block; }
}
.product-main__description {
  margin-top: 2rem;
  line-height: 1.6;
  font-size: 14px;
  color: #444;
}

/* === PREMIUM PRODUCT DESCRIPTION === */

.product-main__description-full {
  max-width: 1100px;
  margin: 5rem auto 0;
  padding: 0 1.5rem;

  font-size: 18px;
  line-height: 1.9;
  color: #1a1a1a;
}

/* HEADLINES */
.product-main__description-full h2,
.product-main__description-full h3 {
  font-size: 26px;
  font-weight: 900;
  margin: 3rem 0 1.2rem;
  letter-spacing: 0.02em;
}

/* PARAGRAPHS */
.product-main__description-full p {
  margin-bottom: 1.4rem;
  font-weight: 500;
}

/* STRONG TEXT */
.product-main__description-full strong {
  font-weight: 800;
  color: #000;
}

/* LISTS */
.product-main__description-full ul {
  padding-left: 1.4rem;
  margin: 1.5rem 0;
}

.product-main__description-full li {
  margin-bottom: 0.7rem;
  line-height: 1.8;
}

/* SEPARATORS */
.product-main__description-full hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .product-main__description-full {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 3rem;
  }

  .product-main__description-full h2,
  .product-main__description-full h3 {
    font-size: 22px;
  }
}
/* === FORCE 1:1 PRODUCT IMAGE === */

.product-main__main-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* key line */
  background: #f6f6f6;
  border-radius: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

/* image inside */
.product-main__main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps full product visible */
}

/* thumbnails consistency */
.product-main__thumbs img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-main__back {
  position: relative;
  z-index: 20;

  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}

.product-main__back a {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  background: rgba(255,255,255,0.9);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

/* === CART BASE === */

.cart {
  padding: 3rem 1rem;
}

.cart__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* HEADER */
.cart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.cart__back {
  font-size: 14px;
  text-decoration: none;
  color: #555;
}

/* EMPTY */
.cart__empty {
  text-align: center;
  margin-top: 4rem;
}

.cart__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  background: #000;
  color: #fff;
  border-radius: 999px;
}

/* ITEMS */
.cart__item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.8rem;
}

.cart__img {
  width: 90px;
  border-radius: 0.5rem;
}

.cart__title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.cart__variant {
  font-size: 13px;
  color: #777;
  margin-bottom: 0.3rem;
}

.cart__price {
  font-size: 14px;
  margin-bottom: 0.4rem;
}

.cart__qty {
  width: 65px;
  padding: 0.3rem;
}

.cart__total {
  font-weight: 700;
}

/* FOOTER */
.cart__footer {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.cart__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.cart__note {
  font-size: 13px;
  color: #777;
}

.cart__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cart__update {
  padding: 0.6rem 1.2rem;
  background: #eee;
  border: none;
  border-radius: 0.4rem;
}

.cart__checkout {
  padding: 1rem 2rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff4fa3,#ff7bbd);
  color: #fff;
  font-weight: 800;
  border: none;
}

/* MOBILE */
@media (max-width: 768px) {
  .cart__item {
    grid-template-columns: 70px 1fr;
  }

  .cart__total {
    grid-column: span 2;
    text-align: right;
  }

  .cart__footer {
    flex-direction: column;
  }
}
.cart__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.cart__back-inline {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  text-align: center;
}

.cart__back-inline:hover {
  color: #000;
}
.cart__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cart__back {
  font-size: 14px;
  text-decoration: none;
  color: #555;
  white-space: nowrap;
}

.cart__back:hover {
  color: #000;
}

.cart__title {
  font-size: 24px;
  font-weight: 800;
}
/* === CART === */

.cart {
  padding: 3rem 1rem;
}

.cart__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* HEADER */
.cart__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cart__back {
  font-size: 14px;
  text-decoration: none;
  color: #555;
}

.cart__back:hover {
  color: #000;
}

.cart__title {
  font-size: 24px;
  font-weight: 800;
}

/* EMPTY */
.cart__empty {
  text-align: center;
  margin-top: 4rem;
}

.cart__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  background: #000;
  color: #fff;
  border-radius: 999px;
}

/* ITEMS */
.cart__item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.8rem;
}

.cart__img {
  width: 90px;
  border-radius: 0.5rem;
}

.cart__name {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.cart__variant {
  font-size: 13px;
  color: #777;
  margin-bottom: 0.3rem;
}

.cart__price {
  font-size: 14px;
  margin-bottom: 0.4rem;
}

.cart__qty {
  width: 65px;
  padding: 0.3rem;
}

.cart__line {
  font-weight: 700;
}

/* FOOTER */
.cart__footer {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.cart__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.cart__note {
  font-size: 13px;
  color: #777;
}

.cart__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cart__checkout {
  padding: 1rem 2rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff4fa3,#ff7bbd);
  color: #fff;
  font-weight: 800;
  border: none;
}

/* MOBILE */
@media (max-width: 768px) {
  .cart__item {
    grid-template-columns: 70px 1fr;
  }

  .cart__line {
    grid-column: span 2;
    text-align: right;
  }

  .cart__footer {
    flex-direction: column;
  }
}

/* === PRODUCT PAGE SPACING FIX === */

.product-main {
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .product-main {
    padding: 3rem 2rem;
  }
}

@media (min-width: 1024px) {
  .product-main {
    padding: 4rem 3rem;
  }
}

/* tighten inner grid spacing */
.product-main__grid {
  gap: 2.5rem;
}

/* description spacing */
.product-main__description-full {
  margin-top: 4rem;
}
/* === FORCE PRODUCT PAGE PADDING === */

.product-main {
  padding: 40px 20px !important;
}

@media (min-width: 768px) {
  .product-main {
    padding: 60px 40px !important;
  }
}

@media (min-width: 1024px) {
  .product-main {
    padding: 80px 60px !important;
  }
}

/* also ensure inner width behaves */
.product-main__grid {
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}
/* === FORCE PRODUCT IMAGE 1:1 === */

.product-main__main-image {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  background: #f5f5f5;
  border-radius: 1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

/* image behavior */
.product-main__main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* change to cover if you want full fill */
}
/* nuclear override */
.product-main img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}
.cart-drawer {
  position: fixed;
  right: -400px;
  top: 0;
  width: 400px;
  height: 100%;
  background: #fff;
  z-index: 9999;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  right: 0;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 9998;
}

.cart-overlay.open {
  display: block;
}

.cart-drawer__items {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}
/* === KIDS FRIENDLY TYPOGRAPHY FIX === */

body {
  font-family: "Nunito", "Poppins", system-ui, sans-serif;
}

/* softer titles */
.product-main__title {
  font-weight: 700;
  letter-spacing: 0;
}

/* description feel */
.product-main__description,
.product-main__description-full {
  font-size: 17px;
  line-height: 1.8;
  color: #444;
  font-weight: 400;
}

/* headings inside description */
.product-main__description-full h2,
.product-main__description-full h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

/* remove aggressive bold feeling */
strong {
  font-weight: 600;
}

/* buttons less harsh */
.product-main__cta {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* nav less robotic */
.site-header__nav-link {
  letter-spacing: 0.05em;
  font-weight: 500;
}

#cartDrawerItems div[style*="color:#ff4fa3"] {
  display: inline-block;
  background: rgba(255, 79, 163, 0.1); /* Very light pink background */
  padding: 2px 6px;
  border-radius: 4px;
  margin: 4px 0;
}

/* === MOBILE SPHERE & BUTTON ADJUSTMENTS === */
@media (max-width: 639px) {
  .category-sphere__ball {
      width: 55px !important;
          height: 55px !important;
            }
              .category-sphere__ball svg {
                  width: 20px !important;
                      height: 20px !important;
                        }
                          .category-sphere__shadow {
                              width: 50px;
                                }
                                  .all-products-btn__wrapper {
                                      margin-top: 1.5rem !important;
                                          padding-bottom: 0.5rem;
                                            }
                                            }

/* === COLLECTION BACK BUTTON === */
.collection-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 2px solid;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 1.5rem;
}
.collection-back-btn .back-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  display: inline-block;
}
.collection-back-btn:hover .back-arrow {
  transform: translateX(-3px);
}
.collection-back-wrapper {
  margin-bottom: 0.5rem;
}

/* pink pages: building-blocks, toy-blasters, all-products */
.collection-back-btn--pink {
  border-color: hsl(var(--toylvia-pink));
  color: hsl(var(--toylvia-pink));
}
.collection-back-btn--pink:hover {
  background: hsl(var(--toylvia-pink));
  color: #fff;
  transform: translateX(-4px);
  box-shadow: 4px 4px 16px hsla(330, 100%, 63%, 0.35);
}

/* yellow pages: collectibles, plush-toys */
.collection-back-btn--yellow {
  border-color: hsl(var(--toylvia-yellow));
  color: hsl(44, 100%, 40%);
}
.collection-back-btn--yellow:hover {
  background: hsl(var(--toylvia-yellow));
  color: #1a1a1a;
  transform: translateX(-4px);
  box-shadow: 4px 4px 16px hsla(48, 100%, 62%, 0.4);
}

/* cyan pages: vehicles, puzzles-iq */
.collection-back-btn--cyan {
  border-color: hsl(var(--toylvia-cyan));
  color: hsl(87, 85%, 38%);
}
.collection-back-btn--cyan:hover {
  background: hsl(var(--toylvia-cyan));
  color: #fff;
  transform: translateX(-4px);
  box-shadow: 4px 4px 16px hsla(187, 85%, 53%, 0.35);
}

/* ===== SPHERE-STYLE BUTTON SHADOWS ===== */
/* Grab It / product CTA buttons — always visible shadow, no hover needed */
.product-card__cta {
  box-shadow: rgba(255,255,255,0.28) 0px 1px 5px 0px inset, rgba(0,0,0,0.20) 0px 0px 22px 0px, rgba(0,0,0,0.12) 0px 5px 16px 0px;
  }
  /* SEE ALL outline buttons */
  .see-all-btn {
    box-shadow: rgba(255,255,255,0.22) 0px 1px 4px 0px inset, rgba(0,0,0,0.16) 0px 0px 18px 0px, rgba(0,0,0,0.09) 0px 4px 12px 0px;
    }
    /* Newsletter subscribe button */
    .newsletter__btn {
      box-shadow: rgba(255,255,255,0.28) 0px 1px 5px 0px inset, rgba(0,0,0,0.20) 0px 0px 22px 0px, rgba(0,0,0,0.12) 0px 5px 16px 0px;
      }
      /* Collection back buttons */
      .collection-back-btn {
        box-shadow: rgba(255,255,255,0.22) 0px 1px 4px 0px inset, rgba(0,0,0,0.16) 0px 0px 18px 0px, rgba(0,0,0,0.09) 0px 4px 12px 0px;
        }

        /* ===== SUBTLE DOT TEXTURE ON WHITE SECTIONS ===== */
        /* Adds a light dot grid to white/light background areas for a modern, youthful feel */
        .featured-collection {
          background-image: radial-gradient(circle, rgba(175,155,210,0.17) 1.2px, transparent 1.2px);
            background-size: 26px 26px;
            }
            .trust-badges {
              background-image: radial-gradient(circle, rgba(175,155,210,0.14) 1.1px, transparent 1.1px);
                background-size: 26px 26px;
                }
                .newsletter {
                  background-image: radial-gradient(circle, rgba(175,155,210,0.13) 1.1px, transparent 1.1px);
                    background-size: 26px 26px;
                    }
                    .footer__inner {
                      background-image: radial-gradient(circle, rgba(175,155,210,0.10) 1px, transparent 1px);
                        background-size: 26px 26px;
                        }


/* Main background image */
body {
  background-image: url('/cdn/shop/files/main-background.png?v=1775991437');
    background-size: contain;
      background-position: center top;
        background-repeat: no-repeat;
          background-attachment: fixed;
          }

          /* ── Per-group product card hover glow ── */

          /* Pink cards → cyan glow */
          .product-card--pink:hover {
                box-shadow: 0 0 22px 6px hsla(187,85%,53%,0.55), 0 0 50px 12px hsla(187,85%,53%,0.25), 0 8px 32px rgba(0,0,0,0.1);
            }

            /* Cyan cards → yellow glow */
            .product-card--cyan:hover {
                  box-shadow: 0 0 22px 6px hsla(48,100%,62%,0.6), 0 0 50px 12px hsla(48,100%,62%,0.28), 0 8px 32px rgba(0,0,0,0.1);
              }

              /* Yellow cards → pink glow */
              .product-card--yellow:hover {
                    box-shadow: 0 0 22px 6px hsla(330,100%,63%,0.55), 0 0 50px 12px hsla(330,100%,63%,0.25), 0 8px 32px rgba(0,0,0,0.1);
                }

                /* === MOBILE FIXES === */
                @media (max-width: 639px) {
                  .category-arc__grid { padding: 1rem 1rem 0.5rem; box-sizing: border-box; }
                    .all-products-btn__wrapper { padding: 0 1rem 1.5rem; box-sizing: border-box; }
                      .category-sphere:hover .category-sphere__ball { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, hsla(0,0%,100%,0.85) 0%, hsla(210,15%,97%,0.75) 25%, hsla(215,18%,91%,0.6) 50%, hsla(220,16%,82%,0.5) 75%, hsla(220,14%,74%,0.45) 100%); box-shadow: none; }
                        .category-sphere:hover .category-sphere__icon { opacity: 1; transform: none; filter: none; }
                          .category-sphere:hover .category-sphere__label { opacity: 0; }
                            .category-sphere:hover .category-sphere__rim { opacity: 0.7; }
                              .category-sphere:hover .category-sphere__shadow { width: 65px; }
                                .all-products-btn:hover { transform: none; box-shadow: -10px -8px 20px rgba(255,255,255,0.9), 10px 8px 20px rgba(148,150,176,0.45); }
                                }

                                /* === MOBILE LAYOUT FIXES === */
                                @media (max-width: 639px) {
                                  .all-products-btn__wrapper { padding: 0 1rem 0.5rem; }
                                    .trust-badges { padding: 1.5rem 1rem; }
                                      .trust-badges__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; justify-items: start; }
                                        .section-title { text-align: center; display: block; }
                                          .section-title__line { margin-left: auto; margin-right: auto; }
                                            .product-grid { grid-template-columns: 1fr; }
                                            }

/* === PRODUCT CARD BADGE COLORS === */
/* === CATEGORY SPHERE HOVER GLOW === */
.category-sphere:hover .category-sphere__ball {  }
.product-card__badge[data-badge="best-seller"] { background: linear-gradient(135deg, #ff2a94, #ff6ec4); }
.product-card__badge[data-badge="new"]         { background: linear-gradient(135deg, #22c55e, #4ade80); }
.product-card__badge[data-badge="sale"]        { background: linear-gradient(135deg, #ef4444, #f87171); }
.product-card__badge[data-badge="award"]       { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.product-card__badge[data-badge="top pick"]    { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.product-card__badge[data-badge="trending"]    { background: linear-gradient(135deg, #f97316, #fb923c); }
.product-card__badge[data-badge="hot"]         { background: linear-gradient(135deg, #dc2626, #f97316); }

/* === GRADIENT BORDER: ALL PRODUCTS BUTTON === */
.all-products-btn { background: linear-gradient(rgb(249,250,251), rgb(249,250,251)) padding-box, linear-gradient(135deg, #ff2994, #21d5ed) border-box; }

      /* CTA buttons: soft scale bounce only */
      @keyframes ctaSoftBounce {
        0%   { transform: scale(1);    }
          45%  { transform: scale(1.03); }
            100% { transform: scale(1);    }
            }
            .product-card__cta {
              animation: ctaSoftBounce 2.6s ease infinite !important;
              }
              .product-card__cta:hover {
                animation: none !important;
                }

                /* ALL-PRODUCTS button: black text, 10% larger, no idle anim, stroke hidden at rest shows on hover */
                .all-products-btn {
                  color: rgb(12, 12, 12) !important;
                    letter-spacing: normal !important;
                      animation: none !important;
                        padding: 1.016rem 2.710rem !important;
                          font-size: 17.618px !important;
                            background:
                                linear-gradient(rgb(249, 250, 251), rgb(249, 250, 251)) padding-box,
                                    linear-gradient(135deg, transparent, transparent) border-box !important;
                                      .all-products-btn:hover {
                                        color: rgb(12, 12, 12) !important;
border: 1px solid transparent !important;
background:
  linear-gradient(rgb(249, 250, 251), rgb(249, 250, 251)) padding-box,
  linear-gradient(135deg, rgb(255, 41, 148), rgb(33, 213, 237)) border-box !important;
box-shadow: none !important;
transform: scale(1.12) !important;
                                      }}
                                                      /* Sphere ripple bounce animation */
                                                      @keyframes sphereRipplePop {
                                                        0%   { transform: scale(1);     }
                                                          30%  { transform: scale(1.05);  }
                                                            60%  { transform: scale(0.975); }
                                                              80%  { transform: scale(1.018); }
                                                                100% { transform: scale(1);     }
                                                                }
                                                                .category-sphere .category-sphere__ball.rippling {
                                                                  animation: sphereRipplePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
                                                                  }
                                                                        .category-arc__grid:has(.category-sphere:hover) .category-sphere:hover {
                                                                            transform: scale(1);
                                                                              transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
                                                                              }
                                                                  
                                                              

/* === VARIANT OPTION BUTTONS — NEUMORPHISM === */

.product-variants {
  margin-bottom: 1.25rem;
}

.product-variants__group {
  margin-bottom: 1.1rem;
}

.product-variants__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.65rem;
}

.product-variants__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-variants__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  background: #f9fafb;
  color: #555;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease, background 0.15s ease;
  box-shadow:
    5px 5px 12px rgba(0,0,0,0.09),
    -5px -5px 12px rgba(255,255,255,0.95);
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.product-variants__btn:hover:not(.disabled):not(.selected) {
  box-shadow:
    7px 7px 16px rgba(0,0,0,0.11),
    -7px -7px 16px rgba(255,255,255,0.98);
  transform: translateY(-1px);
  color: #222;
}

.product-variants__btn:not(.disabled):active {
  box-shadow:
    inset 3px 3px 8px rgba(0,0,0,0.11),
    inset -3px -3px 8px rgba(255,255,255,0.85);
  transform: translateY(0);
}

.product-variants__btn.selected {
  box-shadow:
    inset 4px 4px 9px rgba(0,0,0,0.11),
    inset -4px -4px 9px rgba(255,255,255,0.88);
  background: #f1f3f5;
  color: hsl(var(--toylvia-pink));
  padding-bottom: 16px;
}

.product-variants__btn.selected::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--toylvia-pink));
}

.product-variants__btn.disabled:not(.selected) {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
  color: #bbb;
  box-shadow:
    2px 2px 5px rgba(0,0,0,0.05),
    -2px -2px 5px rgba(255,255,255,0.75);
}

.product-variants__btn.disabled.selected {
  cursor: not-allowed;
}


/* ========================================
   NEUMORPHIC QUANTITY FIELD
   ======================================== */

.product-quantity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.product-quantity__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  min-width: 28px;
}

.product-quantity__controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f0f0f3;
  border-radius: 50px;
  padding: 5px;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.10),
    -6px -6px 14px rgba(255, 255, 255, 0.85);
}

.product-quantity__btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #f0f0f3;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  color: hsl(var(--toylvia-pink, 330 100% 63%));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.12),
    -4px -4px 10px rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.product-quantity__btn:hover {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.14),
    -5px -5px 12px rgba(255, 255, 255, 0.95);
  color: hsl(var(--toylvia-pink, 330 100% 63%) / 0.85);
}

.product-quantity__btn:active {
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.12),
    inset -3px -3px 7px rgba(255, 255, 255, 0.85);
  transform: scale(0.95);
}

.product-quantity__input {
  width: 56px;
  height: 44px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}

.product-quantity__input::-webkit-inner-spin-button,
.product-quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}



/* ========================================
   NEUMORPHIC TRUST BADGES - PRODUCT PAGE (SINGLE ROW)
   ======================================== */

.product-trust-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
  overflow: visible;
}

.product-trust-badges .trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444;
  background: #ebebee;
  padding: 8px 10px;
  border-radius: 50px;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.13),
    -5px -5px 12px rgba(255, 255, 255, 0.95);
  transition: box-shadow 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-trust-badges .trust-badge:hover {
  box-shadow:
    6px 6px 15px rgba(0, 0, 0, 0.15),
    -6px -6px 15px rgba(255, 255, 255, 1);
}

.product-trust-badges .trust-badge__icon {
  width: 15px;
  height: 15px;
  color: hsl(var(--toylvia-pink, 330 100% 63%));
  stroke: hsl(var(--toylvia-pink, 330 100% 63%));
  flex-shrink: 0;
}


/* ========================================
   NEUMORPHIC ADD TO CART BUTTON
   ======================================== */

.product-main__cta {
  width: 100%;
  padding: 1.1rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #111;
  background: #f0f0f3;
  box-shadow:
    7px 7px 18px rgba(0, 0, 0, 0.12),
    -7px -7px 18px rgba(255, 255, 255, 0.92);
  transition: box-shadow 0.18s ease, transform 0.12s ease;
  position: relative;
  overflow: hidden;
}

.product-main__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.20) 0%, transparent 60%);
  pointer-events: none;
}

.product-main__cta:hover {
  box-shadow:
    9px 9px 22px rgba(0, 0, 0, 0.14),
    -9px -9px 22px rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
}

.product-main__cta:active {
  box-shadow:
    inset 5px 5px 12px rgba(0, 0, 0, 0.10),
    inset -5px -5px 12px rgba(255, 255, 255, 0.85);
  transform: translateY(0px);
}
/* --- Neumorphic Cart & Black Text Fix --- */

/* --- FINAL NEUMORPHIC CART FIX --- */


/* 2. Neumorphic Quantity Buttons (+ and -) */
#MainContent a:contains("+"), 
#MainContent a:contains("−"), 
#MainContent a:contains("-") {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08), -4px -4px 8px rgba(255, 255, 255, 1) !important;
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    margin: 5px !important;
    border: none !important;
}

/* 3. Neumorphic Quantity Number (Recessed look) */
#MainContent span:has(+ a:contains("+")),
#MainContent a:contains("−") + span,
#MainContent a:contains("-") + span {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 32px !important;
    background: #f8f8f8 !important;
    border-radius: 8px !important;
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 1) !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* 4. Neumorphic Remove Button */
#MainContent a:contains("REMOVE") {
    color: #000000 !important;
    background: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06), -4px -4px 8px rgba(255, 255, 255, 0.9) !important;
    margin-left: 15px !important;
}

/* 5. Neumorphic Checkout Button (Centered & Grey) */
#MainContent a[href*="checkout"], 
#MainContent button[name="checkout"] {
    background: #f0f0f0 !important;
    color: #000000 !important;
    border-radius: 16px !important;
    padding: 18px 30px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    border: none !important;
    box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff !important;
}

.section-title--pink, .section-title--cyan, .section-title--yellow { background: none !important; }
.see-all-btn { background:rgb(255, 255, 255) !important; border: none !important; transition: box-shadow 0.3s ease, transform 0.3s ease !important; }
.see-all-btn--pink { box-shadow: 6px 6px 14px rgba(255,66,161,0.25), -6px -6px 14px #ffffff !important; color: #ff42a1 !important; }
.see-all-btn--cyan { box-shadow: 6px 6px 14px rgba(33,213,237,0.25), -6px -6px 14px #ffffff !important; color: #21d5ed !important; }
.see-all-btn--yellow { box-shadow: 6px 6px 14px rgba(255,204,0,0.25), -6px -6px 14px #ffffff !important; color: #ffd806 !important; }
.see-all-btn:hover { box-shadow: 3px 3px 8px #d1d1d1, -3px -3px 8px #ffffff !important; transform: translateY(-2px) !important; }
.see-all-btn { font-size: 16px !important; padding: 20px 41px 16px 41px !important; }
.product-main__cta { padding-top: 20px !important; padding-bottom: 20px !important; }


<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--pink:hsl(330,100%,63%);--cyan:hsl(187,85%,53%);--yellow:hsl(48,100%,62%);
--bg:hsl(210,20%,98%);--text:hsl(215,40%,15%);--text-muted:hsl(215,15%,49%);
--card:hsl(0,0%,100%);--border:hsl(214,25%,92%);--radius:0.75rem;
}
.toylvia-blog-wrapper {
  background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  text-transform:uppercase; line-height:1.5;
  position: relative;
}

.toylvia-blog-wrapper::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px 256px;
}
a{text-decoration:none;color:inherit}



/* Container */
.container{max-width:1280px;margin:0 auto;padding:2rem 1.5rem;position:relative;z-index:1}

/* Page Title */
.page-title{text-align:center;margin-bottom:2.5rem}
.page-title h1{font-size:2.5rem;font-weight:800;letter-spacing:3px}
.page-title h1 span{color:var(--pink)}
.page-title p{color:var(--text-muted);font-size:.8rem;letter-spacing:1.5px;margin-top:.5rem}

/* Featured Article */
.featured{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);margin-bottom:3rem;display:grid;grid-template-columns:1fr 1fr;min-height:420px;transition:border-color .4s,box-shadow .4s}
.featured:hover{border-color:var(--pink);box-shadow:0 0 20px hsla(330,100%,63%,.12)}
.featured-img{background:linear-gradient(135deg,hsla(330,100%,63%,.15),hsla(187,85%,53%,.15));display:flex;align-items:center;justify-content:center;min-height:300px;position:relative;overflow:hidden}
.featured-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 50%,transparent);width:60%;animation:glossSweep 8s ease infinite}
.featured-img .placeholder{color:var(--text-muted);font-size:.75rem;letter-spacing:2px}
.featured-body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.badge{display:inline-block;background:var(--pink);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:2px;padding:.3rem .8rem;border-radius:999px;margin-bottom:1rem;width:fit-content}
.badge.cyan{background:var(--cyan)}
.badge.yellow{background:var(--yellow);color:var(--text)}
.featured-body h2{font-size:1.6rem;font-weight:800;letter-spacing:2px;line-height:1.3;margin-bottom:.75rem}
.featured-body .excerpt{color:var(--text-muted);font-size:.78rem;letter-spacing:.5px;text-transform:none;line-height:1.7;margin-bottom:1.25rem}
.featured-body .meta{color:var(--text-muted);font-size:.65rem;letter-spacing:1.5px}
.read-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--pink);font-size:.7rem;font-weight:700;letter-spacing:2px;margin-top:auto;transition:gap .3s}
.read-more:hover{gap:.8rem}
.read-more::after{content:'→'}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .4s,box-shadow .4s}
.card:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 12px 32px rgba(0,0,0,.08),0 0 16px hsla(187,85%,53%,.1)}
.card-img{background:linear-gradient(135deg,hsla(187,85%,53%,.12),hsla(48,100%,62%,.12));height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 50%,transparent);width:60%;animation:glossSweep 8s ease infinite;animation-delay:var(--d,0s)}
.card-img .placeholder{color:var(--text-muted);font-size:.65rem;letter-spacing:2px}
.card-body{padding:1.25rem}
.card-body h3{font-size:.85rem;font-weight:700;letter-spacing:1.5px;margin-bottom:.5rem;line-height:1.4}
.card-body .excerpt{color:var(--text-muted);font-size:.72rem;text-transform:none;line-height:1.6;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-body .meta{color:var(--text-muted);font-size:.6rem;letter-spacing:1.5px;display:flex;justify-content:space-between;align-items:center}

/* Footer */
.footer{border-top:1px solid var(--border);padding:2rem;text-align:center;margin-top:3rem;color:var(--text-muted);font-size:.65rem;letter-spacing:2px}
.footer span{color:var(--pink)}

/* Animations */
@keyframes glossSweep{0%{transform:translateX(-120%) rotate(25deg)}100%{transform:translateX(220%) rotate(25deg)}}

/* Responsive */
@media(max-width:900px){
.featured{grid-template-columns:1fr}
.grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.grid{grid-template-columns:1fr}
.featured-body{padding:1.5rem}
.page-title h1{font-size:1.6rem}
}
</style>

.card-btn {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: 0.924rem 2.464rem;
  font-weight: 900;
  font-size: 16px;
  background: rgb(249,250,251);
  color: rgb(255,42,148);
  border: 2.5px solid transparent;
  border-radius: 9999px;
  box-shadow: -10px -8px 20px rgba(255,255,255,0.9), 10px 8px 20px rgba(148,150,176,0.45);
  text-transform: uppercase;
  transition: all 0.4s ease;
}

.card:hover .card-btn {
  background: rgb(249,250,251);
  color: rgb(255,42,148);
  box-shadow: -10px -8px 20px rgba(255,255,255,0.6), 
              10px 8px 20px rgba(176, 148, 162, 0.4), 
              rgb(33, 213, 237) 0px 0px 45px;
  transform: scale(1.05);
}
.card, .featured {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
/* Custom See-All Button Styles */
@keyframes flash-release {
  0% { border-color: var(--hint-color); border-width: 0.5px; opacity: 1; transform: scale(0.98); }
  40% { border-color: var(--hint-color); border-width: 0.5px; opacity: 0.6; transform: scale(1.01); }
  100% { border-color: transparent; border-width: 0.5px; opacity: 1; transform: scale(1); }
}

.see-all-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10 !important;
  background-color: transparent !important;
  color: #0c0c0c !important;
  padding: 16px 43px !important;
  border-radius: 9999px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border: 0.5px solid transparent !important;
  box-shadow: -10px -8px 20px 0px rgba(255, 255, 255, 1), 10px 8px 20px 0px rgba(148, 150, 176, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.see-all-btn:hover {
  border: 0.5px solid var(--hint-color) !important;
  color: var(--hint-color) !important;
  transform: scale(0.98) !important;
  box-shadow: none !important;
  background-color: transparent !important;
  transition: all 0.1s ease-out !important;
}

.see-all-btn:not(:hover) {
  animation: flash-release 0.4s ease-out;
}

.see-all-btn--pink { --hint-color: #ff42a1; }
.see-all-btn--cyan { --hint-color: #00aeef; }
.see-all-btn--yellow { --hint-color: #ffc107; }
/* Target the button with its specific class */
a.all-products-btn {
  /* 1. Base Styles & Dimensions */
  display: inline-flex;
  position: relative;
  padding: 1.016rem 2.710rem;
  border-radius: 9999px; /* Ensures the pill shape */
  border: none;
  background-color: rgb(249, 250, 251);
  
  /* 2. Enhanced High-Brightness Shadows (Upper Edge Highlights) */
  box-shadow: 
    -10px -8px 20px rgba(255, 255, 255, 1), 
    10px 8px 20px rgba(148, 150, 176, 0.45),
    inset 0px 4px 8px rgba(255, 255, 255, 1), 
    inset 0px 1px 3px rgba(255, 255, 255, 1),
    inset 0px 2px 10px rgba(255, 255, 255, 0.9);

  /* 3. Smooth Animation Setup */
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  cursor: pointer;
  text-decoration: none;
}

/* 4. Hover State: "Pressed" effect + Shorter/Subtle Shadows */
a.all-products-btn:hover {
  transform: translateY(2px);
  box-shadow: 
    -4px -3px 10px rgba(255, 255, 255, 0.6), 
    4px 3px 10px rgba(148, 150, 176, 0.25),
    inset 0px 2px 4px rgba(255, 255, 255, 0.8);
}

/* 5. Active State: Deep "Pressed" effect when clicked */
a.all-products-btn:active {
  transform: translateY(4px);
}
/* -----------------------------------------------------------
   1. ANIMATIONS (Circulating Highlights & Color Shift)
----------------------------------------------------------- */
@keyframes circulate-shadows-color {
  0% {
    box-shadow: -10px -8px 20px rgba(255, 255, 255, 0.9), 10px 8px 20px rgba(148, 150, 176, 0.45), inset 0px 4px 8px rgba(255, 255, 255, 1);
    background-color: rgb(249, 250, 251);
  }
  25% {
    box-shadow: 8px -10px 20px rgba(230, 240, 255, 0.9), -8px 10px 20px rgba(110, 142, 251, 0.3), inset 4px 0px 8px rgba(235, 245, 255, 1);
    background-color: rgb(245, 248, 255);
  }
  50% {
    box-shadow: 10px 8px 20px rgba(255, 240, 255, 0.9), -10px -8px 20px rgba(167, 119, 227, 0.3), inset 0px -4px 8px rgba(255, 245, 255, 1);
    background-color: rgb(253, 248, 255);
  }
  75% {
    box-shadow: -8px 10px 20px rgba(240, 255, 245, 0.9), 8px -10px 20px rgba(100, 200, 150, 0.3), inset -4px 0px 8px rgba(245, 255, 250, 1);
    background-color: rgb(248, 255, 252);
  }
  100% {
    box-shadow: -10px -8px 20px rgba(255, 255, 255, 0.9), 10px 8px 20px rgba(148, 150, 176, 0.45), inset 0px 4px 8px rgba(255, 255, 255, 1);
    background-color: rgb(249, 250, 251);
  }
}

/* -----------------------------------------------------------
   2. ALL PRODUCTS BUTTON (Universal Styles)
----------------------------------------------------------- */
a.all-products-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.016rem 2.710rem !important;
  border-radius: 9999px !important;
  border: none !important;
  font-weight: 500 !important;
  font-size: 17.618px !important;
  text-decoration: none !important;
  color: #000 !important;
  cursor: pointer !important;
  animation: circulate-shadows-color 12s linear infinite !important;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
}

a.all-products-btn:hover {
  transform: translateY(2px) !important;
  animation-play-state: paused !important;
}

a.all-products-btn:active {
  transform: translateY(4px) !important;
}

/* -----------------------------------------------------------
   3. MOBILE CATEGORY LINKS (920px Breakpoint)
----------------------------------------------------------- */
@media (max-width: 920px) {
  .nav-dropdown__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2rem !important;
    margin: 0.5rem !important;
    border-radius: 9999px !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #000 !important;
    animation: circulate-shadows-color 12s linear infinite !important;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
  }

  .nav-dropdown__link:hover {
    transform: translateY(2px) !important;
    animation-play-state: paused !important;
  }
  
  .nav-dropdown__link:active {
    transform: translateY(4px) !important;
  }
}

/* -----------------------------------------------------------
   4. TRUST ICONS LAYOUT
----------------------------------------------------------- */
/* Tablet & Mobile (920px and below) */
@media (max-width: 920px) {
  .trust-badges__inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    padding: 1.5rem 1rem !important;
    justify-items: center !important;
    align-items: center !important;
    overflow-x: visible !important;
    margin: 0 !important;
  }

  .trust-badge {
    text-align: center !important;
    font-size: 0.9rem !important;
    flex: 0 1 auto !important;
  }
}

/* Desktop (Above 920px) */
@media (min-width: 921px) {
  .trust-badges__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 3rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}
/* 1. REMOVE ANIMATIONS FROM TRUST BADGES */
.trust-badge, 
.trust-badge *, 
.trust-badge__icon, 
.trust-badge span {
  animation: none !important;
  transition: none !important;
}

/* 2. ALIGN & FIX TRUST BADGE CONTAINER */
.trust-badges__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1212px !important; /* Matches your category grid width */
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 20px !important;
  overflow: hidden !important;
  height: auto !important;
}

/* 3. REMOVE HOVER SHADOWS & LIFT FROM PRODUCTS */
.product-card:hover,
.product-card__cta:hover,
.product-card__cta--cyan:hover,
.product-card__cta--pink:hover,
.product-card__cta--yellow:hover,
.product-card__cta--purple:hover,
.product-card__cta--green:hover,
.all-products-btn:hover,
.category-sphere:hover .category-sphere__ball {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transform: none !important;
  background-image: none !important; /* Removes sphere hover glow */
}
/* Desktop: Full Width, 1 Row */
.trust-badges__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important; /* Spreads them to full width */
  align-items: center !important;
  width: 100% !important;
  max-width: 1212px !important;
  margin: 0 auto !important;
  gap: 20px !important;
}

/* Individual badge spacing/alignment */
.trust-badge {
  display: flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  gap: 0.75rem !important;
}

/* Mobile: Exactly 2 Rows, Centered */
@media (max-width: 768px) {
  .trust-badges__inner {
    justify-content: center !important;
    gap: 30px 10% !important; /* Vertical gap 30px, Horizontal gap 10% */
  }

  .trust-badge {
    flex: 0 0 40% !important; /* 2 per row (40% + 40% + gap) */
    min-width: 140px !important; /* Prevents text from squishing too much */
    justify-content: flex-start !important;
  }
}
/* 1. COMPLETELY DISABLE ALL ANIMATIONS, TRANSITIONS, & TRANSFORMS */
.trust-badges,
.trust-badges *,
.trust-badge,
.trust-badge *,
.trust-badge__icon,
.trust-badge__icon *,
.trust-badge span,
.trust-badge__text {
  animation: none !important;
  animation-name: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* 2. SPECIFICALLY DISABLE HOVER EFFECTS (ANIMATIONS, COLOR CHANGES, LETTER SPACING) */
.trust-badge:hover,
.trust-badge:hover *,
.trust-badge:hover .trust-badge__icon,
.trust-badge:hover span {
  animation: none !important;
  animation-name: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  letter-spacing: normal !important;
}

/* 3. MAINTAIN ORIGINAL COLORS ON HOVER (SO THEY DON'T CHANGE) */
.trust-badge:hover .trust-badge__icon {
  color: hsl(var(--secondary)) !important;
}

.trust-badge:hover span {
  color: hsl(var(--muted-foreground)) !important;
  letter-spacing: normal !important;
}

/* 4. DISABLE SPECIFIC EXTERNAL ANIMATION CLASSES IF APPLIED */
[class*="_sph-"] {
  animation: none !important;
}
/* 1. Neumorphic White Design & Layout */
.product-trust-badges .trust-badge {
  background-color: #f0f0f3 !important;
  box-shadow: 
    9px 9px 16px rgba(163, 177, 198, 0.6), 
    -9px -9px 16px rgba(255, 255, 255, 1) !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: none !important;
}


/* 3. Text Consistency (Stop thinning/color changes) */
.product-trust-badges .trust-badge span {
  font-weight: 700 !important;
  color: #444 !important; /* Adjust to your preferred dark gray */
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  font-variation-settings: "wght" 700 !important;
}

/* 4. Disable All Original Animations/Marquees */
.product-trust-badges,
.product-trust-badges *,
.announcement-bar__track {
  animation: none !important;
}
.product-trust-badges .trust-badge:hover {
  /* Match the non-hover state to avoid sinking */
  box-shadow: 
    9px 9px 16px rgba(163, 177, 198, 0.6), 
    -9px -9px 16px rgba(255, 255, 255, 1) !important;
  transform: none !important;
}
.product-trust-badges .trust-badge,
.trust-badge,
.trust-badge:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
}
/* Definitively kill all hover shadows and filters */
.product-trust-badges .trust-badge:hover,
.product-trust-badges .trust-badge *:hover,
.trust-badge:hover,
.trust-badge *:hover,
.product-trust-badges:hover .trust-badge {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: none !important;
  transform: none !important;
}
.product-trust-badges .trust-badge,
.trust-badge,
.trust-badge:hover,
.product-trust-badges:hover .trust-badge {
  /* Pure white background */
  background: #ffffff !important;
  background-color: #ffffff !important;
  
  /* Light gray thin stroke */
  border: 1px solid #e0e0e0 !important;
  
  /* No shadows, ever */
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  
  /* Layout consistency */
  border-radius: 50px !important;
  padding: 8px 16px !important;
  transform: none !important;
}
/* Restore the marquee animation on the announcement bar track */
.announcement-bar .announcement-bar__track {
  animation: marquee 22s linear infinite !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Ensure the keyframes are correctly defined if they are missing or overridden */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Ensure the parent container clips the overflowing text */
.announcement-bar {
  overflow: hidden !important;
  display: flex !important;
  align-items: center;
}
/* Container for the badges - ensures they flow naturally like text */
.trust-badges__inner {
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 10px 0 !important;
}

/* Individual badge styling - removes the "button" appearance */
.trust-badge[class*="trust-badge"] {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  cursor: text !important;
  min-height: 0 !important;
}

/* Icon styling - scales naturally with the text size */
.trust-badge[class*="trust-badge"] svg,
.trust-badge[class*="trust-badge"] .trust-badge__icon {
  width: 1.2em !important;
  height: 1.2em !important;
  margin: 0 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Text styling - inherits color and font from parent if needed */
.trust-badge[class*="trust-badge"] span {
  font-size: 14px; /* Adjust based on your design */
  line-height: 1.2;
}
@media (max-width: 1024px) {
  /* Hides any product from the 7th item onwards */
  .product-grid > *:nth-child(n+7) {
    display: none !important;
  }
}

/* Adjusts the grid to show 3 columns for 6 products */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Adjusts the grid for smaller mobile views (2 columns) */
@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Container for the entire header - uses flexbox for positioning */
.site-header__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 15px !important;
  position: relative !important;
}

/* Positioning the logo on the left */
.site-header__logo {
  position: static !important;
  flex: 1 1 20% !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* Centering the main navigation menu */
.site-header__nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 60% !important;
  gap: 15px !important;
}

/* Styling the links for a cleaner, unified look */
.site-header__nav-link, 
.nav-dropdown > a {
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 5px !important;
}

/* Positioning the action icons (account, search, cart) on the right */
.site-header__actions {
  position: static !important;
  flex: 1 1 20% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 15px !important;
}

/* Mobile & Tablet adjustments for screen widths below 1024px */
@media (max-width: 1024px) {
  .site-header__nav {
    gap: 8px !important;
  }
  .site-header__nav-link, 
  .nav-dropdown > a {
    font-size: 11px !important;
  }
  .site-header__logo img {
    height: 40px !important; /* Smaller logo for more space */
  }
}

/* Ultra-mobile adjustments for screens below 600px */
@media (max-width: 600px) {
  .site-header__nav {
    gap: 5px !important;
  }
  .site-header__nav-link, 
  .nav-dropdown > a {
    font-size: 10px !important;
    padding: 0 2px !important;
  }
}
/* --- PERMANENT TRUST BADGE STATIC FIX --- */

/* 1. Stop the individual and container hover effects */
.product-trust-badges .trust-badge,
.product-trust-badges:hover .trust-badge,
.trust-badge:hover,
.trust-badge {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 12px !important; /* Spacing between badges */
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
}

/* 2. Lock the icon size and your pink color */
.trust-badge__icon,
.trust-badge svg {
    width: 22px !important;
    height: 22px !important;
    color: #ff5ebc !important; /* Static pink */
    transform: none !important;
    transition: none !important;
}

/* 3. Lock the text font and color */
.trust-badge span {
    color: #444 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-left: 5px !important;
}

/* 4. Disable any hidden background layers */
.trust-badge::before,
.trust-badge::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px){

  .trust-badges__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  .trust-badge{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
  }

  .trust-badge__icon{
    width:20px;
    height:20px;
    min-width:20px;
  }

  .trust-badge span{
    text-align:left;
    white-space:nowrap;
  }

}


/* =============================================
   MOBILE RESPONSIVE — comprehensive fix
      ============================================= */

      /* ---- ANNOUNCEMENT BAR ---- */
      @media (max-width: 480px) {
        .announcement-bar { height: 26px; }
          .announcement-bar__track { font-size: 11px; }
          }

          /* ---- HEADER ---- */
          @media (max-width: 768px) {
            .site-header__inner { padding: 0 1rem; height: 60px; }
              .site-header__logo img { height: 46px; }
                .site-header__actions { gap: 0.4rem; }
                  .icon-btn { width: 36px; height: 36px; }
                  }

                  /* ---- PRODUCT MAIN: single-column below 900px ---- */
                  @media (max-width: 899px) {
                    .product-main { padding: 1rem 0.875rem !important; }
                      .product-main__grid {
                          grid-template-columns: 1fr !important;
                              gap: 1.5rem !important;
                                }
                                }

                                /* ---- PRODUCT MAIN: small mobile ---- */
                                @media (max-width: 640px) {
                                  .product-main { padding: 0.75rem 0.625rem !important; }

                                    /* Back button */
                                      .collection-back-wrapper { margin: 0.5rem 0 !important; }

                                        /* Media thumbnails */
                                          .product-main__main-image { border-radius: 0.75rem !important; }
                                            .product-main__thumbs { gap: 0.375rem !important; }
                                              .product-main__thumbs img { width: 56px !important; height: 56px !important; }

                                                /* Info typography */
                                                  .product-main__vendor { font-size: 11px !important; }
                                                    .product-main__title { font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 0.65rem !important; }
                                                      .product-main__price { font-size: 20px !important; margin-bottom: 0.875rem !important; }

                                                        /* Quantity controls */
                                                          .product-quantity { gap: 10px !important; margin-bottom: 12px !important; }
                                                            .product-quantity__btn { width: 38px !important; height: 38px !important; font-size: 18px !important; }
                                                              .product-quantity__input { width: 38px !important; font-size: 16px !important; }

                                                                /* CTA button */
                                                                  .product-main__cta { padding: 0.875rem 1rem !important; font-size: 15px !important; }

                                                                    /* Payment trust widget */
                                                                      .ultimateTrustBadgesInnerContainer { max-width: 100% !important; overflow: hidden !important; }

                                                                        /* Trust badges row */
                                                                          .product-trust-badges { gap: 0.5rem 0.75rem !important; }
                                                                          }

                                                                          /* ---- PRODUCT DESCRIPTION ---- */
                                                                          @media (max-width: 640px) {
                                                                            .product-main__description-full {
                                                                                padding: 0 0.5rem !important;
                                                                                    font-size: 15px !important;
                                                                                        line-height: 1.7 !important;
                                                                                            margin-top: 2rem !important;
                                                                                              }
                                                                                                .product-main__description-full h2,
                                                                                                  .product-main__description-full h3 { font-size: 19px !important; margin: 1.75rem 0 0.875rem !important; }
                                                                                                    .product-main__description-full table {
                                                                                                        width: 100% !important;
                                                                                                            font-size: 14px !important;
                                                                                                                display: block !important;
                                                                                                                    overflow-x: auto !important;
                                                                                                                        -webkit-overflow-scrolling: touch !important;
                                                                                                                          }
                                                                                                                          }

                                                                                                                          /* ---- NEWSLETTER ---- */
                                                                                                                          @media (max-width: 640px) {
                                                                                                                            .newsletter { padding: 2.5rem 1.25rem !important; }
                                                                                                                              .newsletter__title { font-size: 1.5rem !important; }
                                                                                                                                .newsletter__subtitle { font-size: 0.875rem !important; }
                                                                                                                                  .newsletter__form { flex-direction: column !important; gap: 0.625rem !important; }
                                                                                                                                    .newsletter__input { width: 100% !important; box-sizing: border-box !important; }
                                                                                                                                      .newsletter__btn { width: 100% !important; text-align: center !important; }
                                                                                                                                      }

                                                                                                                                      /* ---- FOOTER ---- */
                                                                                                                                      @media (max-width: 639px) {
                                                                                                                                        .site-footer__grid {
                                                                                                                                            grid-template-columns: 1fr !important;
                                                                                                                                                padding: 2.5rem 1.25rem !important;
                                                                                                                                                    gap: 2rem !important;
                                                                                                                                                      }
                                                                                                                                                        .site-footer__bottom {
                                                                                                                                                            padding: 1rem 1.25rem !important;
                                                                                                                                                                flex-direction: column !important;
                                                                                                                                                                    align-items: flex-start !important;
                                                                                                                                                                      }
                                                                                                                                                                        .site-footer__brand-name { font-size: 22px !important; }
                                                                                                                                                                        }

                                                                                                                                                                        /* ---- STICKY CART ---- */
                                                                                                                                                                        @media (max-width: 768px) {
                                                                                                                                                                          .sticky-cart { padding: 0.625rem 0.875rem !important; }
                                                                                                                                                                            .sticky-cart button { padding: 0.875rem !important; font-size: 15px !important; }
                                                                                                                                                                            }

                                                                                                                                                                            /* ---- CHAT WIDGET ---- */
                                                                                                                                                                            @media (max-width: 640px) {
                                                                                                                                                                              .chat-widget { bottom: 4.5rem !important; right: 1rem !important; }
                                                                                                                                                                                .chat-widget__panel {
                                                                                                                                                                                    width: calc(100vw - 2rem) !important;
                                                                                                                                                                                        right: 0 !important;
                                                                                                                                                                                            left: 0 !important;
                                                                                                                                                                                                margin: 0 auto !important;
                                                                                                                                                                                                  }
                                                                                                                                                                                                  }

                                                                                                                                                                                                  /* ---- OVERFLOW GUARD ---- */
                                                                                                                                                                                                  @media (max-width: 768px) {
                                                                                                                                                                                                    .product-main,
                                                                                                                                                                                                      .product-main__grid,
                                                                                                                                                                                                        .product-main__info,
                                                                                                                                                                                                          .product-main__media { max-width: 100% !important; box-sizing: border-box !important; }
                                                                                                                                                                                                          }

/* ===== MOBILE FIX V2 - COMPREHENSIVE OVERFLOW FIX ===== */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

@media (max-width: 768px) {
  .shopify-section, .site-header, .site-footer, .newsletter, .product-main, .toylvia-main, .page-wrapper { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  .site-header__inner { padding: 0 1rem !important; height: 60px !important; }
  .site-header__logo img { height: 44px !important; width: auto !important; }
  img, video, iframe, embed, object { max-width: 100% !important; height: auto !important; }
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }
}

@media (max-width: 899px) {
  .product-main__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; gap: 1.25rem !important; }
  .product-main__info, .product-main__media { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .product-main { padding: 1rem !important; overflow-x: hidden !important; }
}

@media (max-width: 640px) {
  .product-main { padding: 0.75rem !important; }
  .product-main__title { font-size: 20px !important; word-break: break-word !important; }
  .product-main__price { font-size: 20px !important; }
  .product-main__cta { font-size: 15px !important; }
  .site-footer__grid { grid-template-columns: 1fr !important; padding: 2rem 1rem !important; }
  .newsletter { padding: 2rem 1rem !important; }
  .newsletter__form { flex-direction: column !important; }
  .newsletter__input, .newsletter__btn { width: 100% !important; box-sizing: border-box !important; }
  .product-main__description-full { padding: 0 !important; font-size: 15px !important; }
}
/* ===== END MOBILE FIX V2 ===== */

/* 1. Make the section full width and center its contents on the screen */
section:has(h2.section-title.section-title--cyan) {
  width: 100vw !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Ensure the title container and its children are centered */
div:has(> h2.section-title.section-title--cyan) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* 3. Force the title to a single row and center the text */
h2.section-title.section-title--cyan {
  white-space: nowrap !important;
  font-size: min(32px, 7.5vw) !important; /* Dynamically sizes text to fit mobile */
  text-align: center !important;
  width: auto !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
/* Main Header / Title */
header, h1 {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Newsletter Section Titles */
.newsletter__title, .newsletter__subtitle, section.newsletter {
  text-align: left !important;
  justify-content: flex-start !important;
}
::view-transition-old(sphere-ball-building),
::view-transition-new(sphere-ball-building) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ensure anchor for absolute positioning */
.product-card__body {
  position: relative;
  padding: 10px 12px 12px;
    display: flex;
      flex-direction: column;
}

/* === PREMIUM TITLE REVEAL === */
@keyframes titleShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes underlineSweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* base title: 2-line clamp, smooth transitions */
.product-card__title {
  position: relative !important;
  text-align: left !important;
  z-index: 50;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1.4;
  font-size: 1rem;
  font-weight: 500;
  color: hsl(215, 40%, 15%);
  background: none;
  -webkit-text-fill-color: unset;
  letter-spacing: 0em;
  will-change: font-size, letter-spacing;
  transition:
    font-size      0.6s cubic-bezier(0.16, 1, 0.3, 1),
    font-weight    0.5s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    color          0.4s ease;
}

/* gradient underline hidden at rest */
.product-card__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, hsl(330,100%,60%), hsl(187,85%,50%), hsl(50,100%,58%), hsl(330,100%,60%));
  background-size: 200% auto;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    opacity   0.4s ease 0.15s;
  animation: underlineSweep 2.5s linear infinite;
}

/* image shrinks upward: keeps card total height stable */
.product-card:hover .product-card__image {
  height: 256px !important;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* brand-pink glow on card hover */
.product-card:hover {
  box-shadow:
    0 0 0 3px rgba(255, 42, 148, 0.15),
    0 8px 32px rgba(255, 42, 148, 0.2),
    0 24px 64px rgba(255, 42, 148, 0.1),
    0px 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* premium hover title reveal */
.product-card:hover .product-card__title {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.018em !important;
  padding: 2px 0 8px !important;
  background: linear-gradient(110deg, hsl(330,100%,38%) 0%, hsl(330,100%,55%) 22%, hsl(330,100%,68%) 40%, hsl(187,85%,45%) 55%, hsl(330,100%,55%) 72%, hsl(330,100%,38%) 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: titleShimmer 3.5s linear infinite;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 100;
}

/* reveal gradient underline */
.product-card:hover .product-card__title::after {
  transform: scaleX(1);
  opacity: 1;
}

/* footer: flex row, price left, button right, proper padding */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 0;
  margin-top: 4px;
  width: 100%;
}