/*
Theme Name: Clever Curl Child
Description: Child theme of Clever Curl for clevercurl.site. Site-specific styles live here so the parent theme can be updated safely.
Author: Ethical Brand Co
Template: clever-curl
Version: 1.11.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: clever-curl-child
*/

/*
 * Design tokens and base styles from the "CC website design" Figma file
 * (CC Desktop Home, Mobile Home, Mobile Slide in Menu Alt).
 *
 * Font: Real Text Pro (FF Real Text Pro on Adobe Fonts, CSS name
 * "ff-real-text-pro"), loaded under Settings → Page Builder Fonts as a
 * stylesheet link to the Adobe Fonts web project for clevercurl.site
 * (kit lum7zju), named exactly ff-real-text-pro.
 *
 * Weights: Adobe numbers this family's styles lower than usual, so the
 * weight tokens below use ADOBE's numbers, checked against the design:
 *   Light 200 · Regular 300 · Medium 500 · Demibold 600 · Bold 700.
 * Always use the tokens; a standard number (e.g. 400 for Regular) would
 * pick the wrong style.
 */

/*
 * Until the Adobe Fonts kit arrives (font-display: swap), text is drawn in
 * Arial (or a metric twin: Liberation Sans, Arimo) scaled to Real Text Pro's
 * widths and line metrics, so lines wrap the same way and nothing moves when
 * the real font swaps in. Measured from the kit's files on 10/10/2026.
 */
@font-face {
  font-family: "Real Text Pro Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  font-weight: 100 300;
  size-adjust: 104.6%;
  ascent-override: 99.3%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Real Text Pro Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  font-weight: 400 500;
  size-adjust: 106.3%;
  ascent-override: 99.3%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Real Text Pro Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
  font-weight: 600 900;
  size-adjust: 101.3%;
  ascent-override: 106.1%;
  descent-override: 32.3%;
  line-gap-override: 0%;
}

:root {
  /* Colours */
  --cc-plum: #70263d;      /* brand: shipping bar, footer, solid buttons, NEW tags */
  --cc-black: #000000;     /* text, icons */
  --cc-white: #ffffff;
  --cc-ink: #231f20;       /* review counts */
  --cc-grey-line: #909090; /* outline button borders */
  --cc-grey-pill: #d9d9d9; /* pill borders */
  --cc-grey-hint: #cacaca; /* input placeholders */
  --cc-grey-tile: #e9e9e9; /* promo tiles */
  --cc-grey-bg: #f5f5f5;   /* slide-in menu, pill bar */
  --cc-overlay: rgba(0, 0, 0, 0.36); /* image tiles behind white labels */

  /* Type */
  --cc-font: "ff-real-text-pro", "Real Text Pro", "Real Text Pro Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-light: 200;    /* Adobe's Light */
  --cc-regular: 300;  /* Adobe's Regular */
  --cc-medium: 500;
  --cc-demibold: 600;
  --cc-bold: 700;
  /* The page builder's product elements take the site's weight scale. */
  --ebc-w-light: var(--cc-light);
  --ebc-w-regular: var(--cc-regular);
  --ebc-w-medium: var(--cc-medium);
  --ebc-leading-normal: var(--cc-leading-normal);
  --cc-features: "liga" 0, "lnum" 1, "pnum" 1;
  /* Figma's "leading: normal" for Real Text Pro. Browsers' own "normal" for
     the font is tighter (about 1.35), so it is never used directly. */
  --cc-leading-normal: 1.4;

  --cc-font-h1: 2.5rem;      /* 40px  feature headings ("Not sure where to start?") */
  --cc-font-h2: 1.5rem;      /* 24px  section titles ("BEST SELLERS"), Medium */
  --cc-font-h3: 1.5rem;      /* 24px  CC Heading 3, Light */
  --cc-font-h4: 1.125rem;    /* 18px  CC Heading 4, Regular */
  --cc-font-lead: 1.25rem;   /* 20px  intro and feature copy */
  --cc-font-menu: 1.125rem;  /* 18px  desktop menu, product names, prices */
  --cc-font-body: 1rem;      /* 16px  body copy */
  --cc-font-button: 0.9375rem; /* 15px card buttons */
  --cc-font-small: 0.875rem; /* 14px  acknowledgement, small buttons */
  --cc-font-xs: 0.75rem;     /* 12px  pills, review counts, NEW tag */

  /* Shape */
  --cc-radius-button: 6px;
  --cc-radius-card-button: 10px;
  --cc-radius-pill: 10px;

  /* Parent theme tokens, mapped to the design */
  --cc-text: var(--cc-black);
  --cc-accent: var(--cc-plum);
  --cc-border: var(--cc-grey-pill);
}

