/* =========================================================================
   Parv Gifting — style.css
   Order is fixed:  @font-face → :root → reset → base → layout → components
                    → sections → utilities
   All media queries live in responsive.css. Nothing responsive belongs here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. @font-face — size-adjusted fallbacks so the webfont swap never reflows
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 103%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Sacramento Fallback';
  src: local('Segoe Script'), local('Brush Script MT');
  size-adjust: 118%;
  ascent-override: 92%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* --- Colour — every value sampled from the Parv Gifting logo -----------
     The ribbon pink #EA028C is 4.30:1 on white and 4.25:1 against the theme's
     ink, so it FAILS AA for button-sized text either way. Hence two pinks:
     --color-primary for fills and graphics (the logo colour, untouched), and
     --color-primary-strong for anything carrying text. */
  --color-primary: #ea028c;
  --color-primary-strong: #c4067a;
  --color-primary-dark: #a8046a;
  --color-primary-ink: #d10a7e;
  --color-secondary: #fce7f3;

  /* The mug's confetti mosaic — decorative and categorical only, never text. */
  --tile-yellow: #d9da24;
  --tile-orange: #e89024;
  --tile-lime: #92bc40;
  --tile-red: #ce2125;
  --tile-sky: #10a6d9;
  --tile-teal: #00a094;
  --tile-purple: #4e2976;

  --color-heading: #1a1a1a;
  --color-body: #1a1a1a;
  --color-muted: #6b6b76;

  --color-bg: #ffffff;
  --color-bg-alt: #fff2f8;
  --color-bg-dark: #1a1a1a;
  --color-border: #ececf1;
  --color-border-strong: #c9c9d2;   /* form controls need a visible edge */
  --color-on-dark: #ffffff;

  --color-badge: #d9da24;
  --color-newsletter-hover: #a8046a;

  --color-whatsapp: #25d366;
  --color-error: #d92d20;
  --color-success: #027a48;

  /* --- Type -------------------------------------------------------------
     Base is 16px. Every size below is that base multiplied by a step on a
     1.25 scale, expressed in rem so browser zoom and user preferences work.
       0.875  14  labels, meta, nav
       1      16  BODY — the floor, never lower, at any breakpoint
       1.125  18  lead paragraphs
       1.5    24  h3 / card titles
       2.25   36  h2 / every section heading
       2.75   44  h1
       3.5    56  display                                                  */
  --font-heading: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, sans-serif;
  --font-accent: 'Sacramento', 'Sacramento Fallback', cursive;
  --font-script: var(--font-accent);   /* the codebase's older name for it */

  --fs-small: 0.875rem;                                  /* 14 */
  --fs-body: 1rem;                                       /* 16 — the floor */
  --fs-lead: 1.125rem;                                   /* 18 */
  --fs-h4: 1.25rem;                                      /* 20 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);       /* 20 → 24 */
  --fs-h2: clamp(1.5rem, 1.05rem + 2.2vw, 2.25rem);      /* 24 → 36 */
  --fs-h1: clamp(1.75rem, 1.15rem + 3vw, 2.75rem);       /* 28 → 44 */
  --fs-display: clamp(2rem, 1.2rem + 4vw, 3.5rem);       /* 32 → 56 */
  --fs-script: clamp(2.25rem, 1.3rem + 4.8vw, 4rem);     /* 36 → 64 */

  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.35;
  --lh-body: 1.7;

  --ls-body: 0;
  --ls-wide: 0.12em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing — 8px base ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 7.5rem;

  --section-padding: var(--space-8);

  /* --- Shape — the theme is hard-edged by design ------------------------ */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(21 21 21 / 6%);
  --shadow-md: 0 8px 24px rgb(21 21 21 / 8%);

  --border-hairline: 1px solid var(--color-border);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1400px;
  --container-narrow: 1100px;
  --gutter: var(--space-4);
  --announcement-height: 62px;
  --header-height: 88px;               /* one row: nav | logo | icons */
  --header-total: var(--header-height);
  --nav-gap: 2rem;                   /* 40px — measured between nav items */

  /* --- Touch targets ---------------------------------------------------- */
  --tap-target: 44px;
  --fab-size: 52px;   /* both floating buttons, identical */
  --tap-target-lg: 48px;

  /* --- Motion ----------------------------------------------------------- */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   3. Reset
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   4. Base elements
   ---------------------------------------------------------------------- */
body {
  min-height: 100%;
  padding-top: calc(var(--announcement-height) + var(--header-total));
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  color: var(--color-heading);
  letter-spacing: normal;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h3); }

p { color: var(--color-body); }

a {
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

a:hover { color: var(--color-primary-ink); }

em { font-style: normal; }

h1 em, h2 em, h3 em, .heading em { font-style: italic; }

/* The script accent. Sized in `em` so it scales with whatever heading it sits
   in, rather than being pinned to one size.
   It applies to EVERY section heading by default — one word in Sacramento, the
   rest in Fraunces — and stays available as an opt-in `.script` class for
   headings outside a heading group, like the hero slides. */
.heading-group .heading em,
.heading.script em {
  font-family: var(--font-script);
  font-size: 1.35em;
  line-height: 0.95;
  font-style: normal;
  color: var(--color-primary-ink);
}

/* Card titles keep plain italic — the script belongs to section headings, or
   it stops being special. */
.product-card .heading em,
.quick-link .heading em,
.category-tile .heading em { font-family: var(--font-heading); font-size: 1em; font-style: italic; color: inherit; }

strong { font-weight: var(--fw-bold); }

/* -------------------------------------------------------------------------
   5. Layout primitives
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-padding);
  background: var(--color-bg);
}

.section.alt { background: var(--color-bg-alt); }
.section.tight { padding-block: var(--space-6); }
.section.flush { padding-block: 0; }

.row {
  display: grid;
  gap: var(--space-4);
}

.row.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Grid and flex children that hold text must be allowed to shrink,
   or one long word gives the whole document a horizontal scrollbar. */
.row > *,
.carousel-track > * { min-width: 0; }

/* -------------------------------------------------------------------------
   6. Components
   ---------------------------------------------------------------------- */

/* --- Icons -------------------------------------------------------------
   One grid, one stroke weight. Size is set here, never per-instance, so a
   row of icons is always optically even. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.icon.small { width: 18px; height: 18px; }
.icon.large { width: 26px; height: 26px; }
.icon.empty { opacity: 0.35; }

/* The star is the one icon that reads better filled — it is a rating, not a
   control, and an outline star at 16px is mush. */
.star-rating .icon { width: 16px; height: 16px; }
.star-rating .icon.empty { opacity: 0.28; }

/* --- Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-4);
  background: var(--color-heading);
  color: #fff;
}

/* --- Button ------------------------------------------------------------ */
.btn,
.site-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-lg);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}

