/* ==========================================================================
   IGO — Skin & Laser Clinic · Design System
   Source of truth: Figma "Lumira — Skincare + Laser Clinic, Home Page Concepts"
   ==========================================================================
   Aesthetic: quiet luxury / editorial. Cream papers, one espresso ink,
   a sage undertone. Sharp corners everywhere except photography (10px).
   Serif italics carry the voice; grotesques carry the information.
   ========================================================================== */

:root {
  /* ---- Color ----------------------------------------------------------- */
  --canvas:          #e3e3d6;              /* page background — sage cream   */
  --surface:         #f3f3e5;              /* raised panels / light sections */
  --cream:           #faf2e5;              /* warm cream — text on dark, footer */
  --espresso:        #2e1207;              /* the single ink — text, fills   */
  --sage:            #8b907f;              /* muted copy, captions, ghost UI */
  --hairline:        rgba(46, 18, 7, .15); /* quiet borders on light        */
  --hairline-strong: rgba(46, 18, 7, .16); /* list dividers                 */
  --hairline-cream:  rgba(250, 242, 229, .28); /* quiet borders on dark     */
  --ghost:           rgba(20, 20, 20, .08);/* watermark type                */

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-logo:    "Fraunces", Georgia, serif;
  --font-body:    "Onest", "Segoe UI", -apple-system, sans-serif;
  --font-ui:      "Inter", "Segoe UI", sans-serif;
  --font-accent:  "Lufga", "Onest", "Segoe UI", sans-serif; /* card titles  */

  --text-hero:    clamp(3.5rem, 0.5rem + 6.4vw, 6rem);  /* 96px display    */
  --text-h2:      clamp(2.25rem, 1.5rem + 1.7vw, 3rem); /* 48px section    */
  --text-h3:      clamp(1.75rem, 1.4rem + 1vw, 2.25rem);/* 36px list items */
  --text-feature: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);/* 34px journal    */
  --text-title:   1.625rem;   /* 26px — card & module titles (accent font)  */
  --text-quote:   1.5rem;     /* 24px — journal rows                        */
  --text-lead:    1.25rem;    /* 20px — standfirst / lead paragraphs        */
  --text-body:    1rem;       /* 16px                                       */
  --text-small:   0.9375rem;  /* 15px — nav, secondary copy                 */
  --text-caption: 0.8125rem;  /* 13px — metadata                            */
  --text-tag:     0.75rem;    /* 12px — chips, eyebrows                     */

  --track-display: -0.02em;   /* display serif                              */
  --track-eyebrow:  0.06em;   /* uppercase labels                           */
  --leading-display: 0.96;
  --leading-body:    1.5;

  /* ---- Space & shape --------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  --container: 1336px;        /* content width inside the 1440 frame        */
  --page-pad:  52px;
  --radius-photo: 10px;       /* ONLY photography rounds. UI stays sharp.   */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --dur-quick: 220ms;
  --dur-slow:  600ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* the hidden attribute always wins, even over display rules on the element */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--espresso); color: var(--cream); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
@media (max-width: 720px) {
  .container { padding-inline: var(--space-5); }
}

/* ==========================================================================
   Typography classes
   ========================================================================== */

/* Hero — 96px Cormorant SemiBold Italic, tight leading */
.display-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  margin: 0;
}

/* Section heading — 48px, often uppercase in the layout */
.display-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  margin: 0;
}
.display-h2--caps { text-transform: uppercase; }

/* Ruled-list item — 36px Cormorant Medium (upright) */
.display-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-h3);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  margin: 0;
}

/* Card / module title — Lufga (accent) */
.title-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--text-title);
  letter-spacing: -0.01em;
  line-height: normal;
  margin: 0;
}

.lead {
  font-size: var(--text-lead);
  line-height: normal;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-tag);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin: 0;
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--sage);
  margin: 0;
}

.text-muted { color: var(--sage); }
.text-cream { color: var(--cream); }

/* Logo wordmark — Fraunces, wonky, soft off */
.wordmark {
  font-family: var(--font-logo);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  letter-spacing: 0.06em;
  font-size: 1.75rem;
  margin: 0;
}

/* Watermark — footer-scale ghost type */
.watermark {
  font-family: var(--font-logo);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(6rem, 20.8vw, 18.75rem); /* → 300px at 1440 */
  letter-spacing: -0.03em;
  line-height: normal;
  color: var(--ghost);
  margin: 0;
  white-space: nowrap;
}

/* ==========================================================================
   Buttons — sharp rectangles, two sizes, two inks
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: normal;
  padding: 10px 15px;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}

/* Large — hero / closing CTA */
.btn--lg {
  padding: 17px 32px;
  font-weight: 500;
}

