/* =============================================================
   Printly — homepage styles
   HTML5 · CSS3 · Bootstrap 5 (overrides & custom components)
   ============================================================= */

:root {
  /* ===========================================================
     FOUNDATION — LONDON Print Press design tokens
     -----------------------------------------------------------
     The palette is taken from the brand mark itself: a black
     wordmark over a CMYK print roll. So the system is ink-first
     and neutral, and the cyan / magenta / yellow appear only
     where they carry meaning — never as decoration.
     =========================================================== */

  /* ---- Ink & neutral ramp -------------------------------- */
  --pl-ink: #0e1014; /* headings, dark bands, primary surface */
  --pl-ink-soft: #3d4250; /* body copy */
  --pl-muted: #6b7080; /* meta, captions, placeholders */
  --pl-faint: #9aa0ae; /* disabled text, icon rests */
  --pl-surface: #ffffff; /* cards, page */
  --pl-cream: #f7f8fa; /* tinted band / hover fill (neutral) */
  --pl-sunken: #f1f3f6; /* input rest, skeletons, wells */
  --pl-line: #e5e7ec; /* every border and divider */
  --pl-line-strong: #d3d7e0; /* border on hover / focus edge */

  /* ---- Brand ---------------------------------------------
     Primary is ink: the wordmark is black, so the main action
     is black. Colour is reserved for meaning, which is what
     stops the interface looking decorated. */
  --pl-primary: #14161c;
  --pl-primary-dark: #2b2f39; /* hover lifts a black button */
  --pl-primary-tint: #f2f3f6;
  --pl-link: #1f5fd0; /* inline links, focus, info */
  --pl-link-dark: #1a4fae;

  /* CMYK trio from the logo — used sparingly and on purpose. */
  --pl-accent: #d81b7c; /* magenta: offers, eyebrows, required */
  --pl-accent-dark: #b81368;
  --pl-cyan: #0e9fd8;
  --pl-yellow: #f2c11b;
  --pl-amber: #e0a010; /* rating stars */
  --pl-mint: #10b981; /* decorative success fill */

  /* ---- Status --------------------------------------------- */
  --pl-success: #0e9f74;
  --pl-warning: #a86a09;
  --pl-error: #d02a45;
  --pl-info: var(--pl-link);
  --pl-success-soft: #e8f8f2;
  --pl-warning-soft: #fdf4e3;
  --pl-error-soft: #fcecef;
  --pl-info-soft: #eef3fd;

  /* ---- Type ----------------------------------------------- */
  --pl-font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pl-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Spacing scale --------------------------------------
     Every gap, padding and stack rhythm in the UI kit reads
     from these, which is what lets the responsive ladder
     re-proportion a whole page by changing two variables. */
  --pl-space-3xs: 0.25rem;
  --pl-space-2xs: 0.4rem;
  --pl-space-xs: 0.6rem;
  --pl-space-sm: 0.85rem;
  --pl-space-md: 1.15rem;
  --pl-space-lg: 1.5rem;
  --pl-space-xl: 2rem;
  --pl-space-2xl: 3rem;
  --pl-space-3xl: 4rem;

  --pl-section-y: clamp(1.125rem, 2vw, 1.875rem);
  --pl-card-pad: 1.5rem;

  /* ---- Radius ---------------------------------------------
     Tight and consistent. A pill is now reserved for things
     that are genuinely capsule-shaped: badges, chips, dots. */
  --pl-radius-xs: 6px;
  --pl-radius-sm: 8px; /* inputs, small tiles, dropzones */
  --pl-radius-btn: 10px; /* every button */
  --pl-radius: 12px; /* cards, panels, image blocks */
  --pl-radius-lg: 16px; /* oversized panels, modals */
  --pl-radius-pill: 999px; /* badges, chips, dots, avatars */

  /* ---- Elevation ------------------------------------------
     Crisp and neutral: a hairline plus a short shadow, rather
     than the wide coloured blur the site used to carry. */
  --pl-shadow-xs: 0 1px 2px rgba(14, 16, 20, 0.05);
  --pl-shadow-sm:
    0 1px 2px rgba(14, 16, 20, 0.04), 0 2px 6px -1px rgba(14, 16, 20, 0.06);
  --pl-shadow:
    0 2px 4px -1px rgba(14, 16, 20, 0.05), 0 8px 20px -6px rgba(14, 16, 20, 0.1);
  --pl-shadow-lg:
    0 4px 8px -2px rgba(14, 16, 20, 0.06),
    0 20px 44px -12px rgba(14, 16, 20, 0.16);

  --pl-focus-ring: 0 0 0 3px rgba(31, 95, 208, 0.18);
  --pl-focus-ring-ink: 0 0 0 3px rgba(20, 22, 28, 0.14);

  /* ---- Motion --------------------------------------------- */
  --pl-ease: cubic-bezier(0.2, 0, 0, 1);
  --pl-dur: 0.18s;

  --subnav-h: 56px; /* live height of the sticky sub-nav; kept in sync by JS */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}

/* Sections that the sub-nav links to snap to just below the pinned bar,
   so each aligns to the top of the viewport with no sliver of the
   previous section showing above it. */
#the-range,
#our-stocks,
#guide,
#more-info,
#faqs {
  scroll-margin-top: var(--subnav-h);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

body {
  font-family: var(--pl-font-ui);
  font-size: 0.95rem;
  color: var(--pl-ink-soft);
  background: var(--pl-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Figures line up in every table, price and total. */
.ui-table .num,
.price-text,
.ui-summary__row span,
[data-basket-count] {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4,
.hero__title,
.section__title,
.newsletter__title {
  font-family: var(--pl-font-display);
  color: var(--pl-ink);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

a {
  text-decoration: none;
  color: inherit;
}

/* One visible focus treatment for the whole site. It is never
   removed, only replaced by a clearer one on a specific control. */
:focus-visible {
  outline: 2px solid var(--pl-link);
  outline-offset: 2px;
  border-radius: var(--pl-radius-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}
::selection {
  background: var(--pl-ink);
  color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* ---------- Buttons ----------------------------------------
   Bootstrap keeps the sizing, focus and disabled behaviour; only
   the paint, the radius and the press feedback change here. The
   primary action is ink, because the wordmark is ink — colour is
   kept back for the things that carry meaning. */
.btn {
  --bs-btn-border-radius: var(--pl-radius-btn);
  font-family: var(--pl-font-ui);
  font-weight: 550;
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: var(--pl-radius-btn);
  padding: 0.6rem 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease),
    color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease),
    transform var(--pl-dur) var(--pl-ease);
}
.btn:active {
  transform: translateY(0.5px);
}
.btn-sm {
  --bs-btn-border-radius: var(--pl-radius-sm);
  font-size: 0.83rem;
  padding: 0.4rem 0.78rem;
}
.btn-lg {
  --bs-btn-border-radius: var(--pl-radius-btn);
  font-size: 0.98rem;
  padding: 0.75rem 1.45rem;
}
.btn:focus-visible {
  outline: 2px solid var(--pl-link);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pl-primary);
  --bs-btn-border-color: var(--pl-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pl-primary-dark);
  --bs-btn-hover-border-color: var(--pl-primary-dark);
  --bs-btn-active-bg: var(--pl-primary-dark);
  --bs-btn-active-border-color: var(--pl-primary-dark);
  --bs-btn-disabled-bg: var(--pl-primary);
  --bs-btn-disabled-border-color: var(--pl-primary);
  box-shadow: var(--pl-shadow-xs);
}
/* The commerce CTA — the one place magenta leads. */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pl-accent);
  --bs-btn-border-color: var(--pl-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pl-accent-dark);
  --bs-btn-hover-border-color: var(--pl-accent-dark);
  --bs-btn-active-bg: var(--pl-accent-dark);
  --bs-btn-active-border-color: var(--pl-accent-dark);
  --bs-btn-disabled-bg: var(--pl-accent);
  --bs-btn-disabled-border-color: var(--pl-accent);
  box-shadow: var(--pl-shadow-xs);
}
/* Quiet actions: a hairline on white, not a coloured outline. */
.btn-outline-primary,
.btn-outline-dark {
  --bs-btn-color: var(--pl-ink);
  --bs-btn-bg: var(--pl-surface);
  --bs-btn-border-color: var(--pl-line-strong);
  --bs-btn-hover-color: var(--pl-ink);
  --bs-btn-hover-bg: var(--pl-cream);
  --bs-btn-hover-border-color: var(--pl-line-strong);
  --bs-btn-active-color: var(--pl-ink);
  --bs-btn-active-bg: var(--pl-sunken);
  --bs-btn-active-border-color: var(--pl-line-strong);
  --bs-btn-disabled-color: var(--pl-faint);
  --bs-btn-disabled-border-color: var(--pl-line);
  background-color: var(--pl-surface);
  box-shadow: var(--pl-shadow-xs);
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-hover-color: var(--pl-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--pl-ink);
  --bs-btn-active-bg: #fff;
}
.btn-light {
  --bs-btn-color: var(--pl-ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--pl-ink);
  --bs-btn-hover-bg: var(--pl-cream);
  --bs-btn-hover-border-color: var(--pl-cream);
}
.btn-danger {
  --bs-btn-bg: var(--pl-error);
  --bs-btn-border-color: var(--pl-error);
  --bs-btn-hover-bg: #b32138;
  --bs-btn-hover-border-color: #b32138;
  --bs-btn-active-bg: #b32138;
  --bs-btn-active-border-color: #b32138;
}
.btn-outline-danger {
  --bs-btn-color: var(--pl-error);
  --bs-btn-bg: var(--pl-surface);
  --bs-btn-border-color: var(--pl-line-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pl-error);
  --bs-btn-hover-border-color: var(--pl-error);
}
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* =============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================= */
.topbar {
  background: var(--pl-ink);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.55rem 0;
}
.topbar a {
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.topbar a:hover {
  opacity: 1;
}
.topbar__rotator {
  position: relative;
  min-height: 1.4em;
}
.topbar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.topbar__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.topbar__slide i {
  color: var(--pl-amber);
}
@media (min-width: 768px) {
  .topbar__rotator {
    flex: 1;
  }
  .topbar__slide {
    justify-content: flex-start;
  }
}
.topbar__contact {
  font-size: 0.82rem;
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--pl-cream);
  border-bottom: 1px solid var(--pl-line);
  transition: box-shadow 0.25s;
}
.site-header.is-stuck {
  box-shadow: var(--pl-shadow-sm);
}
.site-header__main {
  padding: 0.85rem 0;
  transition: padding 0.25s;
}
.site-header.is-stuck .site-header__main {
  padding: 0.25rem 0;
}

.btn-nav-toggle {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  color: var(--pl-ink);
  border: none;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100px;
  /* Never let the flex row squash the logo when space runs out on phones */
  flex: 0 0 auto;
  transition: width 0.25s;
  img {width: 100%}
}
@media (max-width: 359.98px) {
  .site-logo {
    width: 78px;
  }
}
.site-header.is-stuck .site-logo {
  width: 85px;
}
.site-logo__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--pl-radius-sm);
  display: grid;
  place-items: center;
  background: var(--pl-ink);
  color: #fff;
  font-size: 1.25rem;
}
.site-logo__text {
  font-family: var(--pl-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--pl-ink);
}

/* Search */
.site-search {
  /* min-width:auto on a flex item would let the input push the row wider than
     the viewport once the placeholder is long. */
  min-width: 0;
}
.site-search__wrap {
  position: relative;
}
.site-search__wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pl-muted);
}
.site-search .form-control {
  border-radius: var(--pl-radius-pill);
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  background: var(--pl-cream);
  border-color: transparent;
   padding-left: 2.5rem !important;
}
.site-search .form-control:focus {
  background: #fff;
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 0.2rem rgba(20, 22, 28, 0.12);
 
}

/* Account actions */
.header-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.3rem 0.55rem;
  border-radius: var(--pl-radius-sm);
  color: var(--pl-ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  transition:
    background 0.2s,
    color 0.2s;
}
.header-action i {
  font-size: 1.3rem;
}
.header-action:hover {
  background: var(--pl-cream);
  color: var(--pl-primary);
}
.header-action__badge {
  position: absolute;
  top: 0;
  right: 4px;
  background: var(--pl-accent);
  color: #fff;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--pl-radius-pill);
  display: grid;
  place-items: center;
}

/* Primary nav */
.primary-nav {
  position: relative;
  border-top: 1px solid var(--pl-line);
}
.primary-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1rem;
    margin: 0;
    justify-content: space-between;
}
.primary-nav__item {
  position: static;
}
.primary-nav__link {
    display: block;
    padding: 0.9rem 0.3rem;
    font-weight: 600;
    font-size: clamp(0.86rem, 0.72vw + 0.32rem, 1rem);
    white-space: nowrap;
    color: var(--pl-ink-soft);
    border-bottom: 3px solid transparent;
    transition: color 0.2s,
    border-color 0.2s;
}
.primary-nav__link:hover,
.primary-nav__item.has-mega:hover > .primary-nav__link {
  color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.primary-nav__hot {
  color: var(--pl-primary) !important;
}
.primary-nav__sale {
  color: var(--pl-accent) !important;
}
.primary-nav__sep {
  width: 1px;
  align-self: stretch;
  margin: 0.55rem 0.6rem;
  background: var(--pl-line);
}

/* =============================================================
   MEGA MENU
   ============================================================= */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
  background: var(--pl-surface);
  border-top: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow);
  /* A tall panel on a short viewport (laptop in landscape) must scroll rather
     than spill off-screen with its lower links unreachable. The panel's top
     edge sits at the bottom of the nav bar, which moves as the sticky header
     collapses, so budget against that offset rather than a flat 80vh.
     --mega-top is kept in sync by initMegaViewport() in main.js. */
  max-height: calc(100vh - var(--mega-top, 10rem));
  max-height: calc(100dvh - var(--mega-top, 10rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.25s;
}
.primary-nav__item.has-mega:hover > .mega,
.primary-nav__item.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
/* Three regions — sidebar / product links / promo — held at every width the
   bar is shown at (>=1200px). The outer tracks flex down with the viewport so
   all three still fit at 1200px instead of the promo wrapping to a new row. */
.mega__inner {
    display: grid;
    grid-template-columns:
      minmax(0, clamp(15rem, 19vw, 27rem))
      minmax(0, 1fr)
      minmax(0, clamp(10.5rem, 13vw, 16rem));
    gap: clamp(1rem, 2vw, 2.5rem);
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.75rem clamp(1rem, 3vw, 2rem) 2rem;
}

/* --- left sidebar --- */
.mega__side ul {
  margin: 0;
}
.mega__side li + li {
  margin-top: 0.15rem;
}
.mega__side a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.9rem;
  border-radius: var(--pl-radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pl-ink);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.mega__side a i {
  font-size: 0.75rem;
  color: var(--pl-muted);
  transition: transform 0.2s ease;
}
.mega__side a:hover {
  background: var(--pl-cream);
  color: var(--pl-primary);
}
.mega__side a:hover i {
  color: var(--pl-primary);
  transform: translateX(3px);
}
.mega__side .is-active > a {
  background: var(--pl-cream);
  color: var(--pl-primary);
  box-shadow: inset 0 0 0 1px var(--pl-line);
}
.mega__side .is-active > a i {
  color: var(--pl-primary);
}

/* --- middle product columns --- */
.mega__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 2rem;
  align-content: start;
  border-left: 1px solid var(--pl-line);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
/* Columns live on the list, not the wrapper: each .mega__cols holds a single
   <ul>, so tracks on the wrapper would leave every item in one column. */
.mega__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0 1.5rem;
  align-content: start;
}

/* Right side (products + promo) stays hidden until the sidebar is hovered */
.mega__cols,
.mega__promo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  /* Delay the hide so moving the mouse across the grid gap between the
     sidebar and the columns doesn't collapse them mid-travel. */
  transition:
    opacity 0.28s ease 0.2s,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
    visibility 0s linear 0.48s;
}
/* :focus-within mirrors :hover so keyboard users reach the columns. Without it,
   tabbing into the panel opened it but left the columns permanently hidden.
   Scoped to .mega (not the nav item) to keep the same progressive reveal as
   hover: the sidebar shows first, the columns follow once you move into it. */
.mega:hover .mega__cols,
.mega:hover .mega__promo,
.mega:focus-within .mega__cols,
.mega:focus-within .mega__promo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.mega__list {
  margin: 0;
}
.mega__list a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pl-ink-soft);
  transition:
    color 0.18s ease,
    padding-left 0.18s ease;
}
.mega__list a:hover {
  color: var(--pl-primary);
  padding-left: 0.35rem;
}
.mega__star {
  font-size: 0.72rem;
  color: var(--pl-mint);
}
.mega__divider {
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--pl-line);
}
.mega__all {
  color: var(--pl-primary) !important;
  font-weight: 700 !important;
}

/* --- right promo panel --- */
.mega__promo {
  display: block;
  padding: 0;
  color: var(--pl-ink);
}
.mega__promo-img {
  display: block;
  overflow: hidden;
  border-radius: var(--pl-radius);
  margin-bottom: 0.85rem;
}
.mega__promo-img img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mega__promo:hover .mega__promo-img img {
  transform: scale(1.06);
}
.mega__promo-title {
  font-family: var(--pl-font-ui);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
}
.mega__promo:hover .mega__promo-title {
  color: var(--pl-primary);
}
.mega__promo p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pl-muted);
}

/* The bar itself is .d-none .d-xl-block, so below 1200px the offcanvas is the
   only menu. Keep this in step with that breakpoint. */
@media (max-width: 1199.98px) {
  .mega {
    display: none;
  }
}
/* Hover-only reveal is unreachable with a coarse pointer: the first tap follows
   the category link. Swap large touch screens onto the offcanvas menu, which is
   otherwise hidden at >=1200px. Overrides Bootstrap's .d-xl-* !important rules. */
@media (hover: none) {
  .mega {
    display: none;
  }
  .primary-nav {
    display: none !important;
  }
  .btn-nav-toggle {
    display: inline-flex !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega,
  .mega__cols,
  .mega__promo,
  .mega__promo-img img,
  .mega__side a i,
  .mega__list a {
    transition: none;
    transform: none;
  }
}

/* Mobile nav */
.mobile-nav {
  width: 340px;
  max-width: 88vw;
}
.mobile-nav .offcanvas-body {
  /* iOS momentum scrolling + keep the last item clear of the home indicator */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.mobile-nav__list {
  margin: 0;
}

/* Top-level rows: plain links and accordion toggles share one look */
.mobile-nav__link,
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  /* 48px min target — the old 0.7rem padding gave ~38px rows */
  min-height: 48px;
  padding: 0.7rem 0;
  font-weight: 600;
  font-size: 0.98rem;
  text-align: left;
  color: var(--pl-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pl-line);
}
.mobile-nav__link--sale {
  color: var(--pl-accent);
}
.mobile-nav__toggle i {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--pl-muted);
  transition: transform 0.25s ease;
}
.mobile-nav__toggle[aria-expanded="true"] {
  color: var(--pl-primary);
}
.mobile-nav__toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
  color: var(--pl-primary);
}
.mobile-nav__link:hover,
.mobile-nav__toggle:hover {
  color: var(--pl-primary);
}

/* Expanded sub-panel */
.mobile-nav__panel ul {
  margin: 0;
  padding: 0.35rem 0 0.6rem;
}
.mobile-nav__panel a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0 0.6rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pl-ink-soft);
  border-left: 2px solid var(--pl-line);
}
.mobile-nav__panel a:hover {
  color: var(--pl-primary);
  border-left-color: var(--pl-primary);
}
.mobile-nav__all {
  font-weight: 700 !important;
  color: var(--pl-primary) !important;
}

/* Secondary links */
.mobile-nav__list--sub a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0;
  color: var(--pl-ink-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--pl-line);
}
.mobile-nav__list--sub a:hover {
  color: var(--pl-primary);
}

.mobile-nav__contact {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.88rem;
}
.mobile-nav__contact a {
  color: var(--pl-ink-soft);
}
.mobile-nav__contact a:hover {
  color: var(--pl-primary);
}
.mobile-nav__contact i {
  color: var(--pl-primary);
  margin-right: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__toggle i {
    transition: none;
  }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
}

/* Slick slider shell */
.hero__slider {
  visibility: hidden;
  background: var(--pl-sunken);
}
.hero__slider.slick-initialized {
  visibility: visible; margin-bottom: 0
}
/* Opaque backdrop so the crossfade never reveals empty/dark space */
.hero__slider .slick-list,
.hero__slider .slick-track {
  background: var(--pl-sunken);
}
/* In fade mode, keep the outgoing slide fully opaque underneath the incoming one */
.hero__slider .slick-slide {
  background: var(--pl-sunken);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero__slide {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  background: var(--pl-cream);
}
/* Stable height so removing adaptiveHeight doesn't cause a jump/flash */
.hero__slide {
  min-height: 480px;
  display: flex;
  align-items: center;
}
.hero__slide > .container {
  width: 100%;
}
/* Full-width background-image slide.
   The photo already carries clean, light negative space on the left for copy,
   so we keep dark ink text and add only a soft light scrim for contrast safety. */
.hero__slide--bg {
    position: relative;
    background-size: cover;
    background-position: right 10% !important;
    background-repeat: no-repeat;
    min-height: clamp(460px, 32vw, 640px);
}
.hero__slide--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.62) 30%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 66%
  );
  pointer-events: none;
}
.hero__slide--bg > .container {
  position: relative;
  z-index: 1;
}
.hero__slide--bg .hero__lead {
  color: var(--pl-ink);
}
@media (max-width: 991.98px) {
  .hero__slide--bg {
    /* Shift the frame so the subject stays visible as the aspect narrows */
    background-position: 82% 22%;
  }
  .hero__slide--bg::before {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.8) 42%,
      rgba(255, 255, 255, 0.4) 72%,
      rgba(255, 255, 255, 0.15) 100%
    );
  }
}
@media (max-width: 575.98px) {
  .hero__slide--bg {
    min-height: 540px;
    background-position: 74% 18%;
  }
  /* On phones the copy sits over the whole frame — near-solid veil for legibility */
  .hero__slide--bg::before {
    background: linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 55%,
      rgba(255, 255, 255, 0.62) 100%
    );
  }
}


/* ---- Layer animation: cinematic blur + clip reveal, alternating directions ---- */
.hero__slide [data-anim] {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Eyebrow — drops in from above with a mask wipe */
.hero__slide [data-anim="1"] {
  transform: translateY(-28px);
  clip-path: inset(0 0 100% 0);
}
/* Title — rises with an upward mask wipe + slight scale */
.hero__slide [data-anim="2"] {
  transform: translateY(40px) scale(0.96);
  clip-path: inset(100% 0 0 0);
}
/* Lead — enters from the left */
.hero__slide [data-anim="3"] {
  transform: translateX(-48px);
  clip-path: inset(0 100% 0 0);
}
/* Buttons — enter from the right */
.hero__slide [data-anim="4"] {
  transform: translateX(48px);
}
/* Image — glides in from the right with a soft scale */
.hero__slide [data-anim="img"] {
  transform: translateX(64px) scale(0.92);
  transform-origin: left center;
}

.hero__slide.is-animated [data-anim] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
.hero__slide.is-animated [data-anim="img"] {
  transform: translateX(0) scale(1);
}

/* Staggered entrance per layer */
.hero__slide.is-animated [data-anim="1"] {
  transition-delay: 0.15s;
}
.hero__slide.is-animated [data-anim="2"] {
  transition-delay: 0.32s;
}
.hero__slide.is-animated [data-anim="3"] {
  transition-delay: 0.49s;
}
.hero__slide.is-animated [data-anim="4"] {
  transition-delay: 0.66s;
}
.hero__slide.is-animated [data-anim="img"] {
  transition-delay: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide [data-anim] {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
}

.hero__eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-primary);
  margin-bottom: 0.9rem;
}
.hero__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--pl-ink-soft);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__actions .btn-outline-light {
  --bs-btn-color: var(--pl-ink);
  --bs-btn-border-color: var(--pl-ink);
  --bs-btn-hover-bg: var(--pl-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--pl-ink);
}
.hero__image {
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  width: 100%;
  object-fit: cover;
}
/* ---- Slick dots ---- */
.hero__slider .slick-dots {
  bottom: 1.2rem;
  display: flex !important;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.hero__slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.hero__slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}
.hero__slider .slick-dots li button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pl-ink);
  opacity: 0.25;
  transition: all 0.3s ease;
}
.hero__slider .slick-dots li.slick-active button::before {
  opacity: 1;
  background: var(--pl-primary);
  width: 26px;
  border-radius: var(--pl-radius-pill);
}

/* ---- Slick arrows ---- */
/* Appearance comes from the unified .slick-prev/.slick-next design;
   the hero only nudges the inset so arrows sit inside the banner. */
.hero__slider .slick-prev {
  left: 1.5rem;
}
.hero__slider .slick-next {
  right: 1.5rem;
}
@media (max-width: 575.98px) {
  .hero__slider .slick-prev,
  .hero__slider .slick-next {
    display: none !important;
  }
}

/* =============================================================
   USP BAR
   ============================================================= */
.usp-bar {
  background: var(--pl-ink);
  color: #fff;
  padding: 1rem 0;
}
.usp-bar__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0;
}
.usp-bar__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.usp-bar__item i {
  font-size: 1.7rem;
  color: var(--pl-amber);
  flex-shrink: 0;
}
.usp-bar__item strong {
  display: block;
  font-size: 0.95rem;
}
.usp-bar__item span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 767.98px) {
  .usp-bar__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 420px) {
  .usp-bar__list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   SECTION SCAFFOLD
   ============================================================= */
.section {
  padding: clamp(1rem, 2vw, 1.75rem) 0;
}
.section__head {
  max-width: 46rem;
  margin: 0 auto var(--pl-space-xl);
  text-align: center;
}
/* Heading on the left, its own action on the right. Used wherever a
   section is a list of things you can go and see more of. */
.section__head--row {
  max-width: none;
  margin: 0 0 var(--pl-space-xl);
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pl-space-lg);
}
.section__head--row > div {
  min-width: 0;
  max-width: 44rem;
}
.section__head--row .section__sub {
  margin-top: var(--pl-space-2xs);
}
/* .section__eyebrow / .section__title / .section__sub are the .eyebrow /
   .section-heading / .lead-text styles from the UI kit — defined there once. */
.section__eyebrow--light {
  color: var(--pl-line);
}
.section__link {
  flex: none;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--pl-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-btn);
  background: var(--pl-surface);
  white-space: nowrap;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease);
}
.section__link i {
  font-size: 0.85em;
  transition: transform var(--pl-dur) var(--pl-ease);
}
.section__link:hover {
  background: var(--pl-cream);
  border-color: var(--pl-line-strong);
  color: var(--pl-ink);
}
.section__link:hover i {
  transform: translateX(2px);
}
@media (max-width: 767.98px) {
  .section__head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pl-space-md);
  }
}

/* =============================================================
   CATEGORY GRID
   ============================================================= */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-xs);
  transition:
    transform var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease);
}
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pl-line-strong);
  box-shadow: var(--pl-shadow);
}

/* Media block: image fills it; description + link float over it on hover */
.category-card__top {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  text-align: left;
}
.category-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* Image zoom on hover */
.category-card:hover .category-card__img,
.category-card:focus-within .category-card__img {
  transform: scale(1.08);
}

/* Gradient scrim behind the overlay text for readability */
.category-card__top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(14, 16, 20, 0.82) 0%,
    rgba(14, 16, 20, 0.45) 38%,
    rgba(14, 16, 20, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.category-card:hover .category-card__top::after,
.category-card:focus-within .category-card__top::after {
  opacity: 1;
}

/* Overlay content: hidden by default, fades up from the bottom on hover.
   Absolutely stacked above image + scrim, so no layout shift. */
.category-card__desc,
.category-card__more {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  will-change: opacity, transform;
}
.category-card:hover .category-card__desc,
.category-card:focus-within .category-card__desc,
.category-card:hover .category-card__more,
.category-card:focus-within .category-card__more {
  opacity: 1;
  transform: translateY(0);
}
/* Slight stagger so the link follows the description in */
.category-card__more {
  transition-delay: 0.06s;
}
.category-card:hover .category-card__more,
.category-card:focus-within .category-card__more {
  transition-delay: 0.1s;
}

.category-card__desc {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.category-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}
.category-card__more::after {
  content: "\2192"; /* → */
  transition: transform 0.25s;
}
.category-card:hover .category-card__more::after,
.category-card:focus-within .category-card__more::after {
  transform: translateX(3px);
}

/* White footer block: title + price + CTA */
/* The body was centred with a third "Explore More" label under every
   card — the card is a link and the image already carries that cue.
   Left-aligned, it reads as a catalogue rather than a template. */
.category-card__body {
  padding: 0.85rem 0.95rem 1rem;
  text-align: left;
  background: var(--pl-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: auto;
}
.category-card__title {
  font-family: var(--pl-font-ui);
  font-weight: 550;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--pl-ink);
}
.category-card__price {
  margin: 0;
  font-size: 0.86rem;
  color: var(--pl-muted);
  font-variant-numeric: tabular-nums;
}
.category-card__price strong {
  color: var(--pl-ink);
  font-weight: 600;
}
.category-card__cta {
  margin-top: 0.55rem;
  font-weight: 550;
  font-size: 0.88rem;
  color: var(--pl-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.category-card__cta i {
  transition: transform 0.25s;
}
.category-card:hover .category-card__cta i {
  transform: translateX(4px);
}

.category-card__tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  background: var(--pl-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pl-radius-pill);
}

/* =============================================================
   LIFE'S MOMENTS
   ============================================================= */
.moments {
  background: var(--pl-cream);
}
.moments__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.moment-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow-sm);
  background: var(--pl-ink);
  aspect-ratio: 4 / 3;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.moment-card--tall {
  aspect-ratio: 3 / 4;
  height: 100%;
}
.moment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
}

.moment-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.moment-card:hover .moment-card__img,
.moment-card:focus-within .moment-card__img {
  transform: scale(1.07);
}

