/*
Theme Name: I Love Swimming
Theme URI: https://example.com/i-love-swimming
Author: Amna
Author URI: https://example.com
Description: Bags-only storefront theme for swim clubs and swim families. A faithful, production-ready build of the "I Love Swimming" design: marquee ticker, cyan hero, 18-bag product grid, size-guide split, poolside reviews, a full product detail page, and cart and checkout screens. Fully responsive, customizer-driven and SEO friendly.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: i-love-swimming
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
*/

/* --------------------------------------------------------------
   1. Design tokens
-------------------------------------------------------------- */
:root{
  /* Brand */
  --ils-ink:#023848;
  --ils-cyan:#39d1dc;
  --ils-cyan-deep:#05aabf;
  --ils-cyan-soft:#94f1fa;
  --ils-accent:#fdc93e;
  --ils-accent-deep:#f9a806;
  --ils-star:#d19705;
  --ils-teal:#04657b;
  --ils-teal-dark:#034859;
  --ils-ink-lift:#0a495c;

  /* Surfaces */
  --ils-cream:#fefbf2;
  --ils-sand:#faf6ea;
  --ils-ice:#ecfcfd;
  --ils-white:#fff;

  /* Text */
  --ils-muted:#5b7880;
  --ils-body:#3d616c;
  --ils-deep:#044c62;
  --ils-eyebrow:#045871;
  /* Copy sitting on the accent yellow, cut from the same hue. */
  --ils-accent-ink:#5e4708;
  --ils-accent-ink-dim:#73580d;

  /* Status. Still read as pass / fail, pulled to the logo's
     temperature so they sit in the same set as everything else. */
  --ils-ok-bg:#e6faf0;
  --ils-ok-line:#9cd8bc;
  --ils-danger:#c13a25;
  --ils-danger-bg:#fdebe7;
  --ils-danger-line:#e7a498;

  /* Lines */
  --ils-line:#ebe7db;
  --ils-hair:rgba(2,56,72,.12);
  --ils-hair-strong:rgba(2,56,72,.2);
  --ils-strike:#5d777e;
  --ils-thumb-border:#b0d8dd;

  /* Footer */
  --ils-foot-text:#aedae0;
  --ils-foot-dim:#7cadb6;
  --ils-foot-field:#073340;
  --ils-foot-border:rgba(255,255,255,.14);

  /* Elevation. A light hard offset keeps the brand character,
     the ambient layer underneath does the modern polish. */
  --ils-sh-hard:3px 3px 0 var(--ils-ink);
  --ils-sh-hard-lg:6px 6px 0 var(--ils-ink);
  --ils-sh-soft:0 16px 32px -22px rgba(2,56,72,.55);
  --ils-sh-soft-lg:0 28px 50px -26px rgba(2,56,72,.5);
  --ils-shadow:var(--ils-sh-hard),var(--ils-sh-soft);
  --ils-shadow-hover:var(--ils-sh-hard-lg),var(--ils-sh-soft-lg);
  --ils-sh-lift:0 10px 24px -14px rgba(2,56,72,.5);

  /* Radii */
  --ils-r-xs:10px;
  --ils-r-sm:14px;
  --ils-r-md:20px;
  --ils-r-lg:26px;
  --ils-r-xl:34px;
  --ils-r-pill:999px;

  /* Rhythm */
  --ils-gutter:clamp(20px,4.4vw,48px);
  --ils-section:clamp(56px,6.6vw,96px);
  --ils-max:1280px;

  /* Type */
  --ils-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ils-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --ils-fs-hero:clamp(50px,7.9vw,114px);
  --ils-fs-h2:clamp(30px,3.6vw,46px);
  --ils-fs-h3:clamp(25px,2.6vw,34px);
  --ils-ease:cubic-bezier(.22,.8,.3,1);

  /* Pattern fills */
  --ils-stripe-hero:repeating-linear-gradient(45deg,#7ae4f0 0 12px,#62dcea 12px 24px);
  --ils-stripe-pdp:repeating-linear-gradient(45deg,#dcf6f9 0 12px,#cdf0f3 12px 24px);
  --ils-stripe-size:repeating-linear-gradient(45deg,#fed872 0 12px,#fcd15a 12px 24px);
  --ils-stripe-flat:repeating-linear-gradient(45deg,#ecf3f4 0 12px,#e2edee 12px 24px);
}

/* --------------------------------------------------------------
   2. Base
-------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--ils-cream);
  color:var(--ils-ink);
  font:400 16.5px/1.62 var(--ils-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* clip contains horizontal overflow without breaking the sticky header */
@supports (overflow:clip){body{overflow-x:clip}}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--ils-teal);text-decoration:none;transition:color .2s var(--ils-ease)}
a:hover{color:var(--ils-teal-dark)}
h1,h2,h3,h4{font-family:var(--ils-display);font-weight:800;text-wrap:balance}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--ils-accent);color:var(--ils-ink)}
:focus-visible{outline:3px solid var(--ils-teal);outline-offset:3px;border-radius:4px}
.ils-screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ils-skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;
  background:var(--ils-ink);color:var(--ils-accent);border-radius:0 0 12px 0;
  font:600 14px/1 var(--ils-sans);
}
.ils-skip-link:focus{left:0;color:var(--ils-accent)}
.ils-container{width:100%;max-width:var(--ils-max);margin:0 auto;padding:0 var(--ils-gutter)}

/* --------------------------------------------------------------
   3. Ticker
-------------------------------------------------------------- */
.ils-ticker{
  background:var(--ils-ink);overflow:hidden;color:var(--ils-accent);
  font:600 11.5px/1 var(--ils-sans);letter-spacing:.2em;text-transform:uppercase;padding:12px 0;
}
.ils-ticker__track{display:flex;gap:26px;width:200%;animation:ils-marquee 24s linear infinite;will-change:transform}
.ils-ticker__item{white-space:nowrap;display:flex;align-items:center;gap:26px}
.ils-ticker__item::after{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 5px;
  background:var(--ils-cyan);opacity:.9;
}
@keyframes ils-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ils-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* --------------------------------------------------------------
   4. Header
-------------------------------------------------------------- */
.ils-header{
  position:sticky;top:0;z-index:60;
  background:rgba(57,209,220,.94);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
  padding:16px 0;
  box-shadow:0 1px 0 rgba(2,56,72,.08),0 14px 30px -28px rgba(2,56,72,.9);
}
/* Keep the sticky bar clear of the WordPress admin bar. */
.admin-bar .ils-header{top:32px}
@media screen and (max-width:782px){.admin-bar .ils-header{top:46px}}
.ils-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.ils-header__left{display:flex;gap:10px;align-items:center}
.ils-header__right{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.ils-pill{
  display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:var(--ils-r-pill);
  background:rgba(254,251,242,.82);border:1.5px solid var(--ils-ink);
  font:500 13.5px/1 var(--ils-sans);color:var(--ils-ink);
  transition:background .2s var(--ils-ease),transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-pill:hover{background:var(--ils-cream);color:var(--ils-ink);transform:translateY(-2px);box-shadow:var(--ils-sh-lift)}
.ils-pill--cart{background:var(--ils-ink);color:var(--ils-accent);font-weight:600}
.ils-pill--cart:hover{background:var(--ils-ink-lift);color:var(--ils-accent)}
.ils-iconbtn{
  width:42px;height:42px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-ink);
  display:grid;place-items:center;color:var(--ils-ink);background:rgba(254,251,242,.3);
  transition:background .2s var(--ils-ease),transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-iconbtn:hover{background:var(--ils-cream);color:var(--ils-ink);transform:translateY(-2px);box-shadow:var(--ils-sh-lift)}
.ils-logo{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ils-logo:hover{color:var(--ils-ink)}
.ils-logo__word{font:800 30px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.04em}
.ils-logo__tag{font:600 9.5px/1 var(--ils-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ils-eyebrow);opacity:.85}
.ils-logo img{max-height:52px;width:auto;height:auto;display:block}
/* The bundled wordmark is a stacked lockup, so it carries a little more height. */
.ils-logo .ils-logo__img{max-height:72px}

/* --------------------------------------------------------------
   5. Buttons, stickers, shared bits
-------------------------------------------------------------- */
.ils-btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  padding:16px 30px;border-radius:var(--ils-r-pill);font:600 16px/1 var(--ils-sans);
  border:1.5px solid transparent;letter-spacing:-.005em;
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease),background .2s var(--ils-ease),color .2s var(--ils-ease);
}
.ils-btn--primary{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);box-shadow:0 12px 22px -14px rgba(2,56,72,.9)}
.ils-btn--primary:hover{color:var(--ils-accent);transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(2,56,72,.95)}
.ils-btn--ghost{border-color:var(--ils-ink);color:var(--ils-ink);background:rgba(254,251,242,.5)}
.ils-btn--ghost:hover{background:var(--ils-ink);color:var(--ils-accent);transform:translateY(-3px);box-shadow:0 18px 28px -16px rgba(2,56,72,.9)}
.ils-btn--dark{background:var(--ils-ink);color:#fff;border-color:var(--ils-ink);padding:15px 28px;font-size:15px;box-shadow:0 12px 22px -14px rgba(2,56,72,.9)}
.ils-btn--dark:hover{color:var(--ils-accent);transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(2,56,72,.95)}
.ils-sticker{
  position:absolute;background:var(--ils-accent);border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-pill);
  padding:10px 16px;font:800 13px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.01em;
  text-transform:none;box-shadow:2px 3px 0 var(--ils-ink),0 16px 26px -18px rgba(2,56,72,.9);
  white-space:nowrap;z-index:2;
}
.ils-sticker--a{top:26px;left:-24px;transform:rotate(-7deg)}
.ils-sticker--b{bottom:86px;right:-20px;background:var(--ils-cream);transform:rotate(6deg)}
.ils-sticker--corner{top:14px;left:14px;padding:7px 13px;font-size:11.5px;transform:rotate(-5deg)}
.ils-stars{font:600 15px/1 var(--ils-sans);color:var(--ils-star);letter-spacing:.14em}
.ils-rule{width:1px;height:16px;background:var(--ils-hair-strong);display:inline-block}
.ils-ph{
  display:grid;place-items:center;text-align:center;color:var(--ils-ink);opacity:.5;
  font:600 10px/1.45 var(--ils-sans);letter-spacing:.14em;text-transform:uppercase;padding:14px;
}

/* --------------------------------------------------------------
   6. Hero
-------------------------------------------------------------- */
.ils-hero{
  position:relative;overflow:hidden;padding:clamp(44px,5.4vw,76px) 0 0;
  background:
    radial-gradient(120% 90% at 78% 6%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 6% 100%,rgba(3,72,89,.16) 0%,rgba(3,72,89,0) 60%),
    var(--ils-cyan);
}
.ils-hero__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,4.4vw,60px);align-items:end;
}
.ils-hero__copy{padding-bottom:clamp(20px,3.4vw,52px)}
.ils-hero__badge{
  display:inline-flex;align-items:center;background:var(--ils-ink);color:var(--ils-accent);
  border-radius:var(--ils-r-pill);padding:9px 17px;font:600 11px/1 var(--ils-sans);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:26px;
  box-shadow:0 12px 22px -16px rgba(2,56,72,.95);
}
.ils-hero__title{margin:0;font:800 var(--ils-fs-hero)/.86 var(--ils-display);letter-spacing:-.05em;color:var(--ils-ink)}
.ils-hero__lead{margin:26px 0 0;max-width:44ch;font:400 clamp(17px,1.35vw,19px)/1.58 var(--ils-sans);color:var(--ils-deep)}
.ils-hero__actions{display:flex;gap:14px;margin:32px 0 26px;flex-wrap:wrap}
.ils-hero__proof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ils-hero__proof span{font:500 14px/1 var(--ils-sans);color:var(--ils-deep)}
.ils-hero__proof .ils-stars{font-size:15px}
.ils-hero__media{
  position:relative;aspect-ratio:1/1.02;border:2px solid var(--ils-ink);border-bottom:0;
  border-radius:var(--ils-r-xl) var(--ils-r-xl) 0 0;background:var(--ils-stripe-hero);
  display:grid;place-items:center;color:var(--ils-eyebrow);font:500 12px/1.6 var(--ils-sans);
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  box-shadow:0 44px 60px -44px rgba(2,56,72,.85);
  animation:ils-bob 7s ease-in-out infinite;
}
.ils-hero__media img{
  width:100%;height:100%;object-fit:cover;
  border-radius:calc(var(--ils-r-xl) - 2px) calc(var(--ils-r-xl) - 2px) 0 0;
}
.ils-hero__wave{display:block;width:100%;height:clamp(44px,5vw,72px);position:relative;z-index:3;margin-top:-1px}

/* --------------------------------------------------------------
   7. Bag type cards
-------------------------------------------------------------- */
.ils-types{background:var(--ils-cream);padding:clamp(26px,3.4vw,46px) 0 0}
.ils-types__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.ils-type{
  display:flex;align-items:center;gap:15px;border:1.5px solid var(--ils-hair-strong);
  border-radius:var(--ils-r-md);padding:15px 18px;background:var(--ils-white);box-shadow:var(--ils-sh-soft);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
  color:var(--ils-ink);
}
.ils-type:hover{
  transform:translateY(-4px);border-color:var(--ils-ink);color:var(--ils-ink);
  box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg);
}
.ils-type__icon{
  flex:0 0 54px;height:54px;border-radius:var(--ils-r-sm);display:grid;place-items:center;text-align:center;
  overflow:hidden;color:var(--ils-ink);font:600 9px/1.3 var(--ils-sans);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(2,56,72,.08);
}
.ils-type__icon img{width:100%;height:100%;object-fit:cover}
.ils-type__name{font:800 18px/1.1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-type__sub{font:400 13px/1.4 var(--ils-sans);color:var(--ils-muted);margin-top:4px}
.ils-type__body{display:block;min-width:0}
.ils-type__name,.ils-type__sub{display:block}

/* --------------------------------------------------------------
   8. Shop head + chips
-------------------------------------------------------------- */
.ils-shophead{background:var(--ils-cream);padding:var(--ils-section) 0 0}
.ils-shophead__inner{
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  padding-bottom:20px;border-bottom:1px solid var(--ils-hair);
}
.ils-shophead__title{margin:0;font:800 var(--ils-fs-h2)/1.02 var(--ils-display);letter-spacing:-.04em;color:var(--ils-ink)}
.ils-shophead__meta{display:block;margin-top:10px;font:400 14.5px/1 var(--ils-sans);color:var(--ils-muted)}
.ils-chips{display:flex;gap:8px;font:600 13px/1 var(--ils-sans);align-items:center;flex-wrap:wrap}
.ils-chip{
  padding:10px 16px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-hair-strong);
  background:var(--ils-white);color:var(--ils-ink);white-space:nowrap;
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),transform .2s var(--ils-ease),border-color .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-chip:hover{background:var(--ils-ice);color:var(--ils-ink);border-color:var(--ils-ink);transform:translateY(-2px)}
.ils-chip.is-active,.ils-chip[aria-pressed="true"]{
  background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);
  box-shadow:0 10px 20px -14px rgba(2,56,72,.95);
}

/* --------------------------------------------------------------
   9. Bag grid + card
-------------------------------------------------------------- */
.ils-bags{background:var(--ils-cream);padding:clamp(26px,3vw,40px) 0 var(--ils-section)}
.ils-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
.ils-card{
  display:flex;flex-direction:column;background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);
  border-radius:var(--ils-r-md);overflow:hidden;box-shadow:var(--ils-sh-soft);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-card:hover{transform:translateY(-5px);border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-card.is-hidden{display:none}
.ils-card__media{position:relative;aspect-ratio:1/1;overflow:hidden}
.ils-card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 42%,rgba(2,56,72,.07) 100%);
}
.ils-card__media .ils-ph{width:100%;height:100%}
.ils-card__medialink{display:block;width:100%;height:100%}
.ils-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ils-ease)}
.ils-card:hover .ils-card__media img{transform:scale(1.05)}
.ils-card__tag{
  position:absolute;top:12px;left:12px;background:var(--ils-ink);color:var(--ils-accent);
  border-radius:var(--ils-r-pill);padding:6px 12px;font:600 10px/1 var(--ils-sans);
  letter-spacing:.1em;text-transform:uppercase;z-index:2;box-shadow:0 10px 18px -12px rgba(2,56,72,.95);
}
.ils-card__body{padding:18px 20px 20px;border-top:1px solid var(--ils-hair);display:flex;flex-direction:column;gap:7px;flex:1}
.ils-card__name{font:800 19px/1.15 var(--ils-display);letter-spacing:-.028em;color:var(--ils-ink);margin:0}
.ils-card__name a{color:inherit}
.ils-card__name a:hover{color:var(--ils-teal)}
.ils-card__sub{font:400 13.5px/1.45 var(--ils-sans);color:var(--ils-muted)}
.ils-swatches{display:flex;gap:7px;margin-top:4px}
.ils-swatch{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(2,56,72,.28);display:block}
.ils-card__foot{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--ils-hair);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.ils-card__price{font:700 18px/1 var(--ils-sans);color:var(--ils-ink);letter-spacing:-.01em}
.ils-card__add{
  font:600 12.5px/1 var(--ils-sans);color:var(--ils-ink);border:1.5px solid var(--ils-hair-strong);
  border-radius:var(--ils-r-pill);padding:9px 16px;background:var(--ils-white);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease),transform .2s var(--ils-ease);
}
.ils-card__add:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);transform:translateY(-1px)}
.ils-card__add.loading{opacity:.55;pointer-events:none}
/* After an ajax add, WooCommerce appends a "View cart" link; it takes the button's place. */
.ils-card__foot .ils-card__add.added{display:none}
.ils-card .ils-card__foot a.added_to_cart{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;margin:0;
  font:600 12.5px/1 var(--ils-sans);color:var(--ils-accent);white-space:nowrap;
  background:var(--ils-ink);border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-pill);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-card .ils-card__foot a.added_to_cart::before{content:"\2713";font-size:12px}
.ils-card .ils-card__foot a.added_to_cart:hover{transform:translateY(-1px);box-shadow:0 10px 18px -12px rgba(2,56,72,.95)}
.ils-empty{grid-column:1/-1;font:400 16px/1.6 var(--ils-sans);color:var(--ils-muted)}

/* --------------------------------------------------------------
   10. Size guide split
-------------------------------------------------------------- */
.ils-sizeguide{
  background:linear-gradient(135deg,#fdd35d 0%,var(--ils-accent) 42%,#fbb828 100%);
  border-top:1px solid rgba(2,56,72,.16);overflow:hidden;
}
.ils-sizeguide__inner{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  max-width:var(--ils-max);margin:0 auto;
}
.ils-sizeguide__text{
  padding:clamp(44px,5.6vw,84px) var(--ils-gutter);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.ils-sizeguide__title{margin:0 0 14px;font:800 var(--ils-fs-h2)/1.03 var(--ils-display);letter-spacing:-.038em;color:var(--ils-ink)}
.ils-sizeguide__body{margin:0 0 28px;max-width:46ch;font:400 clamp(16px,1.25vw,17.5px)/1.6 var(--ils-sans);color:var(--ils-accent-ink)}
.ils-sizeguide__media{
  /* Bleeds past the centred container to the right edge of the viewport. */
  margin-right:calc(50% - 50vw);
  background:var(--ils-stripe-size);display:grid;place-items:center;color:var(--ils-accent-ink-dim);
  font:500 12px/1.6 var(--ils-sans);letter-spacing:.14em;text-transform:uppercase;
  min-height:clamp(240px,26vw,340px);text-align:center;overflow:hidden;
  box-shadow:inset 1px 0 0 rgba(2,56,72,.12);
}
.ils-sizeguide__media img{width:100%;height:100%;object-fit:cover;min-height:inherit}

/* --------------------------------------------------------------
   11. Reviews
-------------------------------------------------------------- */
.ils-reviews{
  background:linear-gradient(180deg,var(--ils-ice) 0%,#f5fefe 100%);
  padding:var(--ils-section) 0;border-top:1px solid rgba(2,56,72,.1);
}
.ils-reviews__title{margin:0 0 32px;font:800 var(--ils-fs-h3)/1.05 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}
.ils-reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.ils-reviews__head .ils-reviews__title{margin:0}
.ils-reviews__link{font:600 14px/1 var(--ils-sans);color:var(--ils-teal)}
.ils-reviews__link:hover{text-decoration:underline;text-underline-offset:4px}
.ils-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.ils-review{
  position:relative;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  padding:26px 26px 24px;background:var(--ils-white);box-shadow:var(--ils-sh-soft);
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-review::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--ils-cyan) 0%,var(--ils-cyan-soft) 100%);
}
.ils-review:hover{transform:translateY(-5px);border-color:var(--ils-ink);box-shadow:3px 3px 0 var(--ils-cyan-deep),var(--ils-sh-soft-lg)}
.ils-review .ils-stars{font-size:14px}
.ils-review__q{margin:0;font:500 17px/1.55 var(--ils-sans);color:var(--ils-ink)}
.ils-review__who{font:600 14px/1.4 var(--ils-sans);color:var(--ils-ink)}
.ils-review__role{font:400 13px/1.4 var(--ils-sans);color:var(--ils-muted)}
.ils-review__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--ils-hair)}
.ils-review--pdp{gap:13px}
.ils-review--pdp .ils-review__head{font:800 17px/1.25 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-review--pdp .ils-review__q{font:400 15px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-review--pdp .ils-review__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--ils-hair);font:400 13px/1.4 var(--ils-sans);color:var(--ils-muted)}

