/* =====================================================================
   Salty Straw Hat theme
   Ported from design/startseite-merged/startseite-merged.html (y-salt repo).
   Tier 1 primitives, Tier 2 semantic tokens: verbatim from the mockup.
   Tier 3 components: the mockup's CSS with an adapter layer for block
   markup (core/button styles, core/navigation as menu + drawer,
   woocommerce/mini-cart, WPForms). Light only in v1.
   ===================================================================== */
:root {
  /* ---- Tier 1 · colour primitives (client colours + the artworks) ---- */
  --paper-50: #FDFAF6;   /* warm paper, lighter than blush so panels read as panels */
  --blush-100: #F3EDE8;  /* client blush, toned toward warm linen (OKLCH C0.009 H63): panels */
  --peach-300: #E8D1C1;  /* client peach, toned down (OKLCH L0.875 C0.034 H57): warm panel, light buttons */
  --sand-200: #EDE6DE;   /* hero image fallback */
  --line-200: #E5DCD5;   /* hairlines, neutralised (C0.014) */
  --oak-400: #B49371;    /* decorative frame lines only */
  --brown-400: #9A7D69;  /* form field border, 3.7:1 on paper */
  --brown-600: #6E4F3A;  /* muted text */
  --brown-650: #5E3F28;  /* text on peach */
  --brown-700: #5A3E2B;  /* body text */
  --brown-900: #442202;  /* client colour: ink */
  --brown-950: #2E1701;  /* ink hover */
  --espresso-800: #3A322C; /* client ink #442202, desaturated toward the footer charcoal: video closer surface */
  --charcoal-800: #363230; /* warm dark grey: footer band */
  --cream-50: #F7EEE8;
  --cream-300: #D9C6B8;    /* muted text on espresso, 7.61:1 */
  --white: #FFFFFF;
  --red-700: #9A2B12;      /* error text */

  /* ---- Tier 1 · type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;                                    /* 13 eyebrow, meta (page minimum) */
  --text-sm: 0.875rem;                                     /* 14 buttons */
  --text-md: 0.9375rem;                                    /* 15 secondary */
  --text-base: 1.0625rem;                                  /* 17 body */
  --text-lg: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);   /* 17→20 lead */
  --text-xl: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);  /* 17→22 card titles */
  --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);        /* 32→52 section titles */
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);      /* 40→76 page title */
  --text-4xl: clamp(2.5rem, 1.4rem + 4.2vw, 5.25rem);      /* 40→84 closer */
  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-caps: 0.16em;
  --tracking-button: 0.08em;

  /* ---- Tier 1 · space (8-pt grid, 4 for fine detail) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --section-y: clamp(4.5rem, 9vw, var(--space-10));
  --gutter: clamp(var(--space-4), 4vw, 3.5rem);
  --container: 82.5rem; /* 1320 */
  --measure: 34rem;     /* ~65 characters of body copy */
  --header-h: 76px;

  /* ---- Tier 1 · shape, elevation, motion ---- */
  --radius-sm: 4px;
  --radius-pill: 999px;
  --duration-quick: 150ms;
  --duration-normal: 200ms;
  --duration-moderate: 300ms;
  --duration-deliberate: 500ms;
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Tier 2 · semantic tokens ---- */
  --color-bg: var(--paper-50);
  --color-surface-tint: var(--blush-100);
  --color-surface-warm: var(--peach-300);
  --color-surface-deep: var(--espresso-800);
  --color-surface-footer: var(--charcoal-800);
  --color-surface-fallback: var(--sand-200);
  --color-heading: var(--brown-900);
  --color-text: var(--brown-700);
  --color-text-muted: var(--brown-600);
  --color-text-on-warm: var(--brown-650);
  --color-text-on-deep: var(--cream-50);
  --color-text-on-deep-muted: var(--cream-300);
  --color-text-on-footer: var(--white);           /* all footer type is white (client): 12.68:1 */
  --color-border-on-footer: var(--color-border-on-dark);
  --color-wordmark: var(--white);                 /* decorative, aria-hidden; 12.68:1 */
  --color-action-bg: var(--brown-900);
  --color-action-bg-hover: var(--brown-950);
  --color-action-text: var(--paper-50);
  --color-action-light-bg: var(--peach-300);
  --color-action-light-hover: var(--cream-50);
  --color-action-light-text: var(--brown-900);
  --color-border: var(--line-200);
  --color-border-frame: var(--oak-400);
  --color-border-field: var(--brown-400);
  --color-border-on-dark: rgb(247 238 232 / 0.16);
  --color-focus: var(--brown-900);
  --color-focus-on-dark: var(--cream-50);
  --color-error: var(--red-700);
  --color-on-image: var(--white);
  --color-on-image-muted: var(--cream-50);
  --scrim: 30 24 19;             /* RGB triplet: warm-charcoal scrim under card type (#1E1813, C0.014) */
  --wash: 253 250 246;           /* RGB triplet: paper wash behind hero type */
  --color-header-bg: rgb(var(--wash) / 0.94);
  --color-label-bg: rgb(var(--wash) / 0.94);
  --color-control-on-image: rgb(var(--scrim) / 0.74);
  --shadow-soft: 0 2px 10px rgb(68 34 2 / 0.1);
  --shadow-label: 0 1px 0 rgb(68 34 2 / 0.06);
  --shadow-on-image: 0 1px 2px rgb(0 0 0 / 0.25);
}

/* =====================================================================
   Base. Margin resets are scoped to our own sections, so regular pages
   and WooCommerce keep WordPress's block spacing.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-variation-settings: "SOFT" 100;
  font-optical-sizing: auto;
  color: var(--color-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 320; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible { outline-color: var(--color-focus-on-dark); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the page is a stack of full-width bands: no gaps between template parts and sections */
