/* Warm premium / Clay: a variant of warm-premium, after instalanding.ai's clay-constellation-saas-hero
   (MIT). Warm paper with soft clay tiles and one warm yellow. Cards, plans, the visit card and the
   placeholders are moulded clay (a 165deg gradient through three tones, a lit top edge, a shaded
   bottom edge, an inner glow, a tinted ambient shadow); the yellow is the button and nothing else
   shouts. Funnel Display 800 for headlines, Manrope for reading, JetBrains Mono for figures. Buttons
   are yellow pills whose corners squish on hover; the lift is in the shadow, not a transform.
   Loads after warm-premium.css and overrides it. Suits florists, boutiques, beauty, gift shops. */

:root[data-variant="warm-premium-clay"] {
  --bg: #f6f3eb;
  --bg-soft: #ecead4;
  --surface: #fbf9f3;
  --ink: #0f0f0f;
  --ink-2: #3a3a36;
  --muted: #5a5a55;
  --line: #d9d5c0;
  --accent: #6f5800;          /* the yellow darkened to read as text */
  --primary: #fde351;         /* the one yellow */
  --primary-ink: rgb(0 0 0 / 0.82);
  --glass: rgb(255 255 255 / 0.55);
  --glass-border: rgb(255 255 255 / 0.7);

  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.045em;
  --display-leading: 1;

  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 36px;

  /* clay families: light, mid, deep, and the tint of their shadows */
  --mint-1: #dcf5dc; --mint-2: #c8ecc8; --mint-3: #95c598; --mint-t: 70 130 85;
  --plum-1: #ece2f8; --plum-2: #dcd0ee; --plum-3: #ab9bd0; --plum-t: 105 85 160;
  --sun-1: #fff6b8; --sun-2: #fde351; --sun-3: #e0bb1a; --sun-t: 150 115 0;
  --coal-1: #3a3a3a; --coal-2: #1c1c1c; --coal-3: #050505; --coal-t: 0 0 0;
  --clay-lit: inset 0 2px 0 rgb(255 255 255 / 0.75), inset 0 0 28px rgb(255 255 255 / 0.32);

  --slab-bg: #1c1c1c;
  --slab-ink: #f6f3eb;
  --footer-bg: #1c1c1c;
  --footer-ink: #f6f3eb;

  --shadow:
    var(--clay-lit),
    0 16px 28px -14px rgb(150 115 0 / 0.35);

  --ph-1: linear-gradient(165deg, var(--mint-1), var(--mint-2) 55%, var(--mint-3));
  --ph-2: linear-gradient(165deg, var(--plum-1), var(--plum-2) 55%, var(--plum-3));
  --ph-3: linear-gradient(165deg, var(--sun-1), var(--sun-2) 55%, var(--sun-3));
  --ph-4: linear-gradient(165deg, var(--coal-1), var(--coal-2) 55%, var(--coal-3));
  --ph-5: linear-gradient(165deg, var(--plum-1), var(--mint-2) 60%, var(--mint-3));
  --ph-6: linear-gradient(165deg, var(--sun-1), var(--plum-2) 60%, var(--plum-3));

  & ::selection { background: var(--sun-2); color: var(--ink); }
  & :focus-visible { outline-color: var(--ink); }
  & .pricing-slab :focus-visible, & .footer :focus-visible { outline-color: var(--sun-2); }

  /* the washes behind the page: cream centre, mint low left, plum high right */
  & body::before {
    background:
      radial-gradient(50% 40% at 50% 45%, rgb(255 255 255 / 0.7), transparent 70%),
      radial-gradient(45% 45% at 5% 95%, rgb(200 236 200 / 0.45), transparent 70%),
      radial-gradient(40% 40% at 95% 5%, rgb(220 208 238 / 0.5), transparent 70%);
  }

  & .eyebrow { font-weight: 500; }
  & .nav-inner { background: rgb(251 249 243 / 0.78); border-color: rgb(255 255 255 / 0.7); box-shadow: 0 10px 30px -18px rgb(150 115 0 / 0.4); }
  & .brand-mark { background: var(--sun-2); }
  & .nav-menu summary { background: var(--surface); }

  /* ---------- the squishing yellow pill ---------- */
  & .btn {
    border-radius: 30% / 200%; border-color: transparent; font-weight: 700; letter-spacing: -0.01em;
  }
  & .btn:hover { transform: none; border-radius: 10% / 200%; }
  & .btn:active { transform: none; border-radius: 20% / 200%; }
  & .btn-primary {
    background: var(--sun-2); color: var(--primary-ink);
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.65),
      inset 0 -3px 0 rgb(150 115 0 / 0.3),
      0 6px 12px -4px rgb(150 115 0 / 0.5),
      0 14px 24px -10px rgb(150 115 0 / 0.35);
  }
  & .btn-primary:hover {
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.7),
      inset 0 -4px 0 rgb(150 115 0 / 0.3),
      0 12px 18px -6px rgb(150 115 0 / 0.55),
      0 26px 36px -14px rgb(150 115 0 / 0.4);
  }
  & .btn-primary:active {
    box-shadow:
      inset 0 3px 6px rgb(150 115 0 / 0.45),
      0 2px 4px -2px rgb(150 115 0 / 0.5);
  }
  & .btn-ghost {
    border: 1.5px solid rgb(15 15 15 / 0.28); color: inherit;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
  }
  & .btn-ghost:hover { background: rgb(255 255 255 / 0.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 10px 16px -8px rgb(150 115 0 / 0.35); }
  & .btn-ghost:active { box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.14); }
  & .pricing-slab .btn-ghost, & .footer .btn-ghost { border-color: rgb(246 243 235 / 0.45); box-shadow: none; }
  & .pricing-slab .btn-ghost:hover, & .footer .btn-ghost:hover { background: rgb(246 243 235 / 0.12); box-shadow: none; }
  & .plan:not(.featured) .btn-primary, & .footer .btn-primary { background: var(--sun-2); color: var(--primary-ink); }
  & .plan:not(.featured) .btn-ghost { border-color: rgb(246 243 235 / 0.45); }
  & .pill { color: var(--ink-2); }
  & .callbar .btn { height: 46px; }

  /* ---------- clay ---------- */
  & .card, & .plan.featured {
    --c1: var(--mint-1); --c2: var(--mint-2); --c3: var(--mint-3); --ct: var(--mint-t);
    --muted: #333330; --ink-2: #292926; --accent: #4d3b00;
    border: 0; border-radius: 36px;
    background: linear-gradient(165deg, var(--c1), var(--c2) 55%, var(--c3));
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.8),
      inset 0 -4px 0 rgb(var(--ct) / 0.3),
      inset 0 0 30px rgb(255 255 255 / 0.35),
      0 16px 28px -12px rgb(var(--ct) / 0.5),
      0 44px 80px -30px rgb(var(--ct) / 0.4);
  }
  & .grid > .card:nth-child(3n + 2) { --c1: var(--plum-1); --c2: var(--plum-2); --c3: var(--plum-3); --ct: var(--plum-t); }
  & .grid > .card:nth-child(3n + 3) { --c1: var(--sun-1); --c2: var(--sun-2); --c3: var(--sun-3); --ct: var(--sun-t); }
  & .form { --c1: var(--plum-1); --c2: var(--plum-2); --c3: var(--plum-3); --ct: var(--plum-t); }
  & .plan.featured { border-radius: 24px; }
  & .service { padding: 28px; }
  & .review { padding: 30px; }
  & .stars { color: #4d3b00; }
  & .service-foot { border-top-color: rgb(15 15 15 / 0.16); }
  & .index { font-family: var(--font-mono); }
  & .price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

  & .field input, & .field textarea { background: rgb(255 255 255 / 0.6); border-color: rgb(15 15 15 / 0.22); box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.07); }
  & .hours th, & .hours td { border-bottom-color: rgb(15 15 15 / 0.16); }
  & .book-option, & .book-time, & .book-day { background: rgb(255 255 255 / 0.55); border-color: rgb(15 15 15 / 0.2); }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] { background: var(--sun-2); color: var(--primary-ink); border-color: var(--ink); }

  & .about-media, & .gallery-item, & .map { border-radius: 36px; }
  & .gallery-item { border-radius: 28px; }
  & .ph {
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.7),
      inset 0 -4px 6px rgb(0 0 0 / 0.1),
      inset 0 0 28px rgb(255 255 255 / 0.28);
  }
  & .ph-label { background: rgb(251 249 243 / 0.9); color: #2c2c29; }

  & .pricing-slab,
  & .footer-card {
    border-radius: 40px;
    background: linear-gradient(165deg, var(--coal-1), var(--coal-2) 45%, var(--coal-3));
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.22),
      inset 0 -4px 0 rgb(0 0 0 / 0.5),
      inset 0 0 40px rgb(255 255 255 / 0.05),
      0 24px 40px -18px rgb(0 0 0 / 0.5),
      0 60px 100px -40px rgb(60 50 0 / 0.5);
  }
  & .footer-card {
    background:
      radial-gradient(40% 60% at 10% 0%, rgb(253 227 81 / 0.2), transparent 70%),
      radial-gradient(40% 60% at 95% 20%, rgb(171 155 208 / 0.2), transparent 70%),
      linear-gradient(165deg, var(--coal-1), var(--coal-2) 45%, var(--coal-3));
  }
  & .plan:not(.featured) {
    border: 0; border-radius: 24px;
    background: linear-gradient(165deg, #4a4a47, #2b2b29 55%, #121212);
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.25),
      inset 0 -3px 0 rgb(0 0 0 / 0.5),
      inset 0 0 24px rgb(255 255 255 / 0.05),
      0 14px 24px -12px rgb(0 0 0 / 0.6);
  }
  & .plan-flag { background: var(--sun-2); color: var(--primary-ink); border-color: transparent; font-weight: 700; }
  & .plan-features li::before { color: var(--sun-2); }
  & .plan.featured .plan-features li::before { color: #4d3b00; }
  & .plan-price .mono { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; }
  & .footer-title { color: var(--sun-2); opacity: 1; }
  & .wordmark {
    background:
      linear-gradient(100deg, rgb(246 243 235 / 0.08) 30%, rgb(253 227 81 / 0.55) 50%, rgb(246 243 235 / 0.08) 70%) 0 0 / 300% 100%,
      linear-gradient(180deg, rgb(246 243 235 / 0.85), rgb(246 243 235 / 0.05));
    -webkit-background-clip: text; background-clip: text;
  }

  /* ---------- hero: a clay sphere, a smoked glass bar, clay float cards ---------- */
  & .wp-head h1 { letter-spacing: -0.05em; }
  & .wp-sphere {
    background: linear-gradient(165deg, var(--sun-1), var(--sun-2) 55%, var(--sun-3));
    box-shadow:
      inset 0 3px 0 rgb(255 255 255 / 0.8),
      inset 0 -10px 0 rgb(150 115 0 / 0.22),
      inset 0 0 70px rgb(255 255 255 / 0.35),
      0 30px 50px -22px rgb(150 115 0 / 0.55),
      0 70px 110px -40px rgb(150 115 0 / 0.4);
  }
  & .wp-sphere::after { box-shadow: inset 0 -14px 40px rgb(150 115 0 / 0.28), inset 0 6px 24px rgb(255 255 255 / 0.4); }
  & .wp-tiles .ph { border-radius: 24px; }
  & .wp-tiles .ph::after { background: rgb(255 255 255 / 0.5); box-shadow: 0 8px 14px -6px rgb(60 60 0 / 0.35); }
  & .wp-bar {
    background: rgb(15 15 15 / 0.72);
    border-color: rgb(255 255 255 / 0.22);
    box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.18);
    text-shadow: none;
  }
  & .wp-bar-text { text-shadow: none; }
  & .wp-bar-go { background: var(--sun-2); color: var(--ink); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.6), inset 0 -3px 0 rgb(150 115 0 / 0.3); }
  & .wp-float {
    padding: 5px; border-radius: 22px;
    background: linear-gradient(165deg, #ffffff, var(--bg-soft));
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.9), 0 22px 36px -16px rgb(150 115 0 / 0.5);
  }
  & .wp-float .ph { border-radius: 18px; }
  & .wp-float-label { color: #2c2c29; }

  /* ---------- borrowed layouts: tabs, carousel; and the fan ---------- */
  /* services "tabs": the pills are small clay tiles that press in; each panel is a clay slab in the
     next of the three tones */
  & .tab-panel {
    --c1: var(--mint-1); --c2: var(--mint-2); --c3: var(--mint-3); --ct: var(--mint-t);
    --muted: #333330; --ink-2: #292926; --accent: #4d3b00;
    border: 0; border-radius: 36px;
    background: linear-gradient(165deg, var(--c1), var(--c2) 55%, var(--c3));
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.8), inset 0 -4px 0 rgb(var(--ct) / 0.3), inset 0 0 30px rgb(255 255 255 / 0.35),
      0 16px 28px -12px rgb(var(--ct) / 0.5), 0 44px 80px -30px rgb(var(--ct) / 0.4);
  }
  & .tab-panel:nth-child(3n + 2) { --c1: var(--plum-1); --c2: var(--plum-2); --c3: var(--plum-3); --ct: var(--plum-t); }
  & .tab-panel:nth-child(3n) { --c1: var(--sun-1); --c2: var(--sun-2); --c3: var(--sun-3); --ct: var(--sun-t); }
  & .tab-name { font-weight: 800; letter-spacing: -0.045em; }
  & .tab-price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
  & .tab {
    border: 0; border-radius: 22px; color: var(--ink); font-weight: 600;
    background: linear-gradient(165deg, #ffffff, var(--bg-soft));
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.9), inset 0 -3px 0 rgb(150 115 0 / 0.14), 0 8px 14px -8px rgb(150 115 0 / 0.45);
  }
  & .tab:hover { background: #ffffff; }
  & .tab[aria-selected="true"], & .tab[aria-pressed="true"] {
    background: var(--sun-2); color: var(--primary-ink); font-weight: 700;
    box-shadow: inset 0 3px 6px rgb(150 115 0 / 0.4), 0 2px 4px -2px rgb(150 115 0 / 0.5);
  }
  /* inside the split column the tabs sit above their panel rather than beside it */
  & .split .tabs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  & .split .tabs-live .tab-list { flex-direction: row; flex-wrap: wrap; position: static; }
  & .split .tab { width: auto; }

  /* reviews "carousel": clay slides in turn, yellow clay buttons, dots pressed into the paper */
  & .slide {
    --c1: var(--plum-1); --c2: var(--plum-2); --c3: var(--plum-3); --ct: var(--plum-t);
    --muted: #333330; --ink-2: #292926;
    border: 0; border-radius: 36px;
    background: linear-gradient(165deg, var(--c1), var(--c2) 55%, var(--c3));
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / 0.8), inset 0 -4px 0 rgb(var(--ct) / 0.3), inset 0 0 30px rgb(255 255 255 / 0.35),
      0 16px 28px -12px rgb(var(--ct) / 0.5), 0 44px 80px -30px rgb(var(--ct) / 0.4);
  }
  & .slide:nth-child(3n + 2) { --c1: var(--sun-1); --c2: var(--sun-2); --c3: var(--sun-3); --ct: var(--sun-t); }
  & .slide:nth-child(3n) { --c1: var(--mint-1); --c2: var(--mint-2); --c3: var(--mint-3); --ct: var(--mint-t); }
  & .slide blockquote p { font-weight: 800; letter-spacing: -0.04em; }
  & .carousel-btn {
    border: 0; background: var(--sun-2); color: var(--primary-ink);
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.65), inset 0 -3px 0 rgb(150 115 0 / 0.3), 0 6px 12px -4px rgb(150 115 0 / 0.5);
  }
  & .carousel-btn:active:not(:disabled) { box-shadow: inset 0 3px 6px rgb(150 115 0 / 0.45); }
  & .carousel-dot::after { background: var(--line); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.14); }
  & .carousel-dot[aria-current="true"]::after { background: var(--sun-2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 4px rgb(150 115 0 / 0.4); }

  /* gallery "fan": each picture a clay card with a pale rim and its own tint of shadow */
  & .fan .gallery-item {
    border: 7px solid var(--surface); border-radius: 30px;
    box-shadow: 0 2px 0 rgb(255 255 255 / 0.9) inset, 0 14px 26px -10px rgb(150 115 0 / 0.5), 0 34px 50px -26px rgb(150 115 0 / 0.4);
  }
  & .fan > li:hover .gallery-item { box-shadow: 0 2px 0 rgb(255 255 255 / 0.9) inset, 0 26px 36px -12px rgb(150 115 0 / 0.55), 0 50px 70px -30px rgb(150 115 0 / 0.45); }

  /* ---------- motion: the squish and lift ease only when motion is allowed ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: border-radius 0.28s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease; }
      & .btn:active { transform: none; }
      & .wp-bar-go { transition: transform 0.25s ease; }
    }
  }
}