/*
Theme Name: Ilé Care
Theme URI: https://ile.care
Author: Ilé Care
Description: Block theme for ile.care. Tokens are theme.json; copy comes from content/copy/.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ile-care
*/

/* Gutters follow cowboy.com: --gutter 20px, stepping to 40px. Symmetric, no cap. */
:root{ --gut:1.25rem;
  /* One measure for every block of left-aligned text. It is the rendered width
     of "Made to be kept, not replaced." — that heading is set nowrap, and its
     width is 12.22x its font size, so the measure tracks it at any viewport. */
  --stmt-size:clamp(1.5rem, 1rem + 2.2vw, 3.25rem);
  --measure:calc(12.22 * var(--stmt-size));
  --amber-mix:.42;   /* hero amber layer — one number, tune this */
  --header-h:58px; --usp-h:76px; --contact-d:44px; } /* Ajen run taller, Cowboy shorter; this sits between */
@media (min-width:48rem){ :root{ --gut:2.5rem; --header-h:72px; --usp-h:88px; --contact-d:46px; } }

/* WordPress does not set border-box globally; without this, padding is added
   to height and .ile-hero comes out one header taller than the viewport. */
*, *::before, *::after{ box-sizing:border-box; }
body{ -webkit-font-smoothing:antialiased; }

/* WP's block flow puts a 24px margin above the first block. The hero must
   start at y=0 or it is not one viewport tall. */
.wp-site-blocks > main{ margin-block-start:0; }
.wp-site-blocks > main > .ile-hero:first-child{ margin-block-start:0; }

/* The header is fixed, so every page except the one that opens with the hero
   has to reserve its height or the first line slides under the navigation. */
.wp-site-blocks > main{ padding-top:calc(var(--header-h) + 1px); }
/* The content now comes through wp:post-content, so the hero is a grandchild. */
.wp-site-blocks > main:has(> .ile-hero:first-child),
.wp-site-blocks > main:has(> .wp-block-post-content > .ile-hero:first-child){ padding-top:0; }

/* WordPress puts a 24px block gap between the sections once they live in
   post_content. The sections carry their own rhythm. */
.wp-block-post-content{ --wp--style--block-gap:0; }
.wp-block-post-content > *{ margin-block:0; }
.wp-block-post-content > * + *{ margin-block-start:0; }

/* ── blocks may not exceed 90vh ────────────────────────────────────
   Capped only where the viewport is tall enough to hold the content.
   Below 60rem the content flows, because a hard cap clips text.      */
@media (min-width:60rem){
  .ile-block:not(.ile-hero){ max-height:90vh; overflow:hidden; }
}
.ile-block{ display:flex; align-items:center; }
/* WordPress gives headings a 43px margin on both sides. Inside a capped block
   that is 87px of nothing, which is what pushed section 2 past its own cap. */
.ile-block h2{ margin-block:0 1.5rem; }
.ile-block > .wp-block-group{ padding-block:2.5rem; }
.ile-block > .wp-block-group{ width:100%; }

/* ── header, Ajen order: mark · menu · language, login, cart ─────── */
.ile-header{ position:fixed; inset:0 0 auto 0; z-index:40;
  background:transparent; border-bottom:1px solid transparent;
  transition:transform .38s ease, background-color .3s ease, border-color .3s ease; }
.ile-header.is-pinned{
  background:color-mix(in oklab, var(--wp--preset--color--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom-color:color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent); }
.ile-header.is-hidden{ transform:translateY(-100%); }
.ile-bar{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
  height:var(--header-h); padding-inline:var(--gut); }
.ile-nav, .ile-utils{ line-height:1; }
.ile-mark{ display:block; height:24px; color:var(--wp--preset--color--ink); }
@media (min-width:48rem){ .ile-mark{ height:30px; } }
.ile-mark svg{ height:100%; width:auto; display:block; fill:currentColor; }
.ile-nav{ display:flex; gap:clamp(1.25rem,2.2vw,2.25rem); font-size:.875rem; letter-spacing:.03em; }
/* The underline must not take part in layout, or it pushes the text up off
   the centre line the logo sits on. Drawn as a pseudo-element instead.
   Anchored to the shared centre line, not to each box's bottom edge — the
   utils run at a smaller size, so a bottom offset would put them 1px apart. */
.ile-nav a, .ile-utils a, .ile-lang b{ text-decoration:none; position:relative; padding:0; border:0;
  display:inline-block; line-height:1; }
.ile-nav a::after, .ile-utils a::after, .ile-lang b::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% + .72rem); bottom:auto;
  height:1px; background:currentColor; transition:opacity .2s ease; }