.btn:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.disabled { opacity: 0.5; pointer-events: none; }

.btn-primary,
.site-form input[type="submit"] {
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
}

.btn-primary:hover,
.site-form input[type="submit"]:hover {
  background: var(--color-primary-dark);
  border-color: transparent;
  color: var(--color-on-dark);
}

.btn-outline {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-heading);
}

.btn-outline:hover {
  background: var(--color-primary-strong);
  border-color: transparent;
  color: var(--color-on-dark);
}

.btn-soft {
  background: var(--color-bg-alt);
  color: var(--color-heading);
  border-color: var(--color-primary);
}

.btn-soft:hover {
  background: var(--color-primary-strong);
  border-color: transparent;
  color: var(--color-on-dark);
}

.btn.small { min-height: 40px; padding: var(--space-2) var(--space-4); }
.btn.btn-block { display: flex; width: 100%; }

/* --- Heading group -----------------------------------------------------
   Every section heading on the site is this component, at this size, with
   this spacing and this squiggle. There are no size variants, because four
   sections in four sizes is four websites. */
.heading-group { margin-bottom: var(--space-7); }

.heading-group .label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary-ink);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
}

.heading-group .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  /* Slightly more leading than a plain heading needs, so a wrapped line with
     the script accent on it never touches the line above. */
  line-height: 1.3;
  color: var(--color-heading);
  text-wrap: balance;
}

/* The squiggle signature, under every section heading without exception. */
.heading-group .heading::after {
  content: "";
  display: block;
  width: 112px;
  height: 12px;
  margin-top: var(--space-4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='12' viewBox='0 0 112 12'%3E%3Cpath d='M2 6q7-6 14 0t14 0 14 0 14 0 14 0 14 0 14 0' fill='none' stroke='%23ea028c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.heading-group.centered .heading::after { margin-inline: auto; }
.heading-group.light .heading::after { filter: brightness(0) invert(1); }

.heading-group .heading + p { margin-top: var(--space-4); }
.heading-group p { max-width: 62ch; font-size: var(--fs-lead); color: var(--color-body); }

.heading-group.centered { text-align: center; }
.heading-group.centered p { margin-inline: auto; }
/* --- Media figure + skeleton ------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media.portrait { aspect-ratio: 3 / 4; }

/* 4:5 — the 1080 x 1350 portrait an Instagram post uses. Product and gallery
   tiles share it, so a photo shot for the feed drops straight in uncropped. */
.media.post { aspect-ratio: 4 / 5; }
.media.square { aspect-ratio: 1 / 1; }
.media.landscape { aspect-ratio: 3 / 2; }

/* Shimmer only exists on figures explicitly opted in below the fold. */
.media.lazy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

/* The .js guard: without JavaScript the image is simply visible. */
.js .media.lazy img { opacity: 0; transition: opacity 0.4s ease; }
.media.lazy.loaded img { opacity: 1; }
.media.lazy.loaded::after { content: none; }

/* --- Badge ------------------------------------------------------------- */
.badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  background: var(--color-badge);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.badge.badge-sale { background: var(--color-primary-strong); color: var(--color-on-dark); }

/* --- Product card ------------------------------------------------------ */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--space-4);
  text-align: center;
  background: var(--color-bg);
}

.product-card > a:not(.btn) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-4);
}

/* The text block gets its own padding so the words never touch the image
   edge or the card edge. */
.product-card .card-text {
  display: grid;
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

.product-card > .btn { flex: 0 0 auto; margin: var(--space-4) var(--space-4) 0; }

.product-card .price { margin-top: auto; padding-top: var(--space-1); }

.product-card .media { background: var(--color-bg-alt); }

.product-card .media img {
  transition: transform var(--transition-slow), opacity var(--transition);
}

.product-card .media .hover-image {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.product-card .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.product-card .price {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: baseline;
  color: var(--color-muted);
  font-size: var(--fs-body);
}

.product-card .price s { color: var(--color-muted); }

.product-card.compact .heading { font-size: var(--fs-body); font-family: var(--font-body); }
.product-card.compact .btn { display: none; }

@media (hover: hover) {
  .product-card:hover .media img { transform: scale(1.04); }
  .product-card:hover .media .hover-image { opacity: 1; }
}

/* --- Category tile ----------------------------------------------------- */
.category-tile {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  /* aspect-ratio: 3 / 4; */
  background: var(--color-bg-alt);
  height: 100%;
}

.category-tile img {
  /* position: absolute; */
  /* inset: 0; */
  width: 100%;
  /* height: 100%; */
  height: 450px;
  object-fit: cover;
  transition: transform var(--transition-slow);
  overflow: hidden;
}

.category-tile .tile-body {
  /* position: relative; */
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
  text-align: center;
}

.category-tile .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-heading);
}

@media (hover: hover) {
  .category-tile:hover img { transform: scale(1.05); }
}

/* --- Promise item ------------------------------------------------------ */
.promise-item {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.promise-item .heading { margin: 0; }
.promise-item p { margin: 0; max-width: 34ch; }

.promise-item img { max-width: 100%; height: auto; }

.promise-item .promise-icon,
.quick-link .promise-icon,
.heading-group .promise-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  /* Defaults to the brand pink, never the pale tint — a white icon on
     --color-secondary was invisible on a tinted section. */
  background: var(--tone, var(--color-primary-strong));
  color: var(--color-on-dark);
}

.heading-group.centered .promise-icon { margin-inline: auto; }

.promise-item .promise-icon .icon,
.quick-link .promise-icon .icon,
.heading-group .promise-icon .icon { width: 26px; height: 26px; }

.promise-item.tone-pink { --tone: var(--color-primary-strong); }
.promise-item.tone-sky { --tone: var(--tile-sky); }
.promise-item.tone-orange { --tone: var(--tile-orange); }
.promise-item.tone-teal { --tone: var(--tile-teal); }
.promise-item .heading {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.promise-item p { font-size: var(--fs-body); max-width: 34ch; }

/* --- Star rating ------------------------------------------------------- */
.star-rating {
  display: flex;
  gap: var(--space-1);
  color: var(--color-primary);
}

.star-rating svg { width: 20px; height: 20px; }
.star-rating svg.empty { fill: none; }

/* --- Testimonial card -------------------------------------------------- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
}

.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--color-heading);
}

.testimonial-card .star-rating { margin-top: auto; }

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card figcaption img {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-card .author-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  color: var(--color-heading);
}

.testimonial-card .author-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-body);
  font-size: var(--fs-small);
}

.testimonial-card .author-meta svg { width: 16px; height: 16px; color: var(--color-primary); }

/* --- Quick link card --------------------------------------------------- */
.quick-link {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline);
}

.quick-link .media { width: 120px; aspect-ratio: 1 / 1; }

