/**
 * MatBuilder — child theme of lnwks (Hummingbird base), started from the rhythm theme (Rhythm Golf).
 * Brand identity from the MatBuilder web mockup (_assets/MAT-BUILDER-MQUETTE-WEB.pdf): black, #161616 and yellow
 * #ffe91a; Anton Regular 400 for titles, buttons and navigation (italic lines: Regular 400 slanted, never bold),
 * Montserrat for running text. The MatBuilder block at the end of this file adapts the rhythm rules.
 *
 * lnwks' theme.css is written in cascade layers (@layer ...), so every rule
 * in this unlayered file wins over it whatever the selector specificity.
 */

/* ---------- Fonts (self-hosted, latin subset, OFL) ---------- */
/* Anton exists in Regular 400 only: every weight points to that one file, so a rule asking for 500 / 600 (rhythm
   rules) never gets a synthesized bold Anton. No italic face: the italic lines (<em> of the titles) are the browser's
   slanted Regular 400 (font-synthesis:style) */
@font-face{font-family:"Anton";font-style:normal;font-weight:1 1000;font-display:swap;src:url("../fonts/anton-latin-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/montserrat-latin.woff2") format("woff2")}

/* ---------- Brand tokens ---------- */
:root{
  --rg-brand:#ffe91a;        --rg-brand-rgb:255,233,26;
  --rg-brand-hover:#fff27a;
  --rg-on-brand:#000;        /* text on the yellow */
  /* Titles, buttons, navigation: Anton caps (condensed); --rg-text-font for running text (body, links, inputs);
     --rg-caps for the small letter-spaced labels (eyebrows, breadcrumb, form labels), Montserrat caps */
  --rg-font:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --rg-text-font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --rg-caps:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --rg-radius:6px;
  --rg-pill:6px;
}

/*
 * Two color schemes, chosen by data-bs-theme (layouts/layout-both-columns.tpl):
 * - dark  : the home page and the mm_custom configurator, header and footer everywhere;
 * - light : every other page (catalog, product, cart, checkout, account, CMS…), on #fff.
 * Every rule below uses these tokens, so a nested data-bs-theme (header, footer) gets its own scheme.
 */
:root,[data-bs-theme=dark]{
  color-scheme:dark;
  --rg-bg:#161616;           --rg-bg-rgb:22,22,22;
  --rg-surface:#0c0c0c;      --rg-surface-rgb:12,12,12;
  --rg-surface-2:#262626;    --rg-surface-2-rgb:38,38,38;
  --rg-surface-3:#333333;
  --rg-text:#fff;            --rg-text-rgb:255,255,255;
  --rg-text-2:#a8a8a3;       --rg-text-2-rgb:168,168,163;
  --rg-text-3:#76766f;       --rg-text-3-rgb:118,118,111;
  --rg-text-soft:#d6d6d0;
  --rg-emphasis:#fff;
  --rg-border:rgba(255,255,255,.12);
  --rg-border-strong:rgba(255,255,255,.3);
  --rg-overlay:rgba(255,255,255,.06);
  --rg-stripe:rgba(255,255,255,.03);
  --rg-brand-2:#ffe91a;      --rg-brand-2-rgb:255,233,26;
  --rg-danger:#e08a6d;       --rg-danger-rgb:224,138,109;
}
[data-bs-theme=light]{
  color-scheme:light;
  --rg-bg:#fff;              --rg-bg-rgb:255,255,255;
  --rg-surface:#ffffff;      --rg-surface-rgb:255,255,255;
  --rg-surface-2:#ebebeb;    --rg-surface-2-rgb:235,235,235;
  --rg-surface-3:#e0e0e0;
  --rg-text:#141414;         --rg-text-rgb:20,20,20;
  --rg-text-2:#555555;       --rg-text-2-rgb:85,85,85;
  --rg-text-3:#6b6b6b;       --rg-text-3-rgb:107,107,107;
  --rg-text-soft:#333333;
  --rg-emphasis:#000;
  --rg-border:rgba(20,20,20,.12);
  --rg-border-strong:rgba(20,20,20,.3);
  --rg-overlay:rgba(20,20,20,.05);
  --rg-stripe:rgba(20,20,20,.03);
  /* The yellow has no contrast on white: accents (links, emphasis) are black there, the yellow stays a fill */
  --rg-brand-2:#000000;      --rg-brand-2-rgb:0,0,0;
  --rg-danger:#b3401e;       --rg-danger-rgb:179,64,30;
}

/* ---------- Bootstrap tokens, from the scheme tokens ---------- */
:root,[data-bs-theme=dark],[data-bs-theme=light]{
  --bs-primary:var(--rg-brand);
  --bs-primary-rgb:var(--rg-brand-rgb);
  --bs-success:var(--rg-brand-2);
  --bs-success-rgb:var(--rg-brand-2-rgb);
  --bs-danger:var(--rg-danger);
  --bs-danger-rgb:var(--rg-danger-rgb);
  --bs-dark:#161616;
  --bs-dark-rgb:22,22,22;
  --bs-primary-text-emphasis:var(--rg-brand-2);
  --bs-primary-bg-subtle:rgba(255,233,26,.16);
  --bs-primary-border-subtle:rgba(255,233,26,.5);
  --bs-success-text-emphasis:var(--rg-brand-2);
  --bs-success-bg-subtle:rgba(255,233,26,.14);
  --bs-success-border-subtle:rgba(255,233,26,.45);
  --bs-danger-text-emphasis:var(--rg-danger);
  --bs-danger-bg-subtle:rgba(224,138,109,.14);
  --bs-danger-border-subtle:rgba(224,138,109,.45);

  --bs-body-font-family:var(--rg-text-font);
  --bs-body-font-size:.9375rem;
  --bs-body-line-height:1.65;
  --bs-body-color:var(--rg-text);
  --bs-body-color-rgb:var(--rg-text-rgb);
  --bs-body-bg:var(--rg-bg);
  --bs-body-bg-rgb:var(--rg-bg-rgb);
  --bs-emphasis-color:var(--rg-emphasis);
  --bs-secondary-color:var(--rg-text-2);
  --bs-secondary-color-rgb:var(--rg-text-2-rgb);
  --bs-secondary-bg:var(--rg-surface-2);
  --bs-secondary-bg-rgb:var(--rg-surface-2-rgb);
  --bs-tertiary-color:var(--rg-text-3);
  --bs-tertiary-color-rgb:var(--rg-text-3-rgb);
  --bs-tertiary-bg:var(--rg-surface);
  --bs-tertiary-bg-rgb:var(--rg-surface-rgb);
  --bs-heading-color:var(--rg-text);
  --bs-link-color:var(--rg-brand-2);
  --bs-link-color-rgb:var(--rg-brand-2-rgb);
  --bs-link-hover-color:var(--rg-text);
  --bs-link-hover-color-rgb:var(--rg-text-rgb);
  --bs-border-color:var(--rg-border);
  --bs-border-color-translucent:var(--rg-border);
  --bs-border-radius:var(--rg-radius);
  --bs-border-radius-sm:6px;
  --bs-border-radius-lg:12px;
  --bs-focus-ring-color:rgba(var(--rg-brand-2-rgb),.4);
  --bs-form-valid-color:var(--rg-brand-2);
  --bs-form-valid-border-color:var(--rg-brand-2);
  --bs-form-invalid-color:var(--rg-danger);
  --bs-form-invalid-border-color:var(--rg-danger);
}

::selection{background:var(--rg-brand);color:var(--rg-on-brand)}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--rg-font);font-weight:600;letter-spacing:-.01em;line-height:1.12
}
h1 em,h2 em,h3 em,.h1 em,.h2 em{font-style:italic;font-weight:500;color:var(--rg-brand-2)}
.page-title,.page-content h1{font-size:clamp(2rem,4vw,3rem)}

/* Small caps labels, like the landing page eyebrows */
.rg-eyebrow,
.footer-block__title,
.breadcrumb,
.badge,
.product-flags .badge,
.nav-tabs .nav-link,
.form-label,
.main-menu .menu__link,
.header-top a,
.header-block__title{
  font-family:var(--rg-caps);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:500
}
.rg-eyebrow{font-size:.75rem;letter-spacing:.32em;color:var(--rg-text-2);line-height:1.4;margin:0}
.breadcrumb,.form-label{font-size:.6875rem}
.badge{letter-spacing:.14em;font-weight:600}

a{text-underline-offset:.2em}

/* ---------- Buttons (MatBuilder look in the MatBuilder block at the end) ---------- */
.btn{
  --bs-btn-font-family:var(--rg-caps);
  --bs-btn-font-weight:600;
  --bs-btn-font-size:.75rem;
  --bs-btn-padding-x:1.625rem;
  --bs-btn-padding-y:.875rem;
  --bs-btn-border-radius:var(--rg-pill);
  --bs-btn-focus-box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.45);
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4
}
.btn-sm{--bs-btn-padding-x:1.125rem;--bs-btn-padding-y:.5rem;--bs-btn-font-size:.6875rem}
.btn-lg{--bs-btn-padding-x:2rem;--bs-btn-padding-y:1rem;--bs-btn-font-size:.8125rem}
.btn-primary{
  --bs-btn-color:var(--rg-on-brand);--bs-btn-bg:var(--rg-brand);--bs-btn-border-color:var(--rg-brand);
  --bs-btn-hover-color:var(--rg-on-brand);--bs-btn-hover-bg:var(--rg-brand-hover);--bs-btn-hover-border-color:var(--rg-brand-hover);
  --bs-btn-active-color:var(--rg-on-brand);--bs-btn-active-bg:var(--rg-brand-hover);--bs-btn-active-border-color:var(--rg-brand-hover);
  --bs-btn-disabled-color:var(--rg-on-brand);--bs-btn-disabled-bg:var(--rg-brand);--bs-btn-disabled-border-color:var(--rg-brand)
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light{
  --bs-btn-color:var(--rg-text);--bs-btn-border-color:var(--rg-border-strong);
  --bs-btn-hover-color:var(--rg-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--rg-text);
  --bs-btn-active-color:var(--rg-text);--bs-btn-active-bg:var(--rg-overlay);--bs-btn-active-border-color:var(--rg-text);
  --bs-btn-disabled-color:var(--rg-text-3);--bs-btn-disabled-border-color:var(--rg-border)
}
.btn-secondary,.btn-dark{
  --bs-btn-color:var(--rg-text);--bs-btn-bg:var(--rg-surface-2);--bs-btn-border-color:var(--rg-surface-2);
  --bs-btn-hover-color:var(--rg-text);--bs-btn-hover-bg:var(--rg-surface-3);--bs-btn-hover-border-color:var(--rg-surface-3);
  --bs-btn-active-color:var(--rg-text);--bs-btn-active-bg:var(--rg-surface-3);--bs-btn-active-border-color:var(--rg-surface-3)
}
.btn-link{--bs-btn-color:var(--rg-brand-2);--bs-btn-hover-color:var(--rg-text);text-transform:none;letter-spacing:0;font-family:var(--rg-text-font);font-size:1rem}
[data-bs-theme=dark] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}

/* ---------- Forms ---------- */
/* Every single-line field the same height (48px): text, email, password (with its show button), select, date */
.form-control:not(textarea):not([type=file]),.form-select{height:3rem;padding-block:0;line-height:3rem}
.form-control[type=file]{height:3rem;line-height:2rem}
.input-group>.btn{height:3rem}
.form-control::placeholder{color:var(--rg-text-3);opacity:1}
.form-control,.form-select{
  background-color:transparent;border-color:var(--rg-border-strong);color:var(--rg-text);border-radius:var(--rg-radius)
}
.form-control::placeholder{color:var(--rg-text-3)}
.form-control:focus,.form-select:focus,.form-check-input:focus{
  background-color:transparent;border-color:var(--rg-brand);box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.25);color:var(--rg-text)
}
.form-select option{background:var(--rg-surface);color:var(--rg-text)}
.form-check-input{background-color:transparent;border-color:var(--rg-border-strong)}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate{background-color:var(--rg-brand);border-color:var(--rg-brand)}
.form-range::-webkit-slider-thumb{background-color:var(--rg-brand-2)}
.form-range::-moz-range-thumb{background-color:var(--rg-brand-2)}
.input-group-text{background:var(--rg-surface);border-color:var(--rg-border-strong);color:var(--rg-text-2)}
/* Input groups: the rounded .form-control above (unlayered) beats Bootstrap's joined corners (layered), restore them:
   only the outer corners are rounded, with the field radius (no pill button glued to a rounded field) */
.input-group>.form-control:not(:last-child),.input-group>.form-select:not(:last-child),.input-group>.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.form-control:not(:first-child),.input-group>.form-select:not(:first-child),.input-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.input-group>.btn:first-child{border-top-left-radius:var(--rg-radius);border-bottom-left-radius:var(--rg-radius)}
.input-group>.btn:last-child{border-top-right-radius:var(--rg-radius);border-bottom-right-radius:var(--rg-radius)}
.input-group>.btn{--bs-btn-padding-x:1.125rem}
/* Show / hide password: part of the field (same border, transparent), not a green button */
.password-field>[data-ps-action=toggle-password]{--bs-btn-bg:transparent;--bs-btn-border-color:var(--rg-border-strong);--bs-btn-color:var(--rg-text-2);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--rg-border-strong);--bs-btn-hover-color:var(--rg-text);--bs-btn-active-bg:transparent;--bs-btn-active-border-color:var(--rg-border-strong);--bs-btn-active-color:var(--rg-text);--bs-btn-padding-x:.875rem;border-left:0}
.password-field>.form-control:not(:last-child){border-right:0}
.password-field>.form-control:focus{box-shadow:none}
.password-field>.form-control:focus~[data-ps-action=toggle-password]{border-color:var(--rg-brand)}
.password-field [data-ps-action=toggle-password] .material-icons{font-size:1.25rem}
/* Browser autofill paints the field light blue (and not the button next to it): keep the page background and text */
.form-control:-webkit-autofill,.form-control:-webkit-autofill:hover,.form-control:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--rg-bg) inset;box-shadow:0 0 0 1000px var(--rg-bg) inset;-webkit-text-fill-color:var(--rg-text);caret-color:var(--rg-text);transition:background-color 9999s ease-out}
.nav-link:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:3px;box-shadow:none}

