/* ============================================================
   NAILZ BY ESMEE — nailzx.by.esmee
   DISCO / CHROME, colours and type off the mockup she sent
   ------------------------------------------------------------
   Her elements scatter across the whole page, but the density is
   the thing that kept going wrong: a dozen small pieces per screen
   reads as clutter, four big ones reads as a theme. This runs four
   to a 1000px tile, so a phone shows one or two at a time.

   The floral theme is at _backups/theme.css.nailzxbyesmee.floral.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&family=Josefin+Sans:wght@300;400;500;600&family=Allura&display=swap');

:root{
  /* ---- 1. FONTS --------------------------------------------
     Read off the mockup:
       "MADE TO SHINE"   high-contrast Didone  -> Playfair Display
       "Luxury Nails"    light airy calligraphy -> Allura
       body and nav      geometric sans        -> Jost
       buttons           tracked uppercase sans -> Josefin Sans
     Great Vibes is gone: the mockup's script is much lighter on
     the page than that face is.
  --------------------------------------------------------- */
  --font-script:  'Allura', cursive;
  --font-display: 'Playfair Display', serif;
  --font-body:    'Jost', sans-serif;

  /* ---- 2. COLOURS ------------------------------------------
     Sampled from the mockup rather than guessed. The headings
     there are BROWN, not pink — that is the thing that makes it
     read expensive instead of sugary, and it is the main change
     from every earlier version of this page.
        paper      #f5e4e3 -> #fbf3f1
        brown ink  #56372e
        pink       #ea4a6f
  --------------------------------------------------------- */
  --cream:     #fde8e5;   /* her paper — sampled to the byte off the
                             ground of her new lockup, so the wordmark has
                             no visible edge or box behind it */
  --blush:     #fbe4e3;   /* calendar day cells, hover fills */
  --blush-2:   #f2d6d3;   /* hairlines, card borders */
  --pink:      #f3bcc4;   /* dotted leaders, light borders */
  --pink-deep: #ee6a86;   /* button rims, softer accent */
  --ribbon:    #ea4a6f;   /* selected day/slot, admin buttons */
  --pink-dark: #d63a5e;   /* prices, category headings */
  --plum:      #56372e;   /* SECTION HEADINGS — the mockup's brown */

  --ink:       #4d3027;   /* body copy, warm brown */
  --ink-soft:  #9b7f75;   /* captions, taglines, hints */
  --white:     #fdf8f7;   /* cards, a shade lighter than the paper */

  /* The page itself is a soft vertical wash, deepest at the top
     behind the wordmark, exactly like the mockup's hero. */
  --page-bg: linear-gradient(180deg, #fde8e5 0%, #fdecea 30%, #fdf3f1 70%, #fefaf9 100%);

  --announce-bg: linear-gradient(90deg, #f7e6e4, #f3bcc4);

  /* Availability dots. Pink is open, warm stone is gone. */
  --pip-open:  #ea4a6f;
  --pip-taken: #ddc7c2;

  --glow:      150,105,95;   /* warm shadow to match the brown */
  --glow-deep: 60,38,30;

  /* ---- 3. BACKGROUND ARTWORK -------------------------------
     Her elements scattered across the whole page — but FOUR to a
     tile, big, with real space between them. The earlier versions
     put a dozen small pieces in the same area and it read as
     clutter; this is the same idea at a quarter of the density.

     The tile is 1000px square and renders at 720 / 460, so a phone
     screen shows one or two objects at a time, never a pattern.
  --------------------------------------------------------- */
  --bg-tile:        url(bg-tile.png);
  --bg-size:        720px;
  --bg-size-mobile: 460px;
  --bg-opacity:     .48;
  --bg-opacity-admin: .18;

  --motif: url(motif.png);   /* her ball-and-stars: bullets, dividers, badge */
}

/* ============================================================
   SHAPE LANGUAGE
   ------------------------------------------------------------
   The mockup is soft and rounded — pill buttons, big radii on the
   panels, gentle warm shadows. Same family as before, warmer
   light.
   ============================================================ */
:root{
  --r-btn:    999px;
  --r-card:   26px;
  --r-tile:   16px;
  --r-input:  14px;
  --r-msg:    22px;
  --r-img:    18px;
  --r-nav:    50%;
  --r-deal:   26px;

  --bw:       1.5px;
  --bw-card:  1px;

  --sh-card:  0 12px 34px rgba(var(--glow),.16);
  --sh-btn:   0 6px 18px rgba(var(--glow),.22);
  --sh-btn-h: 0 10px 26px rgba(var(--glow),.32);
  --sh-soft:  0 4px 14px rgba(var(--glow),.16);
  --sh-lift:  0 8px 22px rgba(var(--glow),.26);
  --sh-deal:  0 12px 34px rgba(var(--glow),.18);

  --motif-rot:      0deg;
  --motif-bullet-w: 22px;
  --motif-bullet-h: 22px;
  --motif-badge-w:  36px;
  --motif-badge-h:  36px;

  --font-btn:      'Josefin Sans', sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .18em;

  --pin-size: 15px;
  --logo-max: 430px;

  --ty-card:  #fdf8f7;
  --ty-line:  #eed9d5;
  --ty-icon:  #d63a5e;
  --ty-heart: #ea4a6f;
}

/* Core colours #announce from --on-accent, which is white and is
   also the selected day, the selected slot and her solid buttons.
   Changing that variable would darken all of them, so the flip is
   made here on the bar alone. */
#announce{
  color: var(--plum);
  border-bottom: 1px solid var(--blush-2);
}