/* --------------------------------------------------------------
   12. Product detail
-------------------------------------------------------------- */
.ils-breadcrumb{background:var(--ils-cream);padding:26px 0 0}
.ils-breadcrumb__inner{font:500 13px/1 var(--ils-sans);color:var(--ils-muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ils-breadcrumb a{color:var(--ils-teal)}
.ils-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.ils-breadcrumb [aria-current]{color:var(--ils-ink)}
.ils-pdp{background:var(--ils-cream);padding:clamp(26px,3vw,40px) 0 var(--ils-section)}
.ils-pdp__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4.2vw,60px);align-items:start}
.ils-gallery{display:flex;gap:16px;align-items:flex-start;position:relative}
.ils-gallery__thumbs{
  display:flex;flex-direction:column;gap:12px;
  position:absolute;top:0;bottom:0;left:0;width:84px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;
}
.ils-gallery__thumbs::-webkit-scrollbar{width:0;height:0}
.ils-thumb{flex:0 0 auto}
.ils-thumb{
  aspect-ratio:1/1;border:1.5px solid var(--ils-thumb-border);border-radius:var(--ils-r-sm);display:grid;place-items:center;
  text-align:center;padding:6px;color:var(--ils-ink);font:600 8px/1.3 var(--ils-sans);letter-spacing:.08em;
  text-transform:uppercase;overflow:hidden;background:var(--ils-ice);
  transition:border-color .2s var(--ils-ease),transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-thumb img{width:100%;height:100%;object-fit:cover}
.ils-thumb:hover{transform:translateY(-2px);box-shadow:var(--ils-sh-lift)}
.ils-thumb.is-active{border-color:var(--ils-ink);box-shadow:0 0 0 2px rgba(2,56,72,.12)}
.ils-gallery__main{
  position:relative;flex:1;margin-left:100px;aspect-ratio:1/1.08;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-lg);
  background:var(--ils-stripe-pdp);box-shadow:var(--ils-sh-soft-lg);display:grid;place-items:center;
  text-align:center;color:var(--ils-eyebrow);font:500 12px/1.6 var(--ils-sans);letter-spacing:.14em;
  text-transform:uppercase;overflow:hidden;
}
.ils-gallery__main img{width:100%;height:100%;object-fit:cover}
.ils-buy{display:flex;flex-direction:column;gap:20px}
.ils-eyebrow{font:600 11px/1 var(--ils-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ils-teal)}
.ils-buy__title{margin:10px 0 0;font:800 clamp(36px,4.2vw,56px)/.95 var(--ils-display);letter-spacing:-.045em;color:var(--ils-ink)}
.ils-buy__sub{margin:10px 0 0;font:400 16px/1.5 var(--ils-sans);color:var(--ils-muted);max-width:46ch}
.ils-buy__rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ils-buy__rating span{font:500 14px/1 var(--ils-sans);color:var(--ils-deep)}
.ils-buy__rating .ils-stars{font-size:15px}
.ils-buy__stock{color:var(--ils-teal)!important;font-weight:600!important}
.ils-buy__desc{margin:0;font:400 17px/1.62 var(--ils-sans);color:var(--ils-body);max-width:52ch}
.ils-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ils-price__now{font:800 clamp(32px,3.2vw,42px)/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.035em}
.ils-price__was{font:400 17px/1 var(--ils-sans);color:var(--ils-strike);text-decoration:line-through}
.ils-price__save{
  background:var(--ils-accent);border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-pill);
  padding:6px 12px;font:600 12px/1 var(--ils-sans);color:var(--ils-ink);
}
.ils-optlabel{font:600 11.5px/1 var(--ils-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ils-ink);margin-bottom:12px}
.ils-colors{display:flex;gap:11px;flex-wrap:wrap}
.ils-color{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ils-ink);padding:0;
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-color:hover{transform:translateY(-2px);box-shadow:var(--ils-sh-lift)}
.ils-color.is-active{box-shadow:0 0 0 3px var(--ils-accent)}
.ils-sizes{display:flex;gap:10px}
.ils-size-opt{
  flex:1;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-sm);padding:13px 15px;
  background:var(--ils-white);color:var(--ils-ink);text-align:left;
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),transform .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-size-opt:hover{transform:translateY(-2px);border-color:var(--ils-ink)}
.ils-size-opt.is-active{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-size-opt__name{font:800 17px/1 var(--ils-display);letter-spacing:-.025em}
.ils-size-opt__sub{font:400 12px/1.35 var(--ils-sans);margin-top:5px;opacity:.75}

/* Variable products: WooCommerce's own variation form wearing the design's
   controls. The native selects stay in the DOM because WooCommerce reads and
   rewrites them, and the block it prints the chosen variation into is mirrored
   into the panel above, so both are taken out of the layout rather than out of
   the page. */
.ils-variations{display:flex;flex-direction:column;gap:22px}
.ils-variations__native{display:none}
.ils-variation-data{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ils-buy__opt .ils-sizes{flex-wrap:wrap}
.ils-buy__opt .ils-size-opt{flex:0 1 auto;min-width:92px;text-align:center}
.ils-color.is-unavailable,.ils-size-opt.is-unavailable{opacity:.35;cursor:not-allowed}
.ils-color.is-unavailable:hover,.ils-size-opt.is-unavailable:hover{transform:none;box-shadow:none;border-color:var(--ils-hair-strong)}
.ils-reset{align-self:flex-start;font:500 13px/1 var(--ils-sans);color:var(--ils-muted);text-decoration:underline;text-underline-offset:3px}
.ils-reset:hover{color:var(--ils-ink)}
.ils-addtobag.disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.ils-addtobag.disabled:hover{transform:none;box-shadow:none}
.single_variation_wrap{display:flex;flex-direction:column;gap:16px}
.woocommerce-variation-add-to-cart{display:flex;flex-direction:column;gap:16px}
.ils-check{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--ils-ink);background:var(--ils-ink);display:grid;place-items:center;flex:0 0 18px}
.ils-check svg{opacity:1;transition:opacity .15s ease}
.ils-buy__actions{display:flex;gap:12px;align-items:stretch}
.ils-qty{
  display:flex;align-items:center;gap:16px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-pill);
  padding:0 18px;font:600 16px/1 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
}
.ils-qty button{background:transparent;border:0;color:var(--ils-ink);font:600 18px/1 var(--ils-sans);padding:6px}
.ils-qty__val{min-width:14px;text-align:center}
.ils-addtobag{
  flex:1;padding:18px 28px;border-radius:var(--ils-r-pill);background:var(--ils-ink);border:1.5px solid var(--ils-ink);
  color:var(--ils-accent);font:600 16px/1 var(--ils-sans);text-align:center;
  box-shadow:3px 3px 0 var(--ils-cyan-deep),0 16px 26px -18px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-addtobag:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ils-cyan-deep),0 22px 30px -18px rgba(2,56,72,.9);color:var(--ils-accent)}
.ils-wish{
  width:56px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-pill);display:grid;place-items:center;
  background:var(--ils-white);color:var(--ils-ink);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-wish:hover{background:var(--ils-ink);border-color:var(--ils-ink)}
.ils-wish:hover svg{stroke:var(--ils-accent)}
.ils-assur{display:flex;gap:14px 28px;font:500 13px/1.5 var(--ils-sans);color:var(--ils-body);flex-wrap:wrap;padding-top:4px}
.ils-story{
  border-top:1px solid rgba(2,56,72,.16);padding:var(--ils-section) 0;
  background:
    radial-gradient(100% 80% at 80% 0%,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 60%),
    var(--ils-cyan);
}
.ils-story__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.ils-story__card{
  background:var(--ils-cream);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  padding:28px;box-shadow:var(--ils-sh-soft);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-story__card:hover{transform:translateY(-5px);border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-story__stat{font:800 36px/1 var(--ils-display);color:var(--ils-teal);letter-spacing:-.035em}
.ils-story__title{font:800 19px/1.2 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em;margin:12px 0 8px}
.ils-story__body{font:400 14.5px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-specs{background:var(--ils-cream);padding:var(--ils-section) 0;border-top:1px solid var(--ils-hair)}
.ils-specs__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px)}
.ils-specs__title{margin:0 0 22px;font:800 var(--ils-fs-h3)/1.05 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}
.ils-spec{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--ils-line);font:400 14.5px/1.5 var(--ils-sans)}
.ils-spec__k{color:var(--ils-muted)}
.ils-spec__v{color:var(--ils-ink);font-weight:600;text-align:right}
.ils-fits__photo{
  aspect-ratio:4/3;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);background:var(--ils-stripe-flat);
  display:grid;place-items:center;text-align:center;color:#547078;font:500 11px/1.6 var(--ils-sans);
  letter-spacing:.12em;text-transform:uppercase;overflow:hidden;box-shadow:var(--ils-sh-soft);
}
.ils-fits__photo img{width:100%;height:100%;object-fit:cover}
.ils-fits{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;font:500 13px/1 var(--ils-sans)}
.ils-fit{border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-pill);padding:9px 15px;color:var(--ils-ink);background:var(--ils-white)}
.ils-pdp-reviews{background:linear-gradient(180deg,var(--ils-ice) 0%,#f5fefe 100%);padding:var(--ils-section) 0;border-top:1px solid rgba(2,56,72,.1)}
.ils-related{background:var(--ils-cream);padding:var(--ils-section) 0;border-top:1px solid var(--ils-hair)}
.ils-related__title{margin:0 0 30px;font:800 var(--ils-fs-h3)/1.05 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}

/* --------------------------------------------------------------
   13. Footer
-------------------------------------------------------------- */
.ils-footer{
  background:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%);
  padding:clamp(52px,6vw,78px) 0 32px;color:var(--ils-cream);
}
.ils-footer__grid{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:clamp(24px,2.8vw,44px)}
.ils-footer__title{font:800 25px/1.1 var(--ils-display);letter-spacing:-.035em;margin:0 0 12px;color:var(--ils-cream)}
.ils-footer__text{margin:0 0 20px;font:400 14.5px/1.6 var(--ils-sans);color:var(--ils-foot-text);max-width:34ch}
.ils-subscribe{display:flex;gap:9px;max-width:340px}
.ils-subscribe__field{
  flex:1;height:46px;border-radius:var(--ils-r-pill);background:var(--ils-foot-field);
  border:1px solid var(--ils-foot-border);padding:0 18px;font:400 14px/1 var(--ils-sans);
  color:var(--ils-cream);min-width:0;transition:border-color .2s var(--ils-ease),background .2s var(--ils-ease);
}
.ils-subscribe__field::placeholder{color:var(--ils-foot-dim)}
.ils-subscribe__field:focus{border-color:var(--ils-cyan);background:var(--ils-ink-lift)}
.ils-subscribe__btn{
  height:46px;padding:0 22px;border-radius:var(--ils-r-pill);background:var(--ils-accent);color:var(--ils-ink);
  border:0;font:600 14px/1 var(--ils-sans);transition:transform .2s var(--ils-ease),filter .2s var(--ils-ease);
}
.ils-subscribe__btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ils-footer__coltitle{font:600 11px/1 var(--ils-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ils-cyan);margin-bottom:18px}
.ils-footer__links,.ils-footer__links ul{display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0}
.ils-footer__links a,.ils-footer__links span{
  font:400 14.5px/1.4 var(--ils-sans);color:var(--ils-foot-text);
  transition:color .2s var(--ils-ease),transform .2s var(--ils-ease);display:inline-block;
}
.ils-footer__links a:hover{color:var(--ils-cyan);transform:translateX(3px)}
.ils-footer__bottom{
  margin-top:clamp(38px,4.4vw,58px);padding-top:22px;border-top:1px solid var(--ils-foot-border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:400 13px/1.5 var(--ils-sans);color:var(--ils-foot-dim);
}

/* --------------------------------------------------------------
   14. Editorial / blog / pages
-------------------------------------------------------------- */
.ils-page{background:var(--ils-cream);padding:var(--ils-section) 0}
.ils-page__title{margin:0 0 26px;font:800 clamp(34px,4vw,48px)/1.02 var(--ils-display);letter-spacing:-.04em;color:var(--ils-ink)}
.ils-prose{font:400 17.5px/1.68 var(--ils-sans);color:var(--ils-body);max-width:72ch}
.ils-prose h2{font:800 clamp(26px,2.8vw,32px)/1.15 var(--ils-display);color:var(--ils-ink);letter-spacing:-.035em;margin:38px 0 14px}
.ils-prose h3{font:800 22px/1.2 var(--ils-display);color:var(--ils-ink);letter-spacing:-.03em;margin:28px 0 10px}
.ils-prose a{text-decoration:underline;text-underline-offset:3px}
.ils-prose blockquote{
  margin:28px 0;padding:22px 26px;border:1.5px solid var(--ils-hair-strong);border-left:4px solid var(--ils-cyan);
  border-radius:var(--ils-r-md);background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-prose img{border-radius:var(--ils-r-md);border:1.5px solid var(--ils-hair-strong)}
.ils-postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.ils-post{
  background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);overflow:hidden;
  box-shadow:var(--ils-sh-soft);display:flex;flex-direction:column;
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-post:hover{transform:translateY(-5px);border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-post__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ils-post__title{margin:0;font:800 21px/1.18 var(--ils-display);letter-spacing:-.028em}
.ils-post__meta{font:400 13px/1.4 var(--ils-sans);color:var(--ils-muted)}
.ils-pagination{margin-top:40px;display:flex;gap:9px;flex-wrap:wrap;font:600 14px/1 var(--ils-sans)}
.ils-pagination .page-numbers{
  padding:12px 18px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-pill);
  background:var(--ils-white);color:var(--ils-ink);transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-pagination .page-numbers.current,.ils-pagination .page-numbers:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-searchform{display:flex;gap:9px;max-width:440px;margin:0 0 30px}
.ils-searchform input[type=search]{
  flex:1;height:48px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-hair-strong);
  padding:0 20px;background:var(--ils-white);
}
.ils-searchform input[type=search]:focus{border-color:var(--ils-ink)}
.ils-searchform button{
  height:48px;padding:0 24px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-ink);
  background:var(--ils-ink);color:var(--ils-accent);font:600 14px/1 var(--ils-sans);
}
.ils-404{text-align:center;padding:clamp(64px,8vw,110px) 0}
.ils-404__code{font:800 clamp(72px,10vw,104px)/1 var(--ils-display);color:var(--ils-teal);letter-spacing:-.05em}
.ils-comments{margin-top:48px;max-width:72ch}
.ils-comments__title{font:800 26px/1.15 var(--ils-display);color:var(--ils-ink);letter-spacing:-.03em;margin:0 0 20px}
.ils-comments .comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ils-comments .comment-body{
  background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  padding:20px;box-shadow:var(--ils-sh-soft);
}

/* WordPress core alignment/caption classes */
.alignleft{float:left;margin:6px 24px 12px 0}
.alignright{float:right;margin:6px 0 12px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font:400 13px/1.5 var(--ils-sans);color:var(--ils-muted);margin-top:8px}
.sticky .ils-post__title::after{content:" \2605";color:var(--ils-star)}

/* Policy pages - Delivery & Returns, Privacy & Cookie Policy.
   Centred title band, then a single 800px reading column. */
.ils-legal-header{background:var(--ils-cream);padding-top:clamp(20px,2.6vw,34px);text-align:center}
.ils-legal-header__inner{padding-top:20px;padding-bottom:20px}
.ils-legal-header__title{
  margin:0;font:800 clamp(28px,3.4vw,36px)/1.2 var(--ils-display);
  letter-spacing:-.04em;color:var(--ils-ink);
}
.ils-legal{background:var(--ils-cream);padding:clamp(50px,5.6vw,80px) 0 clamp(48px,4.8vw,70px)}
.ils-legal__primary{position:relative;width:100%}
.ils-legal__article{width:800px;max-width:100%;margin:0 auto}
.ils-legal__entry{font:400 16px/1.8 var(--ils-sans);color:var(--ils-body)}
.ils-legal__entry h1,.ils-legal__entry h2,.ils-legal__entry h3{
  margin:0 0 20px;line-height:1.2;letter-spacing:-.03em;color:var(--ils-ink);
  font-family:var(--ils-display);font-weight:800;
}
.ils-legal__entry h1{font-size:clamp(28px,3.4vw,36px);letter-spacing:-.04em}
.ils-legal__entry h2{font-size:clamp(24px,2.8vw,30px)}
.ils-legal__entry h3{font-size:clamp(22px,2.6vw,28px)}
.ils-legal__entry p{margin:0 0 1em}
.ils-legal__entry p:last-child{margin-bottom:0}
.ils-legal__entry strong,.ils-legal__entry b{font-weight:700;color:var(--ils-deep)}
.ils-legal__entry a{color:var(--ils-teal);text-decoration:underline;text-underline-offset:3px}
.ils-legal__entry a:hover{color:var(--ils-teal-dark)}
.ils-legal__entry ul,.ils-legal__entry ol{margin:15px 0 15px 20px;padding:0}
.ils-legal__entry li{margin-bottom:8px}
.ils-legal__entry li:last-child{margin-bottom:0}
.ils-legal__entry li ul,.ils-legal__entry li ol{margin:8px 0 0 25px}
.ils-legal__entry hr{
  clear:both;height:1px;min-height:0;margin:8px 0;border:0;
  border-top:1px solid var(--ils-line);
}

/* --------------------------------------------------------------
   15. Cart
-------------------------------------------------------------- */
[hidden]{display:none!important}
.ils-cart{background:var(--ils-cream);padding:clamp(26px,3.4vw,40px) 0 var(--ils-section)}
.ils-cart__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;
}
.ils-cart__title{margin:0;font:800 clamp(34px,4.2vw,48px)/1 var(--ils-display);letter-spacing:-.042em;color:var(--ils-ink)}
.ils-cart__back{font:500 14px/1 var(--ils-sans);color:var(--ils-teal)}
.ils-cart__back:hover{text-decoration:underline;text-underline-offset:4px}
.ils-cart__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(22px,2.6vw,34px);
  align-items:start;padding-top:22px;
}
.ils-cart__main{display:flex;flex-direction:column;gap:18px;min-width:0}
.ils-cart__content{padding-top:var(--ils-section)}

/* Notice bar --------------------------------------------------- */
.ils-notice{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--ils-hair-strong);
  border-radius:var(--ils-r-md);padding:15px 19px;background:var(--ils-ice);
  box-shadow:var(--ils-sh-soft);
}
.ils-notice svg{flex:0 0 auto}
.ils-notice__text{font:500 14px/1.45 var(--ils-sans);color:var(--ils-ink)}
.ils-notice__text strong{font-weight:700}
.ils-notice__text a{color:var(--ils-teal);text-decoration:underline;text-underline-offset:3px}

/* Cart lines --------------------------------------------------- */
.ils-lines{display:flex;flex-direction:column;gap:16px}
.ils-line{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:20px;align-items:start;
  background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  padding:18px;box-shadow:var(--ils-sh-soft);
  transition:border-color .22s var(--ils-ease),box-shadow .22s var(--ils-ease);
}
.ils-line:hover{border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-line__media{
  aspect-ratio:1/1;border-radius:var(--ils-r-sm);overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px rgba(2,56,72,.08);
}
.ils-line__media .ils-ph{width:100%;height:100%;font-size:9px;padding:8px}
.ils-line__medialink{display:block;width:100%;height:100%}
.ils-line__media img{width:100%;height:100%;object-fit:cover}
.ils-line__body{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:2px}
.ils-line__name{margin:0;font:800 20px/1.1 var(--ils-display);letter-spacing:-.025em;color:var(--ils-ink)}
.ils-line__name a{color:inherit}
.ils-line__name a:hover{color:var(--ils-teal)}
.ils-line__variant{font:400 13px/1.45 var(--ils-sans);color:var(--ils-muted)}
.ils-line__actions{display:flex;gap:18px;margin-top:6px}
.ils-linkbtn{
  border:0;background:transparent;padding:0;font:500 13px/1 var(--ils-sans);color:var(--ils-muted);
  transition:color .2s var(--ils-ease);
}
.ils-linkbtn:hover{color:var(--ils-ink);text-decoration:underline;text-underline-offset:3px}
.ils-line__side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.ils-line__total{font:800 22px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-qty--sm{gap:14px;padding:8px 15px;font-size:15px;border-radius:var(--ils-r-pill)}
.ils-qty--sm button{font-size:16px;padding:2px}
.ils-line__each{font:400 12px/1 var(--ils-sans);color:var(--ils-muted)}
.ils-cart__empty{
  border:1.5px dashed var(--ils-hair-strong);border-radius:var(--ils-r-md);background:var(--ils-white);
  padding:clamp(28px,4vw,48px);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:20px;
}
.ils-cart__empty p{margin:0;font:400 16.5px/1.6 var(--ils-sans);color:var(--ils-body);max-width:44ch}

/* Add before you go -------------------------------------------- */
.ils-upsell{
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  padding:22px;background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-upsell__title{margin:0 0 16px;font:800 19px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-upsell__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ils-upsell__item{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--ils-line);
  border-radius:var(--ils-r-sm);padding:11px;min-width:0;
  transition:border-color .22s var(--ils-ease),transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease);
}
.ils-upsell__item:hover{border-color:var(--ils-ink);transform:translateY(-3px);box-shadow:var(--ils-sh-lift)}
.ils-upsell__thumb{
  flex:0 0 48px;height:48px;border-radius:var(--ils-r-xs);overflow:hidden;display:block;
  box-shadow:inset 0 0 0 1px rgba(2,56,72,.08);
}
.ils-upsell__thumb .ils-ph{width:100%;height:100%;font-size:8px;padding:4px;letter-spacing:.08em}
.ils-upsell__thumb img{width:100%;height:100%;object-fit:cover}
.ils-upsell__body{flex:1;min-width:0;display:block}
.ils-upsell__name{display:block;font:600 13px/1.3 var(--ils-sans);color:var(--ils-ink)}
.ils-upsell__name a{color:inherit}
.ils-upsell__name a:hover{color:var(--ils-teal)}
.ils-upsell__price{display:block;font:600 13px/1 var(--ils-sans);color:var(--ils-teal);margin-top:5px}
.ils-upsell__add{
  flex:0 0 auto;font:600 11px/1 var(--ils-sans);color:var(--ils-ink);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-xs);padding:7px 11px;background:var(--ils-white);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-upsell__add:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}

/* Totals block, shared ------------------------------------------ */
.ils-totals__row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font:400 14px/1.45 var(--ils-sans)}
.ils-totals__k{color:var(--ils-muted)}
.ils-totals__v{font-weight:500}
.ils-totals__v.is-ink{color:var(--ils-ink)}
.ils-totals__v.is-teal{color:var(--ils-teal)}
.ils-totals__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:14px;padding-top:14px;border-top:1.5px solid var(--ils-hair-strong);
}
.ils-totals__label{font:800 20px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-totals__amount{font:800 32px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.035em}
.ils-totals--sm{margin-top:0}
.ils-totals--sm .ils-totals__total{margin-top:12px;padding-top:12px}
.ils-totals--sm .ils-totals__label{font-size:19px}
.ils-totals--sm .ils-totals__amount{font-size:30px}

/* Order summary (cart) ------------------------------------------ */
.ils-summary,.ils-osummary{
  position:sticky;top:104px;
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);background:var(--ils-white);
  overflow:hidden;
}
.ils-summary{box-shadow:4px 4px 0 var(--ils-cyan),var(--ils-sh-soft-lg)}
.admin-bar .ils-summary,.admin-bar .ils-osummary{top:136px}
.ils-summary__head{padding:24px 24px 18px;border-bottom:1.5px solid var(--ils-hair-strong)}
.ils-summary__title{margin:0 0 16px;font:800 24px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.035em}
.ils-summary__body{padding:18px 24px 24px;display:flex;flex-direction:column;gap:12px}
.ils-coupon{display:flex;gap:8px}
.ils-coupon__field{
  flex:1;min-width:0;height:46px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);
  padding:0 15px;font:400 14px/1 var(--ils-sans);background:var(--ils-white);
}
.ils-coupon__field::placeholder{color:var(--ils-strike)}
.ils-coupon__field:focus{border-color:var(--ils-ink)}
.ils-coupon__btn{
  height:46px;padding:0 19px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-sm);
  background:var(--ils-white);font:600 13px/1 var(--ils-sans);color:var(--ils-ink);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-coupon__btn:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-coupon__msg{margin:-4px 0 0;font:400 13px/1.45 var(--ils-sans);color:var(--ils-teal)}
.ils-coupon__msg:empty{display:none}
.ils-summary__cta{
  display:block;padding:18px;border-radius:var(--ils-r-pill);background:var(--ils-ink);
  color:var(--ils-accent);font:600 16px/1 var(--ils-sans);text-align:center;
  box-shadow:0 12px 22px -14px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-summary__cta:hover{color:var(--ils-accent);transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(2,56,72,.95)}
.ils-summary__alt{display:flex;gap:10px}
.ils-altbtn{
  flex:1;padding:13px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-pill);
  text-align:center;font:600 13px/1 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease),transform .2s var(--ils-ease);
}
.ils-altbtn:hover{transform:translateY(-2px);border-color:var(--ils-ink)}
.ils-altbtn--accent{background:var(--ils-accent);border-color:var(--ils-ink)}
.ils-altbtn--accent:hover{filter:brightness(1.05)}
.ils-ticks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ils-tick{
  position:relative;padding-left:20px;font:400 13px/1.45 var(--ils-sans);color:var(--ils-muted);
}
.ils-tick::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ils-teal);font-weight:700}

/* --------------------------------------------------------------
   16. Checkout
-------------------------------------------------------------- */
.ils-header--checkout .ils-header__inner{grid-template-columns:1fr auto 1fr}
.ils-header__back{font:500 13px/1 var(--ils-sans);color:var(--ils-eyebrow);justify-self:start}
.ils-header__back:hover{color:var(--ils-ink)}
.ils-header__secure{
  justify-self:end;display:inline-flex;align-items:center;gap:8px;
  font:500 13px/1 var(--ils-sans);color:var(--ils-eyebrow);
}
.ils-checkout{background:var(--ils-cream);padding:clamp(26px,3.4vw,40px) 0 var(--ils-section)}
.ils-checkout__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(22px,2.6vw,34px);align-items:start;
}
.ils-checkout__main{display:flex;flex-direction:column;gap:18px;min-width:0}
.ils-checkout__content{padding-top:var(--ils-section)}
.ils-step{
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);background:var(--ils-white);
  overflow:hidden;box-shadow:var(--ils-sh-soft);
}
.ils-step__head{
  display:flex;align-items:center;gap:12px;padding:18px 24px;
  border-bottom:1.5px solid var(--ils-hair-strong);
}
.ils-step--1 .ils-step__head{background:var(--ils-accent)}
.ils-step--2 .ils-step__head{background:var(--ils-cyan)}
.ils-step--3 .ils-step__head{background:var(--ils-ice)}
.ils-step__num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--ils-ink);color:var(--ils-accent);
  display:grid;place-items:center;font:800 15px/1 var(--ils-display);
}
.ils-step__title{margin:0;font:800 22px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-step__body{padding:22px 24px 24px}
.ils-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ils-field{margin:0;min-width:0}
.ils-field--full{grid-column:span 2}
.ils-field__label{
  display:block;font:600 11px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ils-muted);margin-bottom:8px;
}
.ils-field__input{
  width:100%;height:48px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);
  padding:0 15px;font:400 15px/1 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
  transition:border-color .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-field__input::placeholder{color:var(--ils-strike)}