/* ---------- Bootstrap components (blue values compiled into theme.css) ---------- */
.nav-pills{--bs-nav-pills-link-active-bg:var(--rg-brand)}
.nav-tabs{--bs-nav-tabs-link-active-color:var(--rg-text);--bs-nav-tabs-link-active-bg:transparent;--bs-nav-tabs-link-active-border-color:var(--rg-border) var(--rg-border) var(--rg-bg)}
.nav-tabs .nav-link{font-size:.75rem;color:var(--rg-text-2)}
.dropdown-menu{
  --bs-dropdown-bg:var(--rg-surface);--bs-dropdown-border-color:var(--rg-border);
  --bs-dropdown-link-color:var(--rg-text);--bs-dropdown-link-hover-color:var(--rg-text);--bs-dropdown-link-hover-bg:var(--rg-surface-2);
  --bs-dropdown-link-active-color:var(--rg-on-brand);--bs-dropdown-link-active-bg:var(--rg-brand)
}
.list-group{--bs-list-group-bg:transparent;--bs-list-group-active-bg:var(--rg-brand);--bs-list-group-active-border-color:var(--rg-brand)}
.pagination{
  --bs-pagination-color:var(--rg-text-2);--bs-pagination-hover-color:var(--rg-text);--bs-pagination-hover-bg:var(--rg-surface-2);
  --bs-pagination-focus-color:var(--rg-text);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.35);
  --bs-pagination-active-bg:var(--rg-brand);--bs-pagination-active-border-color:var(--rg-brand);
  font-family:var(--rg-caps);font-size:.8125rem
}
.accordion{
  --bs-accordion-bg:transparent;--bs-accordion-border-color:var(--rg-border);
  --bs-accordion-active-color:var(--rg-text);--bs-accordion-active-bg:var(--rg-surface);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.3)
}
.progress,.progress-stacked{--bs-progress-bg:var(--rg-surface-2);--bs-progress-bar-bg:var(--rg-brand-2)}
.card{--bs-card-bg:var(--rg-surface);--bs-card-border-color:var(--rg-border);--bs-card-cap-bg:transparent}
.modal{--bs-modal-bg:var(--rg-surface);--bs-modal-border-color:var(--rg-border);--bs-modal-header-border-color:var(--rg-border);--bs-modal-footer-border-color:var(--rg-border)}
.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm{--bs-offcanvas-bg:var(--rg-bg);--bs-offcanvas-border-color:var(--rg-border)}
.toast{--bs-toast-bg:var(--rg-surface);--bs-toast-border-color:var(--rg-border)}
.alert{--bs-alert-border-radius:var(--rg-radius)}
.table{--bs-table-bg:transparent;--bs-table-border-color:var(--rg-border);--bs-table-striped-bg:var(--rg-stripe)}
.carousel-indicators [data-bs-target]{background-color:var(--rg-text)}
.carousel-control-next-icon,.carousel-control-prev-icon{background-color:rgba(11,11,11,.7);color:var(--rg-text)}
.noui-tooltip{background:var(--rg-surface);border-color:var(--rg-border);color:var(--rg-text)}
.noUi-connect{background:var(--rg-brand-2)}
.material-icons{color:inherit}

/* ---------- Full width ---------- */
/* Every container spans the whole screen with a proportional side margin (5% of the width, 16px minimum on
   mobile): header, sections and footer, no centered max-width */
.container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl,.container-fluid{
  max-width:none;padding-left:max(1rem,5vw,env(safe-area-inset-left));padding-right:max(1rem,5vw,env(safe-area-inset-right))
}
/* viewport-fit=cover (templates/_partials/head.tpl): in landscape on iPhone, the side margins stay clear of the notch */
/* Module product blocks (featured products, cross-selling…) open their own container (components/module-products.tpl):
   inside a page container (cart, order confirmation) it doubled the side margin */
.container .module-products.container,.row .module-products.container{padding-inline:0}

/* ---------- Page transitions (View Transitions API, cross-document) ---------- */
/* A short cross-fade between two pages of the shop, CSS only (no JS, nothing hidden at load: no PageSpeed cost).
   The header has its own name so it stays in place instead of fading with the page. Browsers without support
   (Firefox for now) navigate as usual; none with reduced motion */