.moment-card__overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.3rem;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(14, 16, 20, 0.85) 0%,
    rgba(14, 16, 20, 0.35) 45%,
    rgba(14, 16, 20, 0) 75%
  );
}
.moment-card__kicker {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-line);
  margin-bottom: 0.25rem;
}
.moment-card__title {
  font-family: var(--pl-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
.moment-card__text {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.moment-card__cta {
  margin-top: 0.7rem;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
}
.moment-card__cta i {
  transition: transform 0.25s;
}
.moment-card:hover .moment-card__cta i,
.moment-card:focus-within .moment-card__cta i {
  transform: translateX(4px);
}

/* ---------- Moments video ---------- */
.moments__video {
  margin-top: clamp(1rem, 3vw, 1.75rem);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.video-player {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--pl-ink);
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow-sm);
  aspect-ratio: 16 / 9;
}
.video-player__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-player__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--pl-ink);
  font-size: 2.2rem;
  box-shadow: var(--pl-shadow);
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.video-player:hover .video-player__play {
  transform: scale(1.08);
}
.video-player.is-playing {
  cursor: default;
}
.video-player.is-playing .video-player__play {
  opacity: 0;
  pointer-events: none;
}

/* =============================================================
   SAMPLE PROMO
   ============================================================= */
.sample-promo__card {
  background: var(--pl-cream);
  border-radius: calc(var(--pl-radius) + 6px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.sample-promo__img {
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  width: 100%;
}
.sample-promo__list {
  margin: 1.2rem 0 1.6rem;
}
.sample-promo__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-weight: 500;
}
.sample-promo__list i {
  color: var(--pl-mint);
  font-size: 1.15rem;
}

/* =============================================================
   POPULAR PRODUCTS
   ============================================================= */
.product-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
  border-color: transparent;
}
.product-card__media {
  position: relative;
}
.product-card__media img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}
.product-card__badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--pl-ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pl-radius-pill);
}
.product-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__cat {
  font-size: 0.72rem;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-muted);
}
.product-card__title {
  font-family: var(--pl-font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.012em;
  margin: 0.3rem 0 0.4rem;
}
.product-card__desc {
  color: var(--pl-muted);
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
  flex: 1;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card__price {
  font-weight: 700;
}
.product-card__price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--pl-muted);
}
.product-card__foot .btn {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

/* =============================================================
   SPECIAL FINISHES
   ============================================================= */
.finish-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow-sm);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.finish-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pl-shadow);
  border-color: transparent;
}

/* --- media --- */
.finish-card__media {
  position: relative;
  display: block;
  overflow: hidden;
}
.finish-card__media img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.finish-card:hover .finish-card__media img {
  transform: scale(1.08);
}
.finish-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 16, 20, 0) 45%, rgba(14, 16, 20, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.finish-card:hover .finish-card__media::after {
  opacity: 1;
}

/* --- category badge --- */
.finish-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-family: var(--pl-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 0.32rem 0.7rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-ink);
  box-shadow: 0 6px 16px -8px rgba(14, 16, 20, 0.6);
  backdrop-filter: blur(2px);
}
.finish-card__badge--soft {
  background: var(--pl-ink);
}
.finish-card__badge--uv {
  background: var(--pl-ink);
}
.finish-card__badge--edge {
  background: var(--pl-ink);
}

/* --- shimmer sweep on hover --- */
.finish-card__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.finish-card:hover .finish-card__shine {
  animation: finishShine 0.9s ease;
}
@keyframes finishShine {
  to {
    transform: translateX(120%);
  }
}

/* --- body --- */
.finish-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.2rem 1.3rem;
}
.finish-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pl-muted);
}
.finish-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.finish-card__meta i {
  color: var(--pl-primary);
  font-size: 0.85rem;
}
.finish-card__title {
  font-family: var(--pl-font-ui);
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.finish-card__title a {
  color: var(--pl-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--pl-primary), var(--pl-primary));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease;
}
.finish-card:hover .finish-card__title a,
.finish-card__title a:hover {
  color: var(--pl-primary);
  background-size: 100% 2px;
}
.finish-card__body p {
  margin: 0 0 0.9rem;
  color: var(--pl-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.finish-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--pl-font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pl-primary);
  text-decoration: none;
}
.finish-card__link i {
  transition: transform 0.3s ease;
}
.finish-card:hover .finish-card__link i,
.finish-card__link:hover i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .finish-card,
  .finish-card__media img,
  .finish-card__shine,
  .finish-card__link i {
    transition: none;
  }
  .finish-card:hover .finish-card__shine {
    animation: none;
  }
}

/* =============================================================
   REVIEWS
   ============================================================= */
.reviews {
  background: var(--pl-cream);
}
.reviews__rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.reviews__stars {
  color: var(--pl-mint);
  font-size: 1.05rem;
}
.reviews__rating strong {
  color: var(--pl-ink);
}
.reviews__count {
  color: var(--pl-muted);
  font-size: 0.9rem;
}
.review-card {
  height: 100%;
  background: #fff;
  border-radius: var(--pl-radius);
  padding: 1.6rem;
  box-shadow: var(--pl-shadow-sm);
  display: flex;
  flex-direction: column;
}
.review-card__stars {
  color: var(--pl-mint);
  margin-bottom: 0.8rem;
}
.review-card__text {
  font-size: 1rem;
  color: var(--pl-ink-soft);
  flex: 1;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: var(--pl-ink);
}
.review-card__name {
  font-weight: 700;
  font-size: 0.95rem;
}
.review-card__role {
  font-size: 0.82rem;
  color: var(--pl-muted);
}

/* =============================================================
   PROMISE / SUSTAINABILITY
   ============================================================= */
.promise__card {
  background: var(--pl-ink);
  border-radius: calc(var(--pl-radius) + 6px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  color: #fff;
}
.promise__img {
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
  width: 100%;
}
.promise__lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.promise__stats strong {
  display: block;
  font-family: var(--pl-font-display);
  font-size: 1.8rem;
  color: var(--pl-amber);
}
.promise__stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

/* =============================================================
   BLOG
   ============================================================= */
.blog-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
}
.blog-card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
}
.blog-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__tag {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-primary);
}
.blog-card__title {
  font-family: var(--pl-font-ui);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.4rem 0 0.5rem;
}
.blog-card__excerpt {
  color: var(--pl-muted);
  font-size: 0.9rem;
  flex: 1;
}
.blog-card__more {
  font-weight: 600;
  color: var(--pl-primary);
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* =============================================================
   NEWSLETTER
   ============================================================= */
.newsletter {
  padding: clamp(0.875rem, 1.75vw, 1.375rem) 0;
}
.newsletter__inner {
  background: var(--pl-ink);
  border-radius: calc(var(--pl-radius) + 6px);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
}
.newsletter__title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.newsletter__sub {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.newsletter__field {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.newsletter__field .form-control {
  border-radius: var(--pl-radius-pill);
  border: none;
  flex: 1;
  min-width: 220px;
}
.newsletter__field .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
}
.newsletter__field .btn {
  white-space: nowrap;
}
.newsletter__msg {
  margin: 0.8rem 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  position: relative;
  background: var(--pl-ink);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
/* animated gradient top border */
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--pl-cyan) 0 33.33%,
    var(--pl-accent) 33.33% 66.66%,
    var(--pl-yellow) 66.66% 100%
  );
  z-index: 2;
}
/* A single, still wash of light at the top of the dark band. The
   footer used to carry a drifting aurora and a flowing rainbow rule;
   both animated forever and neither said anything. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 60rem;
  max-width: 130%;
  height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.05),
    transparent 72%
  );
  background-repeat: no-repeat;
  pointer-events: none;
}
/* subtle dot-grid texture */
.site-footer .container {
  position: relative;
  z-index: 1;
}
.site-footer .container::before {
  content: "";
  position: absolute;
  inset: -1rem 0 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.site-footer__heading {
  position: relative;
  color: #fff;
  font-family: var(--pl-font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.15rem;
  padding-bottom: 0.6rem;
}
.site-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.6rem;
  height: 2px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-ink);
}
.site-footer__links li,
.site-footer__contact li {
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}
.site-footer__links a {
  position: relative;
  display: inline-block;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.site-footer__links a::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 0;
  height: 1.5px;
  background: var(--pl-primary);
  transform: translateY(-50%);
  transition: width 0.25s ease;
}
.site-footer__links a:hover {
  color: #fff;
  transform: translateX(0.9rem);
}
.site-footer__links a:hover::before {
  width: 0.6rem;
}
.site-footer__contact a:hover {
  color: #fff;
}
.site-footer__contact i {
  color: var(--pl-amber);
  margin-right: 0.4rem;
}
.site-footer__social {
  display: flex;
  gap: 0.6rem;
  margin: 1.2rem 0;
}
.site-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.site-footer__social a:hover {
  background: var(--pl-ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -12px rgba(20, 22, 28, 0.9);
}
.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: var(--pl-radius-pill);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.badge-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.badge-chip i {
  color: var(--pl-mint);
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
}
.site-footer__legal a:hover {
  color: #fff;
}
.site-footer__pay {
  display: flex;
  gap: 0.75rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__pay i {
  transition: color 0.2s ease;
}
.site-footer__pay i:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__links a,
  .site-footer__social a,
  .badge-chip {
    transition: none;
  }
  .site-footer::after,
  .site-footer::before {
    animation: none;
  }
}

/* =============================================================
   BACK TO TOP
   ============================================================= */
.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1040;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--pl-primary);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: var(--pl-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    background 0.2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--pl-primary-dark);
}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Card — gradient fill-on-hover style */

.promise-card {
  background: var(--pl-surface);
  border-radius: var(--pl-radius);
  padding: var(--pl-space-lg);
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow-xs);
  transition:
    border-color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease);
}
.promise-card:hover,
.promise-card:focus-within {
  border-color: var(--pl-line-strong);
  box-shadow: var(--pl-shadow-sm);
}

/* Icon — a square tile, sized like the type around it. */
.promise-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 var(--pl-space-md);
  border-radius: var(--pl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pl-sunken);
  color: var(--pl-ink);
  font-size: 1.05rem;
}

/* Title */
.promise-card h4 {
  font-family: var(--pl-font-ui);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--pl-ink);
  margin-bottom: 0.35rem;
}

/* Description */
.promise-card p {
  color: var(--pl-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin-bottom: var(--pl-space-md);
  flex: 1;
  transition: color 0.3s ease;
}

/* Button */
.promise-btn {
  color: var(--pl-primary);
  font-weight: 550;
  font-size: 0.86rem;
  color: var(--pl-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--pl-dur) var(--pl-ease);
}

.promise-btn i {
  transition: transform 0.25s ease;
}

.promise-btn:hover i {
  transform: translateX(4px);
}



@media (max-width: 991px) {
  .promise-card {
    margin-bottom: 1.5rem;
  }
}

.finish-slider-section {
  padding: 22px 60px;
  background: var(--pl-cream);
}

.finish-slide {
  border-radius: var(--pl-radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
}

/* subtle slow zoom on the background image */
.finish-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 8s ease;
  z-index: 0;
}

.finish-slide.slick-active::after,
.finish-slide:hover::after {
  transform: scale(1.08);
}

.finish-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      120% 120% at 0% 100%,
      rgba(216, 27, 124, 0.22),
      transparent 55%
    ),
    linear-gradient(
      105deg,
      rgba(14, 16, 20, 0.85) 0%,
      rgba(14, 16, 20, 0.55) 40%,
      rgba(14, 16, 20, 0.15) 100%
    );
}

.finish-content {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  padding: var(--pl-space-xl);
  margin: clamp(1.25rem, 3vw, 2.75rem);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(14, 16, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--pl-radius);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: var(--pl-radius-pill);
  font-weight: 550;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--pl-space-md);
}
.tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-accent);
}

.finish-content h2 {
  font-family: var(--pl-font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--pl-space-sm);
}
.finish-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--pl-space-lg);
}

.finish-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--pl-radius-btn);
  background: #fff;
  color: var(--pl-ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    color var(--pl-dur) var(--pl-ease);
}

.finish-btn:hover {
  background: var(--pl-cream);
  color: var(--pl-ink);
}
.finish-btn i {
  transition: transform var(--pl-dur) var(--pl-ease);
}
.finish-btn:hover i {
  transform: translateX(3px);
}

/* slick dots */

.slick-dots {
  bottom: 25px;
}

.slick-dots li {
  width: 14px;
  height: 14px;
  transition: width 0.35s ease;
}

.slick-dots li button {
  padding: 0;
}

.slick-dots li button:before {
  content: "";
  width: 14px;
  height: 6px;
  background: #fff;
  border-radius: var(--pl-radius-lg);
  opacity: 0.4;
  transition: all 0.35s ease;
}

.slick-dots li.slick-active {
  width: 38px;
}

.slick-dots li.slick-active button:before {
  width: 38px;
  background: var(--pl-accent);
  opacity: 1;
}

/* =============================================================
   UNIFIED SLIDER ARROWS (site-wide)
   Single, consistent arrow design shared by every slider:
   white circle · subtle border · brand chevron · brand-fill hover.
   ============================================================= */
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  box-shadow: var(--pl-shadow-sm);
  z-index: 20;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease);
}

.slick-prev {
  left: 20px;
}

.slick-next {
  right: 20px;
}

.slick-prev:before,
.slick-next:before {
  font-family: "bootstrap-icons";
  font-size: 1.2rem;
  line-height: 1;
  color: var(--pl-primary);
  opacity: 1;
  transition: color 0.25s ease;
}

.slick-prev:before {
  content: "\F284"; /* chevron-left */
}

.slick-next:before {
  content: "\F285"; /* chevron-right */
}

.slick-prev:hover,
.slick-next:hover {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
}

.slick-prev:hover:before,
.slick-next:hover:before {
  color: #fff;
}

.finish-slider .slick-prev,
.finish-slider .slick-next {
  top: auto;
  bottom: 1.5rem;
  transform: none;
}
.finish-slider .slick-prev {
  left: auto;
  right: 4.25rem;
}
.finish-slider .slick-next {
  right: 1.5rem;
}
.finish-slider .slick-dots {
  text-align: left;
  padding-left: 1.75rem;
  width: auto;
}

@media (max-width: 991px) {
  .finish-slider-section {
    padding: 25px 20px;
  }

  .finish-slide {
    min-height: 460px;
  }

  .finish-content {
    margin: 20px;
    padding: 34px 30px;
    max-width: 100%;
  }

  .finish-content h2 {
    font-size: 34px;
  }

  .slick-prev,
  .slick-next {
    display: none !important;
  }
}
.delivery-section {
  padding: 45px 0;
  background: var(--pl-cream);
}

.section-tag {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--pl-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin-bottom: var(--pl-space-xs);
}

.section-title {
  font-size: 48px;
  font-weight: 800;
  color: #111;
  margin-bottom: 15px;
}

.section-subtitle {
  color: var(--pl-muted);
  font-size: 18px;
  max-width: 650px;
  margin: auto;
}

/* Card */

.delivery-card {
  --dc-a: var(--pl-ink);
  --dc-b: var(--pl-ink);
  --dc-soft: rgba(123, 47, 247, 0.1);

  background: #fff;
  border-radius: var(--pl-radius);
  padding: 34px 30px 32px;
  text-align: left;
  height: 100%;
  border: 1px solid #eef1f5;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Accent themes */
.delivery-card[data-accent="violet"] {
  --dc-a: var(--pl-cyan);
  --dc-b: var(--pl-cyan);
  --dc-soft: rgba(20, 22, 28, 0.1);
}
.delivery-card[data-accent="amber"] {
  --dc-a: var(--pl-amber);
  --dc-b: var(--pl-amber);
  --dc-soft: rgba(255, 149, 0, 0.12);
}
.delivery-card[data-accent="mint"] {
  --dc-a: var(--pl-success);
  --dc-b: var(--pl-success);
  --dc-soft: rgba(16, 185, 129, 0.12);
}
.delivery-card[data-accent="coral"] {
  --dc-a: var(--pl-accent);
  --dc-b: var(--pl-accent);
  --dc-soft: rgba(255, 45, 120, 0.1);
}

.delivery-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--dc-a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.delivery-card:hover:before {
  transform: scaleX(1);
}

.delivery-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 24px 50px -18px rgba(14, 16, 20, 0.28);
}

/* Top row: icon + badge */

.delivery-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.delivery-icon {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--pl-radius);

  background: var(--dc-soft);
  color: var(--dc-a);

  font-size: 27px;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

.delivery-card:hover .delivery-icon {
  background: var(--dc-a);
  color: #fff;
  transform: scale(1.05) rotate(-4deg);
}

.delivery-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--pl-radius-pill);
  color: var(--pl-ink);
  background: var(--pl-sunken);
  border: 1px solid var(--pl-line);
}

/* Heading */

.delivery-card h4 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #111;
  margin-bottom: 10px;
}

.delivery-card p {
  color: var(--pl-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}

/* Meta list */

.delivery-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.delivery-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #4b4560;
}

.delivery-meta li i {
  color: var(--dc-a);
  font-size: 15px;
}

/* Link */

.delivery-link {
  margin-top: auto;
  text-decoration: none;
  color: var(--pl-ink);
  font-weight: 550;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--pl-dur) var(--pl-ease);
}

.delivery-link i {
  transition: transform 0.3s ease;
}

.delivery-card:hover .delivery-link {
  gap: 12px;
}

.delivery-card:hover .delivery-link i {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .section-title {
    font-size: 36px;
  }

  .delivery-card {
    padding: 30px 26px;
  }
}
.review-rating-section {
  padding: 17px 0;
  background: var(--pl-cream);
}

.rating-box {
  background: #fff;
  border-radius: var(--pl-radius-pill);
  padding: 14px 32px;
  border: 1px solid #edf0f5;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.12);
  display: inline-block;
}

.review-rating-section .container {
  text-align: center;
}

/* Divider between items */
.rating-box .col-auto {
  position: relative;
}
.rating-box .col-auto:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-0.75rem);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: #e6e9f0;
}

.rating-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pl-ink);
  letter-spacing: -0.01em;
}

/* Stars */

.rating-stars {
  display: flex;
  gap: 3px;
}

.rating-stars span {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  background: #00b67a;

  color: #fff;

  font-size: 14px;

  transition: transform 0.3s ease;
}

.rating-stars span:hover {
  transform: translateY(-3px);
}

.rating-stars .half {
  background: #d8dce4;
  color: #00b67a;
}

/* Text */

.rating-text {
  font-size: 13.5px;
  color: #6f6a80;
  white-space: nowrap;
}

.rating-text strong {
  color: var(--pl-ink);
  font-weight: 600;
}

/* Trustpilot */

.trustpilot {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 15px;
  font-weight: 700;
  color: var(--pl-ink);
}

.trustpilot i {
  color: #00b67a;
  font-size: 16px;
}

/* Mobile */

@media (max-width: 768px) {
  .rating-box {
    border-radius: var(--pl-radius);
    padding: 16px 22px;
    display: block;
  }

  .rating-box .col-auto:not(:last-child)::after {
    display: none;
  }

  .rating-title {
    font-size: 15px;
  }

  .rating-stars span {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .rating-text {
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }

  .trustpilot {
    justify-content: center;
    font-size: 15px;
  }
}

/* =============================================================
   COLLECTION / PRODUCT LISTING PAGE
   ============================================================= */
.collection {
  padding-bottom: 4rem;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
  padding: 1rem 0 0.25rem;
}
.breadcrumb-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--pl-muted);
}
.breadcrumb-bar__list li {
  display: flex;
  align-items: center;
}
.breadcrumb-bar__list li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--pl-line);
}
.breadcrumb-bar__list a {
  color: var(--pl-muted);
  transition: color 0.2s;
}
.breadcrumb-bar__list a:hover {
  color: var(--pl-primary);
}
.breadcrumb-bar__list [aria-current] {
  color: var(--pl-ink);
  font-weight: 600;
}

/* ---------- Collection header ----------
   Aliases of the shared .page-head / .page-heading / .page-intro trio. */

/* ---------- Category tabs ---------- */
.cat-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--pl-line);
  scrollbar-width: thin;
}
.cat-tabs::-webkit-scrollbar {
  height: 4px;
}
.cat-tabs::-webkit-scrollbar-thumb {
  background: var(--pl-line);
  border-radius: var(--pl-radius-pill);
}
.cat-tabs__tab {
  flex: 0 0 auto;
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--pl-radius-pill);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.cat-tabs__tab:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
  transform: translateY(-1px);
}
.cat-tabs__tab.is-active {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}

/* ---------- Filter bar (horizontal) ---------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: var(--pl-space-sm);
  flex-wrap: wrap;
  padding: var(--pl-space-sm) var(--pl-space-md);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
  border-bottom: 0;
  background: var(--pl-surface);
  margin-bottom: 0;
}
.filterbar__facets {
  display: flex;
  gap: var(--pl-space-xs);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Dropdown shell */
.fdrop {
  position: relative;
}
.fdrop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pl-ink);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.fdrop__btn strong {
  font-weight: 700;
}
.fdrop__btn i {
  color: var(--pl-muted);
  font-size: 0.85rem;
  transition: transform 0.2s;
}
.fdrop__btn:hover {
  border-color: var(--pl-primary);
}
.fdrop.is-open .fdrop__btn {
  border-color: var(--pl-primary);
  box-shadow: inset 0 3px 0 var(--pl-primary);
}
.fdrop.is-open .fdrop__btn i {
  transform: rotate(180deg);
}

/* Floating panel */
.fdrop__panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 1020;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  box-shadow: var(--pl-shadow);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.fdrop--sort .fdrop__panel {
  left: 0;
}
.filterbar__facets .fdrop__panel {
  right: 0;
}
.fdrop.is-open .fdrop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sort panel (single select list) */
.fdrop__panel--sort {
  min-width: 240px;
}
.sortopt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: var(--pl-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pl-ink);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.sortopt + .sortopt {
  margin-top: 0.35rem;
}
.sortopt:hover {
  background: var(--pl-cream);
}
.sortopt.is-active {
  background: var(--pl-primary);
  color: #fff;
}

/* Facet panel header */
.fdrop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--pl-line);
}
.fdrop__selected {
  font-weight: 700;
  font-size: 1rem;
}
.fdrop__selectall {
  border: none;
  background: none;
  color: var(--pl-link);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.fdrop__selectall:hover {
  text-decoration: underline;
}

/* Facet option list */
.fdrop__list {
  max-height: 320px;
  overflow-y: auto;
}
.fopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border: none;
  background: none;
  border-radius: var(--pl-radius-sm);
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: background 0.15s;
}
.fopt:hover:not(:disabled) {
  background: var(--pl-cream);
}
.fopt.is-checked {
  font-weight: 700;
  background: var(--pl-cream);
}
.fopt:disabled {
  color: var(--pl-muted);
  opacity: 0.5;
  cursor: not-allowed;
}
.fopt__label {
  flex: 1;
  text-align: left;
}
.fopt__count {
  font-weight: 700;
  color: var(--pl-ink-soft);
  font-variant-numeric: tabular-nums;
}
.fopt.is-checked .fopt__count {
  color: var(--pl-primary);
}

/* ---------- Result meta row (count + chips + clear) ---------- */
.listing__meta {
  display: flex;
  align-items: center;
  gap: var(--pl-space-md);
  flex-wrap: wrap;
  padding: var(--pl-space-sm) var(--pl-space-md);
  border: 1px solid var(--pl-line);
  border-radius: 0 0 var(--pl-radius) var(--pl-radius);
  background: var(--pl-cream);
  margin-bottom: var(--pl-space-xl);
}
.listing__count {
  color: var(--pl-muted);
  font-size: 0.875rem;
}
.listing__count strong {
  color: var(--pl-ink);
}
.listing__meta-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.listing__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  color: var(--pl-link);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.listing__clear:hover {
  text-decoration: underline;
}

/* Active filter chips */
.active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.active-pill {
  border: 1px solid var(--pl-line);
  background: var(--pl-cream);
  color: var(--pl-ink);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
  border-radius: var(--pl-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.active-pill:hover {
  background: #fff;
  color: var(--pl-ink);
}
.active-pill i {
  font-size: 0.8rem;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pcard {
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--pl-shadow);
  border-color: transparent;
}
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pl-cream);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pcard:hover .pcard__media img {
  transform: scale(1.06);
}
.pcard__badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-ink);
  color: #fff;
}
.pcard__badge--bestseller {
  background: var(--pl-primary);
}
.pcard__badge--new {
  background: var(--pl-mint);
}
.pcard__badge--luxury {
  background: var(--pl-ink);
}
.pcard__badge--eco {
  background: var(--pl-mint);
}
.pcard__badge--value {
  background: var(--pl-accent);
}
.pcard__quick {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  transform: translate(-50%, 140%);
  background: #fff;
  color: var(--pl-ink);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: var(--pl-radius-pill);
  box-shadow: var(--pl-shadow-sm);
  white-space: nowrap;
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.pcard:hover .pcard__quick {
  transform: translate(-50%, 0);
  opacity: 1;
}
.pcard__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__colours {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}
.pcard__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--pl-line);
}
.pcard__title {
  font-family: var(--pl-font-ui);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.pcard__title a {
  transition: color 0.2s;
}
.pcard__title a:hover {
  color: var(--pl-primary);
}
.pcard__blurb {
  font-size: 0.86rem;
  color: var(--pl-muted);
  margin: 0 0 0.7rem;
}
.pcard__rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}
.pcard__stars {
  color: var(--pl-amber);
  letter-spacing: 0.02em;
}
.pcard__rnum {
  font-weight: 700;
}
.pcard__reviews {
  color: var(--pl-muted);
}
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
}
.pcard__price {
  font-size: 0.85rem;
  color: var(--pl-muted);
}
.pcard__price strong {
  font-size: 1.15rem;
  color: var(--pl-ink);
}
.pcard__cta {
  white-space: nowrap;
}
.pcard__cta i {
  transition: transform 0.2s;
}
.pcard__cta:hover i {
  transform: translateX(3px);
}

/* ---------- Empty state ----------
   Shared with every other listing on the site — see .ui-empty in the UI kit. */

/* ---------- Load more ---------- */
.listing__more {
  text-align: center;
  margin-top: 2.5rem;
}
.listing__more-progress {
  font-size: 0.88rem;
  color: var(--pl-muted);
  margin-bottom: 0.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .filterbar__facets {
    margin-left: 0;
    width: 100%;
  }
  .filterbar__facets .fdrop {
    flex: 1 1 auto;
  }
  .filterbar__facets .fdrop__btn {
    width: 100%;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .fdrop--sort,
  .fdrop--sort .fdrop__btn {
    width: 100%;
  }
  .fdrop__panel {
    left: 0;
    right: 0;
    min-width: 0;
  }
  .listing__meta-right {
    margin-left: 0;
    width: 100%;
  }
}

/* =============================================================
   Printly — product detail page (PDP) styles
   Builds on css/styles.css design tokens (--pl-*).
   ============================================================= */

.pdp {
  padding-bottom: 0;
}

/* Bootstrap grid helper: 5-across columns (col-lg-2-4) */
@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* =============================================================
   PRODUCT HERO
   ============================================================= */
.pdp-hero {
  margin: 0.25rem 0 1.25rem;
}

/* ---------- Gallery ---------- */
.pdp-gallery__stage {
  position: relative;
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: var(--pl-cream);
  box-shadow: var(--pl-shadow-sm);
  aspect-ratio: 1 / 1;
}
.pdp-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pdp-gallery__stage:hover .pdp-gallery__img {
  transform: scale(1.05);
}
/* Slick main slider fills the square stage */
.pdp-gallery__main,
.pdp-gallery__main .slick-list,
.pdp-gallery__main .slick-track {
  height: 100%;
}
.pdp-gallery__main .slick-slide {
  height: 100%;
}
.pdp-gallery__main .slick-slide > div,
.pdp-gallery__slide {
  height: 100%;
}
.pdp-gallery__flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--pl-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--pl-radius-pill);
}
.pdp-gallery__flag i {
  color: var(--pl-amber);
}
.pdp-gallery__zoom {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow-sm);
  transition: background 0.2s, transform 0.2s;
}
.pdp-gallery__zoom:hover {
  background: #fff;
  transform: scale(1.06);
}

/* ---------- Image zoom lightbox ---------- */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(15, 15, 20, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pdp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.pdp-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--pl-radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pdp-lightbox.is-open .pdp-lightbox__img {
  transform: scale(1);
}
.pdp-lightbox.is-zoomed .pdp-lightbox__img {
  cursor: zoom-out;
  transform: scale(1.8);
}
.pdp-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--pl-ink);
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pdp-lightbox__close:hover {
  background: #fff;
  transform: scale(1.08);
}

/* ---------- Thumbnail slider ---------- */
.pdp-gallery__slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.pdp-gallery__thumbs {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px;
}
/* Slick lays out the thumbs; give each slide the inter-thumb gap */
.pdp-gallery__thumbs .slick-slide {
  padding: 0 0.3rem;
}
.pdp-gallery__thumbs .slick-list {
  margin: 0 -0.3rem;
}
.pdp-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-thumb:hover {
  transform: translateY(-2px);
}
.pdp-gallery__thumbs .slick-current .pdp-thumb {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04), var(--pl-shadow-sm);
}

/* Slider arrows */
.pdp-gallery__nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-primary);
  box-shadow: var(--pl-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s, opacity 0.25s;
}
.pdp-gallery__nav:hover {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
  transform: scale(1.06);
}
/* Keep our arrows in the flex row when Slick claims them */
.pdp-gallery__nav.slick-arrow {
  position: static;
  transform: none;
  font-size: 1rem;
}
.pdp-gallery__nav.slick-arrow:hover {
  transform: scale(1.08);
}
.pdp-gallery__nav.slick-arrow::before {
  content: none;
}
.pdp-gallery__nav:disabled,
.pdp-gallery__nav.slick-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ---------- Product info ---------- */
.pdp-info__title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 0 0 0.35rem;
}
.pdp-info__from {
  font-size: 1.05rem;
  color: var(--pl-ink-soft);
  margin: 0 0 0.75rem;
}
.pdp-info__from span {
  color: var(--pl-primary);
  font-weight: 700;
  font-size: 1.35rem;
}
.pdp-info__from small {
  color: var(--pl-muted);
  font-size: 0.8rem;
}

.pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  margin-bottom: 1.1rem;
}
.pdp-rating__brand {
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pdp-rating__brand i {
  color: var(--pl-mint);
}
.pdp-rating__stars {
  color: var(--pl-mint);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.pdp-rating__score {
  font-weight: 600;
  color: var(--pl-ink-soft);
  font-size: 0.9rem;
}

.pdp-info__desc {
  color: var(--pl-ink-soft);
  margin-bottom: 1.1rem;
}
.pdp-info__desc a {
  color: var(--pl-primary);
  font-weight: 600;
}
.pdp-info__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.pdp-info__points {
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.55rem;
}
.pdp-info__points li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--pl-ink-soft);
  font-size: 0.96rem;
}
.pdp-info__points i {
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--pl-mint);
}
.pdp-info__points a {
  color: var(--pl-primary);
  font-weight: 600;
}

