/*
 Theme Name:   Maison Child
 Theme URI:    https://sklepmeblowy.smmtesting.pl
 Description:  Child theme of Maison. All site-specific customizations (hero video, full-width image sections, product hover effects, typography, global styling) live here so parent theme updates never wipe them out.
 Author:       Maison Studio
 Template:     maison
 Version:      1.0.1785800210
 Text Domain:  maison-child
*/

/* Task 2: full-width image sections (no crop, proportional scale) */
.section-full-width-image {
  line-height: 0;
}
.section-full-width-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* Task 3: product hover-zoom intensity + new product gallery grid */
.product-card__image-wrap:hover .product-card__img {
  transform: scale(1.1);
}

.section-product-gallery {
  padding: var(--sp-16, 6rem) 0;
}
.section-product-gallery .gallery-header {
  text-align: center;
  margin-bottom: var(--sp-8, 2.5rem);
}
.section-product-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4, 1.25rem);
}
.section-product-gallery .gallery-item {
  border-radius: 2px;
}


/* ============================================================
   TEMP FONT — Akira Expanded (Task 4)
   Source: dafont.com demo build, free for PERSONAL USE ONLY.
   Client must purchase the full license before commercial launch:
   https://creativemarket.com/typologic/4868098-Akira-Expanded
   Single @font-face below — when the licensed files arrive, just
   swap the src url() (and add the extra weight/style files if the
   licensed family includes more than one), nothing else changes.
   Demo font glyph set covers basic Latin only (A-Z, a-z, 0-9,
   punctuation) — no Polish diacritics (a...z with accents), so
   those fall back to Syncopate/sans-serif automatically per-glyph.
   ============================================================ */