.quick-link .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.quick-link .cta {
  position: relative;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.quick-link .cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.quick-link:hover .cta::after,
.quick-link:focus-within .cta::after { transform: scaleX(1); }

/* --- Instagram tile ---------------------------------------------------- */
.social-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-bg-dark);
}

.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.social-tile .hover-image { position: absolute; inset: 0; opacity: 0; }

.social-tile .social-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-on-dark);
  background: rgb(21 21 21 / 30%);
  opacity: 0;
  transition: opacity var(--transition);
}

.social-tile .social-icon svg { width: 28px; height: 28px; }

@media (hover: hover) {
  .social-tile:hover .social-icon { opacity: 1; }
  .social-tile:hover img { transform: scale(1.04); }
}

.social-tile:focus-visible .social-icon { opacity: 1; }

/* --- Carousel ---------------------------------------------------------- */
.carousel { position: relative; }

.carousel-viewport { overflow: hidden; }

.carousel-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.carousel-track > * { flex: 0 0 100%; }

.carousel.peek { --per-view: 5; }

.carousel.peek .carousel-track > * {
  flex: 0 0 calc((100% - var(--space-5) * (var(--per-view) - 1)) / var(--per-view));
}

.carousel.peek.roomy { --per-view: 3; }

/* Fade carousel stacks its slides and cross-fades them. */
.carousel.fade .carousel-track { display: grid; gap: 0; transition: none; }
.carousel.fade .carousel-track > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.carousel.fade .carousel-track > [data-active] { opacity: 1; visibility: visible; }

.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tap-target-lg);
  height: var(--tap-target-lg);
  transform: translateY(-50%);
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background-color var(--transition), opacity var(--transition);
}

.carousel-btn:hover { background: var(--color-primary-dark); color: var(--color-on-dark); }
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }
.carousel-btn svg { width: 16px; height: 16px; }

.carousel-bar {
  position: relative;
  width: min(900px, 100%);
  height: 3px;
  margin: var(--space-5) auto 0;
  background: var(--color-bg);
}

.carousel-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--color-primary);
  transition: transform var(--transition), width var(--transition);
}

.carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.carousel-nav .carousel-btn {
  position: static;
  transform: none;
  width: var(--tap-target);
  height: var(--tap-target);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-dark);
}

.carousel-nav .carousel-btn:hover { background: var(--color-primary-strong); color: var(--color-on-dark); }

/* --- Marquee ----------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: var(--space-3);
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.marquee .marquee-track span {
  /* padding-inline: var(--space-6); */
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

/* The wavy variant curves the same text along an SVG path. */
.marquee.marquee-wave {
  position: relative;
  z-index: 3;
  display: grid;              /* also stops the svg's margin collapsing through */
  height: 0;                  /* pure overlay — the sections meet flush behind it */
  padding-block: 0;
  overflow: visible;          /* the curve is MEANT to cross the section seam */
  background: transparent;
  pointer-events: none;       /* decorative — never intercept a click */
}

/* The band occupies 90px of layout while the artwork itself overflows above and
   below it, so the arc reads whole instead of being sliced at a section edge. */
.marquee.marquee-wave svg {
  width: 100%;
  height: auto;
  /* A percentage margin resolves against the container's WIDTH, so the arc
     keeps its position relative to the artwork at every viewport size. */
  margin-top: calc(8px - 13%);
}

.marquee.marquee-wave text {
  fill: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* --- Dividers ---------------------------------------------------------- */
.rule-divider { padding-block: var(--space-2); background: var(--color-bg); }
.rule-divider.on-alt { background: var(--color-bg-alt); }

.rule-divider .rule-line {
  width: 10%;
  min-width: 120px;
  margin-inline: auto;
  border: 0;
  border-top: 2px solid var(--color-primary);
}

.rule-divider.squiggle svg {
  width: 10%;
  min-width: 140px;
  margin-inline: auto;
  color: var(--color-primary);
}

.scallop-divider {
  height: 40px;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%2740%27%20viewBox%3D%270%200%20120%2040%27%3E%3Cpath%20d%3D%27M0%2040A75%2075%200%200%201%20120%2040Z%27%20fill%3D%27%23fff2f8%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 120px 40px;
}

/* Flipped, the bumps hang down instead of rising — for a tinted band above a
   white one. Same colours, no second asset. */
.scallop-divider.flip { transform: scaleY(-1); }

.scallop-divider .scallop-track { display: none; }

/* --- Split panel ------------------------------------------------------- */
.split-panel {
  display: grid;
  grid-template-columns: 3fr 4fr;   /* body panel keeps 57%, either side */
  align-items: stretch;
  min-height: 700px;
  background: var(--color-bg);
}

.split-panel .panel-media { position: relative; overflow: hidden; }

.split-panel .panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-panel .panel-body {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background-size: cover;
  background-position: center;
}

.split-panel .panel-body .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.split-panel .panel-body p { max-width: 42ch; }

.split-panel.reverse { grid-template-columns: 4fr 3fr; }
.split-panel.reverse .panel-media { order: 2; }
.split-panel.alt { background: var(--color-bg-alt); }

/* --- Countdown --------------------------------------------------------- */
.countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-block: var(--space-5);
  font-family: 'Oswald', var(--font-body);
}

.countdown div {
  display: grid;
  gap: var(--space-1);
  min-width: 72px;
  text-align: center;
}

.countdown .count {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown .count-label {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* --- Forms -------------------------------------------------------------
   Every control the site uses is styled here: text, email, tel, number,
   date, search, select, textarea, checkbox, radio and file. Native
   behaviour is kept where the native control is genuinely better — the
   date picker's calendar, the number field's steppers.
   ---------------------------------------------------------------------- */
.site-form .form-group { margin-bottom: var(--space-4); }

.site-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.site-form label,
.site-form legend,
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-heading);
}

.site-form .required { color: var(--color-primary-ink); }
.site-form .field-hint { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); text-transform: none; letter-spacing: 0; }

.site-form input[type="text"],
.site-form input[type="email"],
.site-form input[type="tel"],
.site-form input[type="url"],
.site-form input[type="number"],
.site-form input[type="date"],
.site-form input[type="search"],
.site-form input[type="password"],
.site-form select,
.site-form textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-heading);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.site-form :is(input, select, textarea)::placeholder { color: var(--color-muted); opacity: 1; }
.site-form :is(input, select, textarea):hover:not(:disabled) { border-color: var(--color-heading); }

.site-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--color-primary-strong);
  box-shadow: 0 0 0 3px rgb(196 6 122 / 18%);
}

.site-form :is(input, select, textarea):disabled {
  background: var(--color-bg-alt);
  color: var(--color-muted);
  cursor: not-allowed;
}

