/* feminine.css — the Gimme MWAH decorative layer.
 *
 * Loads last, site-wide. It only dresses what is already there — sparkles,
 * soft lilac-to-blush gradients, scalloped edges, a glow on the pill buttons —
 * and never changes layout, spacing or markup, so the ported page structure
 * and everything the Customizer controls keeps working underneath it.
 *
 * Colours come from the tokens, so Appearance > Customize > Brand colours
 * recolours all of this too. Motion is limited to hover and a slow shimmer,
 * and switched off entirely under prefers-reduced-motion.
 */

:root {
  --fem-grad: linear-gradient(135deg, var(--wash) 0%, var(--wash-warm) 55%, #FFE9EF 100%);
  --fem-grad-strong: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 55%, var(--accent) 100%);
  --fem-glow: 0 10px 30px -8px color-mix(in srgb, var(--brand) 55%, transparent);
  --fem-glow-soft: 0 24px 60px -20px color-mix(in srgb, var(--brand-soft) 60%, transparent);

  /* Four-point sparkle and heart, as masks so they take any colour. */
  --fem-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z'/%3E%3C/svg%3E");
  --fem-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5L12 21.3z'/%3E%3C/svg%3E");

  /* Scalloped edge: a row of half-circles, tiled horizontally. */
  --fem-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 12C0 5.4 4.5 0 10 0s10 5.4 10 12C20 5.4 24.5 0 30 0s10 5.4 10 12z'/%3E%3C/svg%3E");

  /* Hand-drawn squiggle for headline underlines. */
  --fem-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 8c10-6 18-6 28 0s18 6 28 0 18-6 28 0 18 6 28 0'/%3E%3C/svg%3E");
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* ---- eyebrow dot becomes a sparkle ---------------------------------------- */

.op-dot {
  width: 11px;
  height: 11px;
  border-radius: 0;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
}

/* ---- buttons: gradient pill with a soft glow ------------------------------- */

.op-btn--primary {
  background: var(--fem-grad-strong);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: var(--fem-glow);
  transition: background-position 0.5s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  .op-btn--primary:hover {
    background: var(--fem-grad-strong);
    background-size: 180% 100%;
    background-position: 100% 50%;
    box-shadow: 0 14px 36px -8px color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-1px);
  }

  .op-btn--secondary:hover,
  .op-btn--outline:hover {
    background: var(--wash-warm);
  }
}

.op-btn--secondary,
.op-btn--outline {
  border-color: color-mix(in srgb, var(--brand-soft) 45%, var(--line));
}

/* ---- hero: sparkle on the eyebrow, scalloped bottom edge ------------------- */

.sm-eyebrow::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
}

.sm-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 14px;
  background: var(--white);
  -webkit-mask: var(--fem-scallop) left bottom / 40px 12px repeat-x;
          mask: var(--fem-scallop) left bottom / 40px 12px repeat-x;
  pointer-events: none;
  z-index: 3;
}

/* ---- "Meet the collection." : dreamy band with sparkles --------------------- */

.op-products-header {
  position: relative;
  background:
    radial-gradient(420px 240px at 88% 20%, color-mix(in srgb, var(--accent-soft) 45%, transparent), transparent 70%),
    radial-gradient(520px 300px at 70% 90%, color-mix(in srgb, var(--brand-soft) 28%, transparent), transparent 70%),
    var(--fem-grad);
  /* No radius and no overflow clip: the slider's progress rail lives inside
     this header and runs edge to edge, so clipping cut its labels off. */
}

.op-products-header::before,
.op-products-header::after {
  content: "";
  position: absolute;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

.op-products-header::before { width: 34px; height: 34px; right: 12%; top: 22%; }
.op-products-header::after  { width: 18px; height: 18px; right: 20%; top: 58%; opacity: 0.6; }

.op-products-header__title {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.op-products-header__title::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -4px;
  width: min(180px, 45%);
  height: 12px;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-squiggle) left center / 100% 100% no-repeat;
          mask: var(--fem-squiggle) left center / 100% 100% no-repeat;
}

