/* ===================================
   RokMyStyle Shared Stylesheet
   Brand: Deep Brown · Blush Pink · Leopard Tan
   =================================== */

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

/* === Design Tokens === */
:root {
  --brown-dark:   #5C3A2E;
  --brown-mid:    #8B5A4A;
  --brown-light:  #B8865A;
  --blush:        #F2D7D0;
  --blush-mid:    #E8C4BA;
  --blush-light:  #FAF0EC;
  --blush-pale:   #FDFAF8;
  --tan:          #C8A882;
  --tan-dark:     #A07850;
  --cream:        #FDFAF8;
  --white:        #FFFFFF;
  --text-dark:    #2C1810;
  --text-body:    #4A3429;
  --text-muted:   #8B7068;
  --border:       #E8D5CC;

  --shadow-sm:  0 2px 8px rgba(92,58,46,0.08);
  --shadow-md:  0 4px 20px rgba(92,58,46,0.13);
  --shadow-lg:  0 8px 40px rgba(92,58,46,0.18);

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 1200px;
  --section-v:     5rem;
  --radius:        0.5rem;
  --radius-lg:     1rem;
  --transition:    0.28s ease;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--cream); color: var(--text-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font-body); }

/* === Typography === */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p { color: var(--text-body); line-height: 1.8; }

/* === Layout === */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: var(--section-v) 0; }
.section--dark   { background-color: var(--brown-dark); }
.section--light  { background-color: var(--blush-light); }
.section--blush  { background-color: var(--blush); }
.section--white  { background-color: var(--white); }

.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* === HEADER ===
   Vanessa's design (her picture, 5 Oct 2026): white, her menu on the left, her
   logo large in the middle and hanging a little over the picture below it, Shop
   and Book a Session on the right in her pink. The same on every page: it is
   written into each one from tools/site-header.html.
   It scrolls away with the page instead of following it down. A bar this tall,
   with the logo hanging out of it, would sit over whatever is underneath. */
:root {
  --pink: #F7538C;
  --pink-deep: #E33F79;
  --pink-wash: #FFF1F6;
  --ink-soft: #695750;
  --header-h: 190px;   /* the white bar */
  --logo-h: 200px;     /* her logo, taller than the bar, */
  --logo-top: 22px;    /* so from here it hangs 32px over the page below */
}
.site-header { position: relative; z-index: 100; background: #FFFFFF; }
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2rem;
  max-width: 1360px; height: var(--header-h); margin: 0 auto; padding: 0 2.5rem;
}
/* The footer's text wordmark. */
.wordmark {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.8rem; font-weight: 500;
  color: var(--brown-dark); letter-spacing: 0.02em; flex-shrink: 0;
  display: flex; align-items: center;
}
.wordmark em { font-style: normal; font-weight: 400; }
.header-logo-link {
  grid-column: 2; grid-row: 1; align-self: start;
  margin-top: var(--logo-top); position: relative; z-index: 2;
}
/* No background of its own. A soft white edge keeps the part hanging over a
   dark banner readable; over white or her cream it does not show. */
.header-logo {
  height: var(--logo-h); width: auto; display: block;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 0 5px rgba(255,255,255,0.75));
}

.site-nav { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 3.75rem; }
.site-nav a, .header-text-link {
  color: #3A2119; font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap;
  padding: 0.5rem 0; border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.site-nav a:hover, .header-text-link:hover { color: var(--pink-deep); }
.site-nav a.active { border-bottom-color: var(--pink); }
/* Shop's categories, Contact and Text Me live in the phone menu. On a computer
   Text Me sits beside the buttons instead, so her menu and centred logo keep
   their spacing. */
.nav-phone-only { display: none; }
.header-text-link { margin-right: 0.75rem; }
/* Her account, as a small figure: a word here pushed her centred logo off centre. */
.header-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 32px; margin-left: -0.75rem; color: #3A2119;
  transition: color var(--transition);
}
.header-account:hover { color: var(--pink-deep); }