.site-form textarea { min-height: 150px; resize: vertical; }
.site-form input[type="number"] { padding-right: var(--space-2); }

/* Select: the native arrow is replaced with one drawn in CSS, so it matches
   the rest of the site instead of the operating system. */
.site-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%279%27%20viewBox%3D%270%200%2014%209%27%3E%3Cpath%20d%3D%27M1%201.5%207%207.5%2013%201.5%27%20fill%3D%27none%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px 9px;
  cursor: pointer;
}

.site-form select[multiple] { background-image: none; padding-right: var(--space-4); min-height: 140px; }

/* Checkbox and radio, drawn rather than accent-coloured, so the tick and the
   dot are on brand at every size. */
.site-form .choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-block: var(--space-1);
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  cursor: pointer;
}

.site-form .choice input[type="checkbox"],
.site-form .choice input[type="radio"],
.filter-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.site-form .choice input[type="radio"] { border-radius: var(--radius-full); }
.site-form .choice input:hover,
.filter-option input:hover { border-color: var(--color-heading); }

.site-form .choice input:checked,
.filter-option input:checked {
  background-color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2710%27%20viewBox%3D%270%200%2012%2010%27%3E%3Cpath%20d%3D%27M1%205.2%204.3%208.5%2011%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

.site-form .choice input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--color-bg);
}

.site-form .choice input:focus-visible,
.filter-option input:focus-visible { outline: 3px solid var(--color-primary-ink); outline-offset: 2px; }
.site-form .choice input:disabled { background: var(--color-bg-alt); cursor: not-allowed; }
.site-form .choice input:disabled + span { color: var(--color-muted); }

.site-form fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }

.site-form input[type="file"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  font-size: var(--fs-body);
  cursor: pointer;
}

.site-form input[type="file"]::file-selector-button {
  margin-right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-strong);
  border: 0;
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.site-form input[type="file"]:hover { border-color: var(--color-heading); }

.site-form .form-error { display: block; margin-top: var(--space-2); color: var(--color-error); font-size: var(--fs-small); }
.site-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-error); }
.site-form .form-note { margin-top: var(--space-3); font-size: var(--fs-body); color: var(--color-muted); }

/* Two ways to enquire, side by side and equal. */
.site-form .form-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.site-form .form-actions .btn { width: 100%; }

.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-not-valid-tip { margin-top: var(--space-2); color: var(--color-error); font-size: var(--fs-small); }
.wpcf7-response-output {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  font-size: var(--fs-small);
}

/* --- Content area ------------------------------------------------------
   CMS-rendered prose: the About story, the policy pages, accordion bodies.
   Everything here is the default HTML a client will paste in, styled once.
   ---------------------------------------------------------------------- */
.content-area > * + * { margin-top: var(--space-4); }
.content-area > p + p { margin-top: var(--space-4); }

.content-area h2 { margin-top: var(--space-6); font-size: var(--fs-h2); }
.content-area h3 { margin-top: var(--space-5); font-size: var(--fs-h3); }
.content-area h2:first-child,
.content-area h3:first-child { margin-top: 0; }

.content-area a { color: var(--color-primary-ink); text-decoration: underline; }
.content-area a:hover { color: var(--color-primary-dark); }

.content-area ul,
.content-area ol { padding-left: var(--space-5); }
.content-area ul { list-style: disc; }
.content-area ol { list-style: decimal; }
.content-area :is(ul, ol) li { display: list-item; }
.content-area li + li { margin-top: var(--space-2); }

.content-area blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
}

.content-area blockquote p + p { margin-top: var(--space-3); }
.content-area strong { font-weight: var(--fw-semibold); color: var(--color-heading); }
.content-area hr { margin-block: var(--space-6); border: 0; border-top: var(--border-hairline); }

/* An inline form: one field and its button share a single row, joined edge
   to edge. This was lost when the Forms section was rebuilt, which left the
   newsletter input and its Subscribe button stacked and misaligned. */
.site-form.inline .form-group { display: flex; margin-bottom: 0; }
.site-form.inline .form-group input { flex: 1 1 auto; min-width: 0; }

.site-form.inline .form-group .btn {
  flex: 0 0 auto;
  min-height: 52px;
  margin-left: -1px;               /* share the border rather than double it */
}

.site-form.inline .form-error { display: block; margin-top: var(--space-2); }

/* --- WhatsApp enquiry -------------------------------------------------
   This catalogue does not sell online. Every "buy" affordance across the
   site is replaced by an enquiry that opens WhatsApp with the product,
   options and quantity already written into the message. */

.enquiry-box {
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-primary);
}

.enquiry-box .enquiry-product { margin-bottom: var(--space-5); }

.enquiry-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

.enquiry-actions .btn { width: 100%; }
.enquiry-box .form-note { margin-top: var(--space-4); font-size: var(--fs-body); color: var(--color-muted); }

.enquiry-form {
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-primary);
}

.enquiry-form .form-note {
  margin-top: var(--space-3);
  color: var(--color-body);
  font-size: var(--fs-body);
  text-align: center;
}

.contact-cta { margin-block: var(--space-5); }

.enquiry-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.whatsapp-fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-5) + var(--fab-size) + var(--space-3));
  z-index: 45;
  display: grid;
  place-items: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}

.whatsapp-fab:hover { transform: scale(1.06); color: #fff; }
.whatsapp-fab .icon { width: 24px; height: 24px; }

/* --- Product detail ---------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-8);
}

.product-gallery { display: grid; gap: var(--space-2); }

.product-gallery .gallery-main { aspect-ratio: 3 / 4; background: var(--color-bg-alt); }

.product-gallery .gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.product-gallery .gallery-thumbs button {
  padding: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--color-bg-alt);
  cursor: pointer;
}

.product-gallery .gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery .gallery-thumbs button[aria-current="true"] { border-color: var(--color-heading); }

.product-summary { display: grid; gap: var(--space-4); }

.product-summary .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.product-summary .price {
  font-size: var(--fs-lead);
  color: var(--color-heading);
}

.product-summary .price s { margin-left: var(--space-2); color: var(--color-muted); }

/* --- Accordion --------------------------------------------------------- */
.accordion { border-bottom: var(--border-hairline); }

.accordion summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-heading);
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--color-primary-ink); }

.accordion summary .accordion-icon {
  margin-left: auto;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.accordion[open] summary .accordion-icon { transform: rotate(180deg); }
.accordion .accordion-body { padding-bottom: var(--space-4); }

/* --- Page header -------------------------------------------------------
   Breadcrumb and page title are one block. Previously the title sat in a
   full 96/96 section of its own and the heading-group added another 72px
   below it — nearly 170px of nothing before the page began. */
.page-header { padding-block: var(--space-6) var(--space-7); }
.page-header .heading-group { margin-bottom: 0; }
.page-header .breadcrumb { margin-bottom: var(--space-5); }

/* The breadcrumb follows the alignment of the heading it introduces. */
.page-header.centered .breadcrumb { justify-content: center; }
.page-header.centered .heading-group { text-align: center; }
.page-header.centered .heading-group p,
.page-header.centered .heading-rule { margin-inline: auto; }

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-body);
  color: var(--color-muted);
}

