/* ==========================================================================
   SEYE — Product category pages
   Design reference: Lanhu artboards 1920px (Face / Body / Sun / Eye / Lip /
   Hand & Foot Care) · 1rem = 16px @ 1920 · every value = design px / 16

   Measured geometry (Lip Care artboard 1920 × 11332, shared by all six pages)

     nav          0 .. 95
     hero         95 .. 1028     (933 tall, banner bottom-anchored)
       eyebrow cap top 239 · left 59        font 24
       title  cap top 302, 2 lines          font 80 / 86
       text   4 lines, pitch 38.7           font 27 / 38.7
       button 732..808 (77 tall) × 396 wide, left 60
     sub-head
       eyebrow cap top 1082                 font 20
       title   cap top 1136                 font 67 / 66
       text    baselines 1253 / 1290        font 23 / 37
     product blocks  8 × (707 × 774 image), row pitch 924 (774 + 150)
       left image x 206..912 · right image x 1024..1730 · gutter 128
       copy column 643 wide, inset 17 from the image / 46 from the page edge
       title cap top 1440                   font 53 / 60
       text  3 lines, pitch 37.5            font 23 / 37.5
       spec table 643 wide, 74px rows, 1px rules
       button 65 tall × 371 wide            font 21
     efficacy
       eyebrow cap top 8816 · title cap top 8870 · text baselines 8988 / 9025
       cards 488 × 526, gap 98, y 9134..9659
         number cap top 9214 (104 serif) · unit 9308 (33)
         card title 9412 (33) · card text pitch 40 (23)
     green contact band 9737 .. 10931
     footer             10931 .. 11332
   ========================================================================== */

/* ------------------------------------------------------------------ HERO --- */
.c-hero{
  position:relative;
  height:58.3125rem;                     /* 933 */
  margin-top:var(--nav-h);
  overflow:hidden;
  background:#f4e9e3;                    /* the cream the artboard fades from */
}
.c-hero-bg{position:absolute;left:0;right:0;bottom:0;line-height:0}
.c-hero-bg img{width:100%;height:auto}

/* the copy column is hand-placed per page in the artboard — --hero-x and the
   four stop offsets come from data/categories.mjs (hero.cfg)               */
.c-hero-copy{
  position:relative;
  padding:var(--hero-pad-top,8.75rem) 0 0 var(--hero-x,3.75rem);
}

.c-eyebrow{
  display:flex;align-items:center;gap:2.5625rem;      /* 41 */
  font-size:1.5rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--olive);
}
.c-eyebrow::after{content:"";width:5.8125rem;height:1px;background:currentColor;opacity:.55}

.c-hero-title{
  font-family:var(--serif);font-weight:600;
  font-size:4.75rem;line-height:5.375rem;letter-spacing:0;
  color:#223a38;margin-top:var(--hero-title-mt,1.8125rem);max-width:56.25rem;
}
.c-hero-text{
  margin-top:var(--hero-text-mt,3.125rem);max-width:56.25rem;
  font-size:1.6875rem;line-height:2.4375rem;color:#2b3a33;   /* 27 / 39 */
}
.c-hero-btn{
  margin-top:var(--hero-btn-mt,4.5rem);
  --h:4.8125rem;font-size:1.28125rem;padding:0 3.59375rem;
}

/* ------------------------------------------------- SUB-CATEGORIES HEAD --- */
.c-sub{padding-top:3.1875rem;text-align:center}
.c-sub .c-sub-label{justify-content:center;font-size:1.25rem}
.c-sub .c-sub-label::after{width:3.75rem}
.c-sub-title{margin-top:1.5625rem;font-size:4.1875rem;line-height:4.125rem}
.c-sub-text{
  margin:2.5rem auto 0;width:62.5rem;             /* 1000 → 2 lines on all six */
  font-size:1.4375rem;line-height:2.3125rem;color:#3f5445;
}

/* ------------------------------------------------------ PRODUCT BLOCKS ---
   Each block is its own 707/707 split; the blocks stack with a 150px rhythm
   -------------------------------------------------------------------------- */