.ile-nav a::after, .ile-utils a::after{ opacity:0; }
.ile-nav a:hover::after, .ile-utils a:hover::after{ opacity:1; }
.ile-lang b::after{ opacity:1; }
.ile-utils{ display:flex; gap:clamp(.9rem,1.6vw,1.5rem); align-items:center; margin-left:auto;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }

.ile-lang b{ font-weight:400; }
.ile-lang span{ color:var(--wp--preset--color--muted); }
.ile-cart{ display:inline-flex; align-items:baseline; gap:.28em; }
.ile-cart .count{ font-size:.6875rem; line-height:1; }
.ile-cart[data-count="0"] .count{ display:none; }
@media (max-width:60rem){ .ile-nav{ display:none; } }

/* ── hero video + scrim. Text over video needs the scrim to hold 4.5:1 ── */
.ile-hero{ position:relative; overflow:hidden;
  height:100vh; height:100svh; max-height:none;
  display:flex; align-items:center;
  /* top clears the fixed header, bottom clears the usp strip */
  padding-top:var(--header-h); padding-bottom:5.5rem; }
.ile-hero video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; }
/* amber over the footage: multiply warms the concrete without hiding it */
.ile-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--wp--preset--color--amber-lit);
  mix-blend-mode:multiply; opacity:var(--amber-mix); }
.ile-hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    /* No bottom fade on the hero itself: the video runs down to the strip,
       and the strip separates them with its own wash and a rule. */
    /* top band, so the header's right-hand items stay legible over the video */
    linear-gradient(to bottom,
      color-mix(in oklab, var(--wp--preset--color--paper) 86%, transparent) 0,
      color-mix(in oklab, var(--wp--preset--color--paper) 30%, transparent) calc(var(--header-h) * 1.4),
      transparent calc(var(--header-h) * 2.2)),
    linear-gradient(92deg,
      var(--wp--preset--color--paper) 0%,
      color-mix(in oklab, var(--wp--preset--color--paper) 92%, transparent) 34%,
      color-mix(in oklab, var(--wp--preset--color--paper) 46%, transparent) 62%,
      transparent 100%); }
@media (max-width:60rem){
  .ile-hero::after{ background:color-mix(in oklab, var(--wp--preset--color--paper) 84%, transparent); }
}
.ile-hero > .wp-block-group{ position:relative; z-index:3; }

/* ── three usps along the foot of the hero, cowboy's device ── */
.ile-usps{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  margin:0; /* bottom:0 positions the margin box — a ul margin lifts it off the floor */
  min-height:var(--usp-h); align-items:center;
  /* nothing behind the strip: the video shows through */
  background:none;
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  padding:0 var(--gut);
  border-top:0;
  border-bottom:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 16%, transparent);
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
/* The top rule runs to the text measure, not to the edge of the page. Drawn as
   a pseudo-element so it stays out of the grid that lays out the three items. */
.ile-usps::before{ content:""; position:absolute; top:0; left:var(--gut); right:var(--gut);
  height:1px; background:color-mix(in oklab, var(--wp--preset--color--ink) 16%, transparent); }
.ile-usps li{ list-style:none; white-space:nowrap; }

/* Below 48rem the three lines stack and eat a third of the screen, so the
   strip becomes a marquee instead: one track, duplicated, translated forever. */