@font-face {
  font-family: 'Akira Expanded';
  src: url('assets/fonts/akira-expanded.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --ff-display: 'Akira Expanded', 'Syncopate', sans-serif;
}

/* .hero-title previously hardcoded a dead 'Barlow' reference (the font
   was never loaded anywhere, so it silently fell back to --ff-display
   anyway) — dropping it so the site font swap above applies cleanly. */
.hero-title {
  font-family: var(--ff-display);
}

/* ============================================================
   TEMP FONT — Akira Expanded, SITE-WIDE (Task 4 corrected scope)
   Client confirmed: applies everywhere (headings, body copy,
   product descriptions, footer, legal pages) — no exceptions.
   The parent theme's main.css has two earlier dead-font experiments
   still wired in with !important ('Barlow' and 'Tondu' — neither
   font file actually exists on the server, comments even say
   "SITE-WIDE FONT: Akira Expanded everywhere", so this was almost
   certainly Akira Expanded originally before an old find-and-replace
   pass swapped the literal font name). Rather than edit the parent
   theme, this rule uses deliberately higher CSS specificity
   (four chained [class] attribute selectors) so it wins over all of
   that regardless of source order. Icon-font elements are excluded
   so icon glyphs don't get overridden.
   ============================================================ */
:root {
  --ff-serif:   'Akira Expanded', sans-serif;
  --ff-display: 'Akira Expanded', sans-serif;
  --ff-sans:    'Akira Expanded', sans-serif;
  --ff-akira:   'Akira Expanded', sans-serif;
}

html body [class] [class] [class] [class]:not([class*="icon"]):not([class*="dashicon"]),
html body [class] [class] [class] [class] *:not([class*="icon"]):not([class*="dashicon"]),
html body,
html body * {
  font-family: 'Akira Expanded', sans-serif !important;
}
[class*="icon"], [class*="dashicon"], .dashicons {
  font-family: inherit !important;
}
/* ============================================================
   TASK 5 — Global styling matched to reference-1..5 screenshots
   Colors sampled directly from the reference PNGs (dominant-color
   check, not eyeballed): accent green #009933 (nav "HOME" label and
   "01/02/03" section numbers), page background #202120 (dark
   charcoal, distinct from the pure #000 header bar).
   The parent theme's main.css has accumulated several conflicting
   background-color !important overrides across its patch history
   (#555555, #3a3a3a, #111111 at various points) - rather than trying
   to untangle which one currently wins, this sets the reference-
   matched value with equal treatment (later in cascade + !important
   wins regardless of that history).
   ============================================================ */
:root {
  --clr-accent:    #009933;
  --clr-accent-lt: #4cb870;
}

html, body {
  background-color: #202120 !important;
}

/* Active nav link matches the reference's green "HOME" state
   (applies to whichever nav currently renders it - primary-nav is
   intentionally staying hidden per client, this covers mobile too). */
.nav-item.current-menu-item .nav-link,
.mobile-nav .nav-item.current-menu-item .nav-link {
  color: var(--clr-accent) !important;
}
.nav-link:hover,
.mobile-nav .nav-link:hover {
  color: var(--clr-accent) !important;
}
/* ============================================================
   TASK 6 (corrected) — scattered collage sections (01/02/03)
   Layout percentages measured from the reference screenshots via
   background-color thresholding + connected-component detection
   (scipy), cross-checked visually. Two touching/overlapping image
   pairs per collage couldn't be cleanly auto-separated (they touch
   in the source design) and were split by visual estimate instead
   of direct measurement.
   Folder->section mapping (1->01, 3->02, 4->03) is a PLACEHOLDER
   based on image-count match (folders have 5/4/5 images, references
   show 5/4/5 images) - swap once confirmed.
   ============================================================ */
.section-collage {
  position: relative;
  padding: 100px 0;
  background: #202120;
  overflow: hidden;
}
.collage-canvas {
  position: relative;
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1922 / 780;
}
.collage-title {
  position: absolute;
  left: 22%;
  top: 22%;
  width: 38%;
  z-index: 2;
}
.collage-number {
  display: block;
  color: var(--clr-accent);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.3rem);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.collage-heading {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 1.05;
  color: var(--clr-white, #fff);
  text-transform: uppercase;
  margin: 0;
}
.collage-item {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  background: var(--clr-bg-alt, #333);
}
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease, ease);
}
.collage-item:hover img {
  transform: scale(1.1);
}

@media (max-width: 900px) {
  .collage-canvas {
    aspect-ratio: auto;
    height: auto;
  }
  .collage-title {
    position: static;
    width: 100%;
    margin-bottom: 24px;
  }
  .collage-item {
    position: static;
    width: 100% !important;
    height: 220px !important;
    margin-bottom: 12px;
  }
}
/* ── Collage 04 ("BRING IT TO LIFE") title placement ──
   Sections 01-03 sit the title at left:22%/top:22%; in the 04 reference the
   number+heading sit much further left and higher, with the photo cluster
   filling the right two-thirds. Positions below are per-section overrides so
   01-03 are untouched. */
#collage-04 .collage-title {
  left: 7.9%;
  top: 12.7%;
  width: 36%;
}
/* ── Collage 01 title placement, measured from reference-1.png ──
   Green "01" label bbox in the reference sits at x=442,y=127 of the
   1922x827 content area => left 23.00% / top 15.36% (the shared default is
   22%/22%). Per-section override so 02/03/04 keep their own placement. */
#collage-01 .collage-title {
  left: 23.00%;
  top: 15.36%;
  width: 36%;
}
/* ============================================================
   COLLAGE HEADINGS (01-04) — force Akira Expanded at reference size
   Why !important: the parent main.css still carries two dead-font
   blocks that target bare h2 —
     h1,h2,h3,... { font-family:"Tondu",sans-serif !important }   (Tondu-Beta.ttf is 404)
     html body [class] [class] h2 { font-weight:900 !important;
                                    letter-spacing:0.02em !important }
   Bare-element selectors are weak, but !important beats a plain
   .collage-heading rule, so the heading was inheriting Tondu's
   fallback metrics (a normal-width sans) instead of the expanded face.

   Size derived from reference-1.png, not eyeballed:
     line-2 cap height 46px in a 1922-wide layout
     -> canvas renders at max 1600px, scale 1600/1922 = 0.832
     -> target cap 38.3px; Akira capHeight = 1434/2048 = 0.700em
     -> font-size 38.3 / 0.700 = 54.7px = 3.42rem
     line spacing 71px -> 59px -> line-height 59/54.7 = 1.08
     "COLLECTION" advance = 8.098em; to reach the reference's
     489px span at 54.7px needs ~0.084em tracking.
   ============================================================ */
.section-collage .collage-heading {
  font-family: 'Akira Expanded', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.4rem, 3.15vw, 3.42rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.084em !important;
  color: #fff;
  text-transform: uppercase;
}
.section-collage .collage-number {
  font-family: 'Akira Expanded', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}
