/*
Theme Name: Septem Paints
Theme URI: https://septempaints.com
Author: Septem Paints
Description: Custom coded theme for Septem Paints (Pigment Editorial design system).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: septempaints
*/
/* ==========================================================================
   Septem Paints — "Pigment Editorial" design system
   Plain CSS, no build step (ports cleanly into a WP theme later: header/
   footer blocks are marked so they can become header.php / footer.php).
   Palette, type and spacing all live in :root custom properties.
   ========================================================================== */

/* Cocogoose trial ships no usable digit glyphs, so digits (and +/%/currency)
   are served from a normal grotesque. Listed first in --font-head, it only
   claims the codepoints in unicode-range; everything else falls to Cocogoose. */
@font-face {
  font-family: "Septem Digits";
  src: url("assets/fonts/Scandia-Medium.woff2") format("woff2"), local("Plus Jakarta Sans"), local("Segoe UI"), local("Arial");
  unicode-range: U+0030-0039, U+002B, U+0025, U+20A6, U+0024, U+002C, U+002E;  font-display: swap;
}

/* Font: Scandia — body copy */
@font-face {
  font-family: "Scandia";
  src: url("assets/fonts/Scandia-Regular.woff2") format("woff2"),
       url("assets/fonts/Scandia-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("assets/fonts/Scandia-RegularItalic.woff2") format("woff2"),
       url("assets/fonts/Scandia-RegularItalic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("assets/fonts/Scandia-Medium.woff2") format("woff2"),
       url("assets/fonts/Scandia-Medium.woff") format("woff");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Scandia";
  src: url("assets/fonts/Scandia-Bold.woff2") format("woff2"),
       url("assets/fonts/Scandia-Bold.woff") format("woff");
  font-weight: 700 800; font-style: normal; font-display: swap;
}

/* Font: Cocogoose Classic (trial) — headings */
@font-face {
  font-family: "Cocogoose Classic";
  src: url("assets/fonts/Cocogoose-Classic-Medium-trial.ttf") format("truetype");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Classic";
  src: url("assets/fonts/Cocogoose-Classic-ExtraBold-trial.ttf") format("truetype");
  font-weight: 700 800; font-style: normal; font-display: swap;
}

/* Font: Chillax by Indian Type Foundry / Fontshare — free for commercial use (ITF FFL) */
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand pigments */
  --teal: #25d7da;
  --teal-deep: #159699;
  --purple: #912a92;
  --purple-deep: #641c64;
  --gold: #c9a23c;
  --success: #1f9d55;

  /* Neutrals — warm paper instead of clinical white */
  --ink: #170f20;
  --ink-soft: #4d4459;
  --paper: #ffffff;
  --paper-dim: #f2ecf3;
  --line: #e6dfe9;
  --white: #ffffff;

  --font-head: "Septem Digits", "Cocogoose Classic", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Scandia", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  /* Cocogoose renders figures poorly, so numeric callouts use the body face */
  --font-num: "Scandia", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --container: 1480px;
  --radius-lg: 30px;
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --shadow: 0 24px 60px -24px rgba(23, 15, 32, .35);
  --shadow-sm: 0 10px 28px -14px rgba(23, 15, 32, .3);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* height:auto keeps the width/height attrs from pinning a stretched height */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .45em; line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; }
strong { color: var(--ink); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .container { padding-inline: 40px; } }

section { padding-block: 72px; position: relative; }
@media (min-width: 900px) { section { padding-block: 132px; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Film-grain texture, fixed + pointer-events:none so it never repaints on scroll */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Motion / scroll-reveal --------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track, .hero::before, .hero::after { animation: none !important; }
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 15px 24px; border-radius: 10px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .96rem; letter-spacing: -.005em;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap; will-change: transform;
}
.btn__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; transition: transform .4s var(--ease);
}
.btn__arrow svg { width: 16px; height: 16px; }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); }

