/* ---- squalane (Squalane — Skin studio & own-label skincare 113) ------------
   THE STRUCTURAL MOVE: the catalogue is ONE FIELD, not eight cards. The
   products block breaks out to 100vw on a cooler paper ground, its contents are
   pulled back to a 1020px spine, and .product-grid runs four across with a 3px
   gutter and no card, border, shadow or hover lift — so the eight white
   flat-lays fuse into a single 2x4 block of photography that is the spine of
   the page. Everything else stays on the bone ground and is bookended in
   full-bleed picture: a 100vh photograph with the copy low and left, and a
   booking band at the foot. Clay is rationed to exactly three homes — buttons,
   the cart count and the price — and the olive appears in one place only, the
   four strip labels. */
body.t-squalane {
  background: #f4efe8;
  color: #4a4139;
  --sq-clay: #b5806c;
  --sq-olive: #5c6248;
  --sq-paper: #eae5dc;
  --bg-flat: #f4efe8;
  --surface: #ffffff;
  --surface-2: #eae5dc;
  --line: #e2dad0;
  --line-strong: #cdc2b4;
  --heading: #2c2620;
  --text: #4a4139;
  --muted: #7e7367;
  --header-bg: #f4efe8;
  --radius: 0;
  --shadow: none;
}

/* the bar keeps the bone ground rather than going glassy over the photograph */
body.t-squalane .sf-head, body.t-squalane .sf-header,
body.t-squalane .sf-foot, body.t-squalane .sf-footer, body.t-squalane .sf-cats {
  background: #f4efe8; border-color: #e2dad0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-squalane .sf-name { font-family: var(--sf-serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; font-size: 14px; }

/* CLAY 1 of 3 — the buttons: flat slabs, no outline of their own */
body.t-squalane .btn.brand { background: var(--sq-clay); border-color: var(--sq-clay); color: #ffffff; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; padding: 15px 30px; }
body.t-squalane .btn.brand:hover { background: #9c6a57; border-color: #9c6a57; }
/* CLAY 2 of 3 — the cart count */
body.t-squalane .sf-cart .badge { background: var(--sq-clay); border-radius: 0; box-shadow: none; }

/* serif for headings, light sans for everything that carries information */
body.t-squalane .sc-hero h1, body.t-squalane .sc-h2, body.t-squalane .sc-banner h2,
body.t-squalane .product-card .t, body.t-squalane .pdp h1 {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.005em;
}

/* the first screen is almost entirely photograph: copy dropped to the bottom
   left corner of the frame, nothing behind it */
body.t-squalane .sc-hero { min-height: 100vh; align-items: flex-end; padding: 0 clamp(20px, 6vw, 76px) clamp(64px, 12vh, 124px); }
body.t-squalane .sc-hero h1 { font-size: clamp(34px, 5.6vw, 66px); line-height: 1.06; margin-bottom: 18px; }
body.t-squalane .sc-h2 { text-align: left; font-size: clamp(20px, 2.5vw, 28px); color: var(--heading); margin-bottom: 28px; }

/* four gapped portrait tiles in the contained column — the palate cleanser
   between the bleed above and the density below */
body.t-squalane .sc-strip { max-width: 1020px; padding: clamp(70px, 9vw, 104px) 20px 4px; }
body.t-squalane .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
body.t-squalane .sc-strip-img { border: 0; aspect-ratio: 3 / 4; }
/* OLIVE — the only place it appears anywhere on the page */
body.t-squalane .sc-strip-label { color: var(--sq-olive); text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 600; margin-top: 13px; }

/* --- THE FIELD: eight flat-lays, four across, twice, 3px apart on paper --- */
body.t-squalane .sc-products { width: 100vw; max-width: 100vw; margin: clamp(70px, 9vw, 104px) calc(50% - 50vw) 0; background: var(--sq-paper); padding: clamp(64px, 8vw, 92px) 20px clamp(20px, 3vw, 34px); }
body.t-squalane .sc-products > * { max-width: 1020px; margin-left: auto; margin-right: auto; }
body.t-squalane .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 0 0 40px; }
body.t-squalane .product-card, body.t-squalane .product-card:hover { background: #ffffff; border: 0; box-shadow: none; transform: none; }
body.t-squalane .product-card .ph { background: #ffffff; aspect-ratio: 4 / 5; }
/* CLAY 3 of 3 — the price */
body.t-squalane .product-card .p { color: var(--sq-clay); font-size: 13px; letter-spacing: 0.05em; }

@media (max-width: 860px) {
  body.t-squalane .product-grid, body.t-squalane .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the client sentence is treated as a photograph, not a testimonial card:
   one serif line across a soft full-bleed image with air above and below */
body.t-squalane .sc-about-overlay { padding: clamp(120px, 20vw, 230px) 20px; }
body.t-squalane .sc-about-overlay p { font-family: var(--sf-serif); font-size: clamp(19px, 2.7vw, 31px); line-height: 1.5; color: #ffffff; }

body.t-squalane .sc-banner { min-height: 62vh; display: flex; align-items: center; justify-content: center; margin: clamp(70px, 9vw, 104px) calc(50% - 50vw) 0; }
/* the address block reads as plain detail, not muted small print */
body.t-squalane .sc-contact-lead p { color: var(--heading); font-size: 15px; line-height: 2.05; }

/* NIGHT — the bone ground inverts to the same olive-brown the ink was cut from,
   the clay and olive lift to hold against it, and the eight flat-lays keep a
   warm off-white tile so a whole field of them stops glaring in a dark room. */
html[data-theme="dark"] body.t-squalane {
  background: #1b1815;
  color: #c8bfb4;
  --sq-clay: #cf9c86;
  --sq-olive: #9aa37c;
  --sq-paper: #221e1a;
  --bg-flat: #1b1815;
  --surface: #231f1b;
  --surface-2: #221e1a;
  --line: #302a24;
  --line-strong: #443c33;
  --heading: #f2ece3;
  --text: #c8bfb4;
  --muted: #9a9086;
  --header-bg: #1b1815;
}
html[data-theme="dark"] body.t-squalane .sf-head, html[data-theme="dark"] body.t-squalane .sf-header,
html[data-theme="dark"] body.t-squalane .sf-foot, html[data-theme="dark"] body.t-squalane .sf-footer,
html[data-theme="dark"] body.t-squalane .sf-cats { background: #1b1815; border-color: #302a24; }
html[data-theme="dark"] body.t-squalane .product-card,
html[data-theme="dark"] body.t-squalane .product-card:hover,
html[data-theme="dark"] body.t-squalane .product-card .ph { background: #f3ede4; }
html[data-theme="dark"] body.t-squalane .btn.brand { color: #221b16; }