/* ============================================================
   TEMP FONT — Akira Expanded, re-declared with an OTF fallback.
   The woff2 alone was resolving in CSS but not actually painting
   (file is valid: font/woff2 MIME, wOF2 magic, 105 glyphs, CFF
   intact) — so the browser was rejecting it and silently dropping
   to sans-serif. Listing the OTF as a second src makes the face
   load regardless of which container the browser accepts.
   font-weight is declared as a 100-900 range because the parent
   theme forces font-weight:900 on headings; a face declared only
   as `normal` would otherwise be synthetically emboldened.
   Later @font-face for the same family wins, so this supersedes
   the earlier single-src declaration above.
   ============================================================ */
@font-face {
  font-family: 'Akira Expanded';
  src: url('assets/fonts/akira-expanded.woff2') format('woff2'),
       url('assets/fonts/akira-expanded.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   COLLAGE SECTIONS — systemic geometry audit
   Root cause of the "spread out / too much empty space" problem was
   TWO compounding basis errors, not the individual percentages:

   1) .collage-canvas used aspect-ratio 1922/780 = 2.464. All three
      reference captures actually have a content area (below the
      sliced header) of ~1920x829 = 2.316. The canvas was ~6% too
      short for its width, squashing every vertical position.

   2) Sections 02/03/04 had their percentages computed against the
      FULL screenshot height (959px) instead of the content height
      (~829px), so every top: and height: was ~13.5% too small —
      images rendered undersized with gaps between them. Section 01
      was already recomputed on the correct basis.

   Fixing the canvas aspect here fixes the shared basis for all four
   sections at once, as requested, rather than patching each one.
   ============================================================ */
.collage-canvas {
  aspect-ratio: 1920 / 829;
}

/* Per-section title placement — measured from the green "0N" label
   bbox in each reference; the design does not use one shared
   position, so these are overrides on top of the shared default. */
#collage-02 .collage-title { left: 17.50%; top: 41.98%; width: 40%; }
#collage-03 .collage-title { left: 24.75%; top: 18.58%; width: 40%; }

/* Section 02's heading is genuinely larger in its reference than
   01/03: measured cap height 58px vs ~45px, line spacing 95px vs
   ~71px (all in the same 1920-wide basis). Shared base stays at the
   01/03 size; 02 gets the measured override. */
#collage-02 .collage-heading {
  font-size: clamp(1.7rem, 3.97vw, 4.31rem) !important;
  line-height: 1.15 !important;
}
/* Collage 04 title placement, re-read from the reference (the green "04"
   label sits further left and higher than in 01-03). Supersedes the
   earlier estimate of 7.9%/12.7%. */
#collage-04 .collage-title { left: 6.70%; top: 14.00%; width: 38%; }
/* ============================================================
   LOGO COLOUR PROTECTION (second line of defence)
   The logo is an IMAGE (white-on-transparent PNG), not text — it has
   no font-family or color property. It was rendering black because the
   parent theme inverts it in CSS, on the assumption the source art is
   black:
     .site-logo .custom-logo            { filter: brightness(0) invert(1) }
     .site-logo .custom-logo, .site-logo img
                                        { filter: invert(1) !important;
                                          mix-blend-mode: screen !important }
     .site-header img.custom-logo       { filter: invert(1) !important;
                                          mix-blend-mode: screen !important;
                                          height: 80px !important }
   The source art is now already white, so every one of those inverts it
   to black. The primary fix is inline (mu-plugin maison-logo-protect.php,
   priority PHP_INT_MAX) because an inline !important outranks any
   stylesheet !important. This rule is the backup for any code path that
   outputs the logo WITHOUT that inline style — higher specificity than all
   three rules above, and the child sheet loads after the parent.
   Do not reintroduce filter/mix-blend-mode on the logo; swap the PNG instead.
   ============================================================ */
html body .site-header .custom-logo-link img.custom-logo,
html body #site-header .custom-logo-link img.custom-logo,
html body .site-header img.custom-logo,
html body #site-header img.custom-logo,
html body .site-logo .custom-logo,
html body .site-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  max-height: 104px !important;
  max-width: none !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