.btn-dark { background: var(--purple); color: #fff; box-shadow: var(--shadow-sm); }
.btn-dark:hover { background: var(--purple-deep); transform: translateY(-2px); }

.btn-outline { background: var(--purple); color: #fff; box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: var(--purple-deep); transform: translateY(-2px); }

.btn-ghost-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost-light:hover { background: var(--paper-dim); transform: translateY(-2px); }

.btn-chip { background: #fff; color: var(--ink); padding: 10px 18px; font-size: .82rem; }
.btn-chip .btn__arrow svg { width: 13px; height: 13px; }
.btn-chip:hover { background: var(--teal); color: #fff; }

.btn-block { width: 100%; justify-content: space-between; }
.btn-sm { padding: 11px 18px; font-size: .84rem; }
.btn-sm .btn__arrow svg { width: 13px; height: 13px; }
/* Header — full-width sticky bar ---------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 80; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow .4s var(--ease); }
.site-header--wide .site-header__bar { max-width: 1680px; }
.site-header.is-scrolled { box-shadow: 0 20px 40px -30px rgba(23,15,32,.35); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 88px; }
.site-header__logo img { height: 34px; width: auto; }
.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 34px; }
.site-nav > ul > li { position: relative; }
.site-nav a {
  display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 600; font-size: .93rem; color: var(--ink-soft);
  padding-block: 8px; border-bottom: 1.5px solid transparent; transition: color .25s ease, border-color .25s ease;
}
.site-nav a:hover { color: var(--ink); border-color: var(--purple); }
.site-nav a[aria-current="page"] { color: var(--ink); border-color: transparent; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-icon-btn {
  display: none; width: 44px; height: 44px; border-radius: 10px; background: var(--paper-dim);
  color: var(--teal); align-items: center; justify-content: center; transition: background-color .3s ease, transform .3s var(--ease);
}
.header-icon-btn svg { width: 18px; height: 18px; }
.header-icon-btn:hover { background: var(--teal); color: var(--ink); transform: translateY(-2px); }
.header-actions .btn { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; border-radius: 50%; background: var(--paper-dim);
}
.nav-toggle__bar { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 1000px) {
  .site-nav { display: block; }
  .header-icon-btn { display: inline-flex; }
  .header-actions .btn { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Header mega-menu (desktop hover panel under "Shop Paints") ------------------ */
.mega {
  position: absolute; top: calc(100% + 18px); left: 50%; width: 580px;
  transform: translateX(-50%) translateY(6px); background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
/* Invisible bridge across the 18px gap so the panel survives the trip down to it */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mega__item { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: flex-end; }
.mega__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega__item:hover img { transform: scale(1.06); }
.mega__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,15,32,.86), rgba(23,15,32,.05) 60%); }
.mega__item span { position: relative; z-index: 1; padding: 12px; color: #fff; font-weight: 700; font-size: .86rem; }

/* Mobile nav — full-screen glass overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 79; background: rgba(23,15,32,.97);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.mobile-nav ul { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 30px; }
.mobile-nav li { overflow: hidden; }
.mobile-nav ul a {
  display: block; padding: 10px 6px; font-family: var(--font-head); font-weight: 600; font-size: 2rem; color: #fff;
  transform: translateY(120%); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.mobile-nav.is-open a { transform: translateY(0); opacity: 1; }
.mobile-nav li:nth-child(1) a { transition-delay: .08s; }
.mobile-nav li:nth-child(2) a { transition-delay: .14s; }
.mobile-nav li:nth-child(3) a { transition-delay: .2s; }
.mobile-nav li:nth-child(4) a { transition-delay: .26s; }
.mobile-nav li:nth-child(5) a { transition-delay: .32s; }
.mobile-nav li:nth-child(6) a { transition-delay: .38s; }
.mobile-nav .btn { max-width: 260px; }
@media (min-width: 1000px) { .mobile-nav { display: none !important; } }

/* Decorative paint-swatch chips -------------------------------------------- */
.swatch {
  position: absolute; width: 58px; height: 74px; border-radius: 10px;
  box-shadow: 0 16px 30px -12px rgba(23,15,32,.4); z-index: 3;
}
.swatch--teal { background: linear-gradient(160deg, var(--teal), var(--teal-deep)); }
.swatch--purple2 { background: linear-gradient(160deg, var(--purple), var(--purple-deep)); }
.swatch--gold { background: linear-gradient(160deg, #e7c265, var(--gold)); }
.swatch--purple { background: linear-gradient(160deg, #8a4aa8, var(--purple-deep)); }

/* Masking-tape ribbon (used for "coming soon" style tags) ------------------ */
.tape {
  position: absolute; top: 26px; right: -38px; z-index: 3; width: 168px; padding: 7px 0;
  text-align: center; transform: rotate(40deg); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--purple-deep);
  background: repeating-linear-gradient(45deg, rgba(23,15,32,.05) 0 6px, rgba(23,15,32,.09) 6px 12px), #f4ecd8;
  box-shadow: 0 10px 20px -8px rgba(23,15,32,.4);
}
/* Hero ----------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  padding-block: 72px 80px; display: flex; align-items: center; min-height: 72vh;
}
@media (min-width: 900px) { .hero { padding-block: 108px 120px; min-height: 82vh; } }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0;
  animation: drift 22s ease-in-out infinite alternate;
}
.hero::before { width: 640px; height: 640px; top: -220px; right: -160px; background: radial-gradient(circle, rgba(22,184,198,.45), transparent 70%); }
.hero::after { width: 560px; height: 560px; bottom: -260px; left: -140px; background: radial-gradient(circle, rgba(194,42,149,.4), transparent 70%); animation-delay: -8s; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-30px) scale(1.08); } }

.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
.hero__content { max-width: 34rem; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7);
  margin-bottom: 26px;
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.hero__content h1 {
  color: #fff; font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -.02em;
}
.hero__content h1 em { font-style: normal; font-weight: 500; color: var(--teal); }
.hero__content p { font-size: 1.12rem; max-width: 46ch; color: rgba(255,255,255,.72); margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero__shades { display: flex; align-items: center; gap: 16px; margin-top: 42px; }
.hero__shades .label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.hero__shades .dots { display: flex; gap: 9px; }
.hero__shades .dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hero__shades .dot:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* Hero background slider — images sit behind the copy, full bleed */
.hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  opacity: 0; transition: opacity 1s var(--ease);
}
.hero-slider img.is-active { opacity: 1; }
.hero-slider::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(23,15,32,.9) 0%, rgba(23,15,32,.72) 45%, rgba(23,15,32,.35) 100%);
}
.hero-slider__btn {
  position: absolute; right: 26px; bottom: 26px; z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink); border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .3s var(--ease), background-color .3s ease, color .3s ease;
}
.hero-slider__btn:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.hero-slider__btn svg { width: 20px; height: 20px; }
.hero__media { position: relative; }
.hero__badge {
  position: absolute; left: -22px; bottom: -26px; z-index: 2; max-width: 250px;
  background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; transform: rotate(-2deg);
}
.hero__badge .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.hero__badge strong { display: block; font-size: .92rem; color: var(--ink); }
.hero__badge span { font-size: .78rem; color: var(--ink-soft); }
.hero .swatch--teal { top: 8%; right: -6%; transform: rotate(-12deg); }
.hero .swatch--gold { top: 46%; right: -10%; transform: rotate(8deg); width: 46px; height: 60px; }
@media (max-width: 979px) { .hero .swatch { display: none; } }

/* Marquee strip --------------------------------------------------------------- */
.marquee { background: var(--paper-dim); border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 16px; }
.marquee__track { display: flex; width: max-content; gap: 48px; animation: marquee 26s linear infinite; }
.marquee__track span { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 1.05rem; color: var(--purple-deep); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.marquee__track span::after { content: "\2726"; font-style: normal; color: var(--teal); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Page hero (inner pages) ------------------------------------------------------ */
.page-hero { background: var(--ink); color: #fff; padding-block: 76px 80px; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 560px; height: 560px; top: -260px; right: -160px; border-radius: 50%; filter: blur(100px); background: radial-gradient(circle, rgba(90,36,112,.55), transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .crumbs { font-size: .86rem; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.page-hero .crumbs a { color: rgba(255,255,255,.85); font-weight: 600; }
.page-hero .crumbs span { margin-inline: 8px; opacity: .6; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 4.2rem); max-width: 16ch; }
.page-hero p { color: rgba(255,255,255,.7); font-size: 1.08rem; max-width: 56ch; margin-top: 16px; }

/* Section heading ----------------------------------------------------------- */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--purple-deep); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -.02em; }
.section-head p { font-size: 1.05rem; }

/* Grid utilities -------------------------------------------------------------*/
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Split (image + copy) -------------------------------------------------------*/
.split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } }
.split.reverse .split__media { order: 2; }
.split h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.split__media { position: relative; }
.split__frame {
  padding: 10px; border-radius: var(--radius-lg); background: var(--paper-dim);
  border: 1px solid var(--line);
}
.split__frame img { width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 10px); }
/* Bento category tiles --------------------------------------------------------*/
.bento { display: grid; gap: 22px; }
@media (min-width: 900px) { .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, 1fr); } }
.pigment-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 300px; display: flex; align-items: flex-end; color: #fff;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pigment-tile:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow); }
.pigment-tile--lg { grid-row: span 2; min-height: 380px; }
.pigment-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s var(--ease); }
.pigment-tile:hover img { transform: scale(1.05); }
.pigment-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(23,15,32,.92) 0%, rgba(23,15,32,.4) 50%, rgba(23,15,32,.05) 100%);
}
.pigment-tile__body { position: relative; z-index: 2; padding: 30px; }
.pigment-tile__body span.eyebrow { color: var(--teal); margin-bottom: 8px; }
.pigment-tile__body span.eyebrow::before { background: var(--teal); }
.pigment-tile__body h3 { color: #fff; font-size: 1.55rem; }
.pigment-tile__body p { color: rgba(255,255,255,.8); font-size: .95rem; max-width: 32ch; }
.pigment-tile__body .btn { margin-top: 14px; }
.pigment-tile .tape { top: 22px; right: -40px; }

/* CTA banners ----------------------------------------------------------------*/
.cta-split { display: grid; gap: 22px; }
@media (min-width: 900px) { .cta-split { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }
.cta-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px;
  display: flex; align-items: flex-end;
}
.cta-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,15,32,.85), rgba(23,15,32,.1) 60%); }
.cta-card__panel { position: relative; z-index: 1; padding: 34px; max-width: 420px; }
.cta-card__panel h3 { color: #fff; font-size: 1.5rem; }
.cta-card__panel p { color: rgba(255,255,255,.78); }
.cta-card--solid { background: linear-gradient(150deg, var(--purple), var(--purple-deep) 85%); color: #fff; padding: 44px 36px; align-items: center; }
.cta-card--solid h3 { color: #fff; font-size: 1.6rem; }
.cta-card--solid p { color: rgba(255,255,255,.82); }
.cta-card--solid .btn { margin-top: 10px; }

/* Product cards (double-bezel; markup generated by main.js) -------------------*/
.product-card {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; padding: 10px;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.product-card__media {
  position: relative; aspect-ratio: 1 / 1; flex: none; background: #fff; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
/* Fill the square box and let object-fit letterbox, so every card matches */
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__tag {
  position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--teal);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px;
}
.product-card__body { padding: 18px 10px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-card__cat { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.product-card__name { font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.product-card__view {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
.product-card:hover .product-card__view { opacity: 1; transform: translateY(0); }
.product-card__view:hover { background: var(--purple-deep); }

/* Feature grid (icon cards) -----------------------------------------------------*/
.feature-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-block: 32px; }
@media (min-width: 560px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-grid__item {
  display: flex; gap: 14px; padding: 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-grid__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.feature-grid__item .ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ink);
  color: var(--teal); display: flex; align-items: center; justify-content: center;
}
.feature-grid__item strong { color: var(--ink); display: block; margin-bottom: 3px; font-size: .92rem; }
.feature-grid__item p { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* Homepage project-gallery mosaic ---------------------------------------------*/
.gallery-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 18px; }
.gallery-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,15,32,.7), rgba(23,15,32,0) 55%); opacity: 0; transition: opacity .4s ease; }
.gallery-tile:hover::after { opacity: 1; }
.gallery-tile__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; color: #fff; font-size: .82rem; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.gallery-tile:hover .gallery-tile__tag { opacity: 1; transform: translateY(0); }
.gallery-tile--a { grid-column: span 2; grid-row: span 2; }
.gallery-tile--b, .gallery-tile--e, .gallery-tile--f { grid-column: span 2; grid-row: span 1; }
.gallery-tile--c, .gallery-tile--d { grid-column: span 1; grid-row: span 1; }
@media (max-width: 699px) {
  .gallery-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gallery-tile { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4 / 3; }
}

/* Testimonials -------------------------------------------------------------------*/
.testimonial-row { display: grid; gap: 22px; }
@media (min-width: 700px) { .testimonial-row { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; height: 100%; position: relative;
}
.testimonial-card::before {
  content: "\201C"; font-family: var(--font-head); font-style: normal; font-size: 4rem; line-height: 1;
  color: var(--paper-dim); position: absolute; top: 18px; right: 24px; z-index: 0;
}
.testimonial-card .stars { color: var(--gold); display: flex; gap: 3px; position: relative; z-index: 1; }
.testimonial-card p { position: relative; z-index: 1; font-family: var(--font-head); font-size: 1.08rem; color: var(--ink); font-weight: 500; }
.testimonial-card footer { font-weight: 700; color: var(--ink); font-size: .9rem; position: relative; z-index: 1; }
.testimonial-card footer span { display: block; font-weight: 500; color: var(--ink-soft); font-size: .8rem; }

/* Stat strip -----------------------------------------------------------------------*/
.stat-strip { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 48px 28px; position: relative; overflow: hidden; }
.stat-strip::before { content: ""; position: absolute; top: -140px; left: 50%; translate: -50% 0; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(194,42,149,.4), transparent 70%); }
.stat-strip .grid { text-align: center; position: relative; z-index: 1; }
.stat-strip strong { display: block; font-family: var(--font-num); font-weight: 800; font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--teal); }
.stat-strip span { font-size: .82rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .06em; }
/* About: mission / vision, differentiators, product line ---------------------------*/
.mv-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .mv-grid { grid-template-columns: 1fr 1fr; } }
.mv-card { border-radius: var(--radius); padding: 34px; color: #fff; position: relative; overflow: hidden; }
.mv-card--teal { background: linear-gradient(150deg, var(--teal), var(--teal-deep) 85%); }
.mv-card--magenta { background: linear-gradient(150deg, var(--purple), var(--purple-deep) 85%); }
.mv-card .eyebrow { color: rgba(255,255,255,.85); }
.mv-card .eyebrow::before { background: rgba(255,255,255,.85); }
.mv-card p { font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; color: #fff; margin: 0; }

.diff-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .diff-grid { grid-template-columns: repeat(3, 1fr); } }
.diff-card { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--paper-dim); border: 1px solid var(--line); overflow: hidden; }
.diff-card__num {
  font-family: var(--font-head); font-weight: 600; font-size: 4.2rem; color: var(--ink); opacity: .06;
  position: absolute; top: -6px; right: 14px; line-height: 1; pointer-events: none;
}
.diff-card h3 { font-size: 1.15rem; position: relative; }
.diff-card p { font-size: .92rem; margin: 0; position: relative; }

.line-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .line-grid { grid-template-columns: repeat(3, 1fr); } }
.line-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; overflow: hidden; }
.line-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.line-card--decorative .line-card__bar { background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }
.line-card--industrial .line-card__bar { background: linear-gradient(90deg, #e7c265, var(--gold)); }
.line-card--marine .line-card__bar { background: linear-gradient(90deg, var(--purple), var(--purple-deep)); }
.line-card h3 { font-size: 1.2rem; margin-top: 16px; }
.line-card__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--paper-dim); margin-bottom: 20px;
}
.line-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s var(--ease);
}
.line-card:hover .line-card__media img { transform: scale(1.05); }
.line-card .chip { margin-top: 4px; }