/* ============================================================
   THE SERVICES / PRESS ON NAILS SWITCH
   ------------------------------------------------------------
   --r-btn is 999px, and a pill-shaped switch reads as one long
   button rather than two things you choose between. The inner
   radius is the outer minus the track's own .25rem padding, so
   the selected tab stays concentric with the track. Core builds
   the track as calc(--r-btn + 4px) — both have to be overridden
   together or the track stays a pill around square tabs.
   ============================================================ */
.pv-seg{ position:relative; overflow:visible; border-radius:12px }
.pv-seg button{ border-radius:8px }

/* Her ball perched on the corner of the switch, the same way core
   perches the motif on .cta.bowed. A pseudo-element because the
   switch is core's markup and this is hers alone; overflow:visible
   above is what lets it hang off instead of being clipped. */
.pv-seg::after{
  content:'';
  position:absolute;
  top:  calc(var(--motif-badge-h, 36px) * -0.42);
  right:calc(var(--motif-badge-w, 36px) * -0.42);
  width:  var(--motif-badge-w, 36px);
  height: var(--motif-badge-h, 36px);
  background: var(--motif) no-repeat center / contain;
  pointer-events: none;
}

/* The one on the switch sits just under this heading, so the
   divider was a second ball in the same glance. */
.bow[data-divider="services"]{ display:none }

/* ============================================================
   PRESS ON SETS — TWO ACROSS ON A PHONE
   ------------------------------------------------------------
   Core lays this out as auto-fill minmax(210px,1fr), and a 390px
   phone has about 340px of usable width — so 210px only ever fits
   ONE column and her sets came down the page in a single stack.
   The gap drops to .7rem so the width goes into the photos rather
   than the space between them: about 163px a card, 163x204 image.

   At that width the price and REQUEST will not sit side by side,
   so on a phone the button drops under the price at full width.
   ============================================================ */
.pv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem }

@media(max-width:600px){
  .pv-body{ padding:.7rem .7rem .8rem }
  .pv-nm{ font-size:.98rem; line-height:1.25 }
  .pv-meta{ font-size:.62rem; letter-spacing:.09em }
  .pv-row{ flex-direction:column; align-items:stretch; gap:.45rem; margin-top:.55rem }
  .pv-pr{ font-size:1.12rem }
  .pv-buy{ text-align:center; padding:.5rem .4rem; font-size:.64rem; letter-spacing:.09em }
}

@media(min-width:700px){
  .pv-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem }
}


/* ============================================================
   A PANEL BEHIND THE PRICE LIST
   ------------------------------------------------------------
   Her policies already sit in a card and her calendar sits in a
   card, so they read cleanly whatever is behind them. The price
   list did not — it sat straight on the paper, and once the
   background elements got big enough to be worth having, a disco
   ball landed across "3 Week Fill" and a heart across "Acrylic
   Full Set".

   Her own mockup answers this: the services there sit in a soft
   cream panel, not on the open page. This is that panel. It is
   translucent rather than solid so the elements still show through
   behind the list instead of being cut off by a hard rectangle.

   The store pane gets the same treatment so the two tabs do not
   change the shape of the section when you switch between them.
   ============================================================ */