.wp-site-blocks > * + * { margin-block-start: 0; }
.salty-home :is(p, h1, h2, h3, figure, ul),
.site-header :is(p, h1, h2, h3, figure, ul),
.site-footer :is(p, h1, h2, h3, figure, ul) { margin: 0; }
.salty-home > *,
.salty-home .is-layout-flow > *,
.site-header .is-layout-flow > *,
.site-footer .is-layout-flow > * { margin-block: 0; }
.salty-home img, .salty-home video, .site-header img, .site-footer img { display: block; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Shared type components ---- */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow .num {
  margin-right: var(--space-2);
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: 1.125rem; letter-spacing: 0; text-transform: none;
}
.section-title { font-size: var(--text-2xl); }
.lead { font-size: var(--text-lg); line-height: 1.6; }
.meta { font-size: var(--text-md); font-weight: 500; color: var(--color-text-muted); }
.salty-home .stack > * + * { margin-top: var(--space-5); }
.salty-home .stack > .eyebrow + * { margin-top: var(--space-4); }
.measure { max-width: var(--measure); }

/* =====================================================================
   Buttons. Core button = .btn; block styles: default (primary), ghost,
   light, text (the mockup's .text-link). WooCommerce element buttons
   share the primary look.
   ===================================================================== */
.wp-block-button__link, .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-6);
  border: 1.5px solid var(--color-action-bg);
  border-radius: var(--radius-pill);
  background: var(--color-action-bg);
  color: var(--color-action-text);
  font: 600 var(--text-sm)/1 var(--font-body);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-move),
              color var(--duration-normal) var(--ease-move),
              border-color var(--duration-normal) var(--ease-move);
}
.wp-block-button__link:hover, .wp-element-button:hover { background: var(--color-action-bg-hover); border-color: var(--color-action-bg-hover); color: var(--color-action-text); }
.is-style-ghost .wp-block-button__link { background: transparent; color: var(--color-heading); }
.is-style-ghost .wp-block-button__link:hover { background: var(--color-action-bg); color: var(--color-action-text); }
.is-style-light .wp-block-button__link { background: var(--color-action-light-bg); border-color: var(--color-action-light-bg); color: var(--color-action-light-text); }
.is-style-light .wp-block-button__link:hover { background: var(--color-action-light-hover); border-color: var(--color-action-light-hover); color: var(--color-action-light-text); }
.is-style-text .wp-block-button__link {
  gap: var(--space-2);
  min-height: 44px; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--color-heading);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.is-style-text .wp-block-button__link:hover { background: none; color: var(--color-heading); text-decoration-thickness: 2px; }
/* arrow icon (mockup inline SVG, as a mask so it takes currentColor) */
.has-arrow .wp-block-button__link::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration-normal) var(--ease-move);
}
.has-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

/* =====================================================================
   Header. Sticky on the template-part wrapper (the inner group has no
   room to stick). The blur sits on a pseudo-element: backdrop-filter on
   an ancestor would trap the navigation overlay inside the header.
   ===================================================================== */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
}
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.site-header {
  position: relative;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
}
.header-bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; text-decoration: none; color: var(--color-heading); }
.brand img { width: 52px; height: 52px; }
.brand-name {
  font: 450 1.25rem/1 var(--font-display); font-variation-settings: "SOFT" 100;
  letter-spacing: -0.01em; white-space: nowrap;
}

/* main menu = core/navigation; drawer = its overlay */
.site-header .nav { justify-self: center; order: 2; }
.site-header .nav .wp-block-navigation__container { gap: clamp(var(--space-2), 1.4vw, var(--space-5)); }
.site-header .nav .wp-block-navigation-item__content {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-1);
  font-size: var(--text-md); font-weight: 500; line-height: 1.2; color: var(--color-heading); text-decoration: none; white-space: nowrap;
}
.site-header .nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: var(--space-1); right: var(--space-1); bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-move);
}
.site-header .nav .wp-block-navigation-item__content:hover::after,
.site-header .nav .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav .drawer-only { display: none; }
.site-header .nav .wp-block-navigation__responsive-container-open,
.site-header .nav .wp-block-navigation__responsive-container-close {
  width: 44px; height: 44px; padding: 0; place-items: center;
  border-radius: var(--radius-pill); color: var(--color-heading);
}
.site-header .nav .wp-block-navigation__responsive-container-open:hover { background: var(--color-surface-tint); }
.site-header .nav .wp-block-navigation__responsive-container-open svg,
.site-header .nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }

.tools { order: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-1); }
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--color-heading); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-move);
}
.icon-btn:hover { background: var(--color-surface-tint); }
.icon-btn svg { width: 22px; height: 22px; }
/* cart = woocommerce/mini-cart */
.tools .wc-block-mini-cart { display: inline-flex; }
.tools .wc-block-mini-cart__button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: var(--radius-pill); color: var(--color-heading);
}
.tools .wc-block-mini-cart__button:hover { background: var(--color-surface-tint); opacity: 1; }
.tools .wc-block-mini-cart__icon { width: 22px; height: 22px; }
.tools .wc-block-mini-cart__badge {
  min-width: 18px; height: 18px; padding-inline: var(--space-1);
  border: 0; background: var(--color-action-bg) !important; color: var(--color-action-text) !important;
  font-size: 0.6875rem; font-weight: 600; line-height: 1;
}

/* closed mini-cart drawer: Woo only fades it out (opacity), so its controls stay focusable while
   aria-hidden. Hide it once the 0.3 s slide-out has finished; show it at once when it opens. */
.wc-block-components-drawer__screen-overlay { transition: opacity .3s, visibility 0s; }
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }

/* drawer below 1024 px (core switches at 600 px; widened to the mockup's breakpoint) */
@media (min-width: 600px) and (max-width: 1023px) {
  .site-header .nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }
  .site-header .nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .header-bar { grid-template-columns: 1fr auto auto; gap: 0; }
  .site-header .nav { justify-self: end; }
  .tools .icon-btn--ig { display: none; }
  .brand img { width: 42px; height: 42px; }
  .brand-name { font-size: 1.0625rem; }
  .tools { gap: 0; }
}
.site-header .nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0 var(--gutter) var(--space-7);
  background: var(--color-surface-tint); color: var(--color-heading);
}
.site-header .nav .is-menu-open .wp-block-navigation__responsive-close { max-width: none; }
.site-header .nav .is-menu-open .wp-block-navigation__responsive-container-close {
  display: grid; top: calc((var(--header-h) - 44px) / 2); right: 0;
}
.site-header .nav .drawer-brand { display: none; }
.site-header .nav .is-menu-open .drawer-brand {
  display: inline-flex; position: absolute; left: 0; top: calc((var(--header-h) - 44px) / 2);
}
.site-header .nav .is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: calc(var(--header-h) + var(--space-6)); align-items: flex-start;
}
.site-header .nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.site-header .nav .is-menu-open .wp-block-navigation-item__content {
  min-height: 56px; padding: 0;
  font: 400 2rem/1.2 var(--font-display); font-variation-settings: "SOFT" 100;
}
.site-header .nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }
.site-header .nav .is-menu-open .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.site-header .nav .is-menu-open .drawer-only { display: flex; }
.site-header .nav .is-menu-open .drawer-small .wp-block-navigation-item__content { min-height: 48px; font: 500 var(--text-base)/1.2 var(--font-body); }
@media (max-width: 359px) {
  .brand-name { font-size: 0.9375rem; }
  .brand img { width: 34px; height: 34px; }
  .brand { gap: var(--space-2); }
}