/* On light surfaces */
.btn--solid {
  background: var(--espresso);
  color: var(--surface);
}
.btn--solid:hover { background: #462310; }

.btn--outline {
  border-color: var(--espresso);
  color: var(--espresso);
}
.btn--outline:hover { background: var(--espresso); color: var(--surface); }

.btn--ghost {
  border-color: var(--sage);
  color: var(--sage);
}
.btn--ghost:hover { border-color: var(--espresso); color: var(--espresso); }

/* On dark surfaces */
.btn--solid-cream {
  background: var(--cream);
  color: var(--espresso);
}
.btn--solid-cream:hover { background: #fff9ef; }

.btn--outline-cream {
  border-color: var(--cream);
  color: var(--cream);
}
.btn--outline-cream:hover { background: var(--cream); color: var(--espresso); }

/* ==========================================================================
   Chips & tags
   ========================================================================== */

/* Filter chip — Onest 16, used in Services tab row */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid var(--espresso);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--espresso);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
.chip:hover, .chip.is-active {
  background: var(--espresso);
  color: var(--surface);
}

/* Meta tag — Inter 12, machine / price labels on cards */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-tag);
  color: var(--espresso);
  white-space: nowrap;
}
.tag--strong { border-color: var(--espresso); }

/* ==========================================================================
   Cards
   ========================================================================== */

/* Service card — photo, accent title, muted copy, tag row */
.card-service {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}
.card-service__media {
  height: 240px;
  overflow: hidden;
  background: var(--canvas);
}
.card-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card-service:hover .card-service__media img { transform: scale(1.04); }
.card-service__desc {
  font-size: var(--text-small);
  color: var(--sage);
  margin: 0;
}
.card-service__tags {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-1);
  margin-top: auto; /* pins the tag row so it aligns across cards in a row */
}

/* Product card */
.card-product {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-product__media {
  position: relative;
  height: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.card-product__media img {
  height: 240px;
  max-height: 88%;
  width: auto;
  max-width: 86%;
  border-radius: var(--radius-photo);
  object-fit: contain; /* never stretch — any image ratio stays true */
  transition: transform var(--dur-slow) var(--ease-out);
}
.card-product:hover .card-product__media img { transform: translateY(-4px); }
.card-product__rating {
  position: absolute;
  top: 26px;
  left: 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-ui);
}
.card-product__stars { font-size: var(--text-tag); color: var(--espresso); }
.card-product__reviews { font-size: 11px; color: var(--sage); }
.card-product__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-body);
  margin: 0;
}
.card-product__variant {
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--sage);
  margin: 0;
}
.card-product__price {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-lead);
  margin: 0;
}
.card-product__price s,
.pdp__price s {
  color: var(--sage);
  font-weight: 400;
  font-size: 0.82em;
  margin-right: 8px;
}

/* Stock badge on product media */
.stock-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 5px 10px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  color: var(--espresso);
  white-space: nowrap;
}
.stock-badge--out {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}
.card-product.is-out .card-product__media img { opacity: .55; filter: grayscale(.4); }

/* Duo panel — the Laser / Skin split and Special Offers cards */
.panel {
  position: relative;
  padding: var(--space-7) var(--space-6);
  min-height: 497px;
  display: flex;
  flex-direction: column;
}
.panel--dark  { background: var(--espresso); color: var(--cream); }
.panel--light { background: var(--surface);  color: var(--espresso); }
.panel--framed { border: 1px solid var(--espresso); }

/* ==========================================================================
   Ruled list — "How we practice" editorial list
   ========================================================================== */

.ruled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ruled-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(46, 18, 7, .2);
}
.ruled-list .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--espresso);
}

/* Journal row — reading list with dividers */
.journal-row {
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.journal-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--sage);
}
.journal-row__meta::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage);
}
.journal-row__title {
  font-size: var(--text-quote);
  line-height: 1.2;
  margin: 0;
  transition: opacity var(--dur-quick) var(--ease-out);
}
.journal-row:hover .journal-row__title { opacity: .6; }

/* ==========================================================================
   Forms — newsletter capture
   ========================================================================== */

.input-capture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  width: min(380px, 100%);
  padding: 8px 8px 8px 22px;
  background: var(--cream);
  border: 1px solid var(--hairline);
}
.input-capture input {
  border: 0;
  background: none;
  outline: none;
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--espresso);
}
.input-capture input::placeholder { color: var(--sage); }
.input-capture button {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--espresso);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out);
}
.input-capture button:hover { background: #462310; }

/* ==========================================================================
   Section furniture
   ========================================================================== */

/* Heading + "View All →" row */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Star rating text */
.stars { font-family: var(--font-ui); font-size: var(--text-tag); letter-spacing: .1em; }

/* Nav link */
.nav-link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-small);
  color: var(--espresso);
  text-decoration: none;
  transition: opacity var(--dur-quick) var(--ease-out);
}
.nav-link:hover { opacity: .55; }

/* Footer column */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-col a {
  color: var(--espresso);
  text-decoration: none;
  font-size: var(--text-small);
}
.footer-col a:hover { opacity: .55; }
.footer-col span { font-size: var(--text-small); color: var(--espresso); }