.c-blocks{
  width:95.3125rem;                      /* 206 → 1731 */
  margin:5.1875rem 0 0 12.875rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:9.375rem;                      /* 150 */
}
/* the artboard leaves an extra 75px above the fifth row — measured on all six
   pages (row pitch 924 · 926 · 924 · 999 · 924 · 926 · 924) */
.c-blocks > .c-block:nth-child(5){margin-top:4.6875rem}
.c-block{
  display:grid;
  grid-template-columns:44.1875rem 44.1875rem;   /* 707 + 707 */
  column-gap:6.9375rem;                          /* 111 */
  align-items:center;
}
.c-block-media{line-height:0;border-radius:1.25rem;overflow:hidden}
.c-block-media img{width:100%;height:auto}

/* the copy sits 8px from the image side and 37px from the page edge — the
   artboard is mirrored, so the offset flips with the image. The text box is
   720px wide (artboard: copy 1032 → 1752, and the titles that wrap there —
   face "Cleansers & Makeup / Removers", eye "Dark Circle & Puffiness /
   Treatments" — only break inside a box this wide). The spec table is a
   separate, narrower frame in the source (≈656px, dd flush right at 1688). */
.c-block-copy{width:45rem}                                     /* 720 */
.c-spec{max-width:41rem}                                       /* 656 */
.c-block.is-img-left .c-block-copy{margin-left:.5rem}          /* 8  */
.c-block.is-img-right .c-block-media{order:2}
.c-block.is-img-right .c-block-copy{order:1;margin-left:2.3125rem}  /* 37 */

