/* ============================================
   Sólskin — Sunny Toybox
   A bright Icelandic kids-store identity: big squishy cards,
   chunky tactile press-shadows you can almost click, candy-bright
   multi-hue category sweets, and one signature motif — slow sun-rays
   turning behind the hero. Fredoka goes BIG and friendly; Nunito keeps
   the copy round and readable. The opposite of calm/earthy siblings.
   Fonts: Fredoka (display) + Nunito (body)
   ============================================ */

/* Token tweaks — beats the inline :root palette by specificity (body.x = 0,1,1
   vs :root = 0,1,0). The page canvas stays the sunny cream the platform sets
   (--surface), so we do NOT touch it here (the base body uses --surface for its
   background — moving it would just shift card AND canvas together). Card faces
   and image wells get explicit warm-white / peach values on the elements below
   so they LIFT off the cream. We only re-map the named decorative planes plus a
   ROUNDED font fallback so the pre-swap flash isn't an ugly serif. */
body.theme-sunshine {
  --card-face: oklch(0.997 0.006 95);    /* warm white — product/panel faces */
  --image-well: oklch(0.949 0.03 74);    /* soft peach — image letterbox / placeholder base */
  --font-display: 'Fredoka', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-heading: 'Fredoka', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* The per-header-style base rules (header[data-theme="…"] ~ main .section-head h2)
   impose a thin, literary italic — wrong for a kids store. Re-assert Fredoka
   upright and bold. Ties their (0,2,3) specificity and wins on load order. */
body.theme-sunshine main .section-head h2 {
  font-style: normal;
  font-weight: 700;
}

.theme-sunshine {
  /* --- Sunny accent layer (warm bright pastels on light surface, never neon) --- */
  --sun: oklch(0.85 0.15 88);
  --sun-deep: oklch(0.73 0.16 72);
  --sky-pop: oklch(0.8 0.11 232);
  --berry: oklch(0.66 0.18 14);
  --mint: oklch(0.86 0.11 162);

  /* --- Modular type scale (ratio ~1.32, named tokens) --- */
  --step--1: 0.875rem;                       /* labels / meta */
  --step-0: 1rem;                            /* body */
  --step-1: clamp(1.125rem, 1.4vw, 1.375rem); /* lead / price */
  --step-2: clamp(1.5rem, 2.6vw, 2rem);      /* sub-display */
  --step-3: clamp(1.95rem, 3.6vw, 2.75rem);  /* section heads */
  --step-4: clamp(2.75rem, 6vw, 4.5rem);     /* hero display */

  /* --- Vertical rhythm + signature depth-shadow tokens --- */
  --rhythm: clamp(3rem, 7vw, 6rem);
  --depth: 0 4px 0 color-mix(in oklab, var(--sun-deep) 60%, black 8%);
  --depth-sun: 0 3px 0 color-mix(in oklab, var(--sun-deep) 32%, transparent);

  /* Round, friendly body copy */
  font-family: var(--font-body);
  letter-spacing: 0.005em;

  /* Fredoka drives every display element */
  & .hero-content h1,
  & .hero.hero-minimal h1,
  & .hero.hero-banner .hero-banner-text h1,
  & .section-head h2,
  & .category-card h3,
  & .pdp-info h1,
  & .newsletter-inner h2,
  & .related-section .section-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  /* --- Generous, roomy rhythm so cards float --- */
  & main > section {
    padding-block: var(--rhythm);
  }

  /* ============================================
     HERO — sunny scene + the signature sun-ray motif
     ============================================ */
  & .hero-content {
    & .hero-eyebrow {
      color: var(--sun-deep);
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    & h1 {
      font-size: var(--step-4);
      line-height: 1.02;
      letter-spacing: -0.01em;
    }

    & .hero-sub {
      font-size: var(--step-1);
      line-height: 1.6;
      max-width: 38ch;
    }
  }

  /* Replace the calm base blob with a warm sunrise wash */
  & .hero-blob {
    background:
      radial-gradient(circle at 50% 122%, var(--sun) 0%, var(--sun-deep) 30%, transparent 64%),
      radial-gradient(circle at 18% 14%, color-mix(in oklab, var(--sky-pop) 70%, white) 0%, transparent 42%),
      color-mix(in oklab, var(--sun) 12%, var(--surface));
    animation: none;
  }

  /* SIGNATURE MOTIF: slow-turning sun-rays behind the hero visual.
     Transform-only rotation, clipped by the hero-visual's overflow:hidden. */
  & .hero-visual {
    isolation: isolate;

    &::after {
      content: "";
      position: absolute;
      inset: -40%;
      z-index: 0;
      background: conic-gradient(
        from 0deg at 50% 100%,
        transparent 0 7deg,
        color-mix(in oklab, var(--sun) 45%, transparent) 7deg 11deg,
        transparent 11deg 20deg
      );
      transform-origin: 50% 100%;
      animation: sunshine-rays 36s linear infinite;
      pointer-events: none;
    }
  }

  /* Chunky toy-button press for hero CTAs */
  & .hero-actions a {
    border-radius: var(--radius-full);
    font-weight: 700;
    box-shadow: var(--depth);
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 color-mix(in oklab, var(--sun-deep) 60%, black 8%);
    }

    &:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 color-mix(in oklab, var(--sun-deep) 60%, black 8%);
    }

    &.secondary {
      box-shadow: 0 4px 0 color-mix(in oklab, var(--border) 80%, black 5%);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 color-mix(in oklab, var(--border) 80%, black 5%);
      }

      &:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 color-mix(in oklab, var(--border) 80%, black 5%);
      }
    }
  }

  /* ============================================
     SECTION HEADS — friendly + a tiny sun-dot motif
     ============================================ */
  & .section-head h2 {
    font-size: var(--step-3);
    line-height: 1.05;

    &::after {
      content: "";
      display: inline-block;
      width: 0.42em;
      height: 0.42em;
      margin-inline-start: 0.32em;
      border-radius: 50%;
      background: var(--sun-deep);
      vertical-align: 0.08em;
    }
  }

  & .section-link {
    font-weight: 700;
    color: var(--sun-deep);
  }

  /* ============================================
     CATEGORIES — candy-bright multi-hue sweets
     ============================================ */
  & .category-card {
    border-radius: 1.5rem;
    padding: 1.75rem 1rem;
    background: color-mix(in oklab, var(--sun) 22%, var(--surface));
    box-shadow: var(--depth-sun);
    transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-out);

    &:hover {
      transform: translateY(-4px) rotate(-2deg);
      box-shadow: 0 9px 0 color-mix(in oklab, var(--sun-deep) 32%, transparent);
    }

    & .category-image {
      background: color-mix(in oklab, white 55%, var(--sun));
      color: var(--sun-deep);
    }

    & h3 {
      font-size: var(--step-1);
    }

    /* Rotate through three candy hues for a sweets-jar row */
    &:nth-child(3n + 1) {
      background: color-mix(in oklab, var(--sky-pop) 22%, var(--surface));
      box-shadow: 0 3px 0 color-mix(in oklab, var(--sky-pop) 45%, transparent);

      & .category-image { background: color-mix(in oklab, white 55%, var(--sky-pop)); color: oklch(0.42 0.1 232); }

      &:hover { box-shadow: 0 9px 0 color-mix(in oklab, var(--sky-pop) 45%, transparent); }
    }

    &:nth-child(3n + 2) {
      background: color-mix(in oklab, var(--mint) 26%, var(--surface));
      box-shadow: 0 3px 0 color-mix(in oklab, var(--mint) 50%, transparent);

      & .category-image { background: color-mix(in oklab, white 55%, var(--mint)); color: oklch(0.45 0.1 162); }

      &:hover { box-shadow: 0 9px 0 color-mix(in oklab, var(--mint) 50%, transparent); }
    }
  }

  /* ============================================
     PRODUCT CARDS — big squishy cards (most-rounded element)
     ============================================ */
  & .product-grid {
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
  }

  & .product-card {
    border-radius: 1.75rem;
    background: var(--card-face);
    border: 1px solid color-mix(in oklab, var(--sun-deep) 18%, var(--card-face));
    box-shadow: var(--depth-sun);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out);
    overflow: clip;

    & .product-image {
      aspect-ratio: 4 / 5;            /* a touch less towering than the 3/4 base */
      border-radius: 1.5rem 1.5rem 0 0;
      background: var(--image-well);
    }

    /* Imageless products read as a sunny window, not a broken "no photo" box:
       a soft sky with a friendly sun rising at the bottom edge. The hue rotates
       per card (sky / mint / blush / lilac) so a grid of placeholders feels like
       a candy row, not a stamped template. */
    & .product-placeholder {
      --ph-sky: var(--sky-pop);
      --ph-glow: var(--sun);
      --ph-glow-deep: var(--sun-deep);
      background:
        radial-gradient(120% 90% at 50% 118%, var(--ph-glow) 0%, var(--ph-glow-deep) 26%, transparent 56%),
        linear-gradient(180deg, color-mix(in oklab, var(--ph-sky) 26%, var(--card-face)) 0%, var(--image-well) 78%);

      &::after {
        width: clamp(40px, 34%, 88px);
        background: color-mix(in oklab, white 78%, var(--sun));
        -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M22.5 12h-2.6M4.1 12H1.5M19.4 4.6l-1.8 1.8M6.4 17.6l-1.8 1.8M19.4 19.4l-1.8-1.8M6.4 6.4 4.6 4.6'/%3E%3C/g%3E%3C/svg%3E");
        mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M22.5 12h-2.6M4.1 12H1.5M19.4 4.6l-1.8 1.8M6.4 17.6l-1.8 1.8M19.4 19.4l-1.8-1.8M6.4 6.4 4.6 4.6'/%3E%3C/g%3E%3C/svg%3E");
      }
    }

    &:nth-child(4n + 2) .product-placeholder {
      --ph-sky: var(--mint);
      --ph-glow: var(--mint);
      --ph-glow-deep: oklch(0.62 0.12 162);
    }
    &:nth-child(4n + 3) .product-placeholder {
      --ph-sky: var(--berry);
      --ph-glow: oklch(0.84 0.11 26);
      --ph-glow-deep: var(--berry);
    }
    &:nth-child(4n + 4) .product-placeholder {
      --ph-sky: oklch(0.82 0.09 305);
      --ph-glow: var(--sun);
      --ph-glow-deep: var(--sun-deep);
    }

    & .product-info {
      padding: 1rem 1.125rem 1.25rem;
      gap: 0.25rem;
    }

    & h3 {
      font-size: var(--step-0);
      font-weight: 600;
    }

    & .product-brand {
      color: var(--sun-deep);
    }

    & .product-price {
      font-size: var(--step-1);
      font-weight: 700;
    }

    &:hover {
      transform: translateY(-6px) rotate(-0.6deg);
      box-shadow: 0 14px 0 color-mix(in oklab, var(--sun-deep) 30%, transparent);

      & .product-image { transform: scale(1.03); }
    }

    /* Tilted sticker sale-badge — the candy-merchandising motif */
    & .sale-badge {
      background: var(--berry);
      color: color-mix(in oklab, white 92%, var(--sun));
      border-radius: 0.9rem;
      box-shadow: 0 2px 0 color-mix(in oklab, var(--berry) 70%, black);
      transform: rotate(-6deg);

      &.sale-badge--clearance {
        background: var(--sun-deep);
        box-shadow: 0 2px 0 color-mix(in oklab, var(--sun-deep) 70%, black);
      }

      &.sale-badge--wholesale {
        background: oklch(0.5 0.11 162);
        box-shadow: 0 2px 0 color-mix(in oklab, oklch(0.5 0.11 162) 70%, black);
      }
    }

    /* Tactile press on the in-card add button — a contained pill, not an edge bar.
       Solid coral, a chunky coral under-shadow, and a real lift→press (base only
       fades opacity on hover, which read as washed-out). */
    & .card-action {
      margin: 0.625rem 1.125rem 1.25rem;
      width: auto;
      padding-block: 0.6rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: 0 3px 0 color-mix(in oklab, var(--bark) 72%, black 12%);
      transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);

      &:hover {
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0 5px 0 color-mix(in oklab, var(--bark) 72%, black 12%);
      }

      &:active {
        transform: translateY(2px);
        box-shadow: 0 1px 0 color-mix(in oklab, var(--bark) 72%, black 12%);
      }

      &.added {
        box-shadow: 0 3px 0 color-mix(in oklab, var(--mint) 60%, black 10%);
      }
    }

    /* Size quick-pick — quiet tactile chips, NOT loud coral fills. The base paints
       them solid --bark (coral) on cream; here they're warm-white with a soft
       border and only commit to coral on hover/press. */
    & .card-variants {
      margin: 0.625rem 1.125rem 1.25rem;

      & > button {
        height: 34px;
        min-width: 38px;
        background: var(--card-face);
        color: color-mix(in oklab, var(--text) 88%, var(--sun-deep));
        border: 1.5px solid color-mix(in oklab, var(--sun-deep) 34%, var(--surface));
        border-radius: var(--radius-full);
        font-weight: 700;
        box-shadow: 0 2px 0 color-mix(in oklab, var(--sun-deep) 22%, transparent);
        transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out),
                    background 0.12s var(--ease-out), color 0.12s var(--ease-out);

        &:hover {
          background: color-mix(in oklab, var(--sun) 40%, var(--surface));
          border-color: var(--sun-deep);
          transform: translateY(-2px);
          box-shadow: 0 4px 0 color-mix(in oklab, var(--sun-deep) 28%, transparent);
        }

        &:active {
          transform: translateY(1px);
          box-shadow: 0 1px 0 color-mix(in oklab, var(--sun-deep) 28%, transparent);
        }

        &:disabled {
          background: var(--card-face);
          color: color-mix(in oklab, var(--text) 32%, transparent);
          border-color: color-mix(in oklab, var(--sun-deep) 16%, var(--card-face));
          box-shadow: none;
        }
      }

      &.confirmed {
        background: color-mix(in oklab, var(--mint) 40%, var(--surface));
        border-radius: var(--radius-full);
      }

      & > .confirm-msg { color: oklch(0.42 0.12 158); font-weight: 700; }
    }
  }

  /* ============================================
     NEWSLETTER — bright sunny panel (no dark slab)
     ============================================ */
  & .newsletter {
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--sun) 0%, var(--sun-deep) 100%);
    color: oklch(0.27 0.06 62);

    & .newsletter-inner {
      & h2 {
        color: inherit;
        font-size: var(--step-2);
      }

      & p {
        color: color-mix(in oklab, oklch(0.27 0.06 62) 78%, transparent);
        font-size: var(--step-0);
      }

      & form {
        background: color-mix(in oklab, white 72%, var(--sun));
        border-radius: var(--radius-full);
        box-shadow: inset 0 1px 2px color-mix(in oklab, var(--sun-deep) 25%, transparent);
      }

      & input[type="email"] {
        color: oklch(0.27 0.06 62);

        &::placeholder { color: color-mix(in oklab, oklch(0.27 0.06 62) 55%, transparent); }
      }

      & button {
        background: var(--berry);
        color: color-mix(in oklab, white 92%, var(--sun));
        font-weight: 700;
        border-radius: var(--radius-full);
        box-shadow: 0 3px 0 color-mix(in oklab, var(--berry) 70%, black);
        transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);

        &:hover {
          background: var(--berry);
          transform: translateY(-2px);
          box-shadow: 0 5px 0 color-mix(in oklab, var(--berry) 70%, black);
        }

        &:active {
          transform: translateY(2px);
          box-shadow: 0 1px 0 color-mix(in oklab, var(--berry) 70%, black);
        }
      }
    }
  }

  /* ============================================
     CATALOG — roomy, rounded, sunny toolbar
     ============================================ */
  & .catalog {
    gap: clamp(2rem, 5vw, 4rem);
  }

  & .catalog-toolbar {
    background: color-mix(in oklab, var(--sun) 14%, var(--surface));
    border-block-end: none;
    border-radius: var(--radius-full);
    padding: 0.625rem 1.25rem;

    & .result-count {
      font-weight: 700;
      font-size: var(--step--1);
    }

    & .sort-select select {
      border-radius: var(--radius-full);
      border-color: color-mix(in oklab, var(--sun-deep) 30%, var(--border));
    }
  }

  & .filter-group h3 {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--step--1);
    font-weight: 700;
  }

  & .active-filters .active-filter-pill {
    border-radius: var(--radius-full);
    font-weight: 700;
    background: color-mix(in oklab, var(--sun) 28%, var(--surface));
    border-color: var(--sun-deep);
    color: oklch(0.4 0.08 70);

    &:hover {
      background: var(--sun-deep);
      color: color-mix(in oklab, white 92%, var(--sun));
    }
  }

  /* ============================================
     PDP — playful, tactile, bright
     ============================================ */
  & .pdp {
    gap: clamp(2rem, 4vw, 3rem);
  }

  & .pdp-hero {
    border-radius: 1.5rem;

    /* Same sunny window as the listing cards, scaled up for the big PDP hero. */
    & .product-placeholder {
      background:
        radial-gradient(110% 80% at 50% 116%, var(--sun) 0%, var(--sun-deep) 24%, transparent 54%),
        linear-gradient(180deg, color-mix(in oklab, var(--sky-pop) 30%, var(--card-face)) 0%, var(--image-well) 80%);

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: clamp(80px, 26%, 150px);
        aspect-ratio: 1;
        background: color-mix(in oklab, white 80%, var(--sun));
        -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M22.5 12h-2.6M4.1 12H1.5M19.4 4.6l-1.8 1.8M6.4 17.6l-1.8 1.8M19.4 19.4l-1.8-1.8M6.4 6.4 4.6 4.6'/%3E%3C/g%3E%3C/svg%3E");
        mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M22.5 12h-2.6M4.1 12H1.5M19.4 4.6l-1.8 1.8M6.4 17.6l-1.8 1.8M19.4 19.4l-1.8-1.8M6.4 6.4 4.6 4.6'/%3E%3C/g%3E%3C/svg%3E");
      }
    }
  }

  & .pdp-gallery .pdp-thumbnails button {
    border-radius: 0.75rem;

    &[aria-pressed="true"] {
      outline: 2px solid var(--sun-deep);
      outline-offset: 2px;
    }
  }

  & .pdp-info {
    & .pdp-brand {
      color: var(--sun-deep);
      font-weight: 700;
    }

    & h1 {
      font-size: var(--step-3);
      line-height: 1.05;
    }

    & .pdp-price {
      font-size: var(--step-2);
      font-weight: 700;
    }

    & .pdp-description {
      font-size: var(--step-0);
      line-height: 1.7;
      max-width: 68ch;
    }
  }

  & .pdp-actions {
    & .quantity-selector {
      border-radius: var(--radius-full);
      border-color: color-mix(in oklab, var(--sun-deep) 35%, var(--border));
    }

    & .pdp-add-btn {
      border-radius: var(--radius-full);
      font-weight: 700;
      font-size: var(--step-0);
      padding-block: 0.9rem;
      box-shadow: var(--depth);
      transition: background 0.2s var(--ease-out), transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);

      &:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 color-mix(in oklab, var(--sun-deep) 60%, black 8%);
      }
    }
  }

  & .pdp-trust {
    font-size: var(--step--1);
    font-weight: 600;

    & .trust-item svg { color: var(--sun-deep); }
  }

  & .pdp-variants .pdp-variant-btn {
    border-radius: var(--radius-full);
    font-weight: 700;
  }

  & .pdp-tabs .pdp-tab-nav button {
    border-radius: var(--radius-full);
    font-weight: 700;
  }

  /* ============================================
     RELATED — sunny rounded panel
     ============================================ */
  & .related-section {
    border-block-start: none;
    background: color-mix(in oklab, var(--sun) 12%, var(--surface));
    border-radius: 2rem;
    padding: clamp(2rem, 4vw, 3rem);
    margin-block-start: var(--rhythm);
  }

  /* ============================================
     MOTION SAFETY — kill the sun-rays for reduced-motion users.
     Base already neutralises animation-duration globally; this also
     removes the spinning layer entirely so nothing lingers mid-rotation.
     ============================================ */
  @media (prefers-reduced-motion: reduce) {
    & .hero-visual::after { animation: none; display: none; }
  }
}

/* Keyframes are globally scoped, so they live outside the theme block;
   the unique name keeps them sunshine-only. Only the .theme-sunshine
   hero-visual::after references this animation. */
@keyframes sunshine-rays {
  to { transform: rotate(360deg); }
}