.ils-field__input:focus{border-color:var(--ils-ink);box-shadow:0 0 0 3px rgba(57,209,220,.22)}
.ils-field__input:user-invalid{border-color:var(--ils-danger)}
.ils-checkbox{
  display:flex;align-items:center;gap:11px;font:400 14px/1.45 var(--ils-sans);color:var(--ils-body);
  margin-top:2px;cursor:pointer;position:relative;
}
.ils-checkbox input{position:absolute;opacity:0;width:0;height:0}
.ils-checkbox:focus-within .ils-check{box-shadow:0 0 0 3px rgba(57,209,220,.32)}
.ils-checkbox input:not(:checked)+.ils-check{background:transparent}
.ils-checkbox input:not(:checked)+.ils-check svg{opacity:0}
.ils-ships{display:flex;flex-direction:column;gap:11px}
.ils-ship{
  position:relative;display:flex;align-items:center;gap:14px;border:1.5px solid var(--ils-line);
  border-radius:var(--ils-r-sm);padding:15px 17px;background:var(--ils-white);cursor:pointer;
  transition:border-color .2s var(--ils-ease),background .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-ship:hover{border-color:var(--ils-ink)}
.ils-ship:focus-within{border-color:var(--ils-ink);box-shadow:0 0 0 3px rgba(57,209,220,.32)}
.ils-ship.is-active{border-color:var(--ils-ink);background:var(--ils-ice)}
.ils-ship input{position:absolute;opacity:0;width:0;height:0}
.ils-ship__radio{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ils-ink);
  background:var(--ils-white);display:grid;place-items:center;
}
.ils-ship__radio::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent}
.ils-ship.is-active .ils-ship__radio{background:var(--ils-ink)}
.ils-ship.is-active .ils-ship__radio::after{background:var(--ils-accent)}
.ils-ship__body{flex:1;min-width:0;display:block}
.ils-ship__name{display:block;font:600 15px/1.25 var(--ils-sans);color:var(--ils-ink)}
.ils-ship__sub{display:block;font:400 13px/1.35 var(--ils-sans);color:var(--ils-muted);margin-top:4px}
.ils-ship__price{font:600 15px/1 var(--ils-sans);color:var(--ils-ink)}
.ils-ship__price.is-free{color:var(--ils-teal)}
.ils-paytabs{display:flex;gap:10px;flex-wrap:wrap}
.ils-paytab{
  flex:1 1 0;min-width:96px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-sm);
  padding:13px 10px;text-align:center;background:var(--ils-white);color:var(--ils-ink);
  font:600 13px/1 var(--ils-sans);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease),transform .2s var(--ils-ease);
}
.ils-paytab:hover{border-color:var(--ils-ink);transform:translateY(-2px)}
.ils-paytab.is-active{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-paypanel{margin-top:16px}
.ils-paypanel__note{
  margin:0;padding:16px 18px;border:1.5px dashed var(--ils-hair-strong);border-radius:var(--ils-r-sm);
  background:var(--ils-ice);font:400 14px/1.5 var(--ils-sans);color:var(--ils-body);
}
.ils-cardfields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ils-place{
  width:100%;margin-top:18px;padding:18px;border-radius:var(--ils-r-pill);background:var(--ils-ink);
  border:1.5px solid var(--ils-ink);color:var(--ils-accent);font:600 17px/1 var(--ils-sans);text-align:center;
  box-shadow:3px 3px 0 var(--ils-cyan-deep),0 16px 26px -18px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-place:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ils-cyan-deep),0 22px 30px -18px rgba(2,56,72,.9)}
.ils-terms{margin:14px 0 0;text-align:center;font:400 13px/1.5 var(--ils-sans);color:var(--ils-muted)}

/* Checkout order summary ---------------------------------------- */
.ils-osummary{box-shadow:4px 4px 0 var(--ils-accent),var(--ils-sh-soft-lg)}
.ils-osummary__head{
  padding:20px 24px 16px;border-bottom:1.5px solid var(--ils-hair-strong);
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
}
.ils-osummary__title{margin:0;font:800 22px/1 var(--ils-display);color:var(--ils-ink);letter-spacing:-.035em}
.ils-osummary__edit{font:500 13px/1 var(--ils-sans);color:var(--ils-teal)}
.ils-osummary__edit:hover{text-decoration:underline;text-underline-offset:4px}
.ils-osummary__items{
  padding:18px 24px;display:flex;flex-direction:column;gap:15px;
  border-bottom:1.5px solid var(--ils-hair-strong);
}
.ils-oitem{display:flex;gap:14px;align-items:center}
.ils-oitem__media{
  position:relative;flex:0 0 56px;height:56px;border-radius:var(--ils-r-sm);
  border:1.5px solid var(--ils-hair-strong);overflow:visible;display:block;
}
.ils-oitem__media img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--ils-r-sm) - 2px)}
.ils-oitem__media .ils-ph{width:100%;height:100%;font-size:7.5px;padding:4px;letter-spacing:.06em}
.ils-oitem__qty{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--ils-ink);color:var(--ils-accent);display:grid;place-items:center;
  font:600 11px/1 var(--ils-sans);
}
.ils-oitem__body{flex:1;min-width:0;display:block}
.ils-oitem__name{display:block;font:600 14px/1.3 var(--ils-sans);color:var(--ils-ink)}
.ils-oitem__name a{color:inherit}
.ils-oitem__name a:hover{color:var(--ils-teal)}
.ils-oitem__variant{display:block;font:400 12px/1.35 var(--ils-sans);color:var(--ils-muted);margin-top:3px}
.ils-oitem__price{font:600 15px/1 var(--ils-sans);color:var(--ils-ink)}
.ils-osummary__totals{padding:18px 24px}
.ils-ticks--osummary{margin:0;padding:0 24px 24px}

/* Slim cart / checkout footer ----------------------------------- */
.ils-footer--min{background:var(--ils-ink);padding:30px 0}
.ils-footer__minbar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font:400 13px/1.5 var(--ils-sans);color:var(--ils-foot-dim);
}
.ils-footer__minlinks{display:flex;gap:26px;flex-wrap:wrap}
.ils-footer__minlinks a{color:var(--ils-foot-dim);font:400 13px/1.5 var(--ils-sans)}
.ils-footer__minlinks a:hover{color:var(--ils-cyan)}

/* --------------------------------------------------------------
   17. WooCommerce
-------------------------------------------------------------- */
.ils-wcpage{background:var(--ils-cream);padding:var(--ils-section) 0}
.ils-wc-notices{padding-top:18px}
.ils-wc-notices:empty{display:none}

/* Notices ------------------------------------------------------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  list-style:none;margin:0 0 18px;padding:15px 20px;border-radius:var(--ils-r-sm);
  border:1.5px solid var(--ils-hair-strong);background:var(--ils-ice);
  font:500 14.5px/1.5 var(--ils-sans);color:var(--ils-ink);
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px 16px;
}
.woocommerce-message::before,.woocommerce-message::after,
.woocommerce-info::before,.woocommerce-info::after,
.woocommerce-error::before,.woocommerce-error::after{content:none;display:none}
.woocommerce-message{background:var(--ils-ok-bg);border-color:var(--ils-ok-line)}
.woocommerce-error{background:var(--ils-danger-bg);border-color:var(--ils-danger-line);flex-direction:column;align-items:flex-start}
.woocommerce-error li{list-style:none}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  order:2;flex:0 0 auto;margin-left:auto;white-space:nowrap;
  padding:10px 18px;border-radius:var(--ils-r-pill);
  background:var(--ils-ink);color:var(--ils-accent);border:1.5px solid var(--ils-ink);
  font:600 13px/1 var(--ils-sans);
}
.woocommerce-message .button:hover,.woocommerce-info .button:hover{filter:brightness(1.15)}

/* Cards and buy panel ------------------------------------------- */
.ils-card__tag--out{background:var(--ils-ink);color:var(--ils-cream)}
.ils-card__was{font:400 13px/1 var(--ils-sans);color:var(--ils-strike);margin-left:6px}
.ils-buy__sku{font:400 12px/1 var(--ils-sans);letter-spacing:.08em;color:var(--ils-muted);text-transform:uppercase}
.ils-buy__stock.is-out{color:var(--ils-danger)!important}
.ils-buy__form{display:flex;flex-direction:column;gap:16px;margin:0}
.ils-soldout{
  flex:1;padding:18px 28px;border-radius:var(--ils-r-pill);background:var(--ils-sand);
  border:1.5px dashed var(--ils-hair-strong);color:var(--ils-muted);
  font:600 16px/1 var(--ils-sans);text-align:center;
}

/* Quantity input inside the pill stepper ------------------------ */
.ils-qty__input{
  width:44px;border:0;background:transparent;text-align:center;
  font:600 16px/1 var(--ils-sans);color:var(--ils-ink);padding:0;-moz-appearance:textfield;
}
.ils-qty__input::-webkit-outer-spin-button,.ils-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ils-qty__input:focus{outline:0}
.ils-qty:focus-within{border-color:var(--ils-ink);box-shadow:0 0 0 3px rgba(57,209,220,.22)}
.ils-qty--sm .ils-qty__input{width:34px;font-size:15px}

/* Cart ---------------------------------------------------------- */
.ils-cart__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.ils-cart__actions .ils-btn{padding:13px 24px;font-size:14px}
.ils-line__warn{font:600 12.5px/1.4 var(--ils-sans);color:var(--ils-danger)}
.ils-line__actions .ils-linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/1 var(--ils-sans);color:var(--ils-teal);text-decoration:underline;text-underline-offset:3px;
}
.ils-line__actions .ils-linkbtn:hover{color:var(--ils-teal-dark)}

/* Checkout fields: WooCommerce markup, I Love Swimming looks ----- */
.ils-checkout--wc .woocommerce-billing-fields h3,
.ils-checkout--wc .woocommerce-shipping-fields h3,
.ils-checkout--wc .woocommerce-additional-fields h3{
  margin:0 0 14px;font:800 17px/1.2 var(--ils-display);letter-spacing:-.02em;color:var(--ils-ink);
}
.ils-checkout--wc .woocommerce-shipping-fields,
.ils-checkout--wc .woocommerce-additional-fields{margin-top:22px;padding-top:20px;border-top:1.5px solid var(--ils-hair)}
.ils-checkout--wc .woocommerce-billing-fields__field-wrapper,
.ils-checkout--wc .woocommerce-shipping-fields__field-wrapper,
.ils-checkout--wc .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:15px;
}
.ils-checkout--wc .form-row{margin:0;min-width:0;padding:0}
.ils-checkout--wc .form-row-wide,
.ils-checkout--wc .form-row.notes,
.ils-checkout--wc .form-row.create-account{grid-column:span 2}
.ils-checkout--wc .form-row label{
  display:block;font:600 11px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ils-muted);margin-bottom:8px;
}
.ils-checkout--wc .form-row label.checkbox{
  display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;
  font:400 14px/1.45 var(--ils-sans);color:var(--ils-body);margin:0;
}
.ils-checkout--wc .form-row .required{color:var(--ils-danger);text-decoration:none}
.ils-checkout--wc .form-row input[type=text],
.ils-checkout--wc .form-row input[type=email],
.ils-checkout--wc .form-row input[type=tel],
.ils-checkout--wc .form-row input[type=password],
.ils-checkout--wc .form-row input[type=number],
.ils-checkout--wc .form-row select,
.ils-wcpage .woocommerce input[type=text],
.ils-wcpage .woocommerce input[type=email],
.ils-wcpage .woocommerce input[type=tel],
.ils-wcpage .woocommerce input[type=password],
.ils-wcpage .woocommerce select{
  width:100%;height:48px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);
  padding:0 15px;font:400 15px/1 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
  transition:border-color .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-checkout--wc .form-row textarea,
.ils-wcpage .woocommerce textarea{
  width:100%;min-height:104px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);
  padding:13px 15px;font:400 15px/1.5 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
}
.ils-checkout--wc .form-row input:focus,
.ils-checkout--wc .form-row select:focus,
.ils-checkout--wc .form-row textarea:focus,
.ils-wcpage .woocommerce input:focus,
.ils-wcpage .woocommerce textarea:focus{
  border-color:var(--ils-ink);box-shadow:0 0 0 3px rgba(57,209,220,.22);outline:0;
}
.ils-checkout--wc .form-row.woocommerce-invalid input,
.ils-checkout--wc .form-row.woocommerce-invalid select{border-color:var(--ils-danger)}
.ils-checkout--wc .select2-container .select2-selection--single{
  height:48px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);background:var(--ils-white);
}
.ils-checkout--wc .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:14px;color:var(--ils-ink);font:400 15px/45px var(--ils-sans);
}
.ils-checkout--wc .select2-container--default .select2-selection--single .select2-selection__arrow{height:45px}

/* Shipping step ------------------------------------------------- */
.ils-ships__pkg{
  font:600 11px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ils-muted);margin-bottom:2px;
}
.ils-ships__none{margin:0;font:400 14px/1.5 var(--ils-sans);color:var(--ils-muted)}
.ils-ship:has(input:checked){border-color:var(--ils-ink);background:var(--ils-ice)}
.ils-ship:has(input:checked) .ils-ship__radio{background:var(--ils-ink)}
.ils-ship:has(input:checked) .ils-ship__radio::after{background:var(--ils-accent)}

/* Payment step: WooCommerce gateways in the design's tab shapes -- */
.ils-checkout--wc #payment{background:transparent;border:0;padding:0}
.ils-checkout--wc .wc_payment_methods{
  list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
.ils-checkout--wc .wc_payment_method{flex:1 1 auto;min-width:0}
.ils-checkout--wc .wc_payment_method>label{
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--ils-r-pill);
  border:1.5px solid var(--ils-hair-strong);background:var(--ils-white);cursor:pointer;
  font:600 14px/1 var(--ils-sans);color:var(--ils-ink);white-space:nowrap;
  transition:transform .2s var(--ils-ease),border-color .2s var(--ils-ease),background .2s var(--ils-ease);
}
.ils-checkout--wc .wc_payment_method>label:hover{border-color:var(--ils-ink);transform:translateY(-2px)}
.ils-checkout--wc .wc_payment_method>input{position:absolute;opacity:0;width:0;height:0}
.ils-checkout--wc .wc_payment_method:has(input:checked)>label{
  background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);
}
.ils-checkout--wc .wc_payment_method>label img{max-height:22px;width:auto;display:inline-block}
.ils-checkout--wc .payment_box{
  flex:1 1 100%;margin:0;padding:16px 18px;border:1.5px dashed var(--ils-hair-strong);
  border-radius:var(--ils-r-sm);background:var(--ils-ice);
  font:400 14px/1.5 var(--ils-sans);color:var(--ils-body);
}
.ils-checkout--wc .payment_box p{margin:0 0 10px}
.ils-checkout--wc .payment_box p:last-child{margin:0}
.ils-checkout--wc .woocommerce-privacy-policy-text,
.ils-checkout--wc .woocommerce-terms-and-conditions-wrapper{
  font:400 13px/1.5 var(--ils-sans);color:var(--ils-muted);margin-top:14px;
}
.ils-checkout--wc #place_order{
  width:100%;margin-top:18px;padding:18px;border-radius:var(--ils-r-pill);background:var(--ils-ink);
  border:1.5px solid var(--ils-ink);color:var(--ils-accent);font:600 17px/1 var(--ils-sans);text-align:center;
  box-shadow:3px 3px 0 var(--ils-cyan-deep),0 16px 26px -18px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);cursor:pointer;
}
.ils-checkout--wc #place_order:hover{
  transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ils-cyan-deep),0 22px 30px -18px rgba(2,56,72,.9);
  color:var(--ils-accent);
}

/* My account and the other WooCommerce pages -------------------- */
.ils-wcpage h1,.ils-wcpage h2{font-family:var(--ils-display);font-weight:800;letter-spacing:-.03em;color:var(--ils-ink)}
.ils-wcpage h2{font-size:26px;margin:0 0 16px}
.ils-wcpage .woocommerce button.button,
.ils-wcpage .woocommerce a.button,
.ils-wcpage .woocommerce input.button{
  display:inline-block;padding:14px 26px;border-radius:var(--ils-r-pill);background:var(--ils-ink);
  border:1.5px solid var(--ils-ink);color:var(--ils-accent);font:600 15px/1 var(--ils-sans);
  text-align:center;cursor:pointer;transition:transform .2s var(--ils-ease),filter .2s var(--ils-ease);
}
.ils-wcpage .woocommerce button.button:hover,
.ils-wcpage .woocommerce a.button:hover{transform:translateY(-2px);filter:brightness(1.12);color:var(--ils-accent)}
.ils-wcpage table.shop_table,.ils-wcpage table.woocommerce-orders-table{
  width:100%;border-collapse:collapse;background:var(--ils-white);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);overflow:hidden;
  font:400 14.5px/1.5 var(--ils-sans);color:var(--ils-body);
}
.ils-wcpage table.shop_table thead th,.ils-wcpage table.woocommerce-orders-table thead th{
  text-align:left;padding:14px 16px;background:var(--ils-sand);color:var(--ils-ink);
  font:600 11px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;
}
.ils-wcpage table.shop_table td,.ils-wcpage table.woocommerce-orders-table td,
.ils-wcpage table.shop_table tbody th,.ils-wcpage table.woocommerce-orders-table tbody th{
  padding:14px 16px;border-top:1px solid var(--ils-hair);text-align:left;font-weight:400;
}
.ils-wcpage table.shop_table tfoot th{
  padding:14px 16px;border-top:1px solid var(--ils-hair);text-align:left;
  font:600 14.5px/1.5 var(--ils-sans);color:var(--ils-ink);
}
.ils-wcpage .woocommerce-table--order-details tfoot th{background:transparent;text-transform:none;letter-spacing:0;font-size:14.5px}
.ils-wcpage table a{font-weight:600}
.ils-wcpage table.shop_table .woocommerce-button,
.ils-wcpage table.woocommerce-orders-table .woocommerce-button{
  padding:9px 16px;font-size:13px;margin:2px 0 2px 6px;
}
.ils-wcpage .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap}
.ils-wcpage .woocommerce-orders-table__cell-order-status{
  font:600 12px/1.4 var(--ils-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ils-teal);
}
.ils-wcpage .woocommerce-pagination{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* WooCommerce ships a float grid of its own — 30/68 on the account panes,
   48% on col2-set, plus clearfix pseudo-elements that land as phantom grid
   items. Switch all of it off inside the account shell so the theme's grid
   is the only layout in play. ---------------------------------------- */
.ils-wcpage .woocommerce-MyAccount-navigation,
.ils-wcpage .woocommerce-MyAccount-content,
.ils-wcpage .ils-account .col2-set,
.ils-wcpage .ils-account .col2-set .col-1,
.ils-wcpage .ils-account .col2-set .col-2,
.ils-wcpage .ils-account .woocommerce-column,
.ils-wcpage .ils-account form .form-row,
.ils-wcpage .ils-account form .form-row-first,
.ils-wcpage .ils-account form .form-row-last,
.ils-wcpage .ils-account form .form-row-wide{float:none;width:auto;clear:none}
.ils-wcpage .ils-account .col2-set::before,
.ils-wcpage .ils-account .col2-set::after,
.ils-wcpage .ils-account form .form-row::before,
.ils-wcpage .ils-account form .form-row::after{content:none;display:none}

/* Account shell: greeting band, icon sidebar, content card ------- */
.ils-account{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.ils-account__head{
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,2vw,22px);
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-lg);
  background:linear-gradient(135deg,var(--ils-ice) 0%,var(--ils-white) 64%);
  box-shadow:var(--ils-sh-soft);
}
.ils-account__avatar{
  flex:0 0 auto;width:62px;height:62px;border-radius:50%;
  background:var(--ils-cyan);border:1.5px solid var(--ils-ink);box-shadow:3px 3px 0 var(--ils-ink);
  display:grid;place-items:center;color:var(--ils-ink);
  font:800 21px/1 var(--ils-display);letter-spacing:-.02em;
}
.ils-account__head--login .ils-account__avatar{background:var(--ils-accent)}
.ils-account__intro{flex:1 1 240px;min-width:0}
.ils-account__eyebrow{margin:0 0 8px}
.ils-account__title{
  margin:0;font:800 clamp(28px,3.2vw,40px)/1.02 var(--ils-display);
  letter-spacing:-.04em;color:var(--ils-ink);
}
.ils-account__sub{margin:8px 0 0;font:400 15px/1.55 var(--ils-sans);color:var(--ils-body);overflow-wrap:anywhere}
.ils-account--login .ils-account__sub{max-width:56ch}
.ils-account__logout{flex:0 0 auto;padding:13px 22px;font-size:14.5px}
.ils-account__grid{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(20px,2.2vw,30px);align-items:start;
}
.ils-account .woocommerce-MyAccount-content{
  min-width:0;padding:clamp(22px,2.6vw,32px);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-account .woocommerce-MyAccount-content>p:first-of-type{margin-top:0}
.ils-account .woocommerce-MyAccount-content>h2:first-child{margin-top:0}

/* Account navigation -------------------------------------------- */
.ils-accountnav{
  position:sticky;top:104px;padding:12px;
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.admin-bar .ils-accountnav{top:136px}
.ils-accountnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ils-accountnav li{margin:0}
.ils-accountnav a{
  display:flex;align-items:center;gap:12px;padding:10px 13px;
  border:1.5px solid transparent;border-radius:var(--ils-r-sm);
  font:600 14.5px/1.3 var(--ils-sans);color:var(--ils-ink);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-accountnav a:hover{background:var(--ils-ice);border-color:var(--ils-hair);color:var(--ils-ink)}
.ils-accountnav__icon{
  flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--ils-ice);border:1px solid var(--ils-hair);color:var(--ils-teal);
  transition:background .2s var(--ils-ease),border-color .2s var(--ils-ease),color .2s var(--ils-ease);
}
.ils-accountnav__label{min-width:0;overflow-wrap:normal}
.ils-accountnav li.is-active>a{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-accountnav li.is-active .ils-accountnav__icon{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--ils-cyan);
}
.ils-accountnav li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:6px;padding-top:8px;border-top:1px solid var(--ils-hair);
}

/* Dashboard ------------------------------------------------------ */
.ils-dash__lead{margin:0 0 22px;font:400 16px/1.62 var(--ils-sans);color:var(--ils-body);max-width:66ch}
.ils-dash__lead a,.ils-dash__foot a{text-decoration:underline;text-underline-offset:3px}
.ils-dash__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;margin:0 0 26px}
.ils-dash__stat{
  display:flex;flex-direction:column;gap:7px;padding:18px 20px;
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);background:var(--ils-sand);
}
.ils-dash__statv{font:800 30px/1 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}
.ils-dash__statk{font:600 11px/1.3 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted)}
.ils-dash__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.ils-dash__tile{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:20px 46px 20px 20px;
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);color:var(--ils-ink);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-dash__tile:hover{
  transform:translateY(-4px);border-color:var(--ils-ink);color:var(--ils-ink);
  box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg);
}
.ils-dash__tileicon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--ils-ice);border:1.5px solid var(--ils-hair);color:var(--ils-teal);
}
.ils-dash__tiletitle{font:800 17px/1.2 var(--ils-display);letter-spacing:-.025em}
.ils-dash__tiletext{font:400 13.5px/1.5 var(--ils-sans);color:var(--ils-muted)}
.ils-dash__tilego{position:absolute;top:22px;right:18px;color:var(--ils-muted);transition:transform .22s var(--ils-ease),color .22s var(--ils-ease)}
.ils-dash__tile:hover .ils-dash__tilego{color:var(--ils-teal);transform:translateX(3px)}
.ils-dash__foot{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--ils-hair);
  font:400 14px/1.55 var(--ils-sans);color:var(--ils-muted);
}