/* Mobile sizes (Figma Mobile Home, 375px). */
@media (max-width: 600px) {
  :root {
    --cc-font-h1: 1.5rem;    /* 24px  "Starter Packs" */
    --cc-font-h2: 1.125rem;  /* 18px  "BEST SELLERS", Regular */
    --cc-font-lead: 1rem;    /* 16px */
    --cc-font-menu: 1rem;    /* 16px */
    --cc-font-small: 0.75rem; /* 12px acknowledgement */
  }
}

/* Base: 100% respects the visitor's browser font-size setting (16px by default). */
html { font-size: 100%; }
body {
  font-family: var(--cc-font);
  font-size: var(--cc-font-body);
  font-weight: var(--cc-light);
  line-height: 1.2;
  color: var(--cc-black);
  font-feature-settings: var(--cc-features);
  /* Lining figures that sit on the line (Real Text Pro's default figures
     drop below it). Inherited, and kept even where a component sets its own
     font-feature-settings. Needs the Adobe Fonts project's "OpenType
     features" option on, or the kit's files don't carry the figures. */
  font-variant-numeric: lining-nums proportional-nums;
  /* Figma draws type with greyscale anti-aliasing. Browsers on macOS draw it
     heavier by default, so Light text looked a weight up from the design. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Footer at the bottom of the window when the page is shorter than it: body
   is a column at least one window tall and the main area takes the spare
   height. Its other children are scripts or fixed/absolute (admin bar, skip
   link, modals), so only header, main and footer are laid out. The admin
   bar's height is taken off because WordPress adds it as a margin on html. */
body {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.cc-main { flex: 1 0 auto; }

/* Form controls don't inherit type settings by default. */
button, input, select, textarea, optgroup {
  font-feature-settings: inherit;
  font-variant-numeric: inherit;
}

a { color: inherit; }
a:hover { color: var(--cc-plum); }

strong, b { font-weight: var(--cc-bold); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--cc-font);
  font-feature-settings: var(--cc-features);
}
h1 { font-size: var(--cc-font-h1); font-weight: var(--cc-light); line-height: 1.25; }
h2 { font-size: var(--cc-font-h2); font-weight: var(--cc-medium); line-height: 1.25; }
h3 { font-size: var(--cc-font-h3); font-weight: var(--cc-light); line-height: 1.25; }
h4 { font-size: var(--cc-font-h4); font-weight: var(--cc-regular); line-height: var(--cc-leading-normal); }
h5 { font-size: var(--cc-font-body); font-weight: var(--cc-medium); line-height: 1.2; }
h6 { font-size: var(--cc-font-small); font-weight: var(--cc-medium); line-height: 1.2; }

@media (max-width: 600px) {
  h2 { font-weight: var(--cc-regular); line-height: var(--cc-leading-normal); }
}

/* Paragraphs */
p {
  margin: 0 0 1em;
  font-size: var(--cc-font-body);
  line-height: 1.2;
}

/* Intro and feature copy ("Clever Curl was created by…"). */
.cc-lead, .cc-lead p { font-size: var(--cc-font-lead); line-height: 1.25; }

small, .cc-small { font-size: var(--cc-font-small); line-height: 1.294; }
.cc-xs { font-size: var(--cc-font-xs); line-height: var(--cc-leading-normal); }

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */

/* Outline button: "TAKE OUR CURL QUIZ", "LEARN MORE". */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46.864px;
  padding: 8.08px 22.624px;
  border: 1.616px solid var(--cc-grey-line);
  border-radius: var(--cc-radius-button);
  background: transparent;
  color: var(--cc-black);
  font-family: var(--cc-font);
  font-size: 22.624px;
  font-weight: var(--cc-medium);
  line-height: 0.8911;
  text-transform: uppercase;
  text-decoration: none;
  font-feature-settings: var(--cc-features);
  cursor: pointer;
}
.cc-btn:hover { border-color: var(--cc-black); color: var(--cc-black); }

