/** Shopify CDN: Minification failed

Line 3490:3 Unexpected "="
Line 6213:0 Expected "}" to go with "{"

**/
/** Shopify CDN: Minification failed

Line 2468:0 Unexpected "<"
Line 2545:0 Unexpected "<"
Line 3977:224 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;
}
/* Homepage: transparent body so glitch bg layer shows through */
body.index-page {
  background: transparent !important;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
*:focus, *:focus-visible { outline: none !important; }
button:focus, button:focus-visible,
a:focus, a:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible { outline: none !important; }


/* === HEADER BLUR CONTAINMENT — reduce blur(28px) to stop bleeding below header === */
#tlv-diag { filter: blur(4px) !important; }
#tlv-global-grid { display: none !important; }

/* === LAYOUT === */
.toylvia-main {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  overflow: visible;
  padding: 0 1rem;
  background: transparent;
}
@media (min-width: 768px) { .toylvia-main { padding: 0 2rem; } }
@media (min-width: 1024px) { .toylvia-main { padding: 0 3rem; } }
/* Homepage: remove main padding so all sections are edge-to-edge */
/* body.template-index doesn't work (body has no class) — use :has() instead */
.toylvia-main:has(.drift-strip),
.toylvia-main:has(#shopify-section-clg-hero) { padding: 0 !important; }
.max-store { max-width: 1280px; margin: 0 auto; }

/* === ANNOUNCEMENT BAR === */
#tlv-gap-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: #f0f0f4;
  z-index: 9995;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#tlv-gap-mask.tlv-bar-hide { opacity: 0; }
@media (max-width: 1199px) {
  #tlv-gap-mask { display: none; }
}
#shopify-section-announcement-bar {
  position: sticky;
  top: 16px;
  z-index: 9997;
  margin-left: 76px;
  margin-right: 16px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#shopify-section-announcement-bar.tlv-bar-hide {
  transform: translateY(-120%);
  opacity: 0;
}
@media (max-width: 1199px) {
  #shopify-section-announcement-bar {
    top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}
.announcement-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1a1a1a;
}
.announcement-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.announcement-bar__logo {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}
.announcement-bar__text {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.announcement-bar__text strong {
  font-weight: 700;
}

/* === HEADER === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
.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: 9995;
  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: 20px;
  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 {
  overflow: hidden;
  background: rgba(255,255,255,0.52);
  border-radius: 1rem;
  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);
}
.product-card--cyan:hover { border-color: hsla(187, 85%, 53%, 0.7); box-shadow: 0 28px 64px rgba(34,211,238,0.45), 0 12px 32px rgba(34,211,238,0.30), 0 4px 12px rgba(0,0,0,0.06); }
.product-card--pink:hover { border-color: hsla(330, 100%, 63%, 0.7); box-shadow: 0 28px 64px rgba(255,66,161,0.45), 0 12px 32px rgba(255,66,161,0.30), 0 4px 12px rgba(0,0,0,0.06); }
.product-card--yellow:hover { border-color: hsla(48, 100%, 62%, 0.7); box-shadow: 0 28px 64px rgba(255,184,0,0.45), 0 12px 32px rgba(255,184,0,0.30), 0 4px 12px rgba(0,0,0,0.06); }


.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;
}
@media (max-width: 1023px) {
  .product-card__image img { filter: none !important; transition: none !important; }
  /* Kill 240 GPU compositing layers on mobile */
  .product-card { will-change: auto !important; transform: none !important; transition: none !important; }
  .product-card img, .product-card .product-card__image { will-change: auto !important; transition: none !important; }
  .product-card .product-card__body::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .product-card:hover .product-card__body::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .product-card:hover { transform: none !important; }
  .product-card:hover img, .product-card:hover .product-card__image { transform: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  .product-grid:hover .product-card__image img { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12)) grayscale(0.6) brightness(0.92); }
  .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.22rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  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;
}
.product-card__cta {
  padding: 0.56rem 1.12rem;
  border-radius: 0.75rem;
  font-size: 13.44px;
  font-weight: 800;
    transition: opacity 0.2s ease;
}
.product-card__cta--cyan,
.product-card__cta--pink,
.product-card__cta--yellow,
.product-card__cta--purple,
.product-card__cta--green,
.product-card__cta--orange { background: #ff42a1 !important; color: #fff !important; }
.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,
.product-card__cta--orange:hover {
  background: #ff42a1 !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.22) !important;
  transform: scale(0.97) !important;
  opacity: 1 !important;
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(5, 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;
  text-align: center;
}
@media (min-width: 768px) { .section-title { font-size: 2.7rem; } }
.section-title--cyan { color: hsl(var(--toylvia-pink)); background: transparent; }
.section-title--pink { color: hsl(var(--toylvia-pink)); background: transparent; }
.section-title--yellow { color: hsl(var(--toylvia-pink)); background: transparent; }
.section-title__line {
  margin-top: 0.75rem;
  height: 2px;
  width: 8rem;
  border-radius: 999px;
  margin-left: auto;
  margin-right: auto;
}
.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-pink)); background: transparent; }
 .section-title--green { color: hsl(var(--toylvia-pink)); background: transparent; }
 .section-title--orange { color: hsl(var(--toylvia-pink)); background: transparent; }
 .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 {
  position: relative;
  z-index: 3;
  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;
  text-align: center;
}
@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); }


.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); }


/* === 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 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;
    flex-wrap: nowrap !important;
  }
}

@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.35fr 1fr;
    align-items: start;
  }
}

.product-main__info {
  display: flex;
  flex-direction: column;
}
.product-main__bottom {
  margin-top: auto;
}

/* 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;
  margin-bottom: 20px;
}

.product-main__thumbs img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 0.625rem;
  cursor: pointer;
  opacity: 0.65;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
.product-main__thumbs img:hover,
.product-main__thumbs img.active {
  opacity: 1;
  border-color: #ff42a1;
  transform: translateY(-2px);
}

/* 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-price-qty-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 767px) {
  .product-price-qty-row {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
  }
}

.product-main__price {
  font-size: 24px;
  color: #ff42a1;
  font-weight: 700;
  margin-bottom: 0;
}

.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: fit-content;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  background: #111;
  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 .sticky-cart__btn {
  width: 100%;
  padding: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff42a1,#ff7bbd) !important;
  color: #fff !important;
  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,#ff42a1,#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,#ff42a1,#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: 20px 20px !important;
}

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

@media (min-width: 1024px) {
  .product-main {
    padding: 20px 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: #fafaf8;
  border-radius: 1.25rem;
  box-shadow: 0 6px 30px rgba(0,0,0,0.09), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.product-main__main-image:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.05);
}
.product-main__main-image img {
  transition: transform 0.4s ease;
}
.product-main__main-image:hover img {
  transform: scale(1.04);
}

/* 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;
  background: #f2f2f2 !important;
}

/* 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:#ff42a1"] {
  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);
  
}

/* 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;
                        }




          /* ── 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: inline-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: transparent !important; border: 1.5px solid #ff2a94 !important; color: #ff2a94 !important; }
.product-card__badge[data-badge="new"]         { background: transparent !important; border: 1.5px solid #16a34a !important; color: #16a34a !important; }
.product-card__badge[data-badge="sale"]        { background: transparent !important; border: 1.5px solid #dc2626 !important; color: #dc2626 !important; }
.product-card__badge[data-badge="award"]       { background: transparent !important; border: 1.5px solid #d97706 !important; color: #d97706 !important; }
.product-card__badge[data-badge="top pick"]    { background: transparent !important; border: 1.5px solid #7c3aed !important; color: #7c3aed !important; }
.product-card__badge[data-badge="trending"]    { background: transparent !important; border: 1.5px solid #ea580c !important; color: #ea580c !important; }
.product-card__badge[data-badge="hot"]         { background: transparent !important; border: 1.5px solid #dc2626 !important; color: #dc2626 !important; }
.product-card__badge[data-badge="sold-out"]    { background: transparent !important; border: 1.5px solid #6b7280 !important; color: #6b7280 !important; }
.product-card__badge--soldout                  { left: auto !important; right: 12px !important; width: max-content !important; }

/* === 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: 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: none !important;
  color: #999;
  margin-bottom: 0.65rem;
}

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

.product-variants__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid #d1d5db !important;
  background: #fff;
  color: #1a1a2e;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  box-shadow: none;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.product-variants__btn:hover:not(.disabled):not(.selected) {
  border-color: #ff42a1;
  background: #fff5fa;
  color: #ff42a1;
  box-shadow: none;
  transform: none;
}

.product-variants__btn:not(.disabled):active {
  background: #ffe8f4;
  border-color: #ff42a1;
  box-shadow: none;
  transform: none;
}

.product-variants__btn.selected {
  border: 2px solid #ff42a1 !important;
  background: #fff5fa;
  color: #ff42a1;
  box-shadow: none;
  padding-bottom: 7px;
}

.product-variants__btn.selected::after {
  display: none;
}

.product-variants__btn.disabled:not(.selected) {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  color: #bbb;
  border-color: #e5e7eb;
  background: #f9fafb;
  box-shadow: none;
}

.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: #ffffff !important;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  color: #ff42a1 !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.1s ease, color 0.15s 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: #111 !important;
}

.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;
}


.product-main__cta {
  width: fit-content;
  padding: 1.1rem 2.2rem;
  border-radius: 999px;
  border: none !important;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff !important;
  background: #111 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
  transition: box-shadow 0.18s ease, transform 0.14s ease;
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}
.product-main__cta::after { display: none; }
.product-main__cta:hover:not(:disabled) {
  background: #333 !important;
  box-shadow: 0 6px 26px rgba(0,0,0,0.28);
  transform: translateY(-2px);
}
.product-main__cta:active {
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transform: translateY(0);
}
.product-main__cta:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
/* --- 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;
}

.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: #ff42a1 !important; }
.see-all-btn--yellow { box-shadow: 6px 6px 14px rgba(255,204,0,0.25), -6px -6px 14px #ffffff !important; color: #ff42a1 !important; }
.see-all-btn:hover { box-shadow: 3px 3px 8px #d1d1d1, -3px -3px 8px #ffffff !important; transform: translateY(-2px) !important; color: #111 !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; width: fit-content !important; display: block !important; margin: 0 auto !important; }


*,*::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 .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 .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 */

/* 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}
}

.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: 600 !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: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  .trust-badge {
    text-align: center !important;
    font-size: 0.72rem !important;
    flex: 0 0 auto !important;
    white-space: nowrap !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: 10px !important;
  height: 10px !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;
}
/* Mobile: 1 column grid */
@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;
}

.site-header__nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: all .25s ease;
}

/* 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:row;
    flex-wrap:wrap;
    justify-content:center;
    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: 21px !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 ===== */
/* overflow-x:clip unlike hidden doesn't create a scroll container, so pull-to-refresh works */
html { max-width: 100vw !important; overflow-y: auto !important; overscroll-behavior-y: auto !important; }
body { overflow-x: clip !important; max-width: 100vw !important; overscroll-behavior-y: auto !important; }