/* =====================================================================
   Hero — banner and intro merged; type on the sunlit wall, wall label
   ===================================================================== */
.hero { position: relative; background: var(--color-surface-fallback); }
.hero-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.hero-media .wp-block-image { height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-copy { background: var(--color-bg); padding-block: var(--space-6) var(--space-7); }
.hero-text { max-width: 36rem; }
.hero h1 { font-size: var(--text-3xl); font-weight: 350; line-height: 1.02; letter-spacing: -0.025em; }
.hero .eyebrow { color: var(--color-heading); }
.hero .lead { max-width: 30rem; color: var(--color-text); }
.hero .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: var(--space-5); }
.hero-actions .wp-block-button__link { width: 100%; }
.hero-actions .is-style-text .wp-block-button__link { justify-content: center; }

/* gallery wall label: the one product you see in the photo, with its real price */
.wall-label {
  position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3);
  display: grid; gap: 2px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
  background: var(--color-label-bg); border-left: 2px solid var(--color-border-frame);
  color: var(--color-heading);
  font-size: var(--text-xs); line-height: 1.35;
  box-shadow: var(--shadow-label);
}
.wall-label .k { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.wall-label .t { font: 450 1rem/1.2 var(--font-display); font-variation-settings: "SOFT" 100; }
.wall-label .t a { color: inherit; text-decoration: none; }
.wall-label .t a::after { content: ""; position: absolute; inset: 0; }   /* whole label is the link */
.wall-label .p { display: none; color: var(--color-text-muted); }
.wall-label:hover .t a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
  .hero-media { aspect-ratio: 16 / 9; }
  .hero-media img { object-position: 64% 50%; }
  .hero-copy { padding-block: var(--space-7) var(--space-8); }
  .hero .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
  .hero-actions .wp-block-button__link { width: auto; }
  .wall-label { right: var(--space-4); bottom: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); }
  .wall-label .p { display: block; }
}
/* overlay only where the wall to the left of the print is wide enough for the type */
@media (min-width: 1180px) {
  .hero-media { aspect-ratio: auto; height: clamp(580px, 84vh, 820px); }
  .hero-media img { object-position: 66% 50%; }
  .hero-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--wash) / 0.86) 0%, rgb(var(--wash) / 0.6) 34%, rgb(var(--wash) / 0) 56%);
  }
  .hero-copy { position: absolute; inset: 0; display: flex; align-items: center; background: none; padding: 0; }
  .hero-copy .container { width: 100%; }
  .hero-text { max-width: 33rem; }
  .hero .lead { max-width: 28rem; }
  .wall-label { left: 52%; right: auto; bottom: 9%; }
}

/* =====================================================================
   Trust strip — only what the live policy pages promise
   ===================================================================== */
.trust { border-bottom: 1px solid var(--color-border); }
.salty-home .trust ul { display: flex; flex-direction: column; margin: 0; padding: var(--space-4) 0; list-style: none; }
.trust li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-md); font-weight: 500; color: var(--color-heading); }
.trust li::before { content: ""; flex: none; width: 20px; height: 20px; background: url("../img/sun-flower.png") center / contain no-repeat; }
.trust a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--color-border-frame); }
.trust a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .salty-home .trust ul { flex-direction: row; justify-content: center; padding: var(--space-2) 0; }
  .trust li { padding: var(--space-3) clamp(var(--space-4), 3vw, 2.5rem); }
  .trust li + li { border-left: 1px solid var(--color-border); }
}

/* =====================================================================
   Collections — full-bleed colour blocks: image ∣ blush, peach ∣ image
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr; }
.split-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-fallback); }
.split-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-deliberate) var(--ease-move);
}
.split--watercolor .split-media img { object-position: 50% 32%; }
.split--mixed .split-media img { object-position: 50% 40%; }
.split-panel { display: flex; align-items: center; padding: var(--space-7) var(--gutter) var(--space-8); }
.split-panel .stack { max-width: 30rem; }
.split-panel .ctas { margin-top: var(--space-6); }
.split-panel .wp-block-button, .split-panel .wp-block-button__link { width: 100%; }
.panel--tint { background: var(--color-surface-tint); }
.panel--warm { background: var(--color-surface-warm); }
.panel--warm .eyebrow, .panel--warm .meta { color: var(--color-text-on-warm); }
.panel--warm p { color: var(--color-text-on-warm); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .split:hover .split-media img { transform: scale(1.04); }
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; min-height: clamp(560px, 52vw, 780px); }
  .split-media { aspect-ratio: auto; }
  .split-panel { padding: clamp(var(--space-7), 7vw, 7rem); }
  .split-panel .wp-block-button, .split-panel .wp-block-button__link { width: auto; }
  .split--reverse .split-media { order: 2; }
}

/* =====================================================================
   Best sellers — bottom scrim sized to the text, room swap on hover/tap
   ===================================================================== */