/* On images: white outline. */
.cc-btn--light { border-color: var(--cc-white); color: var(--cc-white); }
.cc-btn--light:hover { background: var(--cc-white); color: var(--cc-black); }

/* Product card button: "SELECT OPTIONS". */
.cc-btn--card {
  width: 100%;
  min-height: 0;
  padding: 18px;
  border-width: 1px;
  border-radius: var(--cc-radius-card-button);
  background: var(--cc-white);
  font-size: var(--cc-font-button);
  line-height: 1.2;
}

/* Solid plum button (mobile product cards). */
.cc-btn--solid {
  border-color: var(--cc-plum);
  background: var(--cc-plum);
  color: var(--cc-white);
}
.cc-btn--solid:hover { background: var(--cc-black); border-color: var(--cc-black); color: var(--cc-white); }

@media (max-width: 600px) {
  /* Mobile image buttons: thin white box, light 14px caps, square corners. */
  .cc-btn {
    min-height: 0;
    padding: 5px 14px;
    border-width: 1px;
    border-radius: 0;
    font-size: var(--cc-font-small);
    font-weight: var(--cc-light);
  }
  .cc-btn--card {
    padding: 8.028px 22px;
    border-radius: var(--cc-radius-button);
    font-size: var(--cc-font-button);
    font-weight: var(--cc-medium);
    line-height: var(--cc-leading-normal);
  }
  .cc-btn--card:not(.cc-btn--light) {
    border-color: var(--cc-plum);
    background: var(--cc-plum);
    color: var(--cc-white);
  }
}

/* ---------------------------------------------------------------
 * Pills (mobile category bar: SHOP ALL, CLEANSE, …)
 * ------------------------------------------------------------- */
.cc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border: 0.8px solid var(--cc-grey-pill);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-white);
  color: var(--cc-black);
  font-size: var(--cc-font-xs);
  font-weight: var(--cc-light);
  line-height: 0.9315;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* NEW tag on promo tiles. */
.cc-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cc-plum);
  color: var(--cc-white);
  font-size: var(--cc-font-xs);
  font-weight: var(--cc-medium);
  line-height: var(--cc-leading-normal);
}

/* ---------------------------------------------------------------
 * Products
 * ------------------------------------------------------------- */
.cc-product-name { font-size: var(--cc-font-menu); font-weight: var(--cc-light); line-height: 1.2; }
.cc-product-price { font-size: var(--cc-font-menu); font-weight: var(--cc-light); line-height: 1.2; }
.cc-reviews { color: var(--cc-ink); font-size: var(--cc-font-xs); line-height: var(--cc-leading-normal); }

/* Category tiles: dark overlay with a centred white label. */
.cc-tile-label {
  color: var(--cc-white);
  font-size: 1.5rem;
  font-weight: var(--cc-regular);
  line-height: var(--cc-leading-normal);
  text-align: center;
}
@media (max-width: 600px) {
  .cc-tile-label { font-size: var(--cc-font-h4); text-transform: uppercase; }
}