/* ── Heading see-through tail ──
   Makes the trailing letters of a collage heading semi-transparent so the
   photograph behind shows through them, matching the reference comp.

   The 0.41 alpha is derived from the reference pixels rather than guessed:
   in reference-1.png those letters average luminance ~180 over a backdrop
   of ~127 (solid white would be 255). Solving
       result = backdrop * (1 - a) + 255 * a
   for result=180, backdrop=127 gives a = (180-127)/(255-127) = 0.41.

   The heading already sits above .collage-item (z-index 2 vs 1), so simply
   lowering alpha composites the photo through the glyphs — no
   background-clip:text or mix-blend-mode needed, and it stays readable on
   the dark background where no photo sits behind it. */
.collage-heading .heading-seethrough {
  opacity: 0.41;
}
/* ============================================================
   COLLAGE HEADINGS — size + inline number  (systemic, all 4 sections)

   Two defects fixed together:

   1) The "0N" label was rendering STACKED ABOVE the heading, but in every
      reference comp it sits INLINE to the left of the first word (in
      reference-1.png the green "01" occupies x442-494 and "NEW" begins at
      x511 — same baseline). Stacking it pushed the whole heading ~54px left.

   2) Because of that leftward shift, the trailing "ION" span landed only
      47.5% over the chair photograph; the remainder sat on the dark page
      background where its 0.41 alpha made it look truncated — the reported
      "text is cut off". Measured against the font's real advance widths:
          stacked  3.42rem -> ION spans 728..857px, photo starts 796px (47.5%)
          inline   4.00rem -> ION spans 846..997px                     (100%)

   Size: "COLLECTION" now occupies 35.8% of canvas width (was 30.6%; the
   reference comp is 30.5%) — deliberately a little larger than the comp per
   request. Verified against font metrics that the longest line in every
   section still clears the canvas:
       01 COLLECTION   ends  997/1600
       02 YOUR SPACE   ends 1074/1600
       03 THE MATERIAL ends 1096/1600
       04 BRING IT     ends  505/1600
   ============================================================ */
.collage-title {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  width: max-content;
  max-width: 76%;
}
.collage-number {
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}
.collage-heading {
  white-space: nowrap;
}
.section-collage .collage-heading {
  font-size: clamp(1.6rem, 4.0vw, 4.0rem) !important;
}
/* section 02's comp is proportionally larger (measured cap height 58px vs
   ~45px for 01/03 in the same 1920-wide basis) — keep that ratio */
#collage-02 .collage-heading {
  font-size: clamp(2.0rem, 5.16vw, 5.16rem) !important;
}

/* mobile: revert to stacked/wrapping so long headings don't overflow */
@media (max-width: 900px) {
  .collage-title {
    display: block;
    width: 100%;
    max-width: none;
  }
  .collage-heading {
    white-space: normal;
  }
  .collage-number {
    margin-bottom: 0.4rem !important;
  }
}
/* ============================================================
   COLLAGE HEADINGS — corrected against re-measured reference-1.png
   (content area 1922x828, header ends y=131)

   Measured from the comp:
     green "01" bbox      x442-494  y128-148
     line1 "NEW" cap      y129-172  (cap 43px)
     line2 "COLLECTION"   y200-246  (cap 46px)
     canyon image top     y176   -> "01" clears it by 28px
     sofa image top       y355   -> line2 clears it by 109px (13.16% of height)

   THREE CORRECTIONS:

   1) SIZE. Cap height 46px / Akira capHeight 0.700 = 65.7px in the 1922
      basis = 54.7px on the 1600 canvas = 3.42rem. The previous bump to
      4.0rem grew the block ~17%, which is what pushed "01" down onto the
      canyon image and line 2 down into the sofa. Reverted to the measured
      value — the comp's own spacing only works at the comp's own size.

   2) ALIGNMENT. In the comp the "01" is TOP-aligned with "NEW"
      (01 top y128 vs NEW cap top y129), not baseline-aligned.

   3) SEE-THROUGH TAIL. opacity: 0.41 could only ever dim white toward the
      backdrop — over the dark page background that renders flat grey, which
      is what was reported. Replaced with background-clip:text so the chair
      photograph is painted INTO the glyphs and the window/light texture
      shows regardless of what sits physically behind the text.
   ============================================================ */
.collage-title {
  align-items: flex-start;
  gap: 0.88%;
}
.section-collage .collage-heading {
  font-size: clamp(1.4rem, 3.42vw, 3.42rem) !important;
}
#collage-02 .collage-heading {
  font-size: clamp(1.7rem, 4.41vw, 4.41rem) !important;
}