.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); }
.breadcrumb a:hover { color: var(--color-primary-ink); }

/* --- Contact layout ---------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  align-items: start;
  gap: var(--space-8);
}

.contact-layout .contact-media { aspect-ratio: 3 / 4; }

.contact-methods {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.contact-methods a { display: flex; align-items: center; gap: var(--space-3); }
.contact-methods svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-primary-ink); }

/* --- Image banner ------------------------------------------------------ */
.image-banner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
}

.image-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(21 21 21 / 20%);
}

.image-banner .container { position: relative; z-index: 1; }

.image-banner .banner-box {
  max-width: 520px;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.image-banner .heading,
.image-banner p { color: #fff; }

.image-banner .heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

/* --- Announcement bar -------------------------------------------------- */
.announcement-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--announcement-height);
  display: flex;
  align-items: center;
  background: var(--color-secondary);
  color: var(--color-heading);
}

.announcement-bar .container {
  max-width: none;
  padding-inline: var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.announcement-bar .announcement-rotator {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* A floor width keeps the arrows still while the message changes length. */
.announcement-bar .rotator-messages {
  display: grid;
  min-width: min(560px, 58vw);
  text-align: center;
}

.announcement-bar .rotator-messages p {
  grid-area: 1 / 1;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.announcement-bar .rotator-messages p[data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.announcement-bar .rotator-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--color-heading);
}



.announcement-bar .social-list svg { width: 16px; height: 16px; }

/* --- Header + navigation -----------------------------------------------
   One row: navigation left, logo centred, icons right. The theme previously
   stacked a logo row above a nav row, which cost 170px of every screen. */
.site-header {
  position: fixed;
  inset: var(--announcement-height) 0 auto;
  z-index: 50;
  height: var(--header-height);
  background: var(--color-bg);
  border-bottom: var(--border-hairline);
  transition: box-shadow var(--transition);
}

.site-header.scrolled { box-shadow: var(--shadow-sm); }

.site-header .header-inner {
  max-width: none;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
}

.site-header .header-start { justify-self: start; display: flex; align-items: center; gap: var(--space-2); }
.site-header .site-logo { justify-self: center; }
.site-header .site-logo img { width: 200px; height: auto; }

.site-header .header-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header .social-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; }

.site-header .social-list a,
.site-header .header-icon {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  color: var(--color-heading);
  transition: background-color var(--transition), color var(--transition);
}

.site-header .social-list a:hover,
.site-header .header-icon:hover { background: var(--color-bg-alt); color: var(--color-primary-ink); }

.site-header .header-cta { min-height: 40px; padding-inline: var(--space-4); }
.site-header .header-cta .icon { width: 18px; height: 18px; }

.site-header .nav-toggle {
  display: none;
  position: relative;
  width: var(--tap-target);
  height: var(--tap-target);
  cursor: pointer;
}

/* Absolutely placed rather than stacked, so the open state can put both bars
   on exactly the same line and draw a real cross. */
.site-header .nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-heading);
  transition: transform var(--transition), opacity var(--transition);
}

.site-header .nav-toggle span:nth-of-type(1) { top: 15px; }
.site-header .nav-toggle span:nth-of-type(2) { top: 21px; }
.site-header .nav-toggle span:nth-of-type(3) { top: 27px; }

.site-header .nav-toggle[aria-expanded="true"] span:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }
.site-header .nav-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

/* One <ul> of links serves every breakpoint. */
.site-header .main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  list-style: none;
}

.site-header .main-nav li { position: relative; }

.site-header .main-nav a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-heading);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header .main-nav a:hover { color: var(--color-primary-ink); }

.site-header .main-nav a[aria-current="page"],
.site-header .main-nav .current-menu-item > a,
.site-header .main-nav .current-menu-ancestor > a,
.site-header .main-nav .current_page_item > a,
.site-header .main-nav .active > a { color: var(--color-primary-ink); }

.main-nav .menu > .menu-item-has-children > a { display: flex; align-items: center; gap: var(--space-2); }

.main-nav .menu > .menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.site-header .main-nav .menu-cta a {
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
}

.site-header .main-nav .menu-cta a:hover { background: var(--color-primary-dark); color: var(--color-on-dark); }

.site-header .main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 240px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: var(--border-hairline);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  /* pointer-events: none; */
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.site-header .main-nav .sub-menu a {
  padding-block: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
}

/* The SHOP mega panel is the same <ul>, laid out full width under the header. */
.site-header .main-nav .mega { position: static; }

.site-header .mega > .sub-menu {
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 190px)) repeat(2, 200px);
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-5);
  transform: translateY(8px);
}

.mega .sub-menu .sub-menu {
  position: static;
  width: auto;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  justify-items: start;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega .sub-menu .menu-item-has-children > a {
  padding-top: 0;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.mega .sub-menu li { width: 100%; }
.mega .menu-promo a { padding: 0; }

@media (hover: hover) {
  /* Opens from the trigger only. The bridge is a pseudo-element on the panel,
     not padding on the link — padding made SHOP and MORE sit higher than the
     items without a chevron. */
  .site-header .main-nav .sub-menu::before {
    content: "";
    position: absolute;
    inset: -12px 0 auto;
    height: 12px;
  }

 .site-header .main-nav > .menu > .menu-item-has-children:hover > .sub-menu, .site-header .main-nav > .menu > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

.mega .menu-promo .heading {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-align: center;
}

.site-header .main-nav .submenu-toggle {
  display: none;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--color-heading);
  cursor: pointer;
  transition: transform var(--transition);
}

.site-header .main-nav .menu-item-has-children.open > .submenu-toggle { transform: rotate(180deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(26 26 26 / 45%);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.nav-backdrop.open { opacity: 1; visibility: visible; }

/* --- Promo sticker ----------------------------------------------------- */
.promo-sticker {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-5);
  z-index: 45;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  text-align: center;
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.promo-sticker.visible { opacity: 1; visibility: visible; transform: none; }

/* --- Back to top ------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-5);
  z-index: 45;
  display: grid;
  place-items: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--radius-full);
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-primary-dark); color: var(--color-on-dark); }
.back-to-top .icon { width: 24px; height: 24px; }

/* --- Newsletter dialog ------------------------------------------------- */
.newsletter-dialog {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 70;
  width: min(720px, calc(100vw - var(--space-5) * 2));
  padding: 0;
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
}

.newsletter-dialog::backdrop { background: rgb(21 21 21 / 35%); }

.newsletter-dialog .dialog-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
}

.newsletter-dialog .dialog-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--color-heading);
  cursor: pointer;
}

.newsletter-dialog .dialog-close svg { width: 16px; height: 16px; }

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  padding-block: var(--space-7) var(--space-4);
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.site-footer .footer-nav li span { color: var(--color-body); }

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-6);
  text-align: center;
}