/* Build your own box */
.pdp-build {
  background: var(--pl-cream);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.5rem;
}
.pdp-build__title {
  font-family: var(--pl-font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.pdp-build__title i {
  color: var(--pl-primary);
}
.pdp-build p {
  color: var(--pl-muted);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}
.pdp-build__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* =============================================================
   QUICK QUOTE / PRESETS
   ============================================================= */
.pdp-quote {
  background: var(--pl-cream);
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  margin-top: 1.25rem;
}
.pdp-quote__head {
  margin-bottom: 2rem;
}
.pdp-quote__head .section__title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.pdp-quote__head .section__sub {
  margin-top: 0.35rem;
  font-size: 0.98rem;
}

.preset-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.5rem;
  box-shadow: var(--pl-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.preset-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
}
.preset-card__head {
  margin-bottom: 0.85rem;
}
.preset-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--pl-radius-pill);
}
.preset-card__badge--pop {
  background: rgba(255, 176, 32, 0.15);
  color: #b5790a;
}
.preset-card__badge--shape {
  background: rgba(20, 22, 28, 0.12);
  color: var(--pl-primary);
}
.preset-card__badge--foil {
  background: rgba(20, 22, 28, 0.12);
  color: var(--pl-accent);
}
.preset-card__desc {
  color: var(--pl-muted);
  font-size: 0.9rem;
  min-height: 4.4rem;
  margin-bottom: 1rem;
}
.preset-card__label {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.preset-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
.preset-table td {
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--pl-line);
  font-size: 0.95rem;
  font-weight: 600;
}
.preset-table tr:last-child td {
  border-bottom: 0;
}
.preset-table__price {
  text-align: right;
  color: var(--pl-primary);
}
.preset-card__foot {
  text-align: right;
  color: var(--pl-muted);
  font-size: 0.8rem;
  margin: 0 0 1rem;
}
.preset-card .btn {
  margin-top: auto;
}

/* =============================================================
   SUB NAV (sticky anchor tabs)
   ============================================================= */
.pdp-subnav {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-top: 1px solid var(--pl-line);
  border-bottom: 1px solid var(--pl-line);
}
/* Once the sub-nav is pinned to the top, hand off from the main header:
   the header stops being fixed (scrolls away) and the sub-nav sits on top. */
body.subnav-stuck .site-header {
  position: static;
}
body.subnav-stuck .pdp-subnav {
  z-index: 1040;
}
.pdp-subnav__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdp-subnav__list::-webkit-scrollbar {
  display: none;
}
.pdp-subnav__list a {
  display: block;
  padding: 1rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-muted);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pdp-subnav__list a:hover {
  color: var(--pl-ink);
}
.pdp-subnav__list a.is-active {
  color: var(--pl-primary);
  border-bottom-color: var(--pl-primary);
}

/* =============================================================
   OUR STOCKS
   ============================================================= */
.pdp-stocks__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pdp-stocks__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-pill {
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--pl-radius-pill);
  transition: all 0.2s;
}
.pdp-pill:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.pdp-pill.is-active {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}
.pdp-pill--outline.is-active {
  background: #fff;
  color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.pdp-stocks__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pdp-stocks__count {
  color: var(--pl-muted);
  font-size: 0.88rem;
}
.pdp-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-primary);
  box-shadow: var(--pl-shadow-sm);
  transition: all 0.25s;
}
.pdp-arrow:hover {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
  transform: scale(1.06);
}
.pdp-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pdp-stocks__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.pdp-stocks__track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 992px) {
  .pdp-stocks__track {
    grid-auto-columns: calc((100% - 5rem) / 6);
  }
}

/* Once Slick takes over, drop the native grid/scroll layout and add
   per-slide gutters (with room for the card's hover lift). */
.pdp-stocks__track.slick-initialized {
  display: block;
  overflow: visible;
  padding-bottom: 0;
}
.pdp-stocks__track .slick-list {
  margin: 0 -0.75rem;
  padding: 6px 0;
}
.pdp-stocks__track .slick-track {
  display: flex;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}
.pdp-stocks__track .slick-slide {
  height: auto;
  padding:0.5rem;
}
.pdp-stocks__track .slick-slide > .stock-card {
  height: 100%;
}
.pdp-arrow.slick-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pdp-arrow.slick-disabled:hover {
  background: #fff;
  border-color: var(--pl-line);
  color: var(--pl-ink);
}

.stock-card {
  position: relative;
  background: var(--pl-cream);
  border:5px solid #fff;
  border-radius: var(--pl-radius);
  padding:;
  transition: box-shadow 0.25s, transform 0.25s;
}
.stock-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow-sm);
}
.stock-card__swatch {
  aspect-ratio: 1 / 1;
  border-radius: var(--pl-radius-sm);
  background: var(--pl-cream) center/cover no-repeat;
  margin-bottom: 0.85rem;
}
.stock-card__fav {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pl-ink);
  font-size: 0.85rem;
  transition: color 0.2s;
}
.stock-card__fav:hover {
  color: var(--pl-amber);
}
.stock-card__title {
  font-family: var(--pl-font-ui);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.stock-card__desc {
  color: var(--pl-muted);
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.5;
}

/* =============================================================
   GUIDE TO PERFECT PRINT
   ============================================================= */
.pdp-guide {
  background: var(--pl-cream);
}
.guide-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.75rem;
  box-shadow: var(--pl-shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
}
.guide-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--pl-radius);
  background: rgba(20, 22, 28, 0.1);
  color: var(--pl-primary);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.guide-card__title {
  font-family: var(--pl-font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.guide-card p {
  color: var(--pl-muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.guide-card__link {
  font-weight: 600;
  color: var(--pl-link);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.guide-card__link:hover {
  gap: 0.6rem;
  color: var(--pl-link);
}

/* =============================================================
   BEAUTIFUL FINISHES BANNER
   ============================================================= */
.pdp-finishes {
  padding: clamp(1rem, 2vw, 1.75rem) 0;
}
.pdp-finishes__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--pl-radius);
  overflow: hidden;
  box-shadow: var(--pl-shadow-sm);
}
.pdp-finishes__copy {
  background: var(--pl-line);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pdp-finishes__copy h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--pl-ink);
  margin-bottom: 0.85rem;
}
.pdp-finishes__copy p {
  color: var(--pl-ink-soft);
  margin-bottom: 1.5rem;
}
.pdp-finishes__btn {
  align-self: flex-start;
  border-radius: var(--pl-radius-pill);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
}
.pdp-finishes__media {
  min-height: 260px;
}
.pdp-finishes__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .pdp-finishes__inner {
    grid-template-columns: 1fr;
  }
  .pdp-finishes__media {
    order: -1;
    min-height: 200px;
  }
}

/* =============================================================
   MORE INFORMATION
   ============================================================= */
.pdp-more__text {
  max-width: 60rem;
  margin-bottom: 2rem;
}
.pdp-more__text p {
  color: var(--pl-ink-soft);
}
.info-card {
  display: block;
}
.info-card__thumb {
  position: relative;
  display: block;
  border-radius: var(--pl-radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.65rem;
}
.info-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.info-card:hover .info-card__thumb img {
  transform: scale(1.06);
}
.info-card__tag {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--pl-radius-pill);
  color: #fff;
}
.info-card__tag--read {
  background: var(--pl-primary);
}
.info-card__tag--watch {
  background: var(--pl-accent);
}
.info-card__title {
  display: block;
  font-weight: 600;
  color: var(--pl-ink);
  transition: color 0.2s;
}
.info-card:hover .info-card__title {
  color: var(--pl-primary);
}

/* =============================================================
   FAQ
   ============================================================= */
.pdp-faq {
  background: var(--pl-cream);
}
.pdp-faq__list {
  display: grid;
  gap: 0.6rem;
}
.faq-q {
  position: relative;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.9rem 2.5rem 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-ink-soft);
  transition: all 0.2s;
}
.faq-q::after {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--pl-muted);
  transition: transform 0.2s;
}
.faq-q:hover {
  border-color: var(--pl-primary);
  color: var(--pl-ink);
}
.faq-q.is-active {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}
.faq-q.is-active::after {
  color: #fff;
  transform: translateY(-50%) rotate(90deg);
}

.pdp-faq__panel {
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
}
.faq-a {
  display: none;
}
.faq-a.is-active {
  display: block;
  animation: faqfade 0.3s ease;
}
@keyframes faqfade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-a h3 {
  font-family: var(--pl-font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.faq-a p {
  color: var(--pl-ink-soft);
  font-size: 0.95rem;
}
.faq-a a {
  color: var(--pl-primary);
  font-weight: 600;
}

@media (max-width: 991px) {
  .pdp-subnav {
    top: 0;
  }
}

/* ---------- Related products slider ---------- */
.related-slider {
  position: relative;
}
.related-slider .related-slider__slide {
  padding: 0 0.5rem;
  height: auto;
}
.related-slider .slick-track {
  display: flex;
}
.related-slider .slick-slide {
  height: auto;
}
.related-slider .slick-slide > div {
  height: 100%;
}
.related-slider .slick-prev,
.related-slider .slick-next {
  z-index: 2;
}
.related-slider .slick-prev {
  left: -8px;
}
.related-slider .slick-next {
  right: -8px;
}

/* =============================================================
   ORDER / BUILD-YOUR-OWN MODAL (slides in from the right)
   ============================================================= */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  visibility: hidden;
  pointer-events: none;
}
.order-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 20, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.order-modal.is-open .order-modal__backdrop {
  opacity: 1;
}

/* Panel: full-screen sheet that slides in from the right */
.order-modal__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 1080px;
  background: var(--pl-surface);
  box-shadow: -24px 0 60px -30px rgba(14, 16, 20, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.order-modal.is-open .order-modal__panel {
  transform: translateX(0);
}

/* Header */
.order-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--pl-line);
  background: var(--pl-surface);
}
.order-modal__title {
  font-family: var(--pl-font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin: 0;
}
.order-modal__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--pl-radius-pill);
  border: 1px solid var(--pl-line);
  background: #fff;
  color: var(--pl-ink);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.order-modal__close:hover {
  background: var(--pl-ink);
  color: #fff;
  transform: rotate(90deg);
}

/* Body: scrollable options + sticky summary */
.order-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
}
.order-modal__main {
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.order-modal__main::-webkit-scrollbar {
  width: 10px;
}
.order-modal__main::-webkit-scrollbar-thumb {
  background: var(--pl-line);
  border-radius: var(--pl-radius-pill);
}

/* A single build step */
.order-step {
  margin: 0;
}
.order-step__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--pl-font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}
.order-step__badge {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-line);
  color: var(--pl-ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-step__badge.is-done {
  background: var(--pl-mint);
  color: #fff;
}
.order-step__hint {
  color: var(--pl-muted);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

/* Option layouts */
.order-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.order-options--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.order-options--list {
  flex-direction: column;
  gap: 0.6rem;
}

/* Preset cards */
.order-card {
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 1rem 1.1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.order-card:hover {
  border-color: var(--pl-primary);
  box-shadow: var(--pl-shadow-sm);
}
.order-card.is-selected {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.14);
}
.order-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
}
.order-card__head i {
  color: var(--pl-primary);
}
.order-card__desc {
  color: var(--pl-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Image tiles (e.g. Type: Standard / Foiling) */
.order-options--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.order-tile {
  padding: 0;
  border: 2px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.order-tile:hover {
  border-color: var(--pl-ink);
  transform: translateY(-2px);
}
.order-tile.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.16);
}
.order-tile__media {
  aspect-ratio: 4 / 3;
  background: var(--pl-cream);
  overflow: hidden;
}
.order-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-tile__label {
  padding: 0.9rem 0.75rem;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  background: #fff;
}

/* Icon tiles (e.g. Orientation, Printed Sides) */
.order-options--icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}
.order-icard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-height: 150px;
  padding: 1.5rem 1rem 1rem;
  border: 2px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: #fff;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.order-icard:hover {
  border-color: var(--pl-ink);
  transform: translateY(-2px);
}
.order-icard.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.16);
}
.order-icard__icon {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-icard__label {
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}
.order-icard.is-disabled {
  color: var(--pl-muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.order-icard.is-disabled:hover {
  border-color: var(--pl-line);
  transform: none;
}
.order-icard__flag {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  color: var(--pl-ink-soft);
  font-size: 1.05rem;
  line-height: 1;
}

/* Small info glyph beside a step title */
.order-step__info {
  color: var(--pl-muted);
  font-size: 0.95rem;
  display: inline-flex;
  cursor: help;
}

/* Inline helper line under a step (e.g. talk to an expert) */
.order-step__help {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--pl-muted);
}
.order-step__help a {
  color: var(--pl-link);
  font-weight: 700;
}

/* Pills */
.order-pill {
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  padding: 0.6rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.order-pill:hover {
  border-color: var(--pl-primary);
}
.order-pill.is-selected {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}

/* ---------- Paper step: filters, tip, picker ---------- */
.paper-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.paper-filter {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}
.paper-filter--outline {
  border-color: var(--pl-ink);
  color: var(--pl-ink);
}
.paper-filter.is-selected {
  background: transparent;
  border-color: var(--pl-ink);
  color: var(--pl-ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.14);
}

.paper-tip {
  display: flex;
  gap: 0.6rem;
  background: var(--pl-cream);
  border-radius: var(--pl-radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.paper-tip__label {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--pl-ink);
}
.paper-tip__text {
  margin: 0;
  color: var(--pl-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.paper-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.paper-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.paper-item {
  border: 2px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.paper-item:hover {
  border-color: var(--pl-ink);
}
.paper-item.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.16);
}
.paper-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.paper-item__radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--pl-radius-pill);
  border: 2px solid var(--pl-line);
  position: relative;
  transition: border-color 0.2s;
}
.paper-item.is-selected .paper-item__radio {
  border-color: var(--pl-ink);
}
.paper-item.is-selected .paper-item__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-accent);
}
.paper-item__name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--pl-ink);
}
.paper-item.is-selected .paper-item__name {
  color: var(--pl-ink);
}
.paper-item__info {
  color: var(--pl-mint);
  font-size: 0.95rem;
  display: inline-flex;
}
.paper-item__body {
  padding: 0 1.1rem 1.1rem;
}
.paper-weights__label {
  margin: 0 0 0.7rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pl-ink);
}
.paper-weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.paper-weight {
  padding: 0.65rem 0.5rem;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.paper-weight:hover {
  border-color: var(--pl-ink);
}
.paper-weight.is-selected {
  border-color: var(--pl-ink);
  background: rgba(20, 22, 28, 0.08);
  color: var(--pl-ink);
}

.paper-preview {
  margin: 0;
  position: sticky;
  top: 1rem;
}
.paper-preview__media {
  position: relative;
  aspect-ratio: 6 / 5;
  border-radius: var(--pl-radius-sm);
  overflow: hidden;
  background: var(--pl-cream);
}
.paper-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.paper-preview__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--pl-radius-pill);
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pl-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--pl-shadow-sm);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.paper-preview__arrow:hover {
  background: var(--pl-accent);
  color: #fff;
}
.paper-preview__arrow--prev {
  left: 0.75rem;
}
.paper-preview__arrow--next {
  right: 0.75rem;
}
.paper-preview__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}
.paper-preview__dot {
  width: 22px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--pl-radius-pill);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.paper-preview__dot:hover {
  background: rgba(255, 255, 255, 0.9);
}
.paper-preview__dot.is-active {
  width: 28px;
  background: var(--pl-accent);
}
.paper-preview__caption {
  padding: 1rem 0.25rem 0;
}
.paper-preview__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.paper-preview__desc {
  margin: 0;
  color: var(--pl-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .paper-picker {
    grid-template-columns: 1fr;
  }
  .paper-preview {
    position: static;
  }
}

/* List rows */
.order-row {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.order-row:hover {
  border-color: var(--pl-primary);
}
.order-row.is-selected {
  border-color: var(--pl-primary);
  background: rgba(20, 22, 28, 0.06);
}

/* ---------- Quantity step ---------- */
.order-qty {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.order-qty__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.order-qty__custom-label {
  background: var(--pl-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--pl-radius-sm);
}
.order-qty__stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.order-qty__step {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--pl-radius-sm);
  background: var(--pl-primary);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.order-qty__step:hover {
  background: #5a2fd6;
}
.order-qty__step:active {
  transform: scale(0.94);
}
.order-qty__input {
  width: 88px;
  height: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pl-primary);
  border: 1.5px solid var(--pl-primary);
  border-radius: var(--pl-radius-sm);
  background: #fff;
}
.order-qty__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.16);
}
/* Hide native number spinners */
.order-qty__input::-webkit-outer-spin-button,
.order-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-qty__input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.order-qty__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.qty-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qty-option:hover {
  border-color: var(--pl-ink);
}
.qty-option.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 2px rgba(20, 22, 28, 0.16);
}
.qty-option__num {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--pl-ink);
}
.qty-option__price {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--pl-primary);
}
@media (max-width: 560px) {
  .order-qty__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Extras step ---------- */
.order-step__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}
.order-step__bar .order-step__title {
  margin: 0;
}
.order-extras__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pl-ink-soft);
  cursor: pointer;
  transition: color 0.2s;
}
.order-extras__toggle:hover {
  color: var(--pl-primary);
}
.order-extras__toggle i {
  font-size: 1.05rem;
}
.order-extras.is-collapsed .order-extras__body {
  display: none;
}

.order-substep__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--pl-font-ui);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.5rem 0 0.9rem;
}
.order-options--extras .order-icard {
  min-height: 132px;
  gap: 0.75rem;
}
.order-icard__icon--fill svg {
  display: block;
}

/* Explanatory note box (e.g. perforation) */
.order-note {
  background: var(--pl-cream);
  border-radius: var(--pl-radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  color: var(--pl-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.order-note p {
  margin: 0;
}
.order-note p + p {
  margin-top: 0.85rem;
}

/* Perforation picker: list + preview */
.perf-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.perf-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.perf-row:hover {
  border-color: var(--pl-ink);
}
.perf-row.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 2px rgba(20, 22, 28, 0.16);
}
.perf-row__flag {
  flex: 0 0 auto;
  color: var(--pl-ink-soft);
  font-size: 1.05rem;
  line-height: 1;
}
.perf-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: var(--pl-cream);
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 1.5rem;
  text-align: center;
}
.perf-preview__placeholder {
  margin: 0;
  color: var(--pl-muted);
  font-size: 0.95rem;
}
.perf-preview__diagram {
  margin: 0;
  width: 100%;
  max-width: 260px;
}
.perf-preview__caption {
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pl-ink);
}
@media (max-width: 640px) {
  .perf-picker {
    grid-template-columns: 1fr;
  }
  .perf-preview {
    min-height: 140px;
  }
}

/* ---------- Delivery step ---------- */
.order-substep__title--plain {
  font-weight: 600;
  color: var(--pl-ink-soft);
  margin: 0 0 0.75rem;
}
.order-delivery {
  gap: 1rem;
}
.order-choice {
  min-width: 200px;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 0.9rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pl-ink);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.order-choice:hover {
  border-color: var(--pl-ink);
}
.order-choice.is-selected {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 2px rgba(20, 22, 28, 0.16);
}

/* ---------- Checkout footer bar ---------- */
.order-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--pl-cream);
  border-top: 1px solid var(--pl-line);
}
.order-footer__totals {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.order-footer__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.95rem;
}
.order-footer__label {
  font-weight: 700;
  color: var(--pl-ink);
  min-width: 108px;
}
.order-footer__value {
  font-weight: 700;
  color: var(--pl-ink);
}
.order-footer__vat,
.order-footer__unit {
  color: var(--pl-muted);
  font-size: 0.88rem;
}
.order-footer__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.order-footer__basket,
.order-footer__upload {
  border-radius: var(--pl-radius-btn);
  padding: 0.65rem 1.35rem;
  font-weight: 550;
  font-size: 0.92rem;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease),
    color var(--pl-dur) var(--pl-ease);
}
.order-footer__basket {
  background: var(--pl-surface);
  border: 1px solid var(--pl-line-strong);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow-xs);
}
.order-footer__basket:hover {
  background: var(--pl-cream);
  color: var(--pl-ink);
}
.order-footer__upload {
  background: var(--pl-primary);
  border: 1px solid var(--pl-primary);
  color: #fff;
  box-shadow: var(--pl-shadow-xs);
}
.order-footer__upload:hover {
  background: var(--pl-primary-dark);
  border-color: var(--pl-primary-dark);
}
@media (max-width: 640px) {
  .order-footer {
    justify-content: center;
    text-align: center;
  }
  .order-footer__actions {
    width: 100%;
    justify-content: center;
  }
  .order-choice {
    flex: 1 1 auto;
  }
}

/* ---------- Size step: list + live dimension preview ---------- */
.order-size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}
.order-size__list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.order-size__preview {
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.75rem 1.5rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

/* Diagram grid: width measure on top, height measure to the left of the box */
.size-diagram__grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    ".  xm"
    "ym bx";
  align-items: center;
  justify-items: center;
  gap: 0.6rem 0.7rem;
}
.size-diagram__box {
  width: 160px;
  height: 110px;
  background: #eef4f1;
  border: 1px solid #cdd8d3;
  border-radius: 2px;
}

/* Measurement lines with arrowheads */
.msr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pl-ink-soft);
}
.msr--x {
  width: 160px;
  height: 20px;
}
.msr--y {
  height: 110px;
  width: 20px;
}
.msr__line {
  position: absolute;
  background: var(--pl-muted);
}
.msr--x .msr__line {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.msr--y .msr__line {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
.msr__line::before,
.msr__line::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
/* Horizontal arrowheads */
.msr--x .msr__line::before {
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--pl-muted);
}
.msr--x .msr__line::after {
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--pl-muted);
}
/* Vertical arrowheads */
.msr--y .msr__line::before {
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--pl-muted);
}
.msr--y .msr__line::after {
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--pl-muted);
}
.msr__val {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.msr--y .msr__val {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0.4rem 0;
}

/* mm / cm / Inch segmented toggle */
.size-units {
  display: inline-flex;
  background: #f0eef5;
  border-radius: var(--pl-radius-pill);
  padding: 4px;
  gap: 2px;
}
.size-units__btn {
  border: 0;
  background: transparent;
  border-radius: var(--pl-radius-pill);
  padding: 0.45rem 1.15rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pl-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.size-units__btn.is-active {
  background: #fff;
  color: var(--pl-ink);
  box-shadow: 0 1px 4px rgba(14, 16, 20, 0.15);
}

@media (max-width: 620px) {
  .order-size {
    grid-template-columns: 1fr;
  }
}

/* Summary sidebar */
.order-summary {
  border-left: 1px solid var(--pl-line);
  background: var(--pl-cream);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.order-summary__title {
  font-family: var(--pl-font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

/* Totals block */
.order-summary__totals {
  margin-bottom: 1rem;
}
.order-summary__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}
.order-summary__total-label {
  font-weight: 700;
  color: var(--pl-ink);
  font-size: 0.95rem;
}
.order-summary__total-value {
  font-weight: 700;
  color: var(--pl-ink);
  font-size: 1.05rem;
}
.order-summary__vat {
  margin: 0.1rem 0 0.55rem;
  text-align: right;
  color: var(--pl-muted);
  font-size: 0.8rem;
}

/* Action buttons */
.order-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.order-summary__basket,
.order-summary__upload {
  width: 100%;
  border-radius: var(--pl-radius-btn);
  padding: 0.65rem 1.2rem;
  font-weight: 550;
  font-size: 0.92rem;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease),
    color var(--pl-dur) var(--pl-ease),
    opacity var(--pl-dur) var(--pl-ease);
}
.order-summary__basket {
  background: var(--pl-surface);
  border: 1px solid var(--pl-line-strong);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow-xs);
}
.order-summary__basket:hover:not(:disabled) {
  background: var(--pl-cream);
  color: var(--pl-ink);
}
.order-summary__basket:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.order-summary__upload {
  background: var(--pl-primary);
  border: 1px solid var(--pl-primary);
  color: #fff;
  box-shadow: var(--pl-shadow-xs);
}
.order-summary__upload:hover {
  background: var(--pl-primary-dark);
  border-color: var(--pl-primary-dark);
}

/* Checklist */
.order-summary__list {
  margin: 0;
  flex: 1 1 auto;
  border-top: 1px solid var(--pl-line);
}
.order-summary__list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--pl-line);
  font-size: 0.92rem;
}
.order-summary__check {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--pl-line);
}
.order-summary__list li.is-done .order-summary__check {
  color: var(--pl-mint);
}
.order-summary__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.order-summary__label {
  color: var(--pl-muted);
  font-size: 0.82rem;
}
.order-summary__value {
  font-weight: 700;
  color: var(--pl-ink);
}
.order-summary__edit {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0.2rem;
  color: var(--pl-link);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s;
}
.order-summary__edit:hover {
  transform: scale(1.12);
}

/* Footer links */
.order-summary__foot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
}
.order-summary__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: none;
  padding: 0.4rem 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--pl-ink-soft);
  cursor: pointer;
  transition: color 0.2s;
}
.order-summary__link:hover {
  color: var(--pl-primary);
}
.order-summary__link i {
  font-size: 1.05rem;
}
.order-summary__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Lock page scroll while modal is open */
body.order-open {
  overflow: hidden;
}

/* Responsive */
@media (max-width: 860px) {
  .order-modal__body {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  .order-summary {
    border-left: none;
    border-top: 1px solid var(--pl-line);
  }
  .order-options--cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-modal__panel {
    transition: none;
  }
  .order-modal__backdrop {
    transition: none;
  }
}

/* =============================================================
   SAME DAY PRINTING — three-column image + title cards
   ============================================================= */
.sameday-card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--pl-radius);
  overflow: hidden;
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.sameday-card:hover,
.sameday-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
  color: inherit;
}
.sameday-card:focus-visible {
  outline: 2px solid var(--pl-primary);
  outline-offset: 3px;
}

.sameday-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sameday-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.sameday-card:hover .sameday-card__img,
.sameday-card:focus-within .sameday-card__img {
  transform: scale(1.08);
}

.sameday-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sameday-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.2rem 1.15rem;
}
.sameday-card__title {
  margin: 0;
  font-family: var(--pl-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pl-ink);
}
.sameday-card__body i {
  color: var(--pl-primary);
  transition: transform 0.25s;
}
.sameday-card:hover .sameday-card__body i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .sameday-card,
  .sameday-card__img,
  .sameday-card__body i {
    transition: none;
  }
  .sameday-card:hover {
    transform: none;
  }
  .sameday-card:hover .sameday-card__img {
    transform: none;
  }
}

/* =============================================================
   Same Day Printing — details page
   Scoped .sdp-* components. Depends on tokens in css/styles.css
   ============================================================= */

.sdp { background: var(--pl-surface); }

/* ---------- Hero ---------- */
.sdp-hero {
  background: var(--pl-cream);
  padding: 1.375rem 0 1.75rem;
  border-bottom: 1px solid var(--pl-line);
}
.sdp-back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--pl-primary);
  margin-bottom: 1.1rem;
}
.sdp-back:hover { color: var(--pl-primary-dark); }
.sdp-hero__title {
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  font-weight: 600; margin-bottom: 1rem;
}
.sdp-hero__lead {
  color: var(--pl-ink-soft); max-width: 34rem; margin-bottom: 1.6rem;
}
.sdp-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.sdp-btn-ghost {
  background: #fff; border: 1px solid var(--pl-line);
  color: var(--pl-ink); font-weight: 600;
}
.sdp-btn-ghost:hover { border-color: var(--pl-primary); color: var(--pl-primary); }

.sdp-hero__media {
  border-radius: var(--pl-radius); overflow: hidden;
  box-shadow: var(--pl-shadow);
}
.sdp-hero__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.sdp-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: 1rem; margin: -1.75rem 1.25rem 0; position: relative;
  box-shadow: var(--pl-shadow-sm);
}
.sdp-spec { display: flex; flex-direction: column; gap: .3rem; }
.sdp-spec__label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pl-muted); font-weight: 600;
}
.sdp-spec__value { font-size: .9rem; font-weight: 600; color: var(--pl-ink); }

/* ---------- Configurator ---------- */
.sdp-configure { background: var(--pl-cream); padding: 1.75rem 0; }
.sdp-configure__head { margin-bottom: 1.5rem; }
.sdp-configure__title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; }
.sdp-configure__sub { color: var(--pl-muted); font-size: .92rem; margin: 0; }

.sdp-panel {
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius); padding: 1.75rem;
  box-shadow: var(--pl-shadow-sm);
}
.sdp-field__label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--pl-ink-soft); margin-bottom: .6rem;
}
.sdp-field__label em { color: var(--pl-accent); font-style: normal; }

.sdp-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.sdp-pill {
  border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink);
  border-radius: var(--pl-radius-pill); padding: .38rem 1rem;
  font-size: .84rem; font-weight: 500; line-height: 1.4;
  transition: all .18s ease;
}
.sdp-pill:hover { border-color: var(--pl-primary); color: var(--pl-primary); }
.sdp-pill.is-active {
  background: var(--pl-primary); border-color: var(--pl-primary);
  color: #fff;
}

.sdp-custom {
  display: flex; align-items: center; gap: .6rem; margin-top: .85rem;
}
.sdp-custom .form-control {
  max-width: 8rem; border-radius: var(--pl-radius-sm);
  border-color: var(--pl-line);
}
.sdp-custom span { color: var(--pl-muted); font-size: .85rem; }

.sdp-summary {
  margin-top: 1.5rem; border-top: 1px solid var(--pl-line); padding-top: 1.5rem;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center;
  background: var(--pl-cream); border-radius: var(--pl-radius-sm);
  padding: 1.4rem;
}
.sdp-summary__eyebrow {
  display: block; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pl-muted);
  font-weight: 600; margin-bottom: .8rem;
}
.sdp-summary dl { margin: 0; }
.sdp-summary dl > div {
  display: flex; justify-content: space-between;
  padding: .32rem 0; font-size: .85rem;
}
.sdp-summary dt { color: var(--pl-muted); font-weight: 500; }
.sdp-summary dd { margin: 0; font-weight: 600; color: var(--pl-ink); }