.bestsellers { padding-block: var(--section-y); }
.bestsellers .section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4) var(--space-6); margin-bottom: var(--space-7);
}
.section-head .head-link { display: none; }
.card-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.salty-home .card-list { padding: 0; list-style: none; }
.card-list > li { position: relative; }
.art-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 5 / 7;
  background: rgb(var(--scrim));  /* dark fallback keeps the white type legible if an image fails */
  color: var(--color-on-image); text-decoration: none;
}
.art-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: opacity var(--duration-moderate) var(--ease-move),
              transform var(--duration-deliberate) var(--ease-move);
}
.art-card .room { opacity: 0; }
.art-card:focus-visible .room, .card-list > li.is-room .room { opacity: 1; }
.art-card:focus-visible { outline-offset: 4px; }
@media (hover: hover) {
  .art-card:hover .room { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .art-card:hover img { transform: scale(1.03); }
}
/* the scrim belongs to the text block, so a title that wraps stays on the dense part */
.art-card-text {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: grid; gap: 2px;
  padding: var(--space-7) var(--space-3) var(--space-3);
  background: linear-gradient(to top,
    rgb(var(--scrim) / 0.76) 0,
    rgb(var(--scrim) / 0.66) calc(100% - var(--space-6)),
    rgb(var(--scrim) / 0) 100%);
  text-shadow: var(--shadow-on-image);
}
.art-card h3 { font-size: var(--text-xl); font-weight: 450; line-height: var(--leading-snug); letter-spacing: -0.005em; color: var(--color-on-image); }
.art-card .price { font-size: var(--text-xs); font-weight: 500; color: var(--color-on-image-muted); font-variant-numeric: tabular-nums; }
/* touch devices have no hover: a toggle shows the room view instead */
.room-toggle {
  display: none;
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  min-height: 44px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-control-on-image); color: var(--color-on-image-muted);
  font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: 0.02em;
}
.room-toggle:focus-visible { outline-color: var(--color-on-image); }
.room-toggle[aria-pressed="true"] { background: var(--color-label-bg); color: var(--color-heading); }
@media (hover: none) and (pointer: coarse) { .room-toggle { display: inline-flex; align-items: center; } }
.bestsellers .grid-foot { margin-top: var(--space-6); }
.grid-foot .wp-block-button, .grid-foot .wp-block-button__link { width: 100%; }
@media (min-width: 768px) {
  .card-list { gap: var(--space-5); }
  .art-card-text { padding: var(--space-8) var(--space-5) var(--space-5); gap: var(--space-1); }
  .art-card .price { font-size: var(--text-md); }
  .room-toggle { top: var(--space-3); right: var(--space-3); padding: 0 var(--space-4); }
  .section-head .head-link { display: flex; }
  .bestsellers .grid-foot { display: none; }
}
@media (min-width: 1024px) {
  .card-list { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   Meet the artist — portrait framed like a print, stamp as a sticker
   ===================================================================== */
.artist { padding-block: var(--section-y); background: var(--color-surface-tint); }
.artist-grid { display: grid; gap: var(--space-7); align-items: center; }
.portrait { position: relative; width: 100%; max-width: 32.5rem; margin: 0; padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border-frame); }
.portrait-img { overflow: hidden; }
.portrait-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.salty-home .portrait .stamp {
  position: absolute; z-index: 1; top: -22px; right: -6px;
  width: 80px; height: 80px; padding: var(--space-2);
  border-radius: 50%; background: var(--color-bg);
  transform: rotate(-10deg); box-shadow: var(--shadow-soft);
}
.portrait .stamp img { width: 100%; height: 100%; }
.artist-copy .lead { color: var(--color-text); }
.artist-copy .wp-block-button, .artist-copy .wp-block-button__link { width: 100%; }
@media (min-width: 900px) {
  .artist-grid { grid-template-columns: 5fr 1fr 6fr; gap: 0; }
  .portrait { grid-column: 1; padding: var(--space-4); }
  .salty-home .portrait .stamp { top: -34px; right: -34px; width: 104px; height: 104px; }
  .artist-copy { grid-column: 3; }
  .artist-copy .wp-block-button, .artist-copy .wp-block-button__link { width: auto; }
}

/* =====================================================================
   Life by the sea — Patty's landscape film, full bleed, autoplays muted.
   ===================================================================== */
.artist:has(+ .life) { padding-bottom: var(--space-7); }
.life { padding-bottom: var(--section-y); background: var(--color-surface-tint); }
.life-screen { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; max-height: 82svh; background: var(--color-surface-fallback); }
.life-screen .wp-block-video { height: 100%; }
.life-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* placeholder label: stays over the stand-in loop (.is-placeholder) until Patty's film is delivered */
.film-placeholder {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-content: center; justify-items: center; gap: var(--space-2);
  padding: var(--space-4); text-align: center;
  color: var(--color-heading);
}
.film-placeholder[hidden] { display: none; }
.film-placeholder::before {
  content: ""; width: 40px; height: 40px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='6' y='16' width='30' height='24' rx='3'/%3E%3Cpath d='M36 24l14-7v22l-14-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='6' y='16' width='30' height='24' rx='3'/%3E%3Cpath d='M36 24l14-7v22l-14-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.film-placeholder .ph-title { font: 450 var(--text-xl)/1.2 var(--font-display); font-variation-settings: "SOFT" 100; letter-spacing: -0.005em; }
.film-placeholder .ph-meta { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-caps); text-transform: uppercase; text-wrap: balance; color: var(--color-heading); }
.life .life-caption { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.life-caption h2.eyebrow { font-family: var(--font-body); font-variation-settings: normal; text-wrap: wrap; }
.life-caption p { max-width: var(--measure); font-size: var(--text-md); color: var(--color-text); }
.life .film-toggle { right: var(--gutter); bottom: var(--space-4); }
@media (min-width: 640px) {
  .life-screen { aspect-ratio: 16 / 9; }
  .film-placeholder { gap: var(--space-3); }
  .film-placeholder::before { width: 56px; height: 56px; }
  .life .film-toggle { bottom: var(--space-5); }
}
@media (min-width: 900px) {
  .life-screen { aspect-ratio: 21 / 9; }
  .film-placeholder::before { width: 64px; height: 64px; }
  .life .life-caption { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-5); margin-top: var(--space-5); }
}

/* =====================================================================
   Video closer — the page's one warm, dark moment (espresso)
   ===================================================================== */
.closer { padding-block: var(--section-y); background: var(--color-surface-deep); color: var(--color-text-on-deep); }
.closer-grid { display: grid; gap: var(--space-7); align-items: center; }
.closer h2 { font-size: var(--text-4xl); font-weight: 330; line-height: 1; letter-spacing: -0.03em; color: var(--color-text-on-deep); max-width: 12ch; }
.closer .lead { color: var(--color-text-on-deep-muted); max-width: 26rem; }
.closer .ctas { margin-top: var(--space-7); }
.closer .wp-block-button, .closer .wp-block-button__link { width: 100%; }
.salty-home .film-frame { position: relative; order: -1; width: 100%; max-width: 32.5rem; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-fallback); }
.film-frame img, .film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-toggle {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  min-height: 44px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-action-light-bg); color: var(--color-action-light-text);
  font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.film-toggle[hidden] { display: none; }
/* two-tone ring over footage: dark inner + light outer, one of the two contrasts >= 3:1 with any frame */
.film-toggle:focus-visible, .on-dark .film-toggle:focus-visible {
  outline: 2px solid var(--color-focus-on-dark); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus);
}
@media (min-width: 900px) {
  .closer-grid { grid-template-columns: 6fr 1fr 5fr; gap: 0; }
  .closer-copy { grid-column: 1; }
  .salty-home .film-frame { grid-column: 3; order: 0; }
  .closer .wp-block-button, .closer .wp-block-button__link { width: auto; }
}

/* =====================================================================
   Newsletter — WPForms Lite form styled as the mockup's form row
   ===================================================================== */