.feature-list li { display: flex; gap: 12px; padding-block: 11px; border-bottom: 1px dashed var(--line); }
.feature-list li:last-child { border-bottom: none; }
.feature-list .ico { color: var(--teal-deep); flex: none; margin-top: 3px; }
.feature-list strong { color: var(--ink); display: block; margin-bottom: 2px; }

/* Media badge (floating card on a photo) -----------------------------------------*/
.media-badge-wrap { position: relative; }
.media-badge {
  position: absolute; left: -18px; bottom: -22px; z-index: 2;
  background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px; max-width: 260px; transform: rotate(-2deg);
}
.media-badge .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.media-badge strong { display: block; font-size: .88rem; color: var(--ink); }
.media-badge span { font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 559px) { .media-badge { left: 12px; bottom: -18px; padding: 12px 16px; } }

/* Footer --------------------------------------------------------------------------------*/
.site-footer { background: var(--purple-deep); color: rgba(255,255,255,.72); position: relative; }
.site-footer::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal)); }
.site-footer a { transition: color .25s ease; }
.site-footer a:hover { color: #fff; }

/* Closing CTA band, sits above the link columns */
.footer-cta {
  display: grid; gap: 24px; padding-block: 56px 44px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 860px) { .footer-cta { grid-template-columns: 1fr auto; align-items: center; gap: 40px; } }
.footer-cta h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: .3em; }
.footer-cta p { margin: 0; font-size: .95rem; max-width: 46ch; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer-grid { display: grid; gap: 40px; padding-block: 52px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; } }
.footer-grid h3 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; font-family: var(--font-body); font-weight: 700; }
.footer-grid ul li { margin-bottom: 11px; font-size: .9rem; }
.footer-grid ul a { display: inline-flex; align-items: center; gap: 10px; }
.footer-grid ul a svg { color: var(--teal); transition: transform .25s var(--ease); }
.footer-grid ul a:hover svg { transform: translateX(2px); }
.footer-brand img { height: 30px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: .9rem; max-width: 36ch; }
.footer-brand .follow-row { margin-top: 22px; }
.footer-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--teal);
}
.footer-contact li { display: flex; gap: 11px; font-size: .9rem; margin-bottom: 14px; align-items: flex-start; }
.footer-contact .ico { flex: none; color: var(--teal); margin-top: 3px; }

/* Bottom bar: borderless social icons, then legal line */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-block: 26px 30px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.follow-row { display: flex; gap: 20px; }
.follow-row a { color: var(--teal); display: flex; transition: color .25s ease, transform .25s var(--ease); }
.follow-row a:hover { color: #fff; transform: translateY(-2px); }
.follow-row svg { width: 20px; height: 20px; }
.footer-legal { margin: 0; font-size: .82rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-legal span { opacity: .4; }

/* WhatsApp float button --------------------------------------------------------------------*/
.whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
  transition: transform .35s var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.08) translateY(-2px); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* Line icons ----------------------------------------------------------------------------*/
/* Size and stroke are set together: .icon-sm/.icon-lg used alone used to fall
   back to a solid black fill, which is what made icons render as blobs. */
.icon, .icon-sm, .icon-lg {
  flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon { width: 20px; height: 20px; }
.icon-lg { width: 26px; height: 26px; }
.icon-sm { width: 16px; height: 16px; }
.icon-fill { fill: currentColor; stroke: none; }

/* Misc ------------------------------------------------------------------------------------*/
.bg-soft { background: var(--paper-dim); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.chip { display: inline-block; background: rgba(255,255,255,.85); color: var(--purple-deep); font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--purple-deep); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Generic content page (WordPress-native content on Contact/FAQs/Privacy/etc) ------------*/
.entry-content { font-size: 1.02rem; }
.entry-content h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.2em; }
.entry-content h3 { font-size: 1.3rem; margin-top: 1em; }
.entry-content ul, .entry-content ol { margin: 0 0 1em; padding-left: 1.4em; list-style: revert; }
.entry-content a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 2px; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.entry-content table th, .entry-content table td { padding: 10px; border: 1px solid var(--line); text-align: left; }
/* ==========================================================================
   WooCommerce reskin — shop, single product, cart, checkout, my account.
   Markup/classes are WooCommerce's own (untouched, so cart/AJAX/variations
   keep working); this only maps colors, type and spacing onto our tokens.
   ========================================================================== */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews {
  list-style: none; margin: 0 0 24px; padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--paper-dim); border: 1px solid var(--line); color: var(--ink-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .92rem;
}
.woocommerce-message { border-left: 4px solid var(--teal); }
.woocommerce-error { border-left: 4px solid #c0392b; }
.woocommerce-message .button, .woocommerce-error .button {
  margin-left: auto; background: var(--teal); color: #fff; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: .86rem;
}

/* Shop loop ---------------------------------------------------------------- */
/* WooCommerce's float-era clearfix pseudo-elements become grid items and eat
   the first/last cells, so they must be switched off under the grid. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { ul.products { grid-template-columns: repeat(4, 1fr); } }
ul.products li.product {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; transition: box-shadow .5s var(--ease), transform .5s var(--ease); position: relative;
  width: 100% !important; float: none !important; margin: 0 !important;
}
ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
ul.products li.product a.woocommerce-LoopProduct-link { text-decoration: none; display: block; }
ul.products li.product img {
  border-radius: var(--radius-sm); aspect-ratio: 1 / 1; object-fit: contain; background: #fff; margin-bottom: 12px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  margin: 0 10px 4px; line-height: 1.25;
}
ul.products li.product .price { margin: 0 10px 10px; font-family: var(--font-num); font-weight: 700; color: var(--purple-deep); }
ul.products li.product .price del { color: var(--ink-soft); opacity: .6; font-weight: 500; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .onsale {
  position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--ink); color: var(--teal);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-radius: 999px; min-width: 0; height: auto; line-height: normal;
}
ul.products li.product .button {
  display: inline-flex; align-items: center; justify-content: center; width: calc(100% - 20px); margin: 0 10px 10px;
  padding: 11px 14px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; font-size: .84rem;
  transition: background-color .3s ease, transform .3s var(--ease);
}
ul.products li.product .button:hover { background: var(--teal-deep); transform: translateY(-2px); }
ul.products li.product .button.loading { opacity: .6; }
.woocommerce-result-count, .woocommerce-ordering { font-size: .88rem; color: var(--ink-soft); margin-bottom: 24px; }
.woocommerce-ordering select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--paper); }
.woocommerce-pagination { margin-top: 40px; }
.woocommerce-pagination ul.page-numbers { display: flex; gap: 8px; list-style: none; padding: 0; justify-content: center; }
.woocommerce-pagination .page-numbers li { display: contents; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--paper-dim); color: var(--ink-soft); font-weight: 600;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers a:hover { background: var(--purple); color: #fff; }
/* Single product ------------------------------------------------------------ */
.woocommerce div.product { display: grid; gap: 44px; margin-bottom: 60px; }
@media (min-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; gap: 72px; } }
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product .summary.entry-summary {
  width: 100% !important; float: none !important; margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
/* Flexslider restructures this wrapper, so the old framed-card treatment
   collapsed into a stray hairline above the stage. */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  padding: 0; border: 0; background: transparent; margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: calc(var(--radius-lg) - 10px); background: #fff; }
.woocommerce div.product .summary.entry-summary > .price {
  font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; color: var(--purple-deep); display: block; margin: 6px 0 18px;
}
.woocommerce div.product .summary.entry-summary del { opacity: .5; font-weight: 500; margin-right: 10px; }
.woocommerce div.product .summary.entry-summary .product_title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.woocommerce div.product form.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0;
}
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .qty {
  width: 68px; padding: 13px 10px; border: 1.5px solid var(--line); border-radius: 10px; text-align: center; font: inherit; background: var(--paper);
}
.woocommerce div.product .single_add_to_cart_button {
  background: var(--teal); color: #fff; border-radius: 10px; padding: 15px 26px; font-weight: 700; border: 0;
  transition: background-color .3s ease, transform .3s var(--ease); box-shadow: var(--shadow-sm);
}
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--teal-deep); transform: translateY(-2px); }
.woocommerce div.product .product_meta { margin-top: 20px; font-size: .86rem; color: var(--ink-soft); }
.woocommerce div.product .product_meta a { color: var(--purple-deep); }
.woocommerce div.product .stock { font-weight: 700; color: var(--success); font-size: .88rem; }
.woocommerce div.product .stock.out-of-stock { color: #c0392b; }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 -1px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 12px 18px; font-family: var(--font-head); font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-color: var(--purple); }
.woocommerce-tabs .panel { padding-top: 26px; }
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-tabs table.shop_attributes th, .woocommerce-tabs table.shop_attributes td { padding: 10px; border: 1px solid var(--line); text-align: left; }

.related.products { grid-column: 1 / -1; margin-top: 60px; }
.related.products > h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 28px; }
/* Cart ----------------------------------------------------------------------- */
.cart-empty.woocommerce-info { border-left-color: var(--purple); }
table.shop_table {
  width: 100%; border-collapse: collapse; margin-bottom: 30px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
table.shop_table th, table.shop_table td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.shop_table th { font-family: var(--font-head); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: var(--paper-dim); }
table.shop_table .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--paper-dim); }
table.shop_table .product-name a { color: var(--ink); font-weight: 600; }
table.shop_table .product-remove a {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--paper-dim); color: #c0392b; font-weight: 700; text-decoration: none;
}
table.shop_table .quantity .qty { width: 62px; padding: 10px; border: 1.5px solid var(--line); border-radius: 8px; text-align: center; }
.woocommerce-cart-form .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.woocommerce-cart-form .coupon .input-text { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; }
.cart_totals { background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 460px; margin-left: auto; }
.cart_totals h2 { font-size: 1.4rem; }
.cart_totals table.shop_table { background: transparent; border: none; }
.cart_totals table.shop_table td, .cart_totals table.shop_table th { background: transparent; border-bottom: 1px dashed var(--line); }
.wc-proceed-to-checkout .checkout-button, a.checkout-button, button.checkout-button, #place_order {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  background: var(--purple); color: #fff; border-radius: 10px; padding: 16px 24px; font-weight: 700;
  border: 0; transition: background-color .3s ease, transform .3s var(--ease); box-shadow: var(--shadow-sm);
}
.wc-proceed-to-checkout .checkout-button:hover, a.checkout-button:hover, button.checkout-button:hover, #place_order:hover { background: var(--purple-deep); transform: translateY(-2px); }

