@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap");

/* =========================================================
     PURPILO HOMEPAGE — MODERN COHESIVE DESIGN SYSTEM
     Same language as the approved modern hero.
     ========================================================= */
  :root {
    --brand: #6f42e8;
    --brand-2: #8357ef;
    --brand-dark: #29175f;
    --brand-soft: #eee8ff;
    --cream: #fffaf4;
    --paper: #ffffff;
    --ink: #221942;
    --muted: #6f6882;
    --yellow: #ffcb47;
    --coral: #ff6d5e;
    --sky: #66c9f4;
    --mint: #68d6a8;
    --pink: #ff9ecb;
    --line: rgba(34, 25, 66, .09);
    --shadow-brand: 0 18px 55px rgba(63, 40, 126, .12);
    --shadow-soft-brand: 0 10px 30px rgba(63, 40, 126, .08);
    --radius-xl-brand: 40px;
    --radius-lg-brand: 26px;
    --radius-md-brand: 18px;

    /* Map legacy variables onto the same identity. */
    --purple-soft: var(--brand);
    --purple-deep: var(--brand-dark);
    --sun-yellow: var(--yellow);
    --grass-green: var(--mint);
    --sky-blue: var(--sky);
    --white-pure: var(--paper);
    --off-white: var(--cream);
    --gray-100: #f8f6fc;
    --gray-200: #ece8f4;
    --gray-600: var(--muted);
    --gray-800: var(--ink);
    --shadow-sm: var(--shadow-soft-brand);
    --shadow-md: var(--shadow-brand);
    --shadow-hover: 0 22px 48px rgba(63, 40, 126, .15);
    --radius-card: var(--radius-lg-brand);
    --radius-btn: var(--radius-md-brand);
    --radius-element: var(--radius-md-brand);
    --transition: all .22s cubic-bezier(.2,.8,.2,1);
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--cream) !important;
    color: var(--ink);
    font-family: "Nunito", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6,
  .section-title h2,
  .product-content h3,
  .age-card h3,
  .benefit-card h3,
  .footer-col h3 {
    font-family: "Fredoka", "Nunito", sans-serif !important;
    letter-spacing: -.025em;
  }

  .container {
    max-width: 1320px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ---------- HEADER ---------- */
  header {
    top: 0;
    background: rgba(255, 250, 244, .88) !important;
    border-bottom: 1px solid rgba(34,25,66,.06) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .header-container {
    min-height: 76px;
    padding: 10px 0 !important;
    gap: 20px !important;
  }

  .logo { gap: 0 !important; }
  .logo img { height: 46px !important; width: auto; }
  .logo > span { display: none !important; }

  .nav-desktop ul { gap: 8px !important; }
  .nav-desktop a {
    border: 0 !important;
    border-radius: 12px;
    padding: 10px 12px !important;
    color: #4e4567 !important;
    font-weight: 800 !important;
    font-size: .91rem !important;
  }
  .nav-desktop a:hover,
  .nav-desktop a.active {
    color: var(--brand-dark) !important;
    background: var(--brand-soft);
  }

  .header-search { max-width: 360px !important; }
  .header-search input {
    min-height: 44px;
    padding: 10px 44px 10px 16px !important;
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,.78) !important;
    border-radius: 15px !important;
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(48,31,93,.04);
  }
  .header-search input:focus {
    border-color: rgba(111,66,232,.35) !important;
    box-shadow: 0 0 0 4px rgba(111,66,232,.08) !important;
  }
  .header-search button {
    width: 32px !important;
    height: 32px !important;
    right: 6px !important;
    border-radius: 10px !important;
    background: var(--brand) !important;
  }

  .language-btn,
  .cart-icon,
  .search-mobile-btn,
  .mobile-menu-btn {
    min-width: 42px;
    height: 42px !important;
    border-radius: 13px !important;
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,.78) !important;
    color: var(--brand-dark) !important;
    box-shadow: 0 6px 16px rgba(48,31,93,.04);
  }
  .language-btn:hover,
  .cart-icon:hover,
  .search-mobile-btn:hover,
  .mobile-menu-btn:hover {
    color: #fff !important;
    border-color: var(--brand) !important;
    background: var(--brand) !important;
    transform: translateY(-1px);
  }
  .cart-count {
    background: var(--coral) !important;
    color: #fff !important;
    border: 2px solid var(--cream) !important;
  }
  .language-dropdown,
  .search-results-dropdown {
    border-radius: 18px !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-brand) !important;
  }
  .language-option { border-radius: 12px !important; }
  .language-option.active { background: var(--brand) !important; }

  /* ---------- BUTTONS ---------- */
  .btn {
    min-height: 54px;
    padding: 0 22px !important;
    border-radius: 17px !important;
    border: 1px solid transparent !important;
    box-shadow: none;
    font-size: .95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
  }
  .btn:hover { transform: translateY(-2px) !important; }
  .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    box-shadow: 0 13px 28px rgba(111,66,232,.24) !important;
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #6535e2, #7c4ceb) !important;
    box-shadow: 0 17px 34px rgba(111,66,232,.3) !important;
  }
  .btn-secondary {
    color: var(--brand-dark) !important;
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(111,66,232,.2) !important;
    box-shadow: 0 10px 24px rgba(48,31,93,.07) !important;
  }
  .btn-secondary:hover {
    color: var(--brand-dark) !important;
    background: #fff !important;
    border-color: rgba(111,66,232,.35) !important;
  }
  .btn-small { min-height: 44px; padding: 0 17px !important; border-radius: 14px !important; }

  /* ---------- HERO ---------- */
  .hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    padding: 42px 0 34px !important;
    background:
      radial-gradient(circle at 9% 10%, rgba(255,203,71,.18), transparent 19%),
      radial-gradient(circle at 92% 11%, rgba(102,201,244,.14), transparent 19%),
      radial-gradient(circle at 78% 82%, rgba(255,158,203,.12), transparent 22%),
      var(--cream) !important;
    animation: none !important;
  }
  .hero::before {
    content: "" !important;
    position: absolute !important;
    width: 360px !important;
    height: 360px !important;
    left: -245px !important;
    top: 34% !important;
    border-radius: 50% !important;
    background: rgba(104,214,168,.14) !important;
    animation: none !important;
    z-index: -1;
  }
  .hero::after {
    content: "" !important;
    position: absolute !important;
    width: 330px !important;
    height: 330px !important;
    right: -190px !important;
    bottom: -140px !important;
    border-radius: 50% !important;
    background: rgba(111,66,232,.10) !important;
    animation: none !important;
    z-index: -1;
  }

  .hero-container {
    display: grid !important;
    grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr) !important;
    align-items: center !important;
    gap: 34px !important;
    min-height: 610px;
    margin: 0 !important;
    padding: 24px 0 16px;
  }
  .hero-content {
    max-width: 610px;
    color: var(--ink) !important;
    text-align: left !important;
    animation: none !important;
  }
  .hero-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 8px 13px 8px 8px;
    border: 1px solid rgba(111,66,232,.13);
    border-radius: 999px;
    color: var(--brand-dark);
    background: rgba(238,232,255,.82);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: 0 5px 18px rgba(111,66,232,.06);
  }
  .hero-eyebrow-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--brand-dark);
    background: var(--yellow);
    font-size: .72rem;
    transform: rotate(-4deg);
  }
  .hero-content h1 {
    margin: 0 0 22px !important;
    font-family: "Fredoka", sans-serif !important;
    font-size: clamp(3.3rem, 5.25vw, 5.45rem) !important;
    line-height: .97 !important;
    letter-spacing: -.052em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }
  .hero-content h1 span { display: block; }
  .hero-line-purple { color: var(--brand) !important; }
  .hero-line-dark { color: var(--brand-dark) !important; margin-top: 4px; }
  .hero-content p {
    max-width: 575px !important;
    margin: 0 0 28px !important;
    color: var(--muted) !important;
    opacity: 1 !important;
    font-size: clamp(1rem,1.28vw,1.12rem) !important;
    line-height: 1.72 !important;
    font-weight: 600;
    text-shadow: none !important;
  }
  .hero-btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  .hero-btns .btn { min-width: 0 !important; width: auto !important; }
  .hero-btn-arrow { font-size: .75rem; }
  .hero-trust-badge {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 26px 0 0 !important;
  }
  .hero-trust-badge .trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 11px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--line) !important;
    color: #5f5872 !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    box-shadow: 0 7px 18px rgba(51,36,94,.04) !important;
  }
  .hero-trust-badge .trust-item:nth-child(1) i { color: #d69800 !important; }
  .hero-trust-badge .trust-item:nth-child(2) i { color: #15956d !important; }
  .hero-trust-badge .trust-item:nth-child(3) i { color: var(--brand) !important; }

  .hero-visual {
    position: relative !important;
    min-height: 570px;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }
  .hero-art-blob {
    position: absolute;
    width: 87%;
    height: 80%;
    right: 1%;
    top: 9%;
    border-radius: 52% 48% 44% 56% / 40% 38% 62% 60%;
    background:
      radial-gradient(circle at 72% 20%, rgba(255,255,255,.82), transparent 26%),
      linear-gradient(145deg, #f1ebff 0%, #ddd1ff 62%, #d3c4ff 100%);
    box-shadow: inset 0 0 0 1px rgba(111,66,232,.08);
    transform: rotate(-2deg);
    z-index: 0;
  }
  .hero-art-blob::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -27px;
    top: -17px;
    border-radius: 50%;
    background: rgba(255,203,71,.75);
    z-index: -1;
  }
  .hero-visual-inner {
    position: relative !important;
    z-index: 3;
    width: 118% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(2%) translateY(7%) !important;
    transition: transform .35s ease;
  }
  .hero-visual:hover .hero-visual-inner { transform: translateX(2%) translateY(5.5%) scale(1.012) !important; }
  .hero-visual img {
    width: 100% !important;
    max-width: 790px !important;
    height: auto !important;
    background: transparent !important;
  }
  .hero-art-note {
    position: absolute;
    z-index: 5;
    left: 1%;
    top: 9%;
    max-width: 145px;
    padding: 13px 15px;
    border-radius: 19px;
    color: var(--brand-dark);
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(111,66,232,.10);
    box-shadow: var(--shadow-soft-brand);
    font-family: "Fredoka", sans-serif;
    font-size: .93rem;
    line-height: 1.08;
    transform: rotate(-5deg);
    backdrop-filter: blur(8px);
  }
  .hero-art-note::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 20px;
    right: -24px;
    bottom: -4px;
    border-bottom: 3px solid var(--brand);
    border-radius: 50%;
    transform: rotate(16deg);
    opacity: .7;
  }
  .hero-art-badge {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 4%;
    width: 116px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 42% 58% 50% 50% / 50% 42% 58% 50%;
    background: var(--yellow);
    color: var(--brand-dark);
    box-shadow: var(--shadow-soft-brand);
    font-family: "Fredoka", sans-serif;
    font-size: .84rem;
    line-height: 1.06;
    transform: rotate(5deg);
  }
  .hero-spark { position: absolute; z-index: 2; pointer-events: none; }
  .hero-spark-1 { width: 18px; height: 18px; left: 18%; top: 20%; border-radius: 5px; background: var(--yellow); transform: rotate(45deg); }
  .hero-spark-2 { width: 17px; height: 17px; right: 8%; bottom: 18%; border: 5px solid var(--sky); border-radius: 50%; }
  .hero-spark-3 { width: 13px; height: 30px; right: 5%; top: 31%; border-radius: 999px; background: var(--coral); transform: rotate(28deg); }

  .home-universes {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-top: -4px;
  }
  .home-universe {
    min-height: 94px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid rgba(34,25,66,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 28px rgba(53,35,102,.06);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    backdrop-filter: blur(10px);
  }
  .home-universe:hover { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(53,35,102,.10); }
  .home-universe-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.1rem;
  }
  .home-universe:nth-child(1) .home-universe-icon { color:#8d6500; background:#fff1be; }
  .home-universe:nth-child(2) .home-universe-icon { color:#087da8; background:#dff4ff; }
  .home-universe:nth-child(3) .home-universe-icon { color:#bb4d78; background:#ffe4f0; }
  .home-universe:nth-child(4) .home-universe-icon { color:#18805f; background:#ddf7eb; }
  .home-universe-copy { min-width: 0; }
  .home-universe-copy strong,
  .home-universe-copy small { display: block; }
  .home-universe-copy strong { font-family:"Fredoka",sans-serif; font-size:1rem; color:var(--ink); }
  .home-universe-copy small { margin-top:3px; color:var(--muted); font-size:.77rem; line-height:1.35; font-weight:700; }
  .home-universe-arrow { margin-left:auto; color:rgba(34,25,66,.4); font-size:.72rem; }

  /* ---------- GLOBAL SECTIONS ---------- */
  .section {
    position: relative;
    padding: 92px 0 !important;
    background: transparent !important;
  }
  .section-title { margin-bottom: 44px !important; }
  .section-title h2 {
    margin-bottom: 11px !important;
    color: var(--brand-dark) !important;
    font-size: clamp(2.15rem,3.2vw,3.05rem) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
  }
  .section-title h2::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 11px;
    border-radius: 4px;
    background: var(--yellow);
    transform: rotate(45deg) translateY(-2px);
    vertical-align: middle;
  }
  .section-title p {
    max-width: 680px !important;
    color: var(--muted) !important;
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
  }

  .home-benefits-section { background: var(--cream) !important; }
  .home-products-section {
    background: linear-gradient(180deg,#f6f1ff 0%,#f9f7ff 100%) !important;
    border-radius: 56px 56px 0 0;
    overflow: hidden;
  }
  .home-age-section { background: #fffdf9 !important; }
  .home-schools-section { background: #fffdf9 !important; padding-top: 20px !important; }
  .home-brands-section {
    background: linear-gradient(180deg,#fff9ed 0%,#fffdf7 100%) !important;
    overflow: hidden;
  }
  .home-outdoor-section {
    background:
      radial-gradient(circle at 8% 18%, rgba(104,214,168,.13), transparent 20%),
      radial-gradient(circle at 92% 80%, rgba(102,201,244,.12), transparent 22%),
      #f7fbfa !important;
  }

  /* ---------- BENEFIT CARDS ---------- */
  .benefits-grid { gap: 16px !important; }
  .benefit-card {
    position: relative;
    overflow: hidden;
    padding: 22px 20px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(34,25,66,.07) !important;
    box-shadow: 0 10px 26px rgba(52,34,99,.06) !important;
    text-align: left !important;
  }
  .benefit-card:nth-child(1) { background: #fff7dc !important; }
  .benefit-card:nth-child(2) { background: #eaf8ff !important; }
  .benefit-card:nth-child(3) { background: #e9fbf2 !important; }
  .benefit-card:nth-child(4) { background: #f3edff !important; }
  .benefit-card::after {
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-38px;
    top:-38px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
  }
  .benefit-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(111,66,232,.16) !important;
    box-shadow: 0 18px 34px rgba(52,34,99,.10) !important;
  }
  .benefit-icon {
    width: 100% !important;
    height: 132px !important;
    margin: 0 0 20px !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: rgba(255,255,255,.58) !important;
  }
  .benefit-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 9px;
  }
  .benefit-card h3 { color: var(--brand-dark) !important; font-size: 1.18rem !important; margin-bottom: 8px !important; }
  .benefit-card p { color: #645d75 !important; font-weight: 600; font-size: .9rem !important; }

  /* ---------- EDUCATIONAL CATEGORY TABS ---------- */
  .age-tabs {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    gap: 12px !important;
    margin: 0 0 34px !important;
  }
  .age-tab {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 84px !important;
    padding: 13px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(34,25,66,.07) !important;
    background: rgba(255,255,255,.76) !important;
    box-shadow: 0 8px 24px rgba(53,35,102,.05) !important;
    cursor: pointer;
    transition: .2s ease !important;
  }
  .age-tab:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(53,35,102,.09) !important; }
  .age-tab.active { background: var(--brand) !important; border-color: var(--brand) !important; }
  .age-tab .age-icon {
    flex: 0 0 56px;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: #fff !important;
    overflow: hidden;
  }
  .age-tab .age-icon img { width:100% !important; height:100% !important; object-fit:contain !important; padding:5px; }
  .age-tab h3 {
    margin: 0 !important;
    color: var(--brand-dark) !important;
    text-align: left;
    font-family:"Fredoka",sans-serif !important;
    font-size: .98rem !important;
    line-height: 1.15;
  }
  .age-tab.active h3 { color:#fff !important; }

  /* ---------- PRODUCT CARDS ---------- */
  .product-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 16px !important;
  }
  .product-card,
  .product-skeleton {
    border-radius: 24px !important;
    border: 1px solid rgba(34,25,66,.07) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 28px rgba(53,35,102,.06) !important;
    overflow: hidden !important;
  }
  .product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(111,66,232,.16) !important;
    box-shadow: 0 20px 40px rgba(53,35,102,.12) !important;
  }
  .product-img {
    position: relative;
    height: 235px !important;
    padding: 22px 18px !important;
    border: 0 !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(238,232,255,.95), rgba(255,255,255,.9) 62%) !important;
  }
  .product-img::after {
    content:"";
    position:absolute;
    width:48px;
    height:48px;
    right:16px;
    top:16px;
    border-radius:15px;
    background:rgba(255,203,71,.18);
    transform:rotate(10deg);
    pointer-events:none;
  }
  .product-img a { width:100%; height:100%; display:flex !important; align-items:center; justify-content:center; }
  .product-img img {
    max-width: 90% !important;
    max-height: 195px !important;
    filter: drop-shadow(0 12px 16px rgba(54,36,96,.10));
  }
  .product-card:hover .product-img img { transform: scale(1.035) !important; }
  .product-content { padding: 18px 18px 20px !important; }
  .product-content h3 { color: var(--brand-dark) !important; font-size: 1.02rem !important; line-height:1.25; }
  .product-desc { color: var(--muted) !important; font-weight:600; font-size:.82rem !important; }
  .product-price { color: var(--brand) !important; font-size:1.22rem !important; margin-bottom:14px !important; }
  .product-price .original-price { color:#9a93aa; text-decoration:line-through; font-size:.86rem; margin-right:7px; }
  .product-price .current-price { color:var(--brand); }
  .product-btn {
    min-height: 46px;
    border-radius: 15px !important;
    background: var(--brand) !important;
    color:#fff !important;
    box-shadow:0 9px 18px rgba(111,66,232,.16) !important;
  }
  .product-btn:hover { background:var(--brand-dark) !important; transform:translateY(-1px) !important; }

  /* ---------- TOYS BY AGE ---------- */
  .age-grid { gap:16px !important; margin-top: 0 !important; }
  .home-age-section .age-card {
    position:relative;
    overflow:hidden;
    padding:18px 18px 22px !important;
    border:1px solid rgba(34,25,66,.07) !important;
    border-radius:24px !important;
    box-shadow:0 10px 26px rgba(52,34,99,.06) !important;
  }
  .home-age-section .age-card:nth-child(1) { background:#fff4e3 !important; }
  .home-age-section .age-card:nth-child(2) { background:#e9f8ff !important; }
  .home-age-section .age-card:nth-child(3) { background:#ffeaf3 !important; }
  .home-age-section .age-card:nth-child(4) { background:#e9f9f1 !important; }
  .home-age-section .age-card:hover { transform:translateY(-5px) !important; box-shadow:0 18px 34px rgba(52,34,99,.10) !important; }
  .home-age-section .age-icon {
    width:100% !important;
    height:180px !important;
    margin:0 0 18px !important;
    border:0 !important;
    border-radius:19px !important;
    background:rgba(255,255,255,.6) !important;
  }
  .home-age-section .age-icon img { width:100% !important; height:100% !important; object-fit:contain !important; padding:8px; }
  .home-age-section .age-card h3 { color:var(--brand-dark) !important; font-size:1.15rem !important; }
  .home-age-section .age-card p { color:var(--muted) !important; font-weight:800 !important; }

  /* ---------- TEACHERS / SCHOOLS ---------- */
  .teacher-block {
    position:relative;
    overflow:hidden;
    padding: 54px 54px !important;
    border-radius: 38px !important;
    border: 1px solid rgba(111,66,232,.10) !important;
    background:
      radial-gradient(circle at 10% 15%, rgba(255,203,71,.18), transparent 24%),
      linear-gradient(135deg,#f2ecff 0%,#fff9ef 100%) !important;
    box-shadow: var(--shadow-brand) !important;
  }
  .teacher-block::after {
    content:"";
    position:absolute;
    right:-95px;
    bottom:-110px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(104,214,168,.16);
    pointer-events:none;
  }
  .teacher-content { position:relative; z-index:2; }
  .teacher-content h2 { color:var(--brand-dark) !important; font-size:clamp(2rem,3.2vw,3rem) !important; line-height:1.05; }
  .teacher-content h2 i { color:var(--coral) !important; }
  .teacher-content p { color:var(--muted) !important; font-weight:600; line-height:1.7 !important; }
  .teacher-badge { gap:9px !important; }
  .teacher-badge .badge {
    padding:9px 12px !important;
    border-radius:13px !important;
    border:1px solid var(--line) !important;
    background:rgba(255,255,255,.75) !important;
    color:#5f5872 !important;
    box-shadow:0 7px 18px rgba(51,36,94,.04) !important;
    font-size:.8rem !important;
  }
  .teacher-badge .badge i { color:var(--brand) !important; }
  .teacher-visual { position:relative; z-index:2; flex: .9 !important; }
  .teacher-visual::before {
    content:"";
    position:absolute;
    inset:8% 2% 2% 8%;
    border-radius:48% 52% 55% 45% / 44% 40% 60% 56%;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(111,66,232,.08);
    z-index:-1;
  }
  .teacher-visual img { max-width:430px !important; opacity:1 !important; filter:drop-shadow(0 20px 24px rgba(58,38,105,.14)); }
  .teacher-content a[href$=".pdf"] {
    display:inline-flex;
    align-items:center;
    min-height:50px;
    margin-left:10px !important;
    color:var(--brand-dark) !important;
    padding:0 14px;
    border-radius:14px;
    transition:.2s ease;
  }
  .teacher-content a[href$=".pdf"]:hover { background:rgba(255,255,255,.72); }

  /* ---------- BRANDS ---------- */
  .brands-slider {
    padding: 22px 0 !important;
    overflow:hidden;
    mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  }
  .brands-track { gap:16px !important; align-items:center; }
  .brands-track img {
    width:132px !important;
    height:104px !important;
    padding:18px;
    object-fit:contain !important;
    border-radius:20px;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(34,25,66,.07);
    box-shadow:0 8px 22px rgba(52,34,99,.05);
    filter:saturate(.92);
    transition:.2s ease;
  }
  .brands-track img:hover { transform:translateY(-3px) scale(1.02); filter:saturate(1); box-shadow:0 14px 28px rgba(52,34,99,.09); }

  /* ---------- OUTDOOR ---------- */
  .sport-categories {
    gap:16px !important;
    margin-bottom:44px !important;
  }
  .sport-category,
  .sport-category-info {
    padding:18px 18px 22px !important;
    border-radius:24px !important;
    border:1px solid rgba(34,25,66,.07) !important;
    box-shadow:0 10px 26px rgba(52,34,99,.06) !important;
    background:#fff !important;
    text-align:left !important;
  }
  .sport-category:nth-child(1) { background:#eefaff !important; }
  .sport-category:nth-child(2) { background:#effbf5 !important; }
  .sport-category:nth-child(3) { background:#fff5dd !important; }
  .sport-category:nth-child(4) { background:#f3edff !important; }
  .sport-category:nth-child(5) { background:#ffeef4 !important; }
  .sport-category-info { background:#eef9f8 !important; }
  .sport-category:hover,
  .sport-category-info:hover { box-shadow:0 18px 34px rgba(52,34,99,.10) !important; }
  .sport-category img,
  .sport-category-info img {
    width:100% !important;
    height:190px !important;
    object-fit:contain !important;
    margin-bottom:18px !important;
    padding:8px;
    border-radius:18px !important;
    background:rgba(255,255,255,.56);
  }
  .sport-category h3,
  .sport-category-info h3 {
    margin-bottom:7px !important;
    color:var(--brand-dark) !important;
    font-family:"Fredoka",sans-serif !important;
    font-size:1.15rem !important;
  }
  .sport-category p,
  .sport-category-info p { color:var(--muted) !important; font-weight:600; }
  .sport-category .btn,
  .sport-category-info .btn { color:#fff !important; background:var(--brand) !important; }

  /* ---------- FOOTER ---------- */
  footer {
    position:relative;
    overflow:hidden;
    margin-top:0 !important;
    padding-top:72px !important;
    border-radius:58px 58px 0 0 !important;
    background:
      radial-gradient(circle at 12% 15%, rgba(255,203,71,.13), transparent 18%),
      radial-gradient(circle at 86% 15%, rgba(102,201,244,.11), transparent 20%),
      var(--brand-dark) !important;
  }
  footer::before {
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-100px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(111,66,232,.32);
  }
  .footer-grid { gap:28px !important; margin-bottom:46px !important; }
  .footer-col h3 { color:#fff !important; font-size:1.15rem !important; }
  .footer-col h3::after {
    content:"";
    display:block;
    width:30px;
    height:4px;
    margin-top:9px;
    border-radius:99px;
    background:var(--yellow);
  }
  .footer-col p,
  .footer-col li { color:rgba(255,255,255,.72) !important; }
  .footer-col a { color:rgba(255,255,255,.76) !important; font-weight:700; }
  .footer-col a:hover { color:#fff !important; transform:translateX(3px) !important; }
  .footer-col:first-child > div a {
    width:42px;
    height:42px;
    display:inline-grid;
    place-items:center;
    border-radius:13px;
    background:rgba(255,255,255,.10);
  }
  footer .container > div[style*="max-width: 500px"] {
    max-width:620px !important;
    padding:24px !important;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(10px);
  }
  footer .container > div[style*="max-width: 500px"] h3 { color:#fff !important; font-family:"Fredoka",sans-serif !important; font-size:1.35rem; }
  .newsletter-input {
    margin:17px 0 8px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:#fff !important;
  }
  .newsletter-input input { min-height:52px; color:var(--ink); font-weight:700; }
  .newsletter-input button { width:58px; background:var(--yellow) !important; color:var(--brand-dark) !important; }
  .newsletter-input button:hover { background:#ffd664 !important; }
  .copyright { color:rgba(255,255,255,.55) !important; }

  /* ---------- MODAL / FLOATING UI ---------- */
  .quote-modal-content {
    border-radius:28px !important;
    border:1px solid var(--line) !important;
    box-shadow:0 30px 80px rgba(32,18,75,.22) !important;
    background:#fffdf9 !important;
  }
  .quote-modal-content h2 { font-family:"Fredoka",sans-serif !important; color:var(--brand-dark) !important; }
  .form-group label { color:var(--brand-dark) !important; font-weight:800 !important; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    border-radius:14px !important;
    border:1px solid var(--line) !important;
    background:#fff !important;
    color:var(--ink) !important;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color:rgba(111,66,232,.4) !important;
    box-shadow:0 0 0 4px rgba(111,66,232,.08) !important;
    outline:none;
  }
  .whatsapp-float-container { bottom:88px !important; left:22px !important; }
  .whatsapp-float {
    width:64px !important;
    height:64px !important;
    padding:8px !important;
    border:1px solid rgba(34,25,66,.08) !important;
    background:#fff !important;
    box-shadow:0 14px 30px rgba(53,35,102,.12) !important;
  }
  .whatsapp-bubble {
    border:1px solid rgba(34,25,66,.08) !important;
    border-radius:15px !important;
    box-shadow:0 12px 28px rgba(53,35,102,.10) !important;
    color:var(--brand-dark) !important;
    font-weight:800 !important;
  }
  .scroll-to-top {
    width:48px !important;
    height:48px !important;
    right:22px !important;
    bottom:24px !important;
    border-radius:15px !important;
    background:var(--brand) !important;
    color:#fff !important;
    box-shadow:0 12px 25px rgba(111,66,232,.24) !important;
  }

  .mobile-menu {
    background:var(--cream) !important;
    border-radius:0 26px 26px 0;
  }
  .mobile-nav a {
    display:block;
    padding:11px 12px;
    border-radius:12px;
    color:var(--ink) !important;
  }
  .mobile-nav a:hover { background:var(--brand-soft); color:var(--brand-dark) !important; }
/* ---------- RESPONSIVE ---------- */
  @media (max-width: 1160px) {
    .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .hero-container { grid-template-columns:1fr !important; gap:14px !important; padding-top:34px; }
    .hero-content { max-width:780px; }
    .hero-visual { min-height:500px; }
    .hero-art-blob { width:76%; right:10%; }
    .hero-visual-inner { width:min(100%,770px) !important; transform:translateY(6%) !important; }
    .hero-visual:hover .hero-visual-inner { transform:translateY(5%) scale(1.01) !important; }
    .home-universes { grid-template-columns:repeat(2,1fr); }
  }

  @media (max-width: 900px) {
    .section { padding:72px 0 !important; }
    .benefits-grid { grid-template-columns:repeat(2,1fr) !important; }
    .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .age-grid { grid-template-columns:repeat(2,1fr) !important; }
    .age-tabs { grid-template-columns:repeat(2,1fr) !important; }
    .teacher-block { flex-direction:column !important; text-align:left !important; padding:42px 34px !important; }
    .teacher-badge { justify-content:flex-start !important; }
    .footer-grid { grid-template-columns:repeat(2,1fr) !important; }
    .nav-desktop { display:none; }
    .mobile-menu-btn { display:flex; }
  }

  @media (max-width: 680px) {
    .container { padding-left:16px !important; padding-right:16px !important; }
    .header-container { min-height:64px; gap:10px !important; }
    .logo img { height:36px !important; }
    .hero { padding:24px 0 28px !important; }
    .hero-container { min-height:auto; padding:25px 0 10px; }
    .hero-content h1 { font-size:clamp(2.85rem,13vw,4.15rem) !important; }
    .hero-content p { font-size:.98rem !important; }
    .hero-btns { display:grid !important; grid-template-columns:1fr !important; width:100%; }
    .hero-btns .btn { width:100% !important; }
    .hero-trust-badge { display:grid !important; grid-template-columns:1fr 1fr !important; width:100%; }
    .hero-trust-badge .trust-item:last-child { grid-column:1/-1; }
    .hero-visual { min-height:370px; margin-top:6px; }
    .hero-art-blob { width:92%; height:78%; right:4%; top:11%; }
    .hero-visual-inner { width:112% !important; transform:translateY(7%) !important; }
    .hero-visual:hover .hero-visual-inner { transform:translateY(7%) !important; }
    .hero-art-note { left:0; top:4%; max-width:116px; padding:10px 12px; font-size:.76rem; }
    .hero-art-badge { width:84px; right:0; top:2%; padding:10px; font-size:.66rem; }
    .home-universes { grid-template-columns:1fr; gap:9px; }
    .home-universe { min-height:78px; }

    .section { padding:60px 0 !important; }
    .section-title { text-align:left !important; margin-bottom:30px !important; }
    .section-title h2 { font-size:2.1rem !important; }
    .section-title p { margin-left:0 !important; font-size:.95rem !important; }
    .benefits-grid,
    .product-grid,
    .age-grid,
    .age-tabs { grid-template-columns:1fr !important; }
    .benefit-card { display:grid; grid-template-columns:108px 1fr; column-gap:16px; align-items:center; }
    .benefit-icon { width:108px !important; height:100px !important; grid-row:1/3; margin:0 !important; }
    .benefit-card h3 { margin:0 0 5px !important; }
    .benefit-card p { margin:0 !important; }
    .product-img { height:230px !important; }
    .home-age-section .age-icon { height:170px !important; }
    .teacher-block { padding:32px 22px !important; border-radius:28px !important; }
    .teacher-content h2 { font-size:2.1rem !important; }
    .teacher-content a[href$=".pdf"] { display:flex; margin:10px 0 0 !important; width:fit-content; }
    .footer-grid { grid-template-columns:1fr !important; }
    footer { border-radius:38px 38px 0 0 !important; padding-top:56px !important; }
    .whatsapp-float-container { bottom:82px !important; left:12px !important; }
    .whatsapp-float { width:54px !important; height:54px !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  }

/* =========================================================
   STOREFRONT PAGES — PURPILO MODERN DESIGN LANGUAGE
   Extends the approved homepage identity across the website.
   ========================================================= */

/* ---------- Global storefront polish ---------- */
body.page-shop,
body.page-product,
body.page-cart,
body.page-checkout,
body.page-contact,
body.page-confirmation,
body.page-offline {
  background:
    radial-gradient(circle at 5% 10%, rgba(255,203,71,.10), transparent 22rem),
    radial-gradient(circle at 96% 5%, rgba(102,201,244,.11), transparent 24rem),
    var(--cream) !important;
}

body.page-shop main,
body.page-product main,
body.page-cart main,
body.page-checkout main,
body.page-contact main,
body.page-confirmation main { color: var(--ink); }

body:not(.page-home) .breadcrumb {
  color: var(--muted) !important;
  font-weight: 700;
}
body:not(.page-home) .breadcrumb a { color: var(--brand) !important; }
body:not(.page-home) .breadcrumb i { color: #a79fb9 !important; }

/* Common form language */
body:not(.page-home) input:not([type="checkbox"]):not([type="radio"]),
body:not(.page-home) select,
body:not(.page-home) textarea {
  border: 1px solid var(--line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  font-family: "Nunito", sans-serif !important;
}
body:not(.page-home) input:focus,
body:not(.page-home) select:focus,
body:not(.page-home) textarea:focus {
  outline: none !important;
  border-color: rgba(111,66,232,.55) !important;
  box-shadow: 0 0 0 4px rgba(111,66,232,.09) !important;
}
body:not(.page-home) label { color: var(--ink); }

/* ---------- SHOP ---------- */
.page-shop .shop-header {
  margin: 0 auto 28px !important;
  padding: 72px 0 66px !important;
  border-radius: 0 0 44px 44px !important;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(255,250,244,.96), rgba(246,239,255,.82)),
    url('../images/banner shop.webp') center/cover no-repeat !important;
  box-shadow: inset 0 -1px 0 var(--line);
}
.page-shop .shop-header::before,
.page-shop .shop-header::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.page-shop .shop-header::before {
  width: 180px; height: 180px; left: 7%; top: -85px;
  background: rgba(255,203,71,.20);
}
.page-shop .shop-header::after {
  width: 230px; height: 230px; right: 5%; bottom: -150px;
  background: rgba(111,66,232,.11);
}
.page-shop .shop-title h1 {
  color: var(--brand-dark) !important;
  text-shadow: none !important;
  font-family: "Fredoka", sans-serif !important;
  font-size: clamp(2.45rem, 5vw, 4.3rem) !important;
  line-height: .98;
  letter-spacing: -.045em;
}
.page-shop .shop-title .breadcrumb { color: var(--muted) !important; }
.page-shop .shop-title .breadcrumb a { color: var(--brand) !important; }

.page-shop .shop-layout { gap: 28px !important; margin-top: 28px !important; align-items: flex-start; }
.page-shop .shop-filters {
  flex-basis: 286px !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: var(--shadow-soft-brand) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.94) !important;
}
.page-shop .filter-header {
  position: relative !important;
  top: auto !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #f1ebff, #fff7de) !important;
  color: var(--brand-dark) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line);
}
.page-shop .filter-header h3 { color: var(--brand-dark) !important; font-family:"Fredoka",sans-serif !important; }
.page-shop .filter-header h3 i { color: var(--brand); }
.page-shop .filter-clear {
  color: var(--brand) !important;
  border-color: rgba(111,66,232,.20) !important;
  background: rgba(255,255,255,.72) !important;
}
.page-shop .filter-clear:hover { background: var(--brand) !important; color:#fff !important; }
.page-shop .filter-search { border-bottom-color: var(--line) !important; }
.page-shop .filter-block { border-bottom-color: var(--line) !important; }
.page-shop .filter-block h4 { color: var(--brand-dark) !important; letter-spacing: .02em !important; }
.page-shop .filter-block h4 i { color: var(--coral) !important; }
.page-shop .filter-checkbox { border-radius: 12px !important; color: #544d68 !important; }
.page-shop .filter-checkbox:hover { background: var(--brand-soft) !important; color: var(--brand-dark) !important; }
.page-shop .filter-checkbox input { accent-color: var(--brand); }

.page-shop .shop-products { min-width: 0; }
.page-shop .shop-toolbar {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  padding: 14px 16px !important;
  box-shadow: 0 8px 28px rgba(63,40,126,.05) !important;
  backdrop-filter: blur(10px);
}
.page-shop .product-count { color: var(--muted) !important; font-weight: 800 !important; }
.page-shop .sort-select,
.page-shop .view-toggle button,
.page-shop .mobile-filter-trigger {
  border-color: var(--line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--brand-dark) !important;
}
.page-shop .view-toggle button.active,
.page-shop .mobile-filter-trigger {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.page-shop .pagination button,
.page-shop .pagination a {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--brand-dark) !important;
}
.page-shop .pagination .active,
.page-shop .pagination button:hover,
.page-shop .pagination a:hover {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

/* Product cards are created dynamically on several pages. */
.page-shop .product-card,
.page-product .product-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(63,40,126,.06) !important;
  overflow: hidden;
}
.page-shop .product-card:hover,
.page-product .product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(111,66,232,.22) !important;
  box-shadow: 0 20px 44px rgba(63,40,126,.12) !important;
}
.page-shop .product-img,
.page-product .product-img {
  background: linear-gradient(145deg,#fff,#fbf8ff) !important;
  border-bottom: 1px solid var(--line) !important;
}
.page-shop .product-content h3,
.page-product .product-content h3 { color: var(--brand-dark) !important; }
.page-shop .product-price,
.page-product .product-price { color: var(--brand) !important; }
.page-shop .product-btn,
.page-product .product-btn {
  background: var(--brand) !important;
  color:#fff !important;
  border-radius: 14px !important;
  min-height: 44px;
  box-shadow: none !important;
}
.page-shop .product-btn:hover,
.page-product .product-btn:hover { background: var(--brand-dark) !important; }

/* ---------- PRODUCT DETAIL ---------- */
.page-product .breadcrumb { padding-top: 26px !important; }
.page-product .product-detail {
  gap: 30px !important;
  margin: 24px 0 66px !important;
  grid-template-columns: minmax(0,1.04fr) minmax(360px,.96fr) !important;
}
.page-product .main-image {
  min-height: 540px !important;
  border-radius: 32px !important;
  border: 1px solid var(--line) !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,203,71,.12), transparent 28%),
    linear-gradient(145deg,#fff,#f8f4ff) !important;
  box-shadow: var(--shadow-soft-brand) !important;
}
.page-product .main-image img { border-radius: 22px !important; }
.page-product .thumbnail {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  background:#fff !important;
}
.page-product .thumbnail:hover,
.page-product .thumbnail.active {
  border-color: var(--brand) !important;
  box-shadow: 0 8px 22px rgba(111,66,232,.10) !important;
}
.page-product .product-info {
  border: 1px solid var(--line) !important;
  border-radius: 32px !important;
  padding: clamp(26px,4vw,42px) !important;
  box-shadow: var(--shadow-brand) !important;
  background: rgba(255,255,255,.96) !important;
}
.page-product .product-title {
  color: var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
  font-size: clamp(2rem,3vw,3rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em;
}
.page-product .age-badge {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
  box-shadow:none !important;
}
.page-product .rating { background:#fff8dd !important; }
.page-product .product-price,
.page-product .price { color: var(--brand) !important; }
.page-product .add-to-cart,
.page-product .btn-primary,
.page-product button[id*="cart" i] {
  border-radius: 15px !important;
}
.page-product .tabs-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:none !important;
}
.page-product .tabs-nav {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 7px !important;
  gap:6px;
}
.page-product .tab-btn {
  border: 0 !important;
  border-radius: 13px !important;
  color: var(--muted) !important;
  font-weight:800 !important;
}
.page-product .tab-btn.active {
  background: var(--brand) !important;
  color: #fff !important;
}
.page-product .tab-pane {
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  padding:28px !important;
  margin-top:16px;
  box-shadow:var(--shadow-soft-brand) !important;
}
.page-product .related-title {
  color:var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
  font-size:clamp(1.8rem,3vw,2.5rem) !important;
}

/* ---------- CART ---------- */
.page-cart .cart-header { margin: 28px 0 24px !important; }
.page-cart .cart-header h1,
.page-checkout .checkout-header h1 {
  color:var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
  font-size:clamp(2rem,4vw,3.1rem) !important;
  letter-spacing:-.035em;
}
.page-cart .cart-header h1 i,
.page-checkout .checkout-header h1 i { color:var(--coral) !important; }
.page-cart .continue-shopping {
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.page-cart .continue-shopping:hover { background:var(--brand-soft) !important; }
.page-cart .cart-grid { gap:28px !important; margin-bottom:72px !important; }
.page-cart .cart-items,
.page-cart .cart-summary {
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--line) !important;
  border-radius:28px !important;
  box-shadow:var(--shadow-soft-brand) !important;
}
.page-cart .cart-summary { box-shadow:var(--shadow-brand) !important; }
.page-cart .cart-item { border-bottom-color:var(--line) !important; }
.page-cart .cart-item-image,
.page-cart .item-image {
  border-radius:18px !important;
  background:#faf7ff !important;
  border:1px solid var(--line) !important;
}
.page-cart .cart-item h3,
.page-cart .item-details h3,
.page-cart .summary-title { color:var(--brand-dark) !important; font-family:"Fredoka",sans-serif !important; }
.page-cart .item-price,
.page-cart .cart-total,
.page-cart .total-price { color:var(--brand) !important; }
.page-cart .quantity-btn { border-radius:10px !important; background:var(--brand-soft) !important; color:var(--brand-dark) !important; }
.page-cart .remove-btn { color:var(--coral) !important; }
.page-cart .checkout-btn,
.page-cart .btn-primary { background:var(--brand) !important; color:#fff !important; border-radius:15px !important; box-shadow:none !important; }
.page-cart .checkout-btn:hover,
.page-cart .btn-primary:hover { background:var(--brand-dark) !important; }

/* ---------- CHECKOUT ---------- */
.page-checkout .checkout-grid { gap:28px !important; margin-bottom:72px !important; }
.page-checkout .form-section,
.page-checkout .checkout-summary {
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--line) !important;
  border-radius:26px !important;
  box-shadow:var(--shadow-soft-brand) !important;
}
.page-checkout .checkout-summary { box-shadow:var(--shadow-brand) !important; }
.page-checkout .section-title,
.page-checkout .summary-title {
  color:var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
}
.page-checkout .section-title i { color:var(--coral) !important; }
.page-checkout .payment-option {
  border:1px solid var(--line) !important;
  border-radius:17px !important;
  background:#fff !important;
}
.page-checkout .payment-option:hover { border-color:rgba(111,66,232,.35) !important; background:#fbf9ff !important; }
.page-checkout .payment-option.selected {
  border:2px solid var(--brand) !important;
  background:var(--brand-soft) !important;
  box-shadow:0 0 0 4px rgba(111,66,232,.08) !important;
}
.page-checkout .payment-option input[type="radio"] { accent-color:var(--brand) !important; }
.page-checkout .payment-icon { color:var(--brand) !important; }
.page-checkout .school-invoice-fields { background:#f2fbf7 !important; border-color:rgba(104,214,168,.28) !important; }
.page-checkout .btn-primary { background:var(--brand) !important; color:#fff !important; border-radius:15px !important; box-shadow:none !important; }
.page-checkout .btn-primary:hover { background:var(--brand-dark) !important; transform:translateY(-2px) !important; }

/* ---------- CONTACT ---------- */
.page-contact .contact-hero {
  color:var(--ink) !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,203,71,.22), transparent 14rem),
    radial-gradient(circle at 90% 25%, rgba(102,201,244,.19), transparent 18rem),
    linear-gradient(135deg,#fffaf4 0%,#f5efff 100%) !important;
  padding:72px 0 !important;
  border-radius:0 0 44px 44px;
}
.page-contact .contact-hero h1 {
  color:var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
  font-size:clamp(2.6rem,5vw,4.6rem) !important;
  line-height:.98;
  letter-spacing:-.045em;
}
.page-contact .contact-hero p { color:var(--muted) !important; opacity:1 !important; }
.page-contact .contact-hero-image {
  position:relative;
  padding:18px;
}
.page-contact .contact-hero-image::before {
  content:"";
  position:absolute;
  inset:10% 5% 4%;
  border-radius:38% 62% 58% 42% / 48% 42% 58% 52%;
  background:linear-gradient(145deg,#eee6ff,#fff2c9);
  transform:rotate(-4deg);
}
.page-contact .contact-hero-image img { position:relative; z-index:1; filter:drop-shadow(0 18px 30px rgba(63,40,126,.13)) !important; }
.page-contact .contact-section { padding:76px 0 !important; }
.page-contact .contact-grid { gap:28px !important; margin-top:0 !important; grid-template-columns:.9fr 1.1fr !important; }
.page-contact .contact-info,
.page-contact .contact-form {
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--line) !important;
  border-radius:28px !important;
  box-shadow:var(--shadow-soft-brand) !important;
  padding:clamp(26px,4vw,40px) !important;
}
.page-contact .contact-info h2,
.page-contact .contact-form h2 {
  color:var(--brand-dark) !important;
  font-family:"Fredoka",sans-serif !important;
  font-size:clamp(1.7rem,3vw,2.3rem) !important;
}
.page-contact .contact-item { border-radius:17px !important; margin-bottom:12px !important; }
.page-contact .contact-item:hover { background:#fbf9ff !important; }
.page-contact .contact-icon {
  border-radius:15px !important;
  background:var(--brand-soft) !important;
  color:var(--brand) !important;
}
.page-contact .contact-details h3 { color:var(--brand-dark) !important; }
.page-contact .contact-details a { color:var(--brand) !important; }
.page-contact .social-link { border-radius:14px !important; background:var(--brand-soft) !important; color:var(--brand) !important; }
.page-contact .social-link:hover { background:var(--brand) !important; color:#fff !important; }
.page-contact .btn-primary { background:var(--brand) !important; color:#fff !important; box-shadow:none !important; border-radius:15px !important; }
.page-contact .btn-primary:hover { background:var(--brand-dark) !important; }

/* ---------- ORDER CONFIRMATION ---------- */
.page-confirmation {
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,203,71,.14), transparent 22rem),
    radial-gradient(circle at 90% 10%, rgba(104,214,168,.13), transparent 24rem),
    var(--cream) !important;
}
.page-confirmation .confirmation-card {
  max-width:780px !important;
  border-radius:34px !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-brand) !important;
  background:rgba(255,255,255,.96) !important;
  padding:clamp(28px,5vw,52px) !important;
}
.page-confirmation .success-icon {
  background:var(--brand-soft) !important;
  color:var(--brand) !important;
  box-shadow:none !important;
}
.page-confirmation h1,
.page-confirmation h2,
.page-confirmation .order-number { color:var(--brand-dark) !important; font-family:"Fredoka",sans-serif !important; }
.page-confirmation .order-details,
.page-confirmation .info-box { border-radius:20px !important; background:#fbf9ff !important; border:1px solid var(--line) !important; }
.page-confirmation .btn-primary { background:var(--brand) !important; color:#fff !important; box-shadow:none !important; }
.page-confirmation .btn-secondary { border:1px solid rgba(111,66,232,.25) !important; color:var(--brand) !important; box-shadow:none !important; }

/* ---------- OFFLINE ---------- */
.page-offline {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,203,71,.16), transparent 22rem),
    radial-gradient(circle at 85% 12%, rgba(102,201,244,.14), transparent 24rem),
    var(--cream) !important;
}
.page-offline .offline-container {
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:34px !important;
  box-shadow:var(--shadow-brand) !important;
  max-width:680px !important;
}
.page-offline h1 { color:var(--brand-dark) !important; font-family:"Fredoka",sans-serif !important; }
.page-offline .offline-icon { color:var(--brand) !important; }
.page-offline .btn { background:var(--brand) !important; color:#fff !important; border-radius:15px !important; }
.page-offline .features { background:#fbf9ff !important; border-radius:20px !important; }

/* ---------- Generic small-screen consistency ---------- */
@media (max-width: 900px) {
  .page-shop .shop-header { padding:54px 0 50px !important; border-radius:0 0 32px 32px !important; }
  .page-shop .shop-layout { flex-direction:column !important; }
  .page-shop .shop-filters { width:100%; flex-basis:auto !important; }
  .page-product .product-detail { grid-template-columns:1fr !important; }
  .page-product .product-gallery { position:relative !important; top:auto !important; }
  .page-product .main-image { min-height:390px !important; }
  .page-contact .contact-grid { grid-template-columns:1fr !important; }
  .page-contact .contact-hero-container { flex-direction:column !important; text-align:center !important; }
  .page-contact .contact-hero-content { text-align:center !important; }
  .page-contact .contact-hero-content p { margin-left:auto; margin-right:auto; }
  .page-contact .contact-hero-image { flex-basis:auto !important; max-width:430px; }
}

@media (max-width: 650px) {
  body:not(.page-home) .container { padding-left:16px !important; padding-right:16px !important; }
  .page-shop .shop-header { padding:44px 0 40px !important; }
  .page-shop .shop-title h1 { font-size:2.55rem !important; }
  .page-shop .shop-toolbar { border-radius:18px !important; }
  .page-product .product-info { border-radius:24px !important; padding:24px 20px !important; }
  .page-product .main-image { min-height:300px !important; border-radius:24px !important; padding:20px !important; }
  .page-cart .cart-items,
  .page-cart .cart-summary,
  .page-checkout .form-section,
  .page-checkout .checkout-summary,
  .page-contact .contact-info,
  .page-contact .contact-form { border-radius:22px !important; }
  .page-contact .contact-hero { padding:52px 0 !important; border-radius:0 0 30px 30px; }
}


/* =========================================================
   PRODUCT PAGE — 2026 UX/PERFORMANCE POLISH
   ========================================================= */
.page-product .breadcrumb {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px 0 !important;
  color: var(--muted) !important;
  font-size: .9rem;
}
.page-product .breadcrumb a { color: var(--brand) !important; font-weight: 700; }
.page-product .breadcrumb i { color: #c9bfdc !important; font-size: .68rem; }

.page-product .product-detail {
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr) !important;
  gap: clamp(28px, 4vw, 54px) !important;
  margin: 28px 0 72px !important;
  align-items: start !important;
}
.page-product .product-gallery { top: 92px !important; }
.page-product .main-image {
  min-height: 590px !important;
  padding: clamp(22px, 3vw, 38px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(111,66,232,.10) !important;
  background: #fff !important;
  box-shadow: 0 14px 40px rgba(73,44,130,.08) !important;
}
.page-product .main-image:hover {
  border-color: rgba(111,66,232,.20) !important;
  box-shadow: 0 18px 48px rgba(73,44,130,.11) !important;
}
.page-product .main-image img {
  max-height: 540px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}
.page-product .thumbnail-list { gap: 12px !important; padding: 4px 2px 10px !important; }
.page-product .thumbnail {
  width: 78px !important;
  height: 78px !important;
  border-radius: 15px !important;
  padding: 9px !important;
  border: 1px solid var(--line) !important;
}
.page-product .thumbnail.active {
  border: 2px solid var(--brand) !important;
  background: var(--brand-soft) !important;
}

.page-product .product-info {
  border-radius: 30px !important;
  padding: clamp(26px, 3.5vw, 40px) !important;
  border: 1px solid rgba(111,66,232,.11) !important;
  box-shadow: 0 16px 44px rgba(73,44,130,.09) !important;
}
.page-product .product-meta { margin-bottom: 18px !important; }
.page-product .product-title {
  font-size: clamp(2rem, 3.4vw, 3.15rem) !important;
  line-height: 1.04 !important;
  margin-bottom: 14px !important;
}
.page-product .product-price {
  font-size: clamp(1.85rem, 2.6vw, 2.45rem) !important;
  margin-bottom: 18px !important;
}
.page-product .short-desc {
  background: #fbf9ff !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
}
.page-product .educational-tags { gap: 8px !important; margin-bottom: 22px !important; }
.page-product .tag {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--brand-dark) !important;
  padding: 7px 13px !important;
  font-size: .82rem !important;
}
.page-product .add-to-cart {
  margin: 20px 0 22px !important;
  padding: 20px !important;
  border: 1px solid rgba(111,66,232,.12) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fbf9ff, #fffdf7) !important;
}
.page-product .quantity {
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.page-product .quantity button,
.page-product .quantity input { height: 48px !important; }
.page-product .quantity button { width: 44px !important; }
.page-product .quantity input { width: 58px !important; }
.page-product .cart-actions { gap: 10px !important; }
.page-product .btn-add-cart,
.page-product .btn-school-quote {
  min-height: 50px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.page-product .btn-add-cart {
  background: var(--brand) !important;
  color: #fff !important;
}
.page-product .btn-add-cart:hover { background: var(--brand-dark) !important; transform: translateY(-1px) !important; }
.page-product .gift-wrapping-section {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fffdf5 !important;
  padding: 18px !important;
}
.page-product .product-benefits {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
}
.page-product .benefit-item {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;
}
.page-product .tabs-section { margin-top: 4px !important; }
.page-product .tabs-nav {
  position: sticky;
  top: 78px;
  z-index: 20;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}
.page-product .tabs-nav::-webkit-scrollbar { display:none; }
.page-product .tab-btn { white-space: nowrap; min-height: 44px; }
.page-product .tab-pane {
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(73,44,130,.06) !important;
}
.page-product .related-title { margin-top: 62px !important; margin-bottom: 24px !important; }

@media (max-width: 900px) {
  .page-product .product-detail { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 48px !important; }
  .page-product .product-gallery { position: relative !important; top: auto !important; }
  .page-product .main-image { min-height: 430px !important; }
  .page-product .product-info { padding: 26px !important; }
  .page-product .tabs-nav { top: 70px; }
}
@media (max-width: 650px) {
  .page-product .breadcrumb { padding: 16px 16px 0 !important; }
  .page-product .product-detail { margin-top: 18px !important; gap: 18px !important; }
  .page-product .main-image { min-height: 315px !important; padding: 16px !important; border-radius: 22px !important; }
  .page-product .product-info { padding: 22px 18px !important; border-radius: 22px !important; }
  .page-product .product-title { font-size: 2rem !important; }
  .page-product .product-benefits { grid-template-columns: 1fr !important; }
  .page-product .add-to-cart { padding: 16px !important; }
  .page-product .cart-actions { flex-direction: column !important; }
  .page-product .btn-add-cart, .page-product .btn-school-quote { width: 100% !important; min-width: 0 !important; }
  .page-product .tabs-nav { top: 62px; border-radius: 14px !important; padding: 5px !important; }
  .page-product .tab-btn { padding: 10px 13px !important; font-size: .86rem !important; }
  .page-product .tab-pane { padding: 20px 16px !important; }
}


/* Actual dynamic product renderer refinements */
.page-product .product-category {
  color: var(--brand) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
.page-product .product-rating {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin: 4px 0 14px !important;
  color: var(--muted) !important;
  font-size:.9rem !important;
}
.page-product .product-rating .stars { color:#f5b82e !important; letter-spacing:2px; }
.page-product .product-short-description {
  margin: 16px 0 18px !important;
  padding: 16px 18px !important;
  background: #fbf9ff !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: 16px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
}
.page-product .product-actions {
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--line) !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:10px !important;
}
.page-product .product-actions .btn {
  width:100% !important;
  min-width:0 !important;
  min-height:52px !important;
  border-radius:15px !important;
  box-shadow:none !important;
}
.page-product .product-actions .btn-primary {
  background:var(--brand) !important;
  color:#fff !important;
}
.page-product .product-actions .btn-primary:hover { background:var(--brand-dark) !important; transform:translateY(-1px) !important; }
.page-product .product-actions .btn-secondary {
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid rgba(111,66,232,.22) !important;
}
.page-product .product-actions .btn-secondary:hover { background:var(--brand-soft) !important; transform:translateY(-1px) !important; }
.page-product .product-stock {
  display:inline-flex !important;
  align-items:center !important;
  min-height:34px !important;
  padding:7px 11px !important;
  border-radius:10px !important;
  background:#f7fbf6 !important;
  border:1px solid #e2f0de !important;
  font-size:.88rem !important;
  font-weight:700 !important;
}
@media (max-width:650px) {
  .page-product .product-actions { grid-template-columns:1fr !important; }
}