@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/manrope-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/manrope-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/manrope-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/manrope-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/manrope-4.ttf) format('truetype');
}

    /* BRAND TOKENS — change these to adjust the entire homepage. */
    :root {
      --green: var(--wp--preset--color--enosis-green, #005132);
      --green-dark: var(--wp--preset--color--green-dark, #003d29);
      --ink: var(--wp--preset--color--ink, #14392c);
      --lime: var(--wp--preset--color--lime, #d3ee93);
      --mint: var(--wp--preset--color--mint, #edf5ef);
      --paper: var(--wp--preset--color--paper, #ffffff);
      --muted: var(--wp--preset--color--muted, #58695f);
      --line: var(--wp--preset--color--line, #dce5de);
      --font: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
      --radius: 22px;
      --container: 1280px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 112px; }
    body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    svg { flex: none; }
    h1, h2, h3, p { margin: 0; }
    h1, h2, h3 { font-weight: 650; }
    a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #538323; outline-offset: 5px; border-radius: 4px; }
    .on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark summary:focus-visible { outline-color: var(--lime); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .skip-link { position: fixed; left: 16px; top: -100px; padding: 12px 20px; background: var(--lime); z-index: 100; color: var(--green); border-radius: 8px; }
    .skip-link:focus { top: 16px; }
    .container { width: min(var(--container), calc(100% - 112px)); margin-inline: auto; }
    .eyebrow { font-size: .8125rem; font-weight: 750; letter-spacing: .135em; text-transform: uppercase; line-height: 1.5; }
    .section-heading { font-size: clamp(2.3rem, 3.7vw, 3.5rem); line-height: 1.12; letter-spacing: -.047em; }
    .section-heading .soft { color: #6b8c78; }
    .arrow { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 700; }
    .link-arrow .arrow { transition: transform .22s ease; }
    .link-arrow:hover .arrow { transform: translateX(4px); }
    .link-arrow .label { border-bottom: 1px solid transparent; }
    .link-arrow:hover .label { border-bottom-color: currentColor; }
    .button { min-height: 54px; max-width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 14px 24px; border-radius: 100px; border: 1px solid transparent; font-weight: 750; font-size: .9375rem; transition: background .2s ease, color .2s ease, transform .2s ease; }
    .button:hover { transform: translateY(-2px); }
    .button-lime { background: var(--lime); color: var(--green-dark); }
    .button-lime:hover { background: #e0f5b1; }
    .button-green { background: var(--green); color: white; }
    .button-green:hover { background: var(--green-dark); }
    .button-outline { border-color: #a8beb0; }
    .button-outline:hover { background: var(--mint); }
    .round-arrow { width: 47px; height: 47px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: color .22s, background .22s, transform .22s; }
    .round-arrow .arrow { width: 20px; height: 20px; }
    .utility { height: 35px; background: var(--green); color: white; font-size: .75rem; }
    .utility-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
    .utility-message { letter-spacing: .05em; }
    .utility-links { display: flex; align-items: center; gap: 24px; }
    .utility-links a { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; }
    .utility-links a:hover { color: var(--lime); }
    .utility-links .arrow { height: 13px; width: 13px; }
    .site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
    .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 28px #003d2907; }
    .header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .brand-home { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .brand-home img { width: 58px; height: 58px; object-fit: contain; }
    .brand-wordmark { font-size: 1.35rem; letter-spacing: .045em; line-height: 1.1; font-weight: 800; }
    .brand-wordmark small { display: block; font-size: .625rem; letter-spacing: .39em; font-weight: 650; margin-top: 7px; }
    .desktop-nav { display: flex; gap: clamp(22px, 2.5vw, 38px); margin-left: auto; align-items: center; }
    .desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 650; position: relative; }
    .desktop-nav a::after { content: ''; position: absolute; bottom: 3px; left: 0; right: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
    .desktop-nav a:hover::after, .desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
    .header-contact { min-height: 45px; font-size: .8125rem; padding: 10px 18px; margin-left: 18px; gap: 17px; }
    .menu-button { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: white; }
    .menu-button svg { width: 22px; height: 22px; stroke: var(--green); stroke-width: 1.5; fill: none; }
    .site-footer { background: var(--green); color: white; padding: 57px 0 22px; }
    .footer-top { display: grid; grid-template-columns: 1.45fr .75fr 1fr 1.1fr; gap: 50px; }
    .footer-brand .brand-home img { filter: brightness(0) invert(1); }
    .footer-brand .brand-wordmark { font-size: 1.45rem; }
    .footer-brand > p { color: #cbded0; font-size: .9375rem; margin-top: 24px; max-width: 200px; }
    .footer-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 750; margin-bottom: 19px; color: var(--lime); }
    .footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
    .footer-links a { font-size: .8125rem; padding-block: 3px; color: #e1ebe1; }
    .footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
    .footer-contact { color: #e1ebe1; font-size: .8125rem; line-height: 1.8; }
    .footer-contact address { font-style: normal; margin-bottom: 15px; }
    .footer-contact > a { display: block; padding-block: 3px; }
    .footer-contact > a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .footer-social { margin-top: 16px; display: inline-flex; font-size: .8125rem; align-items: center; gap: 12px; }
    .footer-social .social-mark { border: 1px solid #85a28e; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 800; font-family: Arial, sans-serif; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; border-top: 1px solid #749c8166; margin-top: 49px; padding-top: 23px; font-size: .75rem; color: #c3d8c9; }
    .back-to-top { display: inline-flex; align-items: center; gap: 12px; min-height: 35px; }
    .back-to-top svg { width: 16px; height: 16px; transform: rotate(-90deg); }
    .back-to-top:hover { color: white; }
    .mobile-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; padding: 27px; background: var(--green-dark); color: white; }
    .mobile-dialog::backdrop { background: #003d2977; }
    .mobile-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
    .mobile-dialog .brand-home img { filter: brightness(0) invert(1); }
    .close-menu { width: 46px; height: 46px; border: 1px solid #719d84; border-radius: 50%; background: transparent; color: white; display: grid; place-items: center; }
    .close-menu svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.5; }
    .mobile-links { display: flex; flex-direction: column; }
    .mobile-links a { padding-block: 15px; border-bottom: 1px solid #73978366; font-size: clamp(1.4rem, 5.7vw, 2rem); letter-spacing: -.035em; display: flex; justify-content: space-between; align-items: center; }
    .mobile-links a:hover { color: var(--lime); }
    .mobile-dialog .button { margin-top: 34px; }
    .mobile-dialog-note { font-size: .8125rem; color: #c4d7c9; margin-top: 30px; }

    [hidden] { display: none !important; }
    input, select { font: inherit; color: inherit; }
    input:focus-visible, select:focus-visible { outline: 3px solid #538323; outline-offset: 3px; }
    .desktop-nav { gap: clamp(15px, 1.7vw, 25px); }
    .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
    .breadcrumb { display: flex; gap: 11px; align-items: center; font-size: .8125rem; color: var(--muted); padding: 22px 0; }
    .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .breadcrumb .arrow { width: 12px; height: 12px; }
    .product-hero { background: var(--green); color: white; border-radius: 24px; display: grid; grid-template-columns: 1.08fr 1fr; padding: 16px; gap: 20px; overflow: hidden; }
    .product-intro { padding: 28px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
    .product-intro .eyebrow { color: #c8decf; font-size: .75rem; letter-spacing: .13em; }
    .product-intro h1 { font-size: clamp(2.6rem, 4.2vw, 4.1rem); letter-spacing: -.055em; line-height: 1.09; margin: 17px 0 20px; font-weight: 600; }
    .product-intro h1 span { color: var(--lime); }
    .product-intro > p:last-child { max-width: 375px; color: #e0ece3; font-size: 1rem; line-height: 1.75; }
    .hero-display { position: relative; min-height: 310px; border-radius: 150px 15px 15px 15px; background: #edf5e3; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; padding: 15px 20px 20px; }
    .hero-display::before { content: ''; width: 300px; height: 300px; border-radius: 50%; background: #d3eaa6; position: absolute; bottom: -113px; right: -70px; z-index: -1; }
    .hero-display::after { content: ''; width: 80%; height: 20px; border-radius: 50%; background: #b6c9a860; filter: blur(12px); position: absolute; bottom: 27px; z-index: -1; }
    .hero-display img { position: relative; object-fit: contain; mix-blend-mode: multiply; width: 54%; height: 265px; }
    .hero-display img:first-child { transform: rotate(-8deg) translate(8px, -6px); z-index: 1; }
    .hero-display img:nth-child(2) { height: 217px; margin-left: -40px; transform: rotate(5deg) translateY(-8px); }
    .hero-display .display-note { position: absolute; top: 20px; right: 21px; color: var(--green); font-size: .75rem; text-align: right; line-height: 1.55; letter-spacing: .025em; }
    .catalogue { padding: 43px 0 65px; }
    .catalogue-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 23px; }
    .catalogue-heading h2 { font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.3; font-weight: 650; }
    .catalogue-heading > p { font-size: .875rem; color: var(--muted); }
    .filters-row { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
    .search-field { display: flex; align-items: center; gap: 13px; padding: 0 15px 0 18px; border: 1px solid #bacdc0; border-radius: 12px; min-width: 0; flex: 1; min-height: 57px; background: #fff; }
    .search-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #00513215; }
    .search-field > .arrow { color: var(--green); }
    .search-field input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; font-size: .9375rem; padding: 14px 0; }
    .search-field input::placeholder { color: #65766b; opacity: 1; }
    .search-field input::-webkit-search-cancel-button { display: none; }
    .clear-search { border: 0; background: transparent; width: 40px; min-width: 40px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
    .clear-search:hover { background: var(--mint); }
    .brand-select { border: 1px solid #bacdc0; background: white; border-radius: 12px; padding: 0 17px; min-height: 57px; width: 225px; font-size: .9375rem; cursor: pointer; }
    .family-select { width: 255px; }
    .product-format:empty, .product-variant:empty { display: none; }
    @media (min-width: 701px) and (max-width: 1000px) {
      .filters-row { flex-wrap: wrap; }
      .filters-row .search-field { flex-basis: 100%; }
      .filters-row .brand-select { flex: 1; width: 0; min-width: 0; }
    }
    .universe-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
    .filter-pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 50px; padding: 9px 17px; background: white; font-size: .875rem; font-weight: 600; }
    .filter-pill:hover { background: var(--mint); border-color: #9bb2a2; }
    .filter-pill[aria-pressed="true"] { background: var(--green); color: white; border-color: var(--green); }
    .filter-pill .arrow { width: 18px; height: 18px; }
    .result-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 69px; font-size: .875rem; }
    .result-bar strong { font-weight: 800; }
    .reset-filters { padding: 8px 0; min-height: 44px; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; font-weight: 650; font-size: .875rem; }
    .selection-note { color: var(--muted); font-size: .8125rem; }
    .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }
    .product-card { min-width: 0; }
    .product-link { display: block; height: 100%; border-radius: 16px; }
    .packshot { background: #f2f6ef; position: relative; border: 1px solid #e5ece1; height: 270px; border-radius: 16px; display: flex; justify-content: center; align-items: center; overflow: hidden; isolation: isolate; transition: border-color .2s ease, background .2s ease; }
    .packshot-maison { background: #f1f5eb; }
    .packshot-soin { background: #edf5f5; border-color: #e1eceb; }
    .packshot-papier { background: #f0f4f8; border-color: #e4eaf0; }
    .packshot img { width: calc(100% - 32px); height: 200px; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; margin-top: 14px; }
    .packshot img[src*="/claires-"] { scale: 1.55; }
    .product-link:hover .packshot img { transform: translateY(-5px) scale(1.04); }
    .product-link:hover .packshot { border-color: #9ab59f; }
    .product-brand { position: absolute; top: 16px; left: 17px; z-index: 2; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .product-format { position: absolute; bottom: 14px; left: 15px; max-width: calc(100% - 70px); border-radius: 30px; padding: 4px 9px; font-size: .75rem; background: #ffffffef; color: #415a48; border: 1px solid #dee7dc; }
    .product-open { position: absolute; bottom: 13px; right: 13px; border: 1px solid #a8bdaa; background: transparent; width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; transition: color .2s, background .2s, transform .2s; }
    .product-open .arrow { width: 18px; height: 18px; }
    .product-link:hover .product-open { color: white; background: var(--green); border-color: var(--green); transform: rotate(-35deg); }
    .product-copy { padding: 16px 3px 4px; }
    .product-family { color: var(--muted); font-size: .75rem; margin-bottom: 4px; }
    .product-copy h3 { font-size: 1.075rem; letter-spacing: -.023em; line-height: 1.45; font-weight: 750; }
    .product-variant { color: #5f7165; margin-top: 3px; font-size: .875rem; }
    .catalogue-bottom { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 30px; }
    .catalogue-bottom p { max-width: 490px; color: var(--muted); font-size: .9375rem; }
    .catalogue-bottom .link-arrow { flex-shrink: 0; }
    .empty-state { border-radius: 18px; border: 1px dashed #b7cabb; padding: 48px 25px; text-align: center; background: #f7faf6; }
    .empty-state > .arrow { width: 36px; height: 36px; margin-bottom: 10px; }
    .empty-state h3 { font-size: 1.4rem; margin-bottom: 10px; }
    .empty-state p { color: var(--muted); max-width: 480px; margin: 0 auto 20px; }
    .product-help { background: var(--mint); border-radius: 20px; padding: 35px 40px; display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 65px; }
    .product-help h2 { font-size: clamp(1.55rem,2.3vw,2.15rem); line-height: 1.3; letter-spacing: -.035em; margin-bottom: 9px; }
    .product-help p { color: var(--muted); font-size: .9375rem; }
    .product-help .button { flex-shrink: 0; }
    .product-dialog { width: min(880px, calc(100% - 40px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 23px; color: var(--ink); background: white; overflow: auto; box-shadow: 0 30px 100px #00291e40; }
    .product-dialog::backdrop { background: #00291eb0; backdrop-filter: blur(5px); }
    .detail-layout { display: grid; grid-template-columns: 1fr 1.04fr; min-height: 430px; }
    .detail-image { padding: 44px 22px; background: #f0f5ec; display: flex; align-items: center; }
    .detail-image img { width: 100%; height: 330px; object-fit: contain; mix-blend-mode: multiply; }
    .detail-image img[src*="/claires-"] { scale: 1.45; }
    .detail-copy { padding: 55px 34px 34px; }
    .detail-brand { font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
    .detail-copy h2 { font-size: 2rem; line-height: 1.18; letter-spacing: -.04em; margin: 14px 0 11px; }
    .detail-variant { color: var(--muted); }
    .detail-data { margin: 24px 0; border-block: 1px solid var(--line); }
    .detail-data > div { display: flex; gap: 20px; justify-content: space-between; padding: 12px 0; font-size: .875rem; }
    .detail-data > div + div { border-top: 1px solid var(--line); }
    .detail-data dt { color: var(--muted); }
    .detail-data dd { margin: 0; text-align: right; font-weight: 700; }
    .detail-copy .button { width: 100%; padding-inline: 17px; gap: 12px; font-size: .875rem; }
    .detail-source { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; font-size: .8125rem; margin-top: 10px; text-decoration: underline; text-underline-offset: 4px; }
    .detail-source .arrow { width: 16px; height: 16px; }
    .detail-close { position: absolute; top: 13px; right: 13px; background: white; border: 1px solid var(--line); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; z-index: 2; }
    .detail-close:hover { background: var(--mint); }
    body.detail-open { overflow: hidden; }
    .footer-links a, .footer-contact, .footer-social { font-size: .875rem; }
    @media (max-width: 1200px) {
      .container { width: calc(100% - 72px); }
      .header-inner { gap: 15px; }
      .header-contact { margin-left: 0; }
      .product-intro { padding: 24px; }
      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .footer-top { gap: 30px; }
    }
    @media (max-width: 1023px) {
      .desktop-nav, .header-contact { display: none; }
      .menu-button { display: flex; }
      .header-inner { height: 82px; }
    }
    @media (max-width: 850px) {
      .product-intro { padding: 22px 15px; }
      .product-intro h1 { font-size: 2.8rem; }
      .hero-display { min-height: 290px; border-top-left-radius: 100px; }
      .hero-display img { height: 210px; }
      .hero-display img:nth-child(2) { height: 185px; margin-left: -30px; }
      .hero-display .display-note { font-size: .75rem; max-width: 140px; }
      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .packshot { height: 290px; }
      .packshot img { height: 220px; }
      .catalogue-heading { flex-wrap: wrap; gap: 9px; }
      .catalogue-bottom { align-items: flex-start; flex-direction: column; gap: 18px; }
      .product-help { padding: 30px; align-items: flex-start; flex-direction: column; gap: 22px; }
      .footer-top { grid-template-columns: 1.1fr 1fr 1fr; gap: 28px; }
      .footer-contact-column { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid #749c8166; }
      .footer-contact { display: flex; gap: 30px; flex-wrap: wrap; }
    }
    @media (max-width: 600px) {
      .container { width: calc(100% - 40px); }
      .utility { height: 31px; }
      .utility-inner { justify-content: center; }
      .utility-links { display: none; }
      .utility-message { font-size: .75rem; letter-spacing: 0; }
      .header-inner { height: 73px; }
      .brand-home img { width: 48px; height: 48px; }
      .brand-wordmark { font-size: 1.15rem; }
      .brand-wordmark small { font-size: .625rem; }
      .breadcrumb { padding-block: 17px; }
      .product-hero { grid-template-columns: 1fr; gap: 10px; border-radius: 19px; padding: 12px; }
      .product-intro { padding: 22px 15px 19px; }
      .product-intro h1 { font-size: clamp(2.65rem,10.7vw,3.6rem); margin-block: 14px 16px; }
      .product-intro > p:last-child { line-height: 1.65; }
      .hero-display { min-height: 215px; max-height: 240px; border-top-left-radius: 90px; padding-top: 30px; }
      .hero-display img { width: 48%; height: 190px; }
      .hero-display img:nth-child(2) { height: 155px; margin-left: -16px; }
      .hero-display .display-note { font-size: .75rem; top: 12px; right: 16px; max-width: 150px; }
      .catalogue { padding-block: 32px 42px; }
      .catalogue-heading { margin-bottom: 19px; }
      .catalogue-heading h2 { font-size: 1.4rem; }
      .filters-row { flex-wrap: wrap; gap: 10px; margin-bottom: 17px; }
      .search-field { flex-basis: 100%; padding-left: 14px; }
      .search-field input { font-size: 1rem; }
      .brand-select { width: 100%; min-height: 49px; font-size: 1rem; }
      .universe-filters { gap: 7px; padding-bottom: 18px; }
      .filter-pill { padding: 8px 13px; font-size: .875rem; gap: 6px; }
      .filter-pill .arrow { display: none; }
      .result-bar { gap: 9px; flex-wrap: wrap; padding-block: 13px; min-height: 67px; }
      .selection-note { font-size: .75rem; }
      .product-grid { gap: 25px 12px; }
      .packshot { height: 211px; border-radius: 12px; }
      .packshot img { width: calc(100% - 14px); height: 156px; margin-top: 6px; }
      .product-brand { font-size: .75rem; top: 12px; left: 12px; }
      .product-format { font-size: .75rem; bottom: 11px; left: 10px; padding: 3px 7px; }
      .product-open { width: 29px; height: 29px; right: 10px; bottom: 10px; }
      .product-open .arrow { width: 15px; height: 15px; }
      .product-copy { padding: 12px 1px 0; }
      .product-copy h3 { font-size: 1rem; line-height: 1.4; }
      .product-family { font-size: .75rem; }
      .product-variant { font-size: .875rem; }
      .catalogue-bottom { margin-top: 28px; padding-top: 24px; }
      .product-help { border-radius: 17px; padding: 26px; margin-bottom: 42px; }
      .product-help .button { width: 100%; }
      .product-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 17px; }
      .detail-layout { grid-template-columns: 1fr; }
      .detail-image { padding: 20px 38px; }
      .detail-image img { height: 220px; }
      .detail-copy { padding: 27px 24px; }
      .detail-copy h2 { font-size: 1.8rem; }
      .detail-data { margin-block: 21px; }
      .site-footer { padding-top: 34px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
      .footer-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 17px; }
      .footer-brand .brand-wordmark { font-size: 1.15rem; }
      .footer-brand > p { margin: 0; font-size: .8125rem; max-width: 128px; }
      .footer-contact { display: block; }
      .footer-title { font-size: .75rem; margin-bottom: 13px; }
      .footer-links a { padding-block: 4px; }
      .footer-bottom { align-items: flex-start; margin-top: 28px; gap: 13px; }
      .footer-bottom > p { max-width: 175px; }
      .back-to-top { font-size: .75rem; white-space: nowrap; gap: 6px; }
    }
    @media (max-width: 370px) {
      .product-grid { grid-template-columns: 1fr; }
      .packshot { height: 280px; }
      .packshot img { height: 220px; }
      .footer-brand { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; animation: none !important; }
    }
    @media print {
      .utility, .site-header, .filters-row, .universe-filters, .result-bar, .product-help, dialog, .back-to-top { display: none !important; }
      .container { width: 100%; }
      .product-grid { grid-template-columns: repeat(3, 1fr); }
      .product-card { break-inside: avoid; }
      * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    }

/* Range navigation: photographic tabs and an in-page reference panel. */
.range-catalogue .product-hero{grid-template-columns:1fr;padding:0;background:transparent;color:var(--ink);border-radius:0}
.range-catalogue .product-intro{padding:20px 0 12px}
.range-catalogue .product-intro .eyebrow{color:var(--green)}
.range-catalogue .product-intro h1{font-size:clamp(2.5rem,4vw,4rem);margin:12px 0 16px}
.range-catalogue .product-intro h1 br,.range-catalogue .hero-display{display:none}
.range-catalogue .product-intro h1 span+span{color:#708a7a;margin-left:.22em}
.range-catalogue .catalogue{padding-top:28px}
.range-catalogue .catalogue-heading{margin-bottom:20px}
.range-catalogue .filters-row{margin-bottom:16px}
.range-catalogue .universe-filters{border-bottom:0;padding-bottom:20px}
.range-tabs{display:flex;gap:12px;overflow-x:auto;padding:5px 3px 18px;scroll-snap-type:x proximity;scrollbar-color:#90ad9a #edf5ef;scrollbar-width:thin}
.range-tab{position:relative;flex:0 0 180px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;border:1px solid var(--line);border-radius:16px;background:#f4f7f3;padding:12px 16px 16px;text-align:left;scroll-snap-align:start;transition:border-color .18s,background .18s;line-height:1.4}
.range-tab[data-brand=mio]{background:#eef6fa}.range-tab[data-brand=zen]{background:#f0f7eb}.range-tab[data-brand=claires]{background:#faf2f0}.range-tab[data-brand=papillon]{background:#f5f2fa}
.range-tab:hover{border-color:#7d9b88}.range-tab[aria-selected=true]{border:2px solid var(--green);padding:11px 15px 15px;background:#e5f0e4;box-shadow:0 3px 0 var(--green)}
.range-tab-art{height:112px;width:100%;display:flex;justify-content:center;align-items:flex-end;margin-bottom:12px}
.range-tab-art img{width:48%;height:95px;object-fit:contain;mix-blend-mode:multiply;margin-inline:-9%;filter:drop-shadow(0 5px 4px #12392614)}
.range-tab-art img:nth-child(2){height:108px;z-index:1}.range-tab-art img:only-child{width:100%;height:108px;margin:0}
.range-tab-brand{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#526c5c}
.range-tab-name{font-size:.97rem;font-weight:750;margin-top:5px;min-height:2.8em}
.range-tab-count{font-size:.73rem;color:#58695f;margin-top:7px}
.range-prompt{padding:28px 0 12px;font-size:1rem;color:var(--muted)}
.range-panel{margin-top:22px;border-top:1px solid var(--line);padding-top:24px;scroll-margin-top:110px}
.range-panel-title{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.04em;margin:18px 0 10px}
.range-panel-description{color:var(--muted);font-size:.92rem}
.range-back{background:none;border:0;padding:5px 0;color:var(--green);font-size:.85rem;font-weight:750;min-height:44px}
.range-product-filters{display:flex;gap:16px;margin-top:20px}
.range-select-label{display:flex;flex-direction:column;gap:7px;font-size:.75rem;font-weight:650}
.range-select-label select{min-height:48px;width:240px;font-size:.875rem}
.range-catalogue .packshot img[src*="/claires-"]{scale:1.25}
.range-catalogue .product-family{display:none}
@media(max-width:600px){.range-catalogue .product-intro{padding-top:10px}.range-catalogue .product-intro h1 span{display:block}.range-catalogue .product-intro h1 span+span{margin-left:0}.range-catalogue .catalogue-heading>p{display:none}.range-tab{flex-basis:154px;padding:11px 13px}.range-tab[aria-selected=true]{padding:10px 12px}.range-tab-art{height:95px}.range-tab-art img{height:80px}.range-tab-art img:nth-child(2),.range-tab-art img:only-child{height:94px}.range-tab-name{font-size:.875rem}.range-product-filters{flex-wrap:wrap;gap:10px}.range-select-label{flex:1;min-width:135px}.range-select-label select{width:100%;padding-inline:10px}.range-panel{margin-top:14px}.range-catalogue .catalogue{padding-top:22px}}
@media(prefers-reduced-motion:reduce){.range-tab{transition:none}.range-tabs{scroll-behavior:auto}}

.range-tab-art img { mix-blend-mode:normal;filter:none; }
.range-tab-art img.range-composite { width:100%;height:108px;margin:0;object-fit:contain; }
@media(max-width:600px){.range-tab-art img.range-composite{height:94px;}}