/* ---- product cards: rounder, blushing, glowing -------------------------- */

.op-card__shell {
  border-radius: 28px;
  border-color: color-mix(in srgb, var(--brand-soft) 30%, var(--border));
  background:
    radial-gradient(120% 60% at 50% 100%, var(--wash-warm) 0%, transparent 60%),
    var(--white);
}

.op-card__video { background: transparent; }

.op-card.is-focal .op-card__shell {
  box-shadow: var(--fem-glow-soft), 0 2px 0 color-mix(in srgb, var(--brand-soft) 25%, transparent);
}

.op-card__chip {
  background: var(--white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 18%, transparent);
}

.op-card.is-focal .op-card__shell::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
  animation: fem-twinkle 2.6s ease-in-out infinite;
  z-index: 2;
}

.op-progress__fill { background: var(--fem-grad-strong); }

/* ---- signup band: blush gradient with a scalloped top and a heart ----------- */

.op-signup {
  position: relative;
  background: var(--fem-grad);
  border-top: 0;
}

.op-signup::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: var(--wash);
  -webkit-mask: var(--fem-scallop) left bottom / 40px 12px repeat-x;
          mask: var(--fem-scallop) left bottom / 40px 12px repeat-x;
  pointer-events: none;
}

.op-signup__title::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -2px;
  background: var(--accent);
  -webkit-mask: var(--fem-heart) center / contain no-repeat;
          mask: var(--fem-heart) center / contain no-repeat;
}

.op-signup__input {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--brand-soft) 40%, var(--border));
}

.op-signup__input:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
}

/* ---- footer: soft wash and a gradient hairline -------------------------- */

.op-footer {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--brand), var(--brand-soft), var(--accent)) top / 100% 2px no-repeat,
    linear-gradient(180deg, var(--white) 0%, var(--wash-warm) 100%);
}

.op-footer a:hover { color: var(--brand); }

/* ---- age gate: a soft orchid glow behind the panel ---------------------- */

.mwah-gate,
[data-age-gate] {
  background:
    radial-gradient(600px 380px at 50% 45%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 70%),
    #000;
}

/* The Customizer logo is the black lockup; on the black gate it vanished. */
.mwah-gate__logo { filter: brightness(0) invert(1); }

/* ---- product page -------------------------------------------------------- */

.pd-hero__media > img:first-child {
  border-radius: 28px;
  background: var(--fem-grad);
}

.pd-back {
  border-color: color-mix(in srgb, var(--brand-soft) 40%, var(--line));
}

.pd-about .caption::before,
.pd-specs h2::before,
.pd-faq h2::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.35em;
  vertical-align: 0.1em;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
}

.pd-specs__cell {
  border-radius: 18px;
  background: var(--fem-grad);
}

.pd-faq__item {
  border-radius: 18px;
}

/* ---- bulk modal ---------------------------------------------------------- */

.mwah-bulk__panel {
  border-radius: 28px;
  box-shadow: var(--fem-glow-soft);
}

.mwah-bulk__eyebrow::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  background: var(--fem-grad-strong);
  -webkit-mask: var(--fem-sparkle) center / contain no-repeat;
          mask: var(--fem-sparkle) center / contain no-repeat;
}

/* ---- editor content: heart bullets --------------------------------------- */

.entry-content ul { list-style: none; padding-left: 1.5em; }
.entry-content ul > li { position: relative; }
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: -1.3em;
  top: 0.45em;
  width: 0.7em;
  height: 0.7em;
  background: var(--accent);
  -webkit-mask: var(--fem-heart) center / contain no-repeat;
          mask: var(--fem-heart) center / contain no-repeat;
}

/* ---- motion -------------------------------------------------------------- */

@keyframes fem-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(0.6) rotate(20deg); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .op-card.is-focal .op-card__shell::after { animation: none; }
  .op-btn--primary,
  .op-btn--primary:hover { transition: none; transform: none; }
}