/* real photo fill for the trailing letters */
.collage-heading .heading-seethrough {
  opacity: 1;
  background-image: url('assets/product-images/1/Le_ak_1.jpg');
  background-size: 260% auto;
  background-position: 68% 26%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
/* if the browser cannot clip a background to text, fall back to solid white
   rather than transparent — never render the letters invisible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .collage-heading .heading-seethrough {
    background: none;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    opacity: 0.55;
  }
}
/* ============================================================
   "ION" SPAN — reverted to plain solid white (safe state)

   Why the previous attempt produced image-filled rectangles rather than
   clipped letters: on an INLINE element, if background-clip:text does not
   take effect, the background image still paints normally — as a rectangle
   behind the inline fragment — while color:transparent hides the glyphs.
   The result is exactly the reported "small separate boxes" of photo, one
   per inline fragment, with no visible letterforms. That is a worse failure
   mode than no effect at all, so the effect is withdrawn until the approach
   is agreed.

   NOTE: there is no existing clip-text implementation on this site to copy.
   Both "hero" sections (BRING IT TO LIFE / NEW COLLECTION 2026) are plain
   <img> tags with the wording baked into the PNG pixels by the designer —
   verified: those <section>s contain zero text nodes, and the parent theme
   stylesheet contains zero occurrences of background-clip or
   text-fill-color.

   This rule is last in the cascade, so it supersedes both the earlier
   opacity:0.41 rule and the background-clip attempt above.
   ============================================================ */
.collage-heading .heading-seethrough {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}
/* ============================================================
   "ION" SEE-THROUGH — final, matched to Strona internetowa 1.png

   Established by magnifying the comp rather than inferring from CSS:
   in "LECTION", "LECT" renders SOLID WHITE (including where it crosses the
   pebbles photo) while "ION" shows concrete/plank texture that is spatially
   CONTINUOUS with the photograph around it — the vertical plank lines run
   through the glyphs and align with the same lines outside them.

   That continuity rules out background-clip:text, which paints an
   independently positioned copy of the image and therefore cannot line up.
   The comp is semi-transparent white composited over the photo.

   Alpha measured two independent ways, both agreeing:
     - letter band vs backdrop luminance : (180-127)/(255-127) = 0.41
     - ION region vs bare chair photo    : (150-79)/(255-79)  = 0.40

   The earlier "flat grey" was never a broken effect — it was this same
   translucent white sitting over the dark page background because the
   heading was positioned too far left. The inline-number correction moved
   "ION" onto the photograph, which is the only place the effect can read.

   Boundary note: in the comp the transition falls exactly at the chair
   photo's left edge (x=956), so the "I" straddles it — part solid, part
   textured. That is the comp's own behaviour, not a defect.

   Last in the cascade, so it supersedes the earlier background-clip attempt
   and the solid-white safe state above.
   ============================================================ */
.collage-heading .heading-seethrough {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 0.41 !important;
}
/* ============================================================
   COLLAGE HEADINGS — enlarged (3.42rem -> 5.0rem)

   Measured from the live screenshot rather than guessed. Canvas scale was
   derived from two known CSS anchors (canyon left edge 15.04%, zebra right
   edge 82.00%), giving a canvas width of 1599px vs the 1600px CSS max —
   i.e. the screenshot is 1:1, so these numbers are directly comparable:

     COLLECTION rendered  = 310px = 19.4% of canvas
     reference comp       =         30.5% of canvas
     Akira at 3.42rem     = 489px = 30.6% of canvas

   The rendered width is only 63% of what Akira's own advance widths predict,
   which means the heading is STILL falling back to a narrower font rather
   than using Akira Expanded. That is the underlying reason it reads small;
   size is being raised here to compensate for it.

   CEILING: the two-line block must clear the sofa image (top at 42.93% of
   canvas height = 297px). Block bottom by size:
       4.2rem -> 251px    5.0rem -> 279px   (18px clearance)
       4.6rem -> 265px    5.4rem -> 293px   (4px  clearance - too tight)
   5.0rem is therefore the practical maximum at the reference's title
   position. Longest line in every section still clears the canvas
   horizontally using Akira metrics (worst case): 01 ends 1140/1600.

   IF Akira ever starts loading, this will jump to ~45% of canvas width and
   should be dropped back toward 3.42rem.
   ============================================================ */
.section-collage .collage-heading {
  font-size: clamp(1.8rem, 5.0vw, 5.0rem) !important;
}
/* section 02's comp is proportionally larger (cap 58px vs ~45px) — keep ratio */
#collage-02 .collage-heading {
  font-size: clamp(2.3rem, 6.45vw, 6.45rem) !important;
}
/* ============================================================
   SECTION 02 HEADING — sized to the comp's rendered width

   Measured from Strona Internetowa 3.png (content 1920x829):
     "ENHANCE" spans 598px = 31.1% of canvas
     cap height 58px  ->  implies 4.32rem if Akira Expanded were rendering

   But the heading is still falling back to a narrower face: measured on the
   live page, glyph runs come out at 63% of the width Akira's own advance
   tables predict. To reach the comp's 31.1% width with that fallback:

     target 498px on a 1600 canvas
     Akira "ENHANCE" advance = 6.85em
     4.54rem  if Akira loads
     7.21rem  with the current fallback   <- used here

   Fit verified against section 02's geometry (title top 41.98% = 290px,
   canvas height 691px):
     7.20rem -> block bottom 546/691, "YOUR SPACE" ends 1401/1600  OK
     8.60rem -> 587/691 and 1603/1600                              too tight

   CAVEAT: this matches the comp's WIDTH by oversizing, so cap height lands
   ~1.5x the comp's 58px. If Akira Expanded ever loads, drop this back to
   4.32rem (the cap-accurate value) — otherwise it will be far too large.
   ============================================================ */