.header-cta { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.pink-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 1.6rem; border: 2px solid var(--pink); border-radius: 3px;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; line-height: 1.4;
  /* text-indent balances the space letter-spacing leaves after the last letter. */
  letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pink-btn--outline { background: #FFFFFF; color: var(--ink-soft); }
.pink-btn--outline:hover { background: var(--pink-wash); color: #3A2119; }
.pink-btn--fill { background: var(--pink); color: #FFFFFF; }
.pink-btn--fill:hover { background: var(--pink-deep); border-color: var(--pink-deep); }

/* Shop and its categories. Hovering (or tabbing to) Shop opens the list on a
   computer; on a touch screen wide enough for it, main.js makes the first tap
   open it. Phones list the categories in the menu instead. */
.nav-shop { position: relative; display: flex; }
.nav-shop-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 50%; z-index: 120;
  min-width: 230px; padding: 0.5rem;
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Keeps the list open while the pointer crosses the gap from Shop to it. */
.nav-shop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.nav-shop:focus-within .nav-shop-menu,
.nav-shop.open .nav-shop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* Hover only where there is a mouse: on an iPhone a hover style turns the
   first tap into a hover and Shop would need tapping twice. */
@media (hover: hover) {
  .nav-shop:hover .nav-shop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}
.nav-shop-menu a {
  display: block; color: var(--brown-dark); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 0.6rem 0.9rem; border-radius: var(--radius); white-space: nowrap;
}
.nav-shop-menu a:first-child { font-weight: 700; }
.nav-shop-menu a:hover { background: var(--pink-wash); color: #3A2119; }

.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; flex-shrink: 0;
  cursor: pointer; background: none; border: none; padding: 10px;
}
.hamburger span {
  display: block; height: 2px; background: var(--brown-dark);
  border-radius: 2px; transition: transform var(--transition), opacity var(--transition);
}

/* === LIVE NOW RIBBON ===
   The way in to live.html, on every page. It only exists while a broadcast is
   actually on air: main.js asks once on load and unhides it. Hidden, it is
   display:none, so an ordinary day looks exactly as it did before.
   It sits above the header row instead of inside it because that row is already
   down to its last few pixels on a small phone, and a full width ribbon cannot
   push anything sideways at any width. */
.live-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; min-height: 38px;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; line-height: 1.4;
  transition: background var(--transition);
}
.live-bar[hidden] { display: none; }
.live-bar:hover { background: var(--text-dark); }
.live-bar-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--blush); animation: liveBarPulse 1.4s infinite;
}
@keyframes liveBarPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }
.live-bar-sub {
  font-weight: 500; letter-spacing: 0.03em; text-transform: none;
  color: rgba(242,215,208,0.78);
}
@media (prefers-reduced-motion: reduce) {
  .live-bar-dot { animation: none; }
}
/* On a phone the ribbon drops to the short form so it stays one line, and grows
   to a 44px target since the whole bar is the link. */
@media (max-width: 720px) {
  .live-bar { min-height: 44px; letter-spacing: 0.06em; }
  .live-bar-sub { display: none; }
}

/* === MODAL === */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(44,24,16,0.72); z-index: 999;
  align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg);
  max-width: 620px; width: 100%; margin: auto;
  padding: 2.5rem 2.5rem 2rem; position: relative;
  box-shadow: 0 16px 64px rgba(0,0,0,0.35);
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.75rem; line-height: 1;
  cursor: pointer; color: var(--text-muted); padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--text-dark); background: var(--blush-light); }
.modal-service-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .modal-box { padding: 2rem 1.25rem 1.5rem; }
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* === FOOTER === */
.site-footer { background: var(--brown-dark); color: var(--blush-light); padding: 4rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }

/* The footer is brown, so its wordmark is blush; brown on brown it was invisible. */
.footer-brand .wordmark { display: block; margin-bottom: 0.75rem; color: var(--blush); }
.footer-tagline { color: rgba(242,215,208,0.65); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.7; }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 0.75rem;
  border-radius: 2rem; border: 1px solid rgba(242,215,208,0.28);
  color: var(--blush); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
}
.social-link:hover { background: rgba(242,215,208,0.14); border-color: var(--blush); }