@media (max-width:47.99rem){
  .ile-usps{ display:block; overflow:hidden; padding-inline:0; }
  .ile-marquee{ display:flex; width:max-content; will-change:transform;
    animation:ile-slide 26s linear infinite; }
  .ile-marquee > ul{ display:flex; margin:0; padding:0; list-style:none; }
  .ile-usps li{ padding-inline:1.25rem; font-size:.6875rem; }
  .ile-usps li::after{ content:"·"; margin-left:1.25rem; opacity:.45; }
  @keyframes ile-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
}
/* desktop: contents collapses the wrappers so the three li become grid items */
@media (min-width:48rem){
  .ile-marquee{ display:contents; }
  .ile-marquee > ul{ display:contents; margin:0; padding:0; list-style:none; }
  .ile-marquee > ul:last-child{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .ile-marquee{ animation:none; } }
/* Items must begin at 0 / 30 / 60 % of the content box. Four equal columns
   start them at 0/25/50, so the tracks are 30% 30% 40% instead. The last
   track is wide because the contact button sits at its right edge. */
@media (min-width:48rem){
  .ile-usps{ display:grid; grid-template-columns:33% 33% 34%; gap:0; }
}

/* ── contact, always bottom right ── */
.ile-contact{ position:fixed; right:var(--gut);
  bottom:calc((var(--usp-h) - var(--contact-d)) / 2); z-index:50;
  width:var(--contact-d); height:var(--contact-d); border-radius:50%;
  display:grid; place-items:center;
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper);
  border:0; cursor:pointer; text-decoration:none;
  box-shadow:0 2px 14px rgba(23,21,15,.18);
  transition:transform .2s ease; }
.ile-contact:hover{ transform:translateY(-2px); }
.ile-contact svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }

/* ── amber lives only inside image frames ── */
.ile-img{ position:relative; overflow:hidden; background:var(--wp--preset--color--amber); }
.ile-img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(101deg,transparent 36%,rgba(255,255,255,.22) 45%,transparent 54%); }
.ile-img-1{ background:linear-gradient(168deg,var(--wp--preset--color--amber-clear),var(--wp--preset--color--amber-lit) 58%,var(--wp--preset--color--amber-thin)); }
.ile-img-2{ background:linear-gradient(168deg,var(--wp--preset--color--amber-lit),var(--wp--preset--color--amber-thin) 58%,var(--wp--preset--color--amber)); }
.ile-img-3{ background:linear-gradient(168deg,var(--wp--preset--color--amber-thin),var(--wp--preset--color--amber) 55%,var(--wp--preset--color--amber-deep)); }
.ile-img-field{ background:radial-gradient(70% 62% at 34% 28%,var(--wp--preset--color--amber-lit),var(--wp--preset--color--amber) 54%,var(--wp--preset--color--amber-deep)); }
.ile-ratio-45{ aspect-ratio:4/5; } .ile-ratio-34{ aspect-ratio:3/4; } .ile-ratio-11{ aspect-ratio:1/1; }
/* Inside a 90vh block the card image has to be sized off the viewport, or the
   3/4 ratio at a third of a wide screen makes the section taller than its cap. */

.foot{ margin-top:1rem; max-width:var(--measure); font-size:.9375rem;
  color:var(--wp--preset--color--muted); }
@media (min-width:60rem){
  #sets .foot{ margin-top:.75rem; }
}

/* ── the measured amber range ── */
.ile-range{ display:grid; grid-template-columns:repeat(5,1fr); height:min(46vh,22rem); }
.ile-range div{ position:relative; }
.ile-range div::after{ content:attr(data-w); position:absolute; left:0; right:0; bottom:-1.5rem;
  text-align:center; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); }

/* one measure for every left-aligned block of text */
.ile-measure, .body, .foot, .caption{ max-width:var(--measure); }
.ile-num{ font-feature-settings:"tnum" 1,"lnum" 1; }
.ile-label{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-feature-settings:"tnum" 1; }
.ile-link{ display:inline-block; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px; }

/* ── motion: honoured, unlike 2 of the 3 competitors ── */
.ile-rise{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.ile-rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ile-rise{ opacity:1; transform:none; transition:none; }
  .ile-hero video{ display:none; }
}