#collage-02 .collage-heading {
  font-size: clamp(2.4rem, 7.2vw, 7.2rem) !important;
}
/* ============================================================
   SECTION 02 — heading overlaps the images, rotated, blended

   NOTE ON STACKING CONTEXTS (this is why the markup was reordered):
   mix-blend-mode only blends an element against the backdrop within its
   nearest stacking context, and ANY stacking context isolates it. The
   title carried z-index:2, and adding transform:rotate() creates one too —
   either would have made the blend composite against empty transparency,
   i.e. look like nothing happened.

   So: z-index is removed from the title AND the items in this section, the
   title is moved last in the DOM (paint order = document order, so it still
   sits on top of the images), and BOTH transform and mix-blend-mode are put
   on the heading itself — an element's own stacking context isolates its
   descendants, not the element's own blending.

   BLEND CHOICE: 'difference' rather than 'overlay'. Against the dark page
   background (#202120) difference keeps white legible (255-32 = 223), while
   overlay against a dark backdrop drives it toward black — invisible where
   the text is NOT over an image. Swap the one property below if the client
   prefers overlay and accepts that trade.
   ============================================================ */
#collage-02 {
  position: relative;
  overflow: visible;
}
#collage-02 .collage-canvas {
  position: relative;
  overflow: visible;
}
/* no stacking context on these two, or the blend gets isolated */
#collage-02 .collage-title {
  z-index: auto;
}
#collage-02 .collage-item {
  z-index: auto;
}
#collage-02 .collage-heading {
  font-size: clamp(2.6rem, 8vw, 8rem) !important;
  transform: rotate(-5deg);
  transform-origin: left center;
  mix-blend-mode: difference;
  color: #fff !important;
  position: relative;
}
#collage-02 .collage-number {
  mix-blend-mode: normal;
}

/* mobile: drop the rotation and the blend, re-clip the section */
@media (max-width: 900px) {
  #collage-02 {
    overflow: hidden;
  }
  #collage-02 .collage-heading {
    transform: none;
    mix-blend-mode: normal;
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
  }
}
/* ============================================================
   SECTION 02 HEADING — clean overlap, no blend  (supersedes the
   mix-blend-mode attempt above)

   WHY NO PARTIAL BLEND: mix-blend-mode applies to a whole element against
   everything in its stacking context. CSS has no way to scope it to only
   the sub-region where a photo sits behind the text — that would require a
   duplicated heading plus an image-aligned mask. Per instruction, the
   simpler route is taken instead: solid light text, overlapping via
   z-index, no blending at all.

   Removing the blend also removes the compositing layer that was softening
   the glyph edges, so the text rasterises normally again.

   DELIBERATELY NOT SET (per instruction: do not change font rendering):
     no filter, no -webkit-font-smoothing, no text-rendering, no opacity,
     no text-shadow, no will-change, no per-letter/per-word transforms.

   font-size / font-weight / line-height are NOT redeclared for desktop —
   they keep whatever the existing rules give (currently 8.0rem via
   #collage-02 .collage-heading, weight 900, line-height 1.08).

   ROTATION is applied once, to .collage-title, so the "02" label and both
   lines rotate together as a single rigid block.
   ============================================================ */