.sdp-summary__price { text-align: right; }
.sdp-price {
  font-family: var(--pl-font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700;
  color: var(--pl-ink); margin-bottom: .8rem;
}
.sdp-addcart { width: 100%; padding: .75rem 1.4rem; }
.sdp-addcart i { margin-right: .4rem; }

.sdp-bespoke {
  margin-top: 1.2rem; border: 1px dashed var(--pl-line);
  border-radius: var(--pl-radius-sm); padding: 1rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.sdp-bespoke strong { font-size: .88rem; }
.sdp-bespoke p { margin: .15rem 0 0; font-size: .8rem; color: var(--pl-muted); }
.sdp-bespoke__btn {
  border: 1px solid var(--pl-line); border-radius: var(--pl-radius-pill);
  padding: .42rem 1.05rem; font-size: .8rem; font-weight: 600;
  background: #fff; color: var(--pl-ink); white-space: nowrap;
}
.sdp-bespoke__btn:hover { border-color: var(--pl-primary); color: var(--pl-primary); }

/* ---------- Copy ---------- */
.sdp-copy { padding: 2rem 0; text-align: center; }
.sdp-copy__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600;
  margin: .5rem 0 1.6rem;
}
.sdp-copy__body { max-width: 46rem; margin-inline: auto; }
.sdp-copy__body p {
  color: var(--pl-ink-soft); margin-bottom: 1.1rem; font-size: .95rem;
}

/* ---------- Related ---------- */
.sdp-related { background: var(--pl-cream); padding: 1.75rem 0; }
.sdp-related__title {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; margin-bottom: 1.75rem;
}

/* ---------- Reviews ---------- */
.sdp-reviews { padding: 2rem 0; text-align: center; }
.sdp-reviews__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600;
  margin: .5rem 0 2rem;
}
.sdp-reviews__track { max-width: 42rem; margin-inline: auto; }
.sdp-review {
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius); padding: 2.25rem 2rem;
  box-shadow: var(--pl-shadow-sm);
}
/* Show only the first card until slick initialises, so they never flash stacked */
.sdp-reviews__track:not(.slick-initialized) .sdp-review { display: none; }
.sdp-reviews__track:not(.slick-initialized) .sdp-review:first-child { display: block; }
/* slick-list clips overflow, which would cut the card's shadow */
.sdp-reviews__track .slick-list { padding: 6px; margin: -6px; }
.sdp-reviews__track .slick-track { display: flex; align-items: stretch; }
.sdp-reviews__track .slick-slide { height: auto; }
.sdp-review__mark { font-size: 1.6rem; color: var(--pl-primary); }
.sdp-review__text {
  font-size: 1rem; color: var(--pl-ink-soft);
  margin: 1rem auto 1.4rem; max-width: 34rem;
}
.sdp-review__stars { color: var(--pl-primary); font-size: .95rem; letter-spacing: .18rem; }
.sdp-review__name {
  margin: 1rem 0 .1rem; font-weight: 600; font-size: .88rem;
}
.sdp-review__name i { color: var(--pl-mint); }
.sdp-review__verified { font-size: .75rem; color: var(--pl-muted); margin: 0; }

.sdp-review__nav {
  display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem;
}
.sdp-review__arrow {
  width: 2.4rem; height: 2.4rem; border-radius: var(--pl-radius-pill);
  border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.sdp-review__arrow:hover {
  border-color: var(--pl-primary); color: var(--pl-primary);
}

/* ---------- CTA ---------- */
.sdp-cta { padding: 0 0 2.25rem; }
.sdp-cta__card {
  background: var(--pl-cream); border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius); padding: 2.75rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
}
.sdp-cta__title {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 600; margin: .5rem 0 .9rem;
}
.sdp-cta__text { color: var(--pl-ink-soft); font-size: .92rem; margin: 0; max-width: 32rem; }
.sdp-cta__actions {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .sdp-specs { margin-inline: 0; }
  .sdp-summary { grid-template-columns: 1fr; }
  .sdp-summary__price { text-align: left; }
  .sdp-cta__card { grid-template-columns: 1fr; padding: 2rem; }
  .sdp-cta__actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .sdp-specs { grid-template-columns: 1fr; }
  .sdp-panel { padding: 1.25rem; }
  .sdp-bespoke { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   Same Day Category — details page
   Scoped .sdc-* / .cat-tile components.
   Depends on the :root tokens in css/styles.css — load after it.
   ============================================================= */

.sdc { background: var(--pl-surface); }

/* ---------- Top section ---------- */
.sdc-top {
  background: var(--pl-cream);
  padding: 1.125rem 0 2rem;
}
.sdc-back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--pl-primary);
  margin-bottom: 1.25rem;
}
.sdc-back:hover { color: var(--pl-primary-dark); }

.sdc-head { max-width: 100%; margin-bottom: 2.25rem; }
.sdc-head__title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 600; margin-bottom: .9rem;
}
.sdc-head__lead { color: var(--pl-ink-soft); margin: 0; }

/* ---------- Left column ---------- */
.sdc-media {
  border-radius: var(--pl-radius); overflow: hidden;
  background: var(--pl-cream); margin-bottom: 2rem;
  box-shadow: var(--pl-shadow-sm);
}
.sdc-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

.sdc-statement {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--pl-ink-soft);
  text-wrap: pretty;
  max-width: 46ch;
  margin-bottom: var(--pl-space-lg);
}
.sdc-prose p {
  color: var(--pl-ink-soft); font-size: .92rem; margin-bottom: 1rem;
}
.sdc-subhead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: var(--pl-space-xl) 0 var(--pl-space-sm);
}
.sdc-quote {
  border-left: 3px solid var(--pl-primary);
  padding-left: 1.25rem; margin: 0;
}
.sdc-quote p {
  color: var(--pl-ink-soft); font-size: .9rem; margin-bottom: 1rem;
}
.sdc-quote p:last-child { margin-bottom: 0; }

/* ---------- Right rail (sticky) ---------- */
.sdc-rail {
  position: sticky; top: calc(var(--subnav-h) + 1rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.sdc-card {
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm); padding: 1.1rem;
  box-shadow: var(--pl-shadow-sm);
}

/* Actions */
.sdc-actions { display: flex; flex-direction: column; gap: .6rem; }
.sdc-actions__primary { width: 100%; padding: .7rem 1.2rem; }
.sdc-actions__secondary {
  display: block; text-align: center; width: 100%;
  border: 1px solid var(--pl-line-strong);
  border-radius: var(--pl-radius-btn);
  padding: .65rem 1.2rem; font-size: .9rem; font-weight: 550;
  color: var(--pl-ink); background: var(--pl-surface);
  box-shadow: var(--pl-shadow-xs);
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease);
}
.sdc-actions__secondary:hover {
  background: var(--pl-cream); border-color: var(--pl-line-strong);
}

/* Info notes */
.sdc-note { background: var(--pl-cream); }
.sdc-note__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pl-primary); font-weight: 600; margin-bottom: .6rem;
}
.sdc-note p {
  margin: 0; font-size: .84rem; color: var(--pl-ink-soft);
}
.sdc-note strong { color: var(--pl-ink); }

.sdc-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.sdc-tag {
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill); padding: .3rem .8rem;
  font-size: .78rem; font-weight: 500; color: var(--pl-ink);
}

/* ---------- Form ----------
   Labels, fields, dropzone, file list and form messages all come from the
   shared UI kit (see "UI KIT — FORM ELEMENTS"); only the width of the
   branch select and the full-width submit are specific to this page. */
.sdc-select { max-width: 14rem; }

.sdc-submit { width: 100%; padding: .72rem 1.4rem; }
.sdc-submit i { margin-right: .4rem; }

/* ---------- Categories grid ---------- */
.sdc-categories {
  background: var(--pl-cream);
  border-top: 1px solid var(--pl-line);
  padding: 1.75rem 0 2.25rem;
}
.sdc-categories__head { margin-bottom: 2rem; }
.sdc-categories__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; margin-bottom: .4rem;
}
.sdc-categories__sub { color: var(--pl-muted); font-size: .9rem; margin: 0; }

.cat-tile {
  background: #fff; border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm); overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
  border-color: var(--pl-primary);
}
.cat-tile.is-current { border-color: var(--pl-primary); }

.cat-tile__media {
  position: relative; display: block;
  background: var(--pl-cream); overflow: hidden;
}
.cat-tile__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s ease;
}
.cat-tile:hover .cat-tile__media img { transform: scale(1.05); }
.cat-tile__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, rgba(14, 16, 20, 0) 0%, rgba(14, 16, 20, .72) 100%);
}
.cat-tile__title {
  position: absolute; left: 1rem; right: 1rem; bottom: .85rem; z-index: 1;
  color: #fff; font-size: 1rem; font-weight: 600; margin: 0;
}

.cat-tile__foot { padding: .9rem 1rem; margin-top: auto; }
.cat-tile__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--pl-primary); color: #fff;
  border-radius: var(--pl-radius-pill); padding: .38rem 1rem;
  font-size: .78rem; font-weight: 600;
  transition: background .18s ease;
}
.cat-tile__btn:hover { background: var(--pl-primary-dark); color: #fff; }
.cat-tile__btn i { font-size: .72rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .sdc-rail { position: static; margin-top: 1rem; }
  .sdc-select { max-width: 100%; }
  .sdc-top { padding-bottom: 3rem; }
}
@media (max-width: 575.98px) {
  .sdc-card { padding: 1rem; }
  .sdc-quote { padding-left: 1rem; }
}
/* =============================================================
   Bespoke Quote — request page
   Scoped .bq-* components.
   Depends on the :root tokens in css/styles.css — load after it.
   ============================================================= */

.bq {
  background: var(--pl-cream);
  padding: 3rem 0 3.5rem;
}

/* Centered single column */
.bq-shell {
  max-width: 42rem;
  margin-inline: auto;
}

/* ---------- Standard prints shortcut ---------- */
.bq-standard {
  background: rgba(20, 22, 28, .05);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.6rem;
  margin-bottom: 1rem;
}
.bq-standard__title {
  font-family: var(--pl-font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pl-ink);
  margin-bottom: .5rem;
}
.bq-standard__lead {
  font-size: .86rem;
  color: var(--pl-ink-soft);
  margin-bottom: 1.1rem;
}

.bq-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.bq-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  padding: .45rem 1rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pl-ink);
  transition: all .18s ease;
}
.bq-link:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
  transform: translateY(-1px);
}
.bq-link i { font-size: .78rem; }

.bq-assist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.25rem;
}
.bq-assist__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  padding: .5rem 1.1rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--pl-ink);
  transition: all .18s ease;
}
.bq-assist__btn i { color: var(--pl-primary); }
.bq-assist__btn:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.bq-assist__hint {
  font-size: .8rem;
  color: var(--pl-muted);
}

/* ---------- Form card ----------
   .bq-card is an alias of the shared .ui-card--lg surface and .ui-form field
   set (see "UI KIT"); the dropzone, file list and form message are shared
   components too. Only the widths below are specific to this page. */

/* Branch select sits narrow, as in the reference */
.bq-select { max-width: 12rem; }

/* ---------- Submit ---------- */
.bq-submit {
  width: 100%;
  padding: .85rem 1.4rem;
  font-size: .95rem;
  margin-top: .5rem;
}
.bq-submit i { margin-right: .45rem; }

/* ---------- Phone fallback ---------- */
.bq-phone {
  text-align: center;
  font-size: .88rem;
  color: var(--pl-ink-soft);
  margin: 1.75rem 0 0;
}
.bq-phone a {
  color: var(--pl-primary);
  font-weight: 700;
}
.bq-phone a:hover { color: var(--pl-primary-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .bq { padding: 2rem 0 2.5rem; }
  .bq-standard { padding: 1.2rem; }
  .bq-card { padding: 1.35rem; }
  .bq-select { max-width: 100%; }
  .bq-assist { gap: .6rem; }
}
/* =============================================================
   UI KIT — one source of truth for the reusable interface
   -------------------------------------------------------------
   Everything below is shared by every page. If two elements look
   the same anywhere on the site they use the class defined here;
   page sections only add layout, never a second copy of a style.
   Legacy page-specific names (.section__title, .bq-card, .sdc-drop
   ...) are listed as aliases on the canonical rule so existing
   markup keeps working without duplicating a single declaration.
   ============================================================= */

/* -------------------------------------------------------------
   1. TYPOGRAPHY
   ------------------------------------------------------------- */

/* Page heading — one per page, the <h1>. */
.page-heading,
.collection__title {
  font-family: var(--pl-font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--pl-ink);
  text-wrap: balance;
  margin: 0 0 var(--pl-space-xs);
}

/* Section heading — the <h2> that opens a band of content. */
.section-heading,
.section__title {
  font-family: var(--pl-font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--pl-ink);
  text-wrap: balance;
  margin: 0;
}

/* Sub heading — the <h3> that titles a card, panel or group. */
.sub-heading {
  font-family: var(--pl-font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--pl-ink);
  margin: 0 0 var(--pl-space-2xs);
}
.sub-heading--sm {
  font-size: 1rem;
}

/* Eyebrow — the small coloured kicker above a heading. */
.eyebrow,
.section__eyebrow {
  display: inline-block;
  font-family: var(--pl-font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--pl-muted);
  margin-bottom: var(--pl-space-xs);
}

/* Lead text — the intro paragraph under a section heading. */
.lead-text,
.section__sub {
  color: var(--pl-muted);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.008em;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0.75rem 0 0;
}

/* Page intro — the paragraph under a page heading. */
.page-intro,
.collection__intro {
  color: var(--pl-muted);
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

/* Body + small copy. */
.body-text {
  color: var(--pl-ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 var(--pl-space-sm);
}
.small-text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--pl-muted);
  margin: 0;
}
.meta-text {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: 0;
}
.price-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
}
.price-text--lg {
  font-size: 1.45rem;
}

/* The unit that follows a price: "/ month", "each", "exc. VAT". */
.price-period {
  font-size: 0.85rem;
  color: var(--pl-muted);
  font-weight: 600;
}
.text-strike {
  color: var(--pl-muted);
  text-decoration: line-through;
  font-weight: 500;
}

/* Text link inside body copy. */
.ui-link {
  color: var(--pl-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--pl-link) 35%, transparent);
  border-radius: var(--pl-radius-xs);
  transition:
    color var(--pl-dur) var(--pl-ease),
    text-decoration-color var(--pl-dur) var(--pl-ease);
}
.ui-link:hover {
  color: var(--pl-link-dark);
  text-decoration-color: currentColor;
}

/* Page head — breadcrumb sits above, heading + intro inside. */
.page-head,
.collection__head {
  margin: 0.75rem 0 var(--pl-space-lg);
}
.page-head--center {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.page-head--center .page-intro {
  margin-inline: auto;
}

/* -------------------------------------------------------------
   2. BUTTONS
   The variants themselves are defined once, in the base layer near
   the top of this file. This section used to redeclare .btn-secondary,
   .btn-outline-primary and .btn-danger with a second set of colours,
   which meant the later copy silently won; only the pieces the base
   layer does not own are kept here.
   ------------------------------------------------------------- */

/* Ghost — a link that needs the hit area of a button. */
.btn-ghost {
  --bs-btn-color: var(--pl-ink-soft);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--pl-ink);
  --bs-btn-hover-bg: var(--pl-cream);
  --bs-btn-hover-border-color: transparent;
  box-shadow: none;
  font-weight: 500;
}

/* Loading state — swaps the label for a spinner without resizing. */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading > * {
  visibility: hidden;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.05em;
  height: 1.05em;
  margin: -0.525em 0 0 -0.525em;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: var(--pl-radius-pill);
  animation: uiSpin 0.65s linear infinite;
}
.btn-outline-dark.is-loading::after,
.btn-outline-primary.is-loading::after,
.btn-ghost.is-loading::after,
.btn-light.is-loading::after {
  border-color: var(--pl-ink);
  border-top-color: transparent;
}
@keyframes uiSpin {
  to {
    transform: rotate(360deg);
  }
}
.ui-spinner {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--pl-line);
  border-top-color: var(--pl-ink);
  border-radius: var(--pl-radius-pill);
  animation: uiSpin 0.65s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  .ui-spinner {
    animation-duration: 2s;
  }
}

/* A row of actions that wraps instead of overflowing. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-space-sm);
}
.btn-row--end {
  justify-content: flex-end;
}
.btn-row--between {
  justify-content: space-between;
  align-items: center;
}

/* -------------------------------------------------------------
   3. FORM ELEMENTS
   .ui-form is the canonical field set. The legacy .sdc-form and
   .bq-card scopes are aliases so the quote pages stay identical.
   ------------------------------------------------------------- */
.ui-label,
.sdc-label,
.bq-label {
  display: block;
  font-size: 0.83rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: var(--pl-ink);
  margin-bottom: var(--pl-space-2xs);
}
.ui-label em,
.sdc-label em,
.bq-label em,
.ui-label .req {
  color: var(--pl-accent);
  font-style: normal;
}
.ui-label__hint {
  float: right;
  font-weight: 500;
  color: var(--pl-muted);
}

.ui-form .form-control,
.ui-form .form-select,
.sdc-form .form-control,
.sdc-form .form-select,
.bq-card .form-control,
.bq-card .form-select {
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  font-family: var(--pl-font-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  color: var(--pl-ink);
  background-color: var(--pl-surface);
  box-shadow: var(--pl-shadow-xs);
  transition:
    border-color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease),
    background-color var(--pl-dur) var(--pl-ease);
}
.ui-form .form-control:hover:not(:focus):not(:disabled),
.ui-form .form-select:hover:not(:focus):not(:disabled),
.sdc-form .form-control:hover:not(:focus):not(:disabled),
.bq-card .form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--pl-line-strong);
}
/* Focus is the one moment colour is allowed into a form. */
.ui-form .form-control:focus,
.ui-form .form-select:focus,
.sdc-form .form-control:focus,
.sdc-form .form-select:focus,
.bq-card .form-control:focus,
.bq-card .form-select:focus {
  border-color: var(--pl-link);
  box-shadow: var(--pl-focus-ring);
  outline: none;
}
.ui-form .form-control::placeholder,
.sdc-form .form-control::placeholder,
.bq-card .form-control::placeholder {
  color: var(--pl-muted);
  opacity: 0.85;
}
.ui-form textarea.form-control,
.sdc-form textarea.form-control,
.bq-card textarea.form-control {
  resize: vertical;
  min-height: 5.5rem;
}
.ui-form .form-control:disabled,
.ui-form .form-select:disabled,
.ui-form .form-control[readonly] {
  background: var(--pl-sunken);
  border-color: var(--pl-line);
  color: var(--pl-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* One field: label + control + help/error, with a fixed rhythm. */
.ui-field {
  margin-bottom: var(--pl-space-md);
}
/* Only the final field of a form or card drops its bottom margin — a field
   inside a grid column keeps it, so the rhythm survives a two-up row. */
.ui-form > .ui-field:last-child,
.ui-card > .ui-field:last-child,
fieldset > .ui-field:last-child {
  margin-bottom: 0;
}
.ui-help {
  display: block;
  font-size: 0.76rem;
  color: var(--pl-muted);
  margin-top: var(--pl-space-3xs);
}

/* Validation. .is-invalid is set by the shared validator in shop.js. */
.ui-form .form-control.is-invalid,
.ui-form .form-select.is-invalid {
  border-color: var(--pl-error);
  background-image: none;
  padding-right: 0.85rem;
}
.ui-form .form-control.is-invalid:focus,
.ui-form .form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(217, 43, 75, 0.14);
}
.ui-form .form-control.is-valid,
.ui-form .form-select.is-valid {
  border-color: var(--pl-success);
  background-image: none;
  padding-right: 0.85rem;
}
.ui-error {
  display: none;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--pl-error);
  margin-top: var(--pl-space-3xs);
}
.ui-error.is-shown {
  display: flex;
}
.ui-error::before {
  content: "\F33A"; /* bi-exclamation-circle-fill */
  font-family: "bootstrap-icons";
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1;
}

/* Field with a leading icon (dates, card numbers, search). */
.ui-input-icon,
.sdc-date,
.bq-date {
  position: relative;
}
.ui-input-icon > i,
.sdc-date > i,
.bq-date > i {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pl-muted);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 2;
}
/* Only inset the text when there is actually an icon to clear —
   a wrapper used solely for a trailing reveal button keeps the
   same left edge as every other field in the form. */
.ui-input-icon:has(> i) .form-control,
.sdc-date:has(> i) .form-control,
.bq-date:has(> i) .form-control {
  padding-left: 2.25rem;
}
/* ...and keep the value clear of a trailing button. */
.ui-input-icon:has(> .ui-input-action) .form-control {
  padding-right: 2.75rem;
}

/* Trailing button inside a field (password reveal). */
.ui-input-action {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--pl-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.45rem 0.55rem;
  border-radius: var(--pl-radius-xs);
  cursor: pointer;
  transition:
    color var(--pl-dur) var(--pl-ease),
    background var(--pl-dur) var(--pl-ease);
}
.ui-input-action:hover {
  color: var(--pl-ink);
  background: var(--pl-sunken);
}
.ui-input-action:focus-visible {
  outline: 2px solid var(--pl-link);
  outline-offset: 1px;
}

/* Checkbox + radio. */
.ui-form .form-check {
  min-height: auto;
  margin-bottom: var(--pl-space-2xs);
  padding-left: 1.75rem;
}
.ui-form .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -1.75rem;
  margin-top: 0.2rem;
  border: 1px solid var(--pl-line-strong);
  border-radius: var(--pl-radius-xs);
  cursor: pointer;
  transition:
    background-color var(--pl-dur) var(--pl-ease),
    border-color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease);
}
.ui-form .form-check-input[type="radio"] {
  border-radius: var(--pl-radius-pill);
}
.ui-form .form-check-input:hover:not(:checked) {
  border-color: var(--pl-muted);
}
.ui-form .form-check-input:checked {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.ui-form .form-check-input:focus-visible {
  border-color: var(--pl-link);
  box-shadow: var(--pl-focus-ring);
  outline: none;
}
.ui-form .form-check-label {
  font-size: 0.86rem;
  color: var(--pl-ink-soft);
  cursor: pointer;
}

/* A selectable card built on a radio — plans, addresses, payment. */
.ui-choice {
  position: relative;
  display: block;
  border: 1.5px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: var(--pl-space-sm) var(--pl-space-md);
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.ui-choice:hover {
  border-color: var(--pl-primary);
}
.ui-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ui-choice:has(input:checked) {
  border-color: var(--pl-primary);
  background: var(--pl-cream);
}
.ui-choice:has(input:focus-visible) {
  box-shadow: var(--pl-focus-ring);
}
.ui-choice__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pl-ink);
}
.ui-choice__meta {
  display: block;
  font-size: 0.8rem;
  color: var(--pl-muted);
}

/* Dropzone — shared by the quote pages and the order flow. */
.ui-drop,
.sdc-drop,
.bq-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-space-3xs);
  border: 1px dashed var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: var(--pl-space-lg) var(--pl-space-md);
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.ui-drop:hover,
.ui-drop.is-over,
.sdc-drop:hover,
.sdc-drop.is-over,
.bq-drop:hover,
.bq-drop.is-over {
  border-color: var(--pl-primary);
  background: var(--pl-cream);
}
.ui-drop > i,
.sdc-drop > i,
.bq-drop > i {
  font-size: 1.3rem;
  color: var(--pl-primary);
}
.ui-drop__text,
.sdc-drop__text,
.bq-drop__text {
  font-size: 0.86rem;
  color: var(--pl-ink-soft);
}
.ui-drop__text b,
.sdc-drop__text b,
.bq-drop__text b {
  color: var(--pl-primary);
  text-decoration: underline;
  font-weight: 600;
}
.ui-drop small,
.sdc-drop small,
.bq-drop small {
  font-size: 0.74rem;
  color: var(--pl-muted);
}

.ui-filelist,
.sdc-filelist,
.bq-filelist {
  margin: var(--pl-space-xs) 0 0;
}
.ui-filelist li,
.sdc-filelist li,
.bq-filelist li {
  display: flex;
  align-items: center;
  gap: var(--pl-space-2xs);
  font-size: 0.78rem;
  color: var(--pl-ink-soft);
  padding: 0.2rem 0;
}
.ui-filelist span,
.sdc-filelist span,
.bq-filelist span {
  color: var(--pl-muted);
  margin-left: auto;
}
.ui-filelist .ui-filelist__name,
.sdc-filelist .ui-filelist__name,
.bq-filelist .ui-filelist__name {
  color: inherit;
  margin-left: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}

/* Inline form-level message under a submit button. */
.ui-formmsg,
.sdc-formmsg,
.bq-formmsg {
  font-size: 0.8rem;
  margin: var(--pl-space-xs) 0 0;
  text-align: center;
}
.ui-formmsg.is-ok,
.sdc-formmsg.is-ok,
.bq-formmsg.is-ok {
  color: var(--pl-success);
}
.ui-formmsg.is-error,
.sdc-formmsg.is-error,
.bq-formmsg.is-error {
  color: var(--pl-error);
}

/* Quantity stepper — basket lines and order review. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  background: #fff;
  overflow: hidden;
}
.qty-stepper__btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  color: var(--pl-ink-soft);
  font-size: 0.95rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.qty-stepper__btn:hover:not(:disabled) {
  background: var(--pl-cream);
  color: var(--pl-primary);
}
.qty-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qty-stepper__input {
  width: 2.75rem;
  border: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pl-ink);
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper__input:focus {
  outline: none;
}

/* -------------------------------------------------------------
   4. SURFACES — cards, panels, dividers
   ------------------------------------------------------------- */
.ui-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-card-pad);
  box-shadow: var(--pl-shadow-xs);
}
.ui-card--lg,
.bq-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-space-xl);
  box-shadow: var(--pl-shadow-xs);
}
.ui-card--flat {
  box-shadow: none;
}
.ui-card--tint {
  background: var(--pl-cream);
}
.ui-card--flush {
  padding: 0;
  overflow: hidden;
}
.ui-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  padding-bottom: var(--pl-space-sm);
  margin-bottom: var(--pl-space-md);
  border-bottom: 1px solid var(--pl-line);
}
.ui-card--flush .ui-card__head {
  padding: var(--pl-card-pad) var(--pl-card-pad) var(--pl-space-sm);
  margin-bottom: 0;
}
.ui-card__head .sub-heading {
  margin-bottom: 0;
}
.ui-card__foot {
  padding-top: var(--pl-space-md);
  margin-top: var(--pl-space-md);
  border-top: 1px solid var(--pl-line);
}
.ui-divider {
  height: 1px;
  background: var(--pl-line);
  border: 0;
  margin: var(--pl-space-md) 0;
  opacity: 1;
}

/* A sticky rail — order summaries on desktop. */
.ui-sticky {
  position: sticky;
  top: 1rem;
}

/* Definition list used for customer / address blocks. */
.ui-deflist {
  margin: 0;
  display: grid;
  gap: var(--pl-space-2xs);
}
.ui-deflist div {
  display: flex;
  gap: var(--pl-space-sm);
  font-size: 0.88rem;
}
.ui-deflist dt {
  flex: 0 0 8rem;
  color: var(--pl-muted);
  font-weight: 500;
}
.ui-deflist dd {
  margin: 0;
  color: var(--pl-ink);
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}

/* -------------------------------------------------------------
   5. FEEDBACK — alerts, badges, empty + loading states
   ------------------------------------------------------------- */
.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-space-sm);
  padding: var(--pl-space-sm) var(--pl-space-md);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: var(--pl-cream);
  color: var(--pl-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}
.ui-alert > i {
  font-size: 1.05rem;
  line-height: 1.35;
  flex-shrink: 0;
}
.ui-alert strong {
  color: var(--pl-ink);
}
.ui-alert p {
  margin: 0;
}
.ui-alert--info {
  background: var(--pl-info-soft);
  border-color: rgba(20, 22, 28, 0.18);
}
.ui-alert--info > i {
  color: var(--pl-info);
}
.ui-alert--success {
  background: var(--pl-success-soft);
  border-color: rgba(15, 168, 127, 0.22);
}
.ui-alert--success > i {
  color: var(--pl-success);
}
.ui-alert--warning {
  background: var(--pl-warning-soft);
  border-color: rgba(178, 106, 0, 0.22);
}
.ui-alert--warning > i {
  color: var(--pl-warning);
}
.ui-alert--error {
  background: var(--pl-error-soft);
  border-color: rgba(217, 43, 75, 0.22);
}
.ui-alert--error > i {
  color: var(--pl-error);
}

/* Status badge — order state, plan state, delivery state. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-cream);
  color: var(--pl-ink-soft);
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-badge--success {
  background: var(--pl-success-soft);
  color: var(--pl-success);
}
.status-badge--warning {
  background: var(--pl-warning-soft);
  color: var(--pl-warning);
}
.status-badge--error {
  background: var(--pl-error-soft);
  color: var(--pl-error);
}
.status-badge--info {
  background: var(--pl-info-soft);
  color: var(--pl-info);
}
.status-badge--neutral {
  background: var(--pl-cream);
  color: var(--pl-muted);
}

/* Empty state — shared by every listing, basket and history table. */
.ui-empty,
.listing__empty {
  text-align: center;
  padding: var(--pl-space-3xl) var(--pl-space-md);
  color: var(--pl-muted);
}
.ui-empty > i,
.listing__empty i {
  font-size: 2.5rem;
  color: var(--pl-line);
}
.ui-empty h3,
.listing__empty h3 {
  margin: var(--pl-space-md) 0 var(--pl-space-2xs);
  color: var(--pl-ink);
  font-family: var(--pl-font-ui);
  font-size: 1.15rem;
  font-weight: 700;
}
.ui-empty p {
  max-width: 34rem;
  margin-inline: auto;
  font-size: 0.92rem;
}
.ui-empty .btn,
.listing__empty .btn {
  margin-top: var(--pl-space-md);
}

/* Skeleton placeholder for content that is still loading. */
.ui-skeleton {
  border-radius: var(--pl-radius-sm);
  background: linear-gradient(
    90deg,
    var(--pl-sunken) 25%,
    #e9ecf1 37%,
    var(--pl-sunken) 63%
  );
  background-size: 400% 100%;
  animation: uiSkeleton 1.4s ease infinite;
}
@keyframes uiSkeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
  }
}

/* -------------------------------------------------------------
   6. DATA — tables, summaries, line items
   ------------------------------------------------------------- */