/* split blocks stack below 60rem, side by side above */
@media (min-width:60rem){ .ile-split{ grid-template-columns:1fr 1fr; gap:5rem !important; } }


/* ── product row: bordered figure, info outside, likeable ──────────
   Pattern read off marie-stella-maris.com: product-card--bordered,
   product-card__info outside the frame, a wishlist heart on the figure. */
.ile-row{ display:grid; gap:0; margin-top:2rem;
  grid-template-columns:repeat(2,1fr);
  border-block:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 16%, transparent); }
/* full page width — marie-stella-maris run this edge to edge */
.ile-bleed-row{ margin-inline:calc(var(--gut) * -1); }
@media (min-width:60rem){ .ile-row{ grid-template-columns:repeat(4,1fr); } }
.ile-card{ position:relative; padding:0; background:#fff; }
.ile-card + .ile-card{ border-left:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent); }
@media (max-width:60rem){ .ile-card:nth-child(3){ border-left:0; }
  .ile-card:nth-child(n+3){
    border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent); } }
/* Product shot on white; the setting render fades in on hover. */
/* The renders are 896x1200. Holding 3:4 means cover crops nothing and the
   whole product is visible. */
.ile-card .ile-shot{ position:relative; display:block; overflow:hidden; background:#fff;
  aspect-ratio:3/4; height:auto; }
.ile-card .ile-shot img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:opacity .5s ease; }
.ile-card .ile-shot__alt{ opacity:0; }
.ile-card:hover .ile-shot__alt, .ile-card:focus-within .ile-shot__alt{ opacity:1; }
.ile-card__info h3 a{ text-decoration:none; }
.ile-card__info h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ile-card__info{ padding:.9rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.15rem;
  flex:0 0 auto; background:#fff; }
/* WordPress puts a 17px margin on the heading and 13px on the first paragraph.
   Inside a fixed-height section that is 30px taken straight off the image. */
.ile-card__info > *{ margin-block:0; }
.ile-card__price{ margin-top:.3rem !important; }
.ile-card__info h3{ font-size:1.0625rem; }
.ile-card__meta{ font-size:.8125rem; color:var(--wp--preset--color--muted); }
.ile-card__info h3 a{ color:inherit; }
.ile-card__price{ margin-top:.35rem; font-size:1.0625rem; }
.ile-like{ position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:32px; height:32px; border:0; padding:0; cursor:pointer; border-radius:50%;
  background:color-mix(in oklab, var(--wp--preset--color--paper) 82%, transparent);
  display:grid; place-items:center; }
.ile-like svg{ width:16px; height:16px; fill:none; stroke:var(--wp--preset--color--ink); stroke-width:1.5; }
.ile-like[aria-pressed="true"] svg{ fill:var(--wp--preset--color--ink); }
.ile-like:hover{ background:var(--wp--preset--color--paper); }

/* ── the sustainability statement: quiet, no image ── */
.ile-statement h2{ max-width:none; white-space:nowrap; font-size:var(--stmt-size); }
@media (max-width:34rem){ .ile-statement h2{ white-space:normal; } }
.ile-statement__inner{ max-width:100%; }
.ile-statement__inner .body{ margin-top:1.5rem; }
.ile-statement__inner .body + .body{ margin-top:1rem; }

/* Discover our products: the section is exactly 80vh and the images take
   whatever height is left over, so they grow rather than the block. */
/* 80vh is the target, but a full 3:4 shot four across needs a little more on a
   900px-tall screen. min-height lets it grow instead of cropping the product. */
#sets{ min-height:80vh; height:auto; max-height:none; padding-block:var(--s4) 0; }
#sets > .wp-block-group{ height:100%; display:flex; flex-direction:column; min-height:0;
  padding-block:1.5rem 0; }
#sets h2{ margin-block:0 1rem; }
#sets .ile-row{ margin-top:1rem; margin-bottom:0; }
#sets .foot{ margin-top:.75rem; }
#sets .ile-row{ flex:1 1 auto; min-height:0; }
#sets .ile-card{ display:flex; flex-direction:column; min-height:0; }



/* ── two page-wide panels: starter sets and refills. Ajen's device,
      labelled Shop rather than Explore. Square corners. ── */