/* Login and register -------------------------------------------- */
.ils-account--login{max-width:1000px;margin:0 auto;width:100%}
.ils-login{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,26px)}
.ils-login--split{grid-template-columns:repeat(2,minmax(0,1fr))}
.ils-login:not(.ils-login--split) .ils-login__panel{max-width:540px;width:100%;margin:0 auto}
.ils-login__panel{
  padding:clamp(24px,2.8vw,34px);border:1.5px solid var(--ils-hair-strong);
  border-radius:var(--ils-r-lg);background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-login__panel--register{background:var(--ils-sand)}
h2.ils-login__title{margin:0 0 8px;font:800 26px/1.05 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}
.ils-login__lead{margin:0 0 20px;font:400 14.5px/1.55 var(--ils-sans);color:var(--ils-muted)}
.ils-account form.ils-login__form{
  display:flex;flex-direction:column;gap:15px;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;
}
.ils-login__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.ils-login__actions .button{flex:0 0 auto}
.ils-login__form .woocommerce-LostPassword{margin:0;font:500 14px/1.4 var(--ils-sans)}
.ils-login__note{margin:0;font:400 13.5px/1.5 var(--ils-sans);color:var(--ils-muted)}
.ils-account__ticks{flex-direction:row;flex-wrap:wrap;gap:10px 26px;margin:0}

/* Account forms: WooCommerce markup, I Love Swimming looks -------- */
.ils-account .form-row,
.ils-account .woocommerce-form-row{margin:0;padding:0;min-width:0}
.ils-account .form-row>label{
  display:block;margin-bottom:8px;font:600 11px/1.3 var(--ils-sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted);
}
.ils-account .form-row .required{color:var(--ils-danger);text-decoration:none}
.ils-account .form-row>label.woocommerce-form__label-for-checkbox,
.ils-account .form-row>label.checkbox{
  display:flex;align-items:center;gap:10px;margin:0;
  font:400 14px/1.45 var(--ils-sans);letter-spacing:0;text-transform:none;color:var(--ils-body);
}
.ils-account .woocommerce-EditAccountForm,
.ils-account .woocommerce-address-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:0;
}
.ils-account .woocommerce-EditAccountForm>p,
.ils-account .woocommerce-address-fields__field-wrapper>p{grid-column:1/-1;margin:0;min-width:0}
.ils-account .woocommerce-EditAccountForm>p.form-row-first,
.ils-account .woocommerce-address-fields__field-wrapper>p.form-row-first{grid-column:1}
.ils-account .woocommerce-EditAccountForm>p.form-row-last,
.ils-account .woocommerce-address-fields__field-wrapper>p.form-row-last{grid-column:2}
.ils-account .clear{display:none}
.ils-account form>h2{margin:0 0 20px;font:800 26px/1.05 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink)}
/* A rendered legend straddles the fieldset's block-start edge, so the group
   carries no panel of its own — the legend reads as a plain section heading. */
.ils-account fieldset{
  grid-column:1/-1;margin:26px 0 0;padding:0;border:0;background:transparent;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;
}
.ils-account fieldset legend{
  grid-column:1/-1;width:100%;padding:0 0 8px;margin:0;
  font:800 19px/1.2 var(--ils-display);letter-spacing:-.03em;color:var(--ils-ink);
}
.ils-account fieldset>p{grid-column:1/-1;margin:0}
.ils-account fieldset>p:nth-of-type(2),
.ils-account fieldset>p:nth-of-type(3){grid-column:span 1}
.ils-account #account_display_name_description{
  display:block;margin-top:7px;font:400 12.5px/1.45 var(--ils-sans);color:var(--ils-muted);
}
.ils-account #account_display_name_description em{font-style:normal}
.ils-account .woocommerce-address-fields>p,
.ils-account .woocommerce-EditAccountForm>p:last-child{margin-top:22px}
.ils-account .select2-container .select2-selection--single{
  height:48px;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);background:var(--ils-white);
}
.ils-account .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:14px;color:var(--ils-ink);font:400 15px/45px var(--ils-sans);
}
.ils-account .select2-container--default .select2-selection--single .select2-selection__arrow{height:45px}

/* Saved addresses ------------------------------------------------ */
.ils-addresses__lead{margin:0 0 20px;font:400 15px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.ils-address{
  display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-address__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;border:0}
.ils-address__icon{position:relative;top:3px}
.ils-address__icon{display:flex;color:var(--ils-teal)}
.ils-address h2.ils-address__title{margin:0;font:800 18px/1.2 var(--ils-display);letter-spacing:-.025em;color:var(--ils-ink)}
.ils-address__edit{
  margin-left:auto;font:600 13px/1 var(--ils-sans);color:var(--ils-teal);
  text-decoration:underline;text-underline-offset:3px;
}
.ils-address__body{margin:0;font:400 15px/1.62 var(--ils-sans);font-style:normal;color:var(--ils-body)}
.ils-address__empty{color:var(--ils-muted)}

/* Order detail inside the account ------------------------------- */
.ils-account .woocommerce-order-details,
.ils-account .woocommerce-customer-details{margin-top:30px}
.ils-account .woocommerce-order-details__title,
.ils-account .woocommerce-column__title{
  margin:0 0 14px;font:800 21px/1.15 var(--ils-display);letter-spacing:-.03em;color:var(--ils-ink);
}
.ils-account .woocommerce-columns{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none;
}
.ils-account .woocommerce-column address{
  margin:0;padding:18px 20px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-sand);font:400 15px/1.6 var(--ils-sans);font-style:normal;color:var(--ils-body);
}
.ils-account .woocommerce-order-overview{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
}
.ils-account .woocommerce-order-overview li{
  padding:16px 18px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);
  font:600 11px/1.3 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted);
}
.ils-account .woocommerce-order-overview li strong{
  display:block;margin-top:7px;font:800 18px/1.2 var(--ils-display);
  letter-spacing:-.02em;text-transform:none;color:var(--ils-ink);
}

/* Content column: rhythm and hierarchy ---------------------------- */
.ils-account .woocommerce-MyAccount-content>*:first-child{margin-top:0}
.ils-account .woocommerce-MyAccount-content>*:last-child{margin-bottom:0}
.ils-account .woocommerce-MyAccount-content>p{margin:0 0 20px;font:400 16px/1.62 var(--ils-sans);color:var(--ils-body)}
.ils-account .woocommerce-MyAccount-content>h2{
  margin:34px 0 16px;font:800 24px/1.1 var(--ils-display);letter-spacing:-.035em;color:var(--ils-ink);
}
.ils-account .woocommerce-MyAccount-content>table{margin:0 0 22px}
.ils-account .woocommerce-notices-wrapper:empty{display:none}

/* The "Order #x was placed on … and is currently …" line ---------- */
.ils-account .woocommerce-MyAccount-content mark{
  background:transparent;color:var(--ils-ink);font-weight:700;padding:0;
}
.ils-account .woocommerce-MyAccount-content mark.order-status{
  display:inline-block;padding:4px 12px;border-radius:var(--ils-r-pill);
  background:var(--ils-accent);border:1.5px solid var(--ils-ink);
  font:700 12.5px/1.35 var(--ils-sans);letter-spacing:.02em;
}

/* Order details table -------------------------------------------- */
.ils-wcpage table.woocommerce-table--order-details{table-layout:auto}
.ils-wcpage table.woocommerce-table--order-details thead th:last-child,
.ils-wcpage table.woocommerce-table--order-details tbody td:last-child,
.ils-wcpage table.woocommerce-table--order-details tfoot td{text-align:right;white-space:nowrap}
.ils-wcpage table.woocommerce-table--order-details tbody td.product-name{font-weight:600;color:var(--ils-ink)}
.ils-wcpage table.woocommerce-table--order-details tfoot th{
  width:60%;background:transparent;color:var(--ils-body);
  font:600 14.5px/1.5 var(--ils-sans);letter-spacing:0;text-transform:none;
}
.ils-wcpage table.woocommerce-table--order-details tfoot td{font-weight:600;color:var(--ils-ink)}
.ils-wcpage table.woocommerce-table--order-details tfoot tr:has(.amount):not(:has(~tr .amount)) th,
.ils-wcpage table.woocommerce-table--order-details tfoot tr:has(.amount):not(:has(~tr .amount)) td{
  background:var(--ils-sand);color:var(--ils-ink);font-weight:800;
}
.ils-wcpage table.woocommerce-table--order-details tfoot tr:has(.amount):not(:has(~tr .amount)) td{
  font:800 19px/1.2 var(--ils-display);letter-spacing:-.02em;
}
.ils-wcpage .order-actions--heading{vertical-align:middle}
.ils-wcpage .order-actions-button{margin:2px 8px 2px 0}
.ils-wcpage table.woocommerce-MyAccount-downloads td,
.ils-wcpage table.woocommerce-MyAccount-downloads th{text-align:left;vertical-align:middle}

/* Order updates -------------------------------------------------- */
.ils-account .woocommerce-OrderUpdates{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px}
.ils-account .woocommerce-OrderUpdate{
  padding:16px 18px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);
}
.ils-account .woocommerce-OrderUpdate-meta{
  margin:0 0 6px;font:600 11px/1.3 var(--ils-sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted);
}
.ils-account .woocommerce-OrderUpdate-description p{margin:0;font:400 15px/1.6 var(--ils-sans);color:var(--ils-body)}

/* Customer addresses on a viewed order ---------------------------- */
.ils-account .woocommerce-customer-details .addresses{margin:0}
.ils-account .woocommerce-column__title{
  margin:0 0 12px;font:800 19px/1.2 var(--ils-display);letter-spacing:-.028em;
  color:var(--ils-ink);text-wrap:nowrap;
}
.ils-account .woocommerce-column address{
  display:block;width:auto;border-width:1.5px;border-radius:var(--ils-r-md);
}
.ils-account .woocommerce-customer-details--phone,
.ils-account .woocommerce-customer-details--email{
  margin:12px 0 0;padding-left:1.6em;position:relative;
  font:400 14.5px/1.5 var(--ils-sans);color:var(--ils-body);word-break:break-word;
}

/* Order received ------------------------------------------------ */
.ils-thanks{background:var(--ils-cream);padding:var(--ils-section) 0}
.ils-thanks__title{margin:22px 0 10px;font:800 clamp(30px,3.6vw,44px)/1.05 var(--ils-display);letter-spacing:-.04em;color:var(--ils-ink)}
.ils-thanks__lead{margin:0;font:400 17px/1.6 var(--ils-sans);color:var(--ils-body);max-width:56ch}
.ils-thanks__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:28px 0 10px;
}
.ils-thanks__fact{
  padding:18px 20px;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  background:var(--ils-white);box-shadow:var(--ils-sh-soft);display:flex;flex-direction:column;gap:7px;
}
.ils-thanks__k{font:600 11px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted)}
.ils-thanks__v{font:800 18px/1.2 var(--ils-display);color:var(--ils-ink);letter-spacing:-.02em;word-break:break-word}
.ils-thanks__actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.ils-thanks .woocommerce-order-details,.ils-thanks .woocommerce-customer-details{margin-top:34px}

/* --------------------------------------------------------------
   18. Responsive
-------------------------------------------------------------- */
@media (max-width:1180px){
  .ils-cart__grid,.ils-checkout__grid{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1100px){
  .ils-grid{grid-template-columns:repeat(3,1fr)}
  .ils-types__row{grid-template-columns:repeat(2,1fr)}
  .ils-pdp__grid{grid-template-columns:1fr;gap:36px}
  .ils-buy__desc{max-width:none}
  .ils-specs__grid{grid-template-columns:1fr;gap:36px}
  .ils-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .ils-footer__intro{grid-column:1/-1}
  .ils-postlist{grid-template-columns:repeat(2,1fr)}
  .ils-cart__grid,.ils-checkout__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .ils-summary,.ils-osummary{position:static}
  .admin-bar .ils-summary,.admin-bar .ils-osummary{top:auto}
  .ils-cart__aside,.ils-checkout__aside{max-width:520px;width:100%}
}
@media (max-width:900px){
  html{scroll-padding-top:80px}
  .ils-hero{padding-top:40px}
  .ils-hero__grid{grid-template-columns:1fr;gap:34px;align-items:stretch}
  .ils-hero__copy{padding-bottom:0}
  .ils-hero__lead{max-width:none}
  .ils-hero__media{
    aspect-ratio:4/3;border-radius:var(--ils-r-lg);border-bottom:2px solid var(--ils-ink);
    animation:none;margin-bottom:-10px;
  }
  .ils-hero__media img{border-radius:calc(var(--ils-r-lg) - 2px)}
  .ils-sticker--a{left:12px}
  .ils-sticker--b{right:12px;bottom:14px}
  .ils-shophead__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .ils-chips{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ils-chips::-webkit-scrollbar{display:none}
  .ils-chip{flex:0 0 auto}
  .ils-sizeguide__inner{grid-template-columns:1fr}
  .ils-sizeguide__media{margin-right:0;box-shadow:inset 0 1px 0 rgba(2,56,72,.12)}
  .ils-reviews__grid{grid-template-columns:1fr}
  .ils-story__grid{grid-template-columns:1fr}
  .ils-upsell__grid{grid-template-columns:1fr}
  .ils-header{padding:12px 0}
  .ils-header__inner{grid-template-columns:1fr;justify-items:center;gap:14px}
  .ils-header__left,.ils-header__right{width:100%;justify-content:center}
  .ils-header__left{order:2}
  .ils-logo{order:1}
  .ils-logo .ils-logo__img{max-height:60px}
  .ils-header__right{order:3}
  .ils-header--checkout .ils-header__inner{grid-template-columns:1fr;justify-items:center}
  .ils-header__back{order:2;justify-self:center}
  .ils-header__secure{order:3;justify-self:center}
  .ils-account__grid{grid-template-columns:minmax(0,1fr)}
  .ils-accountnav{position:static;padding:8px}
  .admin-bar .ils-accountnav{top:auto}
  .ils-accountnav ul{
    flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ils-accountnav ul::-webkit-scrollbar{display:none}
  .ils-accountnav li{flex:0 0 auto}
  .ils-accountnav li.woocommerce-MyAccount-navigation-link--customer-logout{
    margin:0 0 0 4px;padding:0 0 0 10px;border-top:0;border-left:1px solid var(--ils-hair);
  }
  .ils-accountnav a{white-space:nowrap;padding:11px 16px;border-radius:var(--ils-r-pill)}
  .ils-accountnav a:hover{transform:none}
}
@media (max-width:760px){
  .ils-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .ils-types__row{grid-template-columns:1fr}
  .ils-gallery{flex-direction:column-reverse;align-items:stretch}
  .ils-gallery__thumbs{flex-direction:row;flex:0 0 auto;position:static;width:auto;overflow:visible}
  .ils-thumb{flex:1}
  .ils-gallery__main{margin-left:0}
  .ils-postlist{grid-template-columns:1fr}
  .ils-line{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .ils-line__side{
    grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
    gap:14px;padding-top:14px;border-top:1px solid var(--ils-hair);
  }
  .ils-line__each{order:3}
  .ils-footer__grid{grid-template-columns:1fr;gap:30px}
  .ils-footer__text,.ils-subscribe{max-width:none}
  .ils-card__body{padding:16px 16px 18px}
  .ils-legal-header__inner{padding-top:12px;padding-bottom:12px}
  .ils-legal__entry ul,.ils-legal__entry ol{margin-left:18px}
  .ils-login--split{grid-template-columns:minmax(0,1fr)}
  .ils-wcpage table.shop_table_responsive thead{display:none}
  .ils-wcpage table.shop_table_responsive tbody tr{display:block;border-top:1px solid var(--ils-hair)}
  .ils-wcpage table.shop_table_responsive tbody tr:first-child{border-top:0}
  .ils-wcpage table.shop_table_responsive tbody th,
  .ils-wcpage table.shop_table_responsive tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 16px;border-top:0;background:transparent;text-align:right;
    font:400 14.5px/1.5 var(--ils-sans);letter-spacing:0;text-transform:none;color:var(--ils-body);
  }
  .ils-wcpage table.shop_table_responsive tbody th::before,
  .ils-wcpage table.shop_table_responsive tbody td::before{
    content:attr(data-title);text-align:left;
    font:600 11px/1.4 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ils-muted);
  }
  .ils-wcpage .woocommerce-orders-table__cell-order-actions{flex-wrap:wrap;justify-content:flex-end}
}
@media (max-width:560px){
  .ils-hero__actions .ils-btn{flex:1 1 100%}
  .ils-hero__proof{gap:10px 14px}
  .ils-hero__proof .ils-rule{display:none}
  .ils-grid{grid-template-columns:1fr}
  .ils-sizes{flex-wrap:wrap}
  .ils-size-opt{flex:1 1 calc(50% - 5px)}
  .ils-buy__actions{flex-wrap:wrap}
  .ils-addtobag{flex:1 1 100%;order:3}
  .ils-assur{gap:10px 20px}
  .ils-subscribe{flex-wrap:wrap}
  .ils-subscribe__field{flex:1 1 100%}
  .ils-footer__bottom{flex-direction:column;gap:10px}
  .ils-cart__head{align-items:flex-start;flex-direction:column;gap:10px}
  .ils-fields,.ils-cardfields{grid-template-columns:1fr}
  .ils-checkout--wc .woocommerce-billing-fields__field-wrapper,
  .ils-checkout--wc .woocommerce-shipping-fields__field-wrapper,
  .ils-checkout--wc .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
  .ils-checkout--wc .form-row-wide,
  .ils-checkout--wc .form-row.notes,
  .ils-checkout--wc .form-row.create-account{grid-column:span 1}
  .ils-cart__actions{justify-content:stretch}
  .ils-cart__actions .ils-btn{flex:1}
  .ils-field--full{grid-column:span 1}
  .ils-step__body{padding:20px}
  .ils-summary__head,.ils-summary__body,.ils-osummary__head,.ils-osummary__items,.ils-osummary__totals{padding-left:20px;padding-right:20px}
  .ils-ticks--osummary{padding-left:20px;padding-right:20px}
  .ils-summary__alt{flex-wrap:wrap}
  .ils-altbtn{flex:1 1 100%}
  .ils-paytab{flex:1 1 calc(50% - 5px)}
  .ils-totals__amount{font-size:28px}
  .ils-footer__minbar{flex-direction:column;align-items:flex-start;gap:14px}
  .ils-footer__minlinks{gap:18px}
  .ils-review{padding:22px}
  .ils-404__code{font-size:68px}
  .woocommerce-message,.woocommerce-info{flex-wrap:wrap}
  .woocommerce-message .button,.woocommerce-info .button{margin-left:0}
  .ils-account__head{padding:22px}
  .ils-account__logout{flex:1 1 100%}
  .ils-account .woocommerce-EditAccountForm,
  .ils-account .woocommerce-address-fields__field-wrapper,
  .ils-account fieldset{grid-template-columns:minmax(0,1fr)}
  .ils-account .woocommerce-EditAccountForm>p.form-row-first,
  .ils-account .woocommerce-EditAccountForm>p.form-row-last,
  .ils-account .woocommerce-address-fields__field-wrapper>p.form-row-first,
  .ils-account .woocommerce-address-fields__field-wrapper>p.form-row-last,
  .ils-account fieldset>p:nth-of-type(2),
  .ils-account fieldset>p:nth-of-type(3){grid-column:1/-1}
  .ils-login__actions{justify-content:stretch}
  .ils-login__actions .button{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ils-ticker__track{width:auto;animation:none;flex-wrap:wrap}
}

@media print{
  .ils-ticker,.ils-header,.ils-footer,.ils-buy__actions,.ils-summary__body,.ils-paytabs{display:none}
  body{background:#fff}
}

/* --------------------------------------------------------------
   19. Editorial pages — page head, blog, single post, search, 404
   Built from the same tokens as the rest of the theme: a cyan band
   and wave like the hero, cream body, white cards with the hard /
   soft shadow pair, pill chips and pill buttons.
-------------------------------------------------------------- */

/* 19.1 Shared page head band */
.ils-pagehead{
  position:relative;overflow:hidden;padding:clamp(34px,4.4vw,62px) 0 0;
  background:
    radial-gradient(120% 90% at 80% 4%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 4% 100%,rgba(3,72,89,.16) 0%,rgba(3,72,89,0) 60%),
    var(--ils-cyan);
}
.ils-pagehead__inner{position:relative;z-index:2;padding-bottom:clamp(26px,3.4vw,46px);max-width:820px}
.ils-pagehead--center .ils-pagehead__inner{margin-left:auto;margin-right:auto;text-align:center}
.ils-pagehead__eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--ils-ink);color:var(--ils-accent);
  border-radius:var(--ils-r-pill);padding:9px 17px;font:600 11px/1 var(--ils-sans);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;
  box-shadow:0 12px 22px -16px rgba(2,56,72,.95);
}
a.ils-pagehead__eyebrow:hover{color:var(--ils-accent);transform:translateY(-2px)}
.ils-pagehead__title{
  margin:0;color:var(--ils-ink);font-family:var(--ils-display);font-weight:800;
  font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.045em;
}
.ils-pagehead__lead{
  margin:20px 0 0;max-width:56ch;color:var(--ils-deep);
  font:400 clamp(16px,1.25vw,18.5px)/1.6 var(--ils-sans);
}
.ils-pagehead--center .ils-pagehead__lead{margin-left:auto;margin-right:auto}
.ils-pagehead__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  font:500 13.5px/1.3 var(--ils-sans);color:var(--ils-eyebrow);
}
.ils-pagehead--center .ils-pagehead__meta{justify-content:center}
.ils-pagehead__meta .ils-rule{background:rgba(3,72,89,.32)}
.ils-pagehead__tools{margin-top:26px}
.ils-pagehead--center .ils-pagehead__tools{display:flex;justify-content:center}
.ils-pagehead__code{
  font:800 clamp(64px,9vw,104px)/1 var(--ils-display);color:var(--ils-ink);
  letter-spacing:-.05em;margin-bottom:4px;opacity:.92;
}
.ils-pagehead__wave{display:block;width:100%;height:clamp(40px,4.6vw,66px);position:relative;z-index:3;margin-top:-1px}

/* Search form sitting inside the cyan band */
.ils-searchform--head{margin:0;max-width:520px;width:100%}
.ils-searchform--head input[type=search]{border-color:var(--ils-ink);box-shadow:var(--ils-sh-soft)}

/* 19.2 Chip rows used as category / result-type filters */
.ils-chips--tabs{margin-top:24px}
.ils-pagehead--center .ils-chips--tabs{justify-content:center}
.ils-chip__count{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:var(--ils-r-pill);
  background:rgba(2,56,72,.08);font:600 11px/1.5 var(--ils-sans);color:var(--ils-eyebrow);
}
.ils-chip[aria-current="page"]{
  background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);
  box-shadow:0 10px 20px -14px rgba(2,56,72,.95);
}
.ils-chip.is-active .ils-chip__count,
.ils-chip[aria-current="page"] .ils-chip__count{background:rgba(255,255,255,.16);color:var(--ils-accent)}

/* 19.3 Section heads inside editorial pages */
.ils-sectionhead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--ils-hair);margin-bottom:clamp(20px,2.4vw,32px);
}
.ils-sectionhead__title{
  margin:0;font-family:var(--ils-display);font-weight:800;color:var(--ils-ink);
  font-size:clamp(24px,2.6vw,32px);line-height:1.06;letter-spacing:-.035em;
}
.ils-sectionhead__meta{font:400 14.5px/1.4 var(--ils-sans);color:var(--ils-muted)}
.ils-sectionhead__link{font:600 14px/1 var(--ils-sans);color:var(--ils-teal);white-space:nowrap}
.ils-sectionhead__link:hover{text-decoration:underline;text-underline-offset:3px}

/* 19.4 Post cards */
.ils-post__media{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--ils-stripe-flat)}
.ils-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ils-ease)}
.ils-post:hover .ils-post__media img{transform:scale(1.05)}
.ils-post__media .ils-ph{width:100%;height:100%}
.ils-post__tag{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--ils-ink);color:var(--ils-accent);
  border-radius:var(--ils-r-pill);padding:6px 12px;font:600 10px/1 var(--ils-sans);
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 18px -12px rgba(2,56,72,.95);
}
a.ils-post__tag:hover{color:var(--ils-accent)}
.ils-post__title a{color:var(--ils-ink)}
.ils-post__title a:hover{color:var(--ils-teal)}
.ils-post__excerpt{margin:0;font:400 14.5px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-post__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--ils-hair);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.ils-post__more{font:600 13px/1 var(--ils-sans);color:var(--ils-teal);display:inline-flex;align-items:center;gap:7px}
.ils-post__more svg{transition:transform .2s var(--ils-ease)}
.ils-post:hover .ils-post__more svg{transform:translateX(3px)}
.ils-post__time{font:500 12px/1 var(--ils-sans);color:var(--ils-muted);white-space:nowrap}