.site-footer .footer-heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.site-footer .footer-nav ul { list-style: none; }
.site-footer .footer-nav a,
.site-footer .footer-nav li span { display: inline-block; padding: var(--space-1) 0; font-size: var(--fs-body); }
.site-footer .footer-nav a:hover { color: var(--color-primary-ink); }

.site-footer .footer-logo img { width: auto; height: 128px; margin-inline: auto; }

.site-footer .footer-newsletter {
  max-width: 520px;
  margin: var(--space-7) auto 0;
  text-align: center;
}

.site-footer .social-list {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  list-style: none;
}

.site-footer .social-list a {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
}

.site-footer .social-list svg { width: 18px; height: 18px; }

.credit-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
  text-align: center;
}

.credit-legal a:hover { color: var(--color-primary-ink); }

.credit-bar {
  padding-block: var(--space-4);
  background: var(--color-bg);
  border-top: var(--border-hairline);
  font-size: var(--fs-body);
}

.credit-bar .container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.credit-bar a { text-decoration: underline; }

/* -------------------------------------------------------------------------
   7. Sections — composition only. Everything visual came from a component.
   ---------------------------------------------------------------------- */

/* The hero is exactly one screen tall, minus the chrome above it. svh rather
   than vh, so the mobile URL bar cannot push it taller than the display. */
.hero .split-panel {
  /* height, not min-height: content can never make this taller than a screen. */
  height: calc(100svh - var(--announcement-height) - var(--header-height));
  min-height: 520px;
}

.hero .panel-body { padding-block: var(--space-5); overflow: hidden; }
.hero .panel-media { min-height: 0; }
.hero .panel-media img { height: 100%; object-position: top center; }

/* The hero headline is the biggest thing on the site — it is the first line
   anyone reads, so it gets display scale and is allowed to run to two lines.
   The panel is height-locked to one screen, so the clamp ceilings are set
   from what fits at 1280x720, the shortest desktop worth designing for. */
.hero .panel-body .heading {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.75rem);
  line-height: 1.08;
  text-wrap: balance;
  max-width: 16ch;
}

.hero .panel-body .heading em {
  font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);
  line-height: 0.9;
}

.hero .panel-body .heading + p { max-width: 46ch; }

/* Hero — per-slide grounds. The theme used photographs of wrapping paper here;
   the Parv logo's confetti mosaic is a pattern, so it is rebuilt in CSS. Two
   dot layers, recoloured per slide from the mug's own tile palette. */
.hero .split-panel .panel-body {
  background-image:
    radial-gradient(circle, var(--dot-a, rgb(234 2 140 / 10%)) 0 6px, transparent 7px),
    radial-gradient(circle, var(--dot-b, rgb(217 218 36 / 14%)) 0 9px, transparent 10px),
    radial-gradient(circle, var(--dot-c, rgb(16 166 217 / 9%)) 0 4px, transparent 5px);
  /* Three layers on co-prime sizes, so the repeat never lines up into a grid. */
  background-size: 227px 227px, 313px 313px, 173px 173px;
  background-position: 0 0, 96px 132px, 48px 205px;
}

.hero .slide-personalised { --dot-a: rgb(234 2 140 / 11%); --dot-b: rgb(217 218 36 / 16%); --dot-c: rgb(232 144 36 / 10%); }
.hero .slide-corporate    { --dot-a: rgb(16 166 217 / 12%); --dot-b: rgb(0 160 148 / 14%); --dot-c: rgb(234 2 140 / 9%); }
.hero .slide-festival     { --dot-a: rgb(232 144 36 / 13%); --dot-b: rgb(206 33 37 / 11%); --dot-c: rgb(217 218 36 / 14%); }
.hero .slide-scale        { --dot-a: rgb(78 41 118 / 9%); --dot-b: rgb(146 188 64 / 15%); --dot-c: rgb(16 166 217 / 10%); }

.best-sellers .row { gap: var(--space-4) var(--space-2); }

.about-editorial .container {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
}

.about-editorial .about-body { display: grid; justify-items: start; }

.about-editorial .about-media { 
/*aspect-ratio: 2 / 3;*/
	aspect-ratio: 1/ 1;
 height: 100%; 
max-width: 100%; 
background:transparent;
}

/* The section is `flush` so the photograph can run the full height of the
   row. That means the text column carries the section's padding itself —
   without it the button sat hard against the next section. */
.about-editorial .about-body { padding-block: var(--section-padding); }

/* 72px under a heading introduces a grid of cards. Here the very next thing
   is body copy, and 72 + the column's own 32 was landing at 104px. */
.about-editorial .about-body .heading-group { margin-bottom: 0; }
.about-editorial .about-body > * + * { margin-top: var(--space-6); }
.about-editorial .about-body > * + .btn { margin-top: var(--space-5); }

/* The hand-drawn circle around the founder name. SVG stroke drawn by GSAP,
   fully visible without JS. */
.about-editorial .circled { position: relative; display: inline-block; white-space: nowrap; }

.about-editorial .circled svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  max-width: none;            /* the reset's svg{max-width:100%} was clamping it */
  height: 190%;
  transform: translate(-50%, -50%);
  color: var(--color-primary);
  overflow: visible;
  pointer-events: none;
}

.about-editorial .circled svg path { stroke-width: 14; fill: none; stroke: currentColor; }

.floating-sticker {
  position: relative;
  height: 0;
  pointer-events: none;
}

.floating-sticker img {
  position: absolute;
  left: 6%;
  top: -140px;
  width: 240px;
}

.category-grid .row { gap: var(--space-2); }

.pre-order { background: var(--color-primary-strong); }
.pre-order .panel-body { background: none; color: var(--color-on-dark); }
.pre-order .panel-body .heading { font-size: var(--fs-h2); }

.testimonials { background: var(--color-bg-alt); }

.email-capture {
  position: relative;
  padding-block: var(--section-padding);
  text-align: center;
}

.email-capture .container { position: relative; z-index: 1; max-width: 720px; }

/* A soft wash so the pattern stays texture and the words stay the message. */
.email-capture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 90%) 50%, rgb(255 255 255 / 55%));
}

.view-all { margin-top: var(--space-6); text-align: center; }