.footer-col h4 { color: var(--blush); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { color: rgba(242,215,208,0.65); font-size: 0.875rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--blush); }
.footer-contact-item { color: rgba(242,215,208,0.65); font-size: 0.875rem; margin-bottom: 0.6rem; }
.footer-contact-item a { color: rgba(242,215,208,0.65); transition: color var(--transition); }
.footer-contact-item a:hover { color: var(--blush); }
.footer-bottom {
  border-top: 1px solid rgba(242,215,208,0.14); padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.footer-copyright { color: rgba(242,215,208,0.45); font-size: 0.78rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.footer-legal a { color: rgba(242,215,208,0.6); font-size: 0.78rem; transition: color var(--transition); }
.footer-legal a:hover { color: var(--blush); }
@media (max-width: 768px) {
  /* Tall enough to tap comfortably with a thumb. */
  .footer-legal a { display: inline-block; padding: 0.75rem 0; }
}

/* === POLICY PAGES === */
.policy-content { max-width: 760px; margin: 0 auto; color: var(--text-body); }
.policy-content h2 { font-size: clamp(1.25rem, 3vw, 1.55rem); margin: 2.5rem 0 0.9rem; }
.policy-content p, .policy-content li { font-size: 1rem; line-height: 1.8; }
.policy-content p { margin-bottom: 1rem; }
.policy-content ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.policy-content li { margin-bottom: 0.4rem; }
.policy-content a { color: var(--brown-mid); font-weight: 600; text-decoration: underline; }
.policy-updated { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.policy-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.875rem 2rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--transition); white-space: nowrap; text-decoration: none;
}
.btn--primary { background: var(--brown-dark); color: var(--blush); border-color: var(--brown-dark); }
.btn--primary:hover { background: var(--brown-mid); border-color: var(--brown-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--brown-dark); border-color: var(--brown-dark); }
.btn--outline:hover { background: var(--brown-dark); color: var(--blush); transform: translateY(-2px); }
.btn--light { background: var(--blush); color: var(--brown-dark); border-color: var(--blush); }
.btn--light:hover { background: var(--blush-mid); border-color: var(--blush-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-light { background: transparent; color: var(--blush); border-color: var(--blush); }
.btn--outline-light:hover { background: var(--blush); color: var(--brown-dark); }
.btn--sm { padding: 0.6rem 1.25rem; font-size: 0.75rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* === HERO (Home) === */
.hero {
  background-color: var(--brown-dark);
  padding: 7rem 0 5.5rem; position: relative; overflow: hidden;
  min-height: 70vh;
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,168,130,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,215,208,0.2), transparent);
}
.hero-content { position: relative; z-index: 1; max-width: 680px; }
.hero-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tan); margin-bottom: 1.25rem;
}
.hero h1 { color: var(--blush); margin-bottom: 1.5rem; font-style: italic; font-weight: 600; }
.hero p { color: rgba(242,215,208,0.78); font-size: 1.1rem; margin-bottom: 2.5rem; max-width: 520px; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* === PAGE HERO (inner pages) === */
.page-hero {
  background: var(--brown-dark); color: var(--blush);
  padding: 4.5rem 0 3.5rem; text-align: center; position: relative; overflow: hidden;
  min-height: 40vh;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,168,130,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; }
.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tan); margin-bottom: 0.75rem;
}
.page-hero h1 { color: var(--blush); font-style: italic; margin-bottom: 1rem; }
.page-hero .subtitle { color: rgba(242,215,208,0.72); max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* === SECTION HEADERS === */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .eyebrow { color: var(--tan-dark); }
.section-header h2 { font-style: italic; margin-bottom: 1rem; }
.section-header p { max-width: 540px; margin: 0 auto; color: var(--text-muted); }
.section--dark .section-header .eyebrow { color: var(--tan); }
.section--dark .section-header h2 { color: var(--blush); }
.section--dark .section-header p { color: rgba(242,215,208,0.68); }

/* === SERVICE CARDS === */
.service-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-card-icon {
  background: var(--blush-light); padding: 2.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.75rem;
}
.service-card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.service-card-body h3 { font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--brown-dark); }
.service-card-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.75; flex: 1; }
.service-card-price {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600;
  color: var(--brown-dark); border-top: 1px solid var(--border);
  padding-top: 1rem; margin-top: auto;
}

/* === TESTIMONIALS === */
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-stars { color: var(--tan-dark); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
.testimonial-quote {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.05rem; color: var(--text-body); margin-bottom: 1.5rem;
  line-height: 1.75; padding-top: 1rem; position: relative;
}
.testimonial-quote::before {
  content: '\201C'; font-size: 5rem; color: var(--blush-mid);
  position: absolute; top: -1.5rem; left: -0.5rem;
  font-family: var(--font-heading); line-height: 1; pointer-events: none;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush-mid), var(--tan));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;
  color: var(--brown-dark); flex-shrink: 0;
}
.testimonial-name { font-weight: 600; color: var(--text-dark); font-size: 0.9rem; }
.testimonial-location { font-size: 0.78rem; color: var(--text-muted); }

/* === LEOPARD DIVIDER === */
.leopard-divider {
  height: 34px;
  background-color: #C8A87A;
  background-image:
    /* Rosette 1 at (18, 17): main */
    radial-gradient(ellipse 13px 9px at 18px 17px, rgba(42,18,5,0.62) 44%, transparent 52%),
    radial-gradient(ellipse 7px 4px at 7px  8px,  rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 29px 8px,  rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 7px  26px, rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 29px 26px, rgba(61,26,8,0.45) 54%, transparent 62%),
    /* Rosette 2 at (55, 10): smaller, high */
    radial-gradient(ellipse 10px 6px at 55px 10px, rgba(42,18,5,0.52) 44%, transparent 52%),
    radial-gradient(ellipse 5px 3px at 46px 4px,  rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 64px 4px,  rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 46px 16px, rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 64px 16px, rgba(61,26,8,0.38) 54%, transparent 62%),
    /* Rosette 3 at (83, 24): low */
    radial-gradient(ellipse 12px 8px at 83px 24px, rgba(42,18,5,0.58) 44%, transparent 52%),
    radial-gradient(ellipse 6px 4px at 73px 16px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 94px 16px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 73px 32px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 94px 32px, rgba(61,26,8,0.42) 54%, transparent 62%);
  background-size: 100px 34px;
}

/* === CTA SECTION ===
   Light, in the colours of her home page picture (5 Oct): the hero's warm
   cream, her soft brown words and her pink buttons. It used to be dark brown,
   and with the brown footer under it the bottom of the page was one long block
   of brown (John, 5 Oct). */