/* 19.5 Featured (lead) post */
.ils-feature{
  display:grid;grid-template-columns:1.02fr .98fr;background:var(--ils-white);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-lg);overflow:hidden;
  box-shadow:var(--ils-sh-soft);margin-bottom:clamp(24px,3vw,40px);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-feature:hover{transform:translateY(-5px);border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-feature__media{position:relative;overflow:hidden;background:var(--ils-stripe-flat);min-height:320px}
.ils-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ils-ease)}
.ils-feature:hover .ils-feature__media img{transform:scale(1.04)}
.ils-feature__body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.ils-feature__badge{
  align-self:flex-start;background:var(--ils-accent);color:var(--ils-ink);border:1.5px solid var(--ils-ink);
  border-radius:var(--ils-r-pill);padding:7px 14px;font:800 11px/1 var(--ils-display);
  letter-spacing:.12em;text-transform:uppercase;box-shadow:2px 3px 0 var(--ils-ink);
}
a.ils-feature__badge:hover{color:var(--ils-ink);transform:translateY(-2px)}
.ils-feature__title{
  margin:0;font-family:var(--ils-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(25px,3vw,38px);line-height:1.08;
}
.ils-feature__title a{color:var(--ils-ink)}
.ils-feature__title a:hover{color:var(--ils-teal)}
.ils-feature__excerpt{margin:0;font:400 16px/1.62 var(--ils-sans);color:var(--ils-body);max-width:52ch}
.ils-feature__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 13px/1.3 var(--ils-sans);color:var(--ils-muted)}
.ils-feature__actions{margin-top:6px}

/* 19.6 Single post */
.ils-single{background:var(--ils-cream);padding:clamp(30px,3.6vw,52px) 0 var(--ils-section)}
.ils-single__shell{width:820px;max-width:100%;margin:0 auto}
.ils-single__figure{
  margin:0 0 clamp(26px,3vw,40px);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-lg);
  overflow:hidden;box-shadow:var(--ils-sh-soft);background:var(--ils-stripe-flat);
}
.ils-single__figure img{width:100%;height:auto}
.ils-single__figure figcaption{
  padding:12px 18px;border-top:1px solid var(--ils-hair);background:var(--ils-white);
  font:400 13px/1.5 var(--ils-sans);color:var(--ils-muted);
}
.ils-single .ils-prose{max-width:none}
.ils-single .ils-prose>p:first-of-type{font-size:19px;color:var(--ils-deep)}
.ils-avatar{
  width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 34px;
  box-shadow:0 0 0 1.5px var(--ils-ink);background:var(--ils-white);
}
.ils-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ils-tags{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(28px,3.2vw,40px) 0 0}
.ils-tag{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--ils-r-pill);
  border:1.5px solid var(--ils-hair-strong);background:var(--ils-white);color:var(--ils-ink);
  font:600 12.5px/1 var(--ils-sans);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease),transform .2s var(--ils-ease);
}
.ils-tag:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);transform:translateY(-2px)}
.ils-share{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,36px);padding-top:24px;border-top:1px solid var(--ils-hair);
}
.ils-share__label{font:600 11px/1 var(--ils-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ils-muted)}
.ils-share__list{display:flex;gap:9px;flex-wrap:wrap}
.ils-share__link{
  width:40px;height:40px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-hair-strong);
  background:var(--ils-white);color:var(--ils-ink);display:grid;place-items:center;
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease),transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-share__link:hover{
  background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink);
  transform:translateY(-2px);box-shadow:var(--ils-sh-lift);
}
.ils-authorbox{
  display:flex;gap:18px;align-items:flex-start;margin-top:clamp(30px,3.4vw,42px);padding:24px;
  background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);
  box-shadow:var(--ils-sh-soft);
}
.ils-authorbox__avatar{
  flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1.5px var(--ils-ink);background:var(--ils-ice);
}
.ils-authorbox__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ils-authorbox__eyebrow{font:600 10.5px/1 var(--ils-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ils-muted)}
.ils-authorbox__name{margin:9px 0 0;font:800 19px/1.1 var(--ils-display);letter-spacing:-.028em;color:var(--ils-ink)}
.ils-authorbox__name a{color:inherit}
.ils-authorbox__name a:hover{color:var(--ils-teal)}
.ils-authorbox__bio{margin:8px 0 0;font:400 14.5px/1.62 var(--ils-sans);color:var(--ils-body);max-width:60ch}
.ils-postnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.2vw,40px)}
.ils-postnav__link{
  display:flex;flex-direction:column;gap:7px;padding:18px 20px;background:var(--ils-white);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);box-shadow:var(--ils-sh-soft);
  transition:transform .22s var(--ils-ease),box-shadow .22s var(--ils-ease),border-color .22s var(--ils-ease);
}
.ils-postnav__link:hover{transform:translateY(-4px);border-color:var(--ils-ink);box-shadow:var(--ils-sh-hard),var(--ils-sh-soft-lg)}
.ils-postnav__link--next{text-align:right;align-items:flex-end;grid-column:2}
.ils-postnav__dir{font:600 10.5px/1 var(--ils-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ils-muted)}
.ils-postnav__title{font:800 16.5px/1.28 var(--ils-display);letter-spacing:-.025em;color:var(--ils-ink)}
.ils-related{background:var(--ils-ice);border-top:1px solid var(--ils-hair);padding:var(--ils-section) 0}

/* 19.7 Search results and empty states */
.ils-results{background:var(--ils-cream);padding:clamp(26px,3vw,40px) 0 var(--ils-section)}
.ils-result__type{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--ils-cream);color:var(--ils-ink);
  border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-pill);padding:5px 11px;
  font:600 10px/1 var(--ils-sans);letter-spacing:.1em;text-transform:uppercase;
}
.ils-result__type--plain{
  position:static;align-self:flex-start;background:var(--ils-ice);border-color:var(--ils-hair-strong);
}
.ils-nothing{
  background:var(--ils-white);border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-lg);
  box-shadow:var(--ils-sh-soft);padding:clamp(30px,4vw,54px);text-align:center;
  max-width:740px;margin:0 auto;
}
.ils-nothing__icon{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--ils-ice);border:1.5px solid var(--ils-ink);color:var(--ils-ink);
  box-shadow:var(--ils-sh-hard);
}
.ils-nothing__title{margin:0 0 10px;font:800 clamp(22px,2.4vw,29px)/1.15 var(--ils-display);letter-spacing:-.03em;color:var(--ils-ink)}
.ils-nothing__text{margin:0 auto 24px;max-width:52ch;font:400 16px/1.62 var(--ils-sans);color:var(--ils-body)}
.ils-nothing .ils-searchform{margin:0 auto 24px;max-width:440px}
.ils-nothing__links{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* 19.8 404 quick links */
.ils-quicklinks{background:var(--ils-cream);padding:clamp(22px,2.6vw,34px) 0 0}
.ils-quicklinks__title{
  margin:0 0 18px;font:600 11px/1 var(--ils-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ils-muted);
}

/* 19.9 Responsive */
@media (max-width:1100px){
  .ils-feature{grid-template-columns:1fr}
  .ils-feature__media{min-height:0;aspect-ratio:16/9}
  .ils-feature__excerpt{max-width:none}
}
@media (max-width:900px){
  .ils-pagehead{padding-top:32px}
  .ils-pagehead__inner{max-width:none}
  .ils-chips--tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}
  .ils-chips--tabs::-webkit-scrollbar{display:none}
  .ils-pagehead--center .ils-chips--tabs{justify-content:flex-start}
}
@media (max-width:760px){
  .ils-single__shell{width:100%}
  .ils-postnav{grid-template-columns:1fr}
  .ils-postnav__link--next{grid-column:1;text-align:left;align-items:flex-start}
  .ils-authorbox{flex-direction:column;gap:14px}
  .ils-sectionhead{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:560px){
  .ils-pagehead__lead{font-size:16px}
  .ils-searchform--head{flex-wrap:wrap}
  .ils-searchform--head input[type=search],
  .ils-searchform--head button{flex:1 1 100%}
  .ils-single .ils-prose>p:first-of-type{font-size:17.5px}
  .ils-feature__body{gap:12px}
  .ils-nothing__links .ils-chip{flex:0 0 auto}
}

/* 19.10 Small joins between the new parts and the existing ones */
.ils-blog{background:var(--ils-cream);padding:clamp(26px,3vw,40px) 0 var(--ils-section)}
.ils-pagehead__meta>span:not(.ils-rule){display:inline-flex;align-items:center;gap:7px}
.ils-pagehead__meta .ils-rule{flex:0 0 1px}
.ils-feature__media>a{position:absolute;inset:0;display:block}
.ils-feature__media .ils-ph{position:absolute;inset:0}
.ils-feature__meta .ils-rule{flex:0 0 1px}
.ils-404__back{margin:clamp(26px,3vw,38px) 0 0;text-align:center}
.ils-quicklinks+.ils-bags{padding-top:clamp(26px,3vw,40px)}
.ils-share__link.is-copied{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}

/* 19.11 Comments on a single post, in the theme's form language */
.ils-comments .comment-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ils-comments .comment-author{display:flex;align-items:center;gap:10px;font:800 15.5px/1.2 var(--ils-display);color:var(--ils-ink)}
.ils-comments .comment-author img{border-radius:50%;box-shadow:0 0 0 1.5px var(--ils-ink)}
.ils-comments .comment-author .says{display:none}
.ils-comments .comment-metadata,
.ils-comments .comment-awaiting-moderation{font:400 12.5px/1.4 var(--ils-sans);color:var(--ils-muted)}
.ils-comments .comment-content{font:400 15.5px/1.65 var(--ils-sans);color:var(--ils-body)}
.ils-comments .comment-content p{margin:0 0 1em}
.ils-comments .comment-content p:last-child{margin-bottom:0}
.ils-comments .reply{margin-top:12px}
.ils-comments .reply a{
  display:inline-flex;align-items:center;padding:8px 15px;border-radius:var(--ils-r-pill);
  border:1.5px solid var(--ils-hair-strong);background:var(--ils-white);color:var(--ils-ink);
  font:600 12.5px/1 var(--ils-sans);
  transition:background .2s var(--ils-ease),color .2s var(--ils-ease),border-color .2s var(--ils-ease);
}
.ils-comments .reply a:hover{background:var(--ils-ink);color:var(--ils-accent);border-color:var(--ils-ink)}
.ils-comments .children{list-style:none;margin:18px 0 0 clamp(14px,3vw,32px);padding:0;display:flex;flex-direction:column;gap:18px}
.ils-comments .comment-respond{
  margin-top:34px;padding:clamp(22px,2.6vw,30px);background:var(--ils-white);
  border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-md);box-shadow:var(--ils-sh-soft);
}
.ils-comments .comment-reply-title{
  margin:0 0 8px;font:800 23px/1.15 var(--ils-display);letter-spacing:-.03em;color:var(--ils-ink);
}
.ils-comments .comment-reply-title small{font:400 13px/1 var(--ils-sans);margin-left:10px}
.ils-comments .comment-notes,
.ils-comments .logged-in-as,
.ils-comments .comment-form-cookies-consent label{font:400 13.5px/1.55 var(--ils-sans);color:var(--ils-muted)}
.ils-comments .required-field-message,
.ils-comments .required{color:var(--ils-teal)}
.ils-comments .comment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 0}
.ils-comments .comment-form>p{margin:0;grid-column:1/-1;display:flex;flex-direction:column;gap:8px;min-width:0}
.ils-comments .comment-form>p.comment-form-author{grid-column:1}
.ils-comments .comment-form>p.comment-form-email{grid-column:2}
.ils-comments .comment-form label{
  font:600 11.5px/1 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ils-eyebrow);
}
.ils-comments .comment-form input[type=text],
.ils-comments .comment-form input[type=email],
.ils-comments .comment-form input[type=url],
.ils-comments .comment-form textarea{
  width:100%;border:1.5px solid var(--ils-hair-strong);border-radius:var(--ils-r-sm);
  background:var(--ils-cream);padding:13px 16px;font:400 15px/1.5 var(--ils-sans);color:var(--ils-ink);
  transition:border-color .2s var(--ils-ease),background .2s var(--ils-ease);
}
.ils-comments .comment-form input[type=text]:focus,
.ils-comments .comment-form input[type=email]:focus,
.ils-comments .comment-form input[type=url]:focus,
.ils-comments .comment-form textarea:focus{border-color:var(--ils-ink);background:var(--ils-white)}
.ils-comments .comment-form textarea{min-height:150px;resize:vertical}
.ils-comments .comment-form>p.comment-form-cookies-consent{flex-direction:row;align-items:center;gap:10px}
.ils-comments .comment-form>p.comment-form-cookies-consent label{
  font:400 13.5px/1.55 var(--ils-sans);letter-spacing:0;text-transform:none;color:var(--ils-muted);
}
.ils-comments .comment-form-cookies-consent input{margin:0;accent-color:var(--ils-ink)}
.ils-comments .form-submit{margin:0}
.ils-comments .form-submit input[type=submit]{
  align-self:flex-start;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-ink);
  background:var(--ils-ink);color:var(--ils-accent);font:600 16px/1 var(--ils-sans);
  box-shadow:0 12px 22px -14px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
  width:auto;
}
.ils-comments .form-submit input[type=submit]:hover{transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(2,56,72,.95)}
.ils-comments .no-comments{font:400 15px/1.6 var(--ils-sans);color:var(--ils-muted)}
@media (max-width:700px){
  .ils-comments .comment-form{grid-template-columns:minmax(0,1fr)}
  .ils-comments .comment-form>p.comment-form-author,
  .ils-comments .comment-form>p.comment-form-email{grid-column:1}
  .ils-comments .form-submit input[type=submit]{width:100%}
}

/* --------------------------------------------------------------
   20. Blue + yellow balance and polish
   Blue stays the brand colour, but the big saturated blocks are
   lightened and warmed, and yellow does the accent work: the top
   conversion buttons, eyebrow pills, section rules, link
   underlines, footer column heads and hover states.
   Declared last so it layers over sections 1-19 without editing
   them; every rule here is paint only — no layout is changed.
-------------------------------------------------------------- */
:root{
  /* Yellow family */
  --ils-honey:#fed872;
  --ils-accent-soft:#fdefc3;
  --ils-accent-line:rgba(249,168,6,.6);
  --ils-accent-glow:rgba(253,201,62,.45);

  /* Warm surfaces that take over from the cool ones */
  --ils-warm:#fbf7e9;
  --ils-warm-deep:#f4ecd7;

  /* Warm-tinted placeholder fill, so empty media is no longer blue */
  --ils-stripe-flat:repeating-linear-gradient(45deg,#f8f2e3 0 12px,#f1e9d5 12px 24px);

  /* Elevation with a hint of the accent, used on the yellow CTAs */
  --ils-sh-accent:0 16px 28px -18px rgba(186,124,4,.65);
}

/* 20.1 Header — lighter cyan, with the accent as its baseline ---- */
.ils-header{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 72%),
    rgba(57,209,220,.92);
  box-shadow:
    inset 0 -2px 0 var(--ils-accent),
    0 1px 0 rgba(2,56,72,.06),
    0 14px 30px -28px rgba(2,56,72,.9);
}
.ils-iconbtn:hover{background:var(--ils-accent);border-color:var(--ils-ink);color:var(--ils-ink)}
.ils-pill--search:hover{background:var(--ils-white)}

/* 20.2 Hero — same cyan, lifted with light and a warm corner ----- */
.ils-hero{
  background:
    radial-gradient(58% 50% at 99% -8%,rgba(254,216,114,.55) 0%,rgba(254,216,114,0) 62%),
    radial-gradient(120% 90% at 74% 8%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 56%),
    radial-gradient(90% 70% at 4% 100%,rgba(3,72,89,.14) 0%,rgba(3,72,89,0) 62%),
    linear-gradient(178deg,var(--ils-cyan) 0%,#7be8f4 100%);
}
.ils-hero__proof span{color:var(--ils-ink)}

/* 20.3 Editorial head band — cool at the top, warm at the wave --- */
.ils-pagehead{
  background:
    radial-gradient(58% 52% at 99% -10%,rgba(254,216,114,.5) 0%,rgba(254,216,114,0) 62%),
    radial-gradient(80% 78% at 0% 0%,rgba(57,209,220,.42) 0%,rgba(57,209,220,0) 64%),
    linear-gradient(180deg,#e0f8fa 0%,#f9f3e1 100%);
  border-top:1px solid rgba(2,56,72,.06);
}
.ils-pagehead__eyebrow{
  background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%);
  color:var(--ils-ink);border:1.5px solid var(--ils-ink);
  box-shadow:2px 3px 0 var(--ils-ink);
}
a.ils-pagehead__eyebrow:hover{color:var(--ils-ink)}
.ils-pagehead__code{
  color:var(--ils-ink);opacity:1;
  text-shadow:4px 5px 0 var(--ils-accent);
}
.ils-pagehead .ils-chip{border-color:var(--ils-hair-strong);box-shadow:var(--ils-sh-soft)}
.ils-pagehead .ils-searchform input[type=search]{box-shadow:var(--ils-sh-soft)}

/* 20.4 Section heads get a short accent rule -------------------- */
.ils-sectionhead__title,
.ils-reviews__title{position:relative;padding-bottom:16px}
.ils-sectionhead__title::after,
.ils-reviews__title::after{
  content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:var(--ils-r-pill);
  background:linear-gradient(90deg,var(--ils-accent) 0%,var(--ils-accent-deep) 100%);
}

/* 20.5 The conversion buttons carry the yellow ------------------ */
.ils-hero__actions .ils-btn--primary,
.ils-addtobag,
.ils-summary__cta,
.ils-place,
.ils-checkout--wc #place_order{
  background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%);
  border:1.5px solid var(--ils-ink);
  color:var(--ils-ink);
  box-shadow:3px 3px 0 var(--ils-ink),var(--ils-sh-accent);
}
.ils-hero__actions .ils-btn--primary:hover,
.ils-addtobag:hover,
.ils-summary__cta:hover,
.ils-place:hover,
.ils-checkout--wc #place_order:hover{
  color:var(--ils-ink);
  transform:translate(-2px,-3px);
  box-shadow:5px 6px 0 var(--ils-ink),0 22px 32px -18px rgba(186,124,4,.7);
}
/* Ink buttons keep the lead, with a little more depth */
.ils-btn--primary{background:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%)}
.ils-btn--dark{background:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%)}
.ils-btn--ghost:hover{background:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%)}