.credit-bar .link-button {
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.credit-bar .link-button:hover { color: var(--color-primary-ink); }

.instagram-feed { padding-block: var(--section-padding); }

.instagram-feed .feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.instagram-feed .feed-header .heading-group { margin-bottom: 0; }

.instagram-feed .feed-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  list-style: none;
}

/* -------------------------------------------------------------------------
   8. Utilities
   ---------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-scroll { position: fixed; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .media.lazy img { opacity: 1; }
}


/* -------------------------------------------------------------------------
   9. Gifting pattern
   Gift boxes, mugs, ribbons, tags and sparkles on a 200px tile, drawn as SVG.
   Used where the theme previously carried a photograph that was only ever
   decoration — a pattern is CSS, never a bitmap.
   ---------------------------------------------------------------------- */
.pattern-gifts {
  background-color: var(--color-bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ea028c%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2818%2020%29%22%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%2222%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M-1%207h24%22%2F%3E%3Cpath%20d%3D%22M11%207v15%22%2F%3E%3Cpath%20d%3D%22M11%207C9%204%208%203%206.5%203a2.2%202.2%200%200%200%200%204.4Z%22%2F%3E%3Cpath%20d%3D%22M11%207c2-3%203-4%204.5-4a2.2%202.2%200%200%201%200%204.4Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28120%2034%29%22%3E%3Cpath%20d%3D%22M0%200h14v11a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4Z%22%2F%3E%3Cpath%20d%3D%22M14%203h2.6a3%203%200%200%201%200%206H14%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2878%2096%29%22%3E%3Cpath%20d%3D%22M8%200l2%206%206%202-6%202-2%206-2-6-6-2%206-2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2824%20126%29%22%3E%3Cpath%20d%3D%22M11%206C8%203%203.5%201.5%202%203S3%209%206%209s5-3%205-3Z%22%2F%3E%3Cpath%20d%3D%22M11%206c3-3%207.5-4.5%209-3S19%209%2016%209s-5-3-5-3Z%22%2F%3E%3Cpath%20d%3D%22m11%206-2.4%209.6L11%2013.8l2.4%201.8Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20130%29%22%3E%3Cpath%20d%3D%22M6%200h12v12l-11%2011a2%202%200%200%201-2.8%200L-2%2015a2%202%200%200%201%200-2.8Z%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M62%2044l1.4%204%204%201.4-4%201.4L62%2055l-1.4-4.2-4-1.4%204-1.4Z%22%2F%3E%3Cpath%20d%3D%22M170%2092l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3Cpath%20d%3D%22M44%20176l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.pattern-gifts.on-pink {
  color: var(--color-on-dark);
  background-color: var(--color-primary-strong);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2818%2020%29%22%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%2222%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M-1%207h24%22%2F%3E%3Cpath%20d%3D%22M11%207v15%22%2F%3E%3Cpath%20d%3D%22M11%207C9%204%208%203%206.5%203a2.2%202.2%200%200%200%200%204.4Z%22%2F%3E%3Cpath%20d%3D%22M11%207c2-3%203-4%204.5-4a2.2%202.2%200%200%201%200%204.4Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28120%2034%29%22%3E%3Cpath%20d%3D%22M0%200h14v11a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4Z%22%2F%3E%3Cpath%20d%3D%22M14%203h2.6a3%203%200%200%201%200%206H14%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2878%2096%29%22%3E%3Cpath%20d%3D%22M8%200l2%206%206%202-6%202-2%206-2-6-6-2%206-2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2824%20126%29%22%3E%3Cpath%20d%3D%22M11%206C8%203%203.5%201.5%202%203S3%209%206%209s5-3%205-3Z%22%2F%3E%3Cpath%20d%3D%22M11%206c3-3%207.5-4.5%209-3S19%209%2016%209s-5-3-5-3Z%22%2F%3E%3Cpath%20d%3D%22m11%206-2.4%209.6L11%2013.8l2.4%201.8Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20130%29%22%3E%3Cpath%20d%3D%22M6%200h12v12l-11%2011a2%202%200%200%201-2.8%200L-2%2015a2%202%200%200%201%200-2.8Z%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M62%2044l1.4%204%204%201.4-4%201.4L62%2055l-1.4-4.2-4-1.4%204-1.4Z%22%2F%3E%3Cpath%20d%3D%22M170%2092l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3Cpath%20d%3D%22M44%20176l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.pattern-gifts.on-dark {
  background-color: var(--color-bg-dark);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2818%2020%29%22%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%2222%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M-1%207h24%22%2F%3E%3Cpath%20d%3D%22M11%207v15%22%2F%3E%3Cpath%20d%3D%22M11%207C9%204%208%203%206.5%203a2.2%202.2%200%200%200%200%204.4Z%22%2F%3E%3Cpath%20d%3D%22M11%207c2-3%203-4%204.5-4a2.2%202.2%200%200%201%200%204.4Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28120%2034%29%22%3E%3Cpath%20d%3D%22M0%200h14v11a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4Z%22%2F%3E%3Cpath%20d%3D%22M14%203h2.6a3%203%200%200%201%200%206H14%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2878%2096%29%22%3E%3Cpath%20d%3D%22M8%200l2%206%206%202-6%202-2%206-2-6-6-2%206-2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2824%20126%29%22%3E%3Cpath%20d%3D%22M11%206C8%203%203.5%201.5%202%203S3%209%206%209s5-3%205-3Z%22%2F%3E%3Cpath%20d%3D%22M11%206c3-3%207.5-4.5%209-3S19%209%2016%209s-5-3-5-3Z%22%2F%3E%3Cpath%20d%3D%22m11%206-2.4%209.6L11%2013.8l2.4%201.8Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20130%29%22%3E%3Cpath%20d%3D%22M6%200h12v12l-11%2011a2%202%200%200%201-2.8%200L-2%2015a2%202%200%200%201%200-2.8Z%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%225%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M62%2044l1.4%204%204%201.4-4%201.4L62%2055l-1.4-4.2-4-1.4%204-1.4Z%22%2F%3E%3Cpath%20d%3D%22M170%2092l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3Cpath%20d%3D%22M44%20176l1.2%203.4%203.4%201.2-3.4%201.2-1.2%203.4-1.2-3.4-3.4-1.2%203.4-1.2Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}


/* -------------------------------------------------------------------------
   10. Listing + filters
   ---------------------------------------------------------------------- */
.listing {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.filter-panel {
  position: sticky;
  top: calc(var(--announcement-height) + var(--header-height) + var(--space-4));
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--border-hairline);
  background: var(--color-bg);
}

/* The heading and Clear all sat on one cramped row and the button wrapped to
   two lines. They stack, with the button full width and never wrapping. */
.filter-panel .filter-head {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}

.filter-panel .filter-head .btn { width: 100%; white-space: nowrap; }

.filter-panel .filter-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-panel > .form-group { margin-bottom: 0; }
.filter-group + .filter-group { border-top: var(--border-hairline); }

.filter-group summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-heading);
}

.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary .icon { margin-left: auto; width: 14px; height: 14px; transition: transform var(--transition); }
.filter-group[open] summary .icon { transform: rotate(180deg); }
.filter-group .filter-options { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); }

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  cursor: pointer;
}