.ile-panels{ display:grid; grid-template-columns:1fr; gap:0;
  margin-inline:calc(var(--gut) * -1); }
@media (min-width:48rem){ .ile-panels{ grid-template-columns:1fr 1fr; } }
.ile-panel{ position:relative; overflow:hidden; border-radius:0;
  min-height:min(56vh,30rem); display:flex; align-items:flex-end;
  text-decoration:none; color:var(--wp--preset--color--paper); }
.ile-panel__bg{ position:absolute; inset:0; transition:transform .7s ease; }
.ile-panel:hover .ile-panel__bg{ transform:scale(1.03); }
.ile-panel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(23,21,15,.62), rgba(23,21,15,.06) 62%); }
.ile-panel__text{ position:relative; z-index:1; padding:2rem var(--gut); }
.ile-panel__text h3{ font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem); color:inherit; }
.ile-panel__shop{ display:inline-block; margin-top:.9rem; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:3px; }


/* ── footer: four link columns then a newsletter, marie-stella-maris' shape.
      No logo, no icons. ── */
.ile-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ile-footer{ border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent); }
.ile-foot{ padding:3.5rem var(--gut) 2rem; }
.ile-foot__cols{ display:grid; gap:2.25rem 1.5rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:48rem){ .ile-foot__cols{ grid-template-columns:repeat(4,1fr); gap:2rem; } }
.ile-foot__col h2{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); margin:0 0 1rem; font-weight:400; }
.ile-foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ile-foot__col a{ text-decoration:none; font-size:.9375rem; }
.ile-foot__col a:hover{ text-decoration:underline; text-underline-offset:3px; }

.ile-foot__news{ margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent);
  display:grid; gap:1.5rem; align-items:center; }
@media (min-width:60rem){ .ile-foot__news{ grid-template-columns:1fr 1fr; gap:3rem; } }
.ile-foot__news h2{ font-size:clamp(1.0625rem,.85rem + .7vw,1.5rem); margin:0;
  max-width:none; white-space:nowrap; }
@media (max-width:34rem){ .ile-foot__news h2{ white-space:normal; } }
.ile-foot__form{ display:flex; flex-wrap:wrap; gap:.5rem; max-width:32rem; width:100%; }
/* Right only while the heading and the form sit side by side. Once they stack,
   both line up on the left. */
@media (min-width:60rem){
  .ile-foot__form{ justify-self:end; margin-left:auto; }
}
@media (max-width:59.99rem){
  .ile-foot__form{ justify-self:start; margin-left:0; }
  .ile-foot__news h2{ white-space:normal; }
}
.ile-foot__form input{ flex:1 1 14rem; padding:.85rem 1rem; font:inherit; font-size:.9375rem;
  color:inherit; background:transparent;
  border:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 40%, transparent); }
.ile-foot__form input::placeholder{ color:var(--wp--preset--color--muted); }
.ile-foot__form button{ padding:.85rem 1.6rem; font:inherit; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  border:1px solid var(--wp--preset--color--ink);
  background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); }
/* one line at the foot, nothing under it */
.ile-foot__base{ margin-top:3rem; padding-top:1.25rem;
  border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:nowrap; white-space:nowrap;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); }
.ile-foot__base .ile-lang b{ color:var(--wp--preset--color--ink); }

/* product text lines up with the rest of the page, not with the card edge */
.ile-card__info{ padding-inline:var(--gut); }


/* ── mobile menu: drawer with panel navigation, marie-stella-maris' pattern ── */
/* Hidden by default and switched on below the nav breakpoint, so this cannot
   be undone by a later rule of equal specificity. */
.ile-burger{ display:none; width:26px; height:26px; padding:0; border:0; background:none;
  cursor:pointer; align-content:center; gap:6px; color:var(--wp--preset--color--ink); }
@media (max-width:60rem){ .ile-burger{ display:grid; } }
.ile-burger span{ display:block; height:1px; width:100%; background:currentColor;
  transition:transform .3s ease, opacity .3s ease; }