/* 20.6 Small yellow moments in the components ------------------- */
.ils-chip:hover{background:var(--ils-accent-soft)}
.ils-card__add:hover,
.ils-upsell__add:hover,
.ils-coupon__btn:hover{
  background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%);
  color:var(--ils-ink);border-color:var(--ils-ink);
}
.ils-tag:hover,
.ils-share__link:hover,
.ils-pagination .page-numbers:hover{
  background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%);
  color:var(--ils-ink);border-color:var(--ils-ink);
}
.ils-pagination .page-numbers.current{background:var(--ils-ink);color:var(--ils-accent)}
.ils-prose a,
.ils-legal__entry a{
  text-decoration-color:var(--ils-accent-line);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.ils-prose a:hover,
.ils-legal__entry a:hover{text-decoration-color:var(--ils-accent-deep)}
.ils-post__more{color:var(--ils-teal-dark)}
.ils-nothing__icon{background:linear-gradient(180deg,var(--ils-accent-soft) 0%,#fff8e6 100%)}
.ils-authorbox__avatar{background:var(--ils-accent-soft)}

/* 20.7 Warm bands where a cool one used to be ------------------- */
.ils-reviews,
.ils-pdp-reviews{background:linear-gradient(180deg,var(--ils-warm) 0%,var(--ils-cream) 100%)}
.ils-related{background:linear-gradient(180deg,var(--ils-warm) 0%,var(--ils-cream) 100%)}
.ils-story{
  background:
    radial-gradient(58% 50% at 99% -8%,rgba(254,216,114,.5) 0%,rgba(254,216,114,0) 62%),
    radial-gradient(100% 80% at 78% 4%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 62%),
    linear-gradient(178deg,var(--ils-cyan) 0%,#7be8f4 100%);
}

/* 20.8 Cards — warmer edge, a touch more lift ------------------- */
.ils-card,
.ils-post,
.ils-feature,
.ils-review,
.ils-type{border-color:var(--ils-edge)}
.ils-card:hover,
.ils-post:hover,
.ils-feature:hover{
  border-color:var(--ils-ink);
  box-shadow:3px 3px 0 var(--ils-accent),var(--ils-sh-soft-lg);
}
.ils-type:hover{border-color:var(--ils-ink);box-shadow:3px 3px 0 var(--ils-accent),var(--ils-sh-soft-lg)}
.ils-postnav__link:hover{border-color:var(--ils-ink);box-shadow:3px 3px 0 var(--ils-accent),var(--ils-sh-soft-lg)}

/* 20.9 Footer — yellow column heads over the navy --------------- */
.ils-footer{border-top:3px solid var(--ils-accent)}
.ils-footer__coltitle{color:var(--ils-accent)}
.ils-footer__links a:hover{color:var(--ils-honey)}
.ils-subscribe__btn{background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%)}

/* 20.10 Responsive keeps its shape ------------------------------ */
@media (max-width:900px){
  .ils-pagehead{border-top:0}
}
@media (max-width:560px){
  .ils-pagehead__code{text-shadow:3px 4px 0 var(--ils-accent)}
  .ils-sectionhead__title,
  .ils-reviews__title{padding-bottom:14px}
}

/* --------------------------------------------------------------
   21. Less aqua
   The header bar and the hero were still solid cyan on every
   screen. Both drop to a pale wash; the cyan that remains is
   carried by the hero panel, the wave, the review rules and the
   links, so blue still leads without flooding the page.
-------------------------------------------------------------- */
:root{
  --ils-aqua-pale:#dbf7fb;
  --ils-aqua-mid:#c2f0f5;
  /* The hero / PDP panel keeps the cyan, one step softer */
  --ils-stripe-hero:repeating-linear-gradient(45deg,#a4ecf4 0 12px,#93e7f0 12px 24px);
}

/* 21.1 Header — pale aqua instead of full cyan ----------------- */
.ils-header{
  background:linear-gradient(180deg,var(--ils-aqua-pale) 0%,var(--ils-aqua-mid) 100%);
  box-shadow:
    inset 0 -2px 0 var(--ils-accent),
    0 1px 0 rgba(2,56,72,.05),
    0 14px 30px -28px rgba(2,56,72,.9);
}
.ils-pill:not(.ils-pill--cart){background:rgba(254,251,242,.92)}
.ils-iconbtn{background:rgba(254,251,242,.75)}

/* 21.2 Hero — light band, the cyan moves into the panel -------- */
.ils-hero{
  background:
    radial-gradient(62% 58% at 97% -4%,rgba(57,209,220,.4) 0%,rgba(57,209,220,0) 64%),
    radial-gradient(52% 48% at 2% 2%,rgba(254,216,114,.42) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e8fafc 0%,#f9f2e2 100%);
}
.ils-hero__lead{color:var(--ils-body)}
.ils-hero__media{box-shadow:0 44px 60px -44px rgba(2,56,72,.6)}

/* 21.3 Product story band — same treatment, for consistency ---- */
.ils-story{
  background:
    radial-gradient(62% 58% at 97% -6%,rgba(57,209,220,.4) 0%,rgba(57,209,220,0) 64%),
    radial-gradient(52% 48% at 2% 2%,rgba(254,216,114,.4) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e8fafc 0%,#f9f2e2 100%);
  border-bottom:1px solid rgba(2,56,72,.1);
}
.ils-story__card{background:var(--ils-white)}

/* 21.4 Editorial head band — matched to the hero --------------- */
.ils-pagehead{
  background:
    radial-gradient(62% 58% at 97% -6%,rgba(57,209,220,.38) 0%,rgba(57,209,220,0) 64%),
    radial-gradient(52% 48% at 2% 2%,rgba(254,216,114,.4) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e8fafc 0%,#f9f2e2 100%);
}

/* --------------------------------------------------------------
   22. Hero banner typography
   The headline was running to 114px and swallowing the panel next
   to it. It comes down to a 68px cap with looser leading, and the
   badge, lead, buttons and proof row are re-spaced into a clear
   ladder: eyebrow, headline, one paragraph, actions, then a hair-
   lined trust row.
-------------------------------------------------------------- */
:root{
  --ils-fs-hero:clamp(36px,5vw,68px);
}

.ils-hero{padding-top:clamp(38px,4.6vw,62px)}
.ils-hero__grid{gap:clamp(28px,3.8vw,56px)}
.ils-hero__copy{padding-bottom:clamp(14px,2.4vw,38px)}

.ils-hero__badge{
  padding:8px 15px;font-size:10.5px;letter-spacing:.16em;margin-bottom:18px;
  box-shadow:0 10px 18px -14px rgba(2,56,72,.9);
}

.ils-hero__title{
  font-size:var(--ils-fs-hero);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:16ch;
}

.ils-hero__lead{
  margin:18px 0 0;max-width:46ch;
  font:400 clamp(15.5px,1.15vw,17.5px)/1.65 var(--ils-sans);
  color:var(--ils-body);
}

.ils-hero__actions{gap:12px;margin:26px 0 22px}
.ils-hero__actions .ils-btn{padding:15px 26px;font-size:15.5px}

.ils-hero__proof{
  gap:12px 16px;max-width:46ch;padding-top:18px;
  border-top:1px solid rgba(2,56,72,.14);
}
.ils-hero__proof span{font:500 13.5px/1.4 var(--ils-sans);color:var(--ils-body)}
.ils-hero__proof .ils-stars{font-size:14px}

/* The panel loses a little height so the two columns balance */
.ils-hero__media{aspect-ratio:1/.95}
.ils-hero__media span{font-size:11.5px;letter-spacing:.16em}

/* 22.1 Responsive — the earlier breakpoints, re-stated so the
   rules above cannot outrank them. */
@media (max-width:900px){
  .ils-hero{padding-top:36px}
  .ils-hero__copy{padding-bottom:0}
  .ils-hero__lead{max-width:none}
  .ils-hero__proof{max-width:none}
  .ils-hero__media{aspect-ratio:4/3}
}
@media (max-width:560px){
  .ils-hero__title{letter-spacing:-.03em}
  .ils-hero__proof{gap:10px 14px}
  .ils-hero__actions .ils-btn{padding:15px 24px}
}

/* --------------------------------------------------------------
   23. Hero energy
   The pale wash went too far the other way. The colour comes back
   as a composition rather than a flood: a cyan pool behind the
   panel, a warm glow low on the copy side, a faint dot grid for
   texture, a deeper panel with a dashed outline, and a little more
   weight in the headline.
-------------------------------------------------------------- */
:root{
  --ils-fs-hero:clamp(38px,5.3vw,72px);
  --ils-stripe-hero:repeating-linear-gradient(45deg,#88e7f2 0 14px,#73e1ed 14px 28px);
}

.ils-hero{
  background:
    radial-gradient(46% 60% at 79% 46%,rgba(31,189,205,.58) 0%,rgba(31,189,205,0) 72%),
    radial-gradient(42% 52% at 2% 92%,rgba(253,201,62,.42) 0%,rgba(253,201,62,0) 70%),
    radial-gradient(52% 48% at 98% -6%,rgba(254,216,114,.4) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e7fbfd 0%,#faf3e1 100%);
}

/* Faint dot grid, faded out at the edges */
.ils-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(2,56,72,.13) 1.2px,transparent 1.3px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(78% 68% at 46% 38%,#000 0%,rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(78% 68% at 46% 38%,#000 0%,rgba(0,0,0,0) 76%);
}

/* Headline holds the page again */
.ils-hero__title{line-height:.95;letter-spacing:-.04em}

/* A cyan dot in front of the eyebrow */
.ils-hero__badge::before{
  content:"";width:6px;height:6px;border-radius:50%;margin-right:9px;
  background:var(--ils-cyan);box-shadow:0 0 0 3px rgba(57,209,220,.28);
}

/* The panel is the anchor: deeper cyan, top-light, dashed outline */
.ils-hero__media{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 46%),
    var(--ils-stripe-hero);
  box-shadow:0 40px 62px -40px rgba(2,56,72,.8);
  color:var(--ils-teal-dark);
}
.ils-hero__media::before{
  content:"";position:absolute;inset:-12px -12px 0 -12px;pointer-events:none;
  border:2px dashed rgba(2,56,72,.22);border-bottom:0;
  border-radius:calc(var(--ils-r-xl) + 12px) calc(var(--ils-r-xl) + 12px) 0 0;
}

/* Proof row: a touch more presence under the hairline */
.ils-hero__proof .ils-stars{font-size:15px}
.ils-hero__proof span{color:var(--ils-deep)}

/* 23.1 Responsive */
@media (max-width:900px){
  .ils-hero{
    background:
      radial-gradient(60% 40% at 80% 74%,rgba(31,189,205,.5) 0%,rgba(31,189,205,0) 72%),
      radial-gradient(60% 40% at 2% 8%,rgba(253,201,62,.38) 0%,rgba(253,201,62,0) 70%),
      linear-gradient(180deg,#e7fbfd 0%,#faf3e1 100%);
  }
  .ils-hero__media::before{
    inset:-10px;border-bottom:2px dashed rgba(2,56,72,.22);
    border-radius:calc(var(--ils-r-lg) + 10px);
  }
}

/* --------------------------------------------------------------
   24. Hero focal point
   A yellow card sits behind the cyan panel — the theme's sticker
   language at panel scale — and the colour field is opened up so
   the left column is not floating in white.
-------------------------------------------------------------- */
.ils-hero{
  background:
    radial-gradient(54% 66% at 73% 50%,rgba(31,189,205,.62) 0%,rgba(31,189,205,0) 72%),
    radial-gradient(40% 46% at 6% 8%,rgba(57,209,220,.3) 0%,rgba(57,209,220,0) 70%),
    radial-gradient(46% 54% at 0% 96%,rgba(253,201,62,.48) 0%,rgba(253,201,62,0) 70%),
    radial-gradient(52% 48% at 99% -8%,rgba(254,216,114,.42) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e3fafc 0%,#faf3e0 100%);
}
.ils-hero::before{
  background-image:radial-gradient(rgba(2,56,72,.16) 1.2px,transparent 1.3px);
}

/* The offset card behind the panel */
.ils-hero__grid::after{
  content:"";position:absolute;right:var(--ils-gutter);bottom:0;z-index:-1;pointer-events:none;
  width:calc((100% - (var(--ils-gutter) * 2) - clamp(28px,3.8vw,56px)) * .46);
  aspect-ratio:1/.95;
  background:linear-gradient(180deg,var(--ils-honey) 0%,var(--ils-accent) 100%);
  border:2px solid var(--ils-ink);border-bottom:0;
  border-radius:var(--ils-r-xl) var(--ils-r-xl) 0 0;
  transform:translate(20px,-20px);
}

/* The dashed outline gives way to the card */
.ils-hero__media::before{display:none}
.ils-hero__media{box-shadow:0 30px 50px -34px rgba(2,56,72,.7)}

/* 24.1 Responsive — one column, so the offset card steps aside
   and the dashed outline comes back. */
@media (max-width:900px){
  .ils-hero__grid::after{display:none}
  .ils-hero__media::before{
    display:block;inset:-10px;border-bottom:2px dashed rgba(2,56,72,.22);
    border-radius:calc(var(--ils-r-lg) + 10px);
  }
}

/* --------------------------------------------------------------
   25. Editorial pages, matched to the home hero
   The head band gets the hero's composition — colour pools, dot
   texture and a tilted panel with a yellow card behind it — and
   the lead story on the blog becomes the page's own focal card.
-------------------------------------------------------------- */
.ils-pagehead{
  background:
    radial-gradient(48% 62% at 82% 46%,rgba(31,189,205,.5) 0%,rgba(31,189,205,0) 72%),
    radial-gradient(40% 46% at 4% 6%,rgba(57,209,220,.3) 0%,rgba(57,209,220,0) 70%),
    radial-gradient(46% 54% at 0% 98%,rgba(253,201,62,.44) 0%,rgba(253,201,62,0) 70%),
    radial-gradient(50% 46% at 99% -8%,rgba(254,216,114,.4) 0%,rgba(254,216,114,0) 62%),
    linear-gradient(180deg,#e3fafc 0%,#faf3e0 100%);
}

/* Same faint dot grid as the hero */
.ils-pagehead::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(2,56,72,.16) 1.2px,transparent 1.3px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(78% 70% at 40% 40%,#000 0%,rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(78% 70% at 40% 40%,#000 0%,rgba(0,0,0,0) 78%);
}

/* A tilted panel in the empty half, with the yellow card behind it */
.ils-pagehead::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:clamp(-70px,-3vw,-30px);top:50%;
  width:clamp(230px,25vw,340px);aspect-ratio:1/1.04;
  transform:translateY(-50%) rotate(-7deg);
  background:
    linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 46%),
    var(--ils-stripe-hero);
  border:2px solid var(--ils-ink);border-radius:var(--ils-r-xl);
  box-shadow:14px 16px 0 var(--ils-accent),0 30px 50px -34px rgba(2,56,72,.7);
}
/* The 404 leads with its numeral, so it keeps the band clear */
.ils-pagehead--center::after{display:none}

/* Copy always sits above the decoration */
.ils-pagehead__inner{position:relative;z-index:2}

/* The lead story carries the hard-shadow treatment */
.ils-feature{border-color:var(--ils-ink);box-shadow:6px 7px 0 var(--ils-accent),var(--ils-sh-soft-lg)}
.ils-feature:hover{box-shadow:9px 10px 0 var(--ils-accent),var(--ils-sh-soft-lg)}
.ils-feature__media{
  background:
    linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 46%),
    var(--ils-stripe-hero);
  color:var(--ils-teal-dark);
}

/* 25.1 Responsive — the decoration needs room, so it leaves early */
@media (max-width:1180px){
  .ils-pagehead::after{display:none}
}
@media (max-width:760px){
  .ils-feature{box-shadow:4px 5px 0 var(--ils-accent),var(--ils-sh-soft)}
  .ils-feature:hover{box-shadow:6px 7px 0 var(--ils-accent),var(--ils-sh-soft-lg)}
}

/* --------------------------------------------------------------
   26. Colour balance and consistency
   A refinement pass, not a repaint. Every value below is a colour
   the theme already ships — the tokens from section 1 and the warm
   family added in 20-25. What changes is which colour does which
   job, so the same component no longer changes colour from page to
   page, and the quieter text meets contrast.

   Text roles
     ink     headings, prices, values, filled controls
     body    paragraphs and every piece of secondary information
     muted   placeholders, disabled text, decorative glyphs
     strike  struck-through "was" prices only
     teal    links, and the in-stock / free / saved states

   Border roles, warm on the warm surfaces
     --ils-line         field and input edges
     --ils-edge         card, panel, table and media edges
     --ils-hair         hairlines inside a card or under a section head
     --ils-hair-strong  pill controls, so a control still reads as one

   Emphasis
     accent  the focus of attention: conversion buttons, badges, the
             card lift, section rules
     cyan    the brand fields: hero and panel fills, review rules,
             ticker dots, product colourways

   Declared last so it layers over sections 1-25 without editing
   them. Paint only: nothing moves except the few pixels the
   heading rules need.
-------------------------------------------------------------- */
:root{
  /* The warm card edge introduced in 20.8, promoted to a token so
     every surface in the theme can share the one hairline. */
  --ils-edge:#e5e0d2;

  /* One focus ring, in the same teal as the global :focus-visible
     outline, replacing the near-invisible cyan glow on fields. */
  --ils-ring:0 0 0 3px rgba(4,101,123,.28);

  /* One lift for a card: the accent block plus the ambient layer. */
  --ils-sh-card:3px 3px 0 var(--ils-accent),var(--ils-sh-soft-lg);
}

/* 26.1 One hairline per surface ---------------------------------
   Cards were already warm after 20.8 while every other panel,
   summary, table and media frame stayed on the cool ink hairline.
   They all take the warm edge now. */
.ils-gallery__main,
.ils-story__card,
.ils-fits__photo,
.ils-prose img,
.ils-comments .comment-body,
.ils-comments .comment-respond,
.ils-line,
.ils-cart__empty,
.ils-upsell,
.ils-upsell__item,
.ils-summary,
.ils-osummary,
.ils-step,
.ils-oitem__media,
.ils-wcpage table.shop_table,
.ils-wcpage table.woocommerce-orders-table,
.ils-account__head,
.ils-account .woocommerce-MyAccount-content,
.ils-accountnav,
.ils-dash__stat,
.ils-dash__tile,
.ils-login__panel,
.ils-address,
.ils-account .woocommerce-column address,
.ils-account .woocommerce-order-overview li,
.ils-account .woocommerce-OrderUpdate,
.ils-thanks__fact,
.ils-single__figure,
.ils-authorbox,
.ils-postnav__link,
.ils-nothing{border-color:var(--ils-edge)}

/* The same edge on the seams inside those panels */
.ils-summary__head,
.ils-osummary__head,
.ils-osummary__items{border-bottom-color:var(--ils-edge)}
.ils-totals__total{border-top-color:var(--ils-edge)}

/* Fields keep the lightest edge, wherever they are */
.ils-searchform input[type=search],
.ils-comments .comment-form input[type=text],
.ils-comments .comment-form input[type=email],
.ils-comments .comment-form input[type=url],
.ils-comments .comment-form textarea{border-color:var(--ils-line)}

/* Selectable option rows read as one control family */
.ils-ship,
.ils-size-opt{border-color:var(--ils-hair-strong)}

/* Hairlines inside a card are the hair token everywhere */
/* The pull quote keeps its cyan rule; only its other three sides
   take the warm edge. */
.ils-prose blockquote{border-color:var(--ils-edge);border-left-color:var(--ils-cyan)}
.ils-spec{border-bottom-color:var(--ils-hair)}
.ils-legal__entry hr{border-top-color:var(--ils-hair)}

/* 26.2 One lift for a card --------------------------------------
   20.8 gave the grid cards an accent block shadow on hover; the
   review, story, cart-line and dashboard cards were still lifting
   in ink or cyan. One language now. */
.ils-review:hover,
.ils-story__card:hover,
.ils-line:hover,
.ils-dash__tile:hover{box-shadow:var(--ils-sh-card)}

/* Both sticky summaries carry the same accent block. The cart one
   was cyan and the checkout one accent, in the same flow. */
.ils-summary{box-shadow:4px 4px 0 var(--ils-accent),var(--ils-sh-soft-lg)}

/* 26.3 Secondary text becomes readable -------------------------
   --ils-muted sits at 3.6:1 on cream and white, under the 4.5:1
   floor. Every piece of text that carries information moves to
   --ils-body, which is 6.7:1. Nothing gains a new colour, and the
   ladder still reads: ink for the value, body for the line under
   it. */
.ils-type__sub,
.ils-shophead__meta,
.ils-buy__sub,
.ils-card__sub,
.ils-empty,
.ils-review__role,
.ils-breadcrumb__inner,
.ils-spec__k,
.ils-post__meta,
.ils-post__time,
.wp-caption-text,
.wp-element-caption,
.ils-line__variant,
.ils-line__each,
.ils-totals__k,
.ils-tick,
.ils-field__label,
.ils-ship__sub,
.ils-ships__pkg,
.ils-ships__none,
.ils-terms,
.ils-oitem__variant,
.ils-buy__sku,
.ils-dash__statk,
.ils-dash__tiletext,
.ils-dash__foot,
.ils-login__lead,
.ils-login__note,
.ils-address__empty,
.ils-thanks__k,
.ils-sectionhead__meta,
.ils-feature__meta,
.ils-share__label,
.ils-authorbox__eyebrow,
.ils-postnav__dir,
.ils-quicklinks__title{color:var(--ils-body)}

/* The same move where the original rule is the more specific one */
.ils-review--pdp .ils-review__meta,
.ils-checkout--wc .form-row label,
.ils-checkout--wc .woocommerce-privacy-policy-text,
.ils-checkout--wc .woocommerce-terms-and-conditions-wrapper,
.ils-account .form-row>label,
.ils-account #account_display_name_description,
.ils-account .woocommerce-order-overview li,
.ils-account .woocommerce-OrderUpdate-meta,
.ils-single__figure figcaption,
.ils-comments .comment-metadata,
.ils-comments .comment-awaiting-moderation,
.ils-comments .comment-notes,
.ils-comments .logged-in-as,
.ils-comments .no-comments,
.ils-comments .comment-form>p.comment-form-cookies-consent label{color:var(--ils-body)}
@media (max-width:760px){
  .ils-wcpage table.shop_table_responsive tbody th::before,
  .ils-wcpage table.shop_table_responsive tbody td::before{color:var(--ils-body)}
}

/* --ils-muted keeps the roles it is light enough for: placeholder
   text, which had been on the paler strike grey, plus the disabled
   and decorative marks. --ils-strike goes back to being the colour
   of a struck-through price and nothing else. */
.ils-field__input::placeholder,
.ils-coupon__field::placeholder{color:var(--ils-muted)}

/* 26.4 Links behave the same everywhere ------------------------
   Teal at rest, teal-dark on hover, whether the link is an anchor
   or a button. The cart's remove control was a muted button in one
   template and a teal link in the other. */
.ils-post__more{color:var(--ils-teal)}
.ils-post:hover .ils-post__more,
.ils-post__more:hover{color:var(--ils-teal-dark)}
.ils-linkbtn{color:var(--ils-teal);text-decoration:underline;text-underline-offset:3px}
.ils-linkbtn:hover{color:var(--ils-teal-dark)}
.ils-osummary__edit:hover,
.ils-cart__back:hover,
.ils-reviews__link:hover,
.ils-sectionhead__link:hover,
.ils-address__edit:hover{color:var(--ils-teal-dark)}

/* 26.5 One focus ring -----------------------------------------
   The global :focus-visible outline is teal, but the fields
   answered with a 22% cyan glow that barely showed. All of them
   take the teal ring, so focus looks the same wherever it lands. */
.ils-field__input:focus,
.ils-qty:focus-within,
.ils-ship:focus-within,
.ils-searchform input[type=search]:focus,
.ils-coupon__field:focus,
.ils-comments .comment-form input[type=text]:focus,
.ils-comments .comment-form input[type=email]:focus,
.ils-comments .comment-form input[type=url]:focus,
.ils-comments .comment-form textarea:focus,
.ils-checkout--wc .form-row input:focus,
.ils-checkout--wc .form-row select:focus,
.ils-checkout--wc .form-row textarea:focus,
.ils-wcpage .woocommerce input:focus,
.ils-wcpage .woocommerce textarea:focus{border-color:var(--ils-ink);box-shadow:var(--ils-ring)}
.ils-checkbox:focus-within .ils-check{box-shadow:var(--ils-ring)}

/* 26.6 Section heads all wear the accent rule ------------------
   20.4 gave it to the editorial and review heads only, so the
   product page's own section heads had nothing to sit on. */
.ils-specs__title,
.ils-related__title{position:relative;padding-bottom:16px}
.ils-specs__title::after,
.ils-related__title::after{
  content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:var(--ils-r-pill);
  background:linear-gradient(90deg,var(--ils-accent) 0%,var(--ils-accent-deep) 100%);
}
@media (max-width:560px){
  .ils-specs__title,
  .ils-related__title{padding-bottom:14px}
}

/* 26.7 One eyebrow ---------------------------------------------
   The ink pill with accent type is the theme's badge: the hero
   badge, the card tags, the active chip, the cart pill. The
   editorial eyebrow was the only yellow one. */
.ils-pagehead__eyebrow{
  background:var(--ils-ink);color:var(--ils-accent);border:1.5px solid var(--ils-ink);
  box-shadow:0 12px 22px -16px rgba(2,56,72,.95);
}
a.ils-pagehead__eyebrow:hover{color:var(--ils-accent)}

/* 26.8 The three checkout steps look like three of one thing ----
   Step one was full accent, step two full cyan and step three pale
   ice: one component in three colours down a single column. They
   share the soft accent surface, and the numbered ink chip carries
   the step, as it already did. */
.ils-step--1 .ils-step__head,
.ils-step--2 .ils-step__head,
.ils-step--3 .ils-step__head{
  background:var(--ils-accent-soft);
  border-bottom-color:var(--ils-accent-line);
}

/* 26.9 WooCommerce's own grey, kept out of the palette ---------
   Core carries an id in these selectors and wins, so the payment
   note renders in its #dfdcde instead of the theme's surface.
   Matching that weight and adding one element to it puts the note
   back on the theme's own ice surface. */
body .ils-checkout #payment,
body .ils-checkout #payment ul.payment_methods{background:transparent;border:0}
body .ils-checkout #payment div.payment_box{
  background:var(--ils-ice);color:var(--ils-body);
  border:1.5px dashed var(--ils-hair-strong);border-radius:var(--ils-r-sm);
}
body .ils-checkout #payment div.payment_box::before{border-bottom-color:var(--ils-ice)}

/* --------------------------------------------------------------
   27. Depth and detail
   Section 26 settled which colour does which job. This pass is
   about how those colours are laid down: elevation that reads as
   one system, seams that stop cutting the page in half, one hover
   for a choice and one for an action, and the small surfaces the
   browser paints for us — carets, markers, native controls, the
   scrollbar — brought inside the palette.

   Still no new colours. Everything here is an existing token, or an
   existing ink shadow given a second, tighter layer.
-------------------------------------------------------------- */
:root{
  /* A contact layer under the ambient one. The old shadows started
     22px down, so a card met the cream with nothing to sit on and
     read as printed rather than placed. Same ink, one layer added,
     and --ils-shadow / --ils-shadow-hover inherit it. */
  --ils-sh-soft:0 1px 2px rgba(2,56,72,.05),0 16px 32px -22px rgba(2,56,72,.55);
  --ils-sh-soft-lg:0 2px 4px rgba(2,56,72,.05),0 28px 50px -26px rgba(2,56,72,.5);
  --ils-sh-lift:0 1px 2px rgba(2,56,72,.06),0 10px 24px -14px rgba(2,56,72,.5);
}

/* 27.1 One seam between sections -------------------------------
   The bands were joined by four different hairlines — .1 ink, .16
   ink, and the hair token twice — so a warm band landing on cream
   showed a cool grey cut. They share the warm edge. */
.ils-specs,
.ils-related,
.ils-reviews,
.ils-pdp-reviews,
.ils-story,
.ils-sizeguide{border-top-color:var(--ils-edge)}
.ils-story{border-bottom-color:var(--ils-edge)}

/* 27.2 The header controls hover as one ------------------------
   The search pill went white, the icon buttons went full accent,
   side by side in the same bar. Both take the soft accent, which
   is already the chip hover. The cart pill keeps its ink. */
.ils-pill:hover,
.ils-pill--search:hover,
.ils-iconbtn:hover{background:var(--ils-accent-soft);color:var(--ils-ink);border-color:var(--ils-ink)}
.ils-pill--cart:hover{background:var(--ils-ink-lift);color:var(--ils-accent)}

/* 27.3 One hover for a choice, one for an action ---------------
   A control that picks something warms to the soft accent and
   waits; a control that does something fills with the accent
   gradient. The choice half was half-finished: the chip warmed,
   the size, payment and secondary buttons only moved. */
.ils-paytab:hover,
.ils-size-opt:hover,
.ils-altbtn:hover{background:var(--ils-accent-soft)}
.ils-altbtn--accent:hover{background:var(--ils-accent)}

/* 27.4 One ring on the thing you picked ------------------------
   The colourway ring was accent, the gallery thumb an ink haze. */
.ils-thumb.is-active{border-color:var(--ils-ink);box-shadow:0 0 0 3px var(--ils-accent)}

/* 27.5 The surfaces the browser paints -------------------------
   Native checkboxes, radios and the text caret defaulted to the
   system blue, which is the one colour on the page that is not
   ours. Prose markers were plain black. */
:root{accent-color:var(--ils-teal)}
input,select,textarea{caret-color:var(--ils-teal)}
.ils-subscribe__field{caret-color:var(--ils-cyan)}
.ils-prose li::marker,
.ils-legal__entry li::marker{color:var(--ils-teal)}
html{scrollbar-color:var(--ils-cyan-deep) var(--ils-sand)}

/* 27.6 Order tables read row by row ----------------------------
   A long order table was one white field with hairlines. A warm
   band on the even rows gives the eye a line to follow, and it is
   the same warm the review and related bands use. */
.ils-wcpage table.shop_table tbody tr:nth-child(even),
.ils-wcpage table.woocommerce-orders-table tbody tr:nth-child(even){background:var(--ils-warm)}

/* 27.7 Placeholder art is legible ------------------------------
   The label inside an empty media frame was ink at half strength,
   which disappeared on the paler product grounds. */
.ils-ph{color:var(--ils-eyebrow);opacity:.72}

/* --------------------------------------------------------------
   28. One material each
   The last pass over the same palette. Three things were still
   loose: ink was a flat fill in a dozen places and a gradient in
   three, the warm bands had a hard line at the top and dissolved
   at the bottom, and a handful of one-off hexes sat where a token
   belonged — so a colour changed in the Customizer would leave
   them behind.

   The rule for seams that comes out of this: a band that changes
   colour needs no line, and a section that keeps the same ground
   as its neighbour does.
-------------------------------------------------------------- */
:root{
  /* The ink gradient 20.5 gave the buttons, named so every ink
     surface in the theme can be cut from the same material. */
  --ils-ink-fill:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%);
}

/* 28.1 One ink material ----------------------------------------
   Ink was flat on the ticker, the cart pill, every selected chip,
   size, tab and nav row, and on the account and comment buttons,
   while the three ink buttons carried a gradient. All one now, and
   the three near-identical ink tints used for hover and focus
   collapse into the one --ils-ink-lift. */
.ils-ticker,
.ils-footer--min,
.ils-pill--cart,
.ils-hero__badge,
.ils-pagehead__eyebrow,
.ils-searchform button,
.ils-comments .form-submit input[type=submit],
.ils-pagination .page-numbers.current,
.ils-chip.is-active,
.ils-chip[aria-pressed="true"],
.ils-chip[aria-current="page"],
.ils-size-opt.is-active,
.ils-paytab.is-active,
.ils-accountnav li.is-active>a,
.ils-checkout--wc .wc_payment_method:has(input:checked)>label,
.ils-wcpage .woocommerce button.button,
.ils-wcpage .woocommerce a.button,
.ils-wcpage .woocommerce input.button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.ils-btn--primary,
.ils-btn--dark{background:var(--ils-ink-fill)}
.ils-btn--ghost:hover,
.ils-wish:hover,
.ils-comments .reply a:hover{background:var(--ils-ink-fill)}
.ils-pill--cart:hover{background:var(--ils-ink-lift)}
.ils-subscribe__field:focus{background:var(--ils-ink-lift)}

/* 28.2 The warm bands become bands ------------------------------
   They ran warm at the top and faded into cream at the bottom, so
   each one opened on a hairline and then died with no bottom edge.
   Symmetrical now: cream in, warm through the middle, cream out.
   No line needed at either end. */
.ils-reviews,
.ils-pdp-reviews,
.ils-related{
  background:linear-gradient(180deg,
    var(--ils-cream) 0%,
    var(--ils-warm) 14%,
    var(--ils-warm) 86%,
    var(--ils-cream) 100%);
  border-top:0;
}

/* 28.3 The shop head joins the section-rule system --------------
   Every section head carries the 48px accent rule except the one
   at the top of the shop, where the meta line sits directly under
   the title. It takes the rule on the divider it already has. */
.ils-shophead__inner{position:relative}
.ils-shophead__inner::after{
  content:"";position:absolute;left:0;bottom:-1.5px;width:48px;height:4px;
  border-radius:var(--ils-r-pill);
  background:linear-gradient(90deg,var(--ils-accent) 0%,var(--ils-accent-deep) 100%);
}

/* 28.4 Product colour stays product colour ----------------------
   The card overlay washed the top of every product ground with
   24% white, which flattened the pastels the bags are shot on.
   The light goes; the contact shade where the media meets the
   card body stays. */
.ils-card__media::after{
  background:linear-gradient(180deg,rgba(255,255,255,0) 56%,rgba(2,56,72,.08) 100%);
}

/* 28.5 The header flows into the hero ---------------------------
   The bar ran pale to mid, so it darkened just as the hero opened
   at its lightest and the two met on a step. Turned over. */
.ils-header{background:linear-gradient(180deg,var(--ils-aqua-mid) 0%,var(--ils-aqua-pale) 100%)}

/* 28.6 Placeholder art speaks in one voice ----------------------
   The label inside an empty frame was ink at half strength in the
   cards, teal-dark in the hero panel, eyebrow in the gallery, and
   two different one-off greys and browns elsewhere. */
.ils-hero__media,
.ils-gallery__main,
.ils-fits__photo,
.ils-sizeguide__media{color:var(--ils-eyebrow)}

/* The gallery thumb was the last cool-bordered control */
.ils-thumb{border-color:var(--ils-hair-strong)}

/* 28.7 The size-guide band runs on tokens -----------------------
   Two of its three yellows were literals, so changing the accent
   in the Customizer left the band half-changed, and its copy was a
   one-off brown while its own title was ink. It now uses the same
   title-and-lead pair as the hero and the editorial heads. */
.ils-sizeguide{
  background:linear-gradient(135deg,
    var(--ils-honey) 0%,
    var(--ils-accent) 42%,
    var(--ils-accent-deep) 100%);
}
.ils-sizeguide__body{color:var(--ils-deep)}

/* 28.8 Light, and stay light ------------------------------------
   Without this the browser is free to invert native controls and
   scrollbars under a dark OS theme, which would put colours on the
   page that are in nobody's palette. */
:root{color-scheme:light}

/* --------------------------------------------------------------
   29. Size guide dialog
   The band's button pointed at the band's own id, so it scrolled
   the page to where the reader already stood. It opens the guide
   now, and every other control that asks for the size guide —
   including the cart footer, on a screen with no band — lands in
   the same place.
-------------------------------------------------------------- */
body.ils-has-modal{overflow:hidden}
.ils-sizemodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--ils-gutter)}
.ils-sizemodal__veil{position:absolute;inset:0;background:rgba(2,56,72,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ils-sizemodal__panel{
  position:relative;width:min(680px,100%);max-height:min(80vh,720px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ils-cream);color:var(--ils-ink);
  border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-lg);
  box-shadow:var(--ils-sh-hard-lg),var(--ils-sh-soft-lg);
}
.ils-sizemodal__head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;background:var(--ils-accent);border-bottom:1.5px solid var(--ils-ink);
}
.ils-sizemodal__title{margin:0;font:800 clamp(22px,2.4vw,28px)/1.1 var(--ils-display);letter-spacing:-.03em;color:var(--ils-ink)}
.ils-sizemodal__close{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border:1.5px solid var(--ils-ink);border-radius:var(--ils-r-pill);
  background:var(--ils-cream);color:var(--ils-ink);font-size:22px;line-height:1;
  transition:background .2s var(--ils-ease),transform .2s var(--ils-ease);
}
.ils-sizemodal__close:hover{background:var(--ils-ink);color:var(--ils-accent);transform:translateY(-1px)}
.ils-sizemodal__body{padding:22px;overflow-y:auto}
.ils-sizemodal__intro{margin:0 0 18px;max-width:52ch;font:400 15.5px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-sizemodal__scroll{overflow-x:auto}
.ils-sizetable{width:100%;border-collapse:collapse;font:400 14.5px/1.5 var(--ils-sans);text-align:left}
.ils-sizetable th,.ils-sizetable td{padding:12px 14px;border-bottom:1px solid var(--ils-line);vertical-align:top}
.ils-sizetable thead th{
  font:700 11.5px/1.4 var(--ils-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ils-eyebrow);border-bottom:1.5px solid var(--ils-hair-strong);white-space:nowrap;
}
.ils-sizetable tbody th{font-weight:700;color:var(--ils-ink);white-space:nowrap}
.ils-sizetable tbody td{color:var(--ils-body)}
.ils-sizetable tbody tr:nth-child(even){background:var(--ils-warm)}
.ils-sizetable tbody tr:last-child th,.ils-sizetable tbody tr:last-child td{border-bottom:0}
.ils-sizemodal__note{margin:18px 0 0;font:400 13.5px/1.55 var(--ils-sans);color:var(--ils-muted)}
@media (max-width:640px){
  .ils-sizemodal{padding:16px}
  .ils-sizemodal__panel{max-height:88vh}
  .ils-sizemodal__head{padding:16px 18px}
  .ils-sizemodal__body{padding:18px}
  .ils-sizetable{font-size:14px}
  .ils-sizetable th,.ils-sizetable td{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .ils-sizemodal__close{transition:none}
}

/* --------------------------------------------------------------
   30. Front page motion
   Hidden states apply only under .ils-anim, which the head flag
   sets on the front page when the visitor allows motion; theme.js
   adds .is-in as each piece scrolls into view. Entrances use the
   standalone translate, rotate and scale properties, so the hover
   lifts that run on transform keep working untouched.
-------------------------------------------------------------- */
:root{--ils-ease-out:cubic-bezier(.16,1,.3,1);--ils-ease-back:cubic-bezier(.34,1.56,.64,1)}
@keyframes ils-rise{from{opacity:0;translate:0 56px}to{opacity:1;translate:none}}
@keyframes ils-rise-card{from{opacity:0;translate:0 64px;scale:.94}to{opacity:1;translate:none;scale:none}}
@keyframes ils-rise-sm{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:none;scale:none}}
@keyframes ils-slide-in{from{opacity:0;translate:90px 0}to{opacity:1;translate:none}}
@keyframes ils-line-up{from{translate:0 110%}to{translate:none}}
@keyframes ils-media-in{from{opacity:0;translate:0 70px;scale:.9}to{opacity:1;translate:none;scale:none}}
@keyframes ils-pop{from{opacity:0;scale:0}to{opacity:1;scale:none}}
@keyframes ils-sway{0%,100%{rotate:0deg}50%{rotate:5deg}}
@keyframes ils-draw{from{scale:0 1}to{scale:none}}
@keyframes ils-swell{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.45)}}
@keyframes ils-ping{0%{box-shadow:0 0 0 0 rgba(57,209,220,.75)}80%,100%{box-shadow:0 0 0 9px rgba(57,209,220,0)}}
@keyframes ils-bubble{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:1}
  50%{transform:translate3d(18px,-50vh,0) scale(1)}
  88%{opacity:.85}
  100%{opacity:0;transform:translate3d(-12px,-100vh,0) scale(1.1)}
}
@keyframes ils-sheen{from{translate:-120% 0}to{translate:120% 0}}

/* 30.1 Hero plays in on load ------------------------------------ */
.ils-anim .ils-hero__badge{animation:ils-rise .9s var(--ils-ease-out) both}
.ils-anim .ils-hero__badge::before{animation:ils-ping 2s ease-out 1.2s infinite}
/* Each headline line slides up out of its own mask. */
.ils-hero__line{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .04em .1em 0;margin:-.06em -.04em -.1em 0}
.ils-hero__line>span{display:inline-block}
.ils-anim .ils-hero__line>span{animation:ils-line-up 1s var(--ils-ease-out) calc(.15s + var(--ils-i,0) * .13s) both}
.ils-anim .ils-hero__lead{animation:ils-rise .9s var(--ils-ease-out) .55s both}
.ils-anim .ils-hero__actions{animation:ils-rise .9s var(--ils-ease-out) .68s both}
.ils-anim .ils-hero__proof{animation:ils-rise .9s var(--ils-ease-out) .8s both}
/* The entrance and the bob animate different properties, so they stack. */
.ils-anim .ils-hero__media{animation:ils-media-in 1.2s var(--ils-ease-out) .2s both,ils-bob 7s ease-in-out 1.4s infinite}
.ils-anim .ils-hero__grid::after{animation:ils-rise 1.2s var(--ils-ease-out) .4s both}
.ils-anim .ils-hero .ils-sticker{animation:ils-pop .7s var(--ils-ease-back) 1s both,ils-sway 4s ease-in-out 1.7s infinite}
.ils-anim .ils-hero .ils-sticker--b{animation-delay:1.2s,2.2s;animation-direction:normal,reverse}
.ils-anim .ils-hero__wave{transform-origin:50% 100%;animation:ils-swell 7s ease-in-out infinite}

/* Bubbles drifting up through the hero, behind the copy. */
.ils-hero__bubbles{display:none}
.ils-anim .ils-hero__bubbles{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ils-hero__bubbles span{
  position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.25) 36%,rgba(57,209,220,.18) 70%);
  box-shadow:inset 0 0 0 1.5px rgba(2,56,72,.16);
  animation:ils-bubble var(--t) linear var(--d) infinite both;will-change:transform,opacity;
}
.ils-hero__bubbles span:nth-child(1){--x:6%;--s:18px;--t:13s;--d:-2s}
.ils-hero__bubbles span:nth-child(2){--x:18%;--s:10px;--t:10s;--d:-6s}
.ils-hero__bubbles span:nth-child(3){--x:31%;--s:24px;--t:16s;--d:-9s}
.ils-hero__bubbles span:nth-child(4){--x:44%;--s:12px;--t:11s;--d:-1s}
.ils-hero__bubbles span:nth-child(5){--x:52%;--s:30px;--t:18s;--d:-12s}
.ils-hero__bubbles span:nth-child(6){--x:63%;--s:14px;--t:12s;--d:-4s}
.ils-hero__bubbles span:nth-child(7){--x:76%;--s:20px;--t:15s;--d:-8s}
.ils-hero__bubbles span:nth-child(8){--x:88%;--s:11px;--t:9s;--d:-3s}
.ils-hero__bubbles span:nth-child(9){--x:95%;--s:26px;--t:17s;--d:-14s}

/* 30.2 Sections rise as they scroll in -------------------------- */
.ils-anim :is(.ils-type,.ils-shophead__inner,.ils-card,.ils-sizeguide__text,.ils-sizeguide__media,.ils-reviews__title,.ils-review):not(.is-in){opacity:0}
.ils-anim :is(.ils-type,.ils-shophead__inner,.ils-card,.ils-sizeguide__text,.ils-sizeguide__media,.ils-reviews__title,.ils-review).is-in{
  animation:ils-rise 1s var(--ils-ease-out) var(--ils-d,0s) both;
}
.ils-anim :is(.ils-type,.ils-card,.ils-review).is-in{animation-name:ils-rise-card}
.ils-anim .ils-sizeguide__media.is-in{animation-name:ils-slide-in;animation-duration:1.2s}
.ils-anim .ils-shophead__inner::after{transform-origin:0 50%}
.ils-anim .ils-shophead__inner:not(.is-in)::after{scale:0 1}
.ils-anim .ils-shophead__inner.is-in::after{animation:ils-draw .9s var(--ils-ease-out) .4s both}
/* Review stars pop in once the card lands. */
.ils-anim .ils-review .ils-stars{display:inline-block;transform-origin:0 50%}
.ils-anim .ils-review.is-in .ils-stars{animation:ils-pop .6s var(--ils-ease-back) calc(var(--ils-d,0s) + .45s) both}
/* Cards a filter chip leaves on screen fade back in. */
.ils-anim .ils-card.is-shuffled{animation:ils-rise-sm .5s var(--ils-ease-out) var(--ils-d,0s) both}

/* 30.3 Hover detail --------------------------------------------- */
.ils-types .ils-type__icon{transition:transform .35s var(--ils-ease-back)}
.ils-types .ils-type:hover .ils-type__icon{transform:rotate(-8deg) scale(1.12)}
.ils-sizeguide__media img{transition:transform .9s var(--ils-ease)}
.ils-sizeguide__media:hover img{transform:scale(1.05)}
/* A light sheen sweeps across buttons and bag photos. */
.ils-hero .ils-btn,.ils-sizeguide .ils-btn{position:relative;overflow:hidden;isolation:isolate}
.ils-hero .ils-btn::after,.ils-sizeguide .ils-btn::after,.ils-bags .ils-card__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;translate:-120% 0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 70%);
}
.ils-hero .ils-btn:hover::after,.ils-sizeguide .ils-btn:hover::after,.ils-bags .ils-card:hover .ils-card__media::before{animation:ils-sheen .8s var(--ils-ease) both}
.ils-hero .ils-btn:active,.ils-sizeguide .ils-btn:active,.ils-shophead .ils-chip:active,.ils-bags .ils-card__add:active{
  transform:translateY(0) scale(.96);transition-duration:.08s;
}