#collage-02 {
  position: relative;
  overflow: visible;
}
#collage-02 .collage-canvas {
  position: relative;
  overflow: visible;
}
/* images below, heading above */
#collage-02 .collage-item {
  z-index: 1;
}
#collage-02 .collage-title {
  z-index: 5;
  transform: rotate(-4deg);
  transform-origin: left center;
}
/* text itself: solid, unblended, undistorted */
#collage-02 .collage-heading {
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  transform: none !important;
  text-shadow: none !important;
}
#collage-02 .collage-number {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* tablet: halve the rotation, keep the overlap */
@media (max-width: 1200px) {
  #collage-02 .collage-title {
    transform: rotate(-2deg);
  }
}

/* mobile: no rotation, clip the section, smaller type */
@media (max-width: 900px) {
  #collage-02 {
    overflow: hidden;
  }
  #collage-02 .collage-title {
    transform: none;
  }
  #collage-02 .collage-heading {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
  }
}
/* Section 03 is now a single pre-rendered image (client supplied).
   Full-bleed, proportional, no crop — same treatment as the other
   baked design images on this page. */
.section-collage-image {
  line-height: 0;
  background: #202120;
}
.section-collage-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   PER-PHOTO HOVER ZOOM ON THE FLAT SECTION IMAGES (01/02/03)

   Sections 01-03 are single pre-rendered PNGs, so they have no individual
   photo elements to animate the way section 04's .collage-item does.
   Each photo therefore gets a "sprite window": a box positioned over it
   carrying the SAME PNG as a background, with background-size enlarged and
   background-position offset so that exactly that one photo fills the box.

   Because the overlay draws the same pixels from the same file at the same
   place, the resting appearance is unchanged - only :hover scales it.
   Rect geometry comes from the measurements taken off the reference comps,
   shifted by each flat file's crop offset (01: -11px, 02: -2px, 03: -4px).

   scale(1.1) and the easing match .collage-item:hover img in section 04 so
   all four sections behave identically.
   ============================================================ */
.section-collage-image {
  position: relative;
}
.section-collage-image > img {
  display: block;
  width: 100%;
  height: auto;
}
.cimg-hotspot {
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.cimg-zoom {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  transform-origin: center center;
  transition: transform 0.7s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.cimg-hotspot:hover .cimg-zoom {
  transform: scale(1.1);
}
/* touch devices: no hover state, drop the overlays entirely */
@media (hover: none) {
  .cimg-hotspot { display: none; }
}

/* ============================================================
   SECTION 04 — scaled up ~12.5%

   Every image in this section is positioned in percentages of
   .collage-canvas, so widening the canvas scales the entire composition
   proportionally: relative positions, sizes and overlaps are preserved
   exactly, nothing needs repositioning.

     canvas: 92% / max 1600px  ->  96% / max 1800px   (1800/1600 = 1.125x)

   The heading is the one thing that does NOT scale with the canvas — its
   size is viewport-based (vw), not canvas-relative — so it gets the same
   1.125x factor applied directly, otherwise the type would stay put while
   the photos grew and the composition would drift:

     5.0rem * 1.125 = 5.625rem

   Scoped to #collage-04 only: sections 01-03 are flat images now and are
   unaffected either way, but scoping keeps this correct if any of them is
   ever reverted to its CSS-built markup.
   ============================================================ */
#collage-04 .collage-canvas {
  width: 96%;
  max-width: 1800px;
}
#collage-04 .collage-heading {
  font-size: clamp(2.0rem, 5.6vw, 5.625rem) !important;
}
/* ============================================================
   SECTION 04 — second modest scale-up

   The canvas width resolves as min(<pct>vw, <max-width>). At a 1920px
   viewport the previous 96% / 1800px meant 96vw = 1843px, so the 1800px
   max-width was the binding constraint — raising max-width alone would
   have gained almost nothing. Both values are lifted together:

     96% / max 1800px  ->  100% / max 2000px

   At 1920px viewport that is 1800 -> 1920 = 1.0667x (~7% larger).
   On narrower screens the percentage binds instead, so the section simply
   tracks the viewport, as before.

   Heading gets the same 1.0667 factor, since its size is viewport-based
   rather than canvas-relative and would otherwise stay put while the
   photos grew:

     5.625rem * 1.0667 = 6.0rem
   ============================================================ */