@view-transition{navigation:auto}
#header{view-transition-name:rg-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
::view-transition-group(rg-header){animation-duration:.25s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Custom cursor (assets/js/custom.js: every page, mouse only) ---------- */
/* A dot and a lagging ring over the native cursor; on links and buttons the dot goes away and the ring grows (real
   size and position set by the script, snapped to the device pixels: no scale, no bitmap layer), in the brand yellow. The script gives them the data-bs-theme of the zone under the mouse, so the
   tokens below follow it (light on dark, dark on light). Above the modals and the offcanvas menu */
.rg-cursor{position:fixed;top:0;left:0;box-sizing:border-box;z-index:2000;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s,border-color .3s,background-color .3s,box-shadow .3s;view-transition-name:none}
.rg-cursor.is-visible{opacity:1}
/* MatBuilder: yellow ring; yellow dot, black over a light or yellow background (is-on-light, set by custom.js from the
   background under the mouse). No outline. Over a link or a button the ring takes a light yellow tint */
.rg-cursor--dot{background:var(--rg-brand)}
.rg-cursor--dot.is-on-light{background:#000}
.rg-cursor--ring{border:2px solid var(--rg-brand)}
.rg-cursor--ring.is-active{background-color:rgba(var(--rg-brand-rgb),.12)}

/* ---------- Header ---------- */
/* The background is on ::before so it can fade in over the hero (see "Header over the hero" below) */
.header{background:transparent}
/* Only the header-bottom row sticks: the header stays sticky but its top is offset by the top bar height (30px,
   shown from md), so the top bar scrolls away with the page */
@media (min-width:768px){.header{top:-30px}}
/* Opaque when sticky, on every page: no translucency */
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;transition:opacity .3s}
/* Every header text is #fff (the header is always in the dark scheme, where --rg-text is #fff) */
.header,.header a,.header .header-block__action-btn,.header .header-block__title,.header .menu-toggle,.header .btn-close{color:var(--rg-text)}
/* Top bar: opaque, darker than the header row */
.header-top{position:relative;background:#000;border-bottom:1px solid var(--rg-border);font-size:.6875rem;padding:0;max-height:30px}
.header-top>.container-md,.header-top .row,.header-top__left,.header-top__right{height:29px}
.header-top .row>*{display:flex;align-items:center}
.header-top .header-block__action-btn,.header-top .dropdown-toggle,.header-top .form-select{padding-block:0;line-height:1}
.header-top .header-block__icon{font-size:1rem}
.header-top .header-block__badge{height:1.125rem;min-width:1.125rem;font-size:.625rem}
.header-top a,.header-top .dropdown-toggle{color:var(--rg-text);font-size:.6875rem;letter-spacing:.24em}
.header-top a:hover{color:var(--rg-brand-2)}
/* Top bar links (EN, EUR, Sign in): muted, light on hover */
.header-top a.header-block__action-btn,.header-top .dropdown-toggle{color:var(--rg-text-2);transition:color .2s}
.header-top .header-block__action-btn:hover,.header-top .header-block__action-btn:focus-visible,.header-top .header-block__action-btn[aria-expanded=true]{color:var(--rg-text)}
/* Sign in: the block and its link are flex items centered in the 29px bar */
.header-top__right>*,.header-top .header-block,.header-top .header-block__action-btn{display:flex;align-items:center}
.header-top .header-block__action-btn{gap:.375rem;height:100%}
.header-top .header-block__title{line-height:1;color:inherit}
/* No person icon once the label shows ("Sign in", or the customer's initials then name), from 768px */
@media (min-width:768px){.header-top .header-block__action-btn .header-block__icon{display:none}}
/* Header-bottom row: 64px on mobile; from 768px 80px (logo 44px high), 60px once stuck at the top (logo 36px).
   The header shrinks inside the page flow: its margin-bottom grows by the same 20px at the same pace, so the content
   below never jumps. --rg-header-h = full header height (top bar 30px + row), used to overlap the hero */
:root{--rg-header-h:64px;--rg-header-shrink:0px}
@media (min-width:768px){:root{--rg-header-h:110px}.rg-header-stuck{--rg-header-shrink:20px}}
.header{margin-bottom:var(--rg-header-shrink);transition:margin-bottom .3s ease}
.header-bottom{height:64px;padding:0;border-bottom:1px solid var(--rg-border);transition:height .3s ease}
@media (min-width:768px){.header-bottom{height:calc(80px - var(--rg-header-shrink))}}
.header-bottom__container,.header-bottom__row{height:100%}
.header-bottom .logo{max-height:2.75rem;max-width:9.25rem;transition:max-height .3s ease}
@media (min-width:768px){.rg-header-stuck .header-bottom .logo{max-height:2.25rem}}
.header-block__action-btn{color:var(--rg-text)}
.header-block__action-btn:hover{color:var(--rg-brand-2)}
.header-block__icon{color:inherit}
.header-block__badge{background:var(--rg-brand);color:var(--rg-on-brand);font-family:var(--rg-caps)}
/* Main menu (desktop and mobile): caps (Anton in the MatBuilder block at the end) */
.ps-mainmenu__tree-link,.ps-mainmenu--mobile .menu__link{font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link,.ps-mainmenu--mobile .menu__link{color:var(--rg-text)}
/* Hover: yellow (MatBuilder block below) */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:hover,.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:active,.ps-mainmenu--mobile .menu__link:hover{color:var(--rg-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
.ps-mainmenu--mobile .menu__link{font-size:.8125rem;padding:.875rem 1.5rem}
/* No focus frame on click (Hummingbird outlines :focus in the link color); keyboard focus keeps a discreet
   underline-style ring for accessibility */
.header a:focus,.header button:focus,.ps-mainmenu--mobile a:focus,.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:focus,.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-dropdown-toggle:focus{outline:none;box-shadow:none}
.header a:focus-visible,.header button:focus-visible,.ps-mainmenu--mobile a:focus-visible,.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:focus-visible{outline:1px solid rgba(var(--rg-text-rgb),.5);outline-offset:4px;border-radius:2px}
/* Language and currency switchers (top bar, in place of "Contact us"): compact dropdowns, current ISO code + chevron */
.header-top__left{gap:1.5rem}
.header-top,.header-top .row,.header-top__left{overflow:visible}
.rg-switch__toggle{display:inline-flex;align-items:center;gap:.125rem;padding:0;border:0;background:none;color:var(--rg-text-2);font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.24em;line-height:1;cursor:pointer;transition:color .2s}
.rg-switch__toggle:hover,.rg-switch__toggle[aria-expanded=true]{color:var(--rg-text)}
.rg-switch__toggle:hover .rg-switch__current,.rg-switch__toggle[aria-expanded=true] .rg-switch__current{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.rg-switch__chevron{font-size:1rem;transition:transform .2s}
.rg-switch__toggle[aria-expanded=true] .rg-switch__chevron{transform:rotate(180deg)}
.rg-switch__toggle:focus{outline:none}
.rg-switch__toggle:focus-visible{outline:1px solid rgba(var(--rg-text-rgb),.5);outline-offset:4px;border-radius:2px}
.rg-switch__menu{--bs-dropdown-min-width:11rem;--bs-dropdown-padding-y:.375rem;--bs-dropdown-item-padding-y:.5rem;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-font-size:.875rem;--bs-dropdown-border-radius:var(--rg-radius);margin-top:.5rem!important;box-shadow:0 12px 32px rgba(0,0,0,.45)}
/* ".header-top a" (caps, letter-spaced) must not reach the menu items */
.rg-switch__item,.header-top a.rg-switch__item{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-family:var(--rg-text-font);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--rg-text);text-decoration:none}
.header-top a.rg-switch__item:hover{color:var(--rg-text)}
.rg-switch__code{font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.16em;color:var(--rg-text-3)}
.rg-switch__item.is-current{color:var(--rg-text);background:transparent;cursor:default}
.rg-switch__item.is-current .rg-switch__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.rg-switch__item.is-current .rg-switch__code{color:var(--rg-brand-2)}
/* Every top bar dropdown (language, currency, account): compact, caps like the bar, one type size */
.header-top .dropdown-menu{--bs-dropdown-min-width:9rem;--bs-dropdown-padding-y:.25rem;--bs-dropdown-item-padding-y:.375rem;--bs-dropdown-item-padding-x:.875rem;--bs-dropdown-font-size:.6875rem}
.header-top .dropdown-menu .dropdown-item{gap:1rem;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
.header-top .dropdown-menu .rg-switch__code{font-size:inherit;letter-spacing:inherit}
.header-top .dropdown-menu .dropdown-item .material-icons{font-size:1rem;vertical-align:-.25em}
.header-top .dropdown-menu .dropdown-divider{margin-block:.25rem}
/* Account menu: same distance from the bar as the language and currency menus (.rg-switch__menu) */
.header-top .ps-customersignin .dropdown-menu{margin-top:.5rem!important;--bs-dropdown-border-radius:var(--rg-radius);box-shadow:0 12px 32px rgba(0,0,0,.45)}
/* In the mobile menu (blocks moved into #_mobile_ps_languageselector / #_mobile_ps_currencyselector): plain lists */
.ps-mainmenu__selects{flex-direction:column;gap:1.5rem!important;width:100%;padding:1rem 1.5rem}
.ps-mainmenu__selects .rg-switch__toggle{display:none}
.ps-mainmenu__selects .rg-switch__menu{position:static!important;display:block;transform:none!important;margin:0!important;padding:0;min-width:0;border:0;background:transparent;box-shadow:none}
.ps-mainmenu__selects .rg-switch__item{padding-inline:0}
/* Logo | menu centered | cart: logo and cart share the free space equally so the menu sits in the middle */
/* Below 1200px the menu is the burger before the logo: the cart still goes to the right end */
.header-bottom__cart{margin-left:auto}
/* Mobile (below 768px): the logo is centered in the row, the burger stays on the left, account and cart on the right */
@media (max-width:767.98px){
  .header-bottom__row{position:relative}
  .header-bottom__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;padding:0;width:auto;z-index:1}
  #_mobile_ps_customersignin{margin-left:auto}
}
.header-bottom__cart .header-block__title{font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
@media (min-width:1200px){
  .header-bottom__logo{flex:1 1 0;width:auto}
  .header-bottom__row>.ps-mainmenu--desktop{flex:0 0 auto;width:auto}
  /* Hummingbird gives the menu order:1 from 1200 px: the cart goes after it */
  .header-bottom__cart{flex:1 1 0;width:auto;justify-content:flex-end;order:2}
  .ps-mainmenu__tree{justify-content:center}
  /* The menu links sit in the middle of the row (80px, 60px when stuck); the nav itself is display:block!important
     (Bootstrap d-xl-block), so its flex parent centers it */
  .header-bottom__row>.ps-mainmenu--desktop{align-items:center}
}

/* Header over the hero (body.rg-header-over: home, The Method, Custom Putting Surface): the header overlaps the hero,
   the header-bottom row is transparent until the page is scrolled (assets/js/custom.js); the top bar stays opaque */
/* Still sticky (top bar scrolls away), pulled over the hero by its own height (--rg-header-h) */
.rg-header-over .header{margin-bottom:calc(var(--rg-header-shrink) - var(--rg-header-h))}
.rg-header-over .header::before{opacity:0}
.rg-header-over .header-bottom{border-bottom-color:transparent;transition:border-color .3s}
.rg-header-over.rg-header-scrolled .header::before{opacity:1}
.rg-header-over.rg-header-scrolled .header-bottom{border-bottom-color:var(--rg-border)}
.rg-header-over .breadcrumb__wrapper{display:none}
/* The hero starts at the top of the page under the fixed header: its eyebrow is at 40% of the viewport height,
   and never under the header (top bar 30px + row about 92px) */
/* (the hero itself keeps its text clear of the header: hero.css, padding-top from --rg-header-h) */

/* ---------- Form pages (sign in, create an account, forgotten password, guest order tracking, contact): one centered 640px column ---------- */
.rg-narrow{max-width:640px;margin-inline:auto;padding-block:clamp(2rem,5vw,4rem)}
/* The form on a white card (--rg-surface, these pages are light); fields keep the page beige */
.rg-narrow>.page-content{padding:clamp(1.5rem,4vw,2.5rem);background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-radius)}
/* Intro sentence under the title, above the card: the title keeps .75rem below it, the sentence the header's 2rem */
.rg-narrow>.page-header:has(+.rg-page-intro){margin-bottom:.75rem}
.rg-page-intro{margin:0 0 2rem;color:var(--rg-text-2);font-size:1rem;line-height:1.6}
/* Forgotten password: its sentence is the intro under the title (customer/password-email.tpl), not repeated in the card */
.forgotten-password>header{display:none}
/* Guest order tracking: its "To track your order…" sentence is replaced by the intro (customer/guest-login.tpl) */
#guestOrderTrackingForm>p:first-of-type{display:none}

/* ---------- Customer account (dashboard, information, addresses, orders, credit slips, alerts, GDPR) ----------
   Templates: customer/page.tpl (back link, eyebrow), my-account.tpl (tiles), history.tpl (empty state), and the
   overrides of ps_emailalerts / psgdpr in themes/rhythm/modules. Light scheme: white bordered cards on #fff */
.page-content--customer{padding-bottom:clamp(2rem,5vw,4rem)}
.rg-account-eyebrow{margin-bottom:.75rem}
.account-menu__icon{display:none}
/* Intro sentence of each page */
.page-content--customer>p:first-child{max-width:40rem;margin-bottom:2rem;color:var(--rg-text-2);font-size:1rem;line-height:1.6}
/* "Back to your account" (below 992px): a small caps link above the eyebrow, not a full width outlined pill */
.account-menu__back{display:inline-flex;align-items:center;gap:.375rem;margin-bottom:1.5rem;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--rg-text-2)}
.account-menu__back:hover{color:var(--rg-text)}
.account-menu__back .material-icons{font-size:1rem}
@media (min-width:992px){.account-menu__back{display:none}}

/* Sidebar (from 992px): small caps title, text links on hairlines, the current page marked by a brand bar */
.account-menu--sidebar{gap:0;padding-right:clamp(1rem,3vw,3rem)}
.account-menu__title{margin:0 0 .75rem;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.32em;line-height:1.4;text-transform:uppercase;color:var(--rg-text-3)}
.account-menu--sidebar .account-menu__link{position:relative;padding:.875rem 0 .875rem 1rem;border-bottom:1px solid var(--rg-border);border-radius:0;background:none;color:var(--rg-text-2);font-size:.9375rem;line-height:1.35;text-decoration:none}
.account-menu--sidebar .account-menu__link:hover{color:var(--rg-text)}
.account-menu--sidebar .account-menu__link--active{background:none;color:var(--rg-text);font-weight:500}
.account-menu--sidebar .account-menu__link--active::before{content:"";position:absolute;left:0;top:.75rem;bottom:.75rem;width:2px;background:var(--rg-brand)}
.account-menu--sidebar .account-menu__desc{display:none}
.account-menu--sidebar .account-menu__link--signout{margin-top:.5rem;border-bottom:0;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--rg-text-3)}
.account-menu--sidebar .account-menu__link--signout:hover{color:var(--rg-danger)}

/* Dashboard tiles: white card, serif name, short description, arrow bottom right */
.account-menu--main{gap:1rem}
.account-menu--main .account-menu__link{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.375rem;min-height:8.5rem;padding:1.5rem 3.5rem 1.5rem 1.5rem;background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-radius);color:var(--rg-text);font-weight:400;text-decoration:none;transition:border-color .2s}
.account-menu--main .account-menu__link::after{content:"\2192";position:absolute;right:1.5rem;bottom:1.25rem;color:var(--rg-text-3);font-size:1.125rem;line-height:1;transition:transform .2s,color .2s}
.account-menu--main .account-menu__link:hover{border-color:var(--rg-text);color:var(--rg-text)}
.account-menu--main .account-menu__link:hover::after{transform:translateX(.25rem);color:var(--rg-text)}
.account-menu--main .account-menu__label{font-family:var(--rg-font);font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.account-menu--main .account-menu__desc{color:var(--rg-text-2);font-size:.875rem;line-height:1.5}
@media (max-width:575.98px){
  .account-menu--main .account-menu__link{min-height:0;padding:1.25rem 3.5rem 1.25rem 1.25rem}
  .account-menu--main .account-menu__link::after{bottom:auto;top:50%;transform:translateY(-50%)}
  .account-menu--main .account-menu__link:hover::after{transform:translate(.25rem,-50%)}
}
.rg-account-signout{margin:2rem 0 0}
.rg-account-signout a{font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--rg-text-3)}
.rg-account-signout a:hover{color:var(--rg-danger)}

/* White cards: forms (information, address), empty states, GDPR sections, messages */
.page-identity .page-content--customer>form,.page-address .address-form,
.rg-account-empty,.rg-account-card,.page-content--customer>.alert-info{
  max-width:46rem;padding:clamp(1.5rem,4vw,2.5rem);background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-radius)
}
.page-content--customer>.alert-info{color:var(--rg-text-2);font-size:.9375rem}
.rg-account-empty{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.rg-account-empty__text{margin:0;font-family:var(--rg-font);font-size:1.375rem;font-weight:600;line-height:1.25;color:var(--rg-text)}
.rg-account-card+.rg-account-card{margin-top:1rem}
.rg-account-card h2{margin-bottom:.75rem;font-size:1.25rem}
.rg-account-card p{color:var(--rg-text-2);line-height:1.6}
.rg-account-card p:last-child{margin-bottom:0}
.rg-account-card__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Addresses: white cards, small caps alias and actions, dashed "add" card */
.addresses .address-card{background:var(--rg-surface);border-color:var(--rg-border);border-radius:var(--rg-radius)}
.addresses .address-card__container{padding:1.5rem}
.addresses .address-card__header{margin-bottom:1rem}
.addresses .address-card__alias{font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-text-3)}
.addresses .address-card__content{margin-bottom:1.5rem;font-style:normal;font-size:.9375rem;line-height:1.65;color:var(--rg-text)}
.addresses .address-card__actions{gap:1.5rem;padding-top:1rem;border-top:1px solid var(--rg-border)}
.addresses .address-card__actions a{font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.addresses .address-card__edit{color:var(--rg-text)}
.addresses .address-card__edit:hover{color:var(--rg-brand-2)}
.addresses .address-card__delete{color:var(--rg-text-3)}
.addresses .address-card__delete:hover{color:var(--rg-danger)}
.addresses .address-card--add-address{min-height:12rem;gap:1rem;background:transparent;border:1px dashed var(--rg-border-strong);color:var(--rg-text);text-decoration:none;transition:border-color .2s,background-color .2s}
.addresses .address-card--add-address:hover{background:var(--rg-surface);border-color:var(--rg-text)}
.addresses .address-card__add-icon{order:-1;--bs-btn-bg:transparent;--bs-btn-border-color:var(--rg-border-strong);--bs-btn-color:var(--rg-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--rg-text);--bs-btn-hover-color:var(--rg-text);--bs-btn-active-bg:transparent;--bs-btn-active-color:var(--rg-text)}
.addresses .address-card__add-text{font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}

/* Order history: rows as white cards on mobile, one white table card from 768px */
.order-history__row{background:var(--rg-surface);border-color:var(--rg-border)}
.order-history__cell:before{font-family:var(--rg-caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--rg-text-3)}
.order-history__cell--reference{font-family:var(--rg-caps);letter-spacing:.08em}
@media (min-width:768px){
  .order-history{padding:.5rem 1.5rem;background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-radius)}
  .order-history__row{background:none}
  .order-history__header{border-color:var(--rg-border);font-family:var(--rg-caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--rg-text-3)}
  .order-history__header,.order-history__row{padding-block:1rem}
}

/* Mail alerts list */
.ps-emailalerts__product{padding:1rem;background:var(--rg-surface);border-color:var(--rg-border);border-radius:var(--rg-radius)}
.ps-emailalerts__product-name{font-family:var(--rg-font);font-size:1.125rem;font-weight:600}
.ps-emailalerts__product-delete{font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--rg-text-3)}

/* ---------- Product page: images 7/12, details 5/12; gallery grid on desktop, carousel on mobile ----------
   Scoped to .product__container (the product page itself): the quickview modal is also .page-product but keeps the
   carousel */