/* Checkout --------------------------------------------------------------------*/
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { display: grid; gap: 22px; }
@media (min-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-size: 1.25rem; margin-top: 26px; }
.woocommerce-form-row, .form-row { margin-bottom: 16px; }
.woocommerce-form-row label, .form-row label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.woocommerce-Input, .form-row input.input-text, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; color: var(--ink);
}
.woocommerce-Input:focus, .form-row input.input-text:focus, .form-row select:focus { outline: none; border-color: var(--teal); }
#order_review { background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.woocommerce-checkout-payment { background: var(--paper); border-radius: var(--radius-sm); padding: 4px; }
.woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; margin: 0; }
.woocommerce-checkout-payment .payment_box { background: var(--paper-dim); border-radius: var(--radius-sm); padding: 14px; margin: 6px 0 14px; font-size: .9rem; }

/* My account ------------------------------------------------------------------*/
.woocommerce-form-login, .woocommerce-form-register {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; max-width: 480px;
}
.woocommerce-Button, .woocommerce-button.button {
  display: inline-flex; align-items: center; justify-content: center; background: var(--teal); color: #fff;
  border-radius: 10px; padding: 14px 22px; font-weight: 700; border: 0; transition: background-color .3s ease, transform .3s var(--ease);
}
.woocommerce-Button:hover, .woocommerce-button.button:hover { background: var(--teal-deep); transform: translateY(-2px); }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.woocommerce-MyAccount-navigation li { border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 10px 18px; font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--purple); color: #fff; }
.woocommerce-MyAccount-content table.shop_table { margin-top: 20px; }
/* Generic-page forms (Contact Form 7 etc, no theme-friendly classes emitted) --*/
.entry-content form p { margin: 0 0 18px; }
.entry-content form label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: .88rem; }
.entry-content form input[type="text"],
.entry-content form input[type="email"],
.entry-content form input[type="tel"],
.entry-content form input[type="url"],
.entry-content form input[type="number"],
.entry-content form textarea,
.entry-content form select {
  display: block; width: 100%; max-width: 480px; padding: 13px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--paper); font: inherit; color: var(--ink); margin-top: 2px;
}
.entry-content form input:focus, .entry-content form textarea:focus, .entry-content form select:focus { outline: none; border-color: var(--teal); }
.entry-content form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; background: var(--teal); color: #fff;
  border: 0; border-radius: 10px; padding: 14px 26px; font-weight: 700; cursor: pointer; width: auto; max-width: none;
  transition: background-color .3s ease, transform .3s var(--ease);
}
.entry-content form input[type="submit"]:hover { background: var(--teal-deep); transform: translateY(-2px); }
.entry-content form fieldset { border: 0; padding: 0; margin: 0; }

/* Grid children with images/fixed-size content must not be allowed to grow
   past their track: 1fr alone doesn't clamp to intrinsic content size. */
.split > *, .cta-split > *, .bento > *, .hero-grid > *,
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary.entry-summary {
  min-width: 0;
}

/* Shop filter bar (horizontal, above the grid) -------------------------------*/
.shop-filters-bar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px;
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 36px;
}
.shop-filters-bar__group { min-width: 190px; }
.shop-filters-bar h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
  margin: 0 0 10px; font-family: var(--font-body); font-weight: 700;
}
.shop-filters-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* WooCommerce renders the count as a sibling span outside the link, so the
   <li> is the pill and the link + count both sit inside it. */
.shop-filters-bar li {
  margin: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: .82rem; line-height: 1.2;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.shop-filters-bar li a { color: var(--ink-soft); transition: color .2s ease; }
.shop-filters-bar li:hover { border-color: var(--purple); }
.shop-filters-bar li:hover a { color: var(--ink); }
.shop-filters-bar li .count { color: var(--ink-soft); opacity: .65; font-size: .76rem; }
.shop-filters-bar li.chosen, .shop-filters-bar li.wc-layered-nav-term.chosen {
  background: var(--purple); border-color: var(--purple);
}
.shop-filters-bar li.chosen a, .shop-filters-bar li.chosen .count { color: #fff; font-weight: 600; opacity: 1; }
.shop-filters-bar__reset { margin-left: auto; align-self: center; }

.shop-filters-bar .price_slider_wrapper { min-width: 210px; }
.shop-filters-bar .price_slider_amount {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-soft);
}
.shop-filters-bar .price_slider_amount .button {
  background: var(--teal); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: .8rem; font-weight: 700; border: 0; order: 2;
}
.shop-filters-bar .price_label { order: 1; }
.shop-filters-bar .ui-slider { position: relative; height: 4px; background: var(--line); border-radius: 4px; margin: 8px 8px 14px; }
.shop-filters-bar .ui-slider-range { position: absolute; height: 4px; background: var(--purple); border-radius: 4px; }
.shop-filters-bar .ui-slider-handle {
  position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; margin-left: -7px;
  background: #fff; border: 2px solid var(--purple); border-radius: 50%; cursor: pointer; outline: none;
}
/* Shade picker / paint calculator / share (single product) --------------------*/
.shade-picker { margin-bottom: 18px; }
.shade-picker__label, .paint-calc__label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.shade-picker__dots { display: flex; gap: 10px; margin-bottom: 8px; }
.shade-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); transition: transform .2s var(--ease), border-color .2s ease;
}
.shade-dot:hover { transform: translateY(-2px); }
.shade-dot.is-selected { border-color: var(--ink); transform: translateY(-2px); }
.shade-picker__note { margin: 0; font-size: .78rem; color: var(--ink-soft); max-width: 46ch; }

.paint-calc { margin: 4px 0 18px; padding: 14px; background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.paint-calc__row { display: flex; gap: 10px; margin-top: 6px; }
.paint-calc__row input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper);
}
.paint-calc__result { margin: 10px 0 0; font-size: .88rem; color: var(--ink); font-weight: 600; }
.paint-calc__result:empty { display: none; }

.septem-share { margin-top: 6px; }
/* ==========================================================================
   WooCommerce specificity overrides.
   WooCommerce ships rules like `.woocommerce ul.products li.product .price`,
   which outrank unprefixed theme rules regardless of load order. Everything
   below re-declares the design-system values at matching specificity.
   ========================================================================== */

/* Price: WooCommerce forces its own highlight colour (#958e09) */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce div.product .summary .price,
.woocommerce div.product p.price {
  color: var(--purple-deep); font-family: var(--font-num); font-weight: 700;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: var(--ink-soft); opacity: .55; font-weight: 500; }
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins { text-decoration: none; }

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--ink); color: var(--teal); border-radius: 999px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 12px; min-height: 0; min-width: 0; line-height: 1.6; top: 18px; left: 18px; margin: 0;
}

/* Pagination: WooCommerce uses a float layout inside an inline-block ul */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 48px; }
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  border: 0; margin: 0; padding: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul li {
  float: none; display: block; border: 0; margin: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--paper-dim); border: 1px solid var(--line);
  color: var(--ink-soft); font-weight: 700; font-size: .92rem; line-height: 1;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--paper); border-color: var(--purple); color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--purple); border-color: var(--purple); color: #fff;
}

/* Result count + ordering row */
.woocommerce .woocommerce-result-count { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: var(--paper); font: inherit; font-size: .88rem; color: var(--ink);
}

/* Loop card + media */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  margin: 0 0 12px; border-radius: var(--radius-sm); background: #fff;
  aspect-ratio: 1 / 1; object-fit: contain; box-shadow: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; color: var(--ink);
  padding: 0; margin: 0 10px 4px; line-height: 1.3;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
  display: inline-block; width: auto; background: var(--teal); color: #fff; border-radius: 999px;
  font-weight: 700; font-size: .8rem; padding: 9px 18px; margin: 10px 10px 6px; text-align: center;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover { background: var(--teal-deep); color: #fff; }
.woocommerce ul.products li.product .added_to_cart {
  display: block; margin: 0 10px 8px; font-size: .78rem; font-weight: 600; color: var(--purple-deep);
}

/* Single product add-to-cart + quantity */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--teal); color: #fff; border-radius: 10px; padding: 15px 26px; font-weight: 700;
}
.woocommerce div.product form.cart .button:hover { background: var(--teal-deep); }
.woocommerce .quantity .qty {
  width: 68px; padding: 13px 8px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); font: inherit; text-align: center; color: var(--ink);
}

/* Cart / checkout buttons WooCommerce also colours itself */
.woocommerce .cart .button, .woocommerce .cart input.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--teal); color: #fff; border-radius: 10px; font-weight: 700;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--teal-deep); color: #fff;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--purple); color: #fff;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--purple-deep); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 18px; font-family: var(--font-head); font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--purple); }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  padding: 12px; border-color: var(--line); font-style: normal;
}
/* Shop archive rhythm: the global 132px section padding is far too airy for a
   product listing that already sits under a page hero. */