.newsletter { padding-block: var(--section-y); background: var(--color-surface-tint); text-align: center; }
.newsletter .inner { max-width: 36rem; margin-inline: auto; }
.newsletter h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.newsletter .wpforms-container { margin: var(--space-6) 0 0 !important; }
.newsletter .wpforms-form { display: flex; flex-direction: column; gap: var(--space-2); }
.newsletter .wpforms-field-container { flex: 1; }
.newsletter .wpforms-field { padding: 0 !important; }
.newsletter .wpforms-field-label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.newsletter .wpforms-form input[type="email"] {
  width: 100%; max-width: none !important; min-height: 52px; height: 52px; padding: 0 var(--space-5);
  border: 1px solid var(--color-border-field) !important; border-radius: var(--radius-pill) !important;
  background: var(--color-bg) !important; color: var(--color-heading) !important;
  font: 400 1rem/1 var(--font-body); box-shadow: none !important;
}
.newsletter .wpforms-form input[type="email"]::placeholder { color: var(--color-text-muted); opacity: 1; }
.newsletter .wpforms-form input[aria-invalid="true"], .newsletter .wpforms-form input.wpforms-error { border-color: var(--color-error) !important; border-width: 2px !important; }
.newsletter .wpforms-submit-container { margin: 0 !important; padding: 0 !important; }
.newsletter .wpforms-form button.wpforms-submit {
  min-height: 52px; height: 52px; padding: 0 var(--space-6) !important;
  border: 1.5px solid var(--color-action-bg) !important; border-radius: var(--radius-pill) !important;
  background: var(--color-action-bg) !important; color: var(--color-action-text) !important;
  font: 600 var(--text-sm)/1 var(--font-body) !important; letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.newsletter .wpforms-form button.wpforms-submit:hover { background: var(--color-action-bg-hover) !important; }
.newsletter .wpforms-form .wpforms-error, .newsletter em.wpforms-error, .newsletter label.wpforms-error {
  margin-top: var(--space-3); font-size: var(--text-md) !important; font-weight: 500; font-style: normal; color: var(--color-error) !important; text-align: left;
}
.newsletter .wpforms-confirmation-container-full {
  margin: var(--space-5) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: 450 1.25rem/1.3 var(--font-display); color: var(--color-heading) !important;
}
.newsletter .fine { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.fine a { color: var(--color-heading); text-underline-offset: 3px; }
.newsletter .contact-line { margin-top: var(--space-5); font-size: var(--text-md); }
.newsletter .contact-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-heading); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 540px) { .newsletter .wpforms-form { flex-direction: row; align-items: flex-start; } }

/* =====================================================================
   Footer — charcoal band, white type, giant cropped wordmark
   ===================================================================== */
.site-footer { overflow: hidden; padding-top: var(--space-9); background: var(--color-surface-footer); color: var(--color-text-on-footer); font-size: var(--text-md); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand img { width: 92px; height: 92px; }
.site-footer .footer-brand p { margin-top: var(--space-4); max-width: 18rem; }
.site-footer .footer-title {
  margin-bottom: var(--space-3);
  font: 600 var(--text-xs)/1.3 var(--font-body); font-variation-settings: normal;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-on-footer);
}
.site-footer .footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-on-footer); text-decoration: none; }
.footer-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-base { margin-top: var(--space-8); border-top: 1px solid var(--color-border-on-footer); }
.footer-base .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); font-size: var(--text-xs); }
.footer-base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-on-footer); text-underline-offset: 4px; }
/* centred and wider than the screen, so it crops evenly on both sides */
.site-footer .wordmark {
  position: relative; left: 50%;
  width: max-content; margin: var(--space-5) 0 0;
  font: 500 clamp(4rem, 15.5vw, 15.5rem)/0.78 var(--font-display);
  font-variation-settings: "SOFT" 100;
  letter-spacing: -0.045em; white-space: nowrap;
  color: var(--color-wordmark);
  transform: translate(-50%, 14%);
  user-select: none;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-6); }
  .footer-brand { grid-column: auto; }
}

/* =====================================================================
   Reduced motion: keep fades for state clarity, drop scale and slide
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split-media img, .art-card img, .has-arrow .wp-block-button__link::after { transition: opacity var(--duration-quick) linear; transform: none !important; }
}

/* =====================================================================
   Regular pages, posts, 404
   ===================================================================== */
.salty-page { padding-block: var(--space-7) var(--section-y); }
.salty-page .page-title { font-size: var(--text-3xl); font-weight: 350; line-height: 1.02; letter-spacing: -0.025em; }

/* =====================================================================
   WooCommerce and forms on regular pages
   ===================================================================== */
/* product grid buttons: one line on two-column phones */
.wc-block-components-product-button .wp-element-button,
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
  min-height: 44px; padding: 0 var(--space-4); white-space: nowrap; font-size: 0.8125rem; letter-spacing: 0.06em;
}
@media (max-width: 479px) {
  .wc-block-components-product-button .wp-element-button,
  .wp-block-button.wc-block-components-product-button .wp-block-button__link { padding: 0 var(--space-3); letter-spacing: 0.03em; font-size: 0.75rem; }
}
/* WPForms (contact form and others): fields and submit in the theme's look */
.wpforms-container .wpforms-form button.wpforms-submit {
  min-height: 52px; padding: 0 var(--space-6) !important;
  border: 1.5px solid var(--color-action-bg) !important; border-radius: var(--radius-pill) !important;
  background: var(--color-action-bg) !important; color: var(--color-action-text) !important;
  font: 600 var(--text-sm)/1 var(--font-body) !important; letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.wpforms-container .wpforms-form button.wpforms-submit:hover { background: var(--color-action-bg-hover) !important; }
.wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], textarea) {
  border: 1px solid var(--color-border-field) !important; border-radius: var(--radius-sm) !important;
  background: var(--color-bg) !important; color: var(--color-heading) !important; font-family: var(--font-body);
}
.wpforms-container .wpforms-form .wpforms-field-label { color: var(--color-heading); font-weight: 600; }
/* WPForms' required asterisk and error red (#d63637) is 4.07:1 on linen; use the theme's error colour */
.wpforms-container { --wpforms-label-error-color: var(--color-error); }
div.wpforms-container .wpforms-form .wpforms-required-label { color: var(--color-error) !important; }

/* =====================================================================
   Single product (WooCommerce default template, classic flexslider gallery)
   Why: notes/pdp-mobile-2026-10-25/REPORT.md (one thumbnail row, last one cut off; Baymard)
   ===================================================================== */