/* ---------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------- */
.cc-bg-plum { background-color: var(--cc-plum); color: var(--cc-white); }
.cc-bg-grey { background-color: var(--cc-grey-bg); }
.cc-bg-tile { background-color: var(--cc-grey-tile); }

/* Footer: plum, white light text; the acknowledgement uses .cc-small. */
.cc-footer-band { background: var(--cc-plum); color: var(--cc-white); }
.cc-footer-band a { color: var(--cc-white); text-decoration: none; }
.cc-footer-band a:hover { text-decoration: underline; }

/* Form fields (newsletter): white box, grey hint text. */
input[type="email"], input[type="search"], input[type="text"] {
  font-family: var(--cc-font);
  font-weight: var(--cc-light);
}
::placeholder { color: var(--cc-grey-hint); opacity: 1; }

/* ---------------------------------------------------------------
 * Content pages (Our Story, Our Salon, FAQ, Curl Knowledge, Legal …)
 * Built 19/10/2026 with the page builder from clevercurl.com.au's
 * content. Shared rules live here (cached once) so each page's own
 * Page CSS stays small; everything a builder control can set is set
 * in the control, not here.
 * ------------------------------------------------------------- */

/* Page root: site type, light weight, no paragraph/heading rhythm
   surprises inside builder columns. */
/* Entrance animations slide elements in from the side; clipping horizontal
   overflow stops that flashing a sideways scrollbar on phones. It sits on
   <body>, not .cc-page: the page builder's frontend.js deliberately switches
   any clipping ANCESTOR of a full-width row back to overflow-x: visible (so
   row backgrounds can reach the screen edge), and it stops below <body>. */
body:has(.cc-page) { overflow-x: clip; }
.cc-page {
  font-family: var(--cc-font);
  font-weight: var(--cc-light);
  color: var(--cc-black);
  font-feature-settings: var(--cc-features);
}
.cc-page :where(.ebc-column > *) { margin-top: 0; }
.cc-page :where(.ebc-column > .ebc-textblock) { margin-left: 0; margin-right: 0; }
.cc-page :where(h1, h2, h3, h4) { margin: 0; }
.cc-page :where(p) { margin: 0; font-size: inherit; line-height: inherit; }
.cc-page :where(p + p, ul + p, p + ul, ol + p, p + ol, p + h3, p + h4) { margin-top: 0.9em; }
.cc-page :where(ul, ol) { margin: 0; padding-left: 1.3em; }
.cc-page :where(li + li) { margin-top: 0.1em; }
.cc-page :where(a) { color: inherit; text-decoration: none; }
.cc-page :where(a:hover) { color: var(--cc-plum); }
.cc-page :where(.ebc-image) { line-height: 0; }
.cc-page :where(strong) { font-weight: var(--cc-medium); }
/* Deep links (#aus-made, #no-poo …) land below the sticky header. */
.cc-page :where([id]) { scroll-margin-top: 110px; }

/* Hero: a priority Image element stretched behind the heading and intro,
   under a dark tint so white text reads on any photo. The row is pulled up
   under the transparent desktop nav (the header is transparent at scroll 0
   from 1100px; the builder's own margin control covers 1280px up). */
.cc-page .cc-hero { position: relative; isolation: isolate; }
.cc-page .cc-hero .ebc-column { position: static; }
.cc-page .cc-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.cc-page .cc-hero-photo .ebc-image__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.cc-page .cc-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* no tint unless the page sets one (the original's overlays, per row) */
  background: var(--cc-hero-tint, transparent);
  pointer-events: none;
}
/* A column with its own background photo (same technique, the column is the box). */
.cc-page .ebc-column.cc-bg,
.cc-page .cc-hero .ebc-column.cc-bg { position: relative; isolation: isolate; }
/* Page title and intro over the photo: a comfortable measure, centred. */
.cc-page .cc-hero__text { max-width: 820px; margin-left: auto; margin-right: auto; }