.woocommerce-shop section, .tax-product_cat section, .woocommerce-page.archive section {
  padding-block: 56px 88px;
}
.shop-filters-bar { align-items: center; row-gap: 20px; }
.shop-filters-bar__group { display: flex; flex-direction: column; justify-content: center; }
.shop-filters-bar .price_slider_wrapper .price_slider_amount {
  margin: 0; padding: 0; font-size: .82rem;
}
.shop-filters-bar .price_slider_wrapper .price_slider_amount .button { margin-left: 4px; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 24px; }
/* Product gallery: fixed square stage so the image stays proportionate to the
   summary column instead of running 660px+ tall, plus visible slider arrows. */
.woocommerce div.product .woocommerce-product-gallery__wrapper { position: relative; }
.woocommerce div.product div.woocommerce-product-gallery__image {
  position: relative; background: #fff; border-radius: calc(var(--radius-lg) - 10px);
}
/* Needs 4 classes to outrank WooCommerce's own `.woocommerce div.product
   div.images img`, which otherwise forces height:auto and blows the stage out. */
.woocommerce div.product .woocommerce-product-gallery div.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery div.woocommerce-product-gallery__image a img {
  width: 100%; height: 440px; max-height: 55vh; object-fit: contain; padding: 18px; margin: 0;
}

/* Gallery is arrow-driven, so the flexslider thumbnail strip is switched off
   at the source (controlNav:false) and hidden here for any cached markup. */
.woocommerce div.product .flex-control-nav,
.woocommerce div.product .flex-control-thumbs { display: none !important; }

/* Slider arrows */
.woocommerce div.product .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce div.product .flex-direction-nav a {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  font-size: 0; text-indent: 0; opacity: .85; transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
/* Single-image products have nothing to page through */
.woocommerce div.product .flex-direction-nav .flex-disabled { display: none; }
.woocommerce div.product .flex-direction-nav a:hover { background: var(--teal); color: #fff; }
.woocommerce div.product .flex-direction-nav a::before {
  font-size: 20px; line-height: 1; font-family: inherit; content: "\2039"; font-weight: 700; color: currentColor;
}
.woocommerce div.product .flex-direction-nav a.flex-next::before { content: "\203A"; }
.woocommerce div.product .flex-direction-nav .flex-prev { left: 14px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 14px; }

/* Zoom hint sits above the arrows */
.woocommerce div.product .woocommerce-product-gallery__trigger { z-index: 5; }
/* FAQ accordion ---------------------------------------------------------------*/
.faq-content { max-width: 860px; }
.faq-content h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--purple-deep);
  font-family: var(--font-body); font-weight: 700; margin: 44px 0 16px;
}
.faq-content h4:first-child { margin-top: 0; }
.faq-item {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 10px; overflow: hidden; transition: border-color .25s ease;
}
.faq-item[open] { border-color: var(--purple); background: var(--paper); box-shadow: var(--shadow-sm); }
.faq-item__q {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq-item[open] .faq-item__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item__q:hover { color: var(--purple-deep); }
.faq-item__a { padding: 0 22px 20px; }
.faq-item__a p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* Contact page ----------------------------------------------------------------*/
.contact-layout { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.contact-intro h4 {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-family: var(--font-head); font-weight: 700;
  color: var(--ink); margin: 0 0 18px; text-transform: none; letter-spacing: -.01em;
}
.contact-intro p { color: var(--ink-soft); }
.contact-cards { display: grid; gap: 14px; }
@media (min-width: 600px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.contact-card__label {
  display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--purple-deep); margin-bottom: 10px;
}
.contact-card p { margin: 0 0 4px; font-size: .95rem; color: var(--ink); line-height: 1.7; }
.contact-card a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-card a:hover { color: var(--purple-deep); border-color: var(--purple); }
.contact-card__note { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; }
.contact-card--whatsapp { grid-column: 1 / -1; background: linear-gradient(150deg, var(--teal), var(--teal-deep) 90%); border-color: transparent; }
.contact-card--whatsapp .contact-card__label { color: rgba(255,255,255,.85); }
.contact-card--whatsapp p, .contact-card--whatsapp a { color: #fff; }
.contact-card--whatsapp a { border-bottom-color: rgba(255,255,255,.5); }
.contact-card--whatsapp .contact-card__note { color: rgba(255,255,255,.85); }
/* Contact form (theme-native, no plugin) --------------------------------------*/
.contact-form-card {
  background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px;
}
.contact-form-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.contact-form-card__note { color: var(--ink-soft); font-size: .92rem; margin-bottom: 24px; }
.contact-form__row { margin-bottom: 16px; }
.contact-form__grid { display: grid; gap: 16px; }
@media (min-width: 560px) { .contact-form__grid { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.contact-form label span { font-weight: 500; color: var(--ink-soft); }
.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form input[type="tel"], .contact-form textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); font: inherit; color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--teal); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { margin-top: 6px; }
.contact-form__alt { margin: 16px 0 0; font-size: .86rem; color: var(--ink-soft); }
.contact-form__alt a { color: var(--purple-deep); font-weight: 600; }
/* Honeypot: hidden from people, still filled by naive bots */
.septem-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { padding: 14px 18px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 20px; }
.form-notice--ok { background: rgba(31,157,85,.1); border: 1px solid rgba(31,157,85,.35); color: #14663a; }
.form-notice--error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); color: #9b2c20; }

.contact-details .entry-content { font-size: 1rem; }
.contact-details .contact-intro h4 { margin-top: 0; }

/* ==========================================================================
   Mobile: header close button + swipe carousels
   ========================================================================== */

@media (max-width: 999px) {
  /* .mobile-nav is a child of .site-header, which is its own stacking context
     (sticky + z-index:80), so the overlay (z-index:79) painted over the bar and
     buried the hamburger exactly as it morphs into the close X. Lift the bar. */
  .site-header__bar { position: relative; z-index: 80; }

  /* No circle behind the hamburger */
  .nav-toggle { width: 34px; height: 34px; background: none; border-radius: 0; }

  /* The X now sits on the dark overlay, so the bars have to invert */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: #fff; }

  /* Full-screen menu: the close X is the only thing left over the overlay.
     Phone and quote buttons are already desktop-only, so only the logo needs it. */
  .site-header__logo { transition: opacity .25s ease; }
  .site-header:has(.mobile-nav.is-open) .site-header__logo { opacity: 0; pointer-events: none; }
}

/* Testimonials and the projects mosaic become swipe carousels on phones.
   Native scroll-snap, no JS. The 82% card width leaves the next card peeking,
   which is the affordance that tells you it scrolls. */
@media (max-width: 699px) {
  .testimonial-row,
  .gallery-mosaic {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed past .container's 20px so cards scroll edge to edge */
    margin-inline: -20px;
    padding: 4px 20px 8px;
  }
  .testimonial-row::-webkit-scrollbar,
  .gallery-mosaic::-webkit-scrollbar { display: none; }

  .testimonial-row > *,
  .gallery-mosaic > * { flex: 0 0 82%; scroll-snap-align: center; }

  .gallery-mosaic > .gallery-tile { aspect-ratio: 4 / 3; }
  .testimonial-card { padding: 26px 22px; }
}


/* ==========================================================================
   Colour library
   ========================================================================== */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.colour-hero { padding-block: 56px 32px; background: var(--paper-dim); border-bottom: 1px solid var(--line); }
.colour-hero h1 { margin: 6px 0 12px; }
.colour-hero > .container > p { max-width: 62ch; color: var(--ink-soft); }

.colour-search { display: flex; gap: 10px; margin: 26px 0 18px; max-width: 620px; }
.colour-search input {
  flex: 1 1 auto; min-width: 0; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit;
}
.colour-search input:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.colour-search .btn { flex: 0 0 auto; }

.colour-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.colour-filter {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: .86rem; font-weight: 600; color: var(--ink);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.colour-filter span { font-size: .76rem; font-weight: 500; color: var(--ink-soft); }
.colour-filter:hover { border-color: var(--purple); }
.colour-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.colour-filter.is-active span { color: rgba(255,255,255,.65); }

.colour-library { padding-block: 40px 72px; }
.colour-count { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; }

.colour-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.colour-swatch {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--paper);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.colour-swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--purple); }
/* The chip is the content here, so give it a fixed block rather than letting
   the label height decide how much colour you actually get to see. */
.colour-swatch__chip { display: block; height: 92px; }
.colour-swatch__name { padding: 10px 12px 0; font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.colour-swatch__hex { padding: 3px 12px 11px; font-size: .74rem; color: var(--ink-soft); letter-spacing: .02em; }
.colour-swatch-grid--row { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.colour-empty { padding: 48px 0; text-align: center; }
.colour-empty h2 { margin-bottom: 8px; }

.colour-disclaimer {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-soft); max-width: 68ch;
}

/* Pagination for the_posts_pagination() */
.colour-library .navigation.pagination { margin-top: 40px; }
.colour-library .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.colour-library .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--ink);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.colour-library .page-numbers:hover { border-color: var(--purple); }
.colour-library .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.colour-library .page-numbers.dots { border-color: transparent; }

/* Single colour ------------------------------------------------------------ */

.colour-band { padding-block: 64px 56px; }
.colour-band h1 { margin: 10px 0 18px; color: inherit; }
.colour-crumbs { display: flex; gap: 10px; font-size: .84rem; font-weight: 600; opacity: .8; }
.colour-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.colour-copy {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px;
  border: 1px solid currentColor; border-radius: 999px; background: none;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; transition: opacity .25s ease;
}
.colour-copy:hover { opacity: .75; }
.colour-copy__hint { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

.colour-detail { padding-block: 56px 0; }
.colour-detail__grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .colour-detail__grid { grid-template-columns: 1fr 1fr; } }

.colour-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; background: var(--paper); }
.colour-panel h2 { font-size: 1.15rem; margin-bottom: 14px; }
.colour-note { font-size: .82rem; color: var(--ink-soft); margin-top: 14px; max-width: 60ch; }

.colour-values { display: grid; gap: 0; }
.colour-values > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.colour-values > div:last-child { border-bottom: 0; }
.colour-values dt { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.colour-values dd { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.legibility { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.legibility__box { border-radius: 12px; padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); }
.legibility__box span { font-size: .78rem; opacity: .85; }
.legibility__box strong { font-family: var(--font-head); font-size: 1.4rem; }
.legibility__box em { font-style: normal; font-size: .76rem; opacity: .85; }

.colour-ramp-section { padding-block: 56px 0; }
.colour-ramp-section h2 { font-size: 1.15rem; }
.colour-ramp { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; margin-top: 20px; }
.colour-ramp__stop { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.colour-ramp__chip { display: block; height: 76px; border-radius: 8px; border: 1px solid var(--line); }
.colour-ramp__hex { font-size: .68rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.colour-ramp__label { font-size: .64rem; color: var(--ink-soft); }
.colour-ramp__stop.is-base .colour-ramp__chip { outline: 2px solid var(--ink); outline-offset: 2px; }
.colour-ramp__stop.is-base .colour-ramp__label { color: var(--ink); font-weight: 700; }
@media (max-width: 699px) {
  /* Eleven stops will not fit, so let it scroll rather than shrink to slivers. */
  .colour-ramp { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px 8px; }
  .colour-ramp::-webkit-scrollbar { display: none; }
  .colour-ramp__stop { flex: 0 0 84px; scroll-snap-align: start; }
}

.colour-similar { padding-block: 56px 0; }
.colour-similar h2 { font-size: 1.15rem; }
.colour-similar .colour-swatch-grid { margin-top: 20px; }

.colour-cta { padding-block: 56px 0; }
.colour-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 34px 32px; border-radius: var(--radius); background: var(--paper-dim);
}
.colour-cta__inner h2 { font-size: 1.3rem; margin-bottom: 8px; }
.colour-cta__inner p { color: var(--ink-soft); max-width: 52ch; }
.colour-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.colour-single .colour-disclaimer { margin-bottom: 72px; }



/* ==========================================================================
   Projects gallery + blog
   ========================================================================== */

.page-hero .colour-crumbs { margin-bottom: 10px; }

/* Projects ----------------------------------------------------------------- */

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.project-card {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.project-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-dim); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.project-card__body h2 { font-size: 1.08rem; line-height: 1.35; }
.project-card__more { font-size: .82rem; font-weight: 700; color: var(--purple); }

.project-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }

/* The project bodies are core gallery blocks. Style them directly rather than
   depending on wp-block-library being enqueued. */
.project-body .wp-block-gallery,
.entry-content .wp-block-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; list-style: none; margin: 0 0 1.5em; padding: 0;
}
.project-body .wp-block-gallery figure,
.entry-content .wp-block-gallery figure { margin: 0; }
.project-body .wp-block-image img,
.entry-content .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.project-body .wp-block-gallery .wp-block-image { aspect-ratio: 4 / 3; margin: 0; }

/* Blog --------------------------------------------------------------------- */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-dim); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.post-card__date { font-size: .78rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
.post-card__title { font-size: 1.08rem; line-height: 1.35; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--purple); }
.post-card__excerpt { font-size: .92rem; color: var(--ink-soft); }
.post-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--purple); margin-top: auto; }
.post-card__more:hover { color: var(--purple-deep); }