.page-product .product__container{grid-template-columns:minmax(0,1fr);gap:2rem}
.rg-gallery{display:none;margin:0;padding:0;list-style:none}
/* Product name: smaller than the page titles (it sits in the 5/12 column) */
/* Short description bullets, also in the quickview */
/* Short description: dashes instead of bullets, no rules between the items (product page and quickview) */
/* Same size as the body text (--bs-body-font-size, 15px) */
.product__description-short{color:var(--rg-text-2);font-size:var(--bs-body-font-size);line-height:var(--bs-body-line-height)}
.product__description-short p{margin-bottom:1rem}
.product__description-short strong{color:var(--rg-text);font-weight:600}
.product__description-short ul{list-style:none;padding:0;margin:0 0 1.25rem}
.product__description-short li{position:relative;padding:.375rem 0 .375rem 1.5rem}
/* Dash centred on the first line: top padding + half the line height (1.65em / 2) */
.product__description-short li::before{content:"";position:absolute;left:0;top:calc(.375rem + .825em);width:.75rem;height:1px;background:var(--rg-text)}
/* Product details, sober and high-end (same language as the category page) */
.rg-product-eyebrow{margin:0 0 .75rem;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--rg-text-3)}
.page-product h1.product__name{margin-bottom:1rem;font-family:var(--rg-font);font-size:clamp(1.75rem,2.4vw,2.5rem);font-weight:600;line-height:1.12;letter-spacing:-.01em}
.page-product .product__prices{margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:1px solid var(--rg-border)}
.page-product .product__price{font-family:var(--rg-caps);font-size:1rem;font-weight:500;letter-spacing:.16em;color:var(--rg-text)}
.page-product .product__prices .product__tax-label,.page-product .product__prices-block>:not(.product__prices-inline){font-family:var(--rg-caps);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rg-text-3)}
.page-product .product__actions{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--rg-border)}
.page-product .product__actions-qty-add{display:flex;gap:.75rem;align-items:stretch}
.page-product .product__quantity .input-group{height:100%;border:1px solid var(--rg-border-strong);border-radius:var(--rg-pill);overflow:hidden}
.page-product .product__quantity .btn,.page-product .product__quantity .form-control{border:0;border-radius:0;background:transparent}
.page-product .product__quantity .form-control{width:3rem;text-align:center;font-family:var(--rg-caps);font-size:.8125rem}
.page-product .product__add-to-cart{flex:1 1 auto}
/* Add to cart in the brand yellow, black text */
.page-product .product__add-to-cart-button{width:100%;min-height:3.25rem;--bs-btn-bg:var(--rg-brand);--bs-btn-border-color:var(--rg-brand);--bs-btn-color:var(--rg-on-brand);--bs-btn-hover-bg:var(--rg-brand-hover);--bs-btn-hover-border-color:var(--rg-brand-hover);--bs-btn-hover-color:var(--rg-on-brand);--bs-btn-active-bg:var(--rg-brand-hover);--bs-btn-active-border-color:var(--rg-brand-hover);--bs-btn-active-color:var(--rg-on-brand);--bs-btn-disabled-bg:var(--rg-text-3);--bs-btn-disabled-border-color:var(--rg-text-3)}
/* Size choice (combinations): sober outlined pills, black when selected */
.page-product .product__variants{margin-bottom:1.5rem}
.page-product .product-variant__legend{float:none;display:block;width:100%;margin-bottom:.625rem;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-text-2)}
.page-product .product-variant__selected{display:none}
.page-product .product-variant__radios{display:flex;flex-wrap:wrap;gap:.5rem}
.page-product .product-variant__radio .btn{--bs-btn-color:var(--rg-text);--bs-btn-border-color:var(--rg-border-strong);--bs-btn-bg:transparent;--bs-btn-hover-color:var(--rg-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--rg-text);--bs-btn-active-color:var(--rg-bg);--bs-btn-active-bg:var(--rg-text);--bs-btn-active-border-color:var(--rg-text);--bs-btn-padding-x:1.25rem;--bs-btn-padding-y:.75rem;--bs-btn-font-size:.75rem;letter-spacing:.14em;text-transform:none}
.page-product .product-variant__radio .btn-check:checked+.btn{color:var(--rg-bg);background:var(--rg-text);border-color:var(--rg-text)}
/* One line per attribute group (Size, Hand): legend on the left (float, a legend is not a flex item), small pills on the right */
.page-product .product__variants .product-variant{display:flow-root;margin:0 0 .625rem}
.page-product .product__variants .product-variant__legend{float:left;width:4.5rem;margin:0;padding:0;line-height:2.25rem}
.page-product .product__variants .product-variant__attributes{display:flow-root;margin-top:0}
.page-product .product__variants .product-variant__radios{gap:.375rem}
.page-product .product__variants .product-variant__radio .btn{--bs-btn-padding-x:.875rem;--bs-btn-padding-y:0;--bs-btn-font-size:.6875rem;min-height:2.25rem;display:inline-flex;align-items:center;letter-spacing:.1em}
/* No quantity selector: nobody buys two identical mats. The input stays in the page (hidden, value 1) for add to cart */
.page-product .product__quantity{display:none}
.page-product .product__actions-qty-add{flex-wrap:nowrap}
.page-product .product__quantity{flex:0 0 auto;width:auto}
.page-product .product__quantity .input-group{flex-wrap:nowrap;width:auto}
.page-product .product__add-to-cart-button{white-space:nowrap}
/* Add to cart buttons: text only, no cart icon (product page; product miniatures, whose label is shown at every width) */
.product__add-to-cart-button .material-icons,.product-miniature__add .material-icons{display:none}
.product-miniature__add .product-miniature__add-text{display:block}
/* Customize my mat (catalog/_partials/product-add-to-cart.tpl, Putting Training Mats): full-width outlined pill under add to cart */
.page-product .rg-customize{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3.25rem;margin-top:.75rem}
.page-product .rg-customize .material-icons{font-size:1.125rem}
@media (max-width:575.98px){
  .page-product .product__quantity .btn{padding-inline:.625rem}
  .page-product .product__quantity .form-control{width:2rem;padding-inline:0}
  .page-product .product__add-to-cart-button{--bs-btn-padding-x:1rem;--bs-btn-font-size:.6875rem;letter-spacing:.14em}
}
/* Carousel (below 992px, and the quickview): square image, nearly square corners, discreet controls */
.page-product .product__carousel{border-radius:0;background:var(--rg-surface)}
.page-product .product__carousel .carousel-item img{aspect-ratio:1/1;object-fit:cover}
.page-product .product__carousel .carousel-control-prev,.page-product .product__carousel .carousel-control-next{width:3rem;opacity:1}
.page-product .product__carousel .carousel-control-prev-icon,.page-product .product__carousel .carousel-control-next-icon{width:2.25rem;height:2.25rem;border-radius:50%;background-color:rgba(20,20,20,.45);background-size:40%;transition:background-color .2s}
.page-product .product__carousel .carousel-control-prev:hover .carousel-control-prev-icon,.page-product .product__carousel .carousel-control-next:hover .carousel-control-next-icon{background-color:rgba(20,20,20,.75)}
.page-product .product__zoom{width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:none;color:var(--rg-text)}
.page-product .product__availability{font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rg-text-2)}

/* Hummingbird's second part (accordion removed in product.tpl, reassurance): hidden while the reassurance hook is empty */
.product__container~.product__bottom:not(:has(.product__bottom-right *)){display:none}
/* Hummingbird's .page:not(body) padding-bottom (2rem) left a light band under the dark story: none when the story ends the page */
.page-product .page:has(.rg-product-story){padding-bottom:0}
/* Same for the home page and the lnwkspages pages, made of full-width blocks down to the footer */
#index .page:not(body),#module-lnwkspages-page .page:not(body){padding-bottom:0}
/* Bottom of the product page: the marketing story (lnwkspages blocks, displayFooterProduct), full width, dark */
.rg-product-story{margin-top:clamp(4rem,8vw,7rem);margin-inline:calc(50% - 50vw);background:var(--rg-bg);color:var(--rg-text)}
@media (min-width:992px){
  .page-product .product__container{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
  /* The details stay in view while the images scroll by (under the 60px stuck header) */
  .page-product .product__container>.product__right{position:sticky;top:5rem}
  .product__container .product__carousel{display:none}
  .product__container .product__images .product__flags{position:absolute;z-index:2}
  .product__container .product__images{position:relative}
  .product__container .rg-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
}
.rg-gallery__button{display:block;width:100%;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--rg-surface);cursor:zoom-in}
.rg-gallery__image{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* No zoom on hover: the zoom is PhotoSwipe, on click */
.rg-gallery__button:focus{outline:none}
.rg-gallery__button:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:2px}
/* PhotoSwipe (assets/vendor/photoswipe/photoswipe.css, loaded after this file: hence ".pswp.pswp") */
/* White, opaque (bgOpacity 1 in custom.js), like the product images; buttons as the size pills of the product page:
   white circles with a hairline, line icons (custom.js), black with a white icon on hover */