#servicesPane,
#presetPane{
  background: rgba(253, 248, 247, .84);
  border: var(--bw-card,1px) solid var(--blush-2);
  border-radius: var(--r-card, 26px);
  box-shadow: var(--sh-card);
  padding: 1.5rem 1.15rem .9rem;
}
@media(max-width:600px){
  #servicesPane,
  #presetPane{ padding: 1.2rem .85rem .7rem }
}

/* ============================================================
   CHROME STARS ON THE BOOKING POLICIES
   ------------------------------------------------------------
   Core uses --motif for every bullet, so her policy list was a
   column of disco balls — the same mark that is already on the
   buttons, the dividers and the tab switch. The chrome star gives
   that list its own bullet without introducing anything that is
   not already hers.

   Scoped to #policies so it is only the policy list: the deal
   cards, if she ever adds one, keep the ball.
   ============================================================ */
#policies li::before{
  background-image: url(el-star-chrome.png);
}

/* ============================================================
   CHROME BUTTONS
   ------------------------------------------------------------
   Her hearts and stars are liquid chrome, and the buttons were
   flat white — the one place on the page where the theme stopped.

   Chrome is not a colour, it is a REFLECTION: a bright top, a
   dark band where the horizon falls, then an abrupt flip back to
   light underneath it. That hard cut at 49-52% is what makes this
   read as metal rather than as a gradient. The stops are tinted
   toward her pink rather than neutral grey, so it belongs to her
   palette and not to a car bumper.

   Type stays --plum brown and picks up a white lift, the way
   engraved metal does. Brown clears 6:1 even on the darkest band,
   which is what let the chrome go as deep as it does.
   ============================================================ */
.cta{
  background: linear-gradient(180deg,
    #ffffff 0%,
    #fbeaee 14%,
    #e7cbd1 36%,
    #c9a8b0 49.5%,    /* the horizon — the hard cut is the whole trick */
    #ffffff 50.5%,
    #ffe0e8 66%,
    #f0c3ce 100%);
  color: var(--plum);
  border-color: var(--pink);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.cta:hover{
  background: linear-gradient(180deg,
    #ffffff 0%,
    #fef7f8 16%,
    #f6e3e7 38%,
    #e6cdd2 49%,
    #ffe6ec 52%,
    #fffafb 74%,
    #f8d9e1 100%);
  color: var(--plum);
  border-color: var(--pink-deep);
}

/* Book Now and Request Appointment carry the perched ball, and they
   are the two the whole page is pushing toward — so they get the
   pink-forward version and stay the loudest thing on screen. */
.cta.bowed{
  background: linear-gradient(180deg,
    #fff2f6 0%,
    #f9b6cb 22%,
    #e07f9d 49.5%,
    #ffe9f0 50.5%,
    #fbcfdd 72%,
    #ef9db8 100%);
  border-color: var(--pink-deep);
  color: var(--plum);
}
.cta.bowed:hover{
  background: linear-gradient(180deg,
    #fff2f6 0%,
    #fdd3df 24%,
    #f5b0c4 47%,
    #ffe2ec 52%,
    #fff3f7 76%,
    #f8c2d3 100%);
  border-color: var(--pink-dark);
}


/* ============================================================
   THE LOCKUP FADES INTO THE SCATTER
   ------------------------------------------------------------
   Her logo is keyed transparent, and its own ground was #fde8e5 —
   the same value the page paper is set to. So rather than the
   header painting a solid slab over the wallpaper (which read as
   "the background stopped"), it paints a soft ELLIPSE of that
   exact colour, centred where the lockup sits.

   Full strength right behind the letters, gone well before the
   header's edges. The mirror balls and stars stay visible around
   and between the elements of the lockup, and the pink chrome
   type never has to compete with a disco ball sitting under a
   letterform. It reads as the logo emerging from the pattern
   rather than being pasted on top of it.
   ============================================================ */
header{
  background: radial-gradient(ellipse 74% 54% at 50% 40%,
    var(--cream) 0%,
    rgba(253,232,229,.92) 38%,
    rgba(253,232,229,.55) 62%,
    rgba(253,232,229,0) 82%);
}