.post-single__date { display: block; margin-top: 12px; font-size: .86rem; opacity: .8; }
.post-single__wrap { max-width: 820px; }
.post-single__hero { margin: 0 0 34px; }
.post-single__hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.post-single__body { font-size: 1.05rem; }
.post-single__body img { max-width: 100%; height: auto; border-radius: 12px; }

/* Pagination, shared with the colour library */
.post-grid + .navigation.pagination { margin-top: 44px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--ink);
}
.navigation.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }



/* Previous / next colour ---------------------------------------------------- */

.colour-adjacent { padding-block: 56px 0; }
.colour-adjacent__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.colour-adjacent__link {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.colour-adjacent__link:hover { border-color: var(--purple); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.colour-adjacent__link--next { justify-content: flex-end; text-align: right; }
.colour-adjacent__chip { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); }
.colour-adjacent__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.colour-adjacent__dir { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.colour-adjacent__text strong { font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 559px) {
  .colour-adjacent__inner { grid-template-columns: 1fr; }
  .colour-adjacent__link--next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

/* Cocogoose has no digits, so --font-head serves them from the Scandia shim.
   That mixes two faces mid-word, and colour notations are alphanumeric codes
   that are mostly digits, so set them in one face. */
.colour-band h1, .colour-adjacent__text strong { font-family: var(--font-body); letter-spacing: -.01em; }

/* Compact text dropdown. Reuses .has-mega's open/close (hover + focus-within)
   rather than adding a second mechanism. */
.mega--compact { width: 232px; padding: 12px; }
.mega--compact ul { display: flex; flex-direction: column; gap: 2px; }
.mega--compact a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; color: var(--ink); transition: background-color .25s ease, color .25s ease; }
.mega--compact a:hover { background: var(--paper-dim); color: var(--purple); }


/* ==========================================================================
   Shop redesign
   Appended last, so these win over the earlier shop rules at equal specificity.
   Everything stays prefixed with .woocommerce because WooCommerce ships its own
   prefixed selectors, and an unprefixed rule loses to them regardless of order.
   ========================================================================== */

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

.shop-filters-bar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 1.6fr 1fr;
  gap: 26px 40px;
  align-items: start;
  padding: 26px 28px;
  margin-bottom: 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 979px) { .shop-filters-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 619px) { .shop-filters-bar { grid-template-columns: 1fr; gap: 22px; padding: 22px 20px; } }

.shop-filters-bar__group { min-width: 0; }
.shop-filters-bar__group h3 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
}
.shop-filters-bar ul { list-style: none; margin: 0; padding: 0; }

/* One pill language for both category and size */
.shop-filters-bar .product-categories li,
.shop-filters-bar .woocommerce-widget-layered-nav-list li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; margin: 0 8px 8px 0;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.shop-filters-bar .product-categories li:hover,
.shop-filters-bar .woocommerce-widget-layered-nav-list li:hover { border-color: var(--purple); }
.shop-filters-bar .product-categories li a,
.shop-filters-bar .woocommerce-widget-layered-nav-list li a { color: inherit; }
.shop-filters-bar .product-categories li .count,
.shop-filters-bar .woocommerce-widget-layered-nav-list li .count { font-size: .75rem; font-weight: 500; color: var(--ink-soft); }
.shop-filters-bar .product-categories li.current-cat,
.shop-filters-bar .woocommerce-widget-layered-nav-list li.chosen { background: var(--ink); border-color: var(--ink); color: #fff; }
.shop-filters-bar .product-categories li.current-cat .count,
.shop-filters-bar .woocommerce-widget-layered-nav-list li.chosen .count { color: rgba(255,255,255,.65); }

/* Price slider sits in its own column and must not squash the label row */
.shop-filters-bar .price_slider_wrapper { margin: 0; }
.shop-filters-bar .price_slider_amount {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; font-size: .85rem;
}
.shop-filters-bar .price_slider_amount .price_label { color: var(--ink-soft); margin: 0; }
.shop-filters-bar .price_slider_amount .button { margin-left: auto; }

/* Result count and sorting --------------------------------------------------- */

.woocommerce .woocommerce-result-count {
  float: none; display: inline-block; margin: 0 0 20px;
  font-size: .86rem; color: var(--ink-soft);
}
.woocommerce .woocommerce-ordering { float: right; margin: 0 0 20px; }
.woocommerce .woocommerce-ordering select {
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600;
}

/* Product grid --------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 22px;
  margin: 0; padding: 0; list-style: none;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important; padding: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--purple);
}

/* WooCommerce wraps image + title + price in one <a>; make it the growing part
   so the button can sit flush at the bottom of every card regardless of how
   many lines the title runs to. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 0; color: inherit;
}

/* The product photos are inconsistent: some are tight crops, others carry white
   margin. A fixed square panel with contain keeps every bucket the same size. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  margin: 0; padding: 16px; background: #fff;
  transition: transform .5s var(--ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  /* Body face, because --font-head serves digits from a second file and these
     titles are full of sizes ("20ltr"), which made them read as two fonts. */
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink);
  padding: 16px 16px 0; margin: 0;
}

.woocommerce ul.products li.product .price {
  display: block; padding: 8px 16px 0; margin: 0;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 500; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: block; width: auto; margin: 16px 16px 18px; padding: 12px 16px;
  text-align: center; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: .84rem; font-weight: 700; letter-spacing: .01em;
  transition: background-color .25s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover { background: var(--purple); }
.woocommerce ul.products li.product .added_to_cart { margin-top: 0; background: var(--teal); color: var(--ink); }

/* Sale flash */
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; left: 12px; right: auto; margin: 0; z-index: 2;
  min-height: 0; min-width: 0; line-height: 1; padding: 7px 12px;
  border-radius: 999px; background: var(--gold); color: var(--ink);
  font-size: .72rem; font-weight: 700;
}
.woocommerce ul.products li.product { position: relative; }

/* Product names carry sizes baked into the name ("20ltr"), and --font-head
   serves digits from a second file, so the name read as two fonts mid-word. */
.woocommerce div.product .product_title { font-family: var(--font-body); letter-spacing: -.01em; }



/* ==========================================================================
   Gallery page (core [gallery] shortcode)
   Default gallery styles are disabled in functions.php, so this owns the grid.
   ========================================================================== */