/* A section heading with the source site's short rule under it. */
.cc-page .cc-rule::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--cc-plum);
}
.cc-page .cc-rule-l::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 10px 0 0;
  background: var(--cc-plum);
}
.cc-page .cc-rule--white::after { background: var(--cc-white); }

/* Buttons built from the Button element read in capitals like .cc-btn. */
.cc-page .ebc-button.cc-btn-o,
.cc-page .ebc-button.cc-btn-s,
.cc-page .ebc-button.cc-btn-w { text-transform: uppercase; letter-spacing: 0.02em; }

/* Square media (team cards) keeps its shape while it loads. */
.cc-page .cc-square .ebc-image__img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }

/* Team cards: name and role under the photo. */
.cc-page .cc-card-role { color: #555; }

/* Fact cards (Refill your bottles): a soft grey tile. */
.cc-page .cc-fact { border-radius: 10px; }

/* Quotes (education testimonials). */
.cc-page .cc-quote p { font-style: italic; }
.cc-page .cc-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--cc-font-small); }

/* Class date tables (education): city, dotted leader, date — like the
   original's price list. */
.cc-page .cc-dates table { width: 100%; }
.cc-page .cc-dates tr { display: flex; align-items: baseline; }
.cc-page .cc-dates td { border: 0 !important; padding: 0 0 16px !important; background: none !important; line-height: 1.333; font-weight: var(--cc-regular); }
.cc-page .cc-dates tr:last-child td { padding-bottom: 10px !important; }
@media (max-width: 1279px) { .cc-page .cc-dates td { font-size: 16px; line-height: 19px; } }
.cc-page .cc-dates td:first-child { display: flex; flex: 1 1 auto; align-items: baseline; text-transform: uppercase; }
.cc-page .cc-dates td:first-child::after { content: ""; flex: 1 1 auto; margin: 0 10px; border-bottom: 1px dotted rgba(255, 255, 255, 0.45); }
.cc-page .cc-dates td:last-child { flex: 0 0 auto; text-align: right; white-space: nowrap; }

/* Legal pages: a readable measure for long text. */
.cc-page .cc-legal { max-width: 860px; margin-left: auto; margin-right: auto; }
.cc-page .cc-legal :where(h3) { margin-top: 1.6em; margin-bottom: 0.5em; font-size: var(--cc-font-h4); font-weight: var(--cc-medium); }
.cc-page .cc-legal :where(h3:first-child) { margin-top: 0; }

/* ----------------------------------------------------------------
 * Blog posts (Curly Conversations) — styled after clevercurl.com.au's
 * post template: grey 18px copy, plum headings and links, soft-shadowed
 * pictures. The SINGLE POST template part and the imported post bodies,
 * which are plain HTML — paragraphs, headings, figures, and these
 * import-only wrappers:
 *   .cc-post-cols   image beside text (grid columns from inline style)
 *   .cc-post-pair   two photos side by side (before / after)
 *   .cc-post-boxes  picture + caption cards (gift packs, before / after)
 *   .cc-fs-xl / .cc-fs-l / .cc-caption  the source's larger / smaller text
 * ---------------------------------------------------------------- */