.ui-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 34rem;
}
.ui-table th,
.ui-table td {
  padding: var(--pl-space-sm) var(--pl-space-md);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--pl-line);
}
.ui-table thead th {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-muted);
  background: var(--pl-cream);
  white-space: nowrap;
}
.ui-table tbody tr:last-child td {
  border-bottom: 0;
}
.ui-table tbody tr {
  transition: background 0.2s;
}
.ui-table tbody tr:hover {
  background: var(--pl-cream);
}
.ui-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Order summary — basket, checkout review and confirmation. */
.ui-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  font-size: 0.9rem;
  color: var(--pl-ink-soft);
  padding: 0.35rem 0;
}
.ui-summary__row dd,
.ui-summary__row strong {
  margin: 0;
  font-weight: 700;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-summary__row--discount dd,
.ui-summary__row--discount strong {
  color: var(--pl-success);
}
.ui-summary__row--total {
  border-top: 1px solid var(--pl-line);
  margin-top: var(--pl-space-xs);
  padding-top: var(--pl-space-sm);
  font-size: 1rem;
}
.ui-summary__row--total dd,
.ui-summary__row--total strong {
  font-size: 1.35rem;
  font-family: var(--pl-font-display);
}
.ui-summary__note {
  font-size: 0.76rem;
  color: var(--pl-muted);
  margin: var(--pl-space-2xs) 0 0;
}

/* A compact line item: thumb + copy + price. */
.ui-item {
  display: flex;
  gap: var(--pl-space-md);
  align-items: flex-start;
}
.ui-item__media {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: var(--pl-radius-sm);
  overflow: hidden;
  background: var(--pl-cream);
}
.ui-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-item__body {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-item__title {
  font-family: var(--pl-font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pl-ink);
  margin: 0 0 0.2rem;
  line-height: 1.35;
}
.ui-item__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--pl-muted);
}
.ui-item__specs li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.ui-item__specs li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pl-line);
}
.ui-item__price {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Feature / tick list used by plans and confirmations. */
.ui-ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pl-space-2xs);
}
.ui-ticklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-space-xs);
  font-size: 0.88rem;
  color: var(--pl-ink-soft);
  line-height: 1.5;
}
.ui-ticklist li > i {
  color: var(--pl-success);
  font-size: 0.9rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.ui-ticklist li.is-off {
  color: var(--pl-muted);
}
.ui-ticklist li.is-off > i {
  color: var(--pl-line);
}

/* -------------------------------------------------------------
   7. NAVIGATION HELPERS
   ------------------------------------------------------------- */

/* Checkout progress — basket, review, confirmation. */
.ui-steps {
  display: flex;
  align-items: center;
  gap: var(--pl-space-xs);
  list-style: none;
  margin: 0 0 var(--pl-space-lg);
  padding: 0 0 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-steps::-webkit-scrollbar {
  display: none;
}
.ui-steps__item {
  display: flex;
  align-items: center;
  gap: var(--pl-space-xs);
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pl-muted);
  white-space: nowrap;
}
.ui-steps__item::before {
  content: attr(data-step);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--pl-cream);
  color: var(--pl-muted);
  border: 1px solid var(--pl-line);
}
.ui-steps__sep {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1px;
  background: var(--pl-line);
}
.ui-steps__item.is-done {
  color: var(--pl-ink-soft);
}
.ui-steps__item.is-done::before {
  content: "\F633"; /* bi-check2 */
  font-family: "bootstrap-icons";
  background: var(--pl-success-soft);
  border-color: transparent;
  color: var(--pl-success);
}
.ui-steps__item.is-current {
  color: var(--pl-primary);
}
.ui-steps__item.is-current::before {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}

/* Back link above a page heading. */
.ui-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pl-muted);
  transition:
    color 0.2s,
    gap 0.2s;
}
.ui-back:hover {
  color: var(--pl-primary);
  gap: 0.55rem;
}

/* Segmented toggle — billing period, unit switches. */
.ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-cream);
  border: 1px solid var(--pl-line);
  max-width: 100%;
}
.ui-toggle__btn {
  border: 0;
  background: none;
  border-radius: var(--pl-radius-pill);
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pl-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.ui-toggle__btn:hover {
  color: var(--pl-primary);
}
.ui-toggle__btn.is-active {
  background: #fff;
  color: var(--pl-primary);
  box-shadow: var(--pl-shadow-sm);
}
.ui-toggle__save {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pl-success);
  background: var(--pl-success-soft);
  border-radius: var(--pl-radius-pill);
  padding: 0.1rem 0.45rem;
}

/* =============================================================
   AUTHENTICATION — SIGN IN / CREATE ACCOUNT
   -------------------------------------------------------------
   Login and registration share one shell so they read as two
   halves of the same system: a focused form column on the left,
   a dark proof panel on the right. The full site header and
   mega-menu are deliberately absent — nothing on this screen
   competes with the single thing the customer came to do.
   Every field, button and message still comes from the UI kit.
   ============================================================= */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  background: var(--pl-surface);
}

/* ---- The form column --------------------------------------- */
.auth-shell__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
}

/* Minimal chrome: the mark, and a way back to the shop. */
.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-md);
  flex-wrap: wrap;
}
/* Sized by width, as the site header does, so the wordmark stays
   legible rather than being squeezed to a 40px strip. */
.auth-topbar__logo img {
  width: 92px;
  height: auto;
}
.auth-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pl-muted);
  border-radius: var(--pl-radius-xs);
  padding: 0.35rem 0.1rem;
  transition: color var(--pl-dur) var(--pl-ease);
}
.auth-topbar__back:hover {
  color: var(--pl-ink);
}

/* The form is optically centred in the remaining height. */
.auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--pl-space-2xl);
}
.auth-panel__inner {
  width: 100%;
  max-width: 25rem;
}

.auth-head {
  margin-bottom: var(--pl-space-xl);
}
.auth-head__title {
  font-family: var(--pl-font-display);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--pl-ink);
  margin: 0 0 0.4rem;
}
.auth-head__sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pl-muted);
  margin: 0;
}

/* Row under the password field: remember me, and the reset toggle. */
.auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pl-space-xs);
  margin: 0 0 var(--pl-space-lg);
}
.auth-meta .form-check {
  margin-bottom: 0;
}
.auth-meta .form-check-label {
  font-size: 0.875rem;
}

/* A quiet rule with a word in it, between the form and the
   federated options. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--pl-space-sm);
  margin: var(--pl-space-lg) 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pl-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pl-line);
}
.auth-social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pl-space-sm);
}
.auth-social .btn {
  font-weight: 500;
}
.auth-social .btn i {
  font-size: 1.05rem;
}

.auth-switch {
  text-align: center;
  font-size: 0.9rem;
  color: var(--pl-muted);
  margin: var(--pl-space-xl) 0 0;
}
.auth-switch a {
  color: var(--pl-ink);
  font-weight: 550;
  text-underline-offset: 0.2em;
  text-decoration: underline;
  text-decoration-color: var(--pl-line-strong);
  transition: text-decoration-color var(--pl-dur) var(--pl-ease);
}
.auth-switch a:hover {
  text-decoration-color: var(--pl-ink);
}

/* The forgot-password panel. Collapsed by default; Bootstrap
   opens it in place, so the customer never leaves the screen and
   the reset form keeps its own validation. */
.auth-reset {
  margin-top: var(--pl-space-md);
  padding: var(--pl-space-md);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-cream);
}
.auth-reset__title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--pl-ink);
  margin: 0 0 0.25rem;
}
.auth-reset__copy {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--pl-muted);
  margin: 0 0 var(--pl-space-md);
}
.auth-reset .form-control {
  background: var(--pl-surface);
}

/* A link that needs the hit area of a control, for the reset toggle. */
.auth-linkbtn {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pl-link);
  border-radius: var(--pl-radius-xs);
  cursor: pointer;
}
.auth-linkbtn:hover {
  color: var(--pl-link-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Password strength. Four segments, driven by [data-score] which
   js/shop.js sets as the customer types. */
.auth-strength {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.6rem;
}
.auth-strength span {
  flex: 1;
  height: 3px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-line);
  transition: background var(--pl-dur) var(--pl-ease);
}
.auth-strength[data-score="1"] span:nth-child(1) {
  background: var(--pl-error);
}
.auth-strength[data-score="2"] span:nth-child(-n + 2) {
  background: var(--pl-warning);
}
.auth-strength[data-score="3"] span:nth-child(-n + 3) {
  background: var(--pl-amber);
}
.auth-strength[data-score="4"] span {
  background: var(--pl-success);
}
.auth-strength__note {
  display: block;
  font-size: 0.78rem;
  color: var(--pl-muted);
  margin-top: 0.4rem;
}

.auth-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pl-space-sm);
  font-size: 0.8rem;
  color: var(--pl-faint);
}
.auth-legal a {
  color: var(--pl-muted);
  border-radius: var(--pl-radius-xs);
}
.auth-legal a:hover {
  color: var(--pl-ink);
}
.auth-legal__links {
  display: flex;
  gap: var(--pl-space-md);
  flex-wrap: wrap;
}

/* ---- The proof panel ---------------------------------------
   Ink, with one still wash of light and a registration rule in
   the CMYK of the brand mark. No moving parts. */
.auth-shell__brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(2rem, 4vh, 3.25rem);
  background: var(--pl-ink);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(2rem, 3.2vw, 3.25rem);
}
.auth-shell__brand > .auth-brand__stats {
  margin-top: auto;
}
.auth-shell__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60% 45% at 78% 8%,
    rgba(255, 255, 255, 0.07),
    transparent 70%
  );
  pointer-events: none;
}
.auth-shell__brand::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--pl-cyan) 0 33.33%,
    var(--pl-accent) 33.33% 66.66%,
    var(--pl-yellow) 66.66% 100%
  );
}
.auth-brand__quote {
  font-family: var(--pl-font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.auth-brand__cite {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--pl-space-lg);
  font-style: normal;
}
.auth-brand__avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--pl-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.auth-brand__cite strong {
  display: block;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 550;
}
.auth-brand__cite span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.auth-brand__list {
  list-style: none;
  display: grid;
  gap: var(--pl-space-md);
  padding: 0;
  margin: 0;
}
.auth-brand__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.auth-brand__list i {
  flex: none;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  color: var(--pl-cyan);
}
.auth-brand__list strong {
  display: block;
  color: #fff;
  font-weight: 550;
}

/* A row of hard numbers at the foot of the panel. */
.auth-brand__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-space-md);
  padding-top: var(--pl-space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.auth-brand__stat b {
  display: block;
  font-family: var(--pl-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.auth-brand__stat span {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Responsive ---------------------------------------------
   The panel is a supporting argument, not the task. Below 992 it
   moves under the form and loses the parts that only work at
   size; below 576 the form column takes the whole screen. */
@media (max-width: 1199.98px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }
}
@media (max-width: 991.98px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .auth-shell__brand {
    gap: var(--pl-space-xl);
    padding: var(--pl-space-xl) clamp(1.25rem, 4vw, 3rem);
  }
  .auth-panel {
    padding-block: var(--pl-space-xl);
  }
  .auth-brand__quote {
    font-size: 1.25rem;
  }
}
@media (max-width: 575.98px) {
  .auth-panel__inner {
    max-width: none;
  }
  .auth-head__title {
    font-size: 1.55rem;
  }
  .auth-social {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-brand__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pl-space-sm);
  }
  .auth-brand__stat b {
    font-size: 1.15rem;
  }
  /* Touch targets on the small controls that sit inside a form. */
  .auth-linkbtn,
  .auth-topbar__back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 380px) {
  .auth-brand__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pl-space-xs);
  }
}

/* -------------------------------------------------------------
   ONE-TIME CODE — the verification step of the auth shell
   -------------------------------------------------------------
   Same shell, same kit fields. The only new idea is the code
   row: six single-character inputs that behave as one control,
   so the customer never has to think about which box they are
   in. Everything else reuses .auth-* above.
   ------------------------------------------------------------- */

/* The address the code went to, restated so the customer can
   check it before waiting for a message that cannot arrive. */
.auth-sentto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  flex-wrap: wrap;
  padding: var(--pl-space-sm) var(--pl-space-md);
  margin-bottom: var(--pl-space-lg);
  background: var(--pl-cream);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
}
.auth-sentto__to {
  display: flex;
  align-items: center;
  gap: var(--pl-space-xs);
  min-width: 0;
  font-size: 0.9rem;
  color: var(--pl-ink);
}
.auth-sentto__to i {
  color: var(--pl-muted);
}
.auth-sentto__to strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---- The code row ------------------------------------------
   A fieldset, because the six inputs are one answer. The legend
   is the accessible name; the visible label sits in .auth-head. */
.auth-code {
  border: 0;
  padding: 0;
  margin: 0 0 var(--pl-space-sm);
  min-width: 0;
}
.auth-code__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pl-space-xs);
}
/* The width comes from the grid track, so only the height is
   stated: a fixed height keeps all six boxes the same shape at
   every width, where an aspect-ratio would let them drift from
   portrait to square as the column narrows. */
.auth-code__input {
  width: 100%;
  height: 3.75rem;
  padding: 0;
  text-align: center;
  font-family: var(--pl-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink);
  background: var(--pl-sunken);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  transition: border-color var(--pl-dur) var(--pl-ease),
    background-color var(--pl-dur) var(--pl-ease),
    box-shadow var(--pl-dur) var(--pl-ease);
  /* The number spinner would sit on top of a single digit. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.auth-code__input::-webkit-outer-spin-button,
.auth-code__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* A filled box reads as done: it comes up to paper and takes an
   ink hairline, which is the same language the kit uses for a
   control that now holds a value. */
.auth-code__input.is-filled {
  background: var(--pl-surface);
  border-color: var(--pl-line-strong);
}
.auth-code__input:focus {
  outline: 2px solid var(--pl-link);
  outline-offset: 2px;
  background: var(--pl-surface);
  border-color: var(--pl-link);
}
/* The whole row is one answer, so one wrong digit marks all six. */
.auth-code.is-invalid .auth-code__input {
  border-color: var(--pl-error);
  background: var(--pl-error-soft);
}
@media (prefers-reduced-motion: reduce) {
  .auth-code__input {
    transition: none;
  }
}

/* ---- Resend row --------------------------------------------
   The timer and the resend button occupy the same line so the
   row never changes height when one swaps for the other. */
.auth-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-space-3xs);
  flex-wrap: wrap;
  min-height: 1.5rem;
  margin: var(--pl-space-lg) 0 0;
  font-size: 0.875rem;
  color: var(--pl-muted);
  text-align: center;
}
.auth-resend__timer {
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink);
  font-weight: 500;
}

/* ---- Alternatives below the fold of the task ---------------- */
.auth-altlist {
  list-style: none;
  margin: var(--pl-space-md) 0 0;
  padding: var(--pl-space-md) 0 0;
  border-top: 1px solid var(--pl-line);
  display: grid;
  gap: var(--pl-space-xs);
}
.auth-altlist li {
  display: flex;
  align-items: center;
  gap: var(--pl-space-xs);
  font-size: 0.875rem;
  color: var(--pl-muted);
}
.auth-altlist i {
  color: var(--pl-faint);
}

@media (max-width: 575.98px) {
  /* Six boxes plus gutters is the tightest thing on the screen;
     below 576 the gap closes before the box does. */
  .auth-code__row {
    gap: var(--pl-space-3xs);
  }
  .auth-code__input {
    height: 3.25rem;
    font-size: 1.25rem;
  }
  /* Both of these are tap targets on a phone. */
  .auth-resend .auth-linkbtn {
    min-height: 44px;
  }
}

/* =============================================================
   SUBSCRIPTION — PRINT PLUS PLANS
   ============================================================= */
.sub {
  padding-bottom: var(--pl-space-3xl);
}

/* ---------- Hero ---------- */
.sub-hero {
  background: var(--pl-cream);
  border-bottom: 1px solid var(--pl-line);
  padding: var(--pl-section-y) 0;
  text-align: center;
}
.sub-hero__inner {
  max-width: 46rem;
  margin-inline: auto;
}
.sub-hero .page-intro {
  margin-inline: auto;
}
.sub-hero__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pl-space-sm);
  margin-top: var(--pl-space-lg);
}
.sub-hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pl-space-xs) var(--pl-space-lg);
  margin: var(--pl-space-lg) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pl-ink-soft);
}
.sub-hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sub-hero__proof i {
  color: var(--pl-primary);
}

/* ---------- Plan grid ---------- */
.sub-plans {
  padding: var(--pl-section-y) 0 0;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-space-lg);
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-space-lg);
  box-shadow: var(--pl-shadow-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pl-shadow);
  border-color: var(--pl-primary);
}
.plan-card--featured {
  border-color: var(--pl-primary);
  box-shadow: var(--pl-shadow);
}
.plan-card__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pl-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: var(--pl-radius-pill);
  white-space: nowrap;
}
.plan-card__name {
  font-family: var(--pl-font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pl-ink);
  margin: 0 0 0.2rem;
}
.plan-card__for {
  font-size: 0.82rem;
  color: var(--pl-muted);
  margin: 0 0 var(--pl-space-md);
  min-height: 2.4em;
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}
.plan-card__amount {
  font-family: var(--pl-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
}
.plan-card__billing {
  font-size: 0.78rem;
  color: var(--pl-muted);
  margin: 0 0 var(--pl-space-md);
  min-height: 1.2em;
}
.plan-card__cta {
  width: 100%;
  margin-bottom: var(--pl-space-md);
}
.plan-card__includes {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: 0 0 var(--pl-space-xs);
}
.plan-card .ui-ticklist {
  margin-bottom: var(--pl-space-md);
}
.plan-card__foot {
  margin-top: auto;
  padding-top: var(--pl-space-sm);
  border-top: 1px solid var(--pl-line);
  font-size: 0.78rem;
  color: var(--pl-muted);
}

/* ---------- Comparison table ---------- */
.sub-compare {
  padding: var(--pl-section-y) 0 0;
}
.sub-compare .ui-table {
  min-width: 46rem;
}
.sub-compare .ui-table th:first-child,
.sub-compare .ui-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--pl-surface);
  font-weight: 600;
  color: var(--pl-ink);
  z-index: 1;
}
.sub-compare .ui-table thead th:first-child {
  background: var(--pl-cream);
}
.sub-compare .ui-table tbody tr:hover td:first-child {
  background: var(--pl-cream);
}
.sub-compare .ui-table td:not(:first-child),
.sub-compare .ui-table th:not(:first-child) {
  text-align: center;
}
.sub-compare__yes {
  color: var(--pl-success);
}
.sub-compare__no {
  color: var(--pl-line);
}

/* ---------- Add-ons ---------- */
.sub-addons {
  padding: var(--pl-section-y) 0 0;
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-space-lg);
}
.addon-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.addon-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--pl-radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: var(--pl-info-soft);
  color: var(--pl-primary);
  margin-bottom: var(--pl-space-sm);
}
.addon-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--pl-space-md);
}

/* ---------- FAQ ---------- */
.sub-faq {
  padding: var(--pl-section-y) 0 0;
}
.sub-faq__list {
  max-width: 48rem;
  margin-inline: auto;
}
.sub-faq__item + .sub-faq__item {
  border-top: 1px solid var(--pl-line);
}
.sub-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-md);
  padding: var(--pl-space-md) 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--pl-ink);
  cursor: pointer;
  transition: color 0.2s;
}
.sub-faq__q:hover {
  color: var(--pl-primary);
}
.sub-faq__q > i {
  flex-shrink: 0;
  color: var(--pl-primary);
  transition: transform 0.25s;
}
.sub-faq__q[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.sub-faq__a {
  padding: 0 0 var(--pl-space-md);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--pl-ink-soft);
  max-width: 62ch;
}

/* ---------- Closing CTA ---------- */
.sub-cta {
  margin-top: var(--pl-space-2xl);
  background: var(--pl-ink);
  border-radius: var(--pl-radius);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--pl-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-lg);
  flex-wrap: wrap;
}
.sub-cta__title {
  font-family: var(--pl-font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem;
}
.sub-cta p {
  margin: 0;
  font-size: 0.92rem;
  max-width: 46ch;
}

/* =============================================================
   BASKET
   ============================================================= */
.cart {
  padding-bottom: var(--pl-space-3xl);
}
.cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--pl-space-xl);
  align-items: start;
}
.cart__main {
  min-width: 0;
}

/* One basket line. */
.cart-line {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: var(--pl-space-md);
  padding: var(--pl-space-md) 0;
  border-bottom: 1px solid var(--pl-line);
}
.cart-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cart-line:first-child {
  padding-top: 0;
}
.cart-line__media {
  width: 6rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--pl-radius-sm);
  overflow: hidden;
  background: var(--pl-cream);
}
.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line__body {
  min-width: 0;
}
.cart-line__title {
  font-family: var(--pl-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pl-ink);
  margin: 0 0 0.25rem;
  line-height: 1.35;
}
.cart-line__title a:hover {
  color: var(--pl-primary);
}
.cart-line__actions {
  display: flex;
  align-items: center;
  gap: var(--pl-space-md);
  margin-top: var(--pl-space-sm);
  flex-wrap: wrap;
}
.cart-line__remove {
  border: 0;
  background: none;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pl-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: color 0.2s;
}
.cart-line__remove:hover {
  color: var(--pl-error);
}
.cart-line__prices {
  text-align: right;
  white-space: nowrap;
}
.cart-line__total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.cart-line__unit {
  font-size: 0.78rem;
  color: var(--pl-muted);
  margin: 0.15rem 0 0;
}

/* Promo code row. */
.cart-promo {
  display: flex;
  gap: var(--pl-space-sm);
}
.cart-promo .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* Reassurance strip under the basket. */
.cart-usp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-space-md);
  margin-top: var(--pl-space-lg);
}
.cart-usp li {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-space-xs);
  font-size: 0.82rem;
  color: var(--pl-ink-soft);
  line-height: 1.45;
}
.cart-usp i {
  color: var(--pl-primary);
  font-size: 1rem;
  flex-shrink: 0;
}

/* =============================================================
   ORDER PREVIEW / CHECKOUT REVIEW
   ============================================================= */
.checkout {
  padding-bottom: var(--pl-space-3xl);
}
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--pl-space-xl);
  align-items: start;
}
.checkout__main {
  min-width: 0;
  display: grid;
  gap: var(--pl-space-lg);
}
.checkout__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pl-space-lg);
}
.checkout__edit {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pl-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.checkout__edit:hover {
  color: var(--pl-primary-dark);
  text-decoration: underline;
}
.checkout__items {
  display: grid;
  gap: var(--pl-space-md);
}
.checkout__items > * + * {
  padding-top: var(--pl-space-md);
  border-top: 1px solid var(--pl-line);
}
.checkout__confirm {
  width: 100%;
}

/* =============================================================
   ORDER RESULT — SUCCESS + ERROR share one layout
   ============================================================= */
.result {
  background: var(--pl-cream);
  padding: var(--pl-section-y) 0 var(--pl-space-xl);
}
.result__panel {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.result__icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--pl-space-md);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  background: var(--pl-success-soft);
  color: var(--pl-success);
}
.result--error .result__icon {
  background: var(--pl-error-soft);
  color: var(--pl-error);
}
.result__panel .page-heading {
  margin-bottom: var(--pl-space-sm);
}
.result__panel .page-intro {
  margin-inline: auto;
}
.result__ref {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-sm);
  margin-top: var(--pl-space-md);
  padding: var(--pl-space-xs) var(--pl-space-md);
  border: 1px dashed var(--pl-line);
  border-radius: var(--pl-radius-pill);
  background: #fff;
  font-size: 0.88rem;
  color: var(--pl-muted);
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.result__ref strong {
  color: var(--pl-ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.result__actions {
  justify-content: center;
  margin-top: var(--pl-space-lg);
}
.result__card {
  margin-top: var(--pl-space-xl);
  text-align: left;
}
.result__next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pl-space-md);
  margin-top: var(--pl-space-lg);
  text-align: left;
}
.result__next li {
  display: flex;
  gap: var(--pl-space-sm);
  font-size: 0.86rem;
  color: var(--pl-ink-soft);
  line-height: 1.5;
}
.result__next i {
  color: var(--pl-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* =============================================================
   CUSTOMER DASHBOARD
   ============================================================= */
.dash {
  padding-bottom: var(--pl-space-3xl);
}
.dash__grid {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--pl-space-xl);
  align-items: start;
}
.dash__main {
  min-width: 0;
  display: grid;
  gap: var(--pl-space-lg);
}

/* ---------- Side navigation ---------- */
.dash-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.dash-nav__link {
  display: flex;
  align-items: center;
  gap: var(--pl-space-sm);
  padding: 0.6rem 0.85rem;
  border-radius: var(--pl-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pl-ink-soft);
  transition:
    background 0.2s,
    color 0.2s;
}
.dash-nav__link i {
  font-size: 1.05rem;
  color: var(--pl-muted);
  transition: color 0.2s;
}
.dash-nav__link:hover {
  background: var(--pl-cream);
  color: var(--pl-primary);
}
.dash-nav__link:hover i {
  color: var(--pl-primary);
}
.dash-nav__link.is-active {
  background: var(--pl-sunken);
  color: var(--pl-ink);
  font-weight: 550;
}
.dash-nav__link.is-active i {
  color: var(--pl-ink);
}
.dash-nav__link--danger:hover {
  background: var(--pl-error-soft);
  color: var(--pl-error);
}
.dash-nav__link--danger:hover i {
  color: var(--pl-error);
}
.dash-nav__count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pl-muted);
  background: var(--pl-cream);
  border-radius: var(--pl-radius-pill);
  padding: 0.1rem 0.5rem;
}

/* ---------- Profile summary in the sidebar ---------- */
.dash-profile {
  text-align: center;
  margin-bottom: var(--pl-space-md);
}
.dash-profile__avatar {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--pl-space-xs);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--pl-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  background: var(--pl-ink);
}
.dash-profile__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pl-ink);
  margin: 0;
  word-break: break-word;
}
.dash-profile__email {
  font-size: 0.8rem;
  color: var(--pl-muted);
  margin: 0.1rem 0 var(--pl-space-xs);
  word-break: break-word;
}

/* ---------- Welcome band ---------- */
.dash-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pl-ink);
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--pl-radius);
  padding: var(--pl-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-lg);
  flex-wrap: wrap;
}
.dash-hero::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto auto;
  width: 28rem;
  height: 22rem;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 70%);
  background-repeat: no-repeat;
  background-position: 30% 50%, 70% 60%;
  background-size: 60% 100%, 55% 90%;
  z-index: -1;
  pointer-events: none;
}
.dash-hero__title {
  font-family: var(--pl-font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem;
}
.dash-hero p {
  margin: 0;
  font-size: 0.92rem;
  max-width: 44ch;
}

/* ---------- Stat tiles ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-space-md);
}
.dash-stat {
  padding: var(--pl-space-md);
}
.dash-stat__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: 0 0 var(--pl-space-2xs);
}
.dash-stat__label i {
  color: var(--pl-primary);
  font-size: 0.9rem;
}
.dash-stat__value {
  font-family: var(--pl-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--pl-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.dash-stat__note {
  font-size: 0.76rem;
  color: var(--pl-muted);
  margin: 0.35rem 0 0;
}

/* ---------- Quick actions ---------- */
.dash-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pl-space-md);
}
.dash-action {
  display: flex;
  align-items: center;
  gap: var(--pl-space-sm);
  padding: var(--pl-space-md);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pl-ink);
  transition:
    border-color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.dash-action:hover {
  border-color: var(--pl-primary);
  transform: translateY(-2px);
  box-shadow: var(--pl-shadow-sm);
  color: var(--pl-primary);
}
.dash-action i {
  font-size: 1.15rem;
  color: var(--pl-primary);
  flex-shrink: 0;
}

/* ---------- Subscription panel ---------- */
.dash-sub__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  flex-wrap: wrap;
}
.dash-sub__meter {
  height: 6px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-line);
  overflow: hidden;
  margin: var(--pl-space-2xs) 0;
}
.dash-sub__meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pl-ink);
}

/* ---------- Orders ---------- */
.dash-orders__ref {
  font-weight: 700;
  color: var(--pl-ink);
  white-space: nowrap;
}
.dash-orders__ref:hover {
  color: var(--pl-primary);
}
.dash-orders__items {
  color: var(--pl-muted);
  font-size: 0.82rem;
}

/* Mobile card view of the orders table — hidden on desktop. */
.dash-orderlist {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pl-space-sm);
}
.dash-ordercard {
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-sm);
  padding: var(--pl-space-md);
}
.dash-ordercard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  margin-bottom: var(--pl-space-2xs);
}
.dash-ordercard__row {
  display: flex;
  justify-content: space-between;
  gap: var(--pl-space-sm);
  font-size: 0.84rem;
  padding: 0.15rem 0;
  color: var(--pl-ink-soft);
}
.dash-ordercard__row strong {
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   RESPONSIVE LADDER
   -------------------------------------------------------------
   Read top to bottom: each block narrows the one above it, so a
   rule only appears where the layout actually has to change.

   The spacing tokens step down first, and because every component
   in the UI kit is built from those tokens, padding, gaps and
   section rhythm shrink together without per-component rules.
   Only real layout changes — column counts, stacking, control
   sizes — are spelled out below.
   ============================================================= */

/* ---------- 2560 · large desktop ---------- */
@media screen and (max-width: 2560px) {
  :root {
    --pl-card-pad: 1.75rem;
    --pl-section-y: clamp(1.25rem, 2vw, 2.25rem);
  }
}

/* ---------- 1920 · desktop ---------- */
@media screen and (max-width: 1920px) {
  :root {
    --pl-card-pad: 1.65rem;
    --pl-section-y: clamp(1.125rem, 2vw, 2rem);
  }
}

/* ---------- 1660 · small desktop ---------- */
@media screen and (max-width: 1660px) {
  :root {
    --pl-card-pad: 1.5rem;
    --pl-section-y: clamp(1rem, 2vw, 1.75rem);
  }
}

/* ---------- 1440 · laptop ---------- */
@media screen and (max-width: 1440px) {
  .cart__grid,
  .checkout__grid {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--pl-space-lg);
  }
  .plan-grid {
    gap: var(--pl-space-md);
  }
}

/* ---------- 1366 · laptop ---------- */
@media screen and (max-width: 1366px) {
  .dash__grid {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--pl-space-lg);
  }
  .plan-card {
    padding: var(--pl-space-md);
  }
  .plan-card__amount {
    font-size: 2rem;
  }
}

/* ---------- 1280 · small laptop ---------- */
@media screen and (max-width: 1280px) {
  :root {
    --pl-card-pad: 1.35rem;
  }
  .cart__grid,
  .checkout__grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
  .dash-stats,
  .dash-actions {
    gap: var(--pl-space-sm);
  }
  .dash-stat__value {
    font-size: 1.55rem;
  }
}

/* ---------- 1156 · small laptop / large tablet ---------- */
@media screen and (max-width: 1156px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pl-space-lg);
  }
  .plan-card__for,
  .plan-card__billing {
    min-height: 0;
  }
  .dash__grid {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
  .dash-nav__link {
    padding: 0.55rem 0.7rem;
    font-size: 0.86rem;
  }
}