@media (max-width:900px){
  /* The bob is already off here; keep only the entrance. */
  .ils-anim .ils-hero__media{animation:ils-media-in 1.2s var(--ils-ease-out) .2s both}
  .ils-anim .ils-sizeguide__media.is-in{animation-name:ils-rise}
  .ils-hero__bubbles span:nth-child(n+6){display:none}
}
@media (hover:none){
  .ils-types .ils-type:hover .ils-type__icon,.ils-sizeguide__media:hover img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ils-hero__bubbles{display:none!important}
}
@media print{
  .ils-hero__bubbles{display:none!important}
  .ils-anim *,.ils-anim *::before,.ils-anim *::after{opacity:1!important;animation:none!important;translate:none!important;scale:none!important}
}

/* --------------------------------------------------------------
   31. Hero scene
   The animated illustration that stands in for the hero photo:
   the Drainer hangs over the pool, bobbing and dripping, with the
   water, lane rope, sun and sparkles each on their own slow loop.
   Loops run on transform and opacity only, and theme.js pauses
   them while the hero is off screen.
-------------------------------------------------------------- */
.ils-hero__scene{
  position:absolute;inset:0;overflow:hidden;
  border-radius:calc(var(--ils-r-xl) - 2px) calc(var(--ils-r-xl) - 2px) 0 0;
}
.ils-hero__scene svg{width:100%;height:100%}
:where(.ils-hero__scene) :where(g,use,path,ellipse,circle){transform-box:fill-box;transform-origin:50% 50%}
.ils-hero__scene.is-paused *{animation-play-state:paused!important}

@keyframes ils-hs-float{0%,100%{transform:translateY(0) rotate(-1.8deg)}50%{transform:translateY(-14px) rotate(1.8deg)}}
@keyframes ils-hs-dangle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes ils-hs-shadow{0%,100%{transform:scaleX(1);opacity:.2}50%{transform:scaleX(.8);opacity:.11}}
@keyframes ils-hs-drift{from{transform:translateX(0)}to{transform:translateX(-150px)}}
@keyframes ils-hs-drift-back{from{transform:translateX(-150px)}to{transform:translateX(0)}}
@keyframes ils-hs-rope{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(3px) rotate(.4deg)}}
@keyframes ils-hs-drip{
  0%{transform:translateY(0) scale(.2);opacity:0}
  8%{opacity:1}
  30%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  54%{transform:translateY(42px) scale(.85,1.2);opacity:1}
  56%,100%{transform:translateY(44px) scale(.3);opacity:0}
}
@keyframes ils-hs-ripple{
  0%,54%{transform:scale(.2);opacity:0}
  57%{transform:scale(.35);opacity:.95}
  100%{transform:scale(2.4);opacity:0}
}
@keyframes ils-hs-bubble{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  15%{opacity:.9}
  50%{transform:translate(6px,-70px) scale(1)}
  100%{transform:translate(-4px,-140px) scale(1.1);opacity:0}
}
@keyframes ils-hs-spark{
  0%,62%,100%{transform:scale(0) rotate(0deg);opacity:0}
  28%{transform:scale(1) rotate(90deg);opacity:1}
}
@keyframes ils-hs-spin{to{transform:rotate(360deg)}}
@keyframes ils-hs-cloud{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
@keyframes ils-hs-sway{0%,100%{transform:skewX(-7deg)}50%{transform:skewX(7deg)}}
@keyframes ils-hs-shimmer{0%,100%{transform:translateX(-8px);opacity:.18}50%{transform:translateX(8px);opacity:.55}}
@keyframes ils-hs-lift{from{transform:translateY(110px);opacity:0}to{transform:none;opacity:1}}

/* The bag swings from its carry handle; the goggle strap lags behind. */
.ils-hs__bag{
  transform-box:view-box;transform-origin:300px 83px;
  animation:ils-hs-float 6s ease-in-out infinite;
}
.ils-hs__dangle{transform-origin:0 0;animation:ils-hs-dangle 3s ease-in-out -.8s infinite}
.ils-hs__shadow{animation:ils-hs-shadow 6s ease-in-out infinite}
.ils-hs__drop{transform-origin:50% 0;animation:ils-hs-drip 2.6s linear var(--d,0s) infinite both}
.ils-hs__ripples ellipse{animation:ils-hs-ripple 2.6s ease-out var(--d,0s) infinite both}

.ils-hs__wave--back{animation:ils-hs-drift 9s linear infinite}
.ils-hs__wave--front{animation:ils-hs-drift-back 6s linear infinite}
.ils-hs__rope{animation:ils-hs-rope 3.2s ease-in-out infinite}
.ils-hs__shafts{transform-origin:50% 0;animation:ils-hs-sway 9s ease-in-out infinite}
.ils-hs__caustics path{animation:ils-hs-shimmer 4.5s ease-in-out infinite}
.ils-hs__caustics path:nth-child(2){animation-delay:-1.4s}
.ils-hs__caustics path:nth-child(3){animation-delay:-2.6s}
.ils-hs__caustics path:nth-child(4){animation-delay:-3.4s}
.ils-hs__bubbles circle{animation:ils-hs-bubble var(--t,5s) ease-in var(--d,0s) infinite both}

.ils-hs__rays{animation:ils-hs-spin 36s linear infinite}
.ils-hs__cloud{animation:ils-hs-cloud 14s ease-in-out infinite}
.ils-hs__cloud--b{animation-duration:18s;animation-direction:reverse}
.ils-hs__spark{animation:ils-hs-spark 3.4s ease-in-out var(--d,0s) infinite both}

/* On load the bag rises out of the water after the panel lands. */
.ils-anim .ils-hs__lift{animation:ils-hs-lift 1.3s var(--ils-ease-back) .7s both}

@media (max-width:900px){
  .ils-hero__scene{border-radius:calc(var(--ils-r-lg) - 2px)}
}
@media (prefers-reduced-motion:reduce){
  .ils-hero__scene *{animation:none!important}
  .ils-hs__drop,.ils-hs__ripples{display:none}
}

/* --------------------------------------------------------------
   32. Hero polish
   Detail on top of the hero as it stands, with no layout changes:
   a water glint across the headline, idle shine on the badge and
   main button, a fill that rises into the ghost button, hover
   reactions on the stickers, stars and panel, and a scene that
   follows the pointer, ripples under it and splashes when the bag
   is tapped. theme.js feeds --hx / --hy (-1 to 1) on .ils-hero.
-------------------------------------------------------------- */
@keyframes ils-hs-glint{0%{background-position:100% 0}38%,100%{background-position:0% 0}}
@keyframes ils-hs-shine{0%{translate:-130% 0}22%,100%{translate:130% 0}}
@keyframes ils-hs-squash{
  0%{transform:none}
  22%{transform:translateY(8px) scale(1.05,.93)}
  55%{transform:translateY(-16px) scale(.97,1.04)}
  80%{transform:translateY(2px) scale(1.01,.99)}
  100%{transform:none}
}
@keyframes ils-hs-burst{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  12%{opacity:1}
  50%{transform:translate(calc(var(--x) * 1px),calc(var(--y) * 1px)) scale(1.35)}
  100%{transform:translate(calc(var(--x) * 1.4px),calc(var(--y) * 1px + 110px)) scale(.7);opacity:0}
}
@keyframes ils-hs-ring{0%{transform:scale(.3);opacity:0}10%{opacity:.95}100%{transform:scale(4.2);opacity:0}}
@keyframes ils-hs-trail{0%{transform:scale(.25);opacity:.85}100%{transform:scale(2.6);opacity:0}}

/* 32.1 Headline — a band of pool light passes over the letters */
.ils-hero__line>span{
  padding:.1em 0;margin:-.1em 0;
  background:linear-gradient(100deg,var(--ils-ink) 0 44%,#0fb3c5 48%,#b9f6fb 50%,#0fb3c5 52%,var(--ils-ink) 56% 100%) 100% 0/320% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ils-hs-glint 8s ease-in-out calc(1.8s + var(--ils-i,0) * .14s) infinite;
}
.ils-anim .ils-hero__line>span{
  animation:
    ils-line-up 1s var(--ils-ease-out) calc(.15s + var(--ils-i,0) * .13s) both,
    ils-hs-glint 8s ease-in-out calc(1.8s + var(--ils-i,0) * .14s) infinite;
}

/* 32.2 Badge — a slow shine every few seconds */
.ils-hero__badge{position:relative;overflow:hidden;isolation:isolate}
.ils-hero__badge::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;translate:-130% 0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(148,241,250,.38) 50%,rgba(255,255,255,0) 70%);
  animation:ils-hs-shine 6s var(--ils-ease) 2.4s infinite;
}