.ile-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.ile-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.ile-scrim{ position:fixed; inset:0; z-index:60; background:rgba(23,21,15,.34);
  opacity:0; transition:opacity .3s ease; }
.ile-scrim.is-open{ opacity:1; }

.ile-drawer{ position:fixed; inset:0 auto 0 0; z-index:70;
  width:min(88vw,25rem); background:var(--wp--preset--color--paper);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .36s cubic-bezier(.4,0,.2,1);
  border-right:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent); }
.ile-drawer.is-open{ transform:none; }
.ile-drawer__bar{ display:flex; justify-content:space-between; align-items:center;
  height:var(--header-h); padding-inline:var(--gut); flex:0 0 auto;
  border-bottom:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent); }
.ile-drawer__bar button{ border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:inherit; }
.ile-drawer__back::before{ content:"\2190\00a0"; }

.ile-drawer__panels{ position:relative; flex:1 1 auto; overflow:hidden; }
.ile-drawer__panel{ position:absolute; inset:0; overflow-y:auto; padding:1.25rem var(--gut);
  transform:translateX(0); transition:transform .36s cubic-bezier(.4,0,.2,1); }
.ile-drawer__panel[hidden]{ display:block; visibility:hidden; transform:translateX(100%); }
.ile-drawer__panel.is-out{ transform:translateX(-30%); visibility:hidden; }
.ile-drawer__panel ul{ list-style:none; margin:0; padding:0; }
.ile-drawer__panel li + li{ border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent); }
.ile-drawer__panel a, .ile-drawer__into{ display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:1rem 0; font:inherit; font-size:1.0625rem; text-decoration:none;
  color:inherit; background:none; border:0; cursor:pointer; text-align:left; }
.ile-drawer__into::after{ content:"\2192"; }

.ile-drawer__foot{ flex:0 0 auto; display:flex; gap:1.5rem; align-items:center;
  padding:1.25rem var(--gut); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 12%, transparent); }
.ile-drawer__foot a{ text-decoration:none; }
body.ile-locked{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .ile-drawer, .ile-drawer__panel, .ile-scrim{ transition:none; }
}


/* The Sirocco image sits against the inner edge of its column, so the frame
   opens toward the centre of the page rather than toward the outer margin. */
@media (min-width:60rem){
  .ile-split > .ile-img{ justify-self:end; width:min(100%,30rem); }
  .ile-split > div:first-child.ile-img{ justify-self:end; }
}


/* ── one full-width image with the scent written over it in white ── */
.ile-full{ position:relative; overflow:hidden; padding:0; border-top:0;
  min-height:min(72vh,40rem); display:flex; align-items:center; }
/* The bottles sit across the middle and lower band of the frame, so the crop
   favours that and the scrim runs top-down instead of left-heavy. */
.ile-full__bg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 58%; }
/* Scrim only under the words: a soft column on the left, fully clear by 55%
   so all three bottles keep their own light. */
.ile-full::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg,
    rgba(23,21,15,.70) 0%, rgba(23,21,15,.58) 26%,
    rgba(23,21,15,.24) 44%, rgba(23,21,15,0) 58%); }
.ile-full__text{ position:relative; z-index:2; width:100%;
  padding-block:var(--s4); padding-inline:var(--gut);
  color:var(--wp--preset--color--paper); }
.ile-full__text h2{ color:inherit; margin:0 0 1.5rem;
  font-size:clamp(1.875rem,1.3rem + 2.2vw,3.5rem);
  text-transform:uppercase; letter-spacing:.06em; }
.ile-full__text .body{ color:inherit; max-width:var(--measure); }
.ile-full__text .body + .body{ margin-top:1rem; }
@media (max-width:47.99rem){
  .ile-full::before{ background:linear-gradient(to bottom,
    rgba(23,21,15,.72) 0%, rgba(23,21,15,.5) 46%, rgba(23,21,15,.18) 78%); }
}

/* ── product page ─────────────────────────────────────────────────
   Structure follows marie-stella-maris: gallery, buy box, accordions. */