.pswp.pswp{--pswp-bg:#fff;--pswp-placeholder-bg:#fff;--pswp-icon-color:#141414;--pswp-error-text-color:#555;--pswp-preloader-color:rgba(20,20,20,.12);--pswp-preloader-color-secondary:#141414;font-family:var(--rg-caps)}
.pswp .pswp__top-bar{height:auto;align-items:center;gap:.5rem;padding:1rem max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left))}
.pswp .pswp__counter{height:auto;margin:0 auto 0 .25rem;font-size:.6875rem;line-height:1;letter-spacing:.2em;color:#555;text-shadow:none;opacity:1}
.pswp .pswp__preloader{display:none}
.pswp .pswp__button,.pswp .pswp__button:hover,.pswp .pswp__button:focus,.pswp .pswp__button:active{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid rgba(20,20,20,.3);border-radius:50%;background:#fff;color:#141414;opacity:1;transition:background-color .2s,border-color .2s,color .2s}
.pswp .pswp__button:hover{background:#141414;border-color:#141414;color:#fff}
.pswp .pswp__button:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:2px}
.pswp .pswp__button--zoom{display:none}
.pswp.pswp--zoom-allowed .pswp__button--zoom{display:grid}
.pswp .pswp__button--close{margin:0}
.pswp .pswp__button--close,.pswp .pswp__button--close:focus,.pswp .pswp__button--close:active{background:#141414;border-color:#141414;color:#fff}
.pswp .pswp__button--close:hover{background:var(--rg-brand);border-color:var(--rg-brand);color:var(--rg-on-brand)}
.pswp .pswp__icn,.pswp .pswp__button--arrow .pswp__icn{position:static;width:1.375rem;height:1.375rem;margin:0;fill:none;stroke:currentColor;color:inherit}
.pswp .pswp__button--arrow,.pswp .pswp__button--arrow:hover,.pswp .pswp__button--arrow:focus{position:absolute;top:50%;width:3rem;height:3rem;margin-top:-1.5rem}
.pswp .pswp__button--arrow--prev{left:max(1rem,env(safe-area-inset-left))}
.pswp .pswp__button--arrow--next{right:max(1rem,env(safe-area-inset-right))}
.pswp .pswp__button--arrow--next .pswp__icn{transform:scale(-1,1)}
.pswp .pswp__button--arrow:disabled,.pswp.pswp--one-slide .pswp__button--arrow{display:none}
.page-product .js-product-carousel .carousel-item img{cursor:zoom-in}

/* ---------- Product images: never rounded, anywhere (listings, product page, cart, cart modal, order pages) ---------- */
img[class*="product"],.product-line__image img,.product-miniature__image-link,.product-miniature__top,.product__carousel,.product__images,.rg-gallery__button,.blockcart img,.cart-summary img{border-radius:0!important}

/* ---------- Quantity selector (cart lines, cart modal, product page): one thin pill, the number centred ---------- */
.quantity-button{width:auto;max-width:none}
.quantity-button__group{flex-wrap:nowrap;width:max-content;height:2.75rem;border:1px solid var(--rg-border-strong);border-radius:var(--rg-pill);overflow:hidden;background:transparent}
.quantity-button__group>.btn{width:2.5rem;min-width:2.5rem;height:100%;padding:0;margin:0!important;border:0;border-radius:0!important;background:transparent;color:var(--rg-text);display:inline-flex;align-items:center;justify-content:center}
.quantity-button__group>.btn .material-icons{font-size:1.125rem}
.quantity-button__group>.btn:hover{background:var(--rg-overlay,rgba(0,0,0,.04))}
.quantity-button__group>.form-control{flex:0 0 2.5rem;width:2.5rem;min-width:2.5rem;height:100%;padding:0;margin:0!important;border:0;border-radius:0!important;background:transparent;text-align:center;font-family:var(--rg-caps);font-size:.8125rem;letter-spacing:.04em;-moz-appearance:textfield;appearance:textfield}
.quantity-button__group>.form-control::-webkit-outer-spin-button,.quantity-button__group>.form-control::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity-button__group>.form-control:focus{box-shadow:none}
.page-product .product__quantity .quantity-button__group{height:3.25rem}

/* ---------- Cart and order (checkout) pages: more air between the content and the summary; the summary on a plain
   surface, in view while scrolling ---------- */
@media (min-width:992px){
  .cart-grid,.checkout-grid{--bs-gutter-x:clamp(4rem,7vw,7rem)}
  .cart-grid__aside-wrapper,.checkout-grid__aside-wrapper{position:sticky;top:5rem}
}
.cart-grid .page-title-section{margin-bottom:2rem}
.cart-grid .product-line{padding-block:1.5rem}
.cart-grid__aside-wrapper,.checkout-grid__aside-wrapper{padding:2rem;background:var(--rg-surface)}
/* One page checkout: sections separated by a hairline, serif titles, generous spacing */
.page-order .checkout-grid{padding-block:clamp(1.5rem,3vw,2.5rem)}
.one-page-checkout__section{padding-block:2.5rem;border-top:1px solid var(--rg-border)}
.one-page-checkout>:first-child .one-page-checkout__section,.one-page-checkout>.one-page-checkout__section:first-child{padding-top:0;border-top:0}
.one-page-checkout__title{margin-bottom:1.5rem;font-family:var(--rg-font);font-size:clamp(1.5rem,2vw,1.875rem);font-weight:600;letter-spacing:-.01em}
.one-page-checkout__field{margin-bottom:1rem}
/* ps_onepagecheckout adds 2em on the right of the form only (not of the payment section): same width for every section */
.page-order .one-page-checkout{padding-right:0}
/* Information messages (checkout, account…): plain surface and hairline instead of the Bootstrap light blue */
.alert-info{--bs-alert-bg:var(--rg-surface);--bs-alert-border-color:var(--rg-border);--bs-alert-color:var(--rg-text-2);--bs-alert-link-color:var(--rg-text)}
.checkout-grid__aside .one-page-checkout__section{padding-block:1.5rem 0;border-top:1px solid var(--rg-border)}
.checkout-grid__aside .one-page-checkout__title{font-size:1.25rem}

/* ---------- Breadcrumb ---------- */
.breadcrumb__wrapper{background:transparent;border-bottom:1px solid var(--rg-border)}
.breadcrumb{--bs-breadcrumb-divider-color:var(--rg-text-3);--bs-breadcrumb-item-active-color:var(--rg-text-2)}
.breadcrumb a{color:var(--rg-text-2);text-decoration:none}
.breadcrumb a:hover{color:var(--rg-text)}

/* ---------- Product miniatures ---------- */
/* Sober, technical, high-end miniatures: square image on a plain surface, no border, no shadow, no zoom;
   name and price right under the image; no add to cart (product.tpl) */
.product-miniature__inner,.product-miniature__inner:hover{background:transparent;box-shadow:none}
.product-miniature__top,.product-miniature__inner:hover .product-miniature__top{background:var(--rg-surface);border:0;border-radius:0;overflow:hidden}
.product-miniature__image-container{aspect-ratio:1/1}
.product-miniature__image,.product-miniature__inner:hover .product-miniature__image{display:block;width:100%;height:100%;object-fit:cover;transform:none;transition:none}
.product-miniature__bottom{gap:.25rem;padding:1rem 0 0}
.product-miniature__infos{gap:.25rem}
.product-miniature__title,.product-miniature__title a{font-family:var(--rg-caps);font-size:.75rem;font-weight:600;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--rg-text);text-decoration:none}
.product-miniature__title:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.product-miniature__prices{margin:0}
.product-miniature__price{font-family:var(--rg-caps);font-size:.75rem;font-weight:500;letter-spacing:.16em;color:var(--rg-text-2)}
.product-miniature__regular-price{font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.16em;color:var(--rg-text-3)}
.product-flags{padding:.75rem}
.product-flags .badge,.product-flags .badge:not(.discount),.product-flags .badge.discount{padding:.25rem .5rem;border:0;border-radius:2px;background:var(--rg-text);color:var(--rg-bg);font-family:var(--rg-caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
/* Listing grid: 3 wide columns with generous spacing; 2 on tablets and phones (from 360px); 1 below */
.layout-full-width .products{grid-template-columns:minmax(0,1fr);gap:2.5rem .75rem}
@media (min-width:360px){.layout-full-width .products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:576px){.layout-full-width .products{gap:3rem 1.5rem}}
@media (max-width:575.98px){
  .product-miniature__bottom{padding-top:.75rem}
  .product-miniature__title,.product-miniature__title a{font-size:.6875rem;letter-spacing:.16em}
  .product-miniature__price{font-size:.6875rem;letter-spacing:.12em}
  .product-flags{padding:.5rem}
  .page-category .category__header{padding-block:2rem 1.5rem;margin-bottom:1.5rem}
}
@media (min-width:992px){.layout-full-width .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem 2rem}}
/* Category header: large serif title, a hairline before the products (description moved below the list) */
.page-category .category__header{display:grid;gap:1rem;padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem);margin-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rg-border)}
.page-category .category__header .page-title-section{margin:0;font-family:var(--rg-font);font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:600;line-height:1.05;letter-spacing:-.01em}
/* Category footer: description below the product list, after a hairline, readable measure */
.page-category .category__footer{display:grid;gap:1.5rem;margin-top:clamp(3rem,6vw,5rem);padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--rg-border)}
.page-category .category__description,.page-category .category__additional-description{max-width:75ch;color:var(--rg-text-2);font-size:var(--bs-body-font-size);line-height:var(--bs-body-line-height)}
#js-product-list-top:empty{display:none}
.product-miniature__quickview-button{background:rgba(11,11,11,.86);color:var(--rg-text);font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.product-flags .badge{background:var(--rg-brand);color:var(--rg-on-brand);border:0}
.product-flags .badge.discount{background:var(--rg-bg);border:1px solid var(--rg-brand-2);color:var(--rg-brand-2)}

/* Product page */
.product__name,.product__title{font-size:clamp(2rem,4vw,3.25rem)}
.product__current-price,.product__price,.current-price{font-family:var(--rg-caps);font-weight:600;color:var(--rg-brand-2);letter-spacing:.04em}
/* Sticky add-to-cart bar (module lnwksstickyatc, mobile and tablet): dark like the header, green pill button,
   options panel in the light e-commerce ambiance. Literal dark values: the page itself is in the light ambiance */
.lnwks-sticky-atc{
  --lnwks-satc-bg:#0b0b0b;--lnwks-satc-text:#fff;
  --lnwks-satc-accent:var(--rg-brand);--lnwks-satc-accent-text:#fff;
  --lnwks-satc-unavailable-bg:rgba(255,255,255,.06);--lnwks-satc-unavailable-text:#e08a6d;
  --lnwks-satc-toggle-border:rgba(255,255,255,.3);
  --lnwks-satc-panel-bg:#fff;--lnwks-satc-panel-text:#141414;--lnwks-satc-panel-border:rgba(20,20,20,.3);
  --lnwks-satc-btn-radius:var(--rg-pill);--lnwks-satc-option-radius:var(--rg-pill);
  --lnwks-satc-btn-font:var(--rg-caps);
  border-top-color:rgba(255,255,255,.12)
}
.lnwks-sticky-atc__name{font-family:var(--rg-font);font-size:.9375rem;font-weight:600}
.lnwks-sticky-atc__price{font-family:var(--rg-caps);font-size:.875rem;font-weight:600;letter-spacing:.04em}
.lnwks-sticky-atc__btn{padding:.875rem 1.5rem;font-size:.75rem;font-weight:600;letter-spacing:.2em}
.lnwks-sticky-atc__btn:hover,.lnwks-sticky-atc__btn:focus{opacity:1;background:var(--rg-brand-hover)}
#lnwksStickyAtcVariantPanel{padding:1rem max(1rem,5vw)}
/* Same as the product page: one line per attribute group (Size, Hand), legend on the left, small pills */
#lnwksStickyAtcVariantPanel .product-variants-item{display:flex;align-items:center;gap:0;margin-bottom:.5rem}
#lnwksStickyAtcVariantPanel .product-variants-item:last-child{margin-bottom:0}
#lnwksStickyAtcVariantPanel .control-label{flex:0 0 4.5rem;margin:0;font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.24em;opacity:1;color:#5c5c58}
#lnwksStickyAtcVariantPanel ul.li_fl{flex:1 1 auto;gap:.3125rem}
#lnwksStickyAtcVariantPanel .radio-label{height:1.875rem;padding:0 .75rem;border-width:1px;border-color:rgba(20,20,20,.3);font-family:var(--rg-caps);font-size:.625rem;letter-spacing:.08em}
#lnwksStickyAtcVariantPanel .input-container input:checked+.radio-label{background:#141414;border-color:#141414;color:#fff}
/* Card layout (floating card, bottom right on desktop): white card as on the Ohio theme, over the light and dark parts
   of the page; the options panel is a second white card above it */
.lnwks-sticky-atc--card{
  --lnwks-satc-bg:#fff;--lnwks-satc-text:#141414;
  --lnwks-satc-unavailable-bg:rgba(20,20,20,.05);--lnwks-satc-unavailable-text:#b4532f;
  --lnwks-satc-toggle-border:rgba(20,20,20,.25);
  --lnwks-satc-panel-bg:#fff;--lnwks-satc-panel-border:rgba(20,20,20,.08);
  --lnwks-satc-card-gap:.75rem;--lnwks-satc-card-width:28rem;--lnwks-satc-card-radius:1.25rem;
  --lnwks-satc-card-border:rgba(20,20,20,.06);--lnwks-satc-card-shadow:0 .75rem 2.5rem rgba(0,0,0,.14);
  --lnwks-satc-thumb-bg:#f2f2f2;--lnwks-satc-thumb-radius:.75rem;
  padding:.625rem
}
@media (min-width:992px){.lnwks-sticky-atc--card{--lnwks-satc-card-gap:1.5rem;padding:.75rem}}
/* Mobile and tablet: stuck to the bottom edge, full width, rounded top corners; the home indicator area is inside
   the card (padding), thanks to viewport-fit=cover */
@media (max-width:991.98px){
  .lnwks-sticky-atc--card{
    left:0;right:0;bottom:0;border-width:1px 0 0;border-radius:var(--lnwks-satc-card-radius) var(--lnwks-satc-card-radius) 0 0;
    padding:.75rem max(1rem,5vw,env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem,5vw,env(safe-area-inset-left))
  }
  .lnwks-sticky-atc--card .lnwks-sticky-atc__variant-panel{left:.75rem;right:.75rem}
}
/* Below the header (z-index 1021, its own stacking context through view-transition-name): the mobile menu, an offcanvas
   inside the header, opens over the card; the offcanvas and modal backdrops (1040+) cover it too */
.lnwks-sticky-atc{z-index:1020}
/* Card and its sizes panel appear with a plain fade (no slide up) */
.lnwks-sticky-atc--card,.lnwks-sticky-atc--card.is-visible,
.lnwks-sticky-atc--card .lnwks-sticky-atc__variant-panel,.lnwks-sticky-atc--card .lnwks-sticky-atc__variant-panel.is-open{transform:none;transition:opacity .35s ease}
.lnwks-sticky-atc--card .lnwks-sticky-atc__btn{padding:.8125rem 1.125rem;letter-spacing:.12em}
@media (min-width:992px){.lnwks-sticky-atc--card .lnwks-sticky-atc__btn{padding:.875rem 1.5rem;letter-spacing:.2em}}
.lnwks-sticky-atc--card #lnwksStickyAtcVariantPanel{padding:1rem}

/* ---------- Section titles from modules (featured products, etc.) ---------- */
.section-title,.products-section-title{
  font-family:var(--rg-font);font-weight:600;font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:-.01em;text-transform:none
}

/* ---------- Footer ---------- */
/* No border-top: the reassurance band above already ends with a 1px line (two stacked lines made 2px) */
.footer__before{background:var(--rg-bg)}
/* Newsletter band (modules/ps_emailsubscription/.../ps_emailsubscription.tpl): landing page style */
.rg-newsletter{padding-block:clamp(4rem,8vw,6.5rem);background:var(--rg-bg);color:var(--rg-text)}
.rg-newsletter__grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:992px){.rg-newsletter__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
.rg-newsletter__intro{display:grid;gap:1.25rem}
.rg-newsletter__eyebrow{margin:0;font-family:var(--rg-caps);font-size:.75rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--rg-text-2)}
.rg-newsletter__title{margin:0;font-family:var(--rg-font);font-weight:600;font-size:clamp(2.125rem,4.4vw,3.25rem);line-height:1.05;letter-spacing:-.01em;color:var(--rg-text)}
.rg-newsletter__title em{font-style:italic;font-weight:500;color:var(--rg-brand-2)}
.rg-newsletter__text{margin:0;max-width:30rem;color:var(--rg-text-2);font-size:1.125rem}
.rg-newsletter__form{display:grid;gap:1rem;max-width:36rem;width:100%}
@media (min-width:992px){.rg-newsletter__form{justify-self:end}}
/* One pill: transparent field, the button inside on the right */
.rg-newsletter__field{display:flex;align-items:center;gap:.5rem;padding:.375rem .375rem .375rem 1.5rem;border:1px solid var(--rg-border-strong);border-radius:var(--rg-pill);background:var(--rg-surface);transition:border-color .2s}
.rg-newsletter__field:focus-within{border-color:var(--rg-brand-2)}
.rg-newsletter__input{flex:1 1 auto;min-width:0;padding:.625rem 0;border:0;background:transparent;color:var(--rg-text);font-family:var(--rg-text-font);font-size:1rem;outline:none}
.rg-newsletter__input::placeholder{color:var(--rg-text-3)}
.rg-newsletter__input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--rg-surface) inset;-webkit-text-fill-color:var(--rg-text)}
.rg-newsletter__submit{flex:0 0 auto}
.rg-newsletter__conditions,.rg-newsletter__consent{margin:0;padding-inline:1.5rem;font-size:.8125rem;color:var(--rg-text-3)}
.rg-newsletter__consent a,.rg-newsletter__conditions a{color:var(--rg-text-2)}
.rg-newsletter .alert{margin:0}
@media (max-width:575.98px){
  .rg-newsletter__field{flex-direction:column;align-items:stretch;padding:.375rem;border-radius:var(--rg-radius)}
  .rg-newsletter__input{padding:.75rem 1rem}
}
/* Footer in pure black, under the #161616 sections (MatBuilder mockup) */
#footer{position:relative;isolation:isolate;overflow:hidden;background:#000}
#footer .footer__before,#footer .rg-newsletter{background:transparent}
.footer__main{background:transparent;color:var(--rg-text-2);padding-top:0}
.footer__main-top{row-gap:2rem}
/* Mobile: the link columns are a compact accordion, no rules between titles */
@media (max-width:767.98px){
  .footer__main-top{row-gap:0}
  .footer__main-top>.footer-block{margin:0 calc(var(--bs-gutter-x)*.5);padding:.625rem 0;width:calc(100% - var(--bs-gutter-x))}
  .footer__main-top .footer-block__title{margin:0}
  .footer__main-top .footer-block__content>:first-child{margin-top:1rem}
  .footer__main-top .footer-block__content>:last-child{margin-bottom:0}
}
.footer-block__title,.footer-block .footer-block__title a{color:var(--rg-text);font-size:.6875rem;letter-spacing:.24em}
.footer-block .footer-block__title a{text-decoration:none}.footer-block .footer-block__title a:hover{color:var(--rg-text);text-decoration:underline;text-underline-offset:.35em}
.footer-block ul,.footer-block address{font-size:.8125rem;line-height:1.4}
.footer-block li{margin-bottom:.25rem}
.footer-block address{line-height:1.65}
.footer-block a{color:var(--rg-text-2);text-decoration:none;transition:color .2s}
.footer-block a:hover{color:var(--rg-text)}
/* Logo and the brand signature, then a rule, then copyright and legal links (templates/_partials/copyright.tpl) */
.rg-footer-brand{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:1.75rem;border-bottom:1px solid var(--rg-border)}
.rg-footer-brand__logo img{display:block;height:48px;width:auto}
.rg-footer-brand__tagline{margin:0;font-family:var(--rg-caps);font-size:.6875rem;letter-spacing:.32em;text-transform:uppercase;color:var(--rg-text-2)}
.copyright{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-block:1.5rem 2rem;text-align:left}
.copyright p{margin:0;font-family:var(--rg-caps);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-text-3)}
.rg-footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 0;margin:0;padding:0;list-style:none}
.rg-footer-legal li+li::before{content:"";display:inline-block;width:1px;height:.75rem;margin-inline:1rem;background:var(--rg-border-strong);vertical-align:-.1rem}
.rg-footer-legal a{font-size:.8125rem;color:var(--rg-text-3);text-decoration:none;transition:color .2s}
.rg-footer-legal a:hover{color:var(--rg-text)}
.mb-lang__list{display:flex;gap:.5rem 0;margin:0;padding:0;list-style:none}
.mb-lang__list li+li::before{content:"";display:inline-block;width:1px;height:.75rem;margin-inline:1rem;background:var(--rg-border-strong);vertical-align:-.1rem}
.mb-lang__item{font-family:var(--rg-caps);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rg-text-3);text-decoration:none;transition:color .2s}
a.mb-lang__item:hover{color:var(--rg-text)}
.mb-lang__item.is-current{color:var(--rg-text)}
@media (max-width:575.98px){.rg-footer-brand{flex-direction:column;align-items:flex-start}.copyright{flex-direction:column-reverse;align-items:flex-start}.rg-footer-legal{gap:.5rem 1.5rem}.rg-footer-legal li+li::before{display:none}}

/* Home hero: lnwkspages block, see assets/css/lnwkspages/hero.css */

/* mm_custom configurator: the module blends the SVG (overlay) over a texture image that it paints above it; on the light e-commerce background the mat comes out washed out. The texture goes under the SVG so the overlay blends with it. */
.module-container .template{isolation:isolate}
.module-container .template .mat-pattern{z-index:-1}