/* zoom/lightbox button: 44 px target (WooCommerce ships 36 px), icon re-centred */
.single-product div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger { width: 44px; height: 44px; top: var(--space-3); right: var(--space-3); }
.single-product div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before { left: 13px; top: 13px; }
.single-product div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after { left: 26px; top: 23px; }
/* thumbnails: full colour, the current one framed (WooCommerce greys out all others to 50%) */
.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img { opacity: 1; border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: -2px; }
.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active { outline-color: var(--color-heading); }

@media (max-width: 1023px) {
  /* the template's gallery column is fixed at 512 px, which left the summary 200 px wide at 800: stack */
  .single-product .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery) { flex-wrap: wrap !important; }
  .single-product .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery) > .wp-block-column { flex-basis: 100% !important; }
  .single-product .wp-block-woocommerce-product-image-gallery { max-width: 640px; } /* WooCommerce caps it at 512; 640 keeps title and price on a tablet's first screen */
  /* one swipeable row of thumbnails; 4.5 visible so the cut-off one says "more" */
  .single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
    --thumb-gap: var(--space-2);
    display: flex; gap: var(--thumb-gap); margin-top: var(--thumb-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
  .single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
    float: none; width: auto; flex: 0 0 calc((100% - 4 * var(--thumb-gap)) / 4.5); scroll-snap-align: start;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li { flex-basis: calc((100% - 6 * var(--thumb-gap)) / 6.5); }
}

/* currency: compact select under Add to cart (moved there in functions.php) */
.salty-currency { display: flex; align-items: center; margin-bottom: 0; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.salty-currency label { margin: 0; line-height: 1.2; }
.salty-currency select { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border-field); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-heading); font: inherit; }
.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--color-bg); } /* inside the box: the scrolling row clips anything outside */

/* category intro (term description), placed under the product grid in templates/taxonomy-product_cat.html */
.is-layout-constrained > .salty-cat-intro, .salty-cat-intro { max-width: var(--measure); margin-top: var(--space-8); margin-bottom: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-text); line-height: var(--leading-body); }
.salty-cat-intro p { margin: 0 0 var(--space-4); }
.salty-cat-intro p:last-child { margin-bottom: 0; }
.salty-cat-intro a { color: var(--color-heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.salty-cat-intro a:hover { text-decoration-thickness: 2px; }

/* Frame / Size selects in the theme's field look. Explicit background colour so the text sits on a measurable
   colour (WooCommerce's arrow is a background image); 16 px stops iOS from zooming on focus. */
.single-product div.product form.cart table.variations select {
  min-height: 44px; padding: 0 2.25rem 0 var(--space-3);
  border: 1px solid var(--color-border-field); border-radius: var(--radius-sm);
  background-color: var(--color-bg); color: var(--color-heading); font: 400 1rem/1.2 var(--font-body);
}
/* Add to cart before Frame/Size are chosen: WooCommerce fades it to 50% (3.02:1) but it stays clickable
   (it then asks for the options), so it keeps full contrast */
.single-product div.product form.cart .single_add_to_cart_button.disabled { opacity: 1; cursor: pointer; }
/* inactive tabs: WooCommerce fades them to 65% (3.62:1); muted brown at full opacity is 7.1:1 */
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li { opacity: 1; } /* beats WooCommerce's "html body … li" */
.single-product div.product .woocommerce-tabs ul.tabs li:not(.active) a { color: var(--color-text-muted); }

/* sticky buy bar (theme.js): shown while the real Add to cart is off screen */
.salty-buybar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg); border-top: 1px solid var(--color-border-field);
  box-shadow: 0 -6px 18px rgb(68 34 2 / 0.08);
  transform: translateY(0); transition: transform var(--duration-quick, .2s) ease, visibility 0s;
}
.salty-buybar[hidden] { display: flex; visibility: hidden; transform: translateY(110%); transition: transform var(--duration-quick, .2s) ease, visibility 0s linear var(--duration-quick, .2s); }
.salty-buybar__text { min-width: 0; display: grid; line-height: 1.25; }
.salty-buybar__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--color-heading); font-size: var(--text-sm); }
.salty-buybar__price { color: var(--color-text); font-size: var(--text-sm); }
.salty-buybar__btn { flex: none; min-height: 48px; padding-inline: var(--space-5); white-space: nowrap; }
.has-buybar { padding-bottom: 88px; }
@media (min-width: 1024px) {
  /* desktop: same bar, its content lined up with the page container */
  .salty-buybar { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .salty-buybar__name, .salty-buybar__price { font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) { .salty-buybar, .salty-buybar[hidden] { transition: none; } }

/* =====================================================================
   Single product, own template (templates/single-product.html)
   Why: notes/pdp-desktop-2026-10-25/REPORT.md: image column wider than the buy column, one rail of
   thumbnails, a fixed image box, one "From" price, a shipping line, accordions instead of tabs.
   ===================================================================== */
.salty-pdp .woocommerce-breadcrumb, .salty-pdp .wc-block-breadcrumbs { font-size: var(--text-md); }
.salty-pdp__summary > * { margin-block: 0; }
.salty-pdp__summary > * + * { margin-top: var(--space-5); }
.salty-pdp .salty-pdp__artist { margin-bottom: 0; }
.salty-pdp .salty-pdp__artist + .salty-pdp__title { margin-top: var(--space-3); }
.salty-pdp .salty-pdp__title { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1.08; } /* 32→44; was the 76 px page title */
.salty-pdp .salty-pdp__title + .salty-pdp__price { margin-top: var(--space-3); }
.salty-pdp__price { font-size: var(--text-lg); color: var(--color-heading); }
.salty-from { margin-right: 0.3em; font-size: var(--text-md); color: var(--color-text-muted); }
.salty-pdp__excerpt { max-width: var(--measure); }
.salty-pdp__excerpt p { margin: 0; }
.salty-pdp .salty-pdp__note { margin-top: var(--space-3); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); max-width: var(--measure); }
.single-product div.product .salty-pdp__media div.images { margin-bottom: 0; }

/* trust line under Add to cart: the homepage strip's wording and sun icon, stacked */
.salty-pdp__trust { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.salty-pdp__trust li { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; font-size: var(--text-md); font-weight: 500; color: var(--color-heading); }
.salty-pdp__trust li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("../img/sun-flower.png") center / contain no-repeat; }
.salty-pdp__trust a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--color-border-frame); }
.salty-pdp__trust a:hover { text-decoration-color: currentColor; }