/* ---------- 1024 · tablet landscape ---------- */
@media screen and (max-width: 1024px) {
  :root {
    --pl-space-2xl: 2.5rem;
    --pl-space-3xl: 3.25rem;
  }
  .cart__grid,
  .checkout__grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
  .addon-grid {
    gap: var(--pl-space-md);
  }
  .sub-cta {
    padding: var(--pl-space-lg);
  }
  .dash-hero {
    padding: var(--pl-space-lg);
  }
}

/* ---------- 991 · tablet — the site's stacking point ---------- */
@media screen and (max-width: 991px) {
  /* Summary rails drop below the content they summarise. */
  .cart__grid,
  .checkout__grid,
  .dash__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-sticky {
    position: static;
  }

  /* The basket summary stays reachable without a long scroll. */
  .cart__aside,
  .checkout__aside {
    order: -1;
  }
  .cart__grid,
  .checkout__grid {
    display: flex;
    flex-direction: column;
  }
  .cart__aside,
  .checkout__aside,
  .cart__main,
  .checkout__main {
    width: 100%;
  }
  .cart__aside,
  .checkout__aside {
    order: 2;
  }

  /* Dashboard side nav becomes a scrolling row above the content. */
  .dash__aside {
    position: static;
  }
  .dash-profile {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    text-align: left;
    margin-bottom: var(--pl-space-sm);
  }
  .dash-profile__avatar {
    margin: 0;
    flex-shrink: 0;
  }
  .dash-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: var(--pl-space-2xs);
    padding-bottom: 0.35rem;
    scrollbar-width: none;
  }
  .dash-nav::-webkit-scrollbar {
    display: none;
  }
  .dash-nav__count {
    margin-left: 0.35rem;
  }

  .dash-stats,
  .dash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 800 · small tablet ---------- */
@media screen and (max-width: 800px) {
  .addon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .result__next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sub-compare .ui-table {
    min-width: 40rem;
  }
}

/* ---------- 767 · large phone / phablet ---------- */
@media screen and (max-width: 767px) {
  :root {
    --pl-card-pad: 1.15rem;
    --pl-space-2xl: 2.25rem;
    --pl-space-3xl: 2.75rem;
  }

  .ui-card--lg,
  .bq-card {
    padding: var(--pl-space-lg);
  }

  /* Basket line: thumbnail + copy, with the price on its own row. */
  .cart-line {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--pl-space-sm);
  }
  .cart-line__media {
    width: 4.5rem;
  }
  .cart-line__prices {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pl-space-sm);
    text-align: left;
    padding-top: var(--pl-space-2xs);
  }
  .cart-line__unit {
    margin: 0;
  }

  .cart-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .checkout__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Definition lists stack so long values never squeeze the label. */
  .ui-deflist div {
    flex-direction: column;
    gap: 0.1rem;
  }
  .ui-deflist dt {
    flex: none;
    font-size: 0.78rem;
  }

  .ui-steps {
    margin-bottom: var(--pl-space-md);
  }
  .ui-steps__item {
    font-size: 0.78rem;
  }
  .ui-steps__sep {
    width: 1rem;
  }

  .sub-cta {
    text-align: center;
    justify-content: center;
  }
  .sub-cta p {
    max-width: none;
  }
  .dash-hero {
    text-align: left;
  }
  .result__icon {
    width: 4.25rem;
    height: 4.25rem;
    font-size: 2rem;
  }

  /* Touch targets: nothing tappable drops below 44px on a phone. */
  main .btn,
  .ui-toggle__btn,
  .dash-nav__link,
  .checkout__edit,
  .cart-line__remove {
    min-height: 44px;
  }
  main .btn,
  .checkout__edit,
  .cart-line__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cart-line__remove {
    justify-content: flex-start;
  }
  .ui-input-action {
    min-width: 44px;
    min-height: 44px;
  }
  .sdp-pill,
  .cat-tabs__tab,
  .fdrop__selectall {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Orders: the table becomes a stack of cards. */
  .dash-orders__table {
    display: none;
  }
  .dash-orderlist {
    display: grid;
  }
}

/* ---------- 667 · phone landscape ---------- */
@media screen and (max-width: 667px) {
  .plan-grid {
    gap: var(--pl-space-md);
  }
  .sub-hero__proof {
    gap: var(--pl-space-2xs) var(--pl-space-md);
  }
}

/* ---------- 575 · phone ---------- */
@media screen and (max-width: 575px) {
  :root {
    --pl-card-pad: 1rem;
    --pl-space-xl: 1.5rem;
  }

  .page-heading,
  .collection__title {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }
  .lead-text,
  .section__sub {
    font-size: 0.95rem;
  }
  .sub-heading {
    font-size: 1.05rem;
  }

  /* One plan at a time, and one add-on at a time. */
  .plan-grid,
  .addon-grid,
  .result__next,
  .cart-usp,
  .dash-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-card--featured {
    order: -1;
  }

  /* Primary actions go full width so they are easy to hit. */
  .btn-row > .btn,
  .result__actions > .btn,
  .cart__actions > .btn {
    width: 100%;
  }
  .btn-row {
    gap: var(--pl-space-xs);
  }

  .ui-card__head {
    flex-wrap: wrap;
  }
  .ui-summary__row--total dd,
  .ui-summary__row--total strong {
    font-size: 1.2rem;
  }

  .cart-promo {
    flex-direction: column;
  }
  .cart-promo .btn {
    width: 100%;
  }

  .result {
    padding-top: var(--pl-space-lg);
  }
  .sub-cta {
    padding: var(--pl-space-lg) var(--pl-space-md);
  }
  .dash-hero {
    padding: var(--pl-space-lg) var(--pl-space-md);
  }
  .dash-stats {
    gap: var(--pl-space-xs);
  }
  .dash-stat__value {
    font-size: 1.4rem;
  }
  .ui-empty,
  .listing__empty {
    padding: var(--pl-space-2xl) var(--pl-space-sm);
  }
}

/* ---------- 480 · small phone ---------- */
@media screen and (max-width: 480px) {
  .sub-hero__proof {
    flex-direction: column;
    align-items: center;
    gap: var(--pl-space-2xs);
  }
  .ui-toggle__btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  .plan-card__amount {
    font-size: 1.85rem;
  }
  .cart-line__title,
  .ui-item__title {
    font-size: 0.92rem;
  }
  .checkout__edit {
    font-size: 0.78rem;
  }
  .result__ref {
    font-size: 0.82rem;
    padding: var(--pl-space-2xs) var(--pl-space-sm);
  }
}

/* ---------- 414 · phone ---------- */
@media screen and (max-width: 414px) {
  .cart-line {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
  .cart-line__media {
    width: 4rem;
  }
  .ui-item {
    gap: var(--pl-space-sm);
  }
  .ui-item__media {
    flex-basis: 3.75rem;
    width: 3.75rem;
  }
  .dash-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pl-space-2xs);
  }
}

/* ---------- 380 · small phone ---------- */
@media screen and (max-width: 380px) {
  :root {
    --pl-card-pad: 0.9rem;
  }
  .qty-stepper__btn {
    width: 2rem;
    height: 2rem;
  }
  .qty-stepper__input {
    width: 2.25rem;
  }
  .cart-line__actions {
    gap: var(--pl-space-sm);
  }
  .ui-table th,
  .ui-table td {
    padding: var(--pl-space-xs) var(--pl-space-sm);
  }
  .dash-ordercard__top {
    flex-wrap: wrap;
  }
}

/* ---------- 375 · iPhone ---------- */
@media screen and (max-width: 375px) {
  .page-heading,
  .collection__title {
    font-size: 1.5rem;
  }
  .section-heading,
  .section__title {
    font-size: 1.4rem;
  }
  .plan-card__amount {
    font-size: 1.7rem;
  }
  .ui-steps__item {
    font-size: 0.74rem;
    gap: 0.35rem;
  }
  .ui-steps__item::before {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.68rem;
  }
}

/* ---------- 320 · smallest supported ---------- */
@media screen and (max-width: 320px) {
  :root {
    --pl-card-pad: 0.8rem;
    --pl-space-lg: 1.15rem;
  }
  .cart-line {
    grid-template-columns: minmax(0, 1fr);
  }
  .cart-line__media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .cart-line__actions {
    justify-content: space-between;
    width: 100%;
  }
  .ui-item {
    flex-wrap: wrap;
  }
  .ui-item__price {
    width: 100%;
    text-align: left;
  }
  .dash-profile {
    flex-wrap: wrap;
  }
  .result__icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------------------
   Toast — confirmation after an item is added to the basket.
   Part of the UI kit; injected by shop.js on demand.
   ------------------------------------------------------------- */
.lpp-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.15rem;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-ink);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--pl-shadow);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}
.lpp-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
}
.lpp-toast > i {
  color: var(--pl-mint);
  font-size: 1.05rem;
}
.lpp-toast__link {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}
.lpp-toast__link:hover {
  color: var(--pl-amber);
}
@media (prefers-reduced-motion: reduce) {
  .lpp-toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}
@media screen and (max-width: 575px) {
  .lpp-toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    transform: translateY(150%);
    max-width: none;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .lpp-toast.is-shown {
    transform: translateY(0);
  }
}


/* =============================================================
   HOMEPAGE CATEGORY TILES
   The home page carried two identical card grids back to back.
   The category grid is now an image tile with the label set over
   the picture; the grid below it keeps the catalogue card, so the
   two sections read as two different things.
   ============================================================= */
#categoryGrid .category-card {
  border: 0;
  box-shadow: none;
  background: var(--pl-ink);
}
#categoryGrid .category-card:hover {
  transform: none;
  box-shadow: var(--pl-shadow);
}
#categoryGrid .category-card__top {
  aspect-ratio: 4 / 5;
  padding: 0;
}
/* A permanent scrim — the label sits on it, so it cannot depend on
   hover the way the old description did. */
#categoryGrid .category-card__top::after {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(14, 16, 20, 0.85) 0%,
    rgba(14, 16, 20, 0.34) 30%,
    rgba(14, 16, 20, 0) 52%
  );
}
#categoryGrid .category-card__desc,
#categoryGrid .category-card__more {
  display: none;
}
#categoryGrid .category-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  background: none;
  padding: 1rem 1.05rem 1.1rem;
  gap: 0.1rem;
}
#categoryGrid .category-card__title {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}
#categoryGrid .category-card__price {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}
#categoryGrid .category-card__price strong {
  color: #fff;
  font-weight: 600;
}
/* The tag chip sits top-left over the image. */
#categoryGrid .category-card__tag {
  z-index: 3;
}
@media (max-width: 767.98px) {
  #categoryGrid .category-card__top {
    aspect-ratio: 4 / 5;
  }
}

/* =================================================================
   REDESIGN LAYER — "FOUR-COLOUR PROCESS"
   -----------------------------------------------------------------
   A complete visual re-drawing of the pages that existed before the
   commerce flow was built: home, collection, product, bespoke quote
   and the three same-day pages.

   The palette is lifted straight off the brand mark — the four
   process inks of the print roll, sampled from the logo file:

        cyan    #00a8e7      magenta #e8318b
        yellow  #f4dc60      key     #000000
        paper   #fafafa

   Where the previous design held those inks back and drew a neutral
   grey interface, this one makes them the language of the page. A
   sheet of paper, an ink hairline, a colour-control strip along the
   edge, trim corners, a halftone screen, and a hover that lifts the
   sheet and prints a coloured shadow slightly out of register
   behind it. Nothing here is decoration for its own sake: the
   channel colour tells you which band of the page you are in.

   Everything is scoped to `body.lp-rd`, so the pages built for the
   basket / account / checkout flow keep their own system untouched.
   ================================================================= */

body.lp-rd {
  /* ---- The four process inks, straight from the logo --------- */
  --k: #0b0b0d;
  --c: #00a8e7;
  --m: #e8318b;
  --y: #f4dc60;

  /* Working tints of each channel: a darker press value for hover
     and text-on-white, and a 6% wash for seats and fills. */
  --c-deep: #0089bd;
  --m-deep: #c41f72;
  --y-deep: #a8880a;
  --c-wash: #e8f7fd;
  --m-wash: #fdecf4;
  --y-wash: #fdf9e6;

  /* ---- Paper and ink ramp ------------------------------------
     Grey is mixed from the key ink rather than picked, so every
     neutral on the page belongs to the same black. */
  --paper: #fafafa;
  --sheet: #ffffff;
  --ink: #0b0b0d;
  --ink-2: #33333a;
  --ink-3: #5f6069;
  --ink-4: #8e8f98;
  --wash: #f2f2f4;
  --wash-2: #ebebee;

  /* Hairlines are ink at low opacity, never a grey swatch — they
     stay in the same colour family as the type sitting on them. */
  --hair: rgba(11, 11, 13, 0.13);
  --hair-2: rgba(11, 11, 13, 0.22);
  --hair-ink: rgba(11, 11, 13, 0.9);

  /* ---- The colour-control strip ------------------------------
     The four-square bar a printer runs down the edge of a sheet.
     It is the one recurring mark of this design. */
  --bar: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    var(--k) 75% 100%
  );
  --bar-v: linear-gradient(
    180deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    var(--k) 75% 100%
  );

  /* ---- Channel -----------------------------------------------
     Each band of a page sets --ch to one of the inks; every accent
     inside it then reads the variable rather than a colour. */
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);

  /* ---- Geometry ----------------------------------------------
     Trimmed, not rounded. 3px is the whole radius system; the pill
     survives only where a shape is genuinely a capsule. */
  --r: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  /* ---- Elevation ---------------------------------------------
     A sheet lifted off the page casts a hard offset shadow, not a
     blur. On hover it prints a second impression slightly out of
     register in the channel colour. */
  --lift: 5px 5px 0 var(--k);
  --lift-ch: 5px 5px 0 var(--ch);
  --lift-sm: 3px 3px 0 var(--k);
  --drop: 0 1px 2px rgba(11, 11, 13, 0.05), 0 10px 24px -14px rgba(11, 11, 13, 0.3);

  /* ---- Type ---------------------------------------------------
     One family. The display cut is set very tight and very large;
     the micro-label cut is spaced wide and uppercase, the way a
     press mark is set. The contrast between those two is what
     carries the hierarchy, so there is little in between. */
  --face: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --band-y: clamp(1.5rem, 3vw, 3rem);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 0.22s;

  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--face-ui);
}

/* Registration mark — the crosshair a press uses to line the four
   plates up. Drawn once here and reused as a corner mark. */
body.lp-rd {
  --regmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230b0b0d' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 0v9M12 15v9M0 12h9M15 12h24'/%3E%3C/g%3E%3C/svg%3E");
  /* A halftone screen for dark bands. */
  --screen: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.16) 0.9px,
    transparent 1px
  );
}

/* -----------------------------------------------------------------
   TYPOGRAPHY
   ----------------------------------------------------------------- */

body.lp-rd h1,
body.lp-rd h2,
body.lp-rd h3,
body.lp-rd h4,
body.lp-rd h5,
body.lp-rd .hero__title,
body.lp-rd .section__title,
body.lp-rd .section-title {
  font-family: var(--face);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}

body.lp-rd .section__title,
body.lp-rd .section-title,
body.lp-rd .collection__title,
body.lp-rd .page-heading {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  margin: 0;
}

body.lp-rd .hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.25rem);
  letter-spacing: -0.038em;
  line-height: 0.98;
}

/* The micro-label. Uppercase, widely spaced, always preceded by the
   colour-control strip — that pairing is the signature of the
   system and it opens every section on the site. */
body.lp-rd .section__eyebrow,
body.lp-rd .section-tag,
body.lp-rd .sdp-summary__eyebrow,
body.lp-rd .sdc-note__eyebrow,
body.lp-rd .hero__eyebrow,
body.lp-rd .finish-content .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--face-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.85rem;
  border-radius: 0;
}

body.lp-rd .section__eyebrow::before,
body.lp-rd .section-tag::before,
body.lp-rd .sdp-summary__eyebrow::before,
body.lp-rd .sdc-note__eyebrow::before,
body.lp-rd .hero__eyebrow::before,
body.lp-rd .finish-content .tag::before {
  content: "";
  width: 2.6rem;
  height: 0.5rem;
  background: var(--bar);
  flex: none;
}

body.lp-rd .section__sub,
body.lp-rd .section-subtitle,
body.lp-rd .collection__intro,
body.lp-rd .page-intro,
body.lp-rd .hero__lead {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 56ch;
  margin: 1rem 0 0;
}

/* -----------------------------------------------------------------
   SECTION BANDS AND HEADS
   -----------------------------------------------------------------
   Sections alternate channel, so the accent colour tells you where
   in the page you are. The rule under a section head is the full
   colour strip on the left and a hairline for the rest of the
   width — a bar running off the edge of a printed sheet.
   ----------------------------------------------------------------- */

body.lp-rd .section,
body.lp-rd .delivery-section,
body.lp-rd .review-rating-section {
  padding-top: var(--band-y);
  padding-bottom: var(--band-y);
  position: relative;
}

body.lp-rd .section__head,
body.lp-rd .delivery-section .text-center {
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--hair);
  text-align: left;
  max-width: none;
}

body.lp-rd .delivery-section .text-center {
  text-align: left;
}

/* The strip sits on the rule, flush left, and reads as the start of
   the section rather than an ornament floating above it. */
body.lp-rd .section__head::after,
body.lp-rd .delivery-section .text-center::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8.5rem;
  height: 3px;
  background: var(--bar);
}

body.lp-rd .section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

body.lp-rd .section__head--row > div {
  flex: 1 1 24rem;
  min-width: 0;
}

/* "View all" is set as a press instruction: small, uppercase, with
   a rule under it that fills with the channel colour on hover. */
body.lp-rd .section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 0 0.45rem;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: none;
  flex: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.lp-rd .section__link i {
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .section__link:hover {
  color: var(--ch-deep);
  border-bottom-color: var(--ch);
}
body.lp-rd .section__link:hover i {
  transform: translateX(4px);
}

/* -----------------------------------------------------------------
   BUTTONS
   -----------------------------------------------------------------
   Square, ink-filled, and set in the micro-label style. The press
   feedback is the point: at rest the button sits flat; on hover it
   lifts up and to the left and prints a hard second impression in
   the channel colour behind it, slightly out of register. On press
   it drops back down onto that impression.
   ----------------------------------------------------------------- */

body.lp-rd .btn {
  --bs-btn-border-radius: var(--r);
  font-family: var(--face-ui);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.76rem;
  border-radius: var(--r);
  border-width: 2px;
  padding: 0.9rem 1.5rem;
  line-height: 1.1;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

body.lp-rd .btn-lg {
  padding: 1.1rem 2rem;
  font-size: 0.82rem;
}
body.lp-rd .btn-sm {
  padding: 0.65rem 1.1rem;
  font-size: 0.7rem;
}

body.lp-rd .btn-primary {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
  box-shadow: none;
}
body.lp-rd .btn-primary:hover,
body.lp-rd .btn-primary:focus-visible {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ch);
}
body.lp-rd .btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ch);
}

/* The commerce call to action is magenta — the one ink in the mark
   that reads as an offer rather than as structure. */
body.lp-rd .btn-secondary {
  background: var(--m);
  border-color: var(--m);
  color: #fff;
}
body.lp-rd .btn-secondary:hover,
body.lp-rd .btn-secondary:focus-visible {
  background: var(--m);
  border-color: var(--m);
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--k);
}
body.lp-rd .btn-secondary:active {
  transform: none;
  box-shadow: none;
}

body.lp-rd .btn-outline-primary,
body.lp-rd .btn-outline-dark,
body.lp-rd .btn-light {
  background: var(--sheet);
  border-color: var(--k);
  color: var(--ink);
}
body.lp-rd .btn-outline-primary:hover,
body.lp-rd .btn-outline-dark:hover,
body.lp-rd .btn-light:hover,
body.lp-rd .btn-outline-primary:focus-visible,
body.lp-rd .btn-outline-dark:focus-visible,
body.lp-rd .btn-light:focus-visible {
  background: var(--sheet);
  border-color: var(--k);
  color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ch);
}
body.lp-rd .btn-outline-primary:active,
body.lp-rd .btn-outline-dark:active,
body.lp-rd .btn-light:active {
  transform: none;
  box-shadow: none;
}

body.lp-rd .btn-outline-light {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
body.lp-rd .btn-outline-light:hover,
body.lp-rd .btn-outline-light:focus-visible {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}

body.lp-rd .btn:disabled,
body.lp-rd .btn.disabled {
  transform: none;
  box-shadow: none;
  opacity: 0.45;
}

body.lp-rd :focus-visible {
  outline: 2px solid var(--k);
  outline-offset: 3px;
  border-radius: 0;
}

body.lp-rd ::selection {
  background: var(--y);
  color: var(--k);
}

/* -----------------------------------------------------------------
   BREADCRUMB AND PAGE HEAD
   ----------------------------------------------------------------- */

body.lp-rd .breadcrumb-bar {
  padding: 1.5rem 0 0;
  border: 0;
  background: none;
}
body.lp-rd .breadcrumb-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .breadcrumb-bar__list li + li::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 1px;
  background: var(--hair-2);
  vertical-align: middle;
  margin-right: 0.5rem;
}
body.lp-rd .breadcrumb-bar__list a {
  color: var(--ink-4);
  transition: color var(--dur) var(--ease);
}
body.lp-rd .breadcrumb-bar__list a:hover {
  color: var(--ink);
}
body.lp-rd .breadcrumb-bar__list li[aria-current] {
  color: var(--ink);
}

body.lp-rd .page-head,
body.lp-rd .collection__head {
  position: relative;
  padding: clamp(2rem, 4vw, 3.25rem) 0 1.75rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair);
  text-align: left;
  max-width: none;
}
body.lp-rd .page-head::after,
body.lp-rd .collection__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8.5rem;
  height: 3px;
  background: var(--bar);
}

/* -----------------------------------------------------------------
   THE CATALOGUE CARD
   -----------------------------------------------------------------
   Every product on the site is this card: home, collection, related
   products, same-day. It is drawn as a printed proof — a white
   sheet with a colour-control strip across the head of the image,
   an ink hairline, and square corners. At rest it is flat. On hover
   it lifts off the page and prints a hard second impression in the
   channel colour, a few pixels out of register.
   ----------------------------------------------------------------- */

body.lp-rd .category-card,
body.lp-rd .sameday-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

body.lp-rd .category-card:hover,
body.lp-rd .category-card:focus-visible,
body.lp-rd .category-card:focus-within,
body.lp-rd .sameday-card:hover,
body.lp-rd .sameday-card:focus-within {
  transform: translate(-4px, -4px);
  border-color: var(--hair-ink);
  box-shadow: 7px 7px 0 var(--ch);
}

/* The colour strip across the head of the media. */
body.lp-rd .category-card::before,
body.lp-rd .sameday-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--bar);
  z-index: 4;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
body.lp-rd .category-card:hover::before,
body.lp-rd .category-card:focus-within::before,
body.lp-rd .sameday-card:hover::before,
body.lp-rd .sameday-card:focus-within::before {
  opacity: 1;
}

body.lp-rd .category-card__top,
body.lp-rd .sameday-card__media {
  aspect-ratio: 4 / 3;
  padding: 1.15rem;
  border-radius: 0;
  border-bottom: 1px solid var(--hair);
  background: var(--wash);
}

body.lp-rd .category-card__img,
body.lp-rd .sameday-card__img {
  border-radius: 0;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
body.lp-rd .category-card:hover .category-card__img,
body.lp-rd .category-card:focus-within .category-card__img,
body.lp-rd .sameday-card:hover .sameday-card__img {
  transform: scale(1.05);
}

/* The hover scrim is solid ink with a halftone screen laid over it,
   so the overlay reads as a printed panel rather than a gradient. */
body.lp-rd .category-card__top::after {
  background: linear-gradient(
      to top,
      rgba(11, 11, 13, 0.94) 0%,
      rgba(11, 11, 13, 0.78) 46%,
      rgba(11, 11, 13, 0.28) 100%
    ),
    var(--screen);
  background-size: auto, 7px 7px;
  transition: opacity 0.35s var(--ease);
}

body.lp-rd .category-card__desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.85rem;
}

body.lp-rd .category-card__more {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--y);
  gap: 0.5rem;
}

/* Product tag — a square press stamp, not a pill. */
body.lp-rd .category-card__tag,
body.lp-rd .sameday-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  border-radius: 0;
  background: var(--k);
  color: #fff;
  font-family: var(--face-ui);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  box-shadow: none;
  border: 0;
}
/* "New" reads as an announcement, so it takes the yellow plate. */
body.lp-rd .category-card__tag:not(:empty) {
  background: var(--k);
}

body.lp-rd .category-card__body,
body.lp-rd .sameday-card__body {
  padding: 1.05rem 1.15rem 1.2rem;
  gap: 0.4rem;
  background: var(--sheet);
  align-items: flex-start;
  text-align: left;
}

body.lp-rd .category-card__title,
body.lp-rd .sameday-card__title {
  font-family: var(--face);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}

/* The price is set as a press figure: the word "from" drops to a
   micro-label and the number carries the weight. */
body.lp-rd .category-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .category-card__price strong {
  font-family: var(--face);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   HOME — HERO
   -----------------------------------------------------------------
   The photograph is printed on the page rather than framed by it:
   full bleed, a paper-white wash on the reading side, the colour
   strip running down the left edge of the copy, and the headline
   set very large and very tight.
   ----------------------------------------------------------------- */

body.lp-rd .hero {
  border-bottom: 1px solid var(--hair);
}

body.lp-rd .hero__slider,
body.lp-rd .hero__slider .slick-list,
body.lp-rd .hero__slider .slick-track,
body.lp-rd .hero__slider .slick-slide {
  background: var(--paper);
}

body.lp-rd .hero__slide {
  background: var(--paper);
  min-height: clamp(520px, 40vw, 700px);
}

body.lp-rd .hero__slide--bg::before {
  background: linear-gradient(
    90deg,
    rgba(250, 250, 250, 0.97) 0%,
    rgba(250, 250, 250, 0.9) 26%,
    rgba(250, 250, 250, 0.45) 48%,
    rgba(250, 250, 250, 0) 68%
  );
}

/* A halftone screen over the whole frame ties the photograph to the
   printed language of the rest of the page. */
body.lp-rd .hero__slide--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(11, 11, 13, 0.07) 0.9px, transparent 1px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

body.lp-rd .hero__copy {
  position: relative;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
body.lp-rd .hero__copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 6px;
  background: var(--bar-v);
}

body.lp-rd .hero__eyebrow {
  color: var(--ink-2);
  margin-bottom: 1.1rem;
}

body.lp-rd .hero__lead {
  color: var(--ink-2);
  font-size: 1.06rem;
  max-width: 46ch;
  margin: 1.15rem 0 0;
}
body.lp-rd .hero__lead strong {
  font-weight: 700;
  color: var(--ink);
  background: var(--y);
  padding: 0.1em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

body.lp-rd .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
body.lp-rd .hero__actions .btn-outline-light {
  border-color: var(--k);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}
body.lp-rd .hero__actions .btn-outline-light:hover {
  background: var(--k);
  color: #fff;
}

/* Slick furniture: dots become the four plates, arrows become
   square ink buttons. */
body.lp-rd .hero .slick-dots li button:before {
  display: none;
}
body.lp-rd .hero .slick-dots {
  bottom: 1.75rem;
  display: flex !important;
  gap: 0.4rem;
  justify-content: flex-start;
  padding-left: max(1.5rem, calc((100vw - 1320px) / 2 + 2rem));
}
body.lp-rd .hero .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
body.lp-rd .hero .slick-dots li button {
  width: 2.25rem;
  height: 5px;
  padding: 0;
  border-radius: 0;
  background: rgba(11, 11, 13, 0.22);
  transition: background var(--dur) var(--ease);
}
body.lp-rd .hero .slick-dots li:nth-child(1).slick-active button {
  background: var(--c);
}
body.lp-rd .hero .slick-dots li:nth-child(2).slick-active button {
  background: var(--m);
}
body.lp-rd .hero .slick-dots li:nth-child(3).slick-active button {
  background: var(--k);
}

/* -----------------------------------------------------------------
   HOME — REVIEW RATING STRIP
   -----------------------------------------------------------------
   A press control strip: an ink band, the score set in the display
   cut, the stars in yellow, and the four plates running along the
   bottom edge.
   ----------------------------------------------------------------- */

body.lp-rd .review-rating-section {
  padding: 0;
  background: var(--k);
}
body.lp-rd .review-rating-section .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
body.lp-rd .rating-box {
  position: relative;
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  color: #fff;
}
body.lp-rd .rating-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--bar);
}
body.lp-rd .rating-title {
  font-family: var(--face);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff;
}
body.lp-rd .rating-stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--y);
  font-size: 1.05rem;
}
body.lp-rd .rating-stars span,
body.lp-rd .rating-stars .half {
  color: var(--y);
  background: none;
}
body.lp-rd .rating-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
body.lp-rd .rating-text strong {
  color: #fff;
  font-weight: 700;
}
body.lp-rd .trustpilot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  padding: 0.4rem 0.8rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
body.lp-rd .trustpilot i {
  color: var(--c);
}

/* -----------------------------------------------------------------
   HOME — CHANNEL ROTATION
   -----------------------------------------------------------------
   Each band down the home page takes the next plate, so the accent
   colour is a position indicator rather than a decoration.
   ----------------------------------------------------------------- */

body.lp-rd .categories#categories {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}
body.lp-rd .popular-products {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .moments {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
}
body.lp-rd .delivery-section {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
  background: var(--sheet);
  border-top: 1px solid var(--hair);
}
body.lp-rd .finishes {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  border-top: 1px solid var(--hair);
}

/* -----------------------------------------------------------------
   HOME — CATEGORY TILE GRID
   -----------------------------------------------------------------
   The first grid on the page must not be the same object as the
   second. This one is a stack of image tiles: the label sits on an
   ink footer band, and the plate colour fills that band on hover.
   ----------------------------------------------------------------- */

body.lp-rd #categoryGrid .category-card {
  border: 0;
  background: var(--k);
}
body.lp-rd #categoryGrid .category-card:hover,
body.lp-rd #categoryGrid .category-card:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--ch);
}
body.lp-rd #categoryGrid .category-card__top {
  aspect-ratio: 3 / 4;
  border-bottom: 0;
  padding: 0;
}
body.lp-rd #categoryGrid .category-card__top::after {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(11, 11, 13, 0.9) 0%,
    rgba(11, 11, 13, 0.35) 34%,
    rgba(11, 11, 13, 0) 58%
  );
}
body.lp-rd #categoryGrid .category-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  background: none;
  padding: 1.1rem 1.15rem 1.2rem;
  gap: 0.25rem;
}
body.lp-rd #categoryGrid .category-card__title {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
body.lp-rd #categoryGrid .category-card__price {
  color: rgba(255, 255, 255, 0.55);
}
body.lp-rd #categoryGrid .category-card__price strong {
  color: #fff;
  font-size: 0.95rem;
}
/* The plate colour draws itself along the foot of the tile. */
body.lp-rd #categoryGrid .category-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  z-index: 3;
  background: var(--ch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
body.lp-rd #categoryGrid .category-card:hover::after,
body.lp-rd #categoryGrid .category-card:focus-within::after {
  transform: scaleX(1);
}
/* Every fourth tile shifts plate, so the grid reads as four-colour. */
body.lp-rd #categoryGrid > div:nth-child(4n + 2) .category-card {
  --ch: var(--m);
}
body.lp-rd #categoryGrid > div:nth-child(4n + 3) .category-card {
  --ch: var(--y);
}
body.lp-rd #categoryGrid > div:nth-child(4n + 4) .category-card {
  --ch: var(--k);
}