.gallery-content .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 0;
}
.gallery-content .gallery-item {
  width: auto !important; float: none !important; margin: 0 !important; padding: 0;
  display: block;
}
.gallery-content .gallery-icon { margin: 0; }
.gallery-content .gallery-icon a,
.gallery-content .gallery-icon img {
  display: block; width: 100%; margin: 0;
}
.gallery-content .gallery-icon a {
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.gallery-content .gallery-icon img {
  height: 100% !important; object-fit: cover;
  border: 0 !important; padding: 0;
  transition: transform .5s var(--ease);
}
.gallery-content .gallery-item:hover .gallery-icon img { transform: scale(1.05); }
.gallery-content .gallery-caption {
  font-size: .82rem; color: var(--ink-soft); margin-top: 8px; text-align: left;
}

@media (max-width: 559px) {
  .gallery-content .gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
}



/* ==========================================================================
   Gallery: project groups + preview lightbox
   ========================================================================== */

.gallery-content h2 {
  font-size: 1.35rem; line-height: 1.3; margin: 52px 0 4px;
}
.gallery-content > h2:first-child { margin-top: 0; }
.gallery-content .project-meta {
  font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  margin: 0 0 18px; letter-spacing: .01em;
}

.gallery-content .gallery-icon a { cursor: zoom-in; }

/* Native <dialog>, so Esc, focus trapping and the backdrop come for free. */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(23, 15, 32, .93); }

.lightbox__img {
  display: block; width: auto; height: auto;
  max-width: 90vw; max-height: 84vh;
  border-radius: var(--radius); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}

.lightbox__close,
.lightbox__nav {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 1.6rem; line-height: 1;
  transition: background-color .25s ease, transform .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: #fff; transform: scale(1.06); }

.lightbox__close { top: -18px; right: -18px; font-size: 1.5rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: -22px; }
.lightbox__nav--next { right: -22px; }

.lightbox__count {
  margin: 14px 0 0; text-align: center;
  color: rgba(255, 255, 255, .75); font-size: .82rem; font-weight: 600;
}

@media (max-width: 699px) {
  .lightbox__close { top: -14px; right: -8px; width: 40px; height: 40px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: -6px; }
  .lightbox__nav--next { right: -6px; }
  .lightbox__img { max-width: 94vw; }
}


/* ==========================================================================
   Single product: larger image, collapsible specs
   ========================================================================== */

.woocommerce div.product .woocommerce-product-gallery div.woocommerce-product-gallery__image img {
  height: 540px;
  max-height: 62vh;
}
/* Belt and braces: the zoom overlay is disabled in PHP, but if it ever loads
   again it must not escape the frame. */
.woocommerce div.product .woocommerce-product-gallery img.zoomImg { display: none !important; }

@media (max-width: 799px) {
  .woocommerce div.product .woocommerce-product-gallery div.woocommerce-product-gallery__image img {
    height: 380px;
  }
}

.spec-toggle {
  margin: 18px 0 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.spec-toggle > summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background-color .25s ease;
}
.spec-toggle > summary::-webkit-details-marker { display: none; }
.spec-toggle > summary::after {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.spec-toggle[open] > summary { background: var(--paper-dim); }
.spec-toggle[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.spec-toggle__body { padding: 4px 18px 16px; font-size: .92rem; }
.spec-toggle__body p { margin: 0; color: var(--ink-soft); line-height: 1.9; }



/* ==========================================================================
   Product detail page
   ========================================================================== */

.pdp { padding-block: 34px 72px; }

.pdp__crumbs { font-size: .82rem; color: var(--ink-soft); margin-bottom: 26px; }
.pdp__crumbs a { color: var(--ink-soft); }
.pdp__crumbs a:hover { color: var(--purple); }
.pdp__crumbs span { margin: 0 6px; opacity: .5; }

.pdp__grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) {
  .pdp__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
}
.pdp__media, .pdp__summary { min-width: 0; }

.pdp__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.pdp__title {
  font-family: var(--font-body); letter-spacing: -.01em;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.25;
  margin: 0 0 16px; color: var(--ink);
}

.pdp__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pdp__price { font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.pdp__price .woocommerce-Price-amount { color: inherit; }
.pdp__price del { opacity: .45; font-weight: 500; font-size: 1.05rem; margin-right: 6px; }
.pdp__price ins { text-decoration: none; }
.pdp__price-unit { font-size: .85rem; color: var(--ink-soft); }
.pdp__price-note { font-size: .84rem; color: var(--ink-soft); margin: 8px 0 0; max-width: 52ch; }

.pdp__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  display: inline-block; flex: 0 0 auto;
}
.pdp__stock {
  display: flex; align-items: center; gap: 9px; margin: 18px 0 20px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.pdp__stock--out .pdp__dot { background: var(--ink-soft); }

/* Quantity + add to cart on one row, cart button carrying the weight. */
.pdp__summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 0 0 18px; }
.pdp__summary form.cart .quantity { flex: 0 0 auto; }
.pdp__summary form.cart .quantity .qty {
  width: 78px; height: 100%; min-height: 52px; padding: 0 10px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font: inherit; font-weight: 700; color: var(--ink);
}
.pdp__summary form.cart button.single_add_to_cart_button {
  flex: 1 1 200px; min-height: 52px; padding: 14px 28px;
  border-radius: 10px; background: var(--ink); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s ease;
}
.pdp__summary form.cart button.single_add_to_cart_button:hover { background: var(--purple); }
/* The shade picker and paint calculator hook in above the button and need the
   full row width, not a slot in the flex line. */
.pdp__summary form.cart .septem-shades,
.pdp__summary form.cart .septem-calc { flex: 1 0 100%; }

.pdp__ship {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 26px; padding: 13px 15px;
  background: var(--paper-dim); border-radius: 10px;
  font-size: .82rem; color: var(--ink-soft);
}
.pdp__ship .pdp__dot { margin-top: 6px; }

.pdp__facts { margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.pdp__facts > div { display: flex; gap: 10px; padding: 5px 0; font-size: .88rem; }
.pdp__facts dt { font-weight: 700; color: var(--ink); flex: 0 0 120px; }
.pdp__facts dd { margin: 0; color: var(--ink-soft); }

.pdp__panels { border-top: 1px solid var(--line); }
.pdp__panel { border-bottom: 1px solid var(--line); }
.pdp__panel > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 17px 34px 17px 0;
  font-size: .95rem; font-weight: 700; color: var(--ink);
}
.pdp__panel > summary::-webkit-details-marker { display: none; }
/* Plus that becomes a minus, drawn from two rules so it needs no icon. */
.pdp__panel > summary::before,
.pdp__panel > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  background: var(--ink); transition: transform .3s var(--ease), opacity .3s ease;
}
.pdp__panel > summary::before { width: 13px; height: 2px; transform: translateY(-50%); }
.pdp__panel > summary::after  { width: 2px; height: 13px; right: 9px; transform: translateY(-50%); }
.pdp__panel[open] > summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.pdp__panel-body { padding: 0 0 22px; font-size: .92rem; color: var(--ink-soft); }
.pdp__panel-body p { margin: 0 0 .9em; }
.pdp__panel-body p:last-child { margin-bottom: 0; }
.pdp__panel-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.pdp__panel-body table.shop_attributes { width: 100%; border-collapse: collapse; }
.pdp__panel-body table.shop_attributes th,
.pdp__panel-body table.shop_attributes td {
  text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.pdp__panel-body table.shop_attributes th { font-weight: 700; color: var(--ink); width: 40%; }
.pdp__panel-body table.shop_attributes td { color: var(--ink-soft); }
.pdp__panel-body table.shop_attributes p { margin: 0; }
.pdp__panel-body table.shop_attributes tr:last-child th,
.pdp__panel-body table.shop_attributes tr:last-child td { border-bottom: 0; }

.pdp__share {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}
.pdp__share:hover { border-color: var(--purple); background: var(--paper-dim); }
.pdp__share svg { width: 15px; height: 15px; }

/* Related products heading row */
.related.products > h2, .up-sells.products > h2 {
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700;
  margin-bottom: 22px;
}
.related.products, .up-sells.products { padding-block: 20px 72px; }

/* --------------------------------------------------------------------------
   The decorative scrim on .cta-card is meant to darken a photo. .cta-card--solid
   shares the class but has no photo, and its content is not positioned, so the
   scrim painted over the button: greyed out and unclickable.
   -------------------------------------------------------------------------- */
.cta-card::after { pointer-events: none; }
.cta-card--solid::after { content: none; }
.cta-card--solid > div { position: relative; z-index: 1; }

.btn__lead { display: inline-flex; align-items: center; margin-right: 9px; }
.btn__lead svg { width: 15px; height: 15px; }

/* Mobile menu: compact enough for eight items plus the quote button. */
@media (max-width: 999px) {
  .mobile-nav ul { gap: 0; margin-bottom: 22px; }
  .mobile-nav a { font-size: 1.32rem; padding: 7px 6px; }
  .mobile-nav .btn { max-width: 230px; }
}
@media (max-width: 999px) and (max-height: 700px) {
  .mobile-nav a { font-size: 1.12rem; padding: 5px 6px; }
}

/* Quote button and a call shortcut side by side in the mobile drawer. */
.mobile-nav__actions { display: flex; align-items: stretch; gap: 10px; }
.mobile-nav__actions .btn { max-width: none; }
.mobile-nav__call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  transition: background-color .25s ease;
}
.mobile-nav__call:hover { background: rgba(255,255,255,.26); }
.mobile-nav__call svg { width: 24px; height: 24px; }

/* The reference layout leads with a dark primary action, and the teal is
   already carrying the header CTA, so keep them distinct. */
.woocommerce div.product .pdp__summary form.cart button.single_add_to_cart_button {
  background: var(--ink); color: #fff;
}
.woocommerce div.product .pdp__summary form.cart button.single_add_to_cart_button:hover {
  background: var(--purple);
}

/* The facts now live inside a panel, so they need no top rule of their own. */
.pdp__panel-body .pdp__facts { margin: 0; padding: 0; border-top: 0; }



/* ==========================================================================
   Product card balance
   Titles run from one line to three, which pushed prices and buttons to
   different heights across a row. Clamp the title to two lines and pin the
   price to the bottom of the link so every card lines up.
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.woocommerce ul.products li.product .price { margin-top: auto; padding-top: 10px; }

/* ==========================================================================
   Article
   ========================================================================== */

.article__head { padding-block: 34px 30px; background: var(--paper-dim); border-bottom: 1px solid var(--line); }
.article__head-inner { max-width: 820px; }
.article__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: var(--ink-soft); margin-bottom: 18px; }
.article__crumbs a { color: var(--ink-soft); }
.article__crumbs a:hover { color: var(--purple); }
.article__crumbs span { opacity: .5; }