/* mm_custom cart lines (override cart-detailed-product-line.tpl). cart.js builds, per design, a preview block in the left column and clones the title block in the body column, both with inline sizes. The line becomes a grid: the blocks are placed by position (display:contents on the wrappers), one design per row, so the title always sits next to its own preview; on mobile they stack. */
#cart .cart__item{border-bottom:1px solid var(--rg-border);padding-block:1.5rem}
#cart .cart__item:first-child{padding-top:.5rem}
#cart .cart__item:last-child{border-bottom:0} /* the hr after the list closes it: one line, not two */
#cart .cart-items{margin:0;padding:0;list-style:none}
#cart .cart-items .rg-print-note{margin:1rem 0 0;width:100%;font-size:.875rem;line-height:1.5} /* look = the theme's .alert-info */
#cart .cart-items .product-line-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 2rem;align-items:center;margin:0;--bs-gutter-x:0}
#cart .cart-items .product-line-grid>*{width:auto;max-width:none;margin:0;padding:0;flex:none}
#cart .cart-items .product-line-grid-left,#cart .cart-items .product-line-grid-left .product-image,#cart .cart-items .product-line-grid-left form,#cart .cart-items .product-line-grid-left #template-container,#cart .cart-items .product-line-grid-body{display:contents}
#cart .cart-items .product-line-grid .clearfix,#cart .cart-items .form_for_delete_buttons>br{display:none}
#cart .cart-items .product-line-grid div.template{position:absolute}
/* preview block: preview, then quantity and trash */
#cart .cart-items .image-and-delete-button{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;width:auto!important;height:auto!important;position:relative;grid-column:1}
#cart .cart-items .image-and-delete-button iframe{display:block;max-width:100%;border:0;border-radius:var(--rg-radius)}
/* Cart preview: the click is caught on the box of the preview (custom.js), which opens the lightbox */
#cart .cart-items .image-and-delete-button iframe{pointer-events:none}
#cart .cart-items .image-and-delete-button{cursor:zoom-in}
#cart .cart-items .image-and-delete-button .template-quantity,#cart .cart-items .image-and-delete-button .delete-icon,#cart .cart-items .image-and-delete-button button,#cart .cart-items .image-and-delete-button a{cursor:pointer}
/* My designs (account): same zoom on the preview of a design */
body#module-mm_custom-savedCustoms .mm-saved-iframe{pointer-events:none}
body#module-mm_custom-savedCustoms .mm-saved-preview{cursor:zoom-in}
/* Lightbox of the custom mat: same look as the product image zoom (PhotoSwipe above): white, fully opaque, round white
   buttons with a hairline and a 1.5px line icon, black on hover */
.rg-lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:4.75rem max(1rem,3vw) 2rem;background:#fff;font-family:var(--rg-caps)}
.rg-lightbox:focus{outline:0}
.rg-lightbox.is-open{display:flex;animation:rg-lightbox-in .25s ease-out}
@keyframes rg-lightbox-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rg-lightbox.is-open{animation:none}}
.rg-lightbox__stage{width:min(100%,1600px);max-height:100%;overflow:auto;border-radius:var(--rg-radius)}
.rg-lightbox__stage svg{display:block;width:100%;min-width:40rem;max-width:none;height:auto;cursor:zoom-in}
.rg-lightbox.is-zoomed .rg-lightbox__stage svg{cursor:grab}
.rg-lightbox.is-zoomed .rg-lightbox__stage.is-dragging svg{cursor:grabbing}
.rg-lightbox.is-zoomed .rg-lightbox__stage{scrollbar-width:thin}
.rg-lightbox__stage svg *{pointer-events:none}
.rg-lightbox__close{position:absolute;top:1rem;right:max(1rem,env(safe-area-inset-right));display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid #141414;border-radius:50%;background:#141414;color:#fff;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.rg-lightbox__close svg{width:1.375rem;height:1.375rem}
.rg-lightbox__zoom{position:absolute;top:1rem;right:calc(max(1rem,env(safe-area-inset-right)) + 3.25rem);display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(20,20,20,.3);border-radius:50%;background:#fff;color:#141414;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.rg-lightbox__zoom svg{width:1.375rem;height:1.375rem}
.rg-lightbox__zoom:hover{background:#141414;border-color:#141414;color:#fff}
.rg-lightbox__zoom:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:2px}
.rg-lightbox.is-zoomed .rg-zoom-v{display:none}
.rg-lightbox__close:hover{background:var(--rg-brand);border-color:var(--rg-brand);color:var(--rg-on-brand)}
.rg-lightbox__close:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:2px}
html.rg-lightbox-on{overflow:hidden}
#cart .cart-items .cart-item:not(.mm-custom-line) .image-and-delete-button picture{flex:0 0 auto}
#cart .cart-items .cart-item:not(.mm-custom-line) .image-and-delete-button picture img{display:block;width:7.5rem;height:auto;border-radius:var(--rg-radius)}
/* info block */
#cart .cart-items .template-body-info{height:auto!important;grid-column:1}
#cart .cart-items .template-body-info .product-line-info{margin:0}
#cart .cart-items .template-body-info .label{font-family:var(--rg-caps);font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--rg-text);text-decoration:none}
#cart .cart-items .template-body-info .template-attributes{margin:.25rem 0 .75rem;font-size:.8125rem;color:var(--rg-text-2)}
#cart .cart-items .mm-custom-line .template-body-info .product-line-info:not(:first-child),#cart .cart-items .mm-custom-line .template-body-info .product-price{display:none}
#cart .cart-items .cart-item:not(.mm-custom-line) .template-body-info .template-attributes{display:none}
#cart .cart-items .cart-item:not(.mm-custom-line) .template-body-info .product-line-info{margin-top:.25rem;font-size:.8125rem;color:var(--rg-text-2)}
#cart .cart-items .cart-item:not(.mm-custom-line) .template-body-info .product-line-info .label{font-family:inherit;font-size:inherit;letter-spacing:0;text-transform:none;font-weight:600;color:var(--rg-text-2)}
#cart .cart-items .cart-item:not(.mm-custom-line) .template-body-info .product-line-info:first-child .label{font-family:var(--rg-caps);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--rg-text)}
#cart .cart-items .cart-item:not(.mm-custom-line) .template-body-info .product-price{font-family:var(--rg-caps);font-size:.8125rem;color:var(--rg-text)}
/* Duplicate: outlined pill like the theme's secondary buttons */
#cart .cart-items .duplicate-link,#cart .cart-items .mm-btn-alt{display:inline-flex;align-items:center;width:auto;min-height:2.25rem;padding:.25rem 1.125rem;border:1px solid var(--rg-border-strong);border-radius:var(--rg-pill);background:transparent;color:var(--rg-text);font-family:var(--rg-caps);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
#cart .cart-items .duplicate-link:hover{background:var(--rg-text);border-color:var(--rg-text);color:var(--rg-bg)}
/* quantity: pill stepper like the product page */
#cart .cart-items .template-quantity{order:1;position:static;transform:none;display:inline-flex;align-items:center;width:auto;height:2.75rem;padding:0;border:1px solid var(--rg-border-strong);border-radius:var(--rg-pill);background:transparent;overflow:hidden}
#cart .cart-items .template-quantity .change-quantity{display:flex;align-items:center;justify-content:center;width:2.5rem;height:100%;color:var(--rg-text);cursor:pointer;user-select:none;transition:background-color .2s}
#cart .cart-items .template-quantity .change-quantity:hover{background:rgba(var(--rg-text-rgb),.08)}
#cart .cart-items .template-quantity .change-quantity img{display:none}
#cart .cart-items .template-quantity .minus::before,#cart .cart-items .template-quantity .plus::before{font-size:1.125rem;line-height:1}
#cart .cart-items .template-quantity .minus::before{content:"\2212"}
#cart .cart-items .template-quantity .plus::before{content:"+"}
#cart .cart-items .template-quantity .quantity{min-width:1.75rem;text-align:center}
#cart .cart-items .template-quantity p{margin:0;font-family:var(--rg-caps);font-size:.8125rem;font-weight:500}
/* trash: round icon button */
#cart .cart-items .image-and-delete-button .delete-icon{order:2;position:static;transform:none;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid transparent;border-radius:50%;color:var(--rg-text-2);cursor:pointer;transition:color .2s,border-color .2s}
#cart .cart-items .image-and-delete-button .delete-icon:hover{color:var(--rg-text);border-color:var(--rg-border-strong)}
/* total of the line (right); the line's own quantity field and trash are replaced by the per-design controls */
#cart .cart-items .product-line-grid-right{grid-column:1;display:block;text-align:left}
#cart .cart-items .product-line-grid-right .row{display:block;margin:0}
#cart .cart-items .product-line-grid-right [class*=col-]{width:auto;max-width:none;padding:0}
#cart .cart-items .product-line-grid-right .qty,#cart .cart-items .product-line-grid-right .text-end,#cart .cart-items .product-line-grid-right .js-cart-line-product-quantity,#cart .cart-items .product-line-grid-right .remove-from-cart{display:none!important}
#cart .cart-items .product-line-grid-right .price{display:block}
#cart .cart-items .product-line-grid-right .product-price,#cart .cart-items .product-line-grid-right .product-price strong{font-family:var(--rg-caps);font-size:.9375rem;font-weight:500;color:var(--rg-text)}
#cart .cart-items .product-line-grid-right .price::before{content:attr(data-total-label);margin-right:.5rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rg-text-2)}
/* mobile: one design after the other, preview then its title block, line total at the end */
#cart .cart-items .image-and-delete-button:nth-child(1){order:1}#cart .cart-items .template-body-info:nth-child(1){order:2}
#cart .cart-items .image-and-delete-button:nth-child(2){order:3}#cart .cart-items .template-body-info:nth-child(2){order:4}
#cart .cart-items .image-and-delete-button:nth-child(3){order:5}#cart .cart-items .template-body-info:nth-child(3){order:6}
#cart .cart-items .image-and-delete-button:nth-child(4){order:7}#cart .cart-items .template-body-info:nth-child(4){order:8}
#cart .cart-items .image-and-delete-button:nth-child(5){order:9}#cart .cart-items .template-body-info:nth-child(5){order:10}
#cart .cart-items .image-and-delete-button:nth-child(6){order:11}#cart .cart-items .template-body-info:nth-child(6){order:12}
#cart .cart-items .product-line-grid-right{order:99}
#cart .cart-items .template-body-info+.template-body-info,#cart .cart-items .image-and-delete-button+.image-and-delete-button{margin-top:0}
@media (min-width:768px){
  /* desktop: preview and controls | title block | line total, one design per row */
  #cart .cart-items .product-line-grid{grid-template-columns:auto minmax(0,1fr) auto;column-gap:2.5rem;row-gap:1.25rem}
  #cart .cart-items .image-and-delete-button{grid-column:1;flex-wrap:nowrap}
  #cart .cart-items .template-body-info{grid-column:2}
  #cart .cart-items .product-line-grid-right{grid-column:3;grid-row:1;align-self:start;text-align:right;padding-top:.25rem}
  #cart .cart-items .image-and-delete-button:nth-child(1),#cart .cart-items .template-body-info:nth-child(1){grid-row:1;order:0}
  #cart .cart-items .image-and-delete-button:nth-child(2),#cart .cart-items .template-body-info:nth-child(2){grid-row:2;order:0}
  #cart .cart-items .image-and-delete-button:nth-child(3),#cart .cart-items .template-body-info:nth-child(3){grid-row:3;order:0}
  #cart .cart-items .image-and-delete-button:nth-child(4),#cart .cart-items .template-body-info:nth-child(4){grid-row:4;order:0}
  #cart .cart-items .image-and-delete-button:nth-child(5),#cart .cart-items .template-body-info:nth-child(5){grid-row:5;order:0}
  #cart .cart-items .image-and-delete-button:nth-child(6),#cart .cart-items .template-body-info:nth-child(6){grid-row:6;order:0}
  #cart .cart-items .product-line-grid-right .price::before{content:none}
}
@media (min-width:1200px){
  #cart .cart-items .product-line-grid{grid-template-columns:30rem minmax(0,1fr) auto}
}
@media (min-width:768px) and (max-width:1199.98px){
  #cart .cart-items .product-line-grid{column-gap:1.5rem}
  #cart .cart-items .image-and-delete-button{flex-wrap:wrap}
}

/* Rhythm Custom Mat (hidden category 5, body class product-id-category-5): 4 m listed before 3 m; the catalog mats keep the attribute order */
.product-id-category-5 [id^="group_1_"].product-variant__radios{display:flex;flex-wrap:wrap}
.product-id-category-5 [id^="group_1_"] .product-variant__radio:first-child{order:2}

/* ---------- Stand-alone error pages (layouts/layout-error.tpl): maintenance, restricted country ---------- */
/* The parent's error.css draws a boxed light card: reset here, dark scheme instead (tokens above, data-bs-theme="dark" on <html>) */
body.rg-error{display:block;min-height:100dvh;background:var(--rg-bg);color:var(--rg-text);font-family:var(--rg-text-font)}
.rg-error .layout-error{width:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;text-align:left}
.rg-maintenance{position:relative}
.rg-maintenance__logo{position:absolute;z-index:2;top:max(1.5rem,4svh);left:max(1rem,5vw);width:auto;height:auto;max-height:2.25rem;margin:0}
/* The lnwkspages hero (page "maintenance", hook displayMaintenance): the scroll arrow has nowhere to go here */
.rg-maintenance .rg-scroll{display:none}
/* Visual anchored bottom right, as on the home page */
.rg-maintenance .lnwks-hero__image{object-position:right bottom;transform-origin:right bottom}
/* Same shade as the home page (hero.css, #index): lighter at the bottom from 768px */
@media (min-width:768px){.rg-maintenance .lnwks-hero__media::after{background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,0) 28%,rgba(11,11,11,0) 58%,rgba(11,11,11,.45) 88%,rgba(11,11,11,.72) 100%)}}
/* No published page: title and text of the back office, centred */
.rg-maintenance__fallback{min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:1rem;padding:6rem max(1rem,5vw);text-align:center}
.rg-maintenance__fallback .error__title{margin:0;font-family:var(--rg-font);font-weight:600;font-size:clamp(2rem,5vw,3.5rem);line-height:1}
.rg-maintenance__fallback .error__text{max-width:36rem;color:var(--rg-text-2)}