@media (max-width: 768px) {
  .shopify-section, .site-header, .site-footer, .newsletter, .product-main, .toylvia-main, .page-wrapper { max-width: 100vw !important; overflow-x: clip !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__grid { padding-top: 0.5rem !important; }
  .product-main__title { font-size: 18px !important; line-height: 1.3 !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: stretch !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: 100% !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}
/* Main Header / Title */
header {
  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: center !important;
  justify-content: center !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;
}

/* === CLEAN CARD SYSTEM v1.0 === */
.product-card{position:relative;background:#fff;border-radius:0;overflow:visible;height:auto;display:flex;flex-direction:column}
.product-card .product-card__image-wrap,.product-card .product-card__image-wrapper{position:relative !important;width:100% !important;aspect-ratio:1/1 !important;border-radius:14px !important;overflow:hidden !important;background:#f0f0f0 !important;flex-shrink:0 !important;box-shadow:0 2px 12px rgba(0,0,0,0.09) !important;height:auto !important}
@media (min-width:768px){.product-card .product-card__image-wrap{height:auto !important;aspect-ratio:1/1 !important}}
.product-card img,.product-card .product-card__img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;will-change:transform !important;transition:transform 0.3s ease !important}
.product-card:hover img,.product-card:hover .product-card__img{transform:scale(1.04) !important}
.product-card .product-card__body{position:static !important;bottom:auto !important;left:auto !important;right:auto !important;top:auto !important;padding:10px 2px 0 !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transition:none !important;display:flex !important;flex-direction:column !important;gap:3px !important;z-index:1 !important;opacity:1 !important;transform:none !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important}
.product-card .product-card__body::before{display:none !important;content:none !important;background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;position:static !important;inset:auto !important;opacity:0 !important}
.product-card:hover{transform:none !important;box-shadow:none !important}
.product-card--pink:hover,.product-card--cyan:hover,.product-card--yellow:hover{box-shadow:none !important}
.product-card .product-card__title,.product-card .card__heading,.product-card h3,.product-card .product-card__name{position:static !important;z-index:1 !important;font-size:13px !important;font-weight:700 !important;color:#111 !important;text-shadow:none !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-height:0 !important;max-height:none !important;transform:none !important;transition:none !important;text-align:left !important;line-height:1.35 !important;text-decoration:none !important}
@media (min-width:768px){.product-card .product-card__title{font-size:13px !important}}
.product-card:hover .product-card__title,.product-card:hover .card__heading,.product-card:hover h3,.product-card:hover .product-card__name{color:#111 !important;text-shadow:none !important;transform:none !important;max-height:none !important}
.product-card .product-card__title::after,.product-card .card__heading::after{display:none !important;content:none !important;background:none !important}
.product-card:hover .product-card__title::after{display:none !important;opacity:0 !important;animation:none !important}
.product-card .product-card__price,.product-card .price,.product-card .price__regular,.product-card .price-item{position:static !important;z-index:1 !important;font-size:14px !important;font-weight:600 !important;color:#111 !important;transition:none !important;text-shadow:none !important;margin-top:auto !important;padding-top:4px !important}
.product-card .product-card__vendor{font-size:11px !important;color:#999 !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;line-height:1.2 !important}
.product-card .product-card__stars{display:flex !important;align-items:center !important;gap:1px !important;margin-top:1px !important}
.product-card .product-card__stars-count{font-size:11px !important;color:#999 !important;margin-left:3px !important}
.product-card .product-card__link{position:absolute !important;inset:0 !important;z-index:2 !important;display:block !important}
.product-card .product-card__quickview{position:absolute !important;bottom:10px !important;right:10px !important;z-index:3 !important;width:30px !important;height:30px !important;border-radius:50% !important;background:rgba(255,255,255,0.92) !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#444 !important;text-decoration:none !important;opacity:0 !important;transition:opacity 0.2s !important;box-shadow:none !important}
.product-card:hover .product-card__quickview{opacity:1 !important}
.product-card .product-card__sold-badge{position:absolute !important;top:10px !important;left:10px !important;z-index:3 !important;background:rgba(0,0,0,0.65) !important;color:#fff !important;font-size:11px !important;font-weight:600 !important;padding:3px 8px !important;border-radius:20px !important;text-transform:none !important}
   GLASSMORPHIC ADVANCED NAVIGATION SYSTEM — Toylvia
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 18px;
  z-index: 50;
}
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px;
  height: 1px;
  pointer-events: none;
}
.site-header::before { top: 1px;    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); }
.site-header::after  { bottom: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); }

.site-header__inner { position: relative; z-index: 1; }

.site-header__nav {
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header__nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  transition: all .25s ease;
}

/* Dropdown hover-bridge fix */
.nav-dropdown { position: relative; }
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 6px; right: 0;
  top: 100%;
  height: 14px;
}
.nav-dropdown__menu {
  margin-top: 0;
  padding-top: 14px;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 9995 !important;
}

@media (max-width: 749px) {
  .site-header {
    top: 0;
    width: 100%;
    margin: 0;
    padding: 6px 12px;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Social Icons — clean default, brand fill on hover */
.newsletter__social-link,
.site-footer__social-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255,255,255,0.55) !important;
  transition: color 250ms ease, background 250ms ease, transform 250ms ease !important;
}
.newsletter__social-link {
  color: #aab4c0 !important;
}
.newsletter__social-link::before,
.site-footer__social-icon::before { display: none !important; }

.newsletter__social-link svg,
.site-footer__social-icon svg { opacity: 1; transition: fill 250ms ease, stroke 250ms ease; }

/* Hover: fill with brand color */
.newsletter__social-link[aria-label="Facebook"]:hover,
.site-footer__social-icon[aria-label="Facebook"]:hover { color: #1877F2 !important; transform: translateY(-3px); }

.newsletter__social-link[aria-label="Instagram"]:hover,
.site-footer__social-icon[aria-label="Instagram"]:hover { color: #E1306C !important; transform: translateY(-3px); }

.newsletter__social-link[aria-label="TikTok"]:hover,
.site-footer__social-icon[aria-label="TikTok"]:hover { color: #ff42a1 !important; transform: translateY(-3px); }

.newsletter__social-link[aria-label="Twitter"]:hover,
.site-footer__social-icon[aria-label="Twitter"]:hover { color: #1DA1F2 !important; transform: translateY(-3px); }

.newsletter__social-link[aria-label="YouTube"]:hover,
.site-footer__social-icon[aria-label="YouTube"]:hover { color: #FF0000 !important; transform: translateY(-3px); }

.newsletter__social-link:hover svg,
.site-footer__social-icon:hover svg { fill: currentColor; stroke: currentColor; opacity: 1; }

/* Hide Shopify auto-rendered policy title (duplicate) */
.shopify-policy__title { display: none !important; }


/* Center h1 on policy pages */
.shopify-policy__body h1 { text-align: center !important; }


/* === GLOBAL FOOTER: Social icons only on all pages === */
.site-footer { display: none !important; position: relative; z-index: 3; }
.newsletter__title,
.newsletter__subtitle,
.newsletter__form { display: none !important; }

/* Center Return Policy page h1 title */
.return-page .hero h1 { text-align: center !important; }

/* === BACK BUTTON === */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 4px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #111 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.18s !important;
  position: relative;
  z-index: 10;
  margin: clamp(6px,2vw,28px) 0 1.2rem 0 !important;
}
.back-btn:hover { color: #ff42a1 !important; box-shadow: none !important; text-decoration: none !important; }
.back-btn:hover svg { stroke: #ff42a1 !important; }
.back-btn:active { color: #ff42a1 !important; box-shadow: none !important; }
.back-btn svg { width:16px; height:16px; stroke-width:2.5; stroke:currentColor; fill:none; flex-shrink:0; transition:stroke 0.18s; }

                                                                /* FOOTER OVERRIDES */
                                                                .faq-page .support { display: none !important; }
                                                                .newsletter { background: transparent !important; border-top: none !important; }

                                                                /* SOCIAL ICONS */
                                                                .newsletter__socials { display:flex !important; gap:14px !important; justify-content:center !important; align-items:center !important; margin:1.2rem 0 1.6rem !important; flex-wrap:nowrap !important; }
                                                                .newsletter__social-link { width:46px !important; height:46px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:transparent !important; border:1.5px solid rgba(255,66,161,0.35) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; color:#ff42a1 !important; transition:background 0.2s,border-color 0.2s !important; flex-shrink:0 !important; }
                                                                .newsletter__social-link svg { width:22px !important; height:22px !important; fill:none !important; stroke:currentColor !important; stroke-width:2 !important; display:block !important; }
                                                                .newsletter__social-link:hover { background:rgba(255,66,161,0.12) !important; border-color:#ff42a1 !important; }
                                                                /* === BUTTON & BLOG OVERRIDES === */

                                                                /* Hide old collection back button */
                                                                .collection-back-btn, .collection-back-wrapper { display: none !important; }


                                                                                                                 /* All neumorphic buttons: smooth pressed + pink on hover */
                                                                                                                 .all-products-btn:hover,
                                                                                                                 .see-all-btn:hover,
                                                                                                                 .see-all-btn--pink:hover,
                                                                                                                 .see-all-btn--yellow:hover,
                                                                                                                 .see-all-btn--cyan:hover {
                                                                                                                   color: hsl(330,100%,63%) !important;
                                                                                                                     box-shadow: inset 4px 4px 10px rgba(0,0,0,0.10), inset -4px -4px 10px rgba(255,255,255,0.85) !important;
                                                                                                                       transition: all 0.3s ease !important;
                                                                                                                       }
                                                                                                                       /* All neumorphic buttons: smooth transitions */
                                                                                                                       .all-products-btn, .see-all-btn, .see-all-btn--pink, .see-all-btn--yellow, .see-all-btn--cyan {
                                                                                                                         transition: all 0.3s ease !important;
                                                                                                                         }

                                                                                                                         /* Remove blog card hover animations */
                                                                                                                         .blog-article-grid .product-card:hover {
                                                                                                                           transform: none !important;
                                                                                                                             box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04) !important;
                                                                                                                             }

                                                                                                                            

                                                                                                                             /* === SHIPPING POLICY TITLE FIX === */
.shopify-policy__container h1:not(.main-page-title) { font-size: 40px !important; font-weight: 700 !important; color: #172436 !important; font-family: Nunito, Poppins, system-ui, sans-serif !important; letter-spacing: normal !important; text-align: left !important; }
.shopify-policy__container h1:not(.main-page-title) span { color: inherit !important; }
.shopify-policy__container div[style*="linear-gradient"] { background: none !important; padding: 0 !important; border-radius: 0 !important; margin-bottom: 24px !important; }
.shopify-policy__container div[style*="border-radius:999px"] { display: none !important; }
.shopify-policy__container p[style*="color:#64748b"] { display: none !important; }

/* === BRAND LOADER === */
#brand-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(var(--background), 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#brand-loader.bl-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pl {
  aspect-ratio: 1;
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 8em;
}
.pl__dot {
  position: relative;
}
.pl__dot, .pl__dot::before, .pl__dot::after {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.pl__dot::before, .pl__dot::after {
  aspect-ratio: 1;
  background-color: hsl(var(--foreground));
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  transition: background-color 0.3s;
}
.pl__dot::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.pl__dot--red::before, .pl__dot--red::after {
  background-color: hsl(0 90% 60%);
}
.pl__dot--yellow::before, .pl__dot--yellow::after {
  background-color: hsl(45 90% 50%);
}
.pl__dot--green::before, .pl__dot--green::after {
  background-color: hsl(150 90% 40%);
}
.pl__dot--blue::before, .pl__dot--blue::after {
  background-color: hsl(210 90% 50%);
}
.pl__dot--lg::after {
  width: 500%;
}
.pl__dot--sm::after {
  width: 167%;
}
.pl__dot:nth-child(1)::before { animation-name: dot-scale1; }
.pl__dot:nth-child(2) { animation-name: dot-rotate; transform-origin: 50% 200%; }
.pl__dot:nth-child(2)::before { animation-name: dot-scale2; }
.pl__dot:nth-child(3)::before { animation-name: dot-scale3; }
.pl__dot:nth-child(3)::after { animation-name: dot-wave3; }
.pl__dot:nth-child(4) { animation-name: dot-rotate; transform-origin: 200% 50%; }
.pl__dot:nth-child(4)::before { animation-name: dot-scale4; }
.pl__dot:nth-child(5)::before { animation-name: dot-scale5; }
.pl__dot:nth-child(5)::after { animation-name: dot-wave5a, dot-wave5b; }
.pl__dot:nth-child(6) { animation-name: dot-rotate; transform-origin: -100% 50%; }
.pl__dot:nth-child(6)::before { animation-name: dot-scale6; }
.pl__dot:nth-child(7)::before { animation-name: dot-scale7; }
.pl__dot:nth-child(7)::after { animation-name: dot-wave7; }
.pl__dot:nth-child(8) { animation-name: dot-rotate; transform-origin: 50% -100%; }
.pl__dot:nth-child(8)::before { animation-name: dot-scale8; }
.pl__dot:nth-child(9)::before { animation-name: dot-scale9; }
.pl__dot:nth-child(9)::after { animation-name: dot-wave9; }
@keyframes dot-rotate {
  from, 22% { animation-timing-function: ease-out; transform: rotate(-45deg); }
  37%, to { transform: rotate(0); }
}
@keyframes dot-scale1 {
  from, 36% { transform: translate(0, 0) scale(0); }
  50%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(75%, 75%) scale(0); }
}
@keyframes dot-scale2 {
  from, 25% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
  40%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(0, -100%) scale(0); }
}
@keyframes dot-scale3 {
  from, 27% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
  45%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(-75%, 75%) scale(0); }
}
@keyframes dot-scale4 {
  from, 28% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
  43%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(-100%, 0) scale(0); }
}
@keyframes dot-scale5 {
  from, 9%, to { transform: scale(0); }
  26% { transform: scale(1.17); }
  41%, 75% { transform: scale(1); }
}
@keyframes dot-scale6 {
  from, 22% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
  37%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(100%, 0) scale(0); }
}
@keyframes dot-scale7 {
  from, 36% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
  53%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(75%, -75%) scale(0); }
}
@keyframes dot-scale8 {
  from, 24% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
  39%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(0, 100%) scale(0); }
}
@keyframes dot-scale9 {
  from, 32% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
  49%, 71% { transform: translate(0, 0) scale(1); }
  87%, to { transform: translate(-75%, -75%) scale(0); }
}
@keyframes dot-wave3 {
  from { visibility: hidden; }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
  61%, to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dot-wave5a {
  from { transform: translate(-50%, -50%) scale(0.2); }
  8% { transform: translate(-50%, -50%) scale(0.8); }
  25%, to { transform: translate(-50%, -50%) scale(1); }
}
@keyframes dot-wave5b {
  from, 25%, to { opacity: 0; }
  8% { opacity: 0.5; }
}
@keyframes dot-wave7 {
  from { visibility: hidden; }
  53% { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
  69%, to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dot-wave9 {
  from { visibility: hidden; }
  49% { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
  65%, to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}





/* =========================================================
   NEUMORPHIC OVERHAUL - Buttons, Menu, Ambient Effects
   ========================================================= */

/* Ambient gradient - sky blue & orange, barely visible */
body {
  background: #f2f2f2;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(135, 206, 250, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(255, 165, 80, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(135, 206, 250, 0.04) 0%, transparent 70%);
  animation: ambientGradient 24s ease-in-out infinite;
}
@keyframes ambientGradient {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; opacity: 0.9; }
  33% { background-position: 20% 10%, -15% 5%, 10% -10%; opacity: 1; }
  66% { background-position: -10% 15%, 10% -10%, -5% 5%; opacity: 0.85; }
}

.site-header, main, .shopify-section { position: relative; z-index: 1; }

/* =========================================================
   NEUMORPHIC MENU
   ========================================================= */

.site-header__nav { white-space: nowrap; min-width: fit-content; }
.site-header__inner { min-width: 920px; }

.site-header__nav-link {
  position: relative !important;
  padding: 10px 18px !important;
  margin: 0 2px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: hsl(var(--muted-foreground)) !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  transition:
    color 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    text-shadow 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.2s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.site-header__nav-link:hover {
  color: hsl(330, 100%, 55%) !important;
  text-shadow:
    0 0 8px hsla(330, 100%, 63%, 0.0),
    0 0 18px hsla(187, 85%, 53%, 0.0),
    0 0 30px hsla(330, 100%, 63%, 0.0) !important;
}

.site-header__nav-link:active {
  box-shadow:
    inset 3px 3px 8px rgba(163, 177, 198, 0.55),
    inset -3px -3px 8px rgba(255, 255, 255, 0.9) !important;
  transform: translateY(1px) !important;
}

.site-header__nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 14% !important;
  width: 72% !important;
  height: 2px !important;
  background: hsl(330, 100%, 63%) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1) !important;
  filter: drop-shadow(0 0 4px rgba(255, 66, 161, 0.5)) !important;
}
.site-header__nav-link:hover::after { transform: scaleX(1) !important; }

.nav-dropdown__link {
  color: #0a0a0a !important;
  transition: color 0.4s ease, text-shadow 0.4s ease !important;
}
.nav-dropdown__link:hover {
  color: hsl(330, 100%, 55%) !important;
  text-shadow:
    0 0 6px hsla(330, 100%, 63%, 0.5),
    0 0 14px hsla(187, 85%, 53%, 0.3) !important;
}

/* =========================================================
   NEUMORPHIC BUTTONS - excludes .product-card__cta (Grab It)
   ========================================================= */

.all-products-btn,
button:not(.icon-btn):not(.tv-auth-close):not(.product-card__cta):not(.product-main__cta):not(.product-main__buy-now):not(.product-tabs__tab):not([class*="swiper"]):not([class*="swatch"]):not(.sticky-cart__btn):not(.cart-drawer__checkout):not(.cart-qty-btn):not([data-cart-close]):not(.coll-sort__btn):not(.coll-filter-btn):not(.tv-age-pill):not(.tv-type-pill):not(.tv-type-card):not(.tv-theme-pill):not(.tv-theme-more):not(.product-variants__btn):not(.cr-card__btn):not(.tlv-sb-signin):not(.tv-clear-all):not(.coll-vbtn):not(.coll-allfilters):not(.coll-search-clr):not(.coll-back-top-btn):not(.coll-read-more),
.btn,
a.all-products-btn {
  background: linear-gradient(145deg, #f0f3f8, #ffffff) !important;
  border: none !important;
  outline: none !important;
  color: #ff42a1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.95),
    6px 6px 14px rgba(163, 177, 198, 0.4) !important;
  transition:
    box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.2s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.all-products-btn:hover,
button:not(.icon-btn):not(.tv-auth-close):not(.product-card__cta):not(.product-main__cta):not(.product-main__buy-now):not(.product-tabs__tab):not([class*="swiper"]):not([class*="swatch"]):not(.sticky-cart__btn):not(.cart-drawer__checkout):not(.cart-qty-btn):not([data-cart-close]):not(.coll-sort__btn):not(.coll-filter-btn):not(.tv-age-pill):not(.tv-type-card):not(.tv-theme-pill):not(.tv-theme-more):not(.cr-card__btn):not(.tlv-sb-signin):not(.coll-back-top-btn):not(.coll-read-more):hover,
.btn:hover {
  color: #111 !important;
  text-shadow: none !important;
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.95),
    6px 6px 14px rgba(163, 177, 198, 0.4) !important;
  transform: none !important;
}

.all-products-btn:active,
button:not(.icon-btn):not(.tv-auth-close):not(.product-card__cta):not(.product-main__cta):not(.product-main__buy-now):not(.product-tabs__tab):not([class*="swiper"]):not([class*="swatch"]):not(.sticky-cart__btn):not(.cart-drawer__checkout):not(.cart-qty-btn):not([data-cart-close]):not(.coll-sort__btn):not(.coll-filter-btn):not(.tv-age-pill):not(.tv-type-card):not(.tv-theme-pill):not(.tv-theme-more):not(.cs-arrow):not(.cr-card__btn):not(.tlv-sb-signin):not(.coll-back-top-btn):not(.coll-read-more):active,
.btn:active {
  box-shadow:
    inset 4px 4px 10px rgba(163, 177, 198, 0.6),
    inset -4px -4px 10px rgba(255, 255, 255, 0.9) !important;
  transform: translateY(1px) !important;
}

/* Cart page checkout button */
a.tv-checkout-btn { background:#ff42a1 !important; color:#fff !important; border-radius:999px !important; box-shadow:0 4px 14px rgba(255,66,161,0.35) !important; display:block !important; text-align:center !important; text-decoration:none !important; padding:1rem !important; font-weight:800 !important; font-size:16px !important; border:none !important; transition:opacity 0.2s !important; }
a.tv-checkout-btn:hover { opacity:0.88 !important; color:#fff !important; box-shadow:0 4px 14px rgba(255,66,161,0.35) !important; }

/* Grab It button: solid pink */
.product-card .product-card__footer .product-card__cta,
.product-card .product-card__cta {
  background: #ff42a1 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,66,161,0.35) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}

.product-card:hover .product-card__footer .product-card__cta,
.product-card:hover .product-card__cta {
  background: #ff42a1 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,66,161,0.35) !important;
}

/* Button hover: pressed look */
.product-card__cta:hover,
.product-card:hover .product-card__cta:hover,
.product-card:hover .product-card__footer .product-card__cta:hover {
  background: #ff42a1 !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.22) !important;
  transform: scale(0.97) !important;
}

.product-card__cta:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 4px 4px 10px rgba(163, 177, 198, 0.6),
    inset -4px -4px 10px rgba(255, 255, 255, 0.9) !important;
}

/* Collection back button */
.collection-back-btn {
  border: none !important;
  background: linear-gradient(145deg, #f0f3f8, #ffffff) !important;
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.95),
    6px 6px 14px rgba(163, 177, 198, 0.4) !important;
  color: #0a0a0a !important;
  transition:
    box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    text-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.2s cubic-bezier(0.33, 1, 0.68, 1) !important;
}
.collection-back-btn:hover {
  color: hsl(330, 100%, 55%) !important;
  text-shadow:
    0 0 10px hsla(330, 100%, 63%, 0.6),
    0 0 20px hsla(187, 85%, 53%, 0.35) !important;
}
.collection-back-btn:active {
  box-shadow:
    inset 4px 4px 10px rgba(163, 177, 198, 0.6),
    inset -4px -4px 10px rgba(255, 255, 255, 0.9) !important;
  transform: translateY(1px) !important;
}

/* =========================================================
   WET GLASS - thin lines in header, glitch filler (1s)
   ========================================================= */

.site-header { position: relative; overflow: visible; }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-image:
    linear-gradient(92deg, transparent 0%, transparent 18%, rgba(135, 206, 250, 0.18) 18.3%, transparent 18.6%, transparent 40%, rgba(255, 180, 120, 0.12) 40.2%, transparent 40.5%, transparent 65%, rgba(135, 206, 250, 0.15) 65.3%, transparent 65.7%, transparent 82%, rgba(255, 255, 255, 0.25) 82.2%, transparent 82.5%, transparent 100%),
    linear-gradient(88deg, transparent 0%, transparent 30%, rgba(180, 200, 230, 0.12) 30.2%, transparent 30.5%, transparent 55%, rgba(135, 206, 250, 0.1) 55.3%, transparent 55.6%, transparent 100%);
  background-size: 200% 100%, 180% 100%;
  opacity: 0;
  animation: wetGlassGlitch 60s linear infinite;
}
@keyframes wetGlassGlitch {
  0%, 98.3% { opacity: 0; background-position: 0% 0%, 0% 0%; }
  98.4% { opacity: 0.7; background-position: 10% 0%, -5% 0%; }
  98.6% { opacity: 0.2; background-position: 80% 0%, 60% 0%; }
  98.9% { opacity: 0.9; background-position: -20% 0%, 30% 0%; }
  99.2% { opacity: 0.4; background-position: 120% 0%, 90% 0%; }
  99.5% { opacity: 0.75; background-position: 50% 0%, -30% 0%; }
  99.9% { opacity: 0; background-position: 100% 0%, 100% 0%; }
  100% { opacity: 0; background-position: 0% 0%, 0% 0%; }
}
.site-header__inner { position: relative; z-index: 2; }

/* SPHERE-LABEL-HOVER-SIZE */
.category-sphere__label{transition:font-size 0.25s ease, 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;}
.category-sphere:hover .category-sphere__label{font-size:15px !important;}

/* SPHERE-GLASSMORPH */
.category-sphere, .category-sphere * { transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.category-sphere__ball {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-right-color: rgba(255, 255, 255, 0.15) !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.category-sphere:hover .category-sphere__icon {
  transform: translate(-4px, -12px) rotate(-10deg) scale(1.2) !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12)) !important;
  opacity: 1 !important;
}
.category-sphere__label {
  transform: translateY(0);
}
.category-sphere:hover .category-sphere__label {
  transform: translateY(2px) !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}
.category-sphere:hover .category-sphere__ball {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 45px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
/* SPHERE-GLASSMORPH-END */

/* Smoother product card hover */
.product-card {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-card:hover { transform: translateY(-4px) !important; }

.product-card img,
.product-card .product-card__image {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-card:hover img,
.product-card:hover .product-card__image {
  transform: scale(1.04) !important;
}

.product-card .product-card__body {
  transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-card .product-card__body::before {
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.product-card .product-card__title,
.product-card .card__heading,
.product-card h3,
.product-card .product-card__name,
.product-card .product-card__price,
.product-card .price,
.product-card .price__regular,
.product-card .price-item {
  transition:
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.product-card .product-card__title::after,
.product-card .card__heading::after,
.product-card h3::after,
.product-card .product-card__name::after {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Futuristic glitchy grid background for category section */
section.category-arc {
  position: relative !important;
  overflow: hidden !important;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 200, 255, 0.06) 0px, rgba(0, 200, 255, 0.06) 1px,
      transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg,
      rgba(0, 200, 255, 0.05) 0px, rgba(0, 200, 255, 0.05) 1px,
      transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg,
      rgba(255, 0, 180, 0.025) 0px, rgba(255, 0, 180, 0.025) 1px,
      transparent 1px, transparent 4px),
    radial-gradient(ellipse at center, rgba(10, 20, 40, 0.04), transparent 70%) !important;
}

section.category-arc::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.35) 15%, transparent 16%, transparent 30%, rgba(255, 0, 180, 0.25) 45%, transparent 46%, transparent 70%, rgba(0, 240, 255, 0.3) 82%, transparent 83%) 0 25% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0, 240, 255, 0.25) 40%, transparent 41%, transparent 60%, rgba(255, 255, 0, 0.2) 75%, transparent 76%) 0 68% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 180, 0.3) 10%, transparent 11%, transparent 55%, rgba(0, 240, 255, 0.3) 70%, transparent 71%) 0 88% / 100% 1px no-repeat !important;
  z-index: 0 !important;
  animation: glitch-sweep 5s steps(10) infinite !important;
}

section.category-arc::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(0deg, transparent 0%, rgba(0, 240, 255, 0.2) 30%, transparent 31%, transparent 60%, rgba(255, 0, 180, 0.18) 75%, transparent 76%) 8% 0 / 1px 100% no-repeat,
    linear-gradient(0deg, transparent 0%, transparent 20%, rgba(0, 240, 255, 0.15) 40%, transparent 41%) 22% 0 / 1px 100% no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 255, 0, 0.15) 15%, transparent 16%, transparent 70%, rgba(0, 240, 255, 0.2) 85%, transparent 86%) 66% 0 / 1px 100% no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(0, 240, 255, 0.2) 55%, transparent 56%) 93% 0 / 1px 100% no-repeat !important;
  z-index: 0 !important;
  animation: glitch-flicker 3.2s steps(8) infinite !important;
}

.category-arc__grid,
.all-products-btn__wrapper {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes glitch-sweep {
  0%   { background-position: 0 25%, 0 68%, 0 88%; opacity: 0.9; }
  20%  { background-position: -10% 25%, 5% 68%, -3% 88%; opacity: 1; }
  22%  { background-position: -10% 25%, 5% 68%, -3% 88%; opacity: 0.3; }
  24%  { background-position: -10% 25%, 5% 68%, -3% 88%; opacity: 1; }
  45%  { background-position: 15% 25%, -8% 68%, 4% 88%; opacity: 0.85; }
  70%  { background-position: 3% 25%, 12% 68%, -6% 88%; opacity: 1; }
  72%  { background-position: 3% 25%, 12% 68%, -6% 88%; opacity: 0.2; }
  74%  { background-position: 3% 25%, 12% 68%, -6% 88%; opacity: 1; }
  100% { background-position: 0 25%, 0 68%, 0 88%; opacity: 0.9; }
}

@keyframes glitch-flicker {
  0%, 100% { opacity: 0.9; }
  8%       { opacity: 0.3; }
  10%      { opacity: 1; }
  48%      { opacity: 0.85; }
  52%      { opacity: 0.2; }
  54%      { opacity: 1; }
  80%      { opacity: 0.6; }
  82%      { opacity: 1; }
}

/* Hovered sphere — soft 10% shadow */
.category-sphere:hover .category-sphere__ball,
.category-sphere__ball:hover {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    rgba(255, 255, 255, 0.35) 0 1px 0 0 inset !important;
}

/* ALL PRODUCTS — thinner text */
html body a.all-products-btn,
html body .all-products-btn {
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
}

/* Sphere — more depth */
.category-sphere__ball {
  background:
    radial-gradient(circle at 30% 22%,
      rgba(255, 255, 255, 1) 0%,
      rgba(248, 250, 252, 0.95) 18%,
      rgba(225, 230, 238, 0.85) 45%,
      rgba(188, 196, 210, 0.75) 72%,
      rgba(150, 160, 180, 0.65) 100%) !important;
  box-shadow:
    0 18px 34px rgba(20, 30, 60, 0.16),
    0 6px 12px rgba(20, 30, 60, 0.10),
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -10px 20px rgba(80, 90, 120, 0.18),
    inset 4px 4px 8px rgba(255, 255, 255, 0.35) !important;
}

/* Padding below ALL PRODUCTS */
.all-products-btn__wrapper {
  padding-bottom: 56px !important;
}

/* Prices: dark */
.product-card .product-card__price { color: #111 !important; margin-top: 6px !important; }
.product-card:hover .product-card__price { color: #111 !important; }

/* Remove strokes from all buttons (keep ALL PRODUCTS outline) */
html body button:not(.cr-card__btn),
html body .btn,
html body .see-all-btn,
html body a.see-all-btn,
html body [class*="btn"]:not(.all-products-btn):not(.all-products-btn__wrapper):not(.product-variants__btn):not(.cr-card__btn) {
  border: 0 !important;
  outline: 0 !important;
}
html body .product-card .product-card__cta,
html body .product-card .product-card__footer .product-card__cta {
  border-width: 0 !important;
  border-style: none !important;
}

/* Remove stroke from ALL PRODUCTS */
html body a.all-products-btn,
html body .all-products-btn {
  border: 0 !important;
  outline: 0 !important;
}

/* Doubled titles */
html body .section-title,
html body h2.section-title {
  font-size: 128px !important;
  line-height: 1.02 !important;
}
@media (max-width: 768px) {
  html body .section-title { font-size: 72px !important; }
}

/* Nav dropdown — keep open when moving to submenu */
html body .nav-dropdown {
  position: relative !important;
  padding-bottom: 18px !important;
  margin-bottom: -18px !important;
}
html body .nav-dropdown::before {
  content: "" !important;
  position: absolute !important;
  left: -10px !important;
  right: -10px !important;
  top: 100% !important;
  height: 20px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 1001 !important;
  display: block !important;
}
html body .nav-dropdown:hover .nav-dropdown__menu,
html body .nav-dropdown__menu:hover,
html body .nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scaleY(1) translateY(0) !important;
  transition-delay: 0s !important;
}
html body .nav-dropdown__menu {
  transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s !important;
  pointer-events: auto !important;
}
html body .site-header,
html body header.site-header {
  z-index: 100 !important;
  position: relative !important;
}

/* Sphere: thin glowing pink ring idle, fades to 0 on hover */
html body .category-sphere__ball {
  box-shadow:
    0 0 0 1px rgba(255, 66, 161, 0.55),
    0 0 8px rgba(255, 66, 161, 0.45),
    0 0 18px rgba(255, 66, 161, 0.25),
    0 18px 34px rgba(20, 30, 60, 0.16),
    0 6px 12px rgba(20, 30, 60, 0.10),
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -10px 20px rgba(80, 90, 120, 0.18),
    inset 4px 4px 8px rgba(255, 255, 255, 0.35) !important;
}
html body .category-sphere:hover .category-sphere__ball,
html body .category-sphere__ball:hover {
  box-shadow:
    0 0 0 0px rgba(255, 66, 161, 0),
    0 0 0 rgba(255, 66, 161, 0),
    0 0 0 rgba(255, 66, 161, 0),
    0 14px 32px rgba(30, 40, 70, 0.10),
    0 4px 10px rgba(30, 40, 70, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -6px 14px rgba(200, 210, 225, 0.35) !important;
}
/* GRAB IT uppercase + no colored glow on hover */
.product-card .product-card__cta,
.product-card__cta {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.product-card .product-card__cta: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,
.product-card__cta--orange:hover {
  box-shadow:
    -4px -4px 10px rgba(255,255,255,0.85),
     4px  4px 10px rgba(163,177,198,0.35) !important;
  text-shadow: none !important;
}

/* Grid: monochrome, higher opacity */
.category-arc::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(40,50,70,0.07) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, transparent 0 1px, rgba(40,50,70,0.65) 1px 2px, transparent 2px 100%),
    linear-gradient(90deg, transparent 0 2px, rgba(40,50,70,0.50) 2px 3px, transparent 3px 100%),
    radial-gradient(circle 2px at 50% 50%, rgba(40,50,70,0.85) 0 100%, transparent 101%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(40,50,70,0.14) 39px 40px, transparent 40px 80px),
    linear-gradient(to bottom, transparent 0 159px, rgba(40,50,70,0.55) 159px 160px, transparent 160px 100%),
    linear-gradient(to right, rgba(40,50,70,0.65) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,50,70,0.65) 1px, transparent 1px),
    linear-gradient(to right, rgba(40,50,70,0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,50,70,0.32) 1px, transparent 1px),
    linear-gradient(to right, rgba(40,50,70,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,50,70,0.15) 1px, transparent 1px) !important;
}
/* ========================================================================
   TOYLVIA — Consolidated custom overrides
   ======================================================================== */

/* ---------- 1. SPHERES: solid neumorphic fills, no pink glow ---------- */
html body .category-sphere__ball {
  background: radial-gradient(circle at 30% 22%, #ffffff 0%, #f8fafc 18%, #e8edf3 58%, #d5dde6 100%) !important;
  box-shadow:
    inset -8px -10px 20px rgba(160, 170, 185, 0.45),
    inset  6px  8px 18px rgba(255, 255, 255, 0.95),
    0 12px 28px rgba(60, 70, 90, 0.18),
    0 4px 10px rgba(60, 70, 90, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1) !important;
}
html body .category-sphere:hover .category-sphere__ball {
  transform: none !important; /* kill theme's translateY(-4px) jump */
}
html body .category-sphere__shadow { display: none !important; }

/* ---------- 2. SPHERES: center icon + label, layered above blur ---------- */
html body .category-sphere__ball {
  position: relative !important;
  overflow: hidden !important;
}
html body .category-sphere__ball .category-sphere__icon,
html body .category-sphere__ball .category-sphere__label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  text-align: center !important;
}

/* ---------- 3. SPHERE HOVER: icon fades out before label fades in ------ */
html body .category-sphere__icon {
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .category-sphere__label {
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.38s !important;
}
html body .category-sphere:hover .category-sphere__icon,
html body .category-sphere__ball:hover .category-sphere__icon {
  opacity: 0 !important;
  filter: blur(4px) !important;
}
html body .category-sphere:hover .category-sphere__label,
html body .category-sphere__ball:hover .category-sphere__label {
  opacity: 1 !important;
}

/* ---------- 4. SPHERE HOVER: blurred overlay (text stays crisp) ------- */
html body .category-sphere__ball::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: inherit !important;
  filter: blur(0px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
  z-index: 0 !important;
}
html body .category-sphere:hover .category-sphere__ball::before,
html body .category-sphere__ball:hover::before {
  opacity: 1 !important;
  filter: blur(2px) !important;
}

/* ---------- 5. ALL PRODUCTS button: no colored glow on hover ---------- */
html body .all-products-btn,
html body .all-products-btn:hover,
html body .all-products-btn:focus {
  text-shadow: none !important;
  animation: none !important;
}
html body .all-products-btn:hover {
  box-shadow:
    inset 2px 2px 6px rgba(255,255,255,0.9),
    inset -2px -2px 6px rgba(180,190,210,0.4),
    0 6px 14px rgba(60,70,90,0.14) !important;
  filter: none !important;
}

/* ---------- 6. SECTION TITLES: 64px (Fresh Drops, Best Sellers, Under $50) */
html body h2.section-title,
html body h2.section-title.section-title--cyan,
html body .section-title {
  font-size: 64px !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

/* ---------- 7. TRUST ICONS: 40x40 ---------- */
html body .trust-badges svg,
html body .trust-icons svg,
html body [class*="trust"] svg {
  width: 40px !important;
  height: 40px !important;
}

/* ---------- 8. GRAB IT: uppercase, no colored glow, layered hover ----- */
html body .product-card .product-card__footer .product-card__cta,
html body .product-card__cta {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}
html body .product-card .product-card__cta,
html body .product-card .product-card__cta:hover,
html body .product-card .product-card__cta:focus {
  box-shadow: none !important;
}

/* Card hover (not button directly): keep white text */
html body .product-card:hover .product-card__cta {
  color: #fff !important;
}
/* Button hover directly: pink fill + white text */
html body .product-card .product-card__cta:hover,
html body .product-card__cta:hover {
  background: #ff42a1 !important;
  color: #ffffff !important;
  border-color: #ff42a1 !important;
}

/* ---------- 9. NAV DROPDOWN: bridge so menu doesn't disappear --------- */
html body .nav-dropdown { position: relative; }
html body .site-header__nav-link,
html body .nav-dropdown__trigger {
  padding-bottom: 22px !important;
}
html body .nav-dropdown__menu,
html body .nav-dropdown .dropdown-menu {
  padding-top: 14px !important;
  margin-top: 0 !important;
}
html body .nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  background: transparent;
  pointer-events: auto;
}
/* --- Icon: perfectly centered with high-specificity override -------- */
html body .category-arc .category-sphere .category-sphere__ball .category-sphere__icon:not(#_x_) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 2 !important;
}
html body .category-arc .category-sphere:hover .category-sphere__ball .category-sphere__icon:not(#_x_) {
  transform: translate(-50%, -50%) !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
}

/* --- Sphere: slightly transparent glass fill ----------------------- */
html body .category-arc .category-sphere__ball {
  background: radial-gradient(circle at 30% 22%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(248, 250, 252, 0.78) 18%,
    rgba(232, 237, 243, 0.70) 58%,
    rgba(213, 221, 230, 0.65) 100%) !important;
  backdrop-filter: blur(6px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
}
html body .category-arc .category-sphere__ball::before {
  background: inherit !important;
}
/* Icon: perfectly centered - high specificity to beat theme */
html body .category-arc .category-sphere .category-sphere__ball .category-sphere__icon:not(#_x_) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .category-arc .category-sphere:hover .category-sphere__ball .category-sphere__icon:not(#_x_) {
  transform: translate(-50%, -50%) !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
}

/* Sphere: translucent glass */
html body .category-arc .category-sphere__ball {
  background: radial-gradient(circle at 30% 22%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(248, 250, 252, 0.78) 18%,
    rgba(232, 237, 243, 0.70) 58%,
    rgba(213, 221, 230, 0.65) 100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
          backdrop-filter: blur(6px) saturate(1.1) !important;
}
html body .category-arc .category-sphere__ball::before {
  background: inherit !important;
}


/* Pill (hover-morphed state): extra translucent glass */
html body .category-arc .category-sphere:hover .category-sphere__ball {
  background: radial-gradient(circle at 30% 22%,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(248, 250, 252, 0.42) 18%,
    rgba(232, 237, 243, 0.34) 58%,
    rgba(213, 221, 230, 0.28) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
          backdrop-filter: blur(10px) saturate(1.15) !important;
  box-shadow:
    inset -4px -6px 14px rgba(160, 170, 185, 0.25),
    inset  3px  4px 10px rgba(255, 255, 255, 0.55),
    0 8px 20px rgba(60, 70, 90, 0.10),
    0 3px 8px rgba(60, 70, 90, 0.06) !important;
}
/* === NAV Z-INDEX: header wins over all main content === */
html body #shopify-section-header,
html body .shopify-section--header {
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}
html body main.toylvia-main {
  z-index: 10 !important;
}
html body .site-header {
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}
html body .nav-dropdown {
  z-index: 9999 !important;
}
html body .nav-dropdown__menu,
html body .nav-dropdown .dropdown-menu {
  z-index: 10000 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}
html body .category-arc {
  position: relative !important;
  z-index: 1 !important;
}
html body .category-arc .category-sphere .category-sphere__ball .category-sphere__label,
html body .category-sphere .category-sphere__ball .category-sphere__label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body .category-arc .category-sphere:hover .category-sphere__ball .category-sphere__label,
html body .category-sphere:hover .category-sphere__ball .category-sphere__label {
  transform: none !important;
}
/* ===== Align nav items horizontally ===== */
html body .site-header__nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
html body .site-header__nav > .site-header__nav-link,
html body .site-header__nav > .nav-dropdown,
html body .site-header__nav > .nav-dropdown > .site-header__nav-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body .site-header__nav-link {
  padding: 10px 18px !important;
}
html body .nav-dropdown {
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 9999 !important;
}
html body .nav-dropdown > a.site-header__nav-link {
  padding: 10px 18px !important;
}

/* ===== Kill oversized invisible hover catchers ===== */
html body .nav-dropdown::before,
html body .nav-dropdown::after {
  content: none !important;
  display: none !important;
}

/* ===== Dropdown menu: only opens on direct hover ===== */
html body .nav-dropdown__menu {
  top: 100% !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  clip-path: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border-radius: 0.75rem !important;
}
html body .nav-dropdown:hover .nav-dropdown__menu,
html body .nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: none !important;
  transform: translateY(0) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s !important;
}

/* Small bridge under the trigger so cursor can travel to the menu */
html body .nav-dropdown > a.site-header__nav-link::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 10px !important;
  background: transparent !important;
}

html body .site-header__nav-link,
html body .nav-dropdown__trigger {
  padding-bottom: 10px !important;
}
html body .category-arc .category-sphere:hover .category-sphere__ball,
html body .category-sphere:hover .category-sphere__ball,
html body .category-sphere__ball:hover {
  background: rgba(255, 255, 255, 0.01) !important;
  background-image: none !important;
  backdrop-filter: blur(2px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 8px 22px rgba(60, 70, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html body .category-sphere:hover .category-sphere__ball::before,
html body .category-sphere:hover .category-sphere__ball::after {
  opacity: 0.1 !important;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0) 65%) !important;
  filter: blur(2px) !important;
}
/* On un-hover: gentle, slightly-delayed icon return */
html body .category-arc .category-sphere .category-sphere__ball .category-sphere__icon:not(#_x_),
html body .category-sphere .category-sphere__icon {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s !important;
}

/* While hovering: icon hides quickly with no delay */
html body .category-arc .category-sphere:hover .category-sphere__ball .category-sphere__icon:not(#_x_),
html body .category-sphere:hover .category-sphere__icon {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
              filter 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s !important;
}
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.launch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;          /* was #000 — now see-through */
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: none;
  isolation: isolate;
  cursor: pointer;
}

/* The rotating neon ring — drawn OUTSIDE the button, nothing fills the center */
.launch-btn::before {
  content: "";
  position: absolute;
  inset: -2px;                      /* border thickness */
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--btn-angle),
    #00e5ff,
    #ff00d4,
    #00e5ff
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: btn-spin 3s linear infinite;
  z-index: -1;
  pointer-events: none;
}

.launch-btn .arrow { color: #00e5ff; }

@keyframes btn-spin {
  to { --btn-angle: 360deg; }
}

/* ============================================================
   TOYLVIA V14 PERMANENT STYLES
   ============================================================ */
.site-header::before { background: none !important; opacity: 0 !important; display: none !important; }
.site-header { box-shadow: none !important; }
#shopify-section-template--29786103284043__glitch-bg { display: none !important; }
.category-sphere, .category-arc__grid { display: none !important; }
html body h2.section-title,
html body h2.section-title.section-title--pink,
html body h2.section-title.section-title--cyan,
html body h2.section-title.section-title--yellow,
html body h2.section-title.section-title--purple,
html body .section-title {
  font-size: 40px !important;
  font-weight: 300 !important;
  letter-spacing: 1px !important;
}
.trust-badges__inner {
  gap: 56px !important;
  padding: 32px 16px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.trust-badge { gap: 14px !important; }
.trust-badge__icon { width: 24px !important; height: 24px !important; stroke-width: 1.6 !important; }
.trust-badge span { font-size: 15px !important; letter-spacing: 1px !important; font-weight: 600 !important; }
html body .all-products-btn__wrapper {
  padding-top: 90px !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}
html body #shopify-section-template--29786103284043__trust-badges .trust-badges { padding-top: 8px !important; }
#clg-hero, .clg-hero { position: relative; padding: 40px 24px 12px; overflow: hidden; }
.clg-bg-blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.01; pointer-events: none; z-index: 0; }
.clg-bg-blob--pink { width: 520px; height: 520px; background: #ff5aa8; top: -120px; left: -120px; }
.clg-bg-blob--cyan { width: 520px; height: 520px; background: #22d3ee; bottom: -160px; right: -120px; }
.clg-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.clg-pill { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 280px; border-radius: 40px; text-decoration: none; color: #111; overflow: hidden; isolation: isolate; transition: transform .35s ease, box-shadow .35s ease; }
.clg-pill:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(34,211,238,0.35); }
.clg-bend, .clg-face, .clg-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.clg-bend { backdrop-filter: blur(3px) url(#clg-glass-blur); -webkit-backdrop-filter: blur(3px); z-index: 0; }
.clg-face { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.08)); box-shadow: 0 8px 8px rgba(0,0,0,0.08); z-index: 1; }
.clg-edge { border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(255,255,255,0.25); z-index: 2; }
.clg-icon { position: relative; z-index: 3; width: 110px; height: 110px; border-radius: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 25px 24px rgba(0,0,0,0.5); transition: transform 0.7s ease; }
.clg-icon img { width: 82%; height: 82%; object-fit: contain; transition: transform .35s ease; }
/* scale now handled dynamically by JS */
.clg-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.clg-title { font-size: 18px; font-weight: 800; letter-spacing: 1.5px; transition: color .25s ease; }
.clg-slogan { font-size: 13px; color: #555; font-weight: 500; }
.clg-pill:hover .clg-title { color: #ff5aa8; }
#clg-tech-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.25; transition: opacity 0.4s ease; -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent), linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); -webkit-mask-composite: destination-in; mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent), linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); mask-composite: intersect; }
#clg-hero:hover #clg-tech-grid, .clg-hero:hover #clg-tech-grid { opacity: 0.25; }
html body .product-card .product-card__cta,
html body .product-card .product-card__footer .product-card__cta {
  background: #ff42a1 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255,66,161,0.35) !important;
}
html body .product-card .product-card__cta:hover,
html body .product-card .product-card__footer .product-card__cta:hover {
  background: #ff42a1 !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.22) !important;
  transform: scale(0.97) !important;
}
@media (max-width: 1024px) {
  html body h2.section-title, html body .section-title { font-size: 34px !important; }
  .trust-badges__inner { gap: 36px !important; }
  .trust-badge__icon { width: 22px !important; height: 22px !important; }
  .clg-pill { height: 240px; }
  .clg-icon { width: 96px; height: 96px; }
}
@media (max-width: 768px) {
  html body h2.section-title, html body .section-title { font-size: 26px !important; }
  .trust-badges__inner { gap: 20px !important; padding: 20px 12px !important; }
  .trust-badge { flex-direction: row !important; gap: 8px !important; text-align: left !important; flex: 1 1 40% !important; }
  .trust-badge__icon { width: 18px !important; height: 18px !important; }
  .trust-badge span { font-size: 12px !important; }
  html body .all-products-btn__wrapper { padding-top: 50px !important; }
  .all-products-btn { font-size: 14px !important; padding: 12px 28px !important; }
  .clg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .clg-pill { height: 200px; border-radius: 32px; }
  .clg-icon { width: 80px; height: 80px; border-radius: 20px; }
  .clg-title { font-size: 13px; }
  .clg-slogan { font-size: 11px; }
}
@media (max-width: 480px) {
  html body h2.section-title, html body .section-title { font-size: 22px !important; letter-spacing: 0.5px !important; }
  .trust-badges__inner { gap: 14px !important; }
  .trust-badge__icon { width: 14px !important; height: 14px !important; }
  .trust-badge span { font-size: 11px !important; }
  .clg-pill { height: 180px; }
  .clg-icon { width: 68px; height: 68px; }
  .all-products-btn { font-size: 13px !important; padding: 10px 22px !important; }
}
/* END TOYLVIA V14 */
/* TOYLVIA V14 — specificity boosts */
html body .trust-badge[class] .trust-badge__icon,
html body .trust-badge[class] svg.trust-badge__icon {
  width: 28px !important;
  height: 28px !important;
}
@media (max-width: 1024px) {
  html body .trust-badge[class] .trust-badge__icon { width: 28px !important; height: 28px !important; }
}
@media (max-width: 768px) {
  html body .trust-badge[class] .trust-badge__icon { width: 20px !important; height: 20px !important; }
}
@media (max-width: 480px) {
  html body .trust-badge[class] .trust-badge__icon { width: 16px !important; height: 16px !important; }
}
.site-header {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
.site-header__nav {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(6px);
}

/* === GRID PANEL FADED EDGES === */
.clg-hero canvas,
.clg-grid {

}

/* === PRODUCT CARD GRADIENT BORDER EFFECT === */
.product-card {
  overflow: visible !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.product-card:hover {
  transform: translateY(-2px);
}
.product-card--pink { border-color: rgba(255,66,161,0.2) !important; }
.product-card--yellow { border-color: rgba(255,216,61,0.25) !important; }
.product-card--cyan { border-color: rgba(33,213,237,0.25) !important; }

/* ============================================================
   TOYLVIA MOBILE & UI FIXES - Full Session Summary
   Add to: toylvia.css (Shopify Theme Editor > Assets)
   ============================================================ */

/* ----------------------------------------------------------
   1. DIAGONAL LINES FIX
   The product-card::after pseudo-element runs a cardGlossSweep
   animation at rotate(25deg) which bleeds outside card borders.
   Fix: clip each card so the animation stays inside.
   ---------------------------------------------------------- */
.product-card {
  overflow: hidden !important;
}

/* ----------------------------------------------------------
   2. HAMBURGER ICON ON MOBILE
   The site-header__inner had min-width: 920px hardcoded,
   pushing the hamburger button off-screen to the right.
   The desktop nav also had competing !important display:flex
   rules that prevented the 768px media query from hiding it.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header__nav,
  html body .site-header__nav {
    display: none !important;
  }

  #hamburger-btn,
  .hamburger-btn {
    display: flex !important;
  }

  .site-header__inner {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
  }

  .site-header__logo {
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .site-header__logo img {
    height: 36px !important;
    width: auto !important;
  }

  .site-header__actions {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* ----------------------------------------------------------
   3. TRUST ICONS - CENTERED 2x2 GRID
   The .trust-badge items had height: 0px (flex column with no
   height constraint). Switched container to a 2-column CSS grid
   so each icon+label pair renders correctly and is centered.
   ---------------------------------------------------------- */
.trust-badges {
  display: block !important;
  padding: 16px 20px 30px !important;
  box-sizing: border-box !important;
}

.trust-badges__inner {
  display: grid !important;
  gap: 16px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-items: center !important;
      grid-template-columns: repeat(4, 1fr) !important;
}

.trust-badge {
  height: auto !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 0.6rem !important;
  padding: 0 !important;
}

.trust-badge span {
  font-size: 11px !important;
  text-align: center !important;
}

.trust-badge__icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ----------------------------------------------------------
   4. SECTION TITLES CENTERED & FULLY VISIBLE
   The .scroll-reveal wrapper had padding: 40px 60px leaving
   only ~206px of content width on mobile — too narrow for a
   40px uppercase title. Reduced side padding and font size.
   ---------------------------------------------------------- */
.scroll-reveal {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.section-title {
  font-size: 28px !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: inline-block !important;
  max-width: 100% !important;
}

.section-title__line {
  margin: 0 auto !important;
}

/* ----------------------------------------------------------
   5. ALL PRODUCTS BUTTON - CENTERED, LESS SPACE ABOVE
   The .category-arc section had padding-top: 80px and the
   .all-products-btn__wrapper had padding-top: 50px — both
   creating a large empty gap above the button on mobile.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .category-arc,
  .category-arc.scroll-reveal {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }

  .all-products-btn__wrapper {
    padding: 8px 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .all-products-btn {
    margin: 0 auto !important;
    position: static !important;
    top: auto !important;
  }
}

/* ----------------------------------------------------------
   6. CHAT BUTTON - PINK
   The floating chat trigger was a grey neumorphic button.
   Changed to pink gradient matching the brand color.
   ---------------------------------------------------------- */
html body .chat-widget__btn {
  background: linear-gradient(135deg, #ff42a1, #ff78be) !important;
  box-shadow: 0 8px 24px rgba(255, 66, 161, 0.4),
              0 2px 8px rgba(255, 66, 161, 0.2) !important;
  color: #fff !important;
}
html body .chat-widget__btn svg,
html body .chat-widget__btn svg path {
  stroke: #fff !important;
  fill: none !important;
}

/* ----------------------------------------------------------
   7. BACK BUTTON - CLOSER TO HEADER ON MOBILE
   The .back-btn had margin-top: 28px !important in the theme
   CSS, and on some pages the .scroll-reveal parent added
   another 60px of padding-top — creating a large gap below
   the header before the button appeared.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  html body .back-btn,
  html body .collection-back-btn {
    margin-top: 0px !important;
  }

  .scroll-reveal:has(.back-btn) {
    padding-top: 2px !important;
  }

  html body .product-main {
    padding-top: 8px !important;
  }
}

/* ----------------------------------------------------------
   8. BACK BUTTON STYLES (for Cart page injection)
   The cart page (/cart) has no back button in the theme.
   Inject this element via JS (see note below) and these
   styles will automatically apply to it.
   ---------------------------------------------------------- */
.back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  font-family: Nunito, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #111 !important;
  background: rgb(248, 249, 251) !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.1),
              -6px -6px 14px rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  margin-bottom: 1.2rem !important;
}

.back-btn:hover {
  color: #ff42a1 !important;
  text-decoration: none !important;
}

.back-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5 !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* === MOBILE MENU RESPONSIVE FIX === */
/* The hamburger shows at max-width:900px but inline header style hides mobile-nav at min-width:769px.
   This overrides that to make the slide-drawer work at 769-900px range. */
@media (max-width: 900px) {
  .mobile-nav {
    display: block !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease !important;
  }
  .mobile-nav.active {
    display: block !important;
    transform: translateX(0) !important;
  }
  .mobile-nav-overlay {
    display: none !important;
  }
  .mobile-nav-overlay.active {
    display: block !important;
  }
}

/* === TITLES CENTERED ON MOBILE === */
@media (max-width: 768px) {
  /* Page/section headings in scroll-reveal wrappers */
  .scroll-reveal h1,
  .scroll-reveal h2 {
    text-align: center !important;
  }

  /* Footer column layout - center content in single-column mode */
  .site-footer__col {
    text-align: center !important;
  }
  .site-footer__col-title {
    text-align: center !important;
  }
  .site-footer__col-links {
    text-align: center !important;
  }
  .site-footer__col-links li {
    text-align: center !important;
  }
}


/* === CATEGORY SPHERE HOVER LIGHT EMISSION EFFECT === */
/* Dim all spheres when any sibling is hovered */
.category-arc__grid:has(.category-sphere:hover) .category-sphere {
  filter: brightness(0.55) saturate(0.8);
    transition: filter 0.45s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hovered sphere gets bright with glow / light emission */
    .category-arc__grid:has(.category-sphere:hover) .category-sphere:hover {
      filter: brightness(1.25) saturate(1.15) drop-shadow(0 0 18px rgba(255,255,255,0.55)) drop-shadow(0 0 40px rgba(255,255,255,0.25));
        transform: translateY(-6px) scale(1.06);
          transition: filter 0.45s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
            }

            /* ============================================================
               ICE CARD CATEGORY GRID  –  Toylvia
                  /* =====================================================
                     ICE CATEGORY CARDS — complete rewrite
                        ===================================================== */

                        /* Float keyframe */
                        @keyframes cat-ice-float {
                          0%,100% { transform: translateY(0px); }
                            50%      { transform: translateY(-10px); }
                            }

                            /* Grid container */
                            .cat-ice-grid {
                              display: flex;
                                flex-wrap: nowrap;
                                  justify-content: center;
                                    gap: 20px;
                                      padding: 40px 24px 20px;
                                        position: relative;
                                        }

                                        /* Each card link */
                                        .cat-ice-card {
                                          flex: 1 1 0;
                                            min-width: 0;
                                              position: relative;
                                                display: flex;
                                                  flex-direction: column;
                                                    align-items: center;
                                                      text-decoration: none;
                                                        cursor: pointer;
                                                          animation: cat-ice-float 3.8s ease-in-out infinite;
                                                            transition: filter 0.5s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
                                                              filter: brightness(1);
                                                                will-change: auto;
                                                                }
                                                                .cat-ice-card:nth-child(1) { animation-delay: 0.0s; }
                                                                .cat-ice-card:nth-child(2) { animation-delay: 0.5s; }
                                                                .cat-ice-card:nth-child(3) { animation-delay: 1.0s; }
                                                                .cat-ice-card:nth-child(4) { animation-delay: 1.5s; }
                                                                .cat-ice-card:nth-child(5) { animation-delay: 2.0s; }
                                                                .cat-ice-card:nth-child(6) { animation-delay: 2.5s; }

                                                                /* Ice glass frame */
                                                                .cat-ice-frame {
                                                                  position: relative;
                                                                    width: 100%;
                                                                      aspect-ratio: 1 / 1;
                                                                        border-radius: 28px;
                                                                          background:
                                                                              linear-gradient(135deg,
                                                                                    rgba(255,255,255,0.72) 0%,
                                                                                          rgba(220,240,255,0.48) 40%,
                                                                                                rgba(190,225,255,0.38) 100%);
                                                                                                  backdrop-filter: blur(18px) saturate(1.4);
                                                                                                    -webkit-backdrop-filter: blur(18px) saturate(1.4);
                                                                                                      border: 1px solid rgba(255,255,255,0.78);
                                                                                                        box-shadow:
                                                                                                            0 8px 32px rgba(120,180,255,0.18),
                                                                                                                inset 2px 2px 0 rgba(255,255,255,0.92),
                                                                                                                    inset -2px -2px 0 rgba(80,120,180,0.32),
                                                                                                                        inset 0 8px 22px rgba(255,255,255,0.72),
                                                                                                                            inset 0 -8px 22px rgba(60,100,160,0.30),
                                                                                                                                inset 6px 0 18px rgba(255,255,255,0.38),
                                                                                                                                    inset -6px 0 18px rgba(60,100,160,0.18);
                                                                                                                      overflow: hidden;
                                                                                                                        display: flex;
                                                                                                                          align-items: center;
                                                                                                                            justify-content: center;
                                                                                                                            }

                                                                                                                            /* Ice highlight top-left refraction */
                                                                                                                            .cat-ice-frame::before {
                                                                                                                              content: "";
                                                                                                                                position: absolute;
                                                                                                                                  inset: 0;
                                                                                                                                    border-radius: inherit;
                                                                                                                                      background: linear-gradient(135deg,
                                                                                                                                          rgba(255,255,255,0.55) 0%,
                                                                                                                                              rgba(255,255,255,0.0) 55%);
                                                                                                                                                pointer-events: none;
                                                                                                                                                  z-index: 2;
                                                                                                                                                  }

                                                                                                                                                  /* Corner sparkle */
                                                                                                                                                  .cat-ice-frame::after {
                                                                                                                                                    content: "";
                                                                                                                                                      position: absolute;
                                                                                                                                                        top: 10px;
                                                                                                                                                          left: 12px;
                                                                                                                                                            width: 36px;
                                                                                                                                                              height: 36px;
                                                                                                                                                                background: radial-gradient(circle,
                                                                                                                                                                    rgba(255,255,255,0.9) 0%,
                                                                                                                                                                        rgba(255,255,255,0.0) 70%);
                                                                                                                                                                          pointer-events: none;
                                                                                                                                                                            z-index: 3;
                                                                                                                                                                            }

                                                                                                                                                                            /* Ambient glow behind the card (accent color) */
                                                                                                                                                                            .cat-ice-glow {
                                                                                                                                                                              position: absolute;
                                                                                                                                                                                inset: -20px;
                                                                                                                                                                                  border-radius: 40px;
                                                                                                                                                                                    background: radial-gradient(ellipse at center,
                                                                                                                                                                                        var(--card-accent, #88ccff) 0%,
                                                                                                                                                                                            transparent 70%);
                                                                                                                                                                                              opacity: 0;
                                                                                                                                                                                                transition: opacity 0.5s ease;
                                                                                                                                                                                                  z-index: 0;
                                                                                                                                                                                                    pointer-events: none;
                                                                                                                                                                                                    }

                                                                                                                                                                                                    /* Image wrapper */
                                                                                                                                                                                                    .cat-ice-img-wrap {
                                                                                                                                                                                                      position: relative;
                                                                                                                                                                                                        width: 82%;
                                                                                                                                                                                                          aspect-ratio: 1 / 1;
                                                                                                                                                                                                            display: flex;
                                                                                                                                                                                                              align-items: center;
                                                                                                                                                                                                                justify-content: center;
                                                                                                                                                                                                                  z-index: 1;
                                                                                                                                                                                                                  }

                                                                                                                                                                                                                  /* Product image */
                                                                                                                                                                                                                  .cat-ice-img {
                                                                                                                                                                                                                    display: block;
                                                                                                                                                                                                                      width: 100%;
                                                                                                                                                                                                                        height: 100%;
                                                                                                                                                                                                                          object-fit: contain;
                                                                                                                                                                                                                            transition: filter 0.5s ease, transform 0.45s ease;
                                                                                                                                                                                                                              filter: drop-shadow(0 12px 20px rgba(0,0,0,0.18))
                                                                                                                                                                                                                                        drop-shadow(0 4px 8px rgba(0,0,0,0.1));
                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                        /* Shadow ellipse under product */
                                                                                                                                                                                                                                        .cat-ice-img-shadow {
                                                                                                                                                                                                                                          position: absolute;
                                                                                                                                                                                                                                            bottom: -4px;
                                                                                                                                                                                                                                              left: 50%;
                                                                                                                                                                                                                                                transform: translateX(-50%) scaleX(0.75) scaleY(0.3);
                                                                                                                                                                                                                                                  width: 70%;
                                                                                                                                                                                                                                                    height: 28px;
                                                                                                                                                                                                                                                      background: radial-gradient(ellipse at center,
                                                                                                                                                                                                                                                          rgba(60,80,120,0.35) 0%,
                                                                                                                                                                                                                                                              transparent 70%);
                                                                                                                                                                                                                                                                filter: blur(6px);
                                                                                                                                                                                                                                                                  border-radius: 50%;
                                                                                                                                                                                                                                                                    transition: transform 0.45s ease, opacity 0.45s ease, width 0.45s ease;
                                                                                                                                                                                                                                                                      z-index: 0;
                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                      /* Light emission from product onto background */
                                                                                                                                                                                                                                                                      .cat-ice-light-emit {
                                                                                                                                                                                                                                                                        position: absolute;
                                                                                                                                                                                                                                                                          inset: 10px;
                                                                                                                                                                                                                                                                            border-radius: 50%;
                                                                                                                                                                                                                                                                              background: radial-gradient(circle,
                                                                                                                                                                                                                                                                                  var(--card-accent, rgba(255,255,255,0.3)) 0%,
                                                                                                                                                                                                                                                                                      transparent 68%);
                                                                                                                                                                                                                                                                                        opacity: 0.18;
                                                                                                                                                                                                                                                                                          transition: opacity 0.5s ease;
                                                                                                                                                                                                                                                                                            pointer-events: none;
                                                                                                                                                                                                                                                                                              z-index: 0;
                                                                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                                                                              /* Card label */
                                                                                                                                                                                                                                                                                              .cat-ice-label {
                                                                                                                                                                                                                                                                                                margin-top: 14px;
                                                                                                                                                                                                                                                                                                  font-size: 13px;
                                                                                                                                                                                                                                                                                                    font-weight: 800;
                                                                                                                                                                                                                                                                                                      letter-spacing: 0.12em;
                                                                                                                                                                                                                                                                                                        text-transform: uppercase;
                                                                                                                                                                                                                                                                                                          color: #2d3a4a;
                                                                                                                                                                                                                                                                                                            text-align: center;
                                                                                                                                                                                                                                                                                                              transition: color 0.4s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
                                                                                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                                                                                              /* Card description */
                                                                                                                                                                                                                                                                                                              .cat-ice-desc {
                                                                                                                                                                                                                                                                                                                margin-top: 4px;
                                                                                                                                                                                                                                                                                                                  font-size: 11.5px;
                                                                                                                                                                                                                                                                                                                    color: #7a8fa6;
                                                                                                                                                                                                                                                                                                                      text-align: center;
                                                                                                                                                                                                                                                                                                                        letter-spacing: 0.03em;
                                                                                                                                                                                                                                                                                                                          transition: color 0.4s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                          /* ─── HOVER SYSTEM (mouse/trackpad only) ─── */
@media (hover: hover) and (pointer: fine) {
  .cat-ice-grid.cat-ice-active .cat-ice-card {
    filter: brightness(0.52) saturate(0.7);
  }
  .cat-ice-grid.cat-ice-active .cat-ice-card.cat-ice-on {
    filter: brightness(1.18) saturate(1.2) !important;
    transform: translateY(-14px) !important;
    animation: none !important;
  }
  .cat-ice-card.cat-ice-on .cat-ice-glow { opacity: 0.5; }
  .cat-ice-card.cat-ice-on .cat-ice-img-shadow {
    transform: translateX(-50%) scaleX(0.45) scaleY(0.18);
    width: 50%;
    opacity: 0.5;
  }
  .cat-ice-card.cat-ice-on .cat-ice-light-emit { opacity: 0.5; }
  .cat-ice-card.cat-ice-on .cat-ice-img {
    filter: drop-shadow(0 0 14px var(--card-accent, rgba(255,255,255,0.6)))
            drop-shadow(0 16px 28px rgba(0,0,0,0.22));
  }
  .cat-ice-card.cat-ice-on .cat-ice-label,
  .cat-ice-card.cat-ice-on .cat-ice-desc {
    transform: translateY(10px);
  }
  .cat-ice-card.cat-ice-on .cat-ice-label {
    background: rgba(255,255,255,0.78);
    border-radius: 6px;
    padding: 3px 8px;
  }
}

                                                                                                                                                                                                                                                                                                                                                      /* ─── RESPONSIVE ───────────────────────────────────── */
                                                                                                                                                                                                                                                                                                                                                      @media (max-width: 1024px) {
                                                                                                                                                                                                                                                                                                                                                        .cat-ice-grid { gap: 14px; padding: 30px 16px 16px; }
                                                                                                                                                                                                                                                                                                                                                          .cat-ice-frame { border-radius: 22px; }
                                                                                                                                                                                                                                                                                                                                                            .cat-ice-label

/* ═══════════════════════════════════════════════
   TRUST BADGES — FINAL OVERRIDE (always wins)
   Icon + text side by side, all badges in one row
   ═══════════════════════════════════════════════ */
html body .trust-badges {
  padding: 2rem 3rem !important;
}
html body .trust-badges__inner,
html body .trust-badges .trust-badges__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  grid-template-columns: unset !important;
  width: 100% !important;
  max-width: 1284px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .trust-badge,
html body .trust-badges .trust-badge {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  text-align: left !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
html body .trust-badge span,
html body .trust-badges .trust-badge span {
  font-size: 20px !important;
  letter-spacing: 0.18em !important;
}
@media (max-width: 768px) {
  html body .trust-badge span,
  html body .trust-badges .trust-badge span {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 768px) {
  html body .trust-badges__inner,
  html body .trust-badges .trust-badges__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  html body .trust-badge,
  html body .trust-badges .trust-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
}

/* === TRANSPARENT HEADER === */
html body header.site-header,
html body .site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .site-header::before,
html body .site-header::after { display: none !important; }
html body .site-header__nav {
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* === TRUST BADGE ICON SIZE === */
.trust-badges .trust-badge .trust-badge__icon,
.trust-badges .trust-badge[class*="trust-badge"] svg {
  width: 8px !important;
  height: 8px !important;
}

/* === BACK BUTTON: MOBILE UNIFIED STYLES === */
@media (max-width: 900px) {
  .back-btn {
    font-size: 12px !important;
    padding: 6px 12px 6px 10px !important;
    margin-top: 4px !important;
    margin-bottom: 3rem !important;
    margin-left: 0 !important;
  }
  #MainContent .product-main {
    padding-top: 8px !important;
  }
}

/* === TOUCH DEVICES: KILL ALL HOVER DIM EFFECTS === */
@media (pointer: coarse) {
  html body .cat-ice-grid .cat-ice-card,
  html body .cat-ice-grid.cat-ice-active .cat-ice-card,
  html body .cat-ice-grid:has(.cat-ice-card:hover) .cat-ice-card {
    filter: brightness(1) saturate(1) !important;
    opacity: 1 !important;
    transition: filter 0s, opacity 0s !important;
  }
  html body .product-grid .product-card__image img,
  html body .product-grid:hover .product-card__image img {
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12)) grayscale(0) !important;
    transition: none !important;
  }
}

/* Mobile + iPad: image is 1:1 square; glass panel flows BELOW the image.
   align-self:start prevents grid row stretching. Title clamped to 2 lines
   so cards are always the same compact height. Footer pinned to bottom. */
@media (max-width: 1024px) {
  html body .product-grid .product-card {
    background: #062830 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
  }
  html body .product-grid .product-card .product-card__image-wrap {
    aspect-ratio: 1/1 !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  html body .product-grid .product-card .product-card__body {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body .product-grid .product-card .product-card__footer {
    margin-top: auto !important;
  }
  html body .product-grid .product-card .product-card__title {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
    font-size: 1rem !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    min-height: 4.2em !important;
    max-height: none !important;
  }
  html body .product-grid .product-card .product-card__price { color: #fff !important; }
}

@media (max-width: 767px) {
  html body .trust-badges__inner { overflow: visible !important; flex-wrap: wrap !important; }
  html body .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .product-grid .product-card { height: auto !important; max-height: none !important; }
  /* Tighter body padding on narrow 2-col mobile cards */
  html body .product-grid .product-card .product-card__body {
    padding: 8px 8px 14px !important;
  }
  /* Shrink button and price to fit narrow cards without cropping */
  html body .product-grid .product-card .product-card__cta,
  html body .product-grid .product-card .product-card__footer .product-card__cta {
    font-size: 0.62rem !important;
    padding: 0.22rem 0.45rem !important;
    border-radius: 8px !important;
  }
  html body .product-grid .product-card .product-card__soldout {
    font-size: 0.62rem !important;
    padding: 0.22rem 0.45rem !important;
    border-radius: 8px !important;
  }
  html body .product-grid .product-card .product-card__price,
  html body .product-grid .product-card .price,
  html body .product-grid .product-card .price__regular,
  html body .product-grid .product-card .price-item {
    font-size: 0.8125rem !important;
  }
}

/* =============================================
   PRODUCT DESCRIPTION CARD
   ============================================= */
.product-desc-card {
  max-width: 1200px;
  margin: 3rem auto 2rem;
  padding: 0 1.5rem;
}

.product-desc-card__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff42a1;
  margin-bottom: 0.75rem;
}
.product-desc-card__label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background: #ff42a1;
  border-radius: 2px;
}

.product-desc-card__body {
  background: #fff;
  border-radius: 1.25rem;
  border: 2px solid hsl(var(--border));
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  padding: 2.5rem 3rem;
  font-size: 17px;
  line-height: 1.9;
  color: #333;
  position: relative;
  overflow: hidden;
}
.product-desc-card__body::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #ff42a1, hsl(var(--secondary)));
  border-radius: 4px 0 0 4px;
}

/* Headings */
.product-desc-card__body h2,
.product-desc-card__body h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ff42a1;
  margin: 2rem 0 0.6rem;
  letter-spacing: 0.01em;
}
.product-desc-card__body h2:first-child,
.product-desc-card__body h3:first-child {
  margin-top: 0;
}

/* Paragraphs */
.product-desc-card__body p {
  margin-bottom: 1.1rem;
}
.product-desc-card__body p:last-child {
  margin-bottom: 0;
}

/* Lists — custom pink bullet */
.product-desc-card__body ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.product-desc-card__body ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.55rem;
  line-height: 1.7;
}
.product-desc-card__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: #ff42a1;
  border-radius: 50%;
}

.product-desc-card__body strong {
  font-weight: 700;
  color: #111;
}

@media (max-width: 767px) {
  .product-desc-card { padding: 0 0.75rem; margin-top: 2rem; }
  .product-desc-card__body { padding: 1.5rem 1.25rem; font-size: 15px; }
  .product-desc-card__body h2,
  .product-desc-card__body h3 { font-size: 1.1rem; }
}

/* Mobile: glass overlay always on (no hover needed) */

/* === HOVERED CARD Z-INDEX (renders above adjacent row cards) === */
.product-card:hover {
  z-index: 10 !important;
}


/* === PRODUCT DESCRIPTION CARD === */
.pdc__body .pdc-badge,
.pdc__body .pdc-badge span { color: #22d3ee !important; }
.pdc__divider { border-top-color: rgba(255,66,161,0.25) !important; }

/* === SPEC TABLE — left column pink, no bold === */
#pdc-desc table td:first-child strong,
#product-desc-wrap table td:first-child strong {
  color: #ff42a1 !important;
  font-weight: 400 !important;
}

/* === SEARCH BAR: ICE GLASS (same technique as category cards) === */
html body .all-products-btn,
html body .all-products-btn:link,
html body .all-products-btn:visited {
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,66,161,0.25) !important;
  box-shadow: none !important;
  color: #111 !important;
  transform: none !important;
}
html body .all-products-btn:hover,
html body .all-products-btn:focus {
  background: rgba(255,66,161,0.06) !important;
  border-color: rgba(255,66,161,0.45) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* === HERO SEARCH ARROW: pink at rest, black on hover === */
.hero-search-btn svg { stroke: #ff42a1 !important; }
@media (hover: hover) {
  .hero-search-btn:hover svg { stroke: #111 !important; }
}
.hero-search-btn:active svg { stroke: #111 !important; }


/* === PRODUCT CARD GLASS: CYAN STYLE === */
.product-card .product-card__body::before,
.product-card--pink .product-card__body::before,
.product-card--cyan .product-card__body::before,
.product-card--yellow .product-card__body::before {
  background: linear-gradient(to bottom, rgba(34,211,238,0.22) 0%, rgba(0,160,200,0.60) 100%) !important;
}


/* ── FREE SHIPPING BAR ─────────────────────────────────────────── */
.fsbar { padding:10px 14px; background:transparent; border-radius:10px; margin:0.5rem 0; }
.fsbar--unlocked { background:transparent; color:#15803d; font-size:13px; font-weight:700; text-align:center; padding:6px 14px; border-radius:10px; }
.fsbar__text { font-size:12.5px; color:#ff42a1; font-weight:600; margin-bottom:6px; }
.fsbar__track { display:block !important; height:6px !important; min-height:6px !important; background:#dcfce7 !important; border-radius:999px !important; overflow:hidden !important; width:100% !important; box-sizing:border-box !important; }
.fsbar__fill { display:block !important; height:6px !important; min-height:6px !important; background:linear-gradient(90deg,#22c55e,#16a34a) !important; border-radius:999px !important; transition:width 0.5s ease !important; }

/* ── REWARD TIMER ─────────────────────────────────────────────── */
.pdp-reward-timer { display:flex; align-items:center; gap:8px; padding:9px 14px; background:#fff8f0; border:1.5px solid #f97316; border-radius:10px; font-size:13px; font-weight:600; color:#9a3412; }
.pdp-reward-timer svg { flex-shrink:0; stroke:#f97316; }
.reward-timer__time { font-size:14px; font-weight:800; color:#dc2626; font-variant-numeric:tabular-nums; letter-spacing:0.02em; }

/* ── URGENCY ──────────────────────────────────────────────────── */
.pdp-urgency { display:flex; align-items:center; gap:8px; padding:7px 12px; background:#fff5f5; border-radius:8px; font-size:13px; font-weight:700; color:#dc2626; margin-bottom:0.5rem; }

/* ── CTA TRUST TRIO ───────────────────────────────────────────── */
.pdp-trust-trio { display:flex; align-items:stretch; margin-top:0.9rem; border:1.5px solid #ede9fe; border-radius:0.85rem; overflow:hidden; background:#fff; }
.pdp-trust-trio__item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem; padding:0.75rem 0.4rem; text-align:center; border-right:1.5px solid #ede9fe; }
.pdp-trust-trio__item:last-child { border-right:none; }
.pdp-trust-trio__icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#fff0fa; margin-bottom:0.15rem; }
.pdp-trust-trio__icon svg { display:block; stroke:#ff42a1; }
.pdp-trust-trio__label { font-size:11.5px; font-weight:800; color:#1a1a2e; line-height:1.2; }
.pdp-trust-trio__sub { font-size:10px; font-weight:500; color:#888; line-height:1.2; }
/* empty-cart teaser in drawer */
.fsbar--empty { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#374151; padding:9px 12px; background:transparent; border-radius:10px; }
.fsbar--empty strong { color:#15803d; }

/* ── BUNDLE UPSELL ────────────────────────────────────────────── */
.cart-bundle { background:linear-gradient(135deg,#fff8fc,#fff0fa); border:2px solid #ff42a1; border-radius:16px; padding:12px 14px; margin:0.75rem 0 0.25rem; }
.cart-bundle__label { font-size:11px; font-weight:800; color:#ff42a1; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; }
.cart-bundle__row { display:flex; align-items:center; gap:10px; }
.cart-bundle__img { width:50px; height:50px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.cart-bundle__info { flex:1; min-width:0; }
.cart-bundle__title { font-size:12.5px; font-weight:700; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-bundle__price { font-size:12px; color:#888; margin-top:2px; }
.cart-bundle__add { background:#ff42a1; color:#fff; border:none; border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap; box-shadow:0 3px 10px rgba(255,66,161,0.3); flex-shrink:0; }
.cart-bundle__discount { font-size:11px; color:#16a34a; font-weight:700; margin-top:6px; text-align:center; }

/* === SOCIAL ICONS: DEFINITIVE FINAL OVERRIDE — must stay last in file === */
html body .newsletter .newsletter__socials {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 1.2rem 0 1.6rem !important;
  flex-wrap: nowrap !important;
}
html body .newsletter .newsletter__socials a.newsletter__social-link {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,66,161,0.35) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ff42a1 !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, border-color 0.2s !important;
  text-decoration: none !important;
}
html body .newsletter .newsletter__socials a.newsletter__social-link svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html body .newsletter .newsletter__socials a.newsletter__social-link:hover {
  background: rgba(255,66,161,0.12) !important;
  border-color: #ff42a1 !important;
  color: #ff42a1 !important;
}
/* Shipping policy lede — tighter tracking to prevent orphan last line */
.tlv-lede { letter-spacing: -0.02em !important; }

/* === COLLECTION SORT BUTTONS — override global button pink rule === */
.coll-sort__btn:not(.coll-sort__btn--active) {
  color: #111 !important;
  font-weight: 300 !important;
}
.coll-sort__btn--active {
  font-weight: 600 !important;
}

/* === HOME PAGE FEATURED SECTION TITLES — MOBILE CENTERING === */
@media (max-width: 767px) {
  /* fc-section has inline padding:2rem 3rem — override on mobile */
  .fc-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Allow title text to wrap instead of overflowing */
  .section-title {
    white-space: normal !important;
    text-align: center !important;
    font-size: 26px !important;
  }
}


/* Smooth Hover Animation Fix */

/* 1. Animate the main card container */
#clg-hero a.clg-pill {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
}

/* 2. Animate the product image scaling */
#clg-hero .clg-pill img.clg-prod-img {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease !important;
}

/* 3. Ensure internal shadow also transitions smoothly */
#clg-hero .clg-pill .clg-card-inner {
    transition: box-shadow 0.4s ease !important;
}

/* Target only screens wider than 1024px (Desktop) */
@media (min-width: 1024px) {
  .clg-pill .clg-block-header .clg-title {
    font-size: 24px; /* Adjust this value as needed */
    font-weight: bold; /* Optional: makes it stand out more */
  }
}

/* ===== PRODUCT CARD STAR RATINGS ===== */
.pc-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
}
.pc-stars svg { flex-shrink: 0; display: block; }
.pc-stars__count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-left: 4px;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .pc-stars svg { width: 13px; height: 13px; }
  .pc-stars__count { font-size: 11.5px; }
}
@media (max-width: 767px) {
  .pc-stars { gap: 1.5px; margin-bottom: 4px; }
  .pc-stars svg { width: 11px; height: 11px; }
  .pc-stars__count { font-size: 10px; margin-left: 3px; }
}

/* ===== SOLD OUT label — button shape, frosted, no hover effects ===== */
.product-card__soldout {
  display: inline-block;
  padding: 0.56rem 1.12rem;
  border-radius: 14px;
  font-size: 13.44px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  border: none !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ============================================================
   MOBILE CRASH FIX — must be at end of file to win specificity
   battles against earlier !important rules.
   Root causes: 80 cards × will-change:transform = 80 GPU layers,
   80 images × will-change:transform = 80 more, backdrop-filter
   on 15+ elements, infinite animations on everything. iOS Jetsam
   kills the page when total GPU memory exceeds ~150MB mid-scroll.
   ============================================================ */
@media (max-width: 1023px) {
  /* Kill backdrop-filter on product card glass footer only (not category elements) */
  .product-card .product-card__body::before,
  .product-card:hover .product-card__body::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Kill will-change on product cards — this block is AFTER line 3422
     which otherwise overrides the earlier mobile rule at line 462 */
  .product-card {
    will-change: auto !important;
    transition: none !important;
    transform: none !important;
  }
  .product-card:hover { transform: none !important; }
  .product-card img, .product-card .product-card__image {
    will-change: auto !important;
    transition: none !important;
    transform: none !important;
  }
  .product-card:hover img, .product-card:hover .product-card__image {
    transform: none !important;
  }
  /* Kill 80 simultaneous infinite borderShine animations on product cards */
  .product-card--cyan,
  .product-card--pink,
  .product-card--yellow,
  .product-card--purple,
  .product-card--green,
  .product-card--orange { animation: none !important; }
  /* Kill all-products button animation */
  .all-products-btn, a.all-products-btn { animation: none !important; }
  /* Disable content-visibility burst rendering on Safari mobile */
  .fc-section { content-visibility: visible !important; }
}

/* Limit products per section on mobile — homepage only (.fc-section wrapper).
   Collection pages are NOT inside .fc-section so all products show there. */
@media (max-width: 767px) {
  .fc-section .product-grid .product-card:nth-child(n+9) { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fc-section .product-grid .product-card:nth-child(n+13) { display: none !important; }
}
@media (max-width: 767px) {
  #MainContent .product-card__title,
  #MainContent .card__heading,
  #MainContent .product-card__name { font-size: 0.78rem !important; }
}

/* ── MOBILE SECTION TITLES: single line, properly sized ── */
@media (max-width: 767px) {
  html body .fc-section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* === GAP FIX: glass gradient fades from transparent so no hard edge at body top ===
   High specificity (3 classes + 3 elements) beats per-card color overrides (2-3 classes).
   All card variants use the same gradient anyway, so this is safe to override all. */
html body .product-grid .product-card .product-card__body::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(34,211,238,0.05) 35%,
    rgba(34,211,238,0.18) 55%,
    rgba(0,160,200,0.60) 100%
  ) !important;
}

/* === ALL PRODUCTS FILTER UI — ID-prefixed to beat global button (0,22,1) specificity === */
#tvFilters .tv-age-pill,#tvFilters .tv-type-pill { color:#555 !important; background:#fff !important; border:1.5px solid #e2e8f0 !important; box-shadow:0 1px 3px rgba(0,0,0,0.06) !important; padding:0.42rem 1rem !important; font-size:13px !important; gap:6px !important; }
#tvFilters .tv-age-pill:hover,#tvFilters .tv-type-pill:hover { color:#ff42a1 !important; background:#fff !important; border-color:#ff42a1 !important; }
#tvFilters .tv-age-pill.tv-age-pill--active,#tvFilters .tv-type-pill.tv-type-pill--active { color:#fff !important; background:#ff42a1 !important; border-color:#ff42a1 !important; box-shadow:0 3px 10px rgba(255,66,161,0.3) !important; }
#tvFilters .tv-theme-pill { color:#444 !important; background:#fff !important; border:1.5px solid #e2e8f0 !important; box-shadow:0 1px 3px rgba(0,0,0,0.06) !important; }
#tvFilters .tv-theme-pill:hover { color:#ff42a1 !important; background:#fff !important; border-color:#ff42a1 !important; }
#tvFilters .tv-theme-pill.tv-theme-pill--active { color:#fff !important; background:#ff42a1 !important; border-color:#ff42a1 !important; }
#tvFilters .tv-theme-more { color:#444 !important; background:#fff !important; border:1.5px solid #e2e8f0 !important; box-shadow:0 1px 3px rgba(0,0,0,0.06) !important; }
#tvFilters .tv-theme-more:hover { color:#ff42a1 !important; background:#fff !important; border-color:#ff42a1 !important; }
#tvFilters .tv-type-card { background:#fff !important; border:1.5px solid #e5e7eb !important; box-shadow:0 1px 5px rgba(0,0,0,0.07) !important; }
#tvFilters .tv-tc-label { color:#333 !important; font-weight:600 !important; }
#tvFilters .tv-type-card.tv-type-card--active { border-color:#ff42a1 !important; box-shadow:0 0 0 2px #ff42a1 !important; background:rgba(255,66,161,0.04) !important; }
#tvFilters .tv-type-card.tv-type-card--active .tv-tc-label { color:#ff42a1 !important; }
#tvActiveBar .tv-clear-all { color:#ff42a1 !important; background:#fff !important; border:1.5px solid #ff42a1 !important; border-radius:9999px !important; padding:0.32rem 0.85rem !important; font-size:12.5px !important; font-weight:600 !important; }
#tvActiveBar .tv-clear-all:hover { background:#ff42a1 !important; color:#fff !important; }

/* === ADD TO CART — OUTLINED PILL === */
html body .product-card .product-card__cta,
html body .product-card .product-card__footer .product-card__cta,
html body .product-card__cta,
html body .product-card__cta--pink,
html body .product-card__cta--cyan,
html body .product-card__cta--yellow,
html body .product-card__cta--purple,
html body .product-card__cta--green,
html body .product-card__cta--orange,
html body .product-card:hover .product-card__cta,
html body .product-card:hover .product-card__footer .product-card__cta {
  background: transparent !important;
  border: 1px solid #555 !important;
  border-radius: 9999px !important;
  color: #555 !important;
  box-shadow: none !important;
}
html body .product-card .product-card__cta:hover,
html body .product-card .product-card__footer .product-card__cta:hover,
html body .product-card__cta:hover {
  background: #555 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* === BADGES — OUTLINED PILL === */
html body .product-card__badge[data-badge="best-seller"] { background: transparent !important; border: 1.5px solid #ff2a94 !important; color: #ff2a94 !important; }
html body .product-card__badge[data-badge="new"]         { background: transparent !important; border: 1.5px solid #16a34a !important; color: #16a34a !important; }
html body .product-card__badge[data-badge="sale"]        { background: transparent !important; border: 1.5px solid #dc2626 !important; color: #dc2626 !important; }
html body .product-card__badge[data-badge="award"]       { background: transparent !important; border: 1.5px solid #d97706 !important; color: #d97706 !important; }
html body .product-card__badge[data-badge="top pick"]    { background: transparent !important; border: 1.5px solid #7c3aed !important; color: #7c3aed !important; }
html body .product-card__badge[data-badge="trending"]    { background: transparent !important; border: 1.5px solid #ea580c !important; color: #ea580c !important; }
html body .product-card__badge[data-badge="hot"]         { background: transparent !important; border: 1.5px solid #dc2626 !important; color: #dc2626 !important; }
html body .product-card__badge[data-badge="sold-out"]    { background: transparent !important; border: 1.5px solid #6b7280 !important; color: #6b7280 !important; }