.cta-section {
  background: linear-gradient(120deg, #F7F2EC 0%, #F1E6DA 50%, #E9DACA 100%);
  padding: var(--section-v) 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.55) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(247,83,140,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section-content { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.cta-section .eyebrow { color: var(--ink-soft); }
.cta-section h2 { color: var(--ink-soft); font-style: italic; font-weight: 600; margin-bottom: 1rem; }
.cta-section p { color: var(--ink-soft); margin-bottom: 2.5rem; font-size: 1.05rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-buttons .pink-btn { padding: 0.85rem 2.4rem; font-size: 0.8rem; min-width: 186px; }

/* === FORMS === */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dark); margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.875rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--text-dark); background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; -webkit-appearance: none; appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brown-mid);
  box-shadow: 0 0 0 3px rgba(139,90,74,0.1);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5A4A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }

/* === CONTACT PAGE === */
.contact-grid { display: grid; grid-template-columns: 380px 1fr; gap: 3rem; align-items: start; }
.contact-info-card, .contact-form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.contact-phone-big {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700;
  color: var(--brown-dark); display: block; margin: 0.5rem 0 1.5rem;
  transition: color var(--transition);
}
.contact-phone-big:hover { color: var(--brown-mid); }
.contact-detail { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.contact-detail:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-detail-icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}
.contact-detail-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.contact-detail-value { color: var(--text-dark); font-size: 0.95rem; }
.contact-detail-value a { color: var(--brown-dark); transition: color var(--transition); }
.contact-detail-value a:hover { color: var(--brown-mid); }
.map-container { border-radius: var(--radius-lg); overflow: hidden; margin-top: 1.5rem; box-shadow: var(--shadow-sm); }
.map-container iframe { display: block; width: 100%; height: 280px; border: 0; }

/* === ORDER PAGE === */
.order-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.product-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.45rem 1.25rem; border-radius: 2rem;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--brown-dark); border-color: var(--brown-dark); color: var(--blush);
}
@media (max-width: 768px) {
  .filter-btn { min-height: 44px; }
}
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.product-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-image {
  aspect-ratio: 3/4; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; font-size: 3.5rem;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute; top: 0.65rem; left: 0.65rem;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 2rem;
}
.product-body { padding: 1rem 1.1rem 1.25rem; }
.product-category { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 0.3rem; }
.product-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.75rem; line-height: 1.3; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--brown-dark); }
.add-to-cart-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brown-dark); color: var(--blush);
  border: none; cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.add-to-cart-btn:hover { background: var(--brown-mid); transform: scale(1.1); }

/* Cart Sidebar */
.cart-sidebar { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: 5.5rem; }
.cart-header { background: var(--brown-dark); color: var(--blush); padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.cart-header h3 { color: var(--blush); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.cart-count-badge {
  background: var(--tan); color: var(--brown-dark);
  font-size: 0.68rem; font-weight: 700;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.cart-items { padding: 0.75rem 1rem; min-height: 180px; max-height: 320px; overflow-y: auto; }
.cart-empty { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 2.5rem 1rem; }
.cart-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 0.875rem; font-weight: 600; color: var(--text-dark); }
.cart-item-price { font-size: 0.78rem; color: var(--text-muted); }
.cart-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.2rem; transition: color var(--transition); }
.cart-item-remove:hover { color: #c0392b; }
.cart-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.cart-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; color: var(--text-dark); margin-bottom: 0.875rem; }
.checkout-section { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.checkout-section h4 { font-family: var(--font-heading); font-size: 0.9rem; color: var(--brown-dark); margin-bottom: 1rem; }

/* === BOOKING PAGE === */
.booking-layout { display: grid; grid-template-columns: 1fr 400px; gap: 3rem; align-items: start; }
.booking-info-card, .booking-form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
/* Its "Book Your Appointment Online" button is wider than the card on tablets. */
.booking-form-card .btn { white-space: normal; text-align: center; }
.booking-steps { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }
.booking-step { display: flex; gap: 1rem; align-items: flex-start; }
.booking-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.8rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.booking-step-text h4 { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 0.2rem; }
.booking-step-text p { font-size: 0.85rem; color: var(--text-muted); }
.booking-note { background: var(--blush-light); border-left: 3px solid var(--tan); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.875rem; color: var(--text-body); margin-top: 1.5rem; }

/* === ABOUT PAGE === */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-photo-placeholder {
  aspect-ratio: 4/5; background: var(--blush-light);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  border: 2px dashed var(--blush-mid);
}
.about-photo-icon { font-size: 4rem; opacity: 0.28; }
.about-photo-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.about-content .eyebrow { margin-bottom: 0.75rem; }
.about-content h2 { font-style: italic; margin-bottom: 1.5rem; }
.about-content p { margin-bottom: 1.25rem; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.about-stat { text-align: center; padding: 1.5rem 1rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.about-stat-number { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; color: var(--brown-dark); font-style: italic; display: block; }
.about-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.value-card { text-align: center; padding: 2rem 1.5rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.value-icon { font-size: 2.75rem; margin-bottom: 1rem; }
.value-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; color: var(--brown-dark); }
.value-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

/* === SERVICES FULL PAGE === */
.services-full-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.service-full-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.service-full-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-full-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.service-full-content h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--brown-dark); }
.service-full-content p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; }
.service-full-price { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--brown-mid); }
.service-full-cta { margin-top: 0.75rem; }