#collage-04 .collage-canvas {
  width: 100%;
  max-width: 2000px;
}
#collage-04 .collage-heading {
  font-size: clamp(2.1rem, 6.0vw, 6.0rem) !important;
}
/* ============================================================
   GAP BETWEEN THE FULL-WIDTH IMAGE AND SECTION 02

   The "New Collection 2026" full-width image butts directly against
   collage-02 with no separation, so the concrete floor at the bottom of one
   runs straight into the top of the next.

   Margin rather than padding: both the section and the page background are
   #202120, so the gap reads as continuous background with no seam. Fluid so
   it scales down on smaller screens instead of leaving a large dead band.
   ============================================================ */
#collage-02 {
  margin-top: clamp(40px, 5vw, 96px);
}
/* ============================================================
   GAP ABOVE SECTION 02 — paint it in the page background colour

   The gap was rendering lighter than the page. Cause: it was a MARGIN, and
   margins sit OUTSIDE the element, so the colour that shows through is the
   nearest painted ancestor. Here that is the main wrapper, which the parent
   theme forces to a lighter grey:

     .site-main, main, #content, .content-area, .woocommerce
       { background-color: #3a3a3a !important }

   html/body are #202120 (child rule), but .site-main sits between body and
   the sections and paints over it.

   Switching to PADDING puts the space INSIDE the section, where it is
   painted by that section's own background (.section-collage-image is
   #202120). Same visual gap, correct colour, and no need to recolour
   .site-main globally — other sections may depend on that grey.
   ============================================================ */
#collage-02 {
  margin-top: 0;
  padding-top: clamp(40px, 5vw, 96px);
  background-color: #202120;
}
/* ============================================================
   GAP ABOVE SECTION 02 — moved out of the section (bug fix)

   The previous attempt put the gap on #collage-02 as padding-top. That
   broke the section: absolutely-positioned children resolve against their
   ancestor's PADDING box, so every .cimg-hotspot shifted down AND its
   percentage top/height started resolving against (image height + padding).
   The sprite windows drifted off their photos and showed the wrong slice of
   the PNG — the "crashed" appearance.

   Margin was no better: it sits outside the element, exposing the parent
   theme's lighter .site-main wrapper (#3a3a3a).

   A standalone spacer element solves both: it is outside both sections, so
   neither box changes and the overlays stay aligned, and it paints its own
   #202120 so the gap matches the page background.
   ============================================================ */
.section-gap {
  height: clamp(40px, 5vw, 96px);
  background-color: #202120;
  line-height: 0;
  font-size: 0;
}

/* undo the padding/margin that broke the overlays */
#collage-02 {
  margin-top: 0;
  padding-top: 0;
}
/* ============================================================
   HEADER NAV — remove the resize flash on load

   A footer script re-sizes the nav AFTER first paint:

     function fixNav() {
       document.querySelectorAll('.site-header .nav-link span')
         .forEach(function (s) {
           s.style.setProperty('font-size',     '28px',   'important');
           s.style.setProperty('white-space',   'nowrap', 'important');
           s.style.setProperty('letter-spacing','0.05em', 'important');
         });
     }
     window.addEventListener('load', fixNav);
     window.addEventListener('load', function(){
       setTimeout(fixNav, 500); setTimeout(fixNav, 1500);
     });

   The browser paints the nav at the stylesheet size first, then the script
   overwrites it on load (and again at 500ms and 1500ms) — that visible jump
   is the reported flash.

   The script writes INLINE !important, which outranks every stylesheet, so
   it cannot be overridden from CSS. Instead these rules set exactly the
   same three values the script settles on, so first paint already matches
   the end state: the script's later writes then change nothing and the
   flash disappears.

   Values are copied verbatim from the script - appearance is unchanged.
   The script itself is deliberately left in place; it is now a no-op
   visually, and removing it would risk other behaviour it may carry.
   ============================================================ */
html body .site-header .nav-link span,
html body #site-header .nav-link span {
  font-size: 28px !important;
  white-space: nowrap !important;
  letter-spacing: 0.05em !important;
}