/* =====================================================================================================================
   MatBuilder — adaptation of the rhythm rules above to the MatBuilder mockup
   ===================================================================================================================== */

/* ---------- Layout: one content width (1360px) centred, the 5vw side margin kept below it ---------- */
:root{--mb-content:1360px;--mb-gutter:max(1rem,5vw);--mb-section-y:clamp(4rem,8vw,7rem)}
.container,.container-md,.container-lg,.container-xl,.container-xxl{max-width:calc(var(--mb-content) + 2 * var(--mb-gutter));margin-inline:auto}

/* ---------- Typography: Anton Regular caps for every title, italic lines slanted ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.section-title,.products-section-title,.page-title{
  font-family:var(--rg-font);font-weight:400;letter-spacing:.005em;line-height:1.02;text-transform:uppercase
}
/* "*text*" (lnwks_accent) = the italic second line of the mockup titles ("YOUR WAY.", "ONE PLATFORM. EVERY MAT."),
   same colour, Anton Regular 400 slanted (Anton has no italic: synthesized) */
h1 em,h2 em,h3 em,.h1 em,.h2 em,.mb-title em{display:block;font-style:italic;font-weight:400;color:inherit;font-synthesis:style}
.mb-title{margin:0;font-family:var(--rg-font);font-weight:400;font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1;letter-spacing:.005em;text-transform:uppercase;color:var(--rg-text)}
.mb-title em{font-size:.74em;line-height:1.1}