.article__chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 16px;
}
.article__title {
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 16px; color: var(--ink);
}
.article__standfirst { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 22px; max-width: 62ch; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-soft);
}
.article__meta span { position: relative; }
.article__meta span + span::before { content: "·"; position: absolute; left: -12px; opacity: .6; }

.article__hero { margin: 30px 0 0; }
.article__hero img { width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: var(--radius); display: block; }

.article__grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 44px 76px; }
@media (min-width: 980px) {
  .article__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
  .article__side { position: sticky; top: 110px; }
}
.article__main { min-width: 0; }

/* Contents */
.toc {
  border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px; margin-bottom: 30px; background: var(--paper);
}
.toc__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.toc__title { font-size: 1.05rem; margin: 0 0 12px; }
.toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc__list li { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.toc__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.toc__num { font-size: .72rem; font-weight: 700; color: var(--ink-soft); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.toc__list a { color: var(--ink); font-size: .93rem; }
.toc__list a:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }

/* Key takeaway */
.takeaway {
  border-left: 3px solid var(--purple); background: var(--paper-dim);
  border-radius: 0 12px 12px 0; padding: 20px 24px; margin-bottom: 30px;
}
.takeaway__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin: 0 0 6px; }
.takeaway p:last-child { margin: 0; font-size: .96rem; color: var(--ink); }

.article__body { font-size: 1.04rem; line-height: 1.75; }
.article__body h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 1.8em 0 .5em; scroll-margin-top: 110px; }
.article__body h3 { font-size: 1.12rem; margin: 1.5em 0 .4em; }
.article__body p { margin: 0 0 1.1em; }
.article__body ul, .article__body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article__body li { margin-bottom: .5em; }
.article__body a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.article__body a:hover { color: var(--purple-deep); }
.article__body strong { color: var(--ink); }
.article__body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--teal);
  font-size: 1.06rem; color: var(--ink);
}
.article__body table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .93rem;
  display: block; overflow-x: auto;
}
.article__body table th, .article__body table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.article__body table th { font-weight: 700; color: var(--ink); background: var(--paper-dim); }
.article__body table td { color: var(--ink-soft); }

.article__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }

/* Sidebar */
.article__side { display: flex; flex-direction: column; gap: 18px; }

.side-cta {
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px 24px;
}
.side-cta__eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.side-cta h3 { color: #fff; font-size: 1.15rem; margin: 0 0 10px; }
.side-cta p { color: rgba(255,255,255,.72); font-size: .88rem; margin: 0 0 18px; }
.side-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .25s var(--ease);
}
.side-cta__btn:hover { transform: translateY(-2px); }

.side-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; background: var(--paper); }
.side-card__eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.side-links, .side-recent { list-style: none; margin: 0; padding: 0; }
.side-links li { border-bottom: 1px solid var(--line); }
.side-links li:last-child { border-bottom: 0; }
.side-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.side-links a::after { content: "\2192"; color: var(--gold); transition: transform .25s var(--ease); }
.side-links a:hover { color: var(--purple); }
.side-links a:hover::after { transform: translateX(3px); }

.side-recent li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.side-recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-recent a { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.side-recent a:hover { color: var(--purple); }
.side-recent time { display: block; margin-top: 4px; font-size: .76rem; color: var(--ink-soft); }

/* ==========================================================================
   Shop filters, mobile grid, mobile menu
   ========================================================================== */

/* Filter labels sit inline with their pills now that price is gone. */
.shop-filters-bar { grid-template-columns: 1fr; gap: 16px; }
.shop-filters-bar__group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 12px; }
.shop-filters-bar__group h3 { margin: 0; flex: 0 0 auto; min-width: 72px; }
.shop-filters-bar__group ul { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.shop-filters-bar .product-categories li,
.shop-filters-bar .woocommerce-widget-layered-nav-list li { margin: 0 8px 0 0; }
@media (max-width: 619px) { .shop-filters-bar__group h3 { flex-basis: 100%; min-width: 0; } }

/* Two products per row on phones, not one. */
@media (max-width: 619px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .84rem; padding: 12px 12px 0; }
  .woocommerce ul.products li.product .price { font-size: .92rem; padding: 6px 12px 0; }
  .woocommerce ul.products li.product .button { margin: 12px 12px 14px; padding: 10px 10px; font-size: .76rem; }
  .woocommerce ul.products li.product img { padding: 10px; }
}

/* Mobile drawer: left aligned, hairline dividers, plain call icon. */
@media (max-width: 999px) {
  .mobile-nav { align-items: stretch; padding-inline: 26px; }
  .mobile-nav ul { align-items: stretch; width: 100%; max-width: 420px; margin-inline: auto; margin-bottom: 24px; }
  .mobile-nav li { border-bottom: 1px solid rgba(255,255,255,.13); }
  .mobile-nav li:last-child { border-bottom: 0; }
  .mobile-nav ul a { text-align: left; }
  .mobile-nav__actions { width: 100%; max-width: 420px; margin-inline: auto; align-items: center; }
  .mobile-nav__actions .btn { flex: 1 1 auto; }
  .mobile-nav__call { background: none; border: 0; width: 44px; height: 44px; flex: 0 0 44px; }
  .mobile-nav__call:hover { background: rgba(255,255,255,.12); }
}


/* ==========================================================================
   Related products strip
   ========================================================================== */

.also { background: var(--paper-dim); padding-block: 54px 62px; margin-top: 20px; }
.also__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 28px;
}
.also__eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 6px;
}
.also__title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ink); }
.also__all {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.also__all:hover { color: var(--purple); border-color: var(--purple); }

.also__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 20px; }
.also__card { display: flex; flex-direction: column; text-align: center; }
.also__media {
  display: block; background: #fff; overflow: hidden; margin-bottom: 14px;
  aspect-ratio: 1 / 1;
}
.also__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block;
  transition: transform .5s var(--ease);
}
.also__card:hover .also__media img { transform: scale(1.05); }
.also__name {
  font-size: .86rem; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;
}
.also__card:hover .also__name { color: var(--purple); }
.also__price { font-size: .88rem; font-weight: 700; color: var(--ink); margin-top: auto; }
.also__price del { opacity: .45; font-weight: 500; margin-right: 5px; }
.also__price ins { text-decoration: none; }

@media (max-width: 619px) {
  .also__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .also { padding-block: 40px 46px; }
}


/* Share row */
.pdp__share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.pdp__share-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px;
}
.pdp__share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; padding: 0;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s var(--ease);
}
.pdp__share-btn:hover { border-color: var(--purple); background: var(--purple); color: #fff; transform: translateY(-2px); }
.pdp__share-btn svg { width: 15px; height: 15px; }
.pdp__share-copied { font-size: .78rem; font-weight: 600; color: var(--teal); }

/* Header call icon reads purple; the tinted background stays. */
.header-icon-btn { color: var(--purple); }
.header-icon-btn:hover { color: var(--purple-deep); }

/* The sidebar CTA button reads teal, matching the header call to action. */
.side-cta__btn { background: var(--teal); color: var(--ink); }
.side-cta__btn:hover { background: var(--teal-deep); color: #fff; }
.side-cta__eyebrow { color: var(--teal); }

/* The article header shares .container, so a max-width on it was centred by the
   container's own auto margins and sat inboard of the body column. Let the
   container behave normally and constrain the text instead. */
.article__head-inner { max-width: var(--container); }
.article__crumbs, .article__title, .article__standfirst, .article__meta { max-width: 820px; }
.article__meta { margin-right: auto; }

.footer-credit { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit:hover { color: var(--teal); }

/* The pill list carried gap: 0 with only a right margin per pill, so wrapped
   rows sat flush against each other. Use a real gap in both axes. */
.shop-filters-bar__group ul { gap: 10px; }
.shop-filters-bar .product-categories li,
.shop-filters-bar .woocommerce-widget-layered-nav-list li { margin: 0; }

@media (max-width: 619px) {
  .shop-filters-bar { gap: 22px; padding: 20px 18px; }
  .shop-filters-bar__group { gap: 12px; }
  .shop-filters-bar__group h3 { flex-basis: 100%; min-width: 0; margin-bottom: 0; }
  .shop-filters-bar__group ul { width: 100%; gap: 10px; }
  .shop-filters-bar .product-categories li,
  .shop-filters-bar .woocommerce-widget-layered-nav-list li { padding: 9px 15px; font-size: .82rem; }
  /* Same Woo override as above, at the mobile pill size. */
  .woocommerce .shop-filters-bar li.woocommerce-widget-layered-nav-list__item { padding: 9px 15px; }
}

/* WooCommerce styles the layered nav items through .woocommerce-prefixed
   selectors that outrank the pill rules above, so the size filter lost its
   padding and rendered as bare text beside the category pills. */
.woocommerce .shop-filters-bar li.woocommerce-widget-layered-nav-list__item { padding: 8px 15px; margin: 0; }

.contact-form__sum input[type="text"] { max-width: 140px; }