/* accordions (core/accordion inside woocommerce/product-details) */
.salty-pdp__details .wp-block-accordion { border-top: 1px solid var(--color-border); }
.salty-pdp__details .wp-block-accordion-item { border-bottom: 1px solid var(--color-border); }
.salty-pdp__details .wp-block-accordion-heading { margin: 0; font-size: var(--text-xl); }
.salty-pdp__details .wp-block-accordion-heading__toggle {
  display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border: 0; background: none; color: var(--color-heading); font: inherit; text-align: left; cursor: pointer;
}
.salty-pdp__details .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.salty-pdp__details .wp-block-accordion-heading__toggle-icon { flex: none; font-family: var(--font-body); font-size: 1.5rem; line-height: 1; transition: transform var(--duration-normal) var(--ease-move); }
.salty-pdp__details .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
.salty-pdp__details .wp-block-accordion-panel { padding-bottom: var(--space-5); }
.salty-pdp__details .wp-block-accordion-panel > :first-child, .salty-pdp__details .wp-block-accordion-panel > :first-child > :first-child { margin-top: 0; }
.salty-pdp__details .wp-block-accordion-panel p, .salty-pdp__details .wp-block-accordion-panel ul { margin: 0 0 var(--space-4); }
.salty-pdp__details .wp-block-accordion-panel :is(h2, h3) { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); line-height: 1.3; }
.salty-pdp__details .wp-block-accordion-panel :is(h2, h3) strong { font-weight: inherit; }
.salty-pdp__details .wp-block-accordion-panel ul { padding-left: 1.2em; }
.salty-pdp__details .wp-block-accordion-panel a { color: var(--color-heading); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) { .salty-pdp__details .wp-block-accordion-heading__toggle-icon { transition: none; } }
.salty-pdp .salty-pdp__sizeguide { font-size: var(--text-md); color: var(--color-text-muted); }
.salty-pdp__sizeguide a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-heading); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.salty-pdp .salty-pdp__cats { font-size: var(--text-md); color: var(--color-text-muted); }

@media (min-width: 1024px) {
  /* image column wider than the buy column (WooCommerce's template fixed it at 512 px, 36% at 1440) */
  .salty-pdp .salty-pdp__cols { gap: clamp(2.5rem, 4vw, 4.5rem); align-items: flex-start; margin-top: var(--space-5); }
  .salty-pdp .salty-pdp__cols > .salty-pdp__media { flex: 0 0 56% !important; max-width: 56%; align-self: flex-start !important; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .salty-pdp .salty-pdp__cols > .salty-pdp__summary { flex: 1 1 0 !important; min-width: 0; }
  .salty-pdp .wp-block-woocommerce-product-image-gallery { max-width: none; }

  /* thumbnails as a rail left of the image, as tall as the image box, scrolling if longer */
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery {
    --rail: 88px;
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--space-4); align-items: start;
  }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery > :is(.flex-viewport, .woocommerce-product-gallery__wrapper) { grid-column: 2; grid-row: 1; }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery .flex-control-thumbs {
    grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-2);
    height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
  }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery .flex-control-thumbs li { float: none; width: 100%; flex: none; }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery .flex-control-thumbs li img { aspect-ratio: 1; object-fit: cover; }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger { right: var(--space-3); }

  /* one box for every slide (portrait-ish tile, capped to the screen), so the page doesn't jump between a square
     poster and a 4:5 room scene; the artwork sits on the warm panel colour like a print on a table */
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 9.5rem); min-height: 420px;
    display: flex; align-items: center; justify-content: center; background: var(--color-surface-tint); border-radius: var(--radius-sm); overflow: hidden;
  }
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image > a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image img.wp-post-image,
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image > a > img { width: 100%; height: 100%; object-fit: contain; }
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image .zoomImg { cursor: zoom-in; background: var(--color-surface-tint); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .salty-pdp .salty-pdp__cols > .salty-pdp__media { flex-basis: 52% !important; max-width: 52%; }
  .single-product div.product .salty-pdp__media div.images.woocommerce-product-gallery { --rail: 72px; }
}

/* guide pages (content/pages/): lead paragraph and simple data tables */
.salty-page .salty-lead { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); }
.salty-page .salty-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.salty-page .salty-table th, .salty-page .salty-table td { border: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-3) var(--space-3) 0; text-align: left; vertical-align: top; }
.salty-page .salty-table thead th { color: var(--color-heading); font-weight: 600; border-bottom-width: 2px; }
.salty-page .salty-table figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); text-align: left; }