/* 32.3 Buttons — idle shine on the main one, a fill rising into
   the ghost one, and a clear focus ring on both. */
.ils-hero__actions .ils-btn--primary::after{animation:ils-hs-shine 5.5s var(--ils-ease) 3s infinite}
.ils-hero__actions .ils-btn--ghost::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:var(--ils-ink-fill,var(--ils-ink));
  border-radius:46% 46% 0 0/34% 34% 0 0;translate:0 104%;
  transition:translate .5s var(--ils-ease-out),border-radius .5s var(--ils-ease-out);
}
.ils-hero__actions .ils-btn--ghost:hover{background:rgba(254,251,242,.5)}
.ils-hero__actions .ils-btn--ghost:hover::before{translate:none;border-radius:0}
.ils-hero__actions .ils-btn:focus-visible{outline:3px solid var(--ils-cyan-deep);outline-offset:4px}

/* 32.4 Proof row — the stars catch the light, and lift on hover */
.ils-hero__proof .ils-stars{
  display:inline-block;transition:transform .45s var(--ils-ease-back);
  background:linear-gradient(100deg,var(--ils-star) 0 42%,#ffe6a0 50%,var(--ils-star) 58% 100%) 100% 0/320% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ils-hs-glint 6s ease-in-out 2.8s infinite;
}
.ils-hero__proof:hover .ils-stars{transform:scale(1.12) rotate(-3deg)}

/* 32.5 Panel — deeper shadow, the yellow card slides out a step,
   and the stickers answer the pointer. */
.ils-hero__media{transition:box-shadow .5s var(--ils-ease)}
.ils-hero__media:hover{box-shadow:0 48px 72px -38px rgba(2,56,72,.85)}
.ils-hero__grid::after{transition:transform .6s var(--ils-ease-back)}
.ils-hero__grid:has(.ils-hero__media:hover)::after{transform:translate(30px,-30px) rotate(1.2deg)}
.ils-hero .ils-sticker{transition:transform .45s var(--ils-ease-back),box-shadow .3s var(--ils-ease)}
.ils-hero .ils-sticker:hover{box-shadow:4px 6px 0 var(--ils-ink),0 20px 30px -18px rgba(2,56,72,.9)}
.ils-hero .ils-sticker--a:hover{transform:rotate(-12deg) scale(1.1)}
.ils-hero .ils-sticker--b:hover{transform:rotate(11deg) scale(1.1)}

/* A soft light that follows the pointer across the scene */
.ils-hero__scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--gx,70%) var(--gy,24%),rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
  mix-blend-mode:soft-light;transition:opacity .5s var(--ils-ease);
}
.ils-hero__media:hover .ils-hero__scene::after{opacity:1}

/* 32.6 Scene — depth layers, tap to splash, pointer ripples */
.ils-hs__px{
  transform:translate(calc(var(--hx,0) * var(--z,0) * 12px),calc(var(--hy,0) * var(--z,0) * 8px));
}
.ils-hero::before{translate:calc(var(--hx,0) * -10px) calc(var(--hy,0) * -8px)}
.ils-anim .ils-hero__bubbles{translate:calc(var(--hx,0) * -18px) calc(var(--hy,0) * -12px)}

.ils-hs__poke{
  cursor:pointer;transform-origin:50% 100%;
  transition:transform .5s var(--ils-ease-back);
}
.ils-hs__poke:hover{transform:translateY(-10px)}
.ils-hero__scene.is-splash .ils-hs__poke{animation:ils-hs-squash .75s var(--ils-ease-out)}

.ils-hs__splash use,.ils-hs__ring{opacity:0}
.ils-hero__scene.is-splash .ils-hs__splash use{animation:ils-hs-burst .95s ease-out .08s both}
.ils-hero__scene.is-splash .ils-hs__ring{animation:ils-hs-ring 1.1s ease-out .3s both}
.ils-hs__trail ellipse{animation:ils-hs-trail 1.3s ease-out both}

@media (hover:none){
  .ils-hs__poke:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ils-hero__line>span,.ils-hero__proof .ils-stars{animation:none!important;background-position:0 0}
  .ils-hero__badge::after,.ils-hero__actions .ils-btn--primary::after{animation:none!important}
}
@media print{
  .ils-hero__line>span,.ils-hero__proof .ils-stars{background:none!important;-webkit-text-fill-color:currentColor}
}

/* --------------------------------------------------------------
   33. Hero details
   A yellow marker stroke drawn in behind the last headline line,
   and more life in the scene: a rubber duck riding the swell,
   glints on the water, a pulsing sun halo, light sweeping across
   the bag's mesh and a heartbeat on its name label.
-------------------------------------------------------------- */
@keyframes ils-hs-mark{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes ils-hs-duck{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(4px) rotate(6deg)}}
@keyframes ils-hs-halo{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.7);opacity:0}}
@keyframes ils-hs-gleam{0%{transform:translateX(0) skewX(-18deg)}32%,100%{transform:translateX(340px) skewX(-18deg)}}
@keyframes ils-hs-beat{0%,40%,100%{transform:scale(1)}8%{transform:scale(1.3)}16%{transform:scale(1)}24%{transform:scale(1.2)}}

/* 33.1 Marker stroke behind the last headline line */
.ils-hero__line:last-of-type{position:relative;isolation:isolate}
.ils-hero__line:last-of-type::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-.03em;right:.02em;bottom:.12em;height:.36em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15 C42 7 82 18 122 11 S178 7 195 12' fill='none' stroke='%23fdc93e' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.ils-anim .ils-hero__line:last-of-type::after{animation:ils-hs-mark .9s var(--ils-ease-out) 1.3s both}

/* 33.2 Scene details */
.ils-hs__duck{transform-origin:50% 80%;animation:ils-hs-duck 3.2s ease-in-out infinite}
.ils-hs__glint{animation:ils-hs-spark 2.8s ease-in-out var(--d,0s) infinite both}
.ils-hs__halo{animation:ils-hs-halo 3.2s ease-out infinite}
.ils-hs__gleam{animation:ils-hs-gleam 6s var(--ils-ease) 2.2s infinite}
.ils-hs__heart{animation:ils-hs-beat 2.6s ease-in-out 1.5s infinite}

@media (prefers-reduced-motion:reduce){
  .ils-hs__halo,.ils-hs__glint{display:none}
}

/* --------------------------------------------------------------
   34. Hero bag carousel
   With no hero photo set, the published bags take turns as the
   photo: a card that bobs and drips above the pool, a name and
   price tag under it, and a row of buoys in the water to pick a
   bag. Sizes run on cqw so the scene scales with the panel. The
   loops share the hero scene's pause and reduced-motion rules;
   theme.js only swaps the bag and squashes the card as it lands.
-------------------------------------------------------------- */
@keyframes ils-hb-bob{0%,100%{translate:0 -.9cqw}50%{translate:0 .9cqw}}
@keyframes ils-hb-tilt{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}
@keyframes ils-hb-squash{
  0%,100%{transform:none}
  35%{transform:translateY(1.7cqw) scale(1.022,.972)}
  70%{transform:translateY(-.3cqw) scale(.996,1.004)}
}
@keyframes ils-hb-drip{
  0%{transform:translateY(0) scale(.6);opacity:0}
  8%{opacity:1}
  50%{transform:translateY(3cqw) scale(.8)}
  75%{transform:translateY(6.75cqw) scale(.9)}
  85%{opacity:1}
  100%{transform:translateY(12cqw) scale(1);opacity:0}
}
@keyframes ils-hb-float{0%,100%{transform:translateY(-.4cqw)}50%{transform:translateY(.4cqw)}}
@keyframes ils-hb-buoy{0%,100%{translate:0 -.6cqw}50%{translate:0 .6cqw}}
@keyframes ils-hb-rock{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes ils-hb-rise{
  0%{translate:0 0;opacity:0}
  20%{opacity:1}
  25%{translate:.6cqw -7.5cqw}
  50%{translate:-.6cqw -15cqw}
  75%{translate:.6cqw -22.5cqw}
  80%{opacity:1}
  100%{translate:0 -30cqw;opacity:0}
}
@keyframes ils-hb-drift{0%,100%{transform:translateX(calc(var(--dx) * -1))}50%{transform:translateX(var(--dx))}}

.ils-hb{
  container-type:inline-size;
  background:linear-gradient(180deg,#f6fdfe 0%,#d9f5fb 45%,#bdeef8 68%);
  text-align:left;text-transform:none;letter-spacing:normal;
}
.ils-hb .ils-hs__px{position:absolute;inset:0;pointer-events:none}
.ils-hb__glow{
  position:absolute;right:-6%;top:-8%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(253,201,62,.35),rgba(253,201,62,0) 65%);
}

/* Sun and clouds */
.ils-hb__sun{
  position:absolute;right:9%;top:8%;width:15%;aspect-ratio:1;
  animation:ils-hs-spin 60s linear infinite;
}
.ils-hb__ray{
  position:absolute;left:50%;top:50%;width:.5cqw;height:2.4cqw;margin:-1.2cqw 0 0 -.25cqw;
  border-radius:1cqw;background:var(--ils-ink);transform:rotate(var(--r)) translateY(-9.6cqw);
}
.ils-hb__core{
  position:absolute;inset:14%;border-radius:50%;background:var(--ils-accent);
  border:.4cqw solid var(--ils-ink);box-shadow:inset -1cqw -1cqw 0 var(--ils-accent-deep);
}
.ils-hb__cloud{position:absolute;--dx:2cqw;animation:ils-hb-drift 25s ease-in-out infinite}
.ils-hb__cloud--a{left:12%;top:21%;width:12%;height:3.6cqw}
.ils-hb__cloud--b{left:76%;top:40%;width:9%;height:2.8cqw;--dx:1.5cqw;animation-duration:31s;animation-delay:-10s}
.ils-hb__cloud span{
  position:absolute;background:var(--ils-white);border:.35cqw solid var(--ils-ink);
}
.ils-hb__cloud span:first-child{left:0;right:0;bottom:0;height:66%;border-radius:2cqw}
.ils-hb__cloud span:last-child{left:29%;bottom:44%;width:37%;aspect-ratio:1.2;border-bottom:0;border-radius:50% 50% 0 0}

/* Water, light shafts and the lane marking on the floor */
.ils-hb__water{
  position:absolute;left:0;right:0;top:68%;bottom:0;
  background:linear-gradient(180deg,#36c6da 0%,#1ba5c2 45%,#0d7f9e 100%);
}
.ils-hb__shaft{
  position:absolute;top:0;height:100%;left:12%;width:9%;transform:skewX(8deg);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));
}
.ils-hb__shaft:nth-child(2){left:38%;width:7%;transform:skewX(3deg);opacity:.85}
.ils-hb__shaft:nth-child(3){left:66%;width:10%;transform:skewX(-10deg);opacity:.85}
.ils-hb__lane{
  position:absolute;left:41%;bottom:0;width:18%;height:50%;opacity:.35;
  background:
    linear-gradient(#0b5e78,#0b5e78) 50% 0/16% 100% no-repeat,
    linear-gradient(#0b5e78,#0b5e78) 0 0/100% 16% no-repeat;
}

.ils-hb__bubbles{position:absolute;left:0;right:0;top:68%;bottom:0;overflow:hidden}
.ils-hb__bubbles span{
  position:absolute;bottom:0;aspect-ratio:1;border-radius:50%;opacity:0;
  border:.25cqw solid rgba(255,255,255,.7);
  animation:ils-hb-rise 5.56s linear var(--d,0s) infinite;
}

/* Lane rope on the waterline */
.ils-hb__rope{
  position:absolute;left:-1%;right:-1%;top:66.2%;height:3.4cqw;
  display:flex;justify-content:space-between;align-items:center;
}
.ils-hb__rope::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:.35cqw;margin-top:-.17cqw;background:var(--ils-ink);
}
.ils-hb__rope span{
  position:relative;flex:none;width:4cqw;height:2.2cqw;border-radius:50%;
  background:var(--ils-accent);border:.3cqw solid var(--ils-ink);
  animation:ils-hb-float 3.14s ease-in-out var(--d,0s) infinite;
}
.ils-hb__rope span.is-light{background:var(--ils-white)}

/* The bag card */
.ils-hb__stage{position:absolute;left:27%;top:9%;width:46%;aspect-ratio:1;z-index:5}
.ils-hb__drops{position:absolute;left:0;right:0;top:100%;height:14cqw;pointer-events:none}
.ils-hb__drops span{
  position:absolute;top:0;width:calc(1.3cqw * var(--s,1));height:calc(1.8cqw * var(--s,1));
  border-radius:50% 50% 50% 50%/35% 35% 65% 65%;
  background:var(--ils-cyan-soft);border:.3cqw solid var(--ils-ink);opacity:0;
  animation:ils-hb-drip 1.11s linear var(--d,0s) infinite;
}
.ils-hb__float{
  position:absolute;inset:0;
  animation:ils-hb-bob 4.5s ease-in-out infinite,ils-hb-tilt 7s ease-in-out infinite;
}
.ils-hb__squash{position:absolute;inset:0}
.ils-hb__squash.is-squash{animation:ils-hb-squash .7s var(--ils-ease-out)}
.ils-hb__card{
  position:absolute;inset:0;display:block;overflow:hidden;
  border-radius:4.5cqw;background:var(--ils-white);border:.4cqw solid var(--ils-ink);
  box-shadow:1.2cqw 1.2cqw 0 var(--ils-ink);
  transition:transform .3s var(--ils-ease),box-shadow .3s var(--ils-ease);
}
.ils-hb__card:hover{transform:translate(-.4cqw,-.4cqw);box-shadow:1.6cqw 1.6cqw 0 var(--ils-ink)}
.ils-hb__card:focus-visible{outline-offset:.8cqw;border-radius:4.5cqw}
.ils-hb .ils-hb__photo{
  position:absolute;inset:3%;width:94%;height:94%;object-fit:cover;border-radius:3.4cqw;
  opacity:0;transform:scale(1.08);
  transition:opacity .55s ease,transform .9s cubic-bezier(.2,.8,.2,1);
}
.ils-hb .ils-hb__photo.is-active{opacity:1;transform:none}
.ils-hb__tag{
  position:absolute;left:50%;bottom:-3.2cqw;transform:translateX(-50%) rotate(-3deg);
  display:flex;align-items:center;gap:1.2cqw;white-space:nowrap;
  padding:1.1cqw 2.2cqw;border-radius:var(--ils-r-pill);background:var(--ils-ink);color:var(--ils-white);
  font:800 max(12px,2.3cqw)/1.15 var(--ils-display);letter-spacing:-.01em;
  box-shadow:0 .8cqw 1.6cqw -.6cqw rgba(2,56,72,.5);pointer-events:none;
}
.ils-hb__tag span{font-size:inherit;letter-spacing:inherit}
.ils-hb__price{color:var(--ils-accent);font-family:var(--ils-sans);font-weight:700}

/* Buoys: one per bag, the picked one lifts and wears a yellow ring */
.ils-hb__buoys{
  position:absolute;left:5%;right:5%;top:77%;z-index:6;
  display:flex;justify-content:center;gap:2.3cqw;
}
.ils-hb__buoy{
  flex:none;width:9.2cqw;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;
  border-radius:50%;background:var(--ils-white);border:.4cqw solid var(--ils-ink);
  box-shadow:0 0 0 0 var(--ils-accent);
  animation:ils-hb-buoy 3.93s ease-in-out calc(var(--i,0) * -.5s) infinite,ils-hb-rock 5.71s ease-in-out calc(var(--i,0) * -.91s) infinite;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.3),box-shadow .4s ease;
}
.ils-hb__buoy:hover{transform:translateY(-.7cqw)}
.ils-hb__buoy.is-active{transform:translateY(-1.4cqw) scale(1.12);box-shadow:0 0 0 .7cqw var(--ils-accent)}
.ils-hb__buoy:focus-visible{outline-offset:.9cqw;border-radius:50%}
.ils-hb .ils-hb__buoy img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}

/* The bottom sticker drops below the buoys */
.ils-hero__media--bags .ils-sticker--b{bottom:3%}

/* On load the card rises out of the water after the panel lands */
.ils-anim .ils-hb__stage{animation:ils-hs-lift 1.3s var(--ils-ease-back) .7s both}

/* 34.1 Responsive — one column keeps the scene's proportions, centred */
@media (max-width:900px){
  .ils-hero__media--bags{aspect-ratio:1/.95;width:100%;max-width:560px;justify-self:center}
}
@media (hover:none){
  .ils-hb__card:hover{transform:none;box-shadow:1.2cqw 1.2cqw 0 var(--ils-ink)}
  .ils-hb__buoy:not(.is-active):hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ils-hb__drops,.ils-hb__bubbles{display:none}
  .ils-hb .ils-hb__photo{transition:opacity .3s ease;transform:none}
}

/* --------------------------------------------------------------
   35. Contact page
   The policy pages' title band, then the ways to reach us beside
   a card holding the Contact Form 7 form. The form fields are
   styled by element, so a form edited in Contact Form 7 still
   matches the checkout fields.
-------------------------------------------------------------- */
.ils-contact__lead{
  max-width:560px;margin:14px auto 0;
  font:400 17px/1.6 var(--ils-sans);color:var(--ils-body);
}
.ils-contact{background:var(--ils-cream);padding:clamp(40px,4.6vw,64px) 0 clamp(56px,6vw,90px)}
.ils-contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:clamp(28px,4vw,56px);align-items:start;max-width:1080px;margin:0 auto;
}

/* Ways to reach us */
.ils-contact__intro{margin-bottom:26px}
.ils-contact__ways{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ils-contact__way{display:flex;gap:16px;align-items:flex-start}
.ils-contact__icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ils-accent-soft);color:var(--ils-ink);border:1.5px solid var(--ils-accent-line);
}
.ils-contact__wayt{margin:0 0 4px;font:800 19px/1.25 var(--ils-display);letter-spacing:-.02em;color:var(--ils-ink)}
.ils-contact__wayv{margin:0;font:400 15.5px/1.55 var(--ils-sans);color:var(--ils-body)}
a.ils-contact__wayv{
  font-weight:600;color:var(--ils-teal);text-decoration:underline;
  text-decoration-color:var(--ils-accent-line);text-underline-offset:3px;word-break:break-word;
}
a.ils-contact__wayv:hover{color:var(--ils-teal-dark);text-decoration-color:var(--ils-accent-deep)}

.ils-contact__quick{margin-top:30px;padding-top:26px;border-top:1px solid var(--ils-edge)}
.ils-contact__quick ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.ils-contact__quick a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border:1.5px solid var(--ils-edge);border-radius:var(--ils-r-sm);
  background:var(--ils-white);font:600 15px/1.3 var(--ils-sans);color:var(--ils-ink);
  transition:border-color .2s var(--ils-ease),transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-contact__quick a:hover{border-color:var(--ils-ink);color:var(--ils-ink);transform:translateY(-2px);box-shadow:var(--ils-sh-soft)}
.ils-contact__quick a svg{flex:none;color:var(--ils-teal)}

/* The form card, built like the checkout steps */
.ils-contact__card{
  border:1.5px solid var(--ils-edge);border-radius:var(--ils-r-md);background:var(--ils-white);
  overflow:hidden;box-shadow:var(--ils-sh-soft);
}
.ils-contact__head{
  padding:18px 26px;background:var(--ils-accent-soft);
  border-bottom:1.5px solid var(--ils-accent-line);
}
.ils-contact__title{margin:0;font:800 22px/1.2 var(--ils-display);color:var(--ils-ink);letter-spacing:-.025em}
.ils-contact__form{padding:24px 26px 26px}
.ils-contact__notice{margin:0;font:400 15.5px/1.6 var(--ils-sans);color:var(--ils-body)}
.ils-contact__notice a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Contact Form 7 fields */
.ils-contact__form .wpcf7 form>p,
.ils-contact__form .ils-field{margin:0}
.ils-contact__form .wpcf7 form>p+p{margin-top:15px}
.ils-contact__form .ils-field__label span{font-weight:400;letter-spacing:.04em;text-transform:none}
.ils-contact__form label{display:block}
.ils-contact__form .wpcf7-form-control-wrap{display:block}
.ils-contact__form input[type=text],
.ils-contact__form input[type=email],
.ils-contact__form input[type=tel],
.ils-contact__form input[type=url],
.ils-contact__form input[type=number],
.ils-contact__form input[type=date],
.ils-contact__form select,
.ils-contact__form textarea{
  display:block;width:100%;height:48px;margin:0;border:1.5px solid var(--ils-line);border-radius:var(--ils-r-sm);
  padding:0 15px;font:400 15px/1 var(--ils-sans);color:var(--ils-ink);background:var(--ils-white);
  transition:border-color .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-contact__form textarea{height:auto;min-height:150px;padding:13px 15px;line-height:1.6;resize:vertical}
.ils-contact__form select{
  -webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background:var(--ils-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23023848' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.ils-contact__form input::placeholder,
.ils-contact__form textarea::placeholder{color:var(--ils-muted)}
.ils-contact__form input:focus,
.ils-contact__form select:focus,
.ils-contact__form textarea:focus{outline:0;border-color:var(--ils-ink);box-shadow:var(--ils-ring)}
.ils-contact__form .wpcf7-not-valid{border-color:var(--ils-danger)}
.ils-contact__form .wpcf7-not-valid-tip{
  display:block;margin-top:6px;font:500 13px/1.4 var(--ils-sans);color:var(--ils-danger);
}
.ils-contact__form .wpcf7-list-item{margin:0 18px 0 0}
.ils-contact__form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;font:400 14.5px/1.5 var(--ils-sans);color:var(--ils-body)}
.ils-contact__form input[type=checkbox],
.ils-contact__form input[type=radio]{accent-color:var(--ils-ink);width:17px;height:17px}

/* Submit: the primary button, whatever classes the form gives it */
.ils-contact__submit{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.ils-contact__form .wpcf7 form>.ils-contact__submit{margin-top:22px}
.ils-contact__form .wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;border-radius:var(--ils-r-pill);border:1.5px solid var(--ils-ink);cursor:pointer;
  font:600 16px/1 var(--ils-sans);letter-spacing:-.005em;color:var(--ils-accent);
  background:linear-gradient(180deg,var(--ils-ink-lift) 0%,var(--ils-ink) 100%);
  box-shadow:0 12px 22px -14px rgba(2,56,72,.9);
  transition:transform .2s var(--ils-ease),box-shadow .2s var(--ils-ease);
}
.ils-contact__form .wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 18px 28px -14px rgba(2,56,72,.95)}
.ils-contact__form .wpcf7-submit:disabled{opacity:.6;cursor:progress;transform:none}
.ils-contact__form .wpcf7-spinner{margin:0;background-color:var(--ils-teal)}

/* Response message under the form */
.ils-contact__form .wpcf7 form .wpcf7-response-output{
  margin:20px 0 0;padding:13px 16px;border:1.5px solid var(--ils-accent-line);border-radius:var(--ils-r-sm);
  background:var(--ils-accent-soft);font:500 14.5px/1.5 var(--ils-sans);color:var(--ils-ink);
}
.ils-contact__form .wpcf7 form.sent .wpcf7-response-output{background:var(--ils-ok-bg);border-color:var(--ils-ok-line)}
.ils-contact__form .wpcf7 form.failed .wpcf7-response-output,
.ils-contact__form .wpcf7 form.aborted .wpcf7-response-output,
.ils-contact__form .wpcf7 form.spam .wpcf7-response-output{background:var(--ils-danger-bg);border-color:var(--ils-danger-line)}

@media (max-width:900px){
  .ils-contact__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ils-contact__head{padding:16px 20px}
  .ils-contact__form{padding:20px}
  .ils-contact__form .wpcf7-submit{width:100%}
}