/* -----------------------------------------------------------------
   HOME — MOMENTS VIDEO
   ----------------------------------------------------------------- */

body.lp-rd .moments__video {
  position: relative;
  border: 1px solid var(--hair-ink);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--k);
}
body.lp-rd .moments__video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--bar);
  z-index: 3;
  pointer-events: none;
}
body.lp-rd .video-player {
  border-radius: 0;
  border: 0;
  display: block;
  width: 100%;
}
body.lp-rd .video-player__media {
  border-radius: 0;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  width: 100%;
}
/* The play control is a square ink plate with a yellow register
   ring — it reads as a press button, not a media chrome bubble. */
body.lp-rd .video-player__play {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 0;
  background: var(--k);
  color: #fff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 8px 8px 0 var(--y);
  font-size: 1.9rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.lp-rd .video-player:hover .video-player__play {
  transform: translate(-4px, -4px) scale(1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 12px 12px 0 var(--m);
}

/* -----------------------------------------------------------------
   HOME / COLLECTION / SAME-DAY — PROMISE CARDS
   -----------------------------------------------------------------
   Five short services in a row. Drawn as tall proof sheets with the
   plate colour running down the left edge; the sheet inverts to ink
   on hover so the row animates as a set of printed panels.
   ----------------------------------------------------------------- */

body.lp-rd .promise-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--ch);
  border-radius: var(--r);
  padding: 1.75rem 1.4rem 1.5rem;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.lp-rd .promise-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--k);
  border-color: var(--hair-ink);
  border-left-color: var(--ch);
}

body.lp-rd .promise-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--ch-wash);
  color: var(--ch-deep);
  font-size: 1.35rem;
  border: 0;
  box-shadow: none;
  margin-bottom: 1.25rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .promise-card:hover .promise-icon {
  background: var(--k);
  color: #fff;
}

body.lp-rd .promise-card h4 {
  font-family: var(--face);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
body.lp-rd .promise-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 1.35rem;
}
body.lp-rd .promise-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ch);
  border-radius: 0;
  padding: 0 0 0.35rem;
  transition: color var(--dur) var(--ease);
}
body.lp-rd .promise-btn i {
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .promise-btn:hover {
  color: var(--ch-deep);
}
body.lp-rd .promise-btn:hover i {
  transform: translateX(4px);
}

/* Each card in the row takes the next plate. */
body.lp-rd .moments .row > div:nth-child(5n + 1) .promise-card {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}
body.lp-rd .moments .row > div:nth-child(5n + 2) .promise-card {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
}
body.lp-rd .moments .row > div:nth-child(5n + 3) .promise-card {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
}
body.lp-rd .moments .row > div:nth-child(5n + 4) .promise-card {
  --ch: var(--k);
  --ch-deep: var(--k);
  --ch-wash: var(--wash);
}
body.lp-rd .moments .row > div:nth-child(5n + 5) .promise-card {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}

/* -----------------------------------------------------------------
   HOME — SPECIAL FINISHES SLIDER
   -----------------------------------------------------------------
   Full-bleed editorial band. The photograph is screened back under
   an ink wash and the copy sits on the left in the display cut,
   which makes it read as a printed spread rather than a banner.
   ----------------------------------------------------------------- */

body.lp-rd .finish-slider-section {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--k);
}
body.lp-rd .finish-slide {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: clamp(400px, 34vw, 560px);
  background-size: cover;
  background-position: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
body.lp-rd .finish-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(11, 11, 13, 0.94) 0%,
      rgba(11, 11, 13, 0.82) 40%,
      rgba(11, 11, 13, 0.35) 74%,
      rgba(11, 11, 13, 0.2) 100%
    ),
    var(--screen);
  background-size: auto, 7px 7px;
}
body.lp-rd .finish-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 1320px);
  margin-inline: auto;
  max-width: none;
  padding: 0 0.75rem;
  color: #fff;
  text-align: left;
}
body.lp-rd .finish-content > * {
  max-width: 42rem;
}
body.lp-rd .finish-content .tag {
  color: rgba(255, 255, 255, 0.75);
}
body.lp-rd .finish-content h2 {
  font-family: var(--face);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 1.15rem;
}
body.lp-rd .finish-content p {
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
  margin: 0 0 2rem;
  max-width: 44ch;
}
body.lp-rd .finish-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--y);
  color: var(--k);
  border: 2px solid var(--y);
  border-radius: var(--r);
  padding: 1rem 1.85rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.lp-rd .finish-btn:hover {
  background: var(--y);
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .finish-slider .slick-dots {
  bottom: 1.5rem;
  display: flex !important;
  gap: 0.4rem;
  justify-content: center;
}
body.lp-rd .finish-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
body.lp-rd .finish-slider .slick-dots li button {
  width: 2.25rem;
  height: 5px;
  padding: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.3);
}
body.lp-rd .finish-slider .slick-dots li button:before {
  display: none;
}
body.lp-rd .finish-slider .slick-dots li.slick-active button {
  background: var(--y);
}

/* -----------------------------------------------------------------
   HOME — DELIVERY OPTIONS
   -----------------------------------------------------------------
   Four service tiers. The original used four unrelated accent
   colours; here the four options take the four process plates,
   which is the same information carried by the brand's own palette.
   ----------------------------------------------------------------- */

body.lp-rd .delivery-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .delivery-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ch);
}
body.lp-rd .delivery-card::after {
  display: none;
}
body.lp-rd .delivery-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--k);
  border-color: var(--hair-ink);
}

body.lp-rd .delivery-card[data-accent="violet"] {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}
body.lp-rd .delivery-card[data-accent="amber"] {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
}
body.lp-rd .delivery-card[data-accent="mint"] {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
}
body.lp-rd .delivery-card[data-accent="coral"] {
  --ch: var(--k);
  --ch-deep: var(--k);
  --ch-wash: var(--wash);
}

body.lp-rd .delivery-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}
body.lp-rd .delivery-icon {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--ch-wash);
  color: var(--ch-deep);
  border: 0;
  box-shadow: none;
  font-size: 1.3rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .delivery-card:hover .delivery-icon {
  background: var(--k);
  color: #fff;
}
body.lp-rd .delivery-badge {
  border-radius: 0;
  background: var(--k);
  color: #fff;
  border: 0;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}
body.lp-rd .delivery-card h4 {
  font-family: var(--face);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}
body.lp-rd .delivery-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 1.15rem;
}
body.lp-rd .delivery-meta {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 0.55rem;
}
body.lp-rd .delivery-meta li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
body.lp-rd .delivery-meta i {
  color: var(--ch-deep);
  font-size: 0.95rem;
}
body.lp-rd .delivery-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ch);
  padding-bottom: 0.35rem;
  background: none;
  border-radius: 0;
}
body.lp-rd .delivery-link i {
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .delivery-link:hover i {
  transform: translateX(4px);
}

/* -----------------------------------------------------------------
   HOME — TRENDING / BLOG CARDS
   ----------------------------------------------------------------- */

body.lp-rd .finish-card {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .finish-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--ch);
  border-color: var(--hair-ink);
}
body.lp-rd .finish-card__media {
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .finish-card__media img {
  aspect-ratio: 4 / 3;
}
body.lp-rd .finish-card__badge {
  top: 0;
  left: 0;
  border-radius: 0;
  background: var(--k);
  box-shadow: none;
  backdrop-filter: none;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
}
body.lp-rd .finish-card__badge--foil {
  background: var(--k);
  color: var(--y);
}
body.lp-rd .finish-card__badge--soft {
  background: var(--k);
  color: var(--c);
}
body.lp-rd .finish-card__badge--uv {
  background: var(--k);
  color: #fff;
}
body.lp-rd .finish-card__badge--edge {
  background: var(--k);
  color: var(--m);
}
body.lp-rd .finish-card__body {
  padding: 1.2rem 1.25rem 1.35rem;
}
body.lp-rd .finish-card__meta {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  gap: 1rem;
  margin-bottom: 0.75rem;
}
body.lp-rd .finish-card__meta i {
  color: var(--ch);
  font-size: 0.8rem;
}
body.lp-rd .finish-card__title {
  font-family: var(--face);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  margin-bottom: 0.5rem;
}
body.lp-rd .finish-card__title a {
  background-image: linear-gradient(var(--ch), var(--ch));
  color: var(--ink);
}
body.lp-rd .finish-card:hover .finish-card__title a,
body.lp-rd .finish-card__title a:hover {
  color: var(--ink);
}
body.lp-rd .finish-card__body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 1.15rem;
}
body.lp-rd .finish-card__link {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ch);
  padding-bottom: 0.35rem;
  align-self: flex-start;
}
/* The four blog tiles run the four plates. */
body.lp-rd .finish-grid > div:nth-child(4n + 1) .finish-card {
  --ch: var(--c);
}
body.lp-rd .finish-grid > div:nth-child(4n + 2) .finish-card {
  --ch: var(--m);
}
body.lp-rd .finish-grid > div:nth-child(4n + 3) .finish-card {
  --ch: var(--y);
}
body.lp-rd .finish-grid > div:nth-child(4n + 4) .finish-card {
  --ch: var(--k);
}

/* -----------------------------------------------------------------
   Corrections to shapes the previous design had pinned:
   the rating strip was an inline pill, the video was capped at
   720px, the finishes band was an inset rounded card, and the
   delivery head was centred by a utility class.
   ----------------------------------------------------------------- */

body.lp-rd .rating-box {
  display: block;
  width: 100%;
}
body.lp-rd .review-rating-section .container {
  text-align: center;
}
body.lp-rd .rating-box .col-auto:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.2);
  height: 18px;
}

body.lp-rd .moments__video {
  max-width: none;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.lp-rd .finish-slider-section {
  padding: 0;
}
body.lp-rd .finish-slide {
  border-radius: 0;
  box-shadow: none;
}
body.lp-rd .finish-content {
  background: none;
  border: 0;
  margin-block: 0;
  color: rgba(255, 255, 255, 0.78);
}

body.lp-rd .delivery-section .text-center {
  text-align: left !important;
}

/* Slick arrows, wherever they appear, become square ink plates. */
body.lp-rd .slick-prev,
body.lp-rd .slick-next {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  background: var(--k);
  border: 0;
  box-shadow: none;
  color: #fff;
  z-index: 3;
  transition: background-color var(--dur) var(--ease);
}
body.lp-rd .slick-prev:hover,
body.lp-rd .slick-next:hover {
  background: var(--m);
}
body.lp-rd .slick-prev::before,
body.lp-rd .slick-next::before {
  color: #fff;
  opacity: 1;
  font-size: 1.05rem;
}

/* =================================================================
   COLLECTION — PRODUCT LISTING
   -----------------------------------------------------------------
   A catalogue index. The filter bar is drawn as a strip of press
   controls: square buttons with ink hairlines that fill with ink
   when they hold a value, on a sheet that spans the page.
   ================================================================= */

body.lp-rd .collection {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
  background: var(--paper);
}

body.lp-rd .collection__title {
  max-width: 20ch;
}
body.lp-rd .collection__intro {
  max-width: 62ch;
}

/* ---- Filter bar ---- */

body.lp-rd .filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: none;
  padding: 0.7rem;
  margin-bottom: 1.5rem;
  position: relative;
}
body.lp-rd .filterbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--bar);
}
body.lp-rd .filterbar__facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

body.lp-rd .fdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.7rem 0.95rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
body.lp-rd .fdrop__btn:hover {
  border-color: var(--hair-ink);
}
body.lp-rd .fdrop__btn i {
  font-size: 0.75rem;
  color: var(--ink-4);
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .fdrop__btn[aria-expanded="true"] {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .fdrop__btn[aria-expanded="true"] i {
  color: #fff;
  transform: rotate(180deg);
}
body.lp-rd .fdrop__btn--sort strong {
  font-weight: 650;
  color: inherit;
}

body.lp-rd .fdrop__panel {
  background: var(--sheet);
  border: 1px solid var(--hair-ink);
  border-radius: var(--r);
  box-shadow: 6px 6px 0 rgba(11, 11, 13, 0.1);
  padding: 0;
  margin-top: 0.45rem;
  overflow: hidden;
  min-width: 15rem;
}
body.lp-rd .fdrop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: var(--wash);
}
body.lp-rd .fdrop__selected {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .fdrop__selectall {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--c);
}
body.lp-rd .fdrop__list {
  padding: 0.35rem;
  max-height: 17rem;
  overflow-y: auto;
}
body.lp-rd .fopt,
body.lp-rd .sortopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--r);
  padding: 0.6rem 0.65rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .fopt:hover,
body.lp-rd .sortopt:hover {
  background: var(--wash);
  color: var(--ink);
}
/* The checked mark is a square swatch that fills with cyan — the
   same square the colour strip is built from. */
body.lp-rd .fopt::before {
  content: "";
  order: -1;
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 1px solid var(--hair-2);
  background: var(--sheet);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.lp-rd .fopt.is-checked::before {
  background: var(--c);
  border-color: var(--c);
  box-shadow: inset 0 0 0 2px var(--sheet);
}
body.lp-rd .fopt.is-checked {
  color: var(--ink);
  font-weight: 600;
}
body.lp-rd .fopt__label {
  flex: 1;
}
body.lp-rd .fopt__count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .sortopt.is-active {
  background: var(--k);
  color: #fff;
  font-weight: 600;
}
body.lp-rd .sortopt.is-active:hover {
  background: var(--k);
  color: #fff;
}

/* ---- Result meta ---- */

body.lp-rd .listing__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 0 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .listing__count {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .listing__count strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .listing__meta-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
body.lp-rd .active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
body.lp-rd .active-pills button,
body.lp-rd .active-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--k);
  color: #fff;
  border: 0;
  border-radius: var(--r);
  padding: 0.42rem 0.7rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.lp-rd .active-pills button:hover {
  background: var(--m);
}
body.lp-rd .listing__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.42rem 0.75rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .listing__clear:hover {
  border-color: var(--m);
  color: var(--m-deep);
}

/* The listing grid runs the four plates across each row of four,
   so the catalogue reads as a printed sheet rather than a table. */
body.lp-rd #productGrid > div:nth-child(4n + 1) .category-card {
  --ch: var(--c);
}
body.lp-rd #productGrid > div:nth-child(4n + 2) .category-card {
  --ch: var(--m);
}
body.lp-rd #productGrid > div:nth-child(4n + 3) .category-card {
  --ch: var(--y);
}
body.lp-rd #productGrid > div:nth-child(4n + 4) .category-card {
  --ch: var(--k);
}
body.lp-rd #popularGrid > div:nth-child(4n + 1) .category-card {
  --ch: var(--m);
}
body.lp-rd #popularGrid > div:nth-child(4n + 2) .category-card {
  --ch: var(--y);
}
body.lp-rd #popularGrid > div:nth-child(4n + 3) .category-card {
  --ch: var(--k);
}
body.lp-rd #popularGrid > div:nth-child(4n + 4) .category-card {
  --ch: var(--c);
}

body.lp-rd .listing__empty,
body.lp-rd .ui-empty {
  background: var(--sheet);
  border: 1px dashed var(--hair-2);
  border-radius: var(--r);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

/* Result meta was drawn as the bottom half of the filter bar; the
   filter bar is now its own object, so this becomes a plain rule. */
body.lp-rd .listing__meta {
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: none;
}

/* On an ink band the key plate disappears into the background, so
   the fourth square of the strip is set in paper instead. */
body.lp-rd .rating-box,
body.lp-rd .finish-content,
body.lp-rd .pdp-finishes__copy,
body.lp-rd .sdp-cta__card,
body.lp-rd .sdc-statement {
  --bar: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    #fff 75% 100%
  );
}

/* =================================================================
   PRODUCT DETAIL
   -----------------------------------------------------------------
   The page is laid out as a specification sheet: the image on a
   paper field on the left, and on the right a column that reads
   top to bottom as name, price, proof, description, then the one
   action. The configurator call sits in an ink panel so there is
   never a question about what the page is for.
   ================================================================= */

body.lp-rd .pdp {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  background: var(--paper);
}

body.lp-rd .pdp-hero {
  padding: clamp(0.875rem, 1.75vw, 1.375rem) 0 clamp(1rem, 2vw, 1.625rem);
}

/* ---- Gallery ---- */

body.lp-rd .pdp-gallery__stage {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
}
/* Trim marks in the corners of the proof, the way a printer's
   artwork is delivered. */
body.lp-rd .pdp-gallery__stage::before,
body.lp-rd .pdp-gallery__stage::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 3;
  pointer-events: none;
}
body.lp-rd .pdp-gallery__stage::before {
  top: 12px;
  left: 12px;
  border-top: 1px solid var(--hair-2);
  border-left: 1px solid var(--hair-2);
}
body.lp-rd .pdp-gallery__stage::after {
  bottom: 12px;
  right: 12px;
  border-bottom: 1px solid var(--hair-2);
  border-right: 1px solid var(--hair-2);
}
body.lp-rd .pdp-gallery__img {
  border-radius: 0;
}
body.lp-rd .pdp-gallery__flag {
  top: 0;
  left: 0;
  border-radius: 0;
  background: var(--k);
  color: #fff;
  box-shadow: none;
  border: 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  z-index: 4;
}
body.lp-rd .pdp-gallery__flag i {
  color: var(--y);
}
body.lp-rd .pdp-gallery__zoom,
body.lp-rd .pdp-gallery__nav,
body.lp-rd .pdp-arrow,
body.lp-rd .sdp-review__arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r);
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  color: var(--ink);
  box-shadow: none;
  display: inline-grid;
  place-items: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .pdp-gallery__zoom:hover,
body.lp-rd .pdp-gallery__nav:hover,
body.lp-rd .pdp-arrow:hover,
body.lp-rd .sdp-review__arrow:hover {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .pdp-thumb {
  border-radius: var(--r);
  border: 1px solid var(--hair);
  overflow: hidden;
  background: var(--sheet);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.lp-rd .pdp-thumb img {
  border-radius: 0;
}
body.lp-rd .pdp-thumb.is-active,
body.lp-rd .pdp-thumb.slick-current {
  border-color: var(--k);
  box-shadow: 0 0 0 1px var(--k);
}

/* ---- Product information column ---- */

body.lp-rd .pdp-info__title {
  font-family: var(--face);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

/* The price is the one figure on the page that should stop the eye,
   so it is set in the display cut at heading size with the caveat
   dropped to a micro-label beside it. */
body.lp-rd .pdp-info__from {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .pdp-info__from span {
  font-family: var(--face);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .pdp-info__from small {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}

body.lp-rd .pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--k);
  border: 0;
  border-radius: var(--r);
  padding: 0.5rem 0.85rem;
  margin-bottom: 1.5rem;
}
body.lp-rd .pdp-rating__brand {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
body.lp-rd .pdp-rating__brand i {
  color: var(--c);
}
body.lp-rd .pdp-rating__stars {
  color: var(--y);
  display: inline-flex;
  gap: 0.1rem;
  font-size: 0.85rem;
}
body.lp-rd .pdp-rating__score {
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

body.lp-rd .pdp-info__desc {
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--ink-3);
  margin-bottom: 1.35rem;
}
body.lp-rd .pdp-info__desc a,
body.lp-rd .pdp-info__points a,
body.lp-rd .pdp-more__text a,
body.lp-rd .section__sub a,
body.lp-rd .sdc-prose a {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ch);
  transition: background-color var(--dur) var(--ease);
}
body.lp-rd .pdp-info__desc a:hover,
body.lp-rd .pdp-info__points a:hover,
body.lp-rd .pdp-more__text a:hover,
body.lp-rd .section__sub a:hover,
body.lp-rd .sdc-prose a:hover {
  background: var(--ch-wash);
}

body.lp-rd .pdp-info__points {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.75rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--hair);
}
body.lp-rd .pdp-info__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
body.lp-rd .pdp-info__points i {
  color: var(--ch);
  font-size: 1rem;
  margin-top: 0.12rem;
  flex: none;
}

/* The configurator call: an ink panel with the halftone screen and
   the colour strip along its head. */
body.lp-rd .pdp-build {
  position: relative;
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border: 0;
  border-radius: var(--r);
  padding: 1.75rem 1.6rem 1.6rem;
  overflow: hidden;
}
body.lp-rd .pdp-build::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--bar);
}
body.lp-rd .pdp-build__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--face);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 0.65rem;
}
body.lp-rd .pdp-build__title i {
  color: var(--y);
  font-size: 1.1rem;
}
body.lp-rd .pdp-build p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.4rem;
  max-width: 46ch;
}
body.lp-rd .pdp-build__cta {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
}
body.lp-rd .pdp-build__cta:hover,
body.lp-rd .pdp-build__cta:focus-visible {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}

/* ---- Anchor sub-nav ---- */

body.lp-rd .pdp-subnav {
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
}
body.lp-rd .pdp-subnav.is-stuck {
  box-shadow: 0 1px 0 var(--hair), 0 8px 20px -16px rgba(11, 11, 13, 0.5);
}
body.lp-rd .pdp-subnav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  margin: 0;
}
body.lp-rd .pdp-subnav__list a {
  display: block;
  white-space: nowrap;
  padding: 1.1rem 1.15rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.lp-rd .pdp-subnav__list a:hover {
  color: var(--ink);
}
body.lp-rd .pdp-subnav__list a.is-active {
  color: var(--ink);
  background: none;
  border-bottom-color: var(--m);
}

/* ---- Section channels down the page ---- */

body.lp-rd .pdp-range {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}
body.lp-rd .pdp-stocks {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .pdp-guide {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
}
body.lp-rd .pdp-more {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
  background: var(--sheet);
  border-top: 1px solid var(--hair);
}
body.lp-rd .pdp-faq {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  background: var(--sheet);
}
body.lp-rd .pdp-related {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
  border-top: 1px solid var(--hair);
}

/* ---- Stock swatch cards ---- */

body.lp-rd .pdp-stocks__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
body.lp-rd .pdp-stocks__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
body.lp-rd .pdp-pill {
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.65rem 1rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .pdp-pill:hover {
  border-color: var(--hair-ink);
  color: var(--ink);
}
body.lp-rd .pdp-pill.is-active {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .pdp-stocks__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
body.lp-rd .pdp-stocks__count {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

body.lp-rd .stock-card {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .stock-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--ch);
  border-color: var(--hair-ink);
}
body.lp-rd .stock-card__swatch {
  border-radius: 0;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--hair);
  background-size: cover;
  background-position: center;
  margin: 0;
}
body.lp-rd .stock-card__title {
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
  padding: 1.1rem 1.15rem 0.5rem;
}
body.lp-rd .stock-card__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  padding: 0 1.15rem 1.25rem;
}
body.lp-rd .stock-card__fav {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hair);
  color: var(--ink-2);
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .stock-card__fav:hover {
  background: var(--k);
  border-color: var(--k);
  color: var(--y);
}

/* ---- Guide cards ---- */

body.lp-rd .guide-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-top: 4px solid var(--ch);
  border-radius: var(--r);
  padding: 1.75rem 1.5rem 1.6rem;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .guide-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--k);
  border-color: var(--hair-ink);
  border-top-color: var(--ch);
}
body.lp-rd .guide-card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--ch-wash);
  color: var(--ch-deep);
  border: 0;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}
body.lp-rd .guide-card__title {
  font-family: var(--face);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}
body.lp-rd .guide-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 1.35rem;
}
body.lp-rd .guide-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ch);
  padding-bottom: 0.35rem;
  background: none;
  border-radius: 0;
}
body.lp-rd .guide-card__link i {
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .guide-card__link:hover i {
  transform: translateX(4px);
}
body.lp-rd .pdp-guide .row > div:nth-child(3n + 1) .guide-card {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
}
body.lp-rd .pdp-guide .row > div:nth-child(3n + 2) .guide-card {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
}
body.lp-rd .pdp-guide .row > div:nth-child(3n + 3) .guide-card {
  --ch: var(--y);
  --ch-deep: var(--y-deep);
  --ch-wash: var(--y-wash);
}

/* ---- Finishes banner ---- */

body.lp-rd .pdp-finishes {
  padding: 0;
  background: var(--paper);
}
body.lp-rd .pdp-finishes__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--k);
  border-radius: var(--r);
  overflow: hidden;
}
body.lp-rd .pdp-finishes__copy {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  background-image: var(--screen);
  background-size: 8px 8px;
  align-self: center;
}
body.lp-rd .pdp-finishes__copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5rem;
  height: 4px;
  background: var(--bar);
}
body.lp-rd .pdp-finishes__copy h2 {
  font-family: var(--face);
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 1rem;
}
body.lp-rd .pdp-finishes__copy p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.85rem;
  max-width: 48ch;
}
body.lp-rd .pdp-finishes__btn {
  background: #fff;
  border-color: #fff;
  color: var(--k);
}
body.lp-rd .pdp-finishes__btn:hover,
body.lp-rd .pdp-finishes__btn:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .pdp-finishes__media {
  border-radius: 0;
  overflow: hidden;
  min-height: 100%;
}
body.lp-rd .pdp-finishes__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ---- More information ---- */

body.lp-rd .pdp-more__text {
  max-width: 74ch;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
body.lp-rd .pdp-more__text p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-3);
}

body.lp-rd .info-card {
  display: block;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .info-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--ch);
  border-color: var(--hair-ink);
}
body.lp-rd .info-card__thumb {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .info-card__thumb img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
body.lp-rd .info-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  background: var(--k);
  color: #fff;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  box-shadow: none;
  border: 0;
}
body.lp-rd .info-card__tag--read i {
  color: var(--c);
}
body.lp-rd .info-card__tag--watch i {
  color: var(--m);
}
body.lp-rd .info-card__title {
  display: block;
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  padding: 1.05rem 1.15rem 1.2rem;
}

/* ---- FAQ ---- */

body.lp-rd .pdp-faq__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
}
body.lp-rd .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 1.05rem 0.35rem;
  font-family: var(--face-ui);
  font-size: 0.93rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--ink-2);
  box-shadow: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
body.lp-rd .faq-q::after {
  content: "\2192";
  color: var(--ink-4);
  flex: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.lp-rd .faq-q:hover {
  color: var(--ink);
  padding-left: 0.75rem;
}
body.lp-rd .faq-q.is-active {
  color: var(--ink);
  font-weight: 700;
  background: none;
  box-shadow: inset 3px 0 0 var(--m);
  padding-left: 0.9rem;
}
body.lp-rd .faq-q.is-active::after {
  color: var(--m);
  transform: translateX(3px);
}
body.lp-rd .pdp-faq__panel {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: none;
}
body.lp-rd .faq-a h3,
body.lp-rd .faq-a h4 {
  font-family: var(--face);
  font-size: 1.2rem;
  letter-spacing: -0.026em;
  margin-bottom: 0.85rem;
}
body.lp-rd .faq-a p,
body.lp-rd .faq-a li {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ---- Related products ---- */

body.lp-rd .related-slider__slide {
  padding: 0 0.6rem;
}
body.lp-rd .related-slider .slick-list {
  margin: 0 -0.6rem;
}

/* The finishes copy panel carried its own light fill and was
   centred inside the ink block; it is the ink block now. */
body.lp-rd .pdp-finishes__copy {
  background-color: transparent;
  align-self: stretch;
}

/* =================================================================
   FORM CONTROLS
   -----------------------------------------------------------------
   Shared by the bespoke quote and the same-day category page. A
   field is a square well with an ink hairline; focus draws the
   channel colour around it rather than a soft blue glow.
   ================================================================= */

body.lp-rd .form-control,
body.lp-rd .form-select {
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.8rem 0.9rem;
  font-family: var(--face-ui);
  font-size: 0.92rem;
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

body.lp-rd .form-control::placeholder {
  color: var(--ink-4);
}
body.lp-rd .form-control:focus,
body.lp-rd .form-select:focus {
  border-color: var(--k);
  box-shadow: 0 0 0 3px var(--ch-wash);
  outline: none;
}
body.lp-rd textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

body.lp-rd .bq-label,
body.lp-rd .sdc-label,
body.lp-rd .sdp-field__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}
body.lp-rd .bq-label em,
body.lp-rd .sdc-label em,
body.lp-rd .sdp-field__label em {
  color: var(--m);
  font-style: normal;
}

/* Icon-leading date field. */
body.lp-rd .bq-date,
body.lp-rd .sdc-date {
  position: relative;
}
body.lp-rd .bq-date i,
body.lp-rd .sdc-date i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
  z-index: 2;
}
body.lp-rd .bq-date .form-control,
body.lp-rd .sdc-date .form-control {
  padding-left: 2.5rem;
}

/* Dropzone: a dashed trim edge that inks up when you hover it. */
body.lp-rd .bq-drop,
body.lp-rd .sdc-drop,
body.lp-rd .ui-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--wash);
  border: 1px dashed var(--hair-2);
  border-radius: var(--r);
  padding: 1.6rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
