/* ============================================================
   THEME — Blinged by Lexaaa
   ------------------------------------------------------------
   Sampled from her logo. Her whole identity is one saturated
   baby pink, rhinestone pink glitter, and a gold accent — so
   the page is built on her pink rather than on white, which is
   what makes the wordmark float instead of sitting in a box.
   ============================================================ */

/* Her logo script is a bold flowing signature; "Nails & Toes" is a
   wide-tracked classic serif; her story text is a plain grotesque.
   The logo is the designed part, so it drives the pairing. */
@import url('https://fonts.googleapis.com/css2?family=Style+Script&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  --font-script:  'Style Script', cursive;             /* deal titles only — her NAME is the logo image */
  --font-display: 'Cormorant Garamond', serif;        /* headings, prices, buttons */
  --font-body:    'Montserrat', sans-serif;           /* everything else */

  /* ---- COLOURS — sampled from her logo -----------------------
     --cream is her logo's own background, to the exact byte, so
     the wordmark image has no visible edge against the page.
     Do not change it without re-exporting the logo to match.
  ------------------------------------------------------------ */
  --cream:     #f7bbd4;   /* page background — HER pink, sampled */
  --blush:     #f6d2e2;   /* calendar day cells, hover fills */
  --blush-2:   #e3b0c6;   /* hairlines, borders */
  --pink:      #df91b0;   /* light rims — her most common lettering pink */
  --pink-deep: #973a55;   /* announcement bar + button rims */
  --ribbon:    #b45477;   /* selected day/slot — sampled from her lettering, holds white at 4.7:1 */
  --pink-dark: #973a55;   /* prices, category headings */
  --plum:      #6d2038;   /* section headings */

  --ink:       #4a2231;   /* body text */
  --ink-soft:  #8f4a63;   /* captions, taglines, hints */
  --white:     #fff4f8;   /* cards — lifts off her pink */

  /* free = a green that survives on a saturated pink ground;
     taken = her own deep rose, so a full day still reads as hers */
  --pip-open:  #b45477;   /* FREE */
  --pip-taken: #e3b9c9;   /* GONE — same family, clearly weaker */

  --gold:      #c9a961;   /* her "BY" — kept for accents only, never for structure */
  --glow:      109,32,56;
  --glow-deep: 109,32,56;

  /* ---- BACKGROUND ARTWORK ---------------------------------- */
  --bg-tile:        url(bg-tile.png);
  --bg-size:        520px;
  --bg-size-mobile: 360px;
  --bg-opacity:     .75;
  --bg-opacity-admin: .4;

  --motif: url(motif.png);   /* her rhinestone heart */
}

/* ============================================================
   SHAPE LANGUAGE
   ------------------------------------------------------------
   Her brand is glossy and rounded — a circular logo, hearts,
   bows, bezel-set stones. So this leans further into soft than
   the default: bigger radii, a gold hairline, and deeper glow.
   ============================================================ */
:root{
  --r-btn:    2px;   /* sharp, not pill — she wants luxury, not bubbly */
  --r-card:   8px;   /* plain cards */
  --r-tile:   3px;   /* calendar days, time slots */
  --r-input:  2px;   /* form fields */
  --r-msg:    4px;   /* confirmation panel */
  --r-img:    4px;   /* uploaded flyers */
  --r-nav:    3px;   /* month arrows */
  --r-deal:   11px;   /* matches the framed cards */

  --bw:       2px;          /* a gold rim you can actually see */
  --bw-card:  1.5px;

  --sh-card:  0 12px 38px rgba(var(--glow),.16);
  --sh-btn:   0 6px 20px rgba(var(--glow),.24);
  --sh-btn-h: 0 10px 28px rgba(var(--glow),.34);
  --sh-soft:  0 4px 16px rgba(var(--glow),.18);
  --sh-lift:  0 8px 24px rgba(var(--glow),.30);
  --sh-deal:  0 12px 38px rgba(var(--glow),.20);

  --motif-rot:      -10deg;
  --motif-bullet-w: 22px;
  --motif-bullet-h: 19px;
  --motif-badge-w:  38px;
  --motif-badge-h:  33px;

  --logo-max: 460px;
  --pin-size: 11px;   /* her pin is taller than it is wide (96x129), so
                         width 11 gives the same ~15px visual height the
                         original square marker had */
                         room than a one-weight line drawing to read */

  /* Buttons in Montserrat, uppercase, opened up — so BOOK NOW reads as a
     crisp modern control instead of competing with the Cormorant headings
     above it. The heading face stays Cormorant. */
  --font-btn:      'Montserrat', sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .14em;
}


/* the heart already sits under the page title and beside every policy —
   under the price list too it was one heart too many */
/* .bow is also class-level, and core's inline <style> comes after this
   file, so a bare attribute selector ties on specificity and loses on
   order. Qualifying it with the class wins outright — no !important. */
.bow[data-divider="services"],
.bow[data-divider="deals"]{display:none}

/* ============================================================
   Her rhinestone strip, bent into a frame around the calendar.
   ------------------------------------------------------------
   The source she supplied is a straight bar, and a straight bar
   cannot turn a corner — so frame.png was built by walking a
   rounded-rectangle path and laying rotated slivers of her bar
   along it, which keeps the stones flowing round the bends
   instead of mitring and breaking.

   border-image scales that 99px slice down to the border-width
   below, so the stones stay proportional at any card height.
   background-clip keeps the card's fill inside the frame; without
   it the square fill pokes out past the rounded corners.
   ============================================================ */
#booking .card,
#deals-sec .deal-card,
.ig-box{
  /* The frame IS the card's edge, so two numbers have to agree or the
     corners look wrong: the fill reaches the border box (background-clip
     stays default), and border-radius must equal the frame's OWN outer
     curve. In frame.png that curve is 46px inside a 77px slice, so the
     rendered radius is always 0.6 x the border width. Change one, change
     the other. */
  border: 18px solid transparent;
  border-image: url(frame.png) 77 round;
  border-radius: 11px;          /* 0.6 x 18 */
  padding: .9rem .7rem;
}
#deals-sec .deal-card{
  /* core fades this card white-to-blush; against the frame the white top
     read as a second inner edge, so it starts from the card colour instead */
  background: linear-gradient(180deg, var(--white) 0%, var(--blush) 100%);
  padding: 1.6rem 1.1rem 1.3rem;
}


/* the frame eats 36px of width, so the long handle needs the room back */
.ig-box{
  background: linear-gradient(150deg, var(--blush-2) 0%, var(--white) 65%);
  padding: 1.6rem .9rem 1.4rem;
}

/* @BLINGEDBYLEXAAA is a long label once it is uppercase and tracked out.
   Core stops it overflowing; this keeps it comfortable rather than merely
   contained. */
.ig-box .cta{letter-spacing:.07em;font-size:1.02rem}