.filter-option input { width: 18px; height: 18px; accent-color: var(--color-primary-strong); flex: 0 0 auto; }

/* The gallery uses the same inputs as pill chips. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block: var(--space-6) var(--space-7);
}
.filter-chips .filter-option,
.filter-option.chip { min-height: 0; }
.filter-chips .filter-option input { position: absolute; opacity: 0; pointer-events: none; }

.filter-chips .filter-option span {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.filter-chips .filter-option input:checked + span {
  background: var(--color-primary-strong);
  border-color: transparent;
  color: var(--color-on-dark);
}

.filter-chips .filter-option input:focus-visible + span { outline: 3px solid var(--color-primary-ink); outline-offset: 3px; }

.listing-main { min-width: 0; }

.listing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}

.listing-bar .form-group { margin-bottom: 0; min-width: 220px; }

.listing-bar select,
.filter-panel input[type="search"] {
  width: 100%;
  min-height: var(--tap-target-lg);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: var(--border-hairline);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-heading);
}

.listing-bar select:focus,
.filter-panel input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(234 2 140 / 14%);
}
.listing-count { color: var(--color-muted); }
.filter-empty { margin-top: var(--space-6); text-align: center; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-ink);
  text-decoration: underline;
  cursor: pointer;
}

.filter-item[hidden] { display: none; }

.work-tile { cursor: zoom-in; }

.work-tile figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgb(26 26 26 / 78%));
  color: var(--color-on-dark);
  font-size: var(--fs-small);
}


/* A row of cards with no tone set cycles the mosaic, so four cards in a row
   are never four identical badges. */
.row > *:nth-child(4n + 1) .promise-item:not([class*="tone-"]) .promise-icon { background: var(--color-primary-strong); }
.row > *:nth-child(4n + 2) .promise-item:not([class*="tone-"]) .promise-icon { background: var(--tile-sky); }
.row > *:nth-child(4n + 3) .promise-item:not([class*="tone-"]) .promise-icon { background: var(--tile-orange); }
.row > *:nth-child(4n + 4) .promise-item:not([class*="tone-"]) .promise-icon { background: var(--tile-teal); }


/* Any call to action that follows a body of prose gets its own breathing room
   — previously the button sat hard against the last paragraph. */
.content-area + p,
.about-body .content-area + p { margin-top: var(--space-5); }
.about-body > * + * { margin-top: var(--space-5); }


/* -------------------------------------------------------------------------
   11. Email enquiry dialog
   A native <dialog>: focus trapping, Escape to close and the backdrop all
   come from the browser instead of from us.
   ---------------------------------------------------------------------- */
.email-dialog {
  width: min(640px, calc(100vw - var(--space-5)));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  background: var(--color-bg);
  color: var(--color-body);
  box-shadow: var(--shadow-md);
  overflow: visible;
}

.email-dialog::backdrop { background: rgb(26 26 26 / 55%); backdrop-filter: blur(3px); }

.email-dialog-body { padding: var(--space-6); overflow-y: auto; max-height: min(88vh, 900px); }
.email-dialog .heading-group { margin-bottom: var(--space-5); }
.email-dialog .heading-group .heading::after { content: none; }

.email-dialog-close-form { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }

.email-dialog-close {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.email-dialog-close:hover { background: var(--color-primary-strong); color: var(--color-on-dark); }

/* The product line, shared by the inline form and the dialog. */
.enquiry-product {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary-strong);
}

.enquiry-product strong { display: block; color: var(--color-heading); font-size: var(--fs-lead); }
.email-dialog .enquiry-product { background: var(--color-bg-alt); }


/* -------------------------------------------------------------------------
   12. Lightbox
   ---------------------------------------------------------------------- */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox::backdrop { background: rgb(12 12 14 / 92%); }

.lightbox[open] {
  display: grid;
  grid-template-columns: var(--tap-target-lg) minmax(0, 1fr) var(--tap-target-lg);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.lightbox-figure {
  grid-column: 2;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  min-height: 0;
  margin: 0;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100dvh - var(--space-9));
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-figure figcaption { color: rgb(255 255 255 / 85%); text-align: center; }

.lightbox-close,
.lightbox-nav {
  display: grid;
  place-items: center;
  width: var(--tap-target-lg);
  height: var(--tap-target-lg);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover { background: var(--color-primary-strong); }
.lightbox-nav.prev { grid-column: 1; justify-self: start; }
.lightbox-nav.next { grid-column: 3; justify-self: end; }

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

.lightbox-nav[disabled] { opacity: 0.3; cursor: default; }


/* -------------------------------------------------------------------------
   13. Pink safety net
   Every solid brand pink in this file is paired with white text above. This
   catches anything added later: a surface painted pink gets legible text
   without the author having to remember. `--color-primary` is 4.30:1 with
   white and fails AA for body-sized text, so anything carrying words uses
   `--color-primary-strong` (5.75:1).
   ---------------------------------------------------------------------- */
.on-primary,
.bg-primary {
  background: var(--color-primary-strong);
  color: var(--color-on-dark);
}

.on-primary :is(a, p, h1, h2, h3, h4, strong, span, li),
.bg-primary :is(a, p, h1, h2, h3, h4, strong, span, li) { color: inherit; }


/* -------------------------------------------------------------------------
   14. Call-to-action rhythm
   ---------------------------------------------------------------------- */

/* A heading group introducing a grid of cards wants 72px beneath it. A heading
   group whose very next sibling is a single button wants far less — 72 + the
   button's own 32 was landing at 104px of empty space. */
.heading-group:has(+ .btn),
.heading-group:has(+ p > .btn:only-child) { margin-bottom: 0; }

/* Card grids size their rows to the content, not to the tallest card in the
   row. Without this the heading absorbed all the spare height — 453px of h2
   in a 610px card. */
.promise-item,
.step-card { align-content: start; }

/* One gap between a block of content and the action that follows it. */
.content-area + .btn,
.content-area + p > .btn,
.about-body > * + .btn { margin-top: var(--space-5); }

/* A gap-based container already spaces its children. A margin on top of the
   gap does not collapse — it stacks — so 24px of gap plus 24 and 32 of margin
   was rendering as 80px. Children of these containers carry no block margin. */
.panel-body > *,
.enquiry-actions > *,
.form-actions > *,
.heading-group > * { margin-block: 0; }

.about-media img {
/*     object-position: top center; */
	transform: translate(0, 0) !important;
}