body.lp-rd .bq-drop:hover,
body.lp-rd .sdc-drop:hover,
body.lp-rd .ui-drop:hover,
body.lp-rd .ui-drop.is-over {
  border-color: var(--k);
  background: var(--sheet);
}
body.lp-rd .bq-drop > i,
body.lp-rd .sdc-drop > i,
body.lp-rd .ui-drop > i {
  font-size: 1.5rem;
  color: var(--ch);
}
body.lp-rd .bq-drop__text,
body.lp-rd .sdc-drop__text,
body.lp-rd .ui-drop__text {
  font-size: 0.88rem;
  color: var(--ink-2);
}
body.lp-rd .bq-drop__text b,
body.lp-rd .sdc-drop__text b,
body.lp-rd .ui-drop__text b {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ch);
  text-decoration: none;
}
body.lp-rd .bq-drop small,
body.lp-rd .sdc-drop small,
body.lp-rd .ui-drop small {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .bq-filelist li,
body.lp-rd .sdc-filelist li,
body.lp-rd .ui-filelist li {
  border-bottom: 1px solid var(--hair);
  padding: 0.5rem 0;
  font-size: 0.82rem;
}

body.lp-rd .bq-formmsg.is-ok,
body.lp-rd .sdc-formmsg.is-ok {
  color: var(--c-deep);
}
body.lp-rd .bq-formmsg.is-error,
body.lp-rd .sdc-formmsg.is-error {
  color: var(--m-deep);
}

/* =================================================================
   BESPOKE QUOTE
   -----------------------------------------------------------------
   One column, one job. The shortcut panel is a quiet sheet; the
   form is the ink-edged sheet below it, so the page states its
   order of preference without a word of extra copy.
   ================================================================= */

body.lp-rd .bq {
  --ch: var(--m);
  --ch-deep: var(--m-deep);
  --ch-wash: var(--m-wash);
  background: var(--paper);
  padding: 0 0 clamp(3rem, 6vw, 5rem);
}
body.lp-rd .bq-shell {
  max-width: 46rem;
}

body.lp-rd .bq-standard {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 1.75rem 1.6rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
body.lp-rd .bq-standard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--bar);
}
body.lp-rd .bq-standard__title {
  font-family: var(--face);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
body.lp-rd .bq-standard__lead {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 1.35rem;
}
body.lp-rd .bq-links {
  gap: 0.45rem;
}
body.lp-rd .bq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .bq-link i {
  font-size: 0.72rem;
  color: var(--ink-4);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .bq-link:hover {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .bq-link:hover i {
  color: var(--y);
  transform: translateX(3px);
}

body.lp-rd .bq-assist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hair);
}
body.lp-rd .bq-assist__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--k);
  border: 2px solid var(--k);
  border-radius: var(--r);
  padding: 0.7rem 1.15rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.lp-rd .bq-assist__btn i {
  color: var(--y);
}
body.lp-rd .bq-assist__btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .bq-assist__hint {
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* The form sheet. */
body.lp-rd .bq-card,
body.lp-rd .sdc-form {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--hair-ink);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: 6px 6px 0 rgba(11, 11, 13, 0.08);
}
body.lp-rd .bq-submit,
body.lp-rd .sdc-submit {
  width: 100%;
  margin-top: 0.75rem;
}
body.lp-rd .bq-phone {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}
body.lp-rd .bq-phone a {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--m);
}

/* =================================================================
   SAME DAY — PRODUCT INDEX
   ================================================================= */

body.lp-rd #sameDayGrid > div:nth-child(3n + 1) .sameday-card {
  --ch: var(--c);
}
body.lp-rd #sameDayGrid > div:nth-child(3n + 2) .sameday-card {
  --ch: var(--m);
}
body.lp-rd #sameDayGrid > div:nth-child(3n + 3) .sameday-card {
  --ch: var(--y);
}
body.lp-rd .sameday-card__badge i {
  color: var(--y);
}
body.lp-rd .sameday-card__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
body.lp-rd .sameday-card__body > i {
  color: var(--ink-4);
  flex: none;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .sameday-card:hover .sameday-card__body > i {
  color: var(--ink);
  transform: translateX(4px);
}

/* =================================================================
   SAME DAY — SERVICE DETAIL
   ================================================================= */

body.lp-rd .sdp {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
  background: var(--paper);
}

body.lp-rd .sdp-hero {
  padding: clamp(1.125rem, 2.25vw, 2rem) 0;
  background: var(--sheet);
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .sdp-back,
body.lp-rd .sdc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.5rem;
  transition: color var(--dur) var(--ease);
}
body.lp-rd .sdp-back:hover,
body.lp-rd .sdc-back:hover {
  color: var(--ink);
}
body.lp-rd .sdp-hero__title {
  font-family: var(--face);
  font-size: clamp(2.3rem, 4.6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 0.99;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
body.lp-rd .sdp-hero__lead {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 48ch;
  margin: 0 0 2rem;
}
body.lp-rd .sdp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
body.lp-rd .sdp-hero__media {
  border-radius: var(--r);
  border: 1px solid var(--hair);
  overflow: hidden;
  box-shadow: none;
}
body.lp-rd .sdp-hero__media img {
  border-radius: 0;
  width: 100%;
}

/* Three key facts, set as a press docket under the photograph. */
body.lp-rd .sdp-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sheet);
}
body.lp-rd .sdp-spec {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-right: 1px solid var(--hair);
  background: none;
  border-radius: 0;
}
body.lp-rd .sdp-spec:last-child {
  border-right: 0;
}
body.lp-rd .sdp-spec__label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .sdp-spec__value {
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* ---- Configurator ---- */

body.lp-rd .sdp-configure {
  padding: var(--band-y) 0;
}
body.lp-rd .sdp-configure__head {
  padding-bottom: 1.6rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair);
  position: relative;
  text-align: left;
}
body.lp-rd .sdp-configure__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8.5rem;
  height: 3px;
  background: var(--bar);
}
body.lp-rd .sdp-configure__title,
body.lp-rd .sdp-copy__title,
body.lp-rd .sdp-reviews__title,
body.lp-rd .sdp-related__title,
body.lp-rd .sdc-categories__title {
  font-family: var(--face);
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
body.lp-rd .sdp-configure__sub,
body.lp-rd .sdc-categories__sub {
  font-size: 1rem;
  color: var(--ink-3);
  margin: 0.85rem 0 0;
  max-width: 56ch;
}

body.lp-rd .sdp-panel {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: none;
}

/* Option pills are square press keys: hairline at rest, ink when
   they hold the current value. */
body.lp-rd .sdp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
body.lp-rd .sdp-pill {
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.62rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .sdp-pill:hover {
  border-color: var(--hair-ink);
  color: var(--ink);
}
body.lp-rd .sdp-pill.is-active {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .sdp-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
body.lp-rd .sdp-custom .form-control {
  max-width: 8rem;
}
body.lp-rd .sdp-custom span {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* The running total: an ink docket at the foot of the panel. */
body.lp-rd .sdp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border: 0;
  border-radius: var(--r);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
body.lp-rd .sdp-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--bar);
}
body.lp-rd .sdp-summary__eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.85rem;
}
body.lp-rd .sdp-summary__eyebrow::before {
  display: none;
}
body.lp-rd .sdp-summary__list dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
}
body.lp-rd .sdp-summary__list dl > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
body.lp-rd .sdp-summary__list dt {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.lp-rd .sdp-summary__list dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
body.lp-rd .sdp-summary__price {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
body.lp-rd .sdp-price {
  font-family: var(--face);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.034em;
  color: var(--y);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
body.lp-rd .sdp-addcart {
  background: #fff;
  border-color: #fff;
  color: var(--k);
}
body.lp-rd .sdp-addcart:hover,
body.lp-rd .sdp-addcart:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}

body.lp-rd .sdp-bespoke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
  padding: 1.15rem 1.35rem;
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
body.lp-rd .sdp-bespoke strong {
  display: block;
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
body.lp-rd .sdp-bespoke p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-3);
}
body.lp-rd .sdp-bespoke__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--m);
  border-radius: 0;
  padding: 0 0 0.35rem;
  flex: none;
}

/* ---- Copy band ---- */

body.lp-rd .sdp-copy {
  padding: var(--band-y) 0;
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .sdp-copy__title {
  margin-bottom: 1.5rem;
  max-width: 20ch;
}
body.lp-rd .sdp-copy__body {
  columns: 2;
  column-gap: 3rem;
  max-width: 74rem;
}
body.lp-rd .sdp-copy__body p {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink-3);
  break-inside: avoid;
  margin-bottom: 1.15rem;
}

/* ---- Reviews ---- */

body.lp-rd .sdp-reviews {
  padding: var(--band-y) 0;
  --ch: var(--m);
  --ch-deep: var(--m-deep);
}
body.lp-rd .sdp-reviews__title {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
body.lp-rd .sdp-review {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: none;
}
body.lp-rd .sdp-review__mark {
  font-size: 2.25rem;
  color: var(--ch);
  display: block;
  margin-bottom: 0.75rem;
  line-height: 1;
}
body.lp-rd .sdp-review__text {
  font-family: var(--face);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.42;
  color: var(--ink);
  margin: 0 0 1.35rem;
  max-width: 58ch;
}
body.lp-rd .sdp-review__stars {
  color: var(--y);
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
}
body.lp-rd .sdp-review__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.15rem;
}
body.lp-rd .sdp-review__name i {
  color: var(--c);
}
body.lp-rd .sdp-review__verified {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0;
}
body.lp-rd .sdp-review__nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* ---- Closing call to action ---- */

body.lp-rd .sdp-cta {
  padding: 0 0 var(--band-y);
}
body.lp-rd .sdp-cta__card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border: 0;
  border-radius: var(--r);
  padding: clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
}
body.lp-rd .sdp-cta__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--bar);
}
body.lp-rd .sdp-cta__card .section__eyebrow {
  color: rgba(255, 255, 255, 0.6);
}
body.lp-rd .sdp-cta__title {
  font-family: var(--face);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 1rem;
}
body.lp-rd .sdp-cta__text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 52ch;
}
body.lp-rd .sdp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
body.lp-rd .sdp-cta__actions .btn-primary {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
}
body.lp-rd .sdp-cta__actions .btn-primary:hover {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .sdp-cta__actions .btn-outline-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
body.lp-rd .sdp-cta__actions .btn-outline-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--k);
  box-shadow: 6px 6px 0 var(--c);
}

body.lp-rd .sdp-related {
  padding: var(--band-y) 0;
  --ch: var(--y);
}
body.lp-rd .sdp-related__title {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* =================================================================
   SAME DAY — CATEGORY DETAIL
   -----------------------------------------------------------------
   This page is a long read with a quote form beside it, so it is
   set as an article: a wide measure on the left with a pull-quote
   and a lead statement, and a rail of small ink-edged sheets on
   the right that stays with you as you read.
   ================================================================= */

body.lp-rd .sdc {
  --ch: var(--c);
  --ch-deep: var(--c-deep);
  --ch-wash: var(--c-wash);
  background: var(--paper);
}

body.lp-rd .sdc-top {
  padding: clamp(0.75rem, 1.5vw, 1.25rem) 0 var(--band-y);
}
body.lp-rd .sdc-head {
  position: relative;
  padding-bottom: 1.75rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--hair);
}
body.lp-rd .sdc-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8.5rem;
  height: 3px;
  background: var(--bar);
}
body.lp-rd .sdc-head__title {
  font-family: var(--face);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 1.15rem;
  max-width: 20ch;
}
body.lp-rd .sdc-head__lead {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0;
  max-width: 62ch;
}

body.lp-rd .sdc-media {
  border-radius: var(--r);
  border: 1px solid var(--hair);
  overflow: hidden;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: none;
}
body.lp-rd .sdc-media img {
  border-radius: 0;
  width: 100%;
}

/* The lead statement is set in the display cut at heading size,
   with the colour strip above it, so the article opens on a
   sentence rather than on a title. */
body.lp-rd .sdc-statement {
  position: relative;
  font-family: var(--face);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.32;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 1.6rem 0 0;
  margin: 0 0 1.75rem;
  max-width: 40ch;
}
body.lp-rd .sdc-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6.5rem;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    var(--k) 75% 100%
  );
}

body.lp-rd .sdc-prose p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 0 0 1.15rem;
  max-width: 68ch;
}
body.lp-rd .sdc-subhead {
  font-family: var(--face);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 2.25rem 0 1.15rem;
}

/* The pull-quote is an inset sheet with the channel rule down its
   spine — the one place on the page where the reading column is
   interrupted on purpose. */
body.lp-rd .sdc-quote {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--ch);
  border-radius: var(--r);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  margin: 0;
}
body.lp-rd .sdc-quote p {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
body.lp-rd .sdc-quote p:last-child {
  margin-bottom: 0;
}

/* ---- The rail ---- */

body.lp-rd .sdc-rail {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1.5rem;
}
body.lp-rd .sdc-card {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 1.35rem;
  box-shadow: none;
}
body.lp-rd .sdc-actions {
  display: grid;
  gap: 0.85rem;
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border-color: var(--k);
  position: relative;
  overflow: hidden;
}
body.lp-rd .sdc-actions::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    #fff 75% 100%
  );
}
body.lp-rd .sdc-actions__primary {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  width: 100%;
}
body.lp-rd .sdc-actions__primary:hover,
body.lp-rd .sdc-actions__primary:focus-visible {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .sdc-actions__secondary {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  transition: color var(--dur) var(--ease);
}
body.lp-rd .sdc-actions__secondary:hover {
  color: #fff;
}

body.lp-rd .sdc-note__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.75rem;
  background: none;
  border: 0;
  padding: 0;
}
body.lp-rd .sdc-note__eyebrow::before {
  display: none;
}
body.lp-rd .sdc-note__eyebrow i {
  color: var(--ch);
  font-size: 0.9rem;
}
body.lp-rd .sdc-note p {
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0;
}
body.lp-rd .sdc-note strong {
  color: var(--ink);
  font-weight: 700;
}
body.lp-rd .sdc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
body.lp-rd .sdc-tag {
  display: inline-flex;
  align-items: center;
  background: var(--wash);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 0.4rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* ---- Category tiles ---- */

body.lp-rd .sdc-categories {
  padding: var(--band-y) 0;
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  --ch: var(--m);
  --ch-deep: var(--m-deep);
}
body.lp-rd .sdc-categories__head {
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair);
  text-align: left;
}
body.lp-rd .sdc-categories__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8.5rem;
  height: 3px;
  background: var(--bar);
}

body.lp-rd .cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.lp-rd .cat-tile:hover {
  transform: translate(-4px, -4px);
  box-shadow: 7px 7px 0 var(--ch);
  border-color: var(--hair-ink);
}
body.lp-rd .cat-tile__media {
  border-radius: 0;
  border-bottom: 1px solid var(--hair);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
body.lp-rd .cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
body.lp-rd .cat-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem 1.2rem;
  margin-top: auto;
}
body.lp-rd .cat-tile__title {
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
}
body.lp-rd .cat-tile__btn {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: var(--r);
  background: var(--wash);
  border: 1px solid var(--hair);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .cat-tile:hover .cat-tile__btn {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .cat-tile.is-current {
  border-color: var(--hair-ink);
}
body.lp-rd .sdc-categories .row > div:nth-child(4n + 1) .cat-tile {
  --ch: var(--c);
}
body.lp-rd .sdc-categories .row > div:nth-child(4n + 2) .cat-tile {
  --ch: var(--m);
}
body.lp-rd .sdc-categories .row > div:nth-child(4n + 3) .cat-tile {
  --ch: var(--y);
}
body.lp-rd .sdc-categories .row > div:nth-child(4n + 4) .cat-tile {
  --ch: var(--k);
}

/* =================================================================
   ORDER CONFIGURATOR (product page modal)
   -----------------------------------------------------------------
   A ten-step build sheet. It keeps its own layout — that is the
   feature — but every control is re-drawn in the press language:
   square keys, ink hairlines, a numbered step badge that fills
   when the step is answered, and a summary rail on ink.
   ================================================================= */

body.lp-rd .order-modal__panel {
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--hair-ink);
  box-shadow: 0 30px 80px -30px rgba(11, 11, 13, 0.55);
}
body.lp-rd .order-modal__backdrop {
  background: rgba(11, 11, 13, 0.55);
}
body.lp-rd .order-modal__header {
  background: var(--k);
  border: 0;
  position: relative;
  color: #fff;
}
body.lp-rd .order-modal__header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    #fff 75% 100%
  );
}
body.lp-rd .order-modal__title {
  font-family: var(--face);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: #fff;
}
body.lp-rd .order-modal__close {
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: var(--r);
  color: #fff;
  transition: background-color var(--dur) var(--ease);
}
body.lp-rd .order-modal__close:hover {
  background: var(--m);
}

body.lp-rd .order-step {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: none;
}
body.lp-rd .order-step__title {
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
}
/* The step number is a square plate; it inks up once answered. */
body.lp-rd .order-step__badge {
  border-radius: var(--r);
  background: var(--wash);
  border: 1px solid var(--hair-2);
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.lp-rd .order-step.is-done .order-step__badge,
body.lp-rd .order-step__title--done .order-step__badge {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .order-step__bar {
  background: var(--hair);
}
body.lp-rd .order-step__hint,
body.lp-rd .order-step__help,
body.lp-rd .order-step__info,
body.lp-rd .order-note {
  font-size: 0.82rem;
  color: var(--ink-3);
}
body.lp-rd .order-substep__title {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Every choice in the sheet — card, tile, row, pill — is the same
   square key with the same three states. */
body.lp-rd .order-card,
body.lp-rd .order-tile,
body.lp-rd .order-row,
body.lp-rd .order-icard,
body.lp-rd .qty-option,
body.lp-rd .paper-item,
body.lp-rd .perf-row {
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
body.lp-rd .order-card:hover,
body.lp-rd .order-tile:hover,
body.lp-rd .order-row:hover,
body.lp-rd .order-icard:hover,
body.lp-rd .qty-option:hover,
body.lp-rd .paper-item:hover,
body.lp-rd .perf-row:hover {
  border-color: var(--hair-ink);
}
body.lp-rd .order-card.is-selected,
body.lp-rd .order-tile.is-selected,
body.lp-rd .order-row.is-selected,
body.lp-rd .order-icard.is-selected,
body.lp-rd .qty-option.is-selected,
body.lp-rd .paper-item.is-selected,
body.lp-rd .perf-row.is-selected {
  border-color: var(--k);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--k), 4px 4px 0 var(--c);
}
body.lp-rd .order-card.is-disabled,
body.lp-rd .order-tile.is-disabled,
body.lp-rd .order-row.is-disabled {
  opacity: 0.45;
}
body.lp-rd .order-card__head,
body.lp-rd .order-tile__label,
body.lp-rd .order-icard__label {
  font-family: var(--face-ui);
  font-weight: 600;
  color: var(--ink);
}
body.lp-rd .order-card__desc {
  font-size: 0.82rem;
  color: var(--ink-3);
}
body.lp-rd .order-icard__icon {
  color: var(--ink-2);
}
body.lp-rd .order-icard.is-selected .order-icard__icon {
  color: var(--c-deep);
}
body.lp-rd .order-icard__flag,
body.lp-rd .perf-row__flag,
body.lp-rd .badge-chip,
body.lp-rd .order-pill {
  border-radius: var(--r);
  background: var(--k);
  color: #fff;
  border: 0;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
}

body.lp-rd .paper-filter {
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  padding: 0.55rem 0.85rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: none;
}
body.lp-rd .paper-filter.is-active,
body.lp-rd .paper-filter--outline.is-active {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .paper-weight {
  border-radius: var(--r);
  border: 1px solid var(--hair-2);
  background: var(--sheet);
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 650;
}
body.lp-rd .paper-weight.is-selected {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .paper-preview,
body.lp-rd .perf-preview,
body.lp-rd .order-size__preview,
body.lp-rd .paper-tip {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: none;
}
body.lp-rd .paper-tip__label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp-rd .paper-preview__arrow {
  border-radius: var(--r);
  background: var(--sheet);
  border: 1px solid var(--hair-2);
  color: var(--ink);
}
body.lp-rd .paper-preview__arrow:hover {
  background: var(--k);
  border-color: var(--k);
  color: #fff;
}
body.lp-rd .paper-preview__dots span {
  border-radius: 0;
  width: 1.5rem;
  height: 4px;
  background: var(--hair-2);
}
body.lp-rd .paper-preview__dots span.is-active {
  background: var(--k);
}

body.lp-rd .order-qty__stepper,
body.lp-rd .qty-stepper {
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sheet);
}
body.lp-rd .order-qty__step {
  background: var(--wash);
  border: 0;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.lp-rd .order-qty__step:hover {
  background: var(--k);
  color: #fff;
}
body.lp-rd .order-qty__input {
  border: 0;
  background: var(--sheet);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.lp-rd .qty-option__num {
  font-family: var(--face);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .qty-option__price {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

body.lp-rd .size-units {
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  overflow: hidden;
}
body.lp-rd .size-units__btn {
  background: var(--sheet);
  border: 0;
  border-radius: 0;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body.lp-rd .size-units__btn.is-active {
  background: var(--k);
  color: #fff;
}
body.lp-rd .size-diagram__box,
body.lp-rd .msr__line {
  border-color: var(--k);
}
body.lp-rd .msr__val {
  background: var(--k);
  color: #fff;
  border-radius: var(--r);
  font-size: 0.66rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* The summary rail and the footer bar both sit on ink so the
   running total is never mistaken for part of the form. */
body.lp-rd .order-summary {
  background: var(--k);
  background-image: var(--screen);
  background-size: 8px 8px;
  border: 0;
  border-radius: var(--r);
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
}
body.lp-rd .order-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c) 0 25%,
    var(--m) 25% 50%,
    var(--y) 50% 75%,
    #fff 75% 100%
  );
  z-index: 2;
}
body.lp-rd .order-summary__title {
  font-family: var(--face);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: #fff;
}
body.lp-rd .order-summary__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.lp-rd .order-summary__label {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.lp-rd .order-summary__value {
  color: #fff;
  font-weight: 600;
}
body.lp-rd .order-summary__check {
  color: var(--c);
}
body.lp-rd .order-summary__edit,
body.lp-rd .order-summary__link {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.lp-rd .order-summary__edit:hover,
body.lp-rd .order-summary__link:hover {
  color: #fff;
}
body.lp-rd .order-summary__total-label {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.lp-rd .order-summary__total-value {
  font-family: var(--face);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--y);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .order-summary__vat {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
body.lp-rd .order-summary__cta {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  width: 100%;
}
body.lp-rd .order-summary__cta:hover:not(:disabled),
body.lp-rd .order-summary__cta:focus-visible:not(:disabled) {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}

body.lp-rd .order-footer {
  background: var(--k);
  border: 0;
  color: rgba(255, 255, 255, 0.78);
}
body.lp-rd .order-footer__label,
body.lp-rd .order-footer__unit,
body.lp-rd .order-footer__vat {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.lp-rd .order-footer__value {
  font-family: var(--face);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--y);
  font-variant-numeric: tabular-nums;
}
body.lp-rd .order-footer__basket {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
}
body.lp-rd .order-footer__basket:hover {
  background: var(--y);
  border-color: var(--y);
  color: var(--k);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--m);
}
body.lp-rd .order-footer__upload,
body.lp-rd .order-summary__upload {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}
body.lp-rd .order-footer__upload:hover,
body.lp-rd .order-summary__upload:hover {
  background: #fff;
  border-color: #fff;
  color: var(--k);
}
body.lp-rd .order-extras__toggle {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--c);
}

body.lp-rd .back-to-top {
  border-radius: var(--r);
  background: var(--k);
  color: #fff;
  border: 0;
  box-shadow: 4px 4px 0 var(--m);
}
body.lp-rd .back-to-top:hover {
  background: var(--k);
  color: var(--y);
}

/* -----------------------------------------------------------------
   CORRECTIONS
   -----------------------------------------------------------------
   Three components whose original markup differs from the shape the
   kit assumed: the same-day media block holds its image in flow,
   the category tile carries its title over the picture rather than
   under it, and the same-day copy band was centred.
   ----------------------------------------------------------------- */

/* The same-day card's image sits in the flow, so the media block
   frames it rather than padding it. */
body.lp-rd .sameday-card__media {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--wash);
}
body.lp-rd .sameday-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The category tile's title is set over the picture; it keeps that
   position and gains the press label treatment on the foot link. */
body.lp-rd .cat-tile__media::after {
  background: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0) 0%,
    rgba(11, 11, 13, 0.82) 100%
  );
}
body.lp-rd .cat-tile__title {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 1;
  color: #fff;
  font-family: var(--face);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  margin: 0;
}
body.lp-rd .cat-tile__foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 1.15rem 1.15rem;
  margin-top: auto;
}
body.lp-rd .cat-tile__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ch);
  border-radius: 0;
  padding: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
body.lp-rd .cat-tile__btn i {
  font-size: 0.72rem;
  transition: transform var(--dur) var(--ease);
}
body.lp-rd .cat-tile:hover .cat-tile__btn {
  background: none;
  color: var(--ink);
}
body.lp-rd .cat-tile:hover .cat-tile__btn i {
  transform: translate(3px, -3px);
}

/* The same-day copy band reads as an article, so it sets left and
   runs in two columns rather than as a centred block. */
body.lp-rd .sdp-copy {
  text-align: left;
}
body.lp-rd .sdp-copy .section__eyebrow {
  margin-bottom: 1rem;
}
body.lp-rd .sdp-copy__body {
  margin-inline: 0;
}
body.lp-rd .sdp-reviews,
body.lp-rd .sdp-related,
body.lp-rd .sdp-cta {
  text-align: left;
}
body.lp-rd .sdp-related {
  background: var(--paper);
}

/* The gallery trim marks read as stray hairlines over a photograph
   rather than as register marks, so the proof keeps its plain edge. */
body.lp-rd .pdp-gallery__stage::before,
body.lp-rd .pdp-gallery__stage::after {
  display: none;
}

/* -----------------------------------------------------------------
   RESPONSIVE
   -----------------------------------------------------------------
   The ladder the previous system built is still in place and still
   does the structural work. What follows only re-proportions the
   pieces this design introduced — the display sizes, the offset
   shadows, and the two-column bands.
   ----------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  body.lp-rd .pdp-finishes__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991.98px) {
  body.lp-rd {
    --band-y: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  body.lp-rd .hero__slide {
    min-height: clamp(460px, 60vw, 560px);
  }
  body.lp-rd .sdp-copy__body {
    columns: 1;
  }
  body.lp-rd .pdp-finishes__inner {
    grid-template-columns: 1fr;
  }
  body.lp-rd .pdp-finishes__media {
    order: -1;
    max-height: 18rem;
  }
  body.lp-rd .sdc-rail {
    position: static;
  }
  body.lp-rd .section__head--row {
    align-items: flex-start;
    gap: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  /* Offset shadows are halved so a lifted card never pushes a
     narrow layout sideways. */
  body.lp-rd .category-card:hover,
  body.lp-rd .sameday-card:hover,
  body.lp-rd .promise-card:hover,
  body.lp-rd .delivery-card:hover,
  body.lp-rd .finish-card:hover,
  body.lp-rd .guide-card:hover,
  body.lp-rd .stock-card:hover,
  body.lp-rd .info-card:hover,
  body.lp-rd .cat-tile:hover,
  body.lp-rd #categoryGrid .category-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ch);
  }
  body.lp-rd .btn:hover,
  body.lp-rd .btn:focus-visible {
    transform: none;
    box-shadow: none;
  }
  /* Touch targets stay at 44px on every press key. */
  body.lp-rd .btn {
    min-height: 44px;
  }
  body.lp-rd .fdrop__btn,
  body.lp-rd .pdp-pill,
  body.lp-rd .sdp-pill,
  body.lp-rd .paper-filter {
    min-height: 44px;
  }
  body.lp-rd .sdp-summary,
  body.lp-rd .sdp-cta__card {
    flex-direction: column;
    align-items: flex-start;
  }
  body.lp-rd .sdp-summary__price {
    width: 100%;
    justify-content: space-between;
  }
  body.lp-rd .bq-card,
  body.lp-rd .sdc-form {
    box-shadow: 4px 4px 0 rgba(11, 11, 13, 0.08);
  }
  body.lp-rd .sdc-statement {
    font-size: 1.2rem;
  }
}

@media (max-width: 575.98px) {
  body.lp-rd {
    --band-y: 1.125rem;
  }
  body.lp-rd .hero__title {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
  body.lp-rd .section__title,
  body.lp-rd .section-title,
  body.lp-rd .collection__title,
  body.lp-rd .page-heading,
  body.lp-rd .sdc-head__title,
  body.lp-rd .sdp-hero__title {
    font-size: clamp(1.75rem, 8vw, 2.1rem);
  }
  body.lp-rd .section__head--row {
    flex-direction: column;
  }
  body.lp-rd .hero__actions .btn,
  body.lp-rd .sdp-hero__actions .btn,
  body.lp-rd .sdp-cta__actions .btn {
    width: 100%;
  }
  body.lp-rd .sdp-specs {
    grid-template-columns: 1fr;
  }
  body.lp-rd .sdp-spec {
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  body.lp-rd .sdp-spec:last-child {
    border-bottom: 0;
  }
  body.lp-rd .sdp-price {
    font-size: 1.75rem;
  }
  body.lp-rd .pdp-info__from span {
    font-size: 1.5rem;
  }
  body.lp-rd .finish-content h2 {
    font-size: 1.75rem;
  }
  body.lp-rd .hero .slick-dots {
    padding-left: 1.5rem;
  }
}

/* Every lift, sweep and zoom this design adds respects a reduced
   motion preference; the state still changes, it just does not move. */
@media (prefers-reduced-motion: reduce) {
  body.lp-rd .category-card,
  body.lp-rd .sameday-card,
  body.lp-rd .promise-card,
  body.lp-rd .delivery-card,
  body.lp-rd .finish-card,
  body.lp-rd .guide-card,
  body.lp-rd .stock-card,
  body.lp-rd .info-card,
  body.lp-rd .cat-tile,
  body.lp-rd .btn,
  body.lp-rd .video-player__play {
    transition: none;
  }
  body.lp-rd .category-card:hover,
  body.lp-rd .sameday-card:hover,
  body.lp-rd .promise-card:hover,
  body.lp-rd .delivery-card:hover,
  body.lp-rd .finish-card:hover,
  body.lp-rd .guide-card:hover,
  body.lp-rd .stock-card:hover,
  body.lp-rd .info-card:hover,
  body.lp-rd .cat-tile:hover,
  body.lp-rd .btn:hover,
  body.lp-rd .video-player:hover .video-player__play {
    transform: none;
  }
}

/* Below 767 the section head stacks (the original ladder turns it
   into a column). In that direction a flex-basis is a *height*, so
   the heading block must go back to sizing on its content — left as
   `24rem` it reserved 384px of empty space above the section link. */
@media (max-width: 767.98px) {
  body.lp-rd .section__head--row > div {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
  }
}

/* The play control sits inside a clipped frame, so its offset
   impression is kept tight enough not to be trimmed by the edge. */
body.lp-rd .video-player__play {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 5px 5px 0 var(--y);
}
body.lp-rd .video-player:hover .video-player__play {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 8px 8px 0 var(--m);
}