.c-block-title{
  font-family:var(--serif);font-weight:600;
  font-size:3.3125rem;line-height:3.75rem;color:var(--green);
}
.c-block-text{margin-top:1.5rem;font-size:1.4375rem;line-height:2.34rem;color:#3f5445}

.c-spec{margin-top:3.25rem;border-top:1px solid #e6e8e0}
.c-spec-row{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:4.625rem;                                  /* 74 */
  border-bottom:1px solid #e6e8e0;
  font-size:1.4375rem;line-height:1.25;color:#244a36;
}
.c-spec-row dt{font-weight:400}
.c-spec-row dd{font-weight:600;text-align:right}

.c-block-btn{
  margin-top:2.25rem;--h:4.0625rem;
  font-size:1.1875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:0 5.4375rem;                             /* 87 → button 371 wide */
}

/* ----------------------------------------------------- PROVEN EFFICACY ---
   Ink rows measured on the artboard (card top 9134, 526 tall):
     number cap 9215 (74) · unit cap 9308 (24) · card title cap 9412 (31)
     card text ascenders 9473 / 9513 / 9554 / 9594  (pitch 40)
   The numbers below are the box offsets that put the ink back on those rows. */
.c-stats{padding-top:7.125rem;text-align:center}
.c-stats .c-stats-label{justify-content:center;font-size:1.25rem}
.c-stats .c-stats-label::after{width:3.75rem}
.c-stats-title{margin-top:1.5625rem;font-size:4.1875rem;line-height:4.125rem}
.c-stats-text{margin:1.875rem auto 0;width:51rem;font-size:1.4375rem;line-height:2.3125rem;color:#3f5445}

.c-stat-grid{
  width:103.75rem;margin:6.3125rem auto 0;         /* 1660, centred */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:6.125rem;                             /* 98 */
}
.c-stat{
  background:#fff;border-radius:1.25rem;height:32.875rem;   /* 526 */
  padding:3.8125rem 2.5rem 0;text-align:center;
}
.c-stat-num{font-family:var(--serif);font-weight:600;font-size:6.5rem;line-height:1;color:var(--green)}
.c-stat-unit{display:block;margin-top:.25rem;font-size:2.0625rem;line-height:1;color:var(--green)}
.c-stat-title{margin-top:4.3125rem;font-size:2.0625rem;line-height:1.25;font-weight:600;color:var(--green)}
.c-stat-text{margin-top:1rem;font-size:1.4375rem;line-height:2.5rem;color:#3f5445}

/* face-care and body-care were drawn on an earlier revision: their efficacy
   block sits 165 / 118px under the last product row (the other four: 114) and
   the cream gap in front of the green band is 131px (the other four: 78).
   Both figures are measured off the artboards, not invented. */
.page-face-care .c-stats{padding-top:10.3125rem}          /* 165 */
.page-body-care .c-stats{padding-top:7.375rem}            /* 118 */
.page-face-care .c-stats-wrap,
.page-body-care .c-stats-wrap{padding-bottom:8.1875rem}   /* 131 */

.c-stats-wrap{padding-bottom:4.875rem}             /* 78 → the green band */

/* ==========================================================================
   Responsive  < 1024px  — fluid flow, one column, image above the copy
   ========================================================================== */
@media (max-width:1023.98px){
  .c-hero{height:auto;min-height:24rem;padding-bottom:2.5rem}
  .c-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(246,238,234,.95) 0%,rgba(246,238,234,.86) 44%,rgba(246,238,234,.18) 100%);
  }
  .c-hero-bg{position:absolute;inset:0}
  .c-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right bottom}
  .c-hero-copy{position:relative;z-index:2;padding:3rem 1.25rem 0}
  .c-eyebrow{font-size:.8125rem;gap:.875rem}
  .c-eyebrow::after{width:3rem}
  .c-hero-title{margin-top:1.25rem;max-width:none;font-size:clamp(2.25rem,9vw,3.25rem);line-height:1.14}
  .c-hero-text{margin-top:1.25rem;max-width:none;font-size:1rem;line-height:1.7}
  .c-hero-btn{margin-top:1.75rem;font-size:.9375rem;--h:3.25rem;padding:0 1.75rem}

  .c-sub{padding-top:2.5rem}
  .c-sub-title{margin-top:1rem;font-size:clamp(1.6rem,6.4vw,2.25rem);line-height:1.14}
  .c-sub-text{margin-top:1rem;width:auto;font-size:.9375rem;line-height:1.7;padding:0 1.25rem}

  .c-blocks{
    width:auto;margin:2.5rem 0 0;padding:0 1.25rem 1rem;
    row-gap:3rem;
  }
  .c-block{display:flex;flex-direction:column;align-items:stretch}
  .c-block-media{order:-1;border-radius:.875rem;width:100%}
  .c-block.is-img-right .c-block-media{order:-1}
  .c-block-copy,.c-block.is-img-left .c-block-copy,.c-block.is-img-right .c-block-copy{
    width:auto;margin-left:0;
  }
  .c-block-title{margin-top:1.25rem;font-size:1.5rem;line-height:1.2}
  .c-block-text{margin-top:.5rem;font-size:.9375rem;line-height:1.7}
  .c-spec{margin-top:1.25rem}
  .c-spec-row{height:auto;padding:.75rem 0;font-size:.875rem}
  .c-block-btn{margin-top:1.25rem;--h:3rem;font-size:.8125rem;padding:0 1.5rem;letter-spacing:.06em}

  .c-stats{padding-top:3rem}
  .c-stats-title{margin-top:1rem;font-size:clamp(1.6rem,6.4vw,2.25rem);line-height:1.14}
  .c-stats-text{margin-top:1rem;width:auto;font-size:.9375rem;line-height:1.7;padding:0 1.25rem}
  .c-stat-grid{width:auto;margin:2rem 1.25rem 0;grid-template-columns:minmax(0,1fr);row-gap:1rem}
  .c-stat{height:auto;padding:2.25rem 1.5rem}
  .c-stat-num{font-size:3.25rem}
  .c-stat-unit{margin-top:.5rem;font-size:1.125rem}
  .c-stat-title{margin-top:1rem;font-size:1.0625rem}
  .c-stat-text{margin-top:.75rem;font-size:.9375rem;line-height:1.7}
  .c-stats-wrap{padding-bottom:0}
}

@media (min-width:640px) and (max-width:1023.98px){
  .c-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem}
  .c-stat{padding:2rem 1rem}
}
@media (max-width:639.98px){  html{font-size:14px} }