.cc-page .cc-post-hero { --cc-shadow: 0 0 30px rgba(0, 0, 0, 0.15); }
.cc-page .cc-post-hero__img .ebc-pfi,
.cc-page .cc-post-hero__img .ebc-pfi__img { display: block; width: 100%; height: 100%; }
.cc-page .cc-post-hero__img .ebc-pfi__img { object-fit: cover; box-shadow: var(--cc-shadow); }
.cc-page .cc-post-body { letter-spacing: -0.1px; }
.cc-page .cc-post-body :where(p, ul, ol) { margin: 0 0 12px; }
.cc-page .cc-post-body :where(ul, ol) { padding-left: 1.5em; }
.cc-page .cc-post-body :where(li + li) { margin-top: 0; }
.cc-page .cc-post-body :where(h2) { margin: 0 0 20px; font-size: 30px; font-weight: var(--cc-medium); line-height: 1.2; color: var(--cc-black); }
.cc-page .cc-post-body :where(h3, h4) { margin: 0 0 12px; font-size: 20px; font-weight: var(--cc-regular); line-height: 1.3; color: var(--cc-plum); }
.cc-page .cc-post-body :where(* + h2) { margin-top: 30px; }
.cc-page .cc-post-body :where(* + h3, * + h4) { margin-top: 22px; }
.cc-page .cc-post-body :where(a) { color: #b48091; text-decoration: none; }
.cc-page .cc-post-body :where(a:hover) { color: var(--cc-plum); text-decoration: underline; }
.cc-page .cc-post-body :where(strong) { color: inherit; }
.cc-page .cc-post-body { --cc-fs-xl: 26px; --cc-lh-xl: 1.23; --cc-fs-l: 21px; --cc-lh-l: 1.3; --cc-fs-caption: 14px; --cc-lh-caption: 1.45; }
.cc-page .cc-post-body .cc-caption { text-align: center; }
.cc-page .cc-post-body :where(figure, .cc-post-cols, .cc-post-pair, .cc-post-boxes, .ebc-video) { margin: 20px 0 30px; }
.cc-page .cc-post-body :where(figure img) { display: block; width: 100%; height: auto; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); }
.cc-page .cc-post-body :where(figure a) { display: block; }
.cc-page .cc-post-body :where(hr) { margin: 24px 0; border: 0; border-top: 1px solid var(--cc-grey-pill); }
.cc-page .cc-post-body :where(blockquote) { margin: 0 0 12px; padding-left: 1em; border-left: 3px solid var(--cc-plum); font-style: italic; }
.cc-page .cc-post-body .cc-post-cols { display: grid; gap: 30px; align-items: start; }
.cc-page .cc-post-body .cc-post-col > :where(*) { margin-top: 0; }
.cc-page .cc-post-body .cc-post-col > :where(* + *) { margin-top: 12px; }
.cc-page .cc-post-body .cc-post-col > :where(figure) { margin-bottom: 0; }
.cc-page .cc-post-body .cc-post-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-page .cc-post-body .cc-post-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 10px; }
.cc-page .cc-post-body :where(.cc-post-pair figure, .cc-post-boxes figure) { margin: 0; }
.cc-page .cc-post-body .cc-post-box img { margin-bottom: 15px; }
.cc-page .cc-post-body .cc-post-box figcaption strong { display: block; margin: 0 0 20px; font-size: 20px; font-weight: var(--cc-regular); line-height: 1.3; color: var(--cc-plum); }
.cc-page .cc-post-body .cc-post-box figcaption p { margin: 0; }
/* Side-by-side pictures sit only 10px apart, and a later picture's shadow
   paints over the one before it. Each shadow stops halfway across the gap
   (5px), so neither lies over its neighbour; the two halves meet evenly. */