.ile-pdp{ padding-inline:var(--gut); }
.ile-pdp__crumbs{ display:flex; gap:.5rem; align-items:center; padding-block:1.25rem 2rem;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--muted); }
.ile-pdp__crumbs a{ text-decoration:none; color:inherit; }
.ile-pdp__crumbs a:hover{ color:var(--wp--preset--color--ink); }

.ile-pdp__grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; }
@media (min-width:60rem){
  .ile-pdp__grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2.5rem,4vw,5rem);
    align-items:start; }
  .ile-pdp__buy{ position:sticky; top:calc(var(--header-h) + 2rem); }
}
/* The shot fits the viewport rather than filling the column: the renders are
   3:4 on white, so contain leaves no visible edge. */
.ile-pdp__media{ background:#fff; display:grid; place-items:center;
  max-height:min(74vh,42rem); overflow:hidden; }
.ile-pdp__media shopify-media{ display:block; max-height:min(74vh,42rem); }
.ile-pdp__media img{ display:block; width:auto; max-width:100%;
  max-height:min(74vh,42rem); height:auto; object-fit:contain; background:#fff; }

.ile-pdp__title{ font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem); margin:.35rem 0 1rem; }
.ile-pdp__price{ font-size:1.25rem; margin-bottom:1.75rem; display:flex; gap:.75rem; align-items:baseline; }
.ile-pdp__was{ color:var(--wp--preset--color--muted); text-decoration:line-through; font-size:1rem; }

.ile-pdp__actions{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.ile-qty{ display:flex; align-items:center; gap:.25rem; flex:0 0 auto;
  border:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 40%, transparent); }
.ile-qty button{ width:2.5rem; height:100%; min-height:2.9rem; border:0; background:none; cursor:pointer;
  font:inherit; font-size:1rem; color:inherit; }
.ile-qty span{ min-width:2ch; text-align:center; font-feature-settings:"tnum" 1; }

.ile-btn{ font:inherit; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.6rem; cursor:pointer; border:1px solid var(--wp--preset--color--ink); }
.ile-btn--solid{ flex:1 1 auto; background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); }
.ile-btn--line{ width:100%; background:transparent; color:var(--wp--preset--color--ink); }
.ile-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.ile-btn--solid:hover:not([disabled]){ background:var(--wp--preset--color--muted); }
.ile-btn--line:hover:not([disabled]){ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); }

.ile-acc{ margin-top:2.5rem;
  border-top:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent); }
.ile-acc details{ border-bottom:1px solid color-mix(in oklab, var(--wp--preset--color--ink) 14%, transparent); }
.ile-acc summary{ list-style:none; cursor:pointer; padding:1.1rem 0; position:relative;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.ile-acc summary::-webkit-details-marker{ display:none; }
.ile-acc summary::after{ content:"+"; position:absolute; right:0; top:1rem; font-size:1rem; line-height:1; }
.ile-acc details[open] summary::after{ content:"\2013"; }
.ile-acc__body{ padding-bottom:1.25rem; max-width:var(--measure); }
.ile-acc__body p + p{ margin-top:.75rem; }
.ile-acc__body .ile-link{ margin-top:.25rem; }

/* the plugin's own wrappers, neutralised so our layout owns the page */
.shopify-product-details, .single-product-layout, .single-product{ all:unset; display:block; }

/* ── shop all ─────────────────────────────────────────────────── */
.ile-shop{ padding-block:2rem 4rem; }
.ile-shop__head{ padding-inline:var(--gut); margin-bottom:2.5rem; }
.ile-shop__head h1{ font-size:clamp(1.875rem,1.3rem + 2.2vw,3.5rem); margin:.5rem 0 1rem; }
/* four per row on desktop, two on tablet, one on a phone */
.ile-shop__row{ grid-template-columns:1fr; }
@media (min-width:40rem){ .ile-shop__row{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:60rem){ .ile-shop__row{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:60rem){ .ile-shop__row .ile-shot{ aspect-ratio:3/4; } }

/* the starter-sets panel carries the square desert shot */
.ile-panel__bg img{ width:100%; height:100%; object-fit:cover; display:block; }