/* ---------- Styled at home (inc/styled.php): AI room scenes below the product columns, labelled as illustrations ---------- */
.salty-styled { margin-top: var(--space-9); margin-bottom: var(--space-8); }
.salty-styled .salty-styled__title { margin: 0; }
.salty-styled .salty-styled__note { margin: var(--space-3) 0 0; max-width: var(--measure); font-size: var(--text-md); line-height: 1.5; color: var(--color-text-muted); }
.salty-styled .salty-styled__grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.salty-styled .salty-styled__item { margin: 0; }
.salty-styled .salty-styled__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-tint); }
@media (min-width: 768px) {
  .salty-styled { margin-top: var(--space-10); }
  .salty-styled .salty-styled__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

/* ---------- Frame / Size pickers (theme.js): radio buttons over the hidden variation selects ---------- */
/* WooCommerce's add-to-cart block makes form.cart a grid of content-sized columns for simple products
   (quantity | button); on variable products the options only got 432 of 523 px. Quantity and button sit in
   their own grid (.variations_button), so the form itself can be a plain block. */
.single-product .wp-block-woocommerce-add-to-cart-form form.cart.variations_form { display: block; }
.single-product div.product form.cart table.variations.salty-opt-on,
.single-product div.product form.cart table.variations.salty-opt-on :is(tbody, tr, td) { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; line-height: 1.3; }
.single-product div.product form.cart table.variations.salty-opt-on { margin-bottom: var(--space-4); }
.single-product div.product form.cart table.variations.salty-opt-on tr + tr { margin-top: var(--space-4); }
.single-product div.product form.cart table.variations.salty-opt-on :is(th.label, td.value > select) { display: none; }
.single-product div.product form.cart table.variations.salty-opt-on .reset_variations { display: inline-block; margin-top: var(--space-3); font-size: var(--text-md); color: var(--color-heading); text-decoration: underline; text-underline-offset: 0.2em; }
.salty-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.salty-opt__legend { margin: 0 0 var(--space-2); padding: 0; font: 600 var(--text-md)/1.3 var(--font-body); color: var(--color-heading); }
.salty-opt__current { font-weight: 400; color: var(--color-text); }
.salty-opt__list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.salty-opt--frame .salty-opt__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.salty-opt .salty-opt__item {
  position: relative; font-weight: 400; display: flex; align-items: center; gap: var(--space-3); min-height: 46px; margin: 0;
  padding: 5px var(--space-3); cursor: pointer;
  border: 1px solid var(--color-border-field); border-radius: var(--radius-sm); background: var(--color-bg);
  transition: border-color var(--duration-quick, .2s) ease, box-shadow var(--duration-quick, .2s) ease;
}
.salty-opt .salty-opt__item:hover { border-color: var(--color-heading); }
.salty-opt__item.is-on { border-color: var(--color-heading); box-shadow: inset 0 0 0 1px var(--color-heading); background: var(--color-surface-tint); }
.salty-opt__item:has(.salty-opt__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.salty-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.salty-opt__text { display: grid; min-width: 0; gap: 1px; }
.salty-opt__label { font: 500 var(--text-md)/1.25 var(--font-body); color: var(--color-heading); }
.salty-opt__price { font-weight: 400; font-size: var(--text-xs); line-height: 1.25; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.salty-opt__item.is-off { cursor: not-allowed; border-style: dashed; background: none; }
.salty-opt__item.is-off :is(.salty-opt__label, .salty-opt__price) { color: var(--color-text-muted); }
.salty-opt__item.is-off .salty-opt__label { text-decoration: line-through; }
.salty-opt__note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.salty-opt__status:empty { margin: 0; } /* stays in the accessibility tree, so the live region is announced */
.salty-opt__status { margin: 0 0 var(--space-4); font-size: var(--text-md); color: var(--color-heading); }
/* frame swatches: a small framed print (decorative; the label names the frame) */
.salty-opt__swatch {
  flex: none; width: 24px; height: 30px; border-radius: 2px;
  background: var(--color-surface-warm); border: 4px solid var(--sw-frame, transparent); box-shadow: inset 0 0 0 var(--sw-mat, 0) var(--white);
}
.salty-opt__swatch--no-frame { border: 1px solid var(--color-border-field); }
.salty-opt__swatch--black, .salty-opt__swatch--black-with-mat { --sw-frame: #1E1B19; }
.salty-opt__swatch--oak { --sw-frame: #B07A45; }
.salty-opt__swatch--white, .salty-opt__swatch--white-with-mat { --sw-frame: var(--white); outline: 1px solid var(--color-border-field); outline-offset: -1px; }
.salty-opt__swatch--black-with-mat, .salty-opt__swatch--white-with-mat { --sw-mat: 4px; }
@media (prefers-reduced-motion: reduce) { .salty-opt__item { transition: none; } }

/* ---------- Mobile PDP: swipe dots, 14 px gutter (2026-10-25, Tobias; notes in design/pdp-mobile-dots-2026-10-25/) ---------- */
/* phones: 14 px side margin site-wide (header, page, footer stay aligned). theme.json's root padding is a literal,
   so both custom properties are set (global styles define the root padding on body, --gutter lives on :root) */
@media (max-width: 479px) {
  html:root { --gutter: 0.875rem; }
  html body { --wp--style--root--padding-left: 0.875rem; --wp--style--root--padding-right: 0.875rem; }
}
/* below 1024 px the thumbnail row gives way to dots over the image (theme.js builds .salty-dots inside .flex-viewport);
   the thumbnails stay in the DOM: flexslider and the variation image swap drive them, the dots mirror them */
@media (max-width: 1023px) {
  .single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs { display: none; }
  .salty-dots {
    position: absolute; left: 50%; bottom: var(--space-3); z-index: 2; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0; padding: 0 var(--space-1);
    border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.82);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
  }
  .salty-dots__dot {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: none; cursor: pointer;
  }
  .salty-dots__dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brown-600);
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  .salty-dots__dot[aria-current="true"]::before { width: 20px; border-radius: var(--radius-pill); background: var(--color-heading); }
  .salty-dots__dot[aria-current="true"] { width: 32px; } /* room for the 20 px pill, 6 px either side */
  .salty-dots__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .salty-dots__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* more than 7 images: a visible "2 / 9" counter instead of dots (Baymard: 3 to 7 dots) */
  .salty-dots--count .salty-dots__dot { display: none; }
  .salty-dots--count .salty-dots__count { position: static; width: auto; height: 24px; overflow: visible; clip-path: none; padding: 0 var(--space-2); font: 600 var(--text-xs)/24px var(--font-body); color: var(--color-heading); font-variant-numeric: tabular-nums; }
}
@media (min-width: 1024px) { .salty-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .salty-dots__dot::before { transition: none; } }
/* phones: compact options without dropping swatches, prices or availability. Both lists keep two columns down
   to 320 px (Frame's 10.5rem minimum fell to one column below 375); chips 44 px (Apple's minimum) instead of 46 to
   48 with tighter padding, so "Black with mat" stays on one line at 360. Three size columns were tried and dropped:
   the A-size labels ("A1 (59.4 x 84.1 cm)") wrap to three lines */
@media (max-width: 599px) {
  .salty-opt__list, .salty-opt--frame .salty-opt__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salty-opt .salty-opt__item { min-height: 44px; padding: 3px 10px; gap: var(--space-2); }
  .salty-opt__swatch { width: 22px; height: 28px; }
}
/* phones: the gallery runs edge to edge in a 4:5 box (desktop's ratio). The square images carry wide margins
   around the poster, so cover only trims those: the poster grows from about 211 to 288 px wide at 390 */
@media (max-width: 599px) {
  .single-product .salty-pdp__media .wp-block-woocommerce-product-image-gallery { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image { aspect-ratio: 4 / 5; max-height: calc(100svh - 190px); overflow: hidden; } /* short phones: header + breadcrumb + buy bar stay clear of the dots */
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; }
  .single-product div.product .salty-pdp__media .woocommerce-product-gallery__image > a > img { width: 100%; height: 100%; object-fit: cover; }
}
/* toggle salty_frame_prices = hide (inc/product.php): Frame buttons without their price line on phones; prices stay on
   the Size buttons, in the variation price and the buy bar; "Other sizes, from …" / "Not available" hints stay */
@media (max-width: 599px) {
  .salty-frame-prices-hidden .salty-opt--frame .salty-opt__price:not(.is-hint) { display: none; }
  /* without the price line a frame button needs less width: three columns where a 108 px button fits (two below
     about 340 px); hiding the line alone saved nothing, because the buttons keep their 44 px minimum height */
  .salty-frame-prices-hidden .salty-opt--frame .salty-opt__list { grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); }
}