/* ---------- Buttons: Anton caps, 6px corners (mockup) ---------- */
.btn{
  --bs-btn-font-family:var(--rg-font);--bs-btn-font-weight:400;--bs-btn-font-size:1.0625rem;
  --bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.8125rem;--bs-btn-border-radius:var(--rg-radius);
  --bs-btn-focus-box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.45);
  letter-spacing:.02em;line-height:1.2
}
.btn-sm{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.5rem;--bs-btn-font-size:.9375rem}
.btn-lg{--bs-btn-padding-x:2rem;--bs-btn-padding-y:1rem;--bs-btn-font-size:1.1875rem}
.btn-primary{transition:background-color .2s,border-color .2s,transform .2s}
.btn-primary:hover{transform:translateY(-1px)}
/* Secondary (mockup "PRODUCT CATALOGUE"): dark grey with white text instead of the mockup's black-on-grey (contrast) */
.btn-secondary,.btn-dark{
  --bs-btn-color:#fff;--bs-btn-bg:#333;--bs-btn-border-color:#333;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#444;--bs-btn-hover-border-color:#444;
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#444;--bs-btn-active-border-color:#444
}
[data-bs-theme=light] .btn-secondary,[data-bs-theme=light] .btn-dark{--bs-btn-bg:#161616;--bs-btn-border-color:#161616;--bs-btn-hover-bg:#000;--bs-btn-hover-border-color:#000;--bs-btn-active-bg:#000;--bs-btn-active-border-color:#000}
.btn-link{font-family:var(--rg-text-font)}

/* ---------- Header: pure black #000, logo 40px high, Anton navigation, yellow on hover / current ---------- */
/* No top bar (templates/_partials/header.tpl): the header is the 80px row only (64px on mobile), sticky from the top */
.header-top{display:none}
@media (min-width:768px){.header{top:0}:root{--rg-header-h:80px}}
.header-bottom .navbar-brand{flex:0 0 auto}
/* Fixed height, width from the SVG ratio (an SVG without intrinsic size would shrink to 0 in the flex row) */
.header-bottom .logo{height:2.5rem;max-height:none;max-width:none;width:auto;aspect-ratio:2000/408}
@media (min-width:768px){.header-bottom .logo{transition:height .3s ease}.rg-header-stuck .header-bottom .logo{height:2.125rem}}
@media (max-width:767.98px){.header-bottom .logo{height:2rem}}
/* Anton has one (heavy) weight: the menu is lightened by a smaller size and a little more tracking; white text */
.ps-mainmenu__tree-link,.ps-mainmenu--mobile .menu__link{font-family:var(--rg-font);font-size:.8125rem;font-weight:400;letter-spacing:.07em}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link,.ps-mainmenu--mobile .menu__link{color:#fff}
/* Menu centred in the header row once there is room for it between the logo and the actions (menu about 745px,
   logo and actions about 200px each): taken out of the flow and centred on the row; below 1320px it keeps its place
   between the logo and the actions */
@media (min-width:1320px){
  .header-bottom__row{position:relative}
  /* max-content and nowrap: out of the flow, the menu would only get half the row (left:50%) and wrap */
  .header-bottom__row>.ps-mainmenu--desktop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:none;padding:0}
  .header-bottom__row>.ps-mainmenu--desktop .ps-mainmenu__tree{flex-wrap:nowrap;white-space:nowrap}
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:hover,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li .ps-mainmenu__tree-link:active,
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree>li.current>.ps-mainmenu__tree-link,
.ps-mainmenu--mobile .menu__link:hover{color:var(--rg-brand);text-decoration:none}
.ps-mainmenu--mobile .menu__link{font-size:1rem}
/* ---------- Header actions (search, account, cart; displayTop after the menu): icon over a small label, right end ---------- */
.header-bottom__row{flex-wrap:nowrap}
.header-bottom__action{padding-inline:.25rem}
.header-bottom__action .header-block{margin:0}
.header-bottom__action .header-block__action-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;min-width:2.75rem;min-height:2.75rem;padding:.25rem .375rem;border:0;background:none;color:#fff;line-height:1;text-decoration:none;transition:color .2s}
.header-bottom__action .header-block__action-btn::after{display:none} /* no dropdown caret under the account icon */
.header-bottom__action .header-block__action-btn:hover,.header-bottom__action .header-block__action-btn[aria-expanded=true]{color:var(--rg-brand)}
.header-bottom__action .header-block__icon{font-size:1.5rem;line-height:1}
/* Line icons (same as the mefiat theme: 24px grid, 1.75 stroke) */
.header-bottom__action svg.header-block__icon{display:block;width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.header-bottom__action svg.mb-icon-cart{stroke-linejoin:miter;stroke-linecap:butt}
.header-bottom__action .header-block__title{display:block;margin:0;font-family:var(--rg-text-font);font-size:.6875rem;font-weight:500;letter-spacing:0;line-height:1;text-transform:none;white-space:nowrap;color:inherit}
.header-bottom__action .header-block__badge{position:absolute;top:0;left:calc(50% + .375rem);display:grid;place-items:center;min-width:1.125rem;height:1.125rem;padding:0 .25rem;border-radius:999px;font-family:var(--rg-text-font);font-size:.625rem;font-weight:700;line-height:1}
.header-bottom__action .dropdown-menu{margin-top:.5rem!important;--bs-dropdown-border-radius:var(--rg-radius);box-shadow:0 12px 32px rgba(0,0,0,.45)}
/* Account menu (header): black panel, white small caps and icons, tight lines, square corners; hover lightens the row, the current page has a yellow bar */
.ps-customersignin .dropdown-menu{--bs-dropdown-bg:#000;--bs-dropdown-min-width:12rem;--bs-dropdown-border-radius:0;--bs-dropdown-border-color:rgba(255,255,255,.16);--bs-dropdown-padding-y:.25rem;--bs-dropdown-padding-x:0;padding:.25rem 0;border-radius:0;background:#000}
.ps-customersignin .dropdown-menu .dropdown-item{display:flex;align-items:center;gap:.625rem;padding:.4375rem .875rem;border-radius:0;font-family:var(--rg-caps);font-size:.625rem;font-weight:500;letter-spacing:.12em;line-height:1.1;text-transform:uppercase;color:#fff;transition:background-color .15s}
.ps-customersignin .dropdown-menu .dropdown-item .material-icons{flex:none;margin:0!important;font-size:1rem;line-height:1;color:#fff}
.ps-customersignin .dropdown-menu .dropdown-item:hover,.ps-customersignin .dropdown-menu .dropdown-item:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.ps-customersignin .dropdown-menu .dropdown-item[aria-current=page]{background:none;color:#fff;box-shadow:inset 2px 0 0 var(--rg-brand)}
.ps-customersignin .dropdown-menu .dropdown-divider{margin:.25rem 0;border-top-color:rgba(255,255,255,.16);opacity:1}
/* The search pushes the three actions to the right end; the cart no longer grows (rhythm rule above) */
.header-bottom__search{margin-left:auto}
.header-bottom__cart{margin-left:0}
@media (min-width:1200px){
  .header-bottom__action{order:2}
  .header-bottom__cart{flex:0 0 auto;width:auto}
  .header-bottom__search{flex:1 1 0;justify-content:flex-end;margin-left:0}
}
/* Mobile: icons only; the logo follows the burger (not centred: the three icons would run under it) */
@media (max-width:767.98px){
  .header-bottom__action{padding-inline:0}
  .header-bottom__action .header-block__action-btn{min-width:2.5rem}
  .header-bottom__action .header-block__title{display:none}
  .header-bottom__logo{position:static;transform:none;margin:0 auto 0 0!important}
  .header-bottom .logo{height:1.75rem}
}
/* Search panel (modules/ps_searchbar/ps_searchbar.tpl): drops from the top, one large field and a close button */
.mb-search.offcanvas{--bs-offcanvas-bg:#161616;--bs-offcanvas-border-color:transparent;border-bottom:1px solid var(--rg-border)}
.mb-search .offcanvas-header{gap:1rem;padding-block:1.25rem}
.mb-search .ps-searchbar{position:relative;flex:1 1 auto;max-width:none}
.mb-search .ps-searchbar__form{position:relative}
.mb-search .ps-searchbar__magnifier{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--rg-text-2);pointer-events:none}
.mb-search .ps-searchbar__input{height:3.25rem;padding-left:3rem;border-color:var(--rg-border-strong);font-size:1rem;line-height:3.25rem}
.mb-search .ps-searchbar__input:focus{border-color:var(--rg-brand);box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.25)}
.mb-search .ps-searchbar__dropdown{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:2;background:var(--rg-surface);border:1px solid var(--rg-border);border-radius:var(--rg-radius)}
.mb-search__close{flex:0 0 auto}

/* ---------- Diagonal stripes (mockup decoration behind a word of the big titles) ---------- */
/* .mb-hatch on the title: the nine diagonal lines of _assets/stripes_grey.svg (assets/img/stripes.svg, stroke 3.5 for
   the larger size) used as a mask, so their colour is set here; sized and placed in em of the title, centred on
   --mb-hatch-x (the word behind which they sit: "TAPIS" in the hero, "COMMENCE" in "Your mat starts here") */
/* Parallax: --mb-hatch-shift (-1 to 1, the title's place in the viewport, custom.js "MatBuilder title stripes") moves
   the stripes against the scroll, so they drift slowly under the title */
.mb-hatch{position:relative;isolation:isolate;--mb-hatch-size:3.2em;--mb-hatch-x:6em;--mb-hatch-shift:0}
.mb-hatch::after{content:"";position:absolute;z-index:-1;top:calc(.5em - var(--mb-hatch-size) / 2);left:calc(var(--mb-hatch-x) - var(--mb-hatch-size) / 2);width:var(--mb-hatch-size);height:var(--mb-hatch-size);pointer-events:none;translate:0 calc(var(--mb-hatch-shift) * .6em);will-change:translate;
  background-color:rgba(var(--rg-text-rgb),.16);
  -webkit-mask:url(../img/stripes.svg) center/contain no-repeat;mask:url(../img/stripes.svg) center/contain no-repeat}
.lnwks-hero .mb-hatch{--mb-hatch-x:5.6em}
.mb-starter .mb-hatch{--mb-hatch-x:7.1em}
@media (max-width:575.98px){.mb-hatch{--mb-hatch-size:2.6em}}
@media (prefers-reduced-motion:reduce){.mb-hatch::after{translate:none}}

/* ---------- Home: no side gap between the full-width sections ---------- */
#index .page-content--home{padding:0}
#index #wrapper,#index .page{padding-top:0}

/* ---------- "Your mat starts here" (templates/_partials/mb-mat-starter.tpl, home page) ---------- */
.mb-starter{padding-block:var(--mb-section-y);background:#161616;color:var(--rg-text)}
.mb-starter__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:992px){.mb-starter__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.mb-starter__head{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.mb-starter__intro{max-width:32rem;margin:1rem 0 0;color:var(--rg-text-2)}
.mb-starter__group{margin:0 0 1.5rem;padding:0;border:0}
.mb-starter__legend{float:none;width:auto;margin:0 0 .625rem;padding:0;font-family:var(--rg-text-font);font-size:.875rem;font-weight:500;color:var(--rg-brand)}
.mb-starter__chips{display:flex;flex-wrap:wrap;gap:.625rem}
.mb-chip{position:relative}
.mb-chip input{position:absolute;opacity:0;pointer-events:none}
.mb-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:7rem;min-height:2.75rem;padding:.5rem 1rem;border:1px solid #000;border-radius:var(--rg-radius);background:#000;color:#8a8a8a;font-size:.875rem;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.mb-chip span:hover{color:#fff;border-color:#444}
.mb-chip input:checked+span{background:var(--rg-brand);border-color:var(--rg-brand);color:var(--rg-on-brand);font-weight:600}
.mb-chip input:focus-visible+span{outline:2px solid var(--rg-brand);outline-offset:3px}
.mb-starter__cta{margin-top:1rem}
/* Preview: a black mat in a #222 frame, its proportions follow the chosen size (custom.js sets --mb-ratio) */
.mb-starter__preview{display:grid;place-items:center;min-height:clamp(16rem,30vw,24rem)}
.mb-mat{--mb-ratio:2;position:relative;display:grid;place-items:center;width:min(100%,30rem);aspect-ratio:var(--mb-ratio);max-height:24rem;border:.5rem solid #222;border-radius:4px;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:aspect-ratio .35s ease,width .35s ease}
.mb-mat[data-border=off]{border-color:transparent}
.mb-mat__logo{font-family:var(--rg-font);font-style:italic;font-weight:400;font-synthesis:style;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1;text-transform:uppercase;color:#fff}
.mb-mat__size{position:absolute;right:.75rem;bottom:.5rem;font-size:.75rem;color:#8a8a8a}
.mb-mat[data-place=outdoor]{background:#0d0d0d repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px)}
@media (prefers-reduced-motion:reduce){.mb-mat{transition:none}}

/* ---------- Reassurance band (templates/_partials/mb-reassurance.tpl, above the footer on every page) ---------- */
.mb-reassurance{background:#000;color:var(--rg-brand);border-top:1px solid #1f1f1f;border-bottom:1px solid #1f1f1f}
.mb-reassurance__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem;margin:0;padding:clamp(1.75rem,3vw,2.25rem) 0;list-style:none}
@media (min-width:992px){.mb-reassurance__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mb-reassurance__item{display:flex;align-items:center;gap:.875rem;font-size:.9375rem;font-weight:500;line-height:1.3}
@media (min-width:992px){.mb-reassurance__item{justify-content:center}}
.mb-reassurance__icon{flex:0 0 auto;width:2.5rem;height:2.5rem;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:575.98px){.mb-reassurance__item{font-size:.8125rem;gap:.625rem}.mb-reassurance__icon{width:2rem;height:2rem}}

/* ---------- Footer: MatBuilder logo ---------- */
.rg-footer-brand__logo img{height:56px;width:auto}

/* ---------- Account creation: "The minimum score must be: Weak" hint hidden (kept in the DOM, the password-policy script still updates it) ---------- */
.password-requirements__score{display:none}

/* ---------- Checkboxes and radios (account creation: partners offers, newsletter, terms, privacy) ---------- */
/* Square 20px box, 1.5px border; checked = yellow fill with a BLACK mark (theme.css draws a white one, unreadable on the yellow) */
.form-check{padding-left:1.875rem;min-height:1.5rem}
.form-check .form-check-input{width:1.25rem;height:1.25rem;margin-top:.125rem;margin-left:-1.875rem;border-width:1.5px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.form-check-input[type=checkbox]{border-radius:4px}
.form-check-input:hover:not(:checked):not(:disabled){border-color:var(--rg-brand-2)}
.form-check-input:checked{background-color:var(--rg-brand);border-color:var(--rg-brand)}
.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E")}
.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23000'/%3E%3C/svg%3E")}
.form-check-input[type=checkbox]:indeterminate{--bs-form-check-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10h8'/%3E%3C/svg%3E")}
.form-check-label{cursor:pointer;font-size:.875rem;line-height:1.5;color:var(--rg-text-2)}
.form-check-label a{color:var(--rg-text);text-decoration:underline;text-underline-offset:2px}
.form-check-label a:hover{color:var(--rg-brand-2)}

/* ---------- Password strength bar (account creation, new password) ---------- */
/* Thin 6px track in the border colour; the filled part is the brand yellow (valid) or the danger tone (too weak).
   .bg-success / .bg-danger are layered !important utilities: only their colour tokens can be changed from here */
.progress-container{--bs-success-rgb:var(--rg-brand-rgb)}
.progress-container .progress{--bs-progress-height:.375rem;--bs-progress-bg:var(--rg-border);--bs-progress-border-radius:999px;--bs-progress-box-shadow:none;margin-bottom:.75rem!important}
.progress-container .progress-bar{border-radius:999px}
.password-valid-message,.password-invalid-message,.password-length-message{font-size:.8125rem}

/* ---------- Pagination (category listings, order history, reviews) ---------- */
.pagination{--bs-pagination-padding-x:.875rem;--bs-pagination-padding-y:.5rem;--bs-pagination-border-width:1px;--bs-pagination-border-color:var(--rg-border);--bs-pagination-border-radius:var(--rg-radius);
  --bs-pagination-hover-border-color:var(--rg-border-strong);--bs-pagination-active-color:var(--rg-on-brand);--bs-pagination-active-border-color:var(--rg-brand);
  --bs-pagination-disabled-color:var(--rg-text-3);--bs-pagination-disabled-bg:transparent;--bs-pagination-disabled-border-color:var(--rg-border)}
.pagination{gap:.375rem}
.pagination .page-link{min-width:2.75rem;justify-content:center;font-weight:600;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.pagination .page-item.disabled .page-link{opacity:.55}
.pagination__number{font-family:var(--rg-caps);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Form validation states: DA tones instead of Bootstrap green / pink ---------- */
/* Icons drawn in the same colours as the text: black (dark yellow on the dark scheme) for valid, the danger tone for invalid */
:root{
  --mb-icon-valid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.5'/%3E%3C/svg%3E");
  --mb-icon-invalid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b3401e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3.5v5.5'/%3E%3Cpath d='M8 12.4v.1'/%3E%3C/svg%3E")}
[data-bs-theme=dark]{
  --mb-icon-valid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffe91a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.5'/%3E%3C/svg%3E");
  --mb-icon-invalid:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e08a6d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3.5v5.5'/%3E%3Cpath d='M8 12.4v.1'/%3E%3C/svg%3E")}
.form-control.is-valid,.was-validated .form-control:valid{background-image:var(--mb-icon-valid)}
.form-control.is-invalid,.was-validated .form-control:invalid{background-image:var(--mb-icon-invalid)}
.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:var(--mb-icon-valid)}
.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:var(--mb-icon-invalid)}
.form-control.is-valid:focus,.form-select.is-valid:focus,.form-check-input.is-valid:focus{box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.25);border-color:var(--rg-brand-2)}
.form-control.is-invalid:focus,.form-select.is-invalid:focus,.form-check-input.is-invalid:focus{box-shadow:0 0 0 .2rem rgba(var(--rg-danger-rgb),.2)}
.form-check-input.is-valid:checked{background-color:var(--rg-brand)}
.form-check-input.is-invalid:checked{background-color:var(--rg-danger)}
.form-check-input.is-valid~.form-check-label,.form-check-input.is-invalid~.form-check-label{color:var(--rg-text-2)}
.valid-feedback,.invalid-feedback{font-size:.8125rem;font-weight:500;margin-top:.375rem}
.valid-feedback{color:var(--rg-brand-2)}
.invalid-feedback{color:var(--rg-danger)}
.form-check .invalid-feedback,.form-check .valid-feedback{margin-left:0}

/* ---------- Switches (.form-switch): a pill with a round thumb, not a round checkbox ---------- */
.form-switch{padding-left:3.5rem}
.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23767676'/%3E%3C/svg%3E");
  width:2.75rem;height:1.5rem;margin-left:-3.5rem;margin-top:0;border-radius:999px;border-width:1.5px;background-color:transparent;background-position:left .1875rem center;background-size:1rem 1rem}
.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23767676'/%3E%3C/svg%3E")}
.form-switch .form-check-input:checked{--bs-form-switch-bg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23000'/%3E%3C/svg%3E");background-color:var(--rg-brand);border-color:var(--rg-brand);background-position:right .1875rem center}
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23a8a8a3'/%3E%3C/svg%3E")}
.form-switch.form-check-reverse{padding-left:0;padding-right:3.5rem}
.form-switch.form-check-reverse .form-check-input{margin-left:0;margin-right:-3.5rem}
.form-check-input:disabled,.form-check-input:disabled~.form-check-label{opacity:.45;cursor:not-allowed}

/* ---------- Popovers and tooltips ---------- */
.popover{--bs-popover-bg:var(--rg-surface);--bs-popover-border-color:var(--rg-border-strong);--bs-popover-border-radius:var(--rg-radius);--bs-popover-inner-border-radius:calc(var(--rg-radius) - 1px);
  --bs-popover-header-bg:transparent;--bs-popover-header-color:var(--rg-text);--bs-popover-body-color:var(--rg-text-soft);--bs-popover-arrow-border:var(--rg-border-strong);
  --bs-popover-box-shadow:0 12px 32px -12px rgba(0,0,0,.35);font-family:var(--rg-text-font);box-shadow:var(--bs-popover-box-shadow)}
.popover-header{font-family:var(--rg-font);font-size:.9375rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.popover-body{font-size:.875rem;line-height:1.55}
.tooltip{--bs-tooltip-bg:#000;--bs-tooltip-color:#fff;--bs-tooltip-border-radius:var(--rg-radius);--bs-tooltip-opacity:1;font-family:var(--rg-text-font);font-size:.75rem;font-weight:500;letter-spacing:.02em}
[data-bs-theme=dark] .tooltip{--bs-tooltip-bg:var(--rg-brand);--bs-tooltip-color:var(--rg-on-brand)}

/* ---------- Spinners and loaders ---------- */
.spinner-border,.spinner-grow{color:var(--rg-brand-2)}
.spinner-border{--bs-spinner-border-width:.2em}
.btn .spinner-border,.btn .spinner-grow{color:currentColor}

/* ---------- Faceted search filters (category pages, left column) ---------- */
.search-filters{gap:1.25rem}
.search-filters__form-check{gap:.625rem}
.search-filters__form-check .form-check-label{font-size:.875rem;color:var(--rg-text)}
.search-filters__form-check--color .color{border-radius:4px;outline:2px solid transparent;outline-offset:2px}
.search-filters__form-check--color .color.active,.search-filters__form-check--color .color:hover{outline-color:var(--rg-brand-2)}
.search-filters__form-check--color .color:focus-visible{box-shadow:0 0 0 .2rem rgba(var(--rg-brand-rgb),.4)}
.search-filters__magnitude{font-size:.75rem}
.search-filters__dropdown-toggle{border:1px solid var(--rg-border-strong);background:transparent;color:var(--rg-text);text-transform:none;letter-spacing:0;font-family:var(--rg-text-font);font-size:.875rem;font-weight:500}
.search-filters__slider-values{font-family:var(--rg-caps);font-size:.75rem;letter-spacing:.08em}
.noUi-target{background:var(--rg-surface-2);height:4px}
.noUi-handle{width:22px;height:22px;top:-9px;right:-11px;background:var(--rg-bg);border:2px solid var(--rg-brand-2);box-shadow:none}
.noUi-handle:hover,.noUi-active,.noUi-active:hover{background:var(--rg-brand);border-color:var(--rg-brand-2)}
.search-filters .noUi-handle:focus-visible{outline:2px solid var(--rg-brand-2);outline-offset:2px}

/* ---------- Checkout steps: pending / current (yellow) / done (black) ---------- */
.checkout-steps{background-color:transparent}
.checkout-steps__number{width:1.75rem;height:1.75rem;background:var(--rg-surface-3);color:var(--rg-text-2);font-family:var(--rg-font);font-size:.875rem;line-height:1;transition:background-color .2s,color .2s}
.checkout-steps__step:after,.checkout-steps__step:before{top:.8125rem;background:var(--rg-surface-3)}
.checkout-steps__step--success .checkout-steps__number{background:var(--rg-brand-2);color:var(--rg-bg)}
.checkout-steps__step--current .checkout-steps__number{background:var(--rg-brand);color:var(--rg-on-brand);box-shadow:0 0 0 4px rgba(var(--rg-brand-rgb),.3)}
.checkout-steps__step--current:before,.checkout-steps__step--success:before,.checkout-steps__step--success:after{background:var(--rg-brand-2)}
.checkout-steps__btn{font-family:var(--rg-caps);font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rg-text-3)}
.checkout-steps__step--current .checkout-steps__btn,.checkout-steps__step--success .checkout-steps__btn,.checkout-steps__btn.active{color:var(--rg-text)}
.checkout-steps__title{font-family:var(--rg-font);font-weight:400;text-transform:uppercase}

/* ---------- Modals (added to cart, quick view, terms of service, address) ---------- */
.modal{--bs-modal-border-radius:calc(var(--rg-radius) * 2);--bs-modal-inner-border-radius:calc(var(--rg-radius) * 2 - 1px);--bs-modal-box-shadow:0 24px 60px -20px rgba(0,0,0,.5);--bs-modal-header-padding:1.25rem 1.5rem}
.modal-backdrop{--bs-backdrop-bg:#000;--bs-backdrop-opacity:.65}
.modal-header{border-bottom-color:var(--rg-border)}
.modal-title{font-family:var(--rg-font);font-weight:400;font-size:1.375rem;letter-spacing:.02em;text-transform:uppercase}
.modal-footer{gap:.5rem}
.modal-footer>*{margin:0}
.btn-close{opacity:.6;transition:opacity .15s}
.btn-close:hover{opacity:1}

/* ---------- Still not in the MatBuilder DA ----------
 *  - Badges "text-bg-primary" / "bg-primary": white text on the yellow (layered !important utility, cannot be overridden from here:
 *    needs a template class change). Order-state badges use their own inline colours.
 *  - Product-comment modal (module disabled): its .error / .valid focus rings are hard-coded pink and green in theme.css.
 *  - Alerts: .alert-warning (pale orange) and .alert-success (pale yellow) are too close; .alert-info is a plain white box.
 *  - Cart page, cart drawer / "added to cart" modal, checkout forms and payment screen, order confirmation, customer account
 *    (history, order detail, addresses, credit slips, GDPR): styled through the tokens only, not checked on screen with real data
 *    (a cart and a signed-in customer are needed).
 *  - Faceted search and pagination were styled from theme.css; no listing on the site has them yet (2 products, no ps_facetedsearch block).
 *  - Emails and PDF invoices: out of this stylesheet, still the PrestaShop defaults.
 */