/* === MISC === */
.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 2rem;
  background: var(--blush); color: var(--brown-dark);
}
.badge--tan { background: var(--tan); color: var(--brown-dark); }
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.hidden { display: none !important; }

/* Notification toast */
.cart-notification {
  position: fixed; bottom: 2rem; right: 2rem;
  background: var(--brown-dark); color: var(--blush);
  padding: 0.75rem 1.5rem; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 9999;
  animation: fadeInUp 0.3s ease; pointer-events: none;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .services-full-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === HEADER AT NARROW WIDTHS ===
   The header's own breakpoints, since it runs out of room before the rest of
   the layout does. The page layout still changes at 768. */
@media (max-width: 1280px) {
  :root { --header-h: 168px; --logo-h: 176px; --logo-top: 20px; }
  .site-nav { gap: 2.5rem; }
  .site-nav a, .header-text-link { letter-spacing: 0.22em; }
  /* Room for the account figure without moving the logo off centre. */
  .header-cta { gap: 1rem; }
  .header-text-link { margin-right: 0.5rem; }
}
@media (max-width: 1100px) {
  :root { --header-h: 150px; --logo-h: 156px; --logo-top: 18px; }
  .header-inner { padding: 0 1.5rem; column-gap: 1.25rem; }
  .site-nav { gap: 1.6rem; }
  .site-nav a, .header-text-link { font-size: 0.72rem; letter-spacing: 0.16em; }
  .header-text-link { margin-right: 0.5rem; }
  .header-cta { gap: 0.75rem; }
  .pink-btn { padding: 0.6rem 1.3rem; letter-spacing: 0.22em; text-indent: 0.22em; }
}

/* Tablets and phones, as in her phone picture (5 Oct): the logo on the left,
   hanging a little over the page; on the right the menu button, with Shop and
   Book a Session stacked under it. */
@media (max-width: 980px) {
  :root { --logo-h: 176px; }
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . burger" "logo . cta";
    height: auto; padding: 0.75rem 1.25rem; row-gap: 0.5rem; column-gap: 0.75rem;
  }
  /* The negative bottom margin keeps the logo from making the bar taller, so
     the bar is as tall as the buttons and the logo hangs out of it. */
  .header-logo-link { grid-area: logo; align-self: start; margin: 0.35rem 0 -60px; }
  .hamburger { display: flex; grid-area: burger; justify-self: end; }
  .header-cta { grid-area: cta; justify-self: end; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .pink-btn { min-height: 44px; padding: 0.6rem 1.1rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .nav-shop { flex-direction: column; }
  .nav-shop-menu { display: none; }
  .header-text-link, .header-account { display: none; }

  /* The menu drops out of the bar rather than covering the screen, white like
     the bar, and over the hanging logo. */
  .site-nav { display: none; }
  .site-nav.open {
    display: flex; grid-area: auto;
    /* justify-self from the desktop rule would otherwise shrink it to its text. */
    justify-self: stretch;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #FFFFFF; padding: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(92,58,46,0.18);
    max-height: 70vh; overflow-y: auto;
  }
  .site-nav a {
    font-size: 0.95rem; letter-spacing: 0.12em; padding: 0.95rem 1.5rem;
    border-bottom: 1px solid rgba(92,58,46,0.1);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a.active { border-bottom-color: rgba(92,58,46,0.1); color: var(--pink-deep); }
  .nav-phone-only { display: block; }
  .nav-phone-shop { display: flex; flex-direction: column; background: rgba(92,58,46,0.03); }
  .nav-phone-shop a { padding-left: 2.6rem; letter-spacing: 0.04em; text-transform: none; }
  .nav-phone-shop a.nav-phone-head { padding-left: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; }
}

/* The smallest phones still sold, where the row is down to the last few pixels. */
@media (max-width: 360px) {
  :root { --logo-h: 150px; }
  .header-inner { padding: 0.75rem 1rem; }
  .pink-btn { letter-spacing: 0.14em; text-indent: 0.14em; }
  /* Single-column grids must not grow past the screen to fit a card's widest line. */
  .contact-grid, .services-full-grid { grid-template-columns: minmax(0, 1fr); }
  .service-full-card, .contact-info-card, .contact-form-card { padding: 1.5rem 1.25rem; }
}

@media (max-width: 768px) {
  :root { --section-v: 3.5rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .about-story { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .order-layout { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 4.5rem 0 3.5rem; min-height: 50vh; }
  .page-hero { min-height: 25vh; }
  .hero-cta, .cta-buttons { flex-direction: column; align-items: flex-start; }
  .cta-section .cta-buttons { align-items: center; }
  /* Stacked, the two buttons share one width. */
  .cta-buttons .pink-btn { width: 100%; max-width: 340px; min-width: 0; padding: 0.9rem 1rem; }
  .service-full-card { flex-direction: column; gap: 1rem; }
}

@media (max-width: 540px) {
  /* A long label wraps onto a second line instead of pushing the page sideways
     ("Book Your Appointment Online" was 425px wide on a 375px phone). The
     header's short buttons stay on one line. */
  .btn { white-space: normal; text-align: center; }
  .header-cta .btn { white-space: nowrap; }
  .product-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}

/* === THE BAG ===
   A shopping bag in the corner of every page (src/js/bag.js). It turns up with
   the first piece and grows with each one after: --bag-size is set by the
   script, from 64px up to 112px (92px on a phone). Tissue paper rises out of it
   at one, three and five pieces. */
:root { --bag-size: 64px; --bag-edge: 1.5rem; }
.bag-fab {
  position: fixed; right: var(--bag-edge); bottom: var(--bag-edge); z-index: 900;
  width: var(--bag-size); height: calc(var(--bag-size) * 1.12);
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bag-fab[hidden] { display: none; }
.bag-fab:hover { transform: translateY(-3px); }
.bag-fab:focus-visible { outline: 3px solid var(--tan); outline-offset: 4px; border-radius: 12px; }
.bag-fab-art { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.bag-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 12px rgba(44,24,16,0.3)); }
.bag-art .bag-body   { fill: var(--brown-dark); }
.bag-art .bag-side   { fill: #6A4436; }
.bag-art .bag-rim    { fill: #4A2E24; }
.bag-art .bag-handle { fill: none; stroke: var(--tan); stroke-width: 4.5; stroke-linecap: round; }
.bag-art .bag-eye    { fill: var(--tan); }
.bag-art .t1 { fill: var(--blush); }
.bag-art .t2 { fill: #E89AAE; }
.bag-art .t3 { fill: var(--blush-light); }
.bag-art .t1, .bag-art .t2, .bag-art .t3 {
  stroke: rgba(92,58,46,0.22); stroke-width: 0.8; stroke-linejoin: round;
  opacity: 0; transform: translateY(12px); transform-box: fill-box;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bag-fab[data-fill="1"] .t1, .bag-fab[data-fill="2"] .t1, .bag-fab[data-fill="3"] .t1,
.bag-fab[data-fill="2"] .t2, .bag-fab[data-fill="3"] .t2,
.bag-fab[data-fill="3"] .t3 { opacity: 1; transform: none; }
.bag-fab-count {
  position: absolute; left: 8%; right: 8%; top: 50%; bottom: 4%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-style: italic; font-weight: 600;
  font-size: calc(var(--bag-size) * 0.3); line-height: 1; color: var(--blush);
}
.bag-fab.pop .bag-fab-art { animation: bag-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bag-fab.arrive .bag-fab-art { animation: bag-arrive 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bag-pop {
  0%   { transform: scale(1) rotate(0); }
  25%  { transform: scale(1.16) rotate(-8deg); }
  55%  { transform: scale(0.95) rotate(5deg); }
  80%  { transform: scale(1.03) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bag-arrive {
  0%   { transform: translateY(40px) scale(0.5); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* "Added to your bag", beside the bag for a moment. Tapping it opens the bag. */
.bag-bubble {
  position: fixed; z-index: 901;
  right: calc(var(--bag-edge) + var(--bag-size) + 0.75rem);
  bottom: calc(var(--bag-edge) + var(--bag-size) * 0.3);
  max-width: min(280px, calc(100vw - var(--bag-size) - 3.5rem));
  padding: 0.65rem 0.95rem; border-radius: 12px;
  background: var(--brown-dark); color: var(--blush); box-shadow: var(--shadow-md);
  font-size: 0.9rem; line-height: 1.4;
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bag-bubble.show { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.bag-bubble strong { display: block; color: var(--white); font-weight: 700; }
.bag-bubble span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-bubble::after {
  content: ''; position: absolute; right: -6px; bottom: 14px;
  border: 6px solid transparent; border-right: 0; border-left-color: var(--brown-dark);
}
/* Messages keep clear of the bag. */
body.has-bag .cart-notification { right: auto; left: 1rem; max-width: calc(100vw - var(--bag-size) - 3.5rem); }

/* The bag, opened: from the right on a computer, from the bottom on a phone. */
html.bag-locked, html.bag-locked body { overflow: hidden; }
.bag-drawer { position: fixed; inset: 0; z-index: 1001; }
.bag-drawer[hidden] { display: none; }
.bag-drawer-backdrop { position: absolute; inset: 0; background: rgba(44,24,16,0.45); opacity: 0; transition: opacity 0.25s ease; }
.bag-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--cream); box-shadow: -12px 0 40px rgba(44,24,16,0.25);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bag-drawer.open .bag-drawer-backdrop { opacity: 1; }
.bag-drawer.open .bag-drawer-panel { transform: none; }
.bag-drawer-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 0.75rem 0.9rem 1.4rem; background: var(--brown-dark); color: var(--blush);
}
.bag-drawer-head h2 { flex: 1; margin: 0; font-size: 1.35rem; font-style: italic; color: var(--blush); }
.bag-drawer-count { font-size: 0.9rem; color: var(--blush-mid); }
.bag-drawer-close {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none;
  color: var(--blush); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.bag-drawer-close:hover { background: rgba(255,255,255,0.1); }
.bag-drawer .bag-rows { flex: 1; overflow-y: auto; padding: 0.25rem 1.4rem; }
.bag-drawer-empty { flex: 1; padding: 3rem 1.5rem; text-align: center; }
.bag-drawer-empty[hidden], .bag-drawer-foot[hidden] { display: none; }
.bag-drawer-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }
.bag-drawer-foot {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--border);
}
.bag-drawer-foot .btn { width: 100%; min-height: 50px; }
.bag-subtotal { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.bag-note { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }

/* One piece in the bag: in the bag panel and on checkout. */
.bag-rows { list-style: none; }
.bag-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.9rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.bag-row:last-child { border-bottom: 0; }
.bag-row-img { width: 64px; height: 80px; object-fit: cover; object-position: top center; border-radius: 8px; background: var(--blush-light); }
.bag-row-img--none { display: block; }
.bag-row-name { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--text-dark); }
.bag-row-variant { font-size: 0.9rem; line-height: 1.4; color: var(--text-muted); margin-top: 0.15rem; }
.bag-row-qty {
  display: inline-flex; align-items: center; margin-top: 0.55rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
}
.bag-row-qty button {
  width: 40px; height: 40px; border: 0; background: none; border-radius: 50%;
  font-size: 1.15rem; line-height: 1; color: var(--brown-dark); cursor: pointer;
}
.bag-row-qty button:disabled { color: var(--border); cursor: not-allowed; }
.bag-row-qty span { min-width: 1.5rem; text-align: center; font-weight: 600; color: var(--text-dark); }
.bag-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.bag-row-end strong { color: var(--text-dark); font-size: 1rem; }
.bag-row-remove {
  min-height: 40px; padding: 0 0.15rem; border: 0; background: none; cursor: pointer;
  font-size: 0.88rem; color: var(--text-muted); text-decoration: underline;
}
.bag-row-remove:hover { color: #A2372A; }

@media (max-width: 600px) {
  :root { --bag-edge: 1rem; }
  .bag-drawer-panel {
    top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .bag-drawer-head { border-radius: 18px 18px 0 0; }
  .bag-bubble { font-size: 0.95rem; }
  .bag-row-qty button, .bag-row-remove { min-height: 44px; }
  .bag-row-qty button { width: 44px; height: 44px; }
  .bag-row-variant, .bag-row-remove { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-fab, .bag-art .t1, .bag-art .t2, .bag-art .t3, .bag-drawer-panel, .bag-drawer-backdrop, .bag-bubble { transition: none; }
  .bag-fab.pop .bag-fab-art, .bag-fab.arrive .bag-fab-art { animation: none; }
}

/* === SHOP WITHOUT THE BAG BESIDE IT ===
   The bag is in the corner now, so the pieces get the whole width. */
.shop-layout .product-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .shop-layout .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .shop-layout .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .shop-layout .product-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { .add-to-cart-btn { width: 44px; height: 44px; } }

/* === CHECKOUT PAGE === */
.checkout-page { padding-top: 2rem; }
.checkout-back { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: var(--brown-mid); font-weight: 600; font-size: 0.95rem; }
.checkout-back:hover { color: var(--brown-dark); }
.checkout-title { font-style: italic; margin: 0.25rem 0 1.5rem; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2.5rem; align-items: start; }
.checkout-layout[hidden], .checkout-empty[hidden] { display: none; }
.checkout-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; }
.checkout-card + .checkout-card { margin-top: 1.25rem; }
.checkout-card h2 { font-size: 1.35rem; font-style: italic; margin-bottom: 1rem; }
.checkout-summary { position: sticky; top: 6.5rem; }
.checkout-lines { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.checkout-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.95rem; color: var(--text-body); }
.checkout-line[hidden] { display: none; }
/* Coupon code on checkout (Round 42). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.coupon-box { margin: 0.6rem 0 0.4rem; }
.coupon-toggle { border: 0; background: none; padding: 0.6rem 0; min-height: 44px; font: 600 0.88rem var(--font-body); color: var(--brown-mid); text-decoration: underline; cursor: pointer; }
.coupon-form { display: flex; gap: 0.5rem; margin: 0.2rem 0 0.3rem; }
.coupon-form[hidden] { display: none; }
.coupon-form input { flex: 1; min-width: 0; min-height: 46px; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font: 600 16px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.coupon-form button { min-height: 46px; padding: 0 1.1rem; border: 0; border-radius: var(--radius); background: var(--brown-dark); color: #fff; font: 700 0.85rem var(--font-body); cursor: pointer; }
.coupon-msg { font-size: 0.85rem; margin: 0.2rem 0 0.4rem; color: var(--text-muted); }
.coupon-msg.ok { color: #2E7D4F; }
.coupon-msg.bad { color: #A8362B; }
.coupon-msg button { border: 0; background: none; padding: 0 0.3rem; font: 600 0.85rem var(--font-body); color: var(--brown-mid); text-decoration: underline; cursor: pointer; }
/* An appointment at checkout: a row of days, then the open times. */
/* A grid column grows to fit its widest child unless told otherwise, and the
   row of days is three weeks wide: keep it inside the card and let it scroll. */
.checkout-details, .checkout-summary, .appt-card { min-width: 0; }
.appt-days { max-width: 100%; }
.appt-svc { margin: 0 0 1rem; font-size: 0.95rem; color: var(--text-body); }
.appt-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0.9rem 0 0.45rem; }
.appt-days { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.appt-day { flex: none; width: 64px; min-height: 68px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 600 0.72rem var(--font-body); color: var(--text-muted); }
.appt-day strong { font-size: 1.15rem; color: var(--text-dark); line-height: 1.1; }
.appt-day:disabled { opacity: 0.38; cursor: not-allowed; }
.appt-day.on { border-color: var(--brown-dark); background: var(--brown-dark); color: var(--blush); }
.appt-day.on strong { color: #fff; }
.appt-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.45rem; }
.appt-time { min-height: 44px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font: 700 0.88rem var(--font-body); color: var(--text-dark); }
.appt-time.on { border-color: var(--pink); background: var(--pink); color: #fff; }
.appt-empty { font-size: 0.88rem; color: var(--text-muted); margin: 0.3rem 0; }
.appt-booked { background: #EEF7F0; color: #2E7D4F; border-radius: 10px; padding: 0.8rem 0.9rem; font-size: 0.92rem; line-height: 1.5; }
.appt-q { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.appt-q summary { cursor: pointer; font-weight: 700; color: var(--brown-dark); min-height: 44px; display: flex; align-items: center; }
.appt-q fieldset { border: 0; padding: 0; margin: 0.8rem 0 0; }
.appt-q legend { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); margin-bottom: 0.15rem; }
.appt-q .appt-help { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.35rem; }
.appt-opt { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; font-size: 0.9rem; color: var(--text-body); cursor: pointer; }
.appt-opt input { width: 19px; height: 19px; flex: none; accent-color: var(--brown-dark); }
.appt-q textarea, .appt-q input[type=text] { width: 100%; min-height: 44px; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px;
  font: 16px var(--font-body); color: var(--text-body); margin-top: 0.35rem; box-sizing: border-box; }
.appt-q textarea { min-height: 72px; resize: vertical; }

/* Store credit at checkout: the tick box, or the sign-in link styled like "Have a code?". */
.credit-box { margin: 0 0 0.4rem; }
.credit-check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.92rem; color: var(--brown-mid); cursor: pointer; }
.credit-check input { width: 20px; height: 20px; accent-color: var(--brown-mid); flex: none; }
.credit-box .coupon-toggle { display: inline-flex; align-items: center; }
#cart-credit-line span:last-child { color: #2E7D4F; }
.pay-credit-note { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.6; }
#cart-discount-line span:last-child { color: #2E7D4F; }
.checkout-line--total { margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 1.1rem; font-weight: 700; color: var(--text-dark); }
.checkout-details .form-group { margin-bottom: 1.1rem; }
.checkout-btn { width: 100%; min-height: 52px; }
/* A long bag scrolls inside the summary, so the totals stay in view beside the form. */
.checkout-summary .cart-items { min-height: 0; max-height: 42vh; padding: 0 0.25rem 0 0; overflow-y: auto; }
.checkout-page .form-note { font-size: 0.9rem; color: var(--text-muted); }
.checkout-empty { text-align: center; padding: 3rem 1rem 4rem; }
.checkout-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }
#pay-box h3 { font-size: 1.15rem; font-style: italic; margin: 1.5rem 0 0.75rem; }
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .checkout-summary { position: static; order: -1; }
  .checkout-summary .cart-items { max-height: none; overflow: visible; }
}
@media (max-width: 540px) {
  .checkout-card { padding: 1.15rem; }
  .checkout-line { font-size: 1rem; }
  .checkout-page .form-note { font-size: 0.95rem; }
}
.checkout-pay { width: 100%; min-height: 52px; }

/* Ship it or free pickup at checkout (John's ask of 14 Oct 2026). */
.delivery-choice { display: grid; gap: 0.6rem; margin-bottom: 1.2rem; }
@media (min-width: 560px) { .delivery-choice { grid-template-columns: 1fr 1fr; } }
.delivery-option { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 44px; padding: 0.85rem 0.9rem;
  border: 2px solid #E0D6C8; border-radius: 10px; background: #fff; cursor: pointer; }
.delivery-option.is-on { border-color: var(--brown-mid, #8B5A4A); background: var(--blush-light, #FAF0EC); }
.delivery-option input { margin: 0.2rem 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--brown-mid, #8B5A4A); }
.delivery-option strong { display: block; font-size: 0.95rem; color: var(--text-dark, #2b2b2b); }
.delivery-option small { display: block; margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted, #8a8178); }