.cc-page .cc-post-body :where(.cc-post-pair, .cc-post-boxes--pair) > :nth-child(odd) img { clip-path: inset(-40px -5px -40px -40px); }
.cc-page .cc-post-body :where(.cc-post-pair, .cc-post-boxes--pair) > :nth-child(even) img { clip-path: inset(-40px -40px -40px -5px); }
@media (min-width: 601px) {
  .cc-page .cc-post-body .cc-post-boxes > :nth-child(odd) img { clip-path: inset(-40px -5px -40px -40px); }
  .cc-page .cc-post-body .cc-post-boxes > :nth-child(even) img { clip-path: inset(-40px -40px -40px -5px); }
}
.cc-page .cc-post-body .ebc-video { box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); }
/* Prev / Next (right-aligned, like the original). */
.cc-page .ebc-post-nav { display: flex; justify-content: flex-end; gap: 28px; text-transform: uppercase; }
.cc-page .ebc-post-nav a { color: inherit; text-decoration: none; }
.cc-page .ebc-post-nav a:hover { color: var(--cc-plum); }
.cc-page .ebc-post-nav__arrow { color: #c8c8c8; font-size: 1.3em; line-height: 1; vertical-align: -0.08em; }
/* Recent Posts sidebar: a text-only list. */
.cc-page .cc-post-recent .ebc-dc-tile { box-shadow: none; }

/* Phones. */
@media (max-width: 600px) {
  .cc-page :where([id]) { scroll-margin-top: 90px; }
  /* Post bodies: one column; photo pairs and two-up cards stay side by side. */
  .cc-page .cc-post-body .cc-post-cols { grid-template-columns: 1fr !important; gap: 20px; }
  .cc-page .cc-post-body .cc-post-boxes:not(.cc-post-boxes--pair) { grid-template-columns: 1fr; }
  .cc-page .cc-post-body :where(h2) { font-size: 24px; }
  .cc-page .cc-post-body { --cc-fs-xl: 22px; --cc-fs-l: 19px; }
  .cc-page .ebc-post-nav { font-size: 16px; }
}

/* ---------------------------------------------------------------
 * Patterns used by the pages rebuilt from the original layouts
 * (19/10/2026): the original's own sizes, colours and spacing come
 * from each element's controls; these only cover what no control does.
 * ------------------------------------------------------------- */

/* Button weights (the Button element has bold on/off only). */
.cc-page .ebc-button.cc-w200 { font-weight: var(--cc-light); }
.cc-page .ebc-button.cc-w300 { font-weight: var(--cc-regular); }
.cc-page .ebc-button.cc-w500 { font-weight: var(--cc-medium); }
.cc-page .ebc-button.cc-w700 { font-weight: var(--cc-bold); }

/* Flip card: the front is the column; the back slides up over it on hover
   or focus (keyboard), like the original's flip boxes. */
.cc-page .ebc-column.cc-flip { position: relative; overflow: hidden; }
.cc-page .cc-flip .cc-flip-back {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0 !important;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-size: cover;
  background-position: center;
  transform: translateY(100%);
  transition: transform .5s ease;
}
.cc-page .cc-flip:hover .cc-flip-back,
.cc-page .cc-flip:focus-within .cc-flip-back { transform: none; }
.cc-page .cc-flip .cc-flip-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .cc-page .cc-flip .cc-flip-back { transition: none; }
}

/* Testimonials (rotating carousel): italic quote, the name under it. */
.cc-page .cc-quotes .cc-quote-text { font-style: italic; }
.cc-page .cc-quotes .cc-quote-name { margin-top: 18px; }
.cc-page .cc-quotes .wccs-slide-text { font-size: 18px; line-height: 24px; font-weight: var(--cc-regular); letter-spacing: -0.1px; }
@media (max-width: 1279px) { .cc-page .cc-quotes .wccs-slide-text { font-size: 16px; line-height: 19px; } }

/* Video poster play button: the original's white ring rather than YouTube's. */
.cc-page .ebc-video__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid #fff; border-radius: 50%; }
.cc-page .ebc-video__play svg { display: none; }
.cc-page .ebc-video__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.cc-page .ebc-video__facade:hover .ebc-video__play { background: rgba(255, 255, 255, 0.2); transform: none; }

/* Background video (the original's Elementor background videos): the clip
   covers its box like a background image — cropped, no controls, not
   clickable — over the poster photo, which shows until it plays. */
.cc-page .cc-bgvid .ebc-video__frame { padding-bottom: 0 !important; container-type: inline-size; background: #000 center / cover no-repeat; }
.cc-page .cc-bgvid .ebc-video__frame iframe {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  height: max(100%, 56.